@esri/solutions-components 0.8.3 → 0.8.4

package/dist/cjs/calcite-chip.cjs.entry.js

@@ -1,262 +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-b53bfd7c.js');
-const dom = require('./dom-cf1e2e9f.js');
-const conditionalSlot = require('./conditionalSlot-73e71a05.js');
-const loadable = require('./loadable-41446b78.js');
-const t9n = require('./t9n-463dcbff.js');
-const interactive = require('./interactive-08e5bc95.js');
-const locale = require('./locale-a615b02f.js');
-const observers = require('./observers-5923a7cc.js');
-const key = require('./key-86f4a0b0.js');
-const component = require('./component-ac7c3bd8.js');
-require('./guid-ae73cd27.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 = {
-    title: "title",
-    close: "close",
-    imageContainer: "image-container",
-    chipIcon: "chip-icon",
-    textSlotted: "text--slotted",
-    container: "container",
-    imageSlotted: "image--slotted",
-    closable: "closable",
-    multiple: "multiple",
-    selectable: "selectable",
-    selectIcon: "select-icon",
-    selectIconActive: "select-icon--active",
-    nonInteractive: "non-interactive",
-    isCircle: "is-circle",
-};
-const SLOTS = {
-    image: "image",
-};
-const ICONS = {
-    close: "x",
-    unchecked: "circle",
-    checkedSingle: "circle-f",
-    checked: "check-circle-f",
-};
-
-const chipCss = ":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([scale=s]){block-size:1.5rem;font-size:var(--calcite-font-size--2);--calcite-chip-spacing-s-internal:0.25rem;--calcite-chip-spacing-l-internal:0.5rem}:host([scale=s]) .close,:host([scale=s]) .select-icon--active{block-size:1rem;inline-size:1rem}:host([scale=s]) .image-container{block-size:1.25rem;inline-size:1.25rem}:host([scale=s]) .container.is-circle{block-size:1.5rem;inline-size:1.5rem}:host([scale=m]){block-size:2rem;font-size:var(--calcite-font-size--1);--calcite-chip-spacing-s-internal:0.375rem;--calcite-chip-spacing-l-internal:0.5rem}:host([scale=m]) .close,:host([scale=m]) .image-container,:host([scale=m]) .select-icon--active{block-size:1.5rem;inline-size:1.5rem}:host([scale=m]) .container.is-circle{block-size:2rem;inline-size:2rem}:host([scale=l]){block-size:2.75rem;font-size:var(--calcite-font-size-0);--calcite-chip-spacing-s-internal:0.5rem;--calcite-chip-spacing-l-internal:0.75rem}:host([scale=l]) .image-container,:host([scale=l]) .close,:host([scale=l]) .select-icon--active{block-size:2rem;inline-size:2rem}:host([scale=l]) .container.is-circle{block-size:2.75rem;inline-size:2.75rem}:host{display:inline-flex;cursor:default;border-radius:9999px}.container{box-sizing:border-box;display:inline-flex;block-size:100%;max-inline-size:100%;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-1);font-weight:var(--calcite-font-weight-medium);outline-color:transparent}.container:not(.is-circle){padding-inline:var(--calcite-chip-spacing-s-internal)}.container.selectable{cursor:pointer}.container:not(.non-interactive):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          )}:host([scale=s]) .container.image--slotted{padding-inline-start:calc(0.125rem / 2)}:host([scale=s]) .container.is-circle{padding-inline:0}.container.text--slotted .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:var(--calcite-chip-spacing-s-internal)}.container:not(.text--slotted) .title{display:none}.container:not(.image--slotted) .image-container{display:none}.container.closable{padding-inline-end:calc(var(--calcite-chip-spacing-l-internal) / 2)}.container:not(.is-circle).image--slotted{padding-inline-start:calc(var(--calcite-chip-spacing-l-internal) / 2)}.container:not(.is-circle).image--slotted .image-container{margin-inline-end:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle).image--slotted .image-container~.chip-icon{margin-inline-start:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle).selectable:not(.text--slotted) .chip-icon{margin-inline-end:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle):not(.selectable):not(.text--slotted) .chip-icon{margin-inline-start:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle):not(.text--slotted) .chip-icon{margin-inline-end:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle):not(.text-slotted).image--slotted .image-container{margin-inline-end:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle):not(.closable):not(.text--slotted).image--slotted.selectable .image-container{margin-inline-end:0}.container:not(.is-circle):not(.closable):not(.text--slotted).image--slotted.selectable .image-container~.chip-icon{margin-inline-start:calc(var(--calcite-chip-spacing-s-internal) * 2)}.chip-icon{position:relative;margin-block:0px;display:inline-flex;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline:var(--calcite-chip-spacing-s-internal)}.image-container{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;pointer-events:none}.close{margin:0px;cursor:pointer;align-items:center;border-style:none;background-color:transparent;color:var(--calcite-color-text-1);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;-webkit-appearance:none;display:flex;border-radius:50%;align-content:center;justify-content:center;--calcite-chip-transparent-hover:var(--calcite-color-transparent-hover);--calcite-chip-transparent-press:var(--calcite-color-transparent-press)}.close:hover{background-color:var(--calcite-chip-transparent-hover)}.close:focus{background-color:var(--calcite-chip-transparent-hover);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          )}.close:active{background-color:var(--calcite-chip-transparent-press)}.close calcite-icon{color:inherit}.select-icon{align-self:center;justify-content:center;align-items:center;display:flex;inset-block-start:-1px;position:relative;visibility:hidden;inline-size:0;opacity:0;transition:opacity 0.15s ease-in-out, inline-size 0.15s ease-in-out}.select-icon.select-icon--active{visibility:visible;opacity:0.5}.container:not(.is-circle).image--slotted .select-icon.select-icon--active{margin-inline-end:var(--calcite-chip-spacing-s-internal)}:host([selected]) .select-icon{opacity:1}.container:hover .select-icon--active{opacity:1}slot[name=image]::slotted(*){display:flex;block-size:100%;inline-size:100%;overflow:hidden;border-radius:50%}:host([kind=neutral]){background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}:host([kind=neutral]) .container{border-color:transparent}:host([kind=neutral]) .close{color:var(--calcite-color-text-3)}:host([kind=neutral]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-color-text-3))}:host([kind=inverse]){background-color:var(--calcite-color-inverse);color:var(--calcite-color-text-inverse)}:host([kind=inverse]) .container{border-color:transparent}:host([kind=inverse]) .close{color:var(--calcite-color-text-inverse)}:host([kind=inverse]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-color-text-inverse))}:host([kind=brand]){background-color:var(--calcite-color-brand);color:var(--calcite-color-text-inverse)}:host([kind=brand]) .container{border-color:transparent}:host([kind=brand]) .close{color:var(--calcite-color-text-inverse)}:host([kind=brand]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-color-text-inverse))}:host([appearance=outline-fill]),:host([appearance=outline]){background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1)}:host([appearance=outline-fill]) .close,:host([appearance=outline]) .close{color:var(--calcite-color-text-3)}:host([appearance=outline-fill]) .chip-icon,:host([appearance=outline]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-color-text-3))}:host([appearance=outline-fill]){background-color:var(--calcite-color-foreground-1)}:host([appearance=outline]){background-color:transparent}:host([kind=neutral][appearance=outline-fill]) .container,:host([kind=neutral][appearance=outline]) .container{border-color:var(--calcite-color-border-1)}:host([kind=inverse][appearance=outline-fill]) .container,:host([kind=inverse][appearance=outline]) .container{border-color:var(--calcite-color-border-inverse)}:host([kind=brand][appearance=outline-fill]) .container,:host([kind=brand][appearance=outline]) .container{border-color:var(--calcite-color-brand)}:host([kind=brand][appearance=solid]) button,:host([kind=inverse][appearance=solid]) button{outline-color:var(--calcite-color-text-inverse)}:host([closed]){display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
-
-const Chip = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.calciteChipClose = index.createEvent(this, "calciteChipClose", 6);
-        this.calciteChipSelect = index.createEvent(this, "calciteChipSelect", 6);
-        this.calciteInternalChipKeyEvent = index.createEvent(this, "calciteInternalChipKeyEvent", 6);
-        this.mutationObserver = observers.createObserver("mutation", () => this.updateHasText());
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.close = () => {
-            this.calciteChipClose.emit();
-            this.selected = false;
-            this.closed = true;
-        };
-        this.closeButtonKeyDownHandler = (event) => {
-            if (key.isActivationKey(event.key)) {
-                event.preventDefault();
-                this.close();
-            }
-        };
-        this.handleSlotImageChange = (event) => {
-            this.hasImage = dom.slotChangeHasAssignedElement(event);
-        };
-        this.handleEmittingEvent = () => {
-            if (this.interactive) {
-                this.calciteChipSelect.emit();
-            }
-        };
-        this.disabled = false;
-        this.appearance = "solid";
-        this.kind = "neutral";
-        this.closable = false;
-        this.icon = undefined;
-        this.iconFlipRtl = false;
-        this.scale = "m";
-        this.label = undefined;
-        this.value = undefined;
-        this.closed = false;
-        this.selectionMode = "none";
-        this.selected = false;
-        this.messageOverrides = undefined;
-        this.messages = undefined;
-        this.interactive = false;
-        this.defaultMessages = undefined;
-        this.effectiveLocale = undefined;
-        this.hasText = false;
-        this.hasImage = false;
-    }
-    onMessagesChange() {
-        /* wired up by t9n util */
-    }
-    effectiveLocaleChange() {
-        t9n.updateMessages(this, this.effectiveLocale);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Lifecycle
-    //
-    // --------------------------------------------------------------------------
-    connectedCallback() {
-        var _a;
-        conditionalSlot.connectConditionalSlotComponent(this);
-        interactive.connectInteractive(this);
-        locale.connectLocalized(this);
-        t9n.connectMessages(this);
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
-    }
-    componentDidLoad() {
-        loadable.setComponentLoaded(this);
-    }
-    componentDidRender() {
-        interactive.updateHostInteraction(this);
-    }
-    disconnectedCallback() {
-        var _a;
-        conditionalSlot.disconnectConditionalSlotComponent(this);
-        interactive.disconnectInteractive(this);
-        locale.disconnectLocalized(this);
-        t9n.disconnectMessages(this);
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    async componentWillLoad() {
-        loadable.setUpLoadableComponent(this);
-        if (index.Build.isBrowser) {
-            await t9n.setUpMessages(this);
-            this.updateHasText();
-        }
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Event Listeners
-    //
-    //--------------------------------------------------------------------------
-    keyDownHandler(event) {
-        if (event.target === this.el) {
-            switch (event.key) {
-                case " ":
-                case "Enter":
-                    this.handleEmittingEvent();
-                    event.preventDefault();
-                    break;
-                case "ArrowRight":
-                case "ArrowLeft":
-                case "Home":
-                case "End":
-                    this.calciteInternalChipKeyEvent.emit(event);
-                    event.preventDefault();
-                    break;
-            }
-        }
-    }
-    clickHandler() {
-        if (!this.interactive && this.closable) {
-            this.closeButtonEl.focus();
-        }
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    //--------------------------------------------------------------------------
-    /** Sets focus on the component. */
-    async setFocus() {
-        var _a, _b;
-        await loadable.componentFocusable(this);
-        if (!this.disabled && this.interactive) {
-            (_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        else if (!this.disabled && this.closable) {
-            (_b = this.closeButtonEl) === null || _b === void 0 ? void 0 : _b.focus();
-        }
-    }
-    updateHasText() {
-        this.hasText = this.el.textContent.trim().length > 0;
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    //--------------------------------------------------------------------------
-    renderChipImage() {
-        return (index.h("div", { class: CSS.imageContainer }, index.h("slot", { name: SLOTS.image, onSlotchange: this.handleSlotImageChange })));
-    }
-    renderSelectionIcon() {
-        const icon = this.selectionMode === "multiple" && this.selected
-            ? ICONS.checked
-            : this.selectionMode === "multiple"
-                ? ICONS.unchecked
-                : this.selected
-                    ? ICONS.checkedSingle
-                    : undefined;
-        return (index.h("div", { class: {
-                [CSS.selectIcon]: true,
-                [CSS.selectIconActive]: this.selectionMode === "multiple" || this.selected,
-            } }, icon ? index.h("calcite-icon", { icon: icon, scale: component.getIconScale(this.scale) }) : null));
-    }
-    renderCloseButton() {
-        return (index.h("button", { "aria-label": this.messages.dismissLabel, class: CSS.close, onClick: this.close, onKeyDown: this.closeButtonKeyDownHandler, tabIndex: this.disabled ? -1 : 0,
-            // 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: (el) => (this.closeButtonEl = el) }, index.h("calcite-icon", { icon: ICONS.close, scale: component.getIconScale(this.scale) })));
-    }
-    renderIcon() {
-        return (index.h("calcite-icon", { class: CSS.chipIcon, flipRtl: this.iconFlipRtl, icon: this.icon, scale: component.getIconScale(this.scale) }));
-    }
-    render() {
-        const { disabled } = this;
-        const disableInteraction = disabled || (!disabled && !this.interactive);
-        const role = this.selectionMode === "multiple" && this.interactive
-            ? "checkbox"
-            : this.selectionMode !== "none" && this.interactive
-                ? "radio"
-                : this.interactive
-                    ? "button"
-                    : undefined;
-        return (index.h(index.Host, null, index.h(interactive.InteractiveContainer, { disabled: disabled }, index.h("div", { "aria-checked": this.selectionMode !== "none" && this.interactive
-                ? dom.toAriaBoolean(this.selected)
-                : undefined, "aria-disabled": disableInteraction ? dom.toAriaBoolean(disabled) : undefined, "aria-label": this.label, class: {
-                [CSS.container]: true,
-                [CSS.textSlotted]: this.hasText,
-                [CSS.imageSlotted]: this.hasImage,
-                [CSS.selectable]: this.selectionMode !== "none",
-                [CSS.multiple]: this.selectionMode === "multiple",
-                [CSS.closable]: this.closable,
-                [CSS.nonInteractive]: !this.interactive,
-                [CSS.isCircle]: !this.closable &&
-                    !this.hasText &&
-                    (!this.icon || !this.hasImage) &&
-                    (this.selectionMode === "none" ||
-                        (!!this.selectionMode && this.selectionMode !== "multiple" && !this.selected)),
-            }, onClick: this.handleEmittingEvent, role: role, tabIndex: disableInteraction ? -1 : 0,
-            // 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: (el) => (this.containerEl = el) }, this.selectionMode !== "none" && this.renderSelectionIcon(), this.renderChipImage(), this.icon && this.renderIcon(), index.h("span", { class: CSS.title }, index.h("slot", null)), this.closable && this.renderCloseButton()))));
-    }
-    static get assetsDirs() { return ["assets"]; }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "messageOverrides": ["onMessagesChange"],
-        "effectiveLocale": ["effectiveLocaleChange"]
-    }; }
-};
-Chip.style = chipCss;
-
-exports.calcite_chip = Chip;

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-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

@@ -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-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;