@esri/solutions-components 0.8.67 → 0.9.0

package/dist/cjs/calcite-color-picker-hex-input.cjs.entry.js

@@ -1,274 +0,0 @@
-/*!
- * Copyright 2022 Esri
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index$1 = require('./index-62dddc18.js');
-const index = require('./index-25afe4b8.js');
-const utils = require('./utils-3128e748.js');
-const dom = require('./dom-3f868a04.js');
-const loadable = require('./loadable-68a22656.js');
-const resources = require('./resources-13ca5745.js');
-require('./_commonjsHelpers-2dd87068.js');
-require('./guid-a7528dfa.js');
-require('./resources-921affcb.js');
-
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.2
- */
-const CSS = {
-    container: "container",
-    hexInput: "hex-input",
-    opacityInput: "opacity-input",
-};
-
-const colorPickerHexInputCss = ":host{display:block}.container{display:flex;inline-size:100%;flex-wrap:nowrap;align-items:center}.hex-input{flex-grow:1;text-transform:uppercase}.opacity-input{inline-size:68px;margin-inline-start:-1px}:host([scale=s]) .container{flex-wrap:wrap;row-gap:0.125rem}:host([scale=s]) .opacity-input{inline-size:unset;margin-inline-start:unset}:host([scale=l]) .opacity-input{inline-size:88px}:host([hidden]){display:none}[hidden]{display:none}";
-
-const DEFAULT_COLOR = index.color();
-const ColorPickerHexInput = class {
-    constructor(hostRef) {
-        index$1.registerInstance(this, hostRef);
-        this.calciteColorPickerHexInputChange = index$1.createEvent(this, "calciteColorPickerHexInputChange", 6);
-        this.onHexInputBlur = () => {
-            const node = this.hexInputNode;
-            const inputValue = node.value;
-            const hex = `#${inputValue}`;
-            const { allowEmpty, internalColor } = this;
-            const willClearValue = allowEmpty && !inputValue;
-            const isLonghand = utils.isLonghandHex(hex);
-            // ensure modified pasted hex values are committed since we prevent default to remove the # char.
-            this.onHexInputChange();
-            if (willClearValue || (utils.isValidHex(hex) && isLonghand)) {
-                return;
-            }
-            // manipulating DOM directly since rerender doesn't update input value
-            node.value =
-                allowEmpty && !internalColor
-                    ? ""
-                    : this.formatHexForInternalInput(utils.rgbToHex(
-                    // always display hex input in RRGGBB format
-                    internalColor.object()));
-        };
-        this.onOpacityInputBlur = () => {
-            const node = this.opacityInputNode;
-            const inputValue = node.value;
-            const { allowEmpty, internalColor } = this;
-            const willClearValue = allowEmpty && !inputValue;
-            if (willClearValue) {
-                return;
-            }
-            // manipulating DOM directly since rerender doesn't update input value
-            node.value =
-                allowEmpty && !internalColor ? "" : this.formatOpacityForInternalInput(internalColor);
-        };
-        this.onHexInputChange = () => {
-            const nodeValue = this.hexInputNode.value;
-            let value = nodeValue;
-            if (value) {
-                const normalized = utils.normalizeHex(value, false);
-                const preserveExistingAlpha = utils.isValidHex(normalized) && this.alphaChannel;
-                if (preserveExistingAlpha && this.internalColor) {
-                    const alphaHex = utils.normalizeHex(this.internalColor.hexa(), true).slice(-2);
-                    value = `${normalized + alphaHex}`;
-                }
-            }
-            this.internalSetValue(value, this.value);
-        };
-        this.onOpacityInputChange = () => {
-            var _a;
-            const node = this.opacityInputNode;
-            let value;
-            if (!node.value) {
-                value = node.value;
-            }
-            else {
-                const alpha = utils.opacityToAlpha(Number(node.value));
-                value = (_a = this.internalColor) === null || _a === void 0 ? void 0 : _a.alpha(alpha).hexa();
-            }
-            this.internalSetValue(value, this.value);
-        };
-        this.onInputKeyDown = (event) => {
-            const { altKey, ctrlKey, metaKey, shiftKey } = event;
-            const { alphaChannel, hexInputNode, internalColor, value } = this;
-            const { key } = event;
-            const composedPath = event.composedPath();
-            if (key === "Tab" || key === "Enter") {
-                if (composedPath.includes(hexInputNode)) {
-                    this.onHexInputChange();
-                }
-                else {
-                    this.onOpacityInputChange();
-                }
-                if (key === "Enter") {
-                    event.preventDefault();
-                }
-                return;
-            }
-            const isNudgeKey = key === "ArrowDown" || key === "ArrowUp";
-            const oldValue = this.value;
-            if (isNudgeKey) {
-                if (!value) {
-                    this.internalSetValue(this.previousNonNullValue, oldValue);
-                    event.preventDefault();
-                    return;
-                }
-                const direction = key === "ArrowUp" ? 1 : -1;
-                const bump = shiftKey ? 10 : 1;
-                this.internalSetValue(utils.hexify(this.nudgeRGBChannels(internalColor, bump * direction, composedPath.includes(hexInputNode) ? "rgb" : "a"), alphaChannel), oldValue);
-                event.preventDefault();
-                return;
-            }
-            const withModifiers = altKey || ctrlKey || metaKey;
-            const singleChar = key.length === 1;
-            const validHexChar = utils.hexChar.test(key);
-            if (singleChar && !withModifiers && !validHexChar) {
-                event.preventDefault();
-            }
-        };
-        this.onHexInputPaste = (event) => {
-            const hex = event.clipboardData.getData("text");
-            if (utils.isValidHex(hex)) {
-                event.preventDefault();
-                this.hexInputNode.value = hex.slice(1);
-            }
-        };
-        this.previousNonNullValue = this.value;
-        this.storeHexInputRef = (node) => {
-            this.hexInputNode = node;
-        };
-        this.storeOpacityInputRef = (node) => {
-            this.opacityInputNode = node;
-        };
-        this.allowEmpty = false;
-        this.alphaChannel = false;
-        this.hexLabel = "Hex";
-        this.messages = undefined;
-        this.numberingSystem = undefined;
-        this.scale = "m";
-        this.value = utils.normalizeHex(utils.hexify(DEFAULT_COLOR, this.alphaChannel), this.alphaChannel, true);
-        this.internalColor = DEFAULT_COLOR;
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Lifecycle
-    //
-    //--------------------------------------------------------------------------
-    connectedCallback() {
-        const { allowEmpty, alphaChannel, value } = this;
-        if (value) {
-            const normalized = utils.normalizeHex(value, alphaChannel);
-            if (utils.isValidHex(normalized, alphaChannel)) {
-                this.internalSetValue(normalized, normalized, false);
-            }
-            return;
-        }
-        if (allowEmpty) {
-            this.internalSetValue(null, null, false);
-        }
-    }
-    componentWillLoad() {
-        loadable.setUpLoadableComponent(this);
-    }
-    componentDidLoad() {
-        loadable.setComponentLoaded(this);
-    }
-    handleValueChange(value, oldValue) {
-        this.internalSetValue(value, oldValue, false);
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Lifecycle
-    //
-    //--------------------------------------------------------------------------
-    render() {
-        const { alphaChannel, hexLabel, internalColor, messages, scale, value } = this;
-        const hexInputValue = this.formatHexForInternalInput(value);
-        const opacityInputValue = this.formatOpacityForInternalInput(internalColor);
-        const inputScale = scale === "l" ? "m" : "s";
-        return (index$1.h("div", { key: 'ce81e626a720cd37d45facd4ca1f9dd748df094c', class: CSS.container }, index$1.h("calcite-input-text", { key: 'a26b153eb8f2e9943106c515de68a5adeec24e2b', class: CSS.hexInput, label: (messages === null || messages === void 0 ? void 0 : messages.hex) || hexLabel, maxLength: 6, onCalciteInputTextChange: this.onHexInputChange, onCalciteInternalInputTextBlur: this.onHexInputBlur, onKeyDown: this.onInputKeyDown, onPaste: this.onHexInputPaste, prefixText: "#", scale: inputScale, value: hexInputValue,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.storeHexInputRef }), alphaChannel ? (index$1.h("calcite-input-number", { class: CSS.opacityInput, key: "opacity-input", label: messages === null || messages === void 0 ? void 0 : messages.opacity, max: resources.OPACITY_LIMITS.max, maxLength: 3, min: resources.OPACITY_LIMITS.min, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputNumberChange: this.onOpacityInputChange, onCalciteInternalInputNumberBlur: this.onOpacityInputBlur, onKeyDown: this.onInputKeyDown, scale: inputScale, suffixText: "%", value: opacityInputValue,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.storeOpacityInputRef })) : null));
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    //--------------------------------------------------------------------------
-    /** Sets focus on the component. */
-    async setFocus() {
-        await loadable.componentFocusable(this);
-        return dom.focusElement(this.hexInputNode);
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    internalSetValue(value, oldValue, emit = true) {
-        if (value) {
-            const { alphaChannel } = this;
-            const normalized = utils.normalizeHex(value, alphaChannel, alphaChannel);
-            if (utils.isValidHex(normalized, alphaChannel)) {
-                const { internalColor: currentColor } = this;
-                const nextColor = index.color(normalized);
-                const normalizedLonghand = utils.normalizeHex(utils.hexify(nextColor, alphaChannel), alphaChannel);
-                const changed = !currentColor ||
-                    normalizedLonghand !== utils.normalizeHex(utils.hexify(currentColor, alphaChannel), alphaChannel);
-                this.internalColor = nextColor;
-                this.previousNonNullValue = normalizedLonghand;
-                this.value = normalizedLonghand;
-                if (changed && emit) {
-                    this.calciteColorPickerHexInputChange.emit();
-                }
-                return;
-            }
-        }
-        else if (this.allowEmpty) {
-            this.internalColor = null;
-            this.value = null;
-            if (emit) {
-                this.calciteColorPickerHexInputChange.emit();
-            }
-            return;
-        }
-        this.value = oldValue;
-    }
-    formatHexForInternalInput(hex) {
-        return hex ? hex.replace("#", "").slice(0, 6) : "";
-    }
-    formatOpacityForInternalInput(color) {
-        return color ? `${utils.alphaToOpacity(color.alpha())}` : "";
-    }
-    nudgeRGBChannels(color, amount, context) {
-        let nudgedChannels;
-        const channels = color.array();
-        const rgbChannels = channels.slice(0, 3);
-        if (context === "rgb") {
-            const nudgedRGBChannels = rgbChannels.map((channel) => channel + amount);
-            nudgedChannels = [
-                ...nudgedRGBChannels,
-                this.alphaChannel ? channels[3] : undefined,
-            ];
-        }
-        else {
-            const nudgedAlpha = utils.opacityToAlpha(utils.alphaToOpacity(color.alpha()) + amount);
-            nudgedChannels = [...rgbChannels, nudgedAlpha];
-        }
-        return index.color(nudgedChannels);
-    }
-    get el() { return index$1.getElement(this); }
-    static get watchers() { return {
-        "value": ["handleValueChange"]
-    }; }
-};
-ColorPickerHexInput.style = colorPickerHexInputCss;
-
-exports.calcite_color_picker_hex_input = ColorPickerHexInput;

package/dist/cjs/calcite-color-picker-swatch.cjs.entry.js

@@ -1,99 +0,0 @@
-/*!
- * Copyright 2022 Esri
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-62dddc18.js');
-const index$1 = require('./index-25afe4b8.js');
-const dom = require('./dom-3f868a04.js');
-const utils = require('./utils-3128e748.js');
-require('./_commonjsHelpers-2dd87068.js');
-require('./guid-a7528dfa.js');
-require('./resources-921affcb.js');
-
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.2
- */
-const CSS = {
-    swatch: "swatch",
-    noColorSwatch: "swatch--no-color",
-    checker: "checker",
-};
-const COLORS = {
-    borderLight: "rgba(0, 0, 0, 0.3)",
-    borderDark: "rgba(255, 255, 255, 0.15)",
-};
-const checkerSquareSize = 4;
-const CHECKER_DIMENSIONS = {
-    squareSize: checkerSquareSize,
-    size: checkerSquareSize * 2,
-};
-
-const colorPickerSwatchCss = ":host{position:relative;display:inline-flex}:host([scale=s]){block-size:1.25rem;inline-size:1.25rem}:host([scale=m]){block-size:1.5rem;inline-size:1.5rem}:host([scale=l]){block-size:2rem;inline-size:2rem}.swatch{overflow:hidden;block-size:inherit;inline-size:inherit}.swatch rect{transition-property:all;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.swatch--no-color rect{fill:var(--calcite-color-foreground-1)}.swatch--no-color line{stroke:var(--calcite-color-status-danger)}.checker{fill:#cacaca}:host([hidden]){display:none}[hidden]{display:none}";
-
-const ColorPickerSwatch = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.active = false;
-        this.color = undefined;
-        this.scale = "m";
-    }
-    handleColorChange(color) {
-        this.internalColor = color ? index$1.color(color) : null;
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Lifecycle
-    //
-    //--------------------------------------------------------------------------
-    componentWillLoad() {
-        this.handleColorChange(this.color);
-    }
-    render() {
-        const isEmpty = !this.internalColor;
-        const classes = {
-            [CSS.swatch]: true,
-            [CSS.noColorSwatch]: isEmpty,
-        };
-        return (index.h("svg", { key: 'b29377be8ce0518f7b0f3691dcb1dda08890dd94', class: classes, xmlns: "http://www.w3.org/2000/svg" }, this.renderSwatch()));
-    }
-    renderSwatch() {
-        const { active, el, internalColor } = this;
-        const borderRadius = active ? "100%" : "0";
-        const theme = dom.getModeName(el);
-        const borderColor = theme === "light" ? COLORS.borderLight : COLORS.borderDark;
-        const commonSwatchProps = {
-            height: "100%",
-            rx: borderRadius,
-            stroke: borderColor,
-            // stroke-width and clip-path are needed to hide overflowing portion of stroke
-            // see https://stackoverflow.com/a/7273346/194216
-            // using attribute to work around Stencil using the prop name vs the attribute when rendering
-            ["stroke-width"]: "2",
-            width: "100%",
-        };
-        const isEmpty = !internalColor;
-        if (isEmpty) {
-            return (index.h(index.Fragment, null, index.h("clipPath", { id: "shape" }, index.h("rect", { height: "100%", rx: borderRadius, width: "100%" })), index.h("rect", Object.assign({ "clip-path": `inset(0 round ${borderRadius})`, rx: borderRadius }, commonSwatchProps)), index.h("line", { "clip-path": "url(#shape)", "stroke-width": "3", x1: "100%", x2: "0", y1: "0", y2: "100%" })));
-        }
-        const alpha = internalColor.alpha();
-        const hex = utils.hexify(internalColor);
-        const hexa = utils.hexify(internalColor, alpha < 1);
-        return (index.h(index.Fragment, null, index.h("title", null, hexa), index.h("defs", null, index.h("pattern", { height: CHECKER_DIMENSIONS.size, id: "checker", patternUnits: "userSpaceOnUse", width: CHECKER_DIMENSIONS.size, x: "0", y: "0" }, index.h("rect", { class: CSS.checker, height: CHECKER_DIMENSIONS.squareSize, width: CHECKER_DIMENSIONS.squareSize, x: "0", y: "0" }), index.h("rect", { class: CSS.checker, height: CHECKER_DIMENSIONS.squareSize, width: CHECKER_DIMENSIONS.squareSize, x: CHECKER_DIMENSIONS.squareSize, y: CHECKER_DIMENSIONS.squareSize }))), index.h("rect", { fill: "url(#checker)", height: "100%", rx: borderRadius, width: "100%" }), index.h("rect", Object.assign({ fill: hex, style: {
-                "clip-path": alpha < 1 ? "polygon(100% 0, 0 0, 0 100%)" : `inset(0 round ${borderRadius})`,
-            } }, commonSwatchProps)), alpha < 1 ? (index.h("rect", Object.assign({ fill: hexa, key: "opacity-fill", style: { "clip-path": "polygon(100% 0, 100% 100%, 0 100%)" } }, commonSwatchProps))) : null));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "color": ["handleColorChange"]
-    }; }
-};
-ColorPickerSwatch.style = colorPickerSwatchCss;
-
-exports.calcite_color_picker_swatch = ColorPickerSwatch;

package/dist/cjs/calcite-combobox-item.cjs.entry.js

@@ -1,145 +0,0 @@
-/*!
- * Copyright 2022 Esri
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-62dddc18.js');
-const conditionalSlot = require('./conditionalSlot-013ea8f1.js');
-const dom = require('./dom-3f868a04.js');
-const guid = require('./guid-a7528dfa.js');
-const interactive = require('./interactive-f8825052.js');
-const utils = require('./utils-4ad2f4f2.js');
-const component = require('./component-d48747c9.js');
-require('./observers-682136dc.js');
-require('./resources-921affcb.js');
-require('./browser-1bf2a3d9.js');
-
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.2
- */
-const CSS = {
-    icon: "icon",
-    iconActive: "icon--active",
-    iconIndent: "icon--indent",
-    custom: "icon--custom",
-    dot: "icon--dot",
-    single: "label--single",
-    label: "label",
-    active: "label--active",
-    selected: "label--selected",
-    title: "title",
-    textContainer: "text-container",
-};
-
-const comboboxItemCss = "@charset \"UTF-8\";:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([hidden]){display:none}[hidden]{display:none}.scale--s{font-size:var(--calcite-font-size--2);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-item-spacing-indent:0.5rem;--calcite-combobox-item-selector-icon-size:1rem}.scale--m{font-size:var(--calcite-font-size--1);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-item-spacing-indent:0.75rem;--calcite-combobox-item-selector-icon-size:1rem}.scale--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.625rem;--calcite-combobox-item-spacing-indent:1rem;--calcite-combobox-item-selector-icon-size:1.5rem}.container{--calcite-combobox-item-indent-value:calc(\n    var(--calcite-combobox-item-spacing-indent) * var(--calcite-combobox-item-spacing-indent-multiplier)\n  )}:host(:focus){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host,ul{margin:0px;display:flex;flex-direction:column;padding:0px}:host(:focus),ul:focus{outline:2px solid transparent;outline-offset:2px}.label{position:relative;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:100%;cursor:pointer;align-items:center;color:var(--calcite-color-text-3);text-decoration-line:none;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);outline-color:transparent;word-wrap:break-word;word-break:break-word;padding-block:var(--calcite-combobox-item-spacing-unit-s);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}:host([disabled]) .label{cursor:default}.label--selected{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}.label--active{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.label:hover,.label:active{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1);text-decoration-line:none;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.title{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.icon{display:inline-flex;opacity:0;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);color:var(--calcite-color-border-1)}.icon--indent{padding-inline-start:var(--calcite-combobox-item-indent-value)}.icon--custom{margin-block-start:-1px;padding-inline-start:var(--calcite-combobox-item-spacing-unit-l);color:var(--calcite-color-text-3)}.icon--active{color:var(--calcite-color-text-1)}.icon--dot{display:flex;justify-content:center;min-inline-size:var(--calcite-combobox-item-selector-icon-size)}.icon--dot:before{text-align:start;content:\"•\"}.label--active .icon{opacity:1}.label--selected .icon{opacity:1;color:var(--calcite-color-brand)}:host(:hover[disabled]) .icon{opacity:1}";
-
-const ComboboxItem = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.calciteComboboxItemChange = index.createEvent(this, "calciteComboboxItemChange", 6);
-        this.itemClickHandler = () => {
-            this.toggleSelected();
-        };
-        this.disabled = false;
-        this.selected = false;
-        this.active = false;
-        this.ancestors = undefined;
-        this.guid = guid.guid();
-        this.icon = undefined;
-        this.iconFlipRtl = false;
-        this.textLabel = undefined;
-        this.value = undefined;
-        this.filterDisabled = undefined;
-        this.selectionMode = "multiple";
-        this.scale = "m";
-    }
-    selectedWatchHandler() {
-        this.calciteComboboxItemChange.emit();
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Lifecycle
-    //
-    // --------------------------------------------------------------------------
-    connectedCallback() {
-        this.ancestors = utils.getAncestors(this.el);
-        conditionalSlot.connectConditionalSlotComponent(this);
-        interactive.connectInteractive(this);
-    }
-    disconnectedCallback() {
-        conditionalSlot.disconnectConditionalSlotComponent(this);
-        interactive.disconnectInteractive(this);
-    }
-    componentDidRender() {
-        interactive.updateHostInteraction(this);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    toggleSelected() {
-        const isSinglePersistSelect = this.selectionMode === "single-persist";
-        if (this.disabled || (isSinglePersistSelect && this.selected)) {
-            return;
-        }
-        this.selected = !this.selected;
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    renderIcon(iconPath) {
-        return this.icon ? (index.h("calcite-icon", { class: {
-                [CSS.custom]: !!this.icon,
-                [CSS.iconActive]: this.icon && this.selected,
-                [CSS.iconIndent]: true,
-            }, flipRtl: this.iconFlipRtl, icon: this.icon || iconPath, key: "icon", scale: component.getIconScale(this.scale) })) : null;
-    }
-    renderSelectIndicator(showDot, iconPath) {
-        return showDot ? (index.h("span", { class: {
-                [CSS.icon]: true,
-                [CSS.dot]: true,
-                [CSS.iconIndent]: true,
-            } })) : (index.h("calcite-icon", { class: {
-                [CSS.icon]: true,
-                [CSS.iconActive]: this.selected,
-                [CSS.iconIndent]: true,
-            }, flipRtl: this.iconFlipRtl, icon: iconPath, key: "indicator", scale: component.getIconScale(this.scale) }));
-    }
-    renderChildren() {
-        if (dom.getSlotted(this.el)) {
-            return (index.h("ul", { key: "default-slot-container" }, index.h("slot", null)));
-        }
-        return null;
-    }
-    render() {
-        const { disabled } = this;
-        const isSingleSelect = utils.isSingleLike(this.selectionMode);
-        const showDot = isSingleSelect && !disabled;
-        const defaultIcon = isSingleSelect ? "dot" : "check";
-        const iconPath = disabled ? "" : defaultIcon;
-        const classes = {
-            [CSS.label]: true,
-            [CSS.selected]: this.selected,
-            [CSS.active]: this.active,
-            [CSS.single]: isSingleSelect,
-        };
-        const depth = utils.getDepth(this.el);
-        return (index.h(index.Host, { key: 'a10ab7e95408a8cffef4f42d3b87ae98450489b9', "aria-hidden": "true" }, index.h(interactive.InteractiveContainer, { key: '091b8f1a3f713899a3f14c1c39a6fdb70abab7a2', disabled: disabled }, index.h("div", { key: '43d200730971b71b3030437885e6ab99c55b2ce6', class: `container scale--${this.scale}`, style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, index.h("li", { key: '8de885b34e9bc6b53a30396d54cbcec488790dd7', class: classes, id: this.guid, onClick: this.itemClickHandler }, this.renderSelectIndicator(showDot, iconPath), this.renderIcon(iconPath), index.h("span", { key: 'daba9ce50923261dce8896a74d8204b1e922a638', class: "title" }, this.textLabel)), this.renderChildren()))));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "selected": ["selectedWatchHandler"]
-    }; }
-};
-ComboboxItem.style = comboboxItemCss;
-
-exports.calcite_combobox_item = ComboboxItem;