@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
185 lines (184 loc) • 5.15 kB
JavaScript
/*!
* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
* See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
*/
import { Component, h, Prop, Element, Event, Watch } from "@stencil/core";
import { createObserver } from "../../utils/observers";
export class Option {
constructor() {
//--------------------------------------------------------------------------
//
// Properties
//
//--------------------------------------------------------------------------
/**
* When true, it prevents the option from being selected.
*/
this.disabled = false;
this.mutationObserver = createObserver("mutation", () => {
this.ensureTextContentDependentProps();
this.calciteOptionChange.emit();
});
}
handlePropChange(_newValue, _oldValue, propName) {
if (propName === "label" || propName === "value") {
this.ensureTextContentDependentProps();
}
this.calciteOptionChange.emit();
}
//--------------------------------------------------------------------------
//
// Private Methods
//
//--------------------------------------------------------------------------
ensureTextContentDependentProps() {
const { el: { textContent } } = this;
if (!this.label || this.label === this.internallySetLabel) {
this.label = textContent;
this.internallySetLabel = textContent;
}
if (!this.value || this.value === this.internallySetValue) {
this.value = textContent;
this.internallySetValue = textContent;
}
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
connectedCallback() {
var _a;
this.ensureTextContentDependentProps();
(_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, {
attributeFilter: ["label", "value"],
characterData: true,
childList: true,
subtree: true
});
}
disconnectedCallback() {
var _a;
(_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
}
//--------------------------------------------------------------------------
//
// Render Methods
//
//--------------------------------------------------------------------------
render() {
return h("slot", null, this.label);
}
static get is() { return "calcite-option"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["option.scss"]
}; }
static get styleUrls() { return {
"$": ["option.css"]
}; }
static get properties() { return {
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When true, it prevents the option from being selected."
},
"attribute": "disabled",
"reflect": true,
"defaultValue": "false"
},
"label": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The option label."
},
"attribute": "label",
"reflect": false
},
"selected": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When true, this option is selected. Otherwise, false."
},
"attribute": "selected",
"reflect": true
},
"value": {
"type": "any",
"mutable": true,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The value associated with this option."
},
"attribute": "value",
"reflect": false
}
}; }
static get events() { return [{
"method": "calciteOptionChange",
"name": "calciteOptionChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "internal",
"text": undefined
}],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}]; }
static get elementRef() { return "el"; }
static get watchers() { return [{
"propName": "disabled",
"methodName": "handlePropChange"
}, {
"propName": "label",
"methodName": "handlePropChange"
}, {
"propName": "selected",
"methodName": "handlePropChange"
}, {
"propName": "value",
"methodName": "handlePropChange"
}]; }
}