option.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  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.82
  5. */
  6. import { Component, h, Prop, Element, Event, Watch } 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, it prevents the option from being selected.
  17. */
  18. this.disabled = false;
  19. this.mutationObserver = createObserver("mutation", () => {
  20. this.ensureTextContentDependentProps();
  21. this.calciteOptionChange.emit();
  22. });
  23. }
  24. handlePropChange(_newValue, _oldValue, propName) {
  25. if (propName === "label" || propName === "value") {
  26. this.ensureTextContentDependentProps();
  27. }
  28. this.calciteOptionChange.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() { return {
  76. "$": ["option.scss"]
  77. }; }
  78. static get styleUrls() { return {
  79. "$": ["option.css"]
  80. }; }
  81. static get properties() { return {
  82. "disabled": {
  83. "type": "boolean",
  84. "mutable": false,
  85. "complexType": {
  86. "original": "boolean",
  87. "resolved": "boolean",
  88. "references": {}
  89. },
  90. "required": false,
  91. "optional": false,
  92. "docs": {
  93. "tags": [],
  94. "text": "When true, it prevents the option from being selected."
  95. },
  96. "attribute": "disabled",
  97. "reflect": true,
  98. "defaultValue": "false"
  99. },
  100. "label": {
  101. "type": "string",
  102. "mutable": true,
  103. "complexType": {
  104. "original": "string",
  105. "resolved": "string",
  106. "references": {}
  107. },
  108. "required": false,
  109. "optional": false,
  110. "docs": {
  111. "tags": [],
  112. "text": "The option label."
  113. },
  114. "attribute": "label",
  115. "reflect": false
  116. },
  117. "selected": {
  118. "type": "boolean",
  119. "mutable": false,
  120. "complexType": {
  121. "original": "boolean",
  122. "resolved": "boolean",
  123. "references": {}
  124. },
  125. "required": false,
  126. "optional": false,
  127. "docs": {
  128. "tags": [],
  129. "text": "When true, this option is selected. Otherwise, false."
  130. },
  131. "attribute": "selected",
  132. "reflect": true
  133. },
  134. "value": {
  135. "type": "any",
  136. "mutable": true,
  137. "complexType": {
  138. "original": "any",
  139. "resolved": "any",
  140. "references": {}
  141. },
  142. "required": false,
  143. "optional": false,
  144. "docs": {
  145. "tags": [],
  146. "text": "The value associated with this option."
  147. },
  148. "attribute": "value",
  149. "reflect": false
  150. }
  151. }; }
  152. static get events() { return [{
  153. "method": "calciteOptionChange",
  154. "name": "calciteOptionChange",
  155. "bubbles": true,
  156. "cancelable": true,
  157. "composed": true,
  158. "docs": {
  159. "tags": [{
  160. "name": "internal",
  161. "text": undefined
  162. }],
  163. "text": ""
  164. },
  165. "complexType": {
  166. "original": "any",
  167. "resolved": "any",
  168. "references": {}
  169. }
  170. }]; }
  171. static get elementRef() { return "el"; }
  172. static get watchers() { return [{
  173. "propName": "disabled",
  174. "methodName": "handlePropChange"
  175. }, {
  176. "propName": "label",
  177. "methodName": "handlePropChange"
  178. }, {
  179. "propName": "selected",
  180. "methodName": "handlePropChange"
  181. }, {
  182. "propName": "value",
  183. "methodName": "handlePropChange"
  184. }]; }
  185. }