@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
79 lines (78 loc) • 2.75 kB
JavaScript
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import { c as customElement } from "../../chunks/runtime.js";
import { html } from "lit";
import { LitElement, createEvent } from "@arcgis/lumina";
import { c as createObserver } from "../../chunks/observers.js";
import { css } from "@lit/reactive-element/css-tag.js";
const styles = css`:host{display:block}:host([hidden]){display:none}[hidden]{display:none}`;
class Option extends LitElement {
constructor() {
super(...arguments);
this.mutationObserver = createObserver("mutation", () => {
this.ensureTextContentDependentProps();
this.calciteInternalOptionChange.emit();
});
this.disabled = false;
this.calciteInternalOptionChange = createEvent({ cancelable: false });
}
static {
this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], label: 1, selected: [7, {}, { reflect: true, type: Boolean }], value: 1 };
}
static {
this.styles = styles;
}
connectedCallback() {
super.connectedCallback();
this.ensureTextContentDependentProps();
this.mutationObserver?.observe(this.el, {
attributeFilter: ["label", "value"],
characterData: true,
childList: true,
subtree: true
});
}
willUpdate(changes) {
if (changes.has("disabled") && (this.hasUpdated || this.disabled !== false)) {
this.handlePropChange(this.disabled, changes.get("disabled"), "disabled");
}
if (changes.has("label")) {
this.handlePropChange(this.label, changes.get("label"), "label");
}
if (changes.has("selected")) {
this.handlePropChange(this.selected, changes.get("selected"), "selected");
}
if (changes.has("value")) {
this.handlePropChange(this.value, changes.get("value"), "value");
}
}
disconnectedCallback() {
super.disconnectedCallback();
this.mutationObserver?.disconnect();
}
handlePropChange(_newValue, _oldValue, propName) {
if (propName === "label" || propName === "value") {
this.ensureTextContentDependentProps();
}
this.calciteInternalOptionChange.emit();
}
ensureTextContentDependentProps() {
const { el: { textContent }, internallySetLabel, internallySetValue, label, value } = this;
if (!label || label === internallySetLabel) {
this.label = textContent;
this.internallySetLabel = textContent;
}
if (value == null || value === internallySetValue) {
this.value = textContent;
this.internallySetValue = textContent;
}
}
render() {
return html`<slot>${this.label}</slot>`;
}
}
customElement("calcite-option", Option);
export {
Option
};