@esri/solutions-components 0.8.3 → 0.8.4

package/dist/esm/calcite-segmented-control.entry.js

@@ -1,241 +0,0 @@
-/*!
- * 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, f as Build, g as getElement } from './index-bdfaac50.js';
-import { a as getElementDir } from './dom-b91aa537.js';
-import { a as afterConnectDefaultValueSet, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-f2181470.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-71585ecc.js';
-import { c as connectLabel, d as disconnectLabel } from './label-16184ce7.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-aea90723.js';
-import { c as createObserver } from './observers-5ba39eee.js';
-import { V as Validation } from './Validation-59a77488.js';
-import './guid-b75a5f7b.js';
-import './resources-0f8db821.js';
-import './browser-b8d08bed.js';
-import './component-edd2c3cd.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 = {
-    itemWrapper: "item-wrapper",
-};
-
-const segmentedControlCss = ":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:flex;flex-direction:column}.item-wrapper{display:flex;background-color:var(--calcite-color-foreground-1);inline-size:-moz-fit-content;inline-size:fit-content;outline:1px solid var(--calcite-color-border-input);outline-offset:-1px}:host([appearance=outline])>.item-wrapper{background-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([layout=vertical])>.item-wrapper{flex-direction:column;align-items:flex-start;align-self:flex-start}:host([width=full])>.item-wrapper{inline-size:100%;min-inline-size:-moz-fit-content;min-inline-size:fit-content}:host([width=full])>.item-wrapper ::slotted(calcite-segmented-control-item){flex:1 1 auto}:host([width=full][layout=vertical])>.item-wrapper ::slotted(calcite-segmented-control-item){justify-content:flex-start}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
-
-const SegmentedControl = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteSegmentedControlChange = createEvent(this, "calciteSegmentedControlChange", 6);
-        //--------------------------------------------------------------------------
-        //
-        //  Event Listeners
-        //
-        //--------------------------------------------------------------------------
-        this.handleClick = (event) => {
-            if (this.disabled) {
-                return;
-            }
-            if (event.target.localName === "calcite-segmented-control-item") {
-                this.selectItem(event.target, true);
-            }
-        };
-        this.mutationObserver = createObserver("mutation", () => this.setUpItems());
-        this.appearance = "solid";
-        this.disabled = false;
-        this.form = undefined;
-        this.required = false;
-        this.name = undefined;
-        this.layout = "horizontal";
-        this.scale = "m";
-        this.value = null;
-        this.selectedItem = undefined;
-        this.status = "idle";
-        this.validationMessage = undefined;
-        this.validationIcon = undefined;
-        this.width = "auto";
-    }
-    handlePropsChange() {
-        this.handleItemPropChange();
-    }
-    valueHandler(value) {
-        const items = this.getItems();
-        items.forEach((item) => (item.checked = item.value === value));
-    }
-    handleSelectedItemChange(newItem, oldItem) {
-        this.value = newItem === null || newItem === void 0 ? void 0 : newItem.value;
-        if (newItem === oldItem) {
-            return;
-        }
-        const items = this.getItems();
-        const match = items.filter((item) => item === newItem).pop();
-        if (match) {
-            this.selectItem(match);
-        }
-        else if (items[0]) {
-            items[0].tabIndex = 0;
-        }
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Lifecycle
-    //
-    //--------------------------------------------------------------------------
-    componentWillLoad() {
-        setUpLoadableComponent(this);
-        this.setUpItems();
-    }
-    componentDidLoad() {
-        afterConnectDefaultValueSet(this, this.value);
-        setComponentLoaded(this);
-    }
-    connectedCallback() {
-        var _a;
-        connectInteractive(this);
-        connectLabel(this);
-        connectForm(this);
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true });
-        this.handleItemPropChange();
-    }
-    disconnectedCallback() {
-        var _a;
-        disconnectInteractive(this);
-        disconnectLabel(this);
-        disconnectForm(this);
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.el);
-    }
-    componentDidRender() {
-        updateHostInteraction(this);
-    }
-    render() {
-        return (h(Host, { onClick: this.handleClick, role: "radiogroup" }, h("div", { class: CSS.itemWrapper }, h(InteractiveContainer, { disabled: this.disabled }, h("slot", null), h(HiddenFormInputSlot, { component: this }))), this.validationMessage ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null));
-    }
-    handleSelected(event) {
-        event.preventDefault();
-        this.selectItem(event.target);
-        event.stopPropagation();
-    }
-    handleKeyDown(event) {
-        const keys = ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", " "];
-        const { key } = event;
-        const { el, selectedItem } = this;
-        if (keys.indexOf(key) === -1) {
-            return;
-        }
-        let adjustedKey = key;
-        if (getElementDir(el) === "rtl") {
-            if (key === "ArrowRight") {
-                adjustedKey = "ArrowLeft";
-            }
-            if (key === "ArrowLeft") {
-                adjustedKey = "ArrowRight";
-            }
-        }
-        const items = this.getItems();
-        let selectedIndex = -1;
-        items.forEach((item, index) => {
-            if (item === selectedItem) {
-                selectedIndex = index;
-            }
-        });
-        switch (adjustedKey) {
-            case "ArrowLeft":
-            case "ArrowUp":
-                event.preventDefault();
-                const previous = selectedIndex < 1 ? items[items.length - 1] : items[selectedIndex - 1];
-                this.selectItem(previous, true);
-                return;
-            case "ArrowRight":
-            case "ArrowDown":
-                event.preventDefault();
-                const next = selectedIndex === -1 ? items[1] : items[selectedIndex + 1] || items[0];
-                this.selectItem(next, true);
-                return;
-            case " ":
-                event.preventDefault();
-                this.selectItem(event.target, true);
-                return;
-            default:
-                return;
-        }
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Methods
-    //
-    // --------------------------------------------------------------------------
-    /** Sets focus on the component. */
-    async setFocus() {
-        var _a;
-        await componentFocusable(this);
-        (_a = (this.selectedItem || this.getItems()[0])) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    handleItemPropChange() {
-        const items = this.getItems();
-        items.forEach((item) => {
-            item.appearance = this.appearance;
-            item.layout = this.layout;
-            item.scale = this.scale;
-        });
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    onLabelClick() {
-        this.setFocus();
-    }
-    getItems() {
-        return Array.from(this.el.querySelectorAll("calcite-segmented-control-item"));
-    }
-    selectItem(selected, emit = false) {
-        if (selected === this.selectedItem) {
-            return;
-        }
-        const items = this.getItems();
-        let match = null;
-        items.forEach((item) => {
-            const matches = item === selected;
-            if ((matches && !item.checked) || (!matches && item.checked)) {
-                item.checked = matches;
-            }
-            item.tabIndex = matches ? 0 : -1;
-            if (matches) {
-                match = item;
-                if (emit) {
-                    this.calciteSegmentedControlChange.emit();
-                }
-            }
-        });
-        this.selectedItem = match;
-        if (Build.isBrowser && match) {
-            match.focus();
-        }
-    }
-    setUpItems() {
-        const items = this.getItems();
-        const lastChecked = items.filter((item) => item.checked).pop();
-        if (lastChecked) {
-            this.selectItem(lastChecked);
-        }
-        else if (items[0]) {
-            items[0].tabIndex = 0;
-        }
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "appearance": ["handlePropsChange"],
-        "layout": ["handlePropsChange"],
-        "scale": ["handlePropsChange"],
-        "value": ["valueHandler"],
-        "selectedItem": ["handleSelectedItemChange"]
-    }; }
-};
-SegmentedControl.style = segmentedControlCss;
-
-export { SegmentedControl as calcite_segmented_control };

package/dist/esm/calcite-select.entry.js

@@ -1,231 +0,0 @@
-/*!
- * 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 { e as focusElement } from './dom-b91aa537.js';
-import { c as connectForm, d as disconnectForm, a as afterConnectDefaultValueSet, H as HiddenFormInputSlot } from './form-f2181470.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-71585ecc.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-16184ce7.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-aea90723.js';
-import { c as createObserver } from './observers-5ba39eee.js';
-import { g as getIconScale } from './component-edd2c3cd.js';
-import { V as Validation } from './Validation-59a77488.js';
-import './guid-b75a5f7b.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",
-    iconContainer: "icon-container",
-    select: "select",
-    wrapper: "wrapper",
-};
-
-const selectCss = ":host{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}: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:flex;flex-direction:column}.wrapper{position:relative;display:flex;align-items:stretch;inline-size:var(--select-width)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-select-font-size:var(--calcite-font-size--2);--calcite-select-spacing-inline:0.5rem 2rem}:host([scale=s]) .wrapper{block-size:1.5rem}:host([scale=s]) .icon-container{padding-inline:0.5rem}:host([scale=m]){--calcite-select-font-size:var(--calcite-font-size--1);--calcite-select-spacing-inline:0.75rem 2.5rem}:host([scale=m]) .wrapper{block-size:2rem}:host([scale=m]) .icon-container{padding-inline:0.75rem}:host([scale=l]){--calcite-select-font-size:var(--calcite-font-size-0);--calcite-select-spacing-inline:1rem 3rem}:host([scale=l]) .wrapper{block-size:44px}:host([scale=l]) .icon-container{padding-inline:1rem}:host([width=auto]){inline-size:auto}:host([width=half]){inline-size:50%}:host([width=full]){inline-size:100%}.select{margin:0px;box-sizing:border-box;inline-size:100%;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:0px;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);font-family:inherit;color:var(--calcite-color-text-2);outline-color:transparent;font-size:var(--calcite-select-font-size);padding-inline:var(--calcite-select-spacing-inline);border-inline-end-width:0px}.select: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          )}.select:hover{background-color:var(--calcite-color-foreground-2)}select:disabled{border-color:var(--calcite-color-border-input);--tw-bg-opacity:1}.icon-container{pointer-events:none;position:absolute;inset-block:0px;display:flex;align-items:center;border-width:0px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:transparent;color:var(--calcite-color-text-2);inset-inline-end:0px;border-inline-width:0px 1px}:host([status=invalid]) select,:host([status=invalid]) .icon-container{border-color:var(--calcite-color-status-danger)}:host([status=invalid]) select:focus,:host([status=invalid]) .icon-container:focus{outline:2px solid var(--calcite-color-status-danger);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          )}.select:focus~.icon-container{border-color:transparent}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
-
-function isOption(optionOrGroup) {
-    return optionOrGroup.tagName === "CALCITE-OPTION";
-}
-function isOptionGroup(optionOrGroup) {
-    return optionOrGroup.tagName === "CALCITE-OPTION-GROUP";
-}
-const Select = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteSelectChange = createEvent(this, "calciteSelectChange", 6);
-        this.componentToNativeEl = new Map();
-        this.mutationObserver = createObserver("mutation", () => this.populateInternalSelect());
-        this.handleInternalSelectChange = () => {
-            const selected = this.selectEl.selectedOptions[0];
-            this.selectFromNativeOption(selected);
-            requestAnimationFrame(() => this.emitChangeEvent());
-        };
-        this.populateInternalSelect = () => {
-            const optionsAndGroups = Array.from(this.el.children).filter((child) => child.tagName === "CALCITE-OPTION" || child.tagName === "CALCITE-OPTION-GROUP");
-            this.clearInternalSelect();
-            optionsAndGroups.forEach((optionOrGroup) => { var _a; return (_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.append(this.toNativeElement(optionOrGroup)); });
-        };
-        this.storeSelectRef = (node) => {
-            this.selectEl = node;
-            this.populateInternalSelect();
-            const selected = this.selectEl.selectedOptions[0];
-            this.selectFromNativeOption(selected);
-        };
-        this.emitChangeEvent = () => {
-            this.calciteSelectChange.emit();
-        };
-        this.disabled = false;
-        this.form = undefined;
-        this.label = undefined;
-        this.validationMessage = undefined;
-        this.validationIcon = undefined;
-        this.name = undefined;
-        this.required = false;
-        this.scale = "m";
-        this.status = "idle";
-        this.value = null;
-        this.selectedOption = undefined;
-        this.width = "auto";
-    }
-    valueHandler(value) {
-        const items = this.el.querySelectorAll("calcite-option");
-        items.forEach((item) => (item.selected = item.value === value));
-    }
-    selectedOptionHandler(selectedOption) {
-        this.value = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value;
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Lifecycle
-    //
-    //--------------------------------------------------------------------------
-    connectedCallback() {
-        var _a;
-        const { el } = this;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(el, {
-            subtree: true,
-            childList: true,
-        });
-        connectInteractive(this);
-        connectLabel(this);
-        connectForm(this);
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        disconnectInteractive(this);
-        disconnectLabel(this);
-        disconnectForm(this);
-    }
-    componentWillLoad() {
-        setUpLoadableComponent(this);
-    }
-    componentDidLoad() {
-        var _a, _b;
-        setComponentLoaded(this);
-        afterConnectDefaultValueSet(this, (_b = (_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "");
-    }
-    componentDidRender() {
-        updateHostInteraction(this);
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    //--------------------------------------------------------------------------
-    /** Sets focus on the component. */
-    async setFocus() {
-        await componentFocusable(this);
-        focusElement(this.selectEl);
-    }
-    handleOptionOrGroupChange(event) {
-        event.stopPropagation();
-        const optionOrGroup = event.target;
-        const nativeEl = this.componentToNativeEl.get(optionOrGroup);
-        if (!nativeEl) {
-            return;
-        }
-        this.updateNativeElement(optionOrGroup, nativeEl);
-        if (isOption(optionOrGroup) && optionOrGroup.selected) {
-            this.deselectAllExcept(optionOrGroup);
-            this.selectedOption = optionOrGroup;
-        }
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    onLabelClick() {
-        this.setFocus();
-    }
-    updateNativeElement(optionOrGroup, nativeOptionOrGroup) {
-        nativeOptionOrGroup.disabled = optionOrGroup.disabled;
-        nativeOptionOrGroup.label = optionOrGroup.label;
-        if (isOption(optionOrGroup)) {
-            const option = nativeOptionOrGroup;
-            option.selected = optionOrGroup.selected;
-            option.value = optionOrGroup.value;
-            // need to set innerText for mobile
-            // see https://stackoverflow.com/questions/35021620/ios-safari-not-showing-all-options-for-select-menu/41749701
-            option.innerText = optionOrGroup.label;
-        }
-    }
-    clearInternalSelect() {
-        this.componentToNativeEl.forEach((value) => value.remove());
-        this.componentToNativeEl.clear();
-    }
-    selectFromNativeOption(nativeOption) {
-        if (!nativeOption) {
-            return;
-        }
-        let futureSelected;
-        this.componentToNativeEl.forEach((nativeOptionOrGroup, optionOrGroup) => {
-            if (isOption(optionOrGroup) && nativeOptionOrGroup === nativeOption) {
-                optionOrGroup.selected = true;
-                futureSelected = optionOrGroup;
-                this.deselectAllExcept(optionOrGroup);
-            }
-        });
-        if (futureSelected) {
-            this.selectedOption = futureSelected;
-        }
-    }
-    toNativeElement(optionOrGroup) {
-        if (isOption(optionOrGroup)) {
-            const option = document.createElement("option");
-            this.updateNativeElement(optionOrGroup, option);
-            this.componentToNativeEl.set(optionOrGroup, option);
-            return option;
-        }
-        if (isOptionGroup(optionOrGroup)) {
-            const group = document.createElement("optgroup");
-            this.updateNativeElement(optionOrGroup, group);
-            Array.from(optionOrGroup.children).forEach((option) => {
-                const nativeOption = this.toNativeElement(option);
-                group.append(nativeOption);
-                this.componentToNativeEl.set(optionOrGroup, nativeOption);
-            });
-            this.componentToNativeEl.set(optionOrGroup, group);
-            return group;
-        }
-        throw new Error("unsupported element child provided");
-    }
-    deselectAllExcept(except) {
-        this.el.querySelectorAll("calcite-option").forEach((option) => {
-            if (option === except) {
-                return;
-            }
-            option.selected = false;
-        });
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    //--------------------------------------------------------------------------
-    renderChevron() {
-        return (h("div", { class: CSS.iconContainer }, h("calcite-icon", { class: CSS.icon, icon: "chevron-down", scale: getIconScale(this.scale) })));
-    }
-    render() {
-        const { disabled } = this;
-        return (h(Host, null, h(InteractiveContainer, { disabled: disabled }, h("div", { class: CSS.wrapper }, h("select", { "aria-label": getLabelText(this), class: CSS.select, disabled: disabled, onChange: this.handleInternalSelectChange,
-            // 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.storeSelectRef }, h("slot", null)), this.renderChevron(), h(HiddenFormInputSlot, { component: this })), this.validationMessage ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "value": ["valueHandler"],
-        "selectedOption": ["selectedOptionHandler"]
-    }; }
-};
-Select.style = selectCss;
-
-export { Select as calcite_select };