@esri/solutions-components 0.8.2 → 0.8.3

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

@@ -0,0 +1,274 @@
+/*!
+ * 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-b53bfd7c.js');
+const utils = require('./utils-b276a49d.js');
+const index = require('./index-8c75d784.js');
+const dom = require('./dom-cf1e2e9f.js');
+const loadable = require('./loadable-41446b78.js');
+const resources = require('./resources-63b3a6b8.js');
+require('./_commonjsHelpers-ed90c4ad.js');
+require('./guid-ae73cd27.js');
+require('./resources-a2b1b149.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 = 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", { class: CSS.container }, index$1.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 ? (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

@@ -0,0 +1,99 @@
+/*!
+ * 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-b53bfd7c.js');
+const index$1 = require('./index-8c75d784.js');
+const dom = require('./dom-cf1e2e9f.js');
+const utils = require('./utils-b276a49d.js');
+require('./_commonjsHelpers-ed90c4ad.js');
+require('./guid-ae73cd27.js');
+require('./resources-a2b1b149.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) {
+        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", { 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-color-picker.cjs.entry.js

@@ -7,23 +7,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-105cf2b9.js');
-const resources = require('./resources-02142b99.js');
-const dom = require('./dom-c9c2c835.js');
-const utils = require('./utils-cca83dd0.js');
-const interactive = require('./interactive-3ab7044d.js');
-const key = require('./key-c5504030.js');
-const loadable = require('./loadable-5a794992.js');
-const locale = require('./locale-d237c9d5.js');
+const index = require('./index-b53bfd7c.js');
+const index$1 = require('./index-8c75d784.js');
+const lodash = require('./lodash-7587da9f.js');
+const dom = require('./dom-cf1e2e9f.js');
+const resources = require('./resources-63b3a6b8.js');
+const utils = require('./utils-b276a49d.js');
+const interactive = require('./interactive-08e5bc95.js');
+const key = require('./key-86f4a0b0.js');
+const loadable = require('./loadable-41446b78.js');
+const locale = require('./locale-a615b02f.js');
 const math = require('./math-318a1646.js');
-const t9n = require('./t9n-993a84de.js');
-const throttle = require('./throttle-aeeb1b4d.js');
-require('./_commonjsHelpers-480c2e77.js');
+const t9n = require('./t9n-463dcbff.js');
+require('./_commonjsHelpers-ed90c4ad.js');
 require('./guid-ae73cd27.js');
-require('./resources-9447c777.js');
-require('./browser-d08a5f99.js');
-require('./observers-db4527e4.js');
-require('./debounce-30afab47.js');
+require('./resources-a2b1b149.js');
+require('./browser-fe25aefa.js');
+require('./observers-5923a7cc.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}";
 
@@ -82,12 +82,12 @@ const ColorPicker = class {
             }
             const normalizedHex = color && utils.normalizeHex(utils.hexify(color, utils.alphaCompatible(this.mode)));
             if (hex !== normalizedHex) {
-                this.internalColorSet(resources.color(hex));
+                this.internalColorSet(index$1.color(hex));
             }
         };
         this.handleSavedColorSelect = (event) => {
             const swatch = event.currentTarget;
-            this.internalColorSet(resources.color(swatch.color));
+            this.internalColorSet(index$1.color(swatch.color));
         };
         this.handleChannelInput = (event) => {
             const input = event.currentTarget;
@@ -298,7 +298,7 @@ const ColorPicker = class {
                 localStorage.setItem(storageKey, JSON.stringify(savedColors));
             }
         };
-        this.drawColorControls = throttle.throttle((type = "all") => {
+        this.drawColorControls = lodash.throttle((type = "all") => {
             if ((type === "all" || type === "color-field") && this.colorFieldRenderingContext) {
                 this.drawColorField();
             }
@@ -435,7 +435,7 @@ const ColorPicker = class {
         }
         const color = allowEmpty && !value
             ? null
-            : resources.color(value != null && typeof value === "object" && utils.alphaCompatible(this.mode)
+            : index$1.color(value != null && typeof value === "object" && utils.alphaCompatible(this.mode)
                 ? utils.normalizeColor(value)
                 : value);
         const colorChanged = !utils.colorEqual(color, this.color);
@@ -494,7 +494,7 @@ const ColorPicker = class {
         const willSetNoColor = allowEmpty && !value;
         const parsedMode = utils.parseMode(value);
         const valueIsCompatible = willSetNoColor || (format === "auto" && parsedMode) || format === parsedMode;
-        const initialColor = willSetNoColor ? null : valueIsCompatible ? resources.color(value) : color;
+        const initialColor = willSetNoColor ? null : valueIsCompatible ? index$1.color(value) : color;
         if (!valueIsCompatible) {
             this.showIncompatibleColorWarning(value, format);
         }
@@ -781,7 +781,7 @@ const ColorPicker = class {
         const offset = 1 / (hueSliderColorStopKeywords.length - 1);
         let currentOffset = 0;
         hueSliderColorStopKeywords.forEach((keyword) => {
-            gradient.addColorStop(currentOffset, resources.color(keyword).string());
+            gradient.addColorStop(currentOffset, index$1.color(keyword).string());
             currentOffset += offset;
         });
         context.clearRect(0, 0, width, height + this.getSliderCapSpacing() * 2);
@@ -871,7 +871,7 @@ const ColorPicker = class {
                 : math.remap(x, 0, width, width - radius * 2, width - radius);
     }
     updateColorFromChannels(channels) {
-        this.internalColorSet(resources.color(channels, this.channelMode));
+        this.internalColorSet(index$1.color(channels, this.channelMode));
     }
     updateChannelsFromColor(color) {
         this.channels = color ? this.toChannels(color) : [null, null, null, null];

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

@@ -7,11 +7,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-105cf2b9.js');
+const index = require('./index-b53bfd7c.js');
 const guid = require('./guid-ae73cd27.js');
-const utils = require('./utils-65d812ea.js');
-require('./dom-c9c2c835.js');
-require('./resources-9447c777.js');
+const utils = require('./utils-72a66b3c.js');
+require('./dom-cf1e2e9f.js');
+require('./resources-a2b1b149.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.

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

@@ -0,0 +1,145 @@
+/*!
+ * 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-b53bfd7c.js');
+const conditionalSlot = require('./conditionalSlot-73e71a05.js');
+const dom = require('./dom-cf1e2e9f.js');
+const guid = require('./guid-ae73cd27.js');
+const interactive = require('./interactive-08e5bc95.js');
+const utils = require('./utils-72a66b3c.js');
+const component = require('./component-ac7c3bd8.js');
+require('./observers-5923a7cc.js');
+require('./resources-a2b1b149.js');
+require('./browser-fe25aefa.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) {
+        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, { "aria-hidden": "true" }, index.h(interactive.InteractiveContainer, { disabled: disabled }, index.h("div", { class: `container scale--${this.scale}`, style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, index.h("li", { class: classes, id: this.guid, onClick: this.itemClickHandler }, this.renderSelectIndicator(showDot, iconPath), this.renderIcon(iconPath), index.h("span", { 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;