option.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. /*!
  2. * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  3. * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  4. * v1.0.0-beta.97
  5. */
  6. import { h } from "@stencil/core";
  7. import { createObserver } from "../../utils/observers";
  8. export class Option {
  9. constructor() {
  10. //--------------------------------------------------------------------------
  11. //
  12. // Properties
  13. //
  14. //--------------------------------------------------------------------------
  15. /**
  16. * When `true`, interaction is prevented and the component is displayed with lower opacity.
  17. */
  18. this.disabled = false;
  19. this.mutationObserver = createObserver("mutation", () => {
  20. this.ensureTextContentDependentProps();
  21. this.calciteInternalOptionChange.emit();
  22. });
  23. }
  24. handlePropChange(_newValue, _oldValue, propName) {
  25. if (propName === "label" || propName === "value") {
  26. this.ensureTextContentDependentProps();
  27. }
  28. this.calciteInternalOptionChange.emit();
  29. }
  30. //--------------------------------------------------------------------------
  31. //
  32. // Private Methods
  33. //
  34. //--------------------------------------------------------------------------
  35. ensureTextContentDependentProps() {
  36. const { el: { textContent } } = this;
  37. if (!this.label || this.label === this.internallySetLabel) {
  38. this.label = textContent;
  39. this.internallySetLabel = textContent;
  40. }
  41. if (!this.value || this.value === this.internallySetValue) {
  42. this.value = textContent;
  43. this.internallySetValue = textContent;
  44. }
  45. }
  46. //--------------------------------------------------------------------------
  47. //
  48. // Lifecycle
  49. //
  50. //--------------------------------------------------------------------------
  51. connectedCallback() {
  52. var _a;
  53. this.ensureTextContentDependentProps();
  54. (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, {
  55. attributeFilter: ["label", "value"],
  56. characterData: true,
  57. childList: true,
  58. subtree: true
  59. });
  60. }
  61. disconnectedCallback() {
  62. var _a;
  63. (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
  64. }
  65. //--------------------------------------------------------------------------
  66. //
  67. // Render Methods
  68. //
  69. //--------------------------------------------------------------------------
  70. render() {
  71. return h("slot", null, this.label);
  72. }
  73. static get is() { return "calcite-option"; }
  74. static get encapsulation() { return "shadow"; }
  75. static get originalStyleUrls() {
  76. return {
  77. "$": ["option.scss"]
  78. };
  79. }
  80. static get styleUrls() {
  81. return {
  82. "$": ["option.css"]
  83. };
  84. }
  85. static get properties() {
  86. return {
  87. "disabled": {
  88. "type": "boolean",
  89. "mutable": false,
  90. "complexType": {
  91. "original": "boolean",
  92. "resolved": "boolean",
  93. "references": {}
  94. },
  95. "required": false,
  96. "optional": false,
  97. "docs": {
  98. "tags": [],
  99. "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
  100. },
  101. "attribute": "disabled",
  102. "reflect": true,
  103. "defaultValue": "false"
  104. },
  105. "label": {
  106. "type": "string",
  107. "mutable": true,
  108. "complexType": {
  109. "original": "string",
  110. "resolved": "string",
  111. "references": {}
  112. },
  113. "required": false,
  114. "optional": false,
  115. "docs": {
  116. "tags": [],
  117. "text": "Accessible name for the component."
  118. },
  119. "attribute": "label",
  120. "reflect": false
  121. },
  122. "selected": {
  123. "type": "boolean",
  124. "mutable": false,
  125. "complexType": {
  126. "original": "boolean",
  127. "resolved": "boolean",
  128. "references": {}
  129. },
  130. "required": false,
  131. "optional": false,
  132. "docs": {
  133. "tags": [],
  134. "text": "When `true`, the component is selected."
  135. },
  136. "attribute": "selected",
  137. "reflect": true
  138. },
  139. "value": {
  140. "type": "any",
  141. "mutable": true,
  142. "complexType": {
  143. "original": "any",
  144. "resolved": "any",
  145. "references": {}
  146. },
  147. "required": false,
  148. "optional": false,
  149. "docs": {
  150. "tags": [],
  151. "text": "The component's value."
  152. },
  153. "attribute": "value",
  154. "reflect": false
  155. }
  156. };
  157. }
  158. static get events() {
  159. return [{
  160. "method": "calciteInternalOptionChange",
  161. "name": "calciteInternalOptionChange",
  162. "bubbles": true,
  163. "cancelable": false,
  164. "composed": true,
  165. "docs": {
  166. "tags": [{
  167. "name": "internal",
  168. "text": undefined
  169. }],
  170. "text": ""
  171. },
  172. "complexType": {
  173. "original": "void",
  174. "resolved": "void",
  175. "references": {}
  176. }
  177. }];
  178. }
  179. static get elementRef() { return "el"; }
  180. static get watchers() {
  181. return [{
  182. "propName": "disabled",
  183. "methodName": "handlePropChange"
  184. }, {
  185. "propName": "label",
  186. "methodName": "handlePropChange"
  187. }, {
  188. "propName": "selected",
  189. "methodName": "handlePropChange"
  190. }, {
  191. "propName": "value",
  192. "methodName": "handlePropChange"
  193. }];
  194. }
  195. }