@esri/solutions-components 0.8.1 → 0.8.3

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

@@ -0,0 +1,270 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, e as createEvent, h, g as getElement } from './index-bdfaac50.js';
+import { j as isLonghandHex, i as isValidHex, r as rgbToHex, n as normalizeHex, o as opacityToAlpha, h as hexify, k as hexChar, b as alphaToOpacity } from './utils-cfbe589a.js';
+import { c as color } from './index-b1fb529b.js';
+import { e as focusElement } from './dom-b91aa537.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-aea90723.js';
+import { O as OPACITY_LIMITS } from './resources-47b3ca40.js';
+import './_commonjsHelpers-3cd6d4ee.js';
+import './guid-b75a5f7b.js';
+import './resources-0f8db821.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.4.0
+ */
+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 = color();
+const ColorPickerHexInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.calciteColorPickerHexInputChange = 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 = isLonghandHex(hex);
+            // ensure modified pasted hex values are committed since we prevent default to remove the # char.
+            this.onHexInputChange();
+            if (willClearValue || (isValidHex(hex) && isLonghand)) {
+                return;
+            }
+            // manipulating DOM directly since rerender doesn't update input value
+            node.value =
+                allowEmpty && !internalColor
+                    ? ""
+                    : this.formatHexForInternalInput(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 = normalizeHex(value, false);
+                const preserveExistingAlpha = isValidHex(normalized) && this.alphaChannel;
+                if (preserveExistingAlpha && this.internalColor) {
+                    const alphaHex = 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 = 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(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 = hexChar.test(key);
+            if (singleChar && !withModifiers && !validHexChar) {
+                event.preventDefault();
+            }
+        };
+        this.onHexInputPaste = (event) => {
+            const hex = event.clipboardData.getData("text");
+            if (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 = normalizeHex(hexify(DEFAULT_COLOR, this.alphaChannel), this.alphaChannel, true);
+        this.internalColor = DEFAULT_COLOR;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    connectedCallback() {
+        const { allowEmpty, alphaChannel, value } = this;
+        if (value) {
+            const normalized = normalizeHex(value, alphaChannel);
+            if (isValidHex(normalized, alphaChannel)) {
+                this.internalSetValue(normalized, normalized, false);
+            }
+            return;
+        }
+        if (allowEmpty) {
+            this.internalSetValue(null, null, false);
+        }
+    }
+    componentWillLoad() {
+        setUpLoadableComponent(this);
+    }
+    componentDidLoad() {
+        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 (h("div", { class: CSS.container }, h("calcite-input-text", { 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 ? (h("calcite-input-number", { class: CSS.opacityInput, key: "opacity-input", label: messages === null || messages === void 0 ? void 0 : messages.opacity, max: OPACITY_LIMITS.max, maxLength: 3, min: 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 componentFocusable(this);
+        return focusElement(this.hexInputNode);
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    internalSetValue(value, oldValue, emit = true) {
+        if (value) {
+            const { alphaChannel } = this;
+            const normalized = normalizeHex(value, alphaChannel, alphaChannel);
+            if (isValidHex(normalized, alphaChannel)) {
+                const { internalColor: currentColor } = this;
+                const nextColor = color(normalized);
+                const normalizedLonghand = normalizeHex(hexify(nextColor, alphaChannel), alphaChannel);
+                const changed = !currentColor ||
+                    normalizedLonghand !== normalizeHex(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 ? `${alphaToOpacity(color.alpha())}` : "";
+    }
+    nudgeRGBChannels(color$1, amount, context) {
+        let nudgedChannels;
+        const channels = color$1.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 = opacityToAlpha(alphaToOpacity(color$1.alpha()) + amount);
+            nudgedChannels = [...rgbChannels, nudgedAlpha];
+        }
+        return color(nudgedChannels);
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+};
+ColorPickerHexInput.style = colorPickerHexInputCss;
+
+export { ColorPickerHexInput as calcite_color_picker_hex_input };

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

@@ -0,0 +1,95 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, h, F as Fragment, g as getElement } from './index-bdfaac50.js';
+import { c as color } from './index-b1fb529b.js';
+import { w as getModeName } from './dom-b91aa537.js';
+import { h as hexify } from './utils-cfbe589a.js';
+import './_commonjsHelpers-3cd6d4ee.js';
+import './guid-b75a5f7b.js';
+import './resources-0f8db821.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.4.0
+ */
+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) {
+        registerInstance(this, hostRef);
+        this.active = false;
+        this.color = undefined;
+        this.scale = "m";
+    }
+    handleColorChange(color$1) {
+        this.internalColor = color$1 ? color(color$1) : null;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    componentWillLoad() {
+        this.handleColorChange(this.color);
+    }
+    render() {
+        const isEmpty = !this.internalColor;
+        const classes = {
+            [CSS.swatch]: true,
+            [CSS.noColorSwatch]: isEmpty,
+        };
+        return (h("svg", { class: classes, xmlns: "http://www.w3.org/2000/svg" }, this.renderSwatch()));
+    }
+    renderSwatch() {
+        const { active, el, internalColor } = this;
+        const borderRadius = active ? "100%" : "0";
+        const theme = 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 (h(Fragment, null, h("clipPath", { id: "shape" }, h("rect", { height: "100%", rx: borderRadius, width: "100%" })), h("rect", Object.assign({ "clip-path": `inset(0 round ${borderRadius})`, rx: borderRadius }, commonSwatchProps)), h("line", { "clip-path": "url(#shape)", "stroke-width": "3", x1: "100%", x2: "0", y1: "0", y2: "100%" })));
+        }
+        const alpha = internalColor.alpha();
+        const hex = hexify(internalColor);
+        const hexa = hexify(internalColor, alpha < 1);
+        return (h(Fragment, null, h("title", null, hexa), h("defs", null, h("pattern", { height: CHECKER_DIMENSIONS.size, id: "checker", patternUnits: "userSpaceOnUse", width: CHECKER_DIMENSIONS.size, x: "0", y: "0" }, h("rect", { class: CSS.checker, height: CHECKER_DIMENSIONS.squareSize, width: CHECKER_DIMENSIONS.squareSize, x: "0", y: "0" }), h("rect", { class: CSS.checker, height: CHECKER_DIMENSIONS.squareSize, width: CHECKER_DIMENSIONS.squareSize, x: CHECKER_DIMENSIONS.squareSize, y: CHECKER_DIMENSIONS.squareSize }))), h("rect", { fill: "url(#checker)", height: "100%", rx: borderRadius, width: "100%" }), 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 ? (h("rect", Object.assign({ fill: hexa, key: "opacity-fill", style: { "clip-path": "polygon(100% 0, 100% 100%, 0 100%)" } }, commonSwatchProps))) : null));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "color": ["handleColorChange"]
+    }; }
+};
+ColorPickerSwatch.style = colorPickerSwatchCss;
+
+export { ColorPickerSwatch as calcite_color_picker_swatch };

package/dist/esm/calcite-color-picker.entry.js

@@ -3,23 +3,23 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-164d485a.js';
-import { c as color, C as CSS, D as DEFAULT_COLOR, a as DIMENSIONS, H as HSV_LIMITS, O as OPACITY_LIMITS, b as HUE_LIMIT_CONSTRAINED, S as SCOPE_SIZE, d as DEFAULT_STORAGE_KEY_PREFIX, R as RGB_LIMITS } from './resources-61b0cdad.js';
-import { i as isPrimaryPointerButton, a as getElementDir } from './dom-38c6f027.js';
-import { C as CSSColorMode, n as normalizeHex, h as hexify, o as opacityToAlpha, a as alphaToOpacity, b as alphaCompatible, p as parseMode, c as colorEqual, t as toNonAlphaMode, d as normalizeAlpha, e as toAlphaMode, f as normalizeColor } from './utils-a15078af.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-39bf5602.js';
-import { i as isActivationKey } from './key-c83d835f.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-37e7fbd6.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-904407bf.js';
-import { r as remap, c as clamp, a as closeToRangeEdge } from './math-efada7a9.js';
-import { u as updateMessages, s as setUpMessages, c as connectMessages, d as disconnectMessages } from './t9n-436fb2b1.js';
-import { t as throttle } from './throttle-9ab70933.js';
-import './_commonjsHelpers-0f74c230.js';
+import { r as registerInstance, e as createEvent, h, g as getElement } from './index-bdfaac50.js';
+import { c as color } from './index-b1fb529b.js';
+import { t as throttle } from './lodash-98e4b7d0.js';
+import { i as isPrimaryPointerButton, a as getElementDir } from './dom-b91aa537.js';
+import { O as OPACITY_LIMITS, R as RGB_LIMITS, H as HSV_LIMITS, C as CSS, D as DEFAULT_STORAGE_KEY_PREFIX, a as DEFAULT_COLOR, b as DIMENSIONS, c as HUE_LIMIT_CONSTRAINED, S as SCOPE_SIZE } from './resources-47b3ca40.js';
+import { C as CSSColorMode, n as normalizeHex, h as hexify, a as alphaCompatible, o as opacityToAlpha, b as alphaToOpacity, p as parseMode, c as normalizeColor, d as colorEqual, t as toAlphaMode, e as toNonAlphaMode, f as normalizeAlpha } from './utils-cfbe589a.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-71585ecc.js';
+import { i as isActivationKey } from './key-9a10d862.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-aea90723.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-857f39cf.js';
+import { c as clamp, a as closeToRangeEdge, r as remap } from './math-efada7a9.js';
+import { u as updateMessages, s as setUpMessages, c as connectMessages, d as disconnectMessages } from './t9n-b39c5433.js';
+import './_commonjsHelpers-3cd6d4ee.js';
 import './guid-b75a5f7b.js';
-import './resources-8834f920.js';
-import './browser-d60104bd.js';
-import './observers-d04d1da9.js';
-import './debounce-229b1a22.js';
+import './resources-0f8db821.js';
+import './browser-b8d08bed.js';
+import './observers-5ba39eee.js';
 
 const colorPickerCss = ":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{display:inline-block;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-color-picker-spacing:8px}:host([scale=s]) .container{inline-size:160px}:host([scale=s]) .saved-colors{gap:0.25rem;grid-template-columns:repeat(auto-fill, 20px)}:host([scale=m]){--calcite-color-picker-spacing:12px}:host([scale=m]) .container{inline-size:272px}:host([scale=l]){--calcite-color-picker-spacing:16px;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]) .container{inline-size:464px}:host([scale=l]) .section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}:host([scale=l]) .saved-colors{grid-template-columns:repeat(auto-fill, 32px)}:host([scale=l]) .control-section{flex-wrap:nowrap;align-items:baseline;flex-wrap:wrap}:host([scale=l]) .color-hex-options{display:flex;flex-shrink:1;flex-direction:column;justify-content:space-around}:host([scale=l]) .color-mode-container{flex-shrink:3}.container{background-color:var(--calcite-color-foreground-1);display:inline-block;border:1px solid var(--calcite-color-border-1)}.control-and-scope{position:relative;display:flex;cursor:pointer;touch-action:none}.scope{pointer-events:none;position:absolute;z-index:var(--calcite-z-index);block-size:1px;inline-size:1px;border-radius:9999px;background-color:transparent;font-size:var(--calcite-font-size--1);outline-color:transparent}.scope:focus{outline:2px solid 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          );outline-offset:11px}.hex-and-channels-group{inline-size:100%}.hex-and-channels-group,.control-section{display:flex;flex-direction:row;flex-wrap:wrap}.section{padding-block:0 var(--calcite-color-picker-spacing);padding-inline:var(--calcite-color-picker-spacing)}.section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}.sliders{display:flex;flex-direction:column;justify-content:space-between;margin-inline-start:var(--calcite-color-picker-spacing)}.preview-and-sliders{display:flex;align-items:center;padding:var(--calcite-color-picker-spacing)}.color-hex-options,.section--split{flex-grow:1}.header{display:flex;align-items:center;justify-content:space-between;color:var(--calcite-color-text-1)}.color-mode-container{padding-block-start:var(--calcite-color-picker-spacing)}.channels{display:flex;row-gap:0.125rem}.channel[data-channel-index=\"3\"]{inline-size:159px}:host([scale=s]) .channels{flex-wrap:wrap}:host([scale=s]) .channel{flex-basis:30%;flex-grow:1}:host([scale=s]) .channel[data-channel-index=\"3\"]{inline-size:unset;margin-inline-start:unset}:host([scale=l]) .channel[data-channel-index=\"3\"]{inline-size:131px}.saved-colors{display:grid;gap:0.5rem;padding-block-start:var(--calcite-color-picker-spacing);grid-template-columns:repeat(auto-fill, 24px)}.saved-colors-buttons{display:flex}.saved-color{outline-offset:0;outline-color:transparent;cursor:pointer}.saved-color:focus{outline:2px solid var(--calcite-color-brand);outline-offset:2px}.saved-color:hover{transition:outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;outline:2px solid var(--calcite-color-border-2);outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}";
 

package/dist/esm/calcite-combobox-item-group.entry.js

@@ -3,11 +3,11 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, h, g as getElement } from './index-164d485a.js';
+import { r as registerInstance, h, g as getElement } from './index-bdfaac50.js';
 import { g as guid } from './guid-b75a5f7b.js';
-import { g as getAncestors, a as getDepth } from './utils-ef0ff036.js';
-import './dom-38c6f027.js';
-import './resources-8834f920.js';
+import { g as getAncestors, a as getDepth } from './utils-95e9dd51.js';
+import './dom-b91aa537.js';
+import './resources-0f8db821.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.

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

@@ -0,0 +1,141 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, e as createEvent, h, a as Host, g as getElement } from './index-bdfaac50.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-a395417e.js';
+import { g as getSlotted } from './dom-b91aa537.js';
+import { g as guid } from './guid-b75a5f7b.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-71585ecc.js';
+import { g as getAncestors, i as isSingleLike, a as getDepth } from './utils-95e9dd51.js';
+import { g as getIconScale } from './component-edd2c3cd.js';
+import './observers-5ba39eee.js';
+import './resources-0f8db821.js';
+import './browser-b8d08bed.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.4.0
+ */
+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);-webkit-text-decoration-line:none;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-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);-webkit-text-decoration-line:none;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) {
+        registerInstance(this, hostRef);
+        this.calciteComboboxItemChange = createEvent(this, "calciteComboboxItemChange", 6);
+        this.itemClickHandler = () => {
+            this.toggleSelected();
+        };
+        this.disabled = false;
+        this.selected = false;
+        this.active = false;
+        this.ancestors = undefined;
+        this.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 = getAncestors(this.el);
+        connectConditionalSlotComponent(this);
+        connectInteractive(this);
+    }
+    disconnectedCallback() {
+        disconnectConditionalSlotComponent(this);
+        disconnectInteractive(this);
+    }
+    componentDidRender() {
+        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 ? (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: getIconScale(this.scale) })) : null;
+    }
+    renderSelectIndicator(showDot, iconPath) {
+        return showDot ? (h("span", { class: {
+                [CSS.icon]: true,
+                [CSS.dot]: true,
+                [CSS.iconIndent]: true,
+            } })) : (h("calcite-icon", { class: {
+                [CSS.icon]: true,
+                [CSS.iconActive]: this.selected,
+                [CSS.iconIndent]: true,
+            }, flipRtl: this.iconFlipRtl, icon: iconPath, key: "indicator", scale: getIconScale(this.scale) }));
+    }
+    renderChildren() {
+        if (getSlotted(this.el)) {
+            return (h("ul", { key: "default-slot-container" }, h("slot", null)));
+        }
+        return null;
+    }
+    render() {
+        const { disabled } = this;
+        const isSingleSelect = 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 = getDepth(this.el);
+        return (h(Host, { "aria-hidden": "true" }, h(InteractiveContainer, { disabled: disabled }, h("div", { class: `container scale--${this.scale}`, style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, h("li", { class: classes, id: this.guid, onClick: this.itemClickHandler }, this.renderSelectIndicator(showDot, iconPath), this.renderIcon(iconPath), h("span", { class: "title" }, this.textLabel)), this.renderChildren()))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "selected": ["selectedWatchHandler"]
+    }; }
+};
+ComboboxItem.style = comboboxItemCss;
+
+export { ComboboxItem as calcite_combobox_item };