@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
77 lines (76 loc) • 2.75 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { html } from "lit";
import { LitElement, createEvent } from "@arcgis/lumina";
import { trim } from "es-toolkit";
import { c as createObserver } from "../../chunks/observers.js";
const whitespaceCharsToTrim = [" ", "\n", " ", "\r"];
const whitespaceToReplaceRegexp = /[^\S\u00A0]+/g;
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 };
}
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, internallySetLabel, internallySetValue, label, value } = this;
const trimmedContent = trim(el.textContent, whitespaceCharsToTrim).replaceAll(whitespaceToReplaceRegexp, " ");
const trimmedLabel = label;
if (!trimmedLabel || trimmedLabel === internallySetLabel) {
this.label = trimmedContent;
this.internallySetLabel = trimmedContent;
}
if (value == null || value === internallySetValue) {
this.value = trimmedContent;
this.internallySetValue = trimmedContent;
}
}
render() {
return html`<slot>${this.label}</slot>`;
}
}
customElement("calcite-option", Option);
export {
Option
};