@esri/solutions-components 0.8.67 → 0.9.0

package/dist/solutions-components/calcite-stepper.entry.js

@@ -1,336 +0,0 @@
-/*!
- * Copyright 2022 Esri
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-import { h, r as registerInstance, e as createEvent, a as Host, k as readTask, g as getElement } from './index-0eecd45f.js';
-import { h as slotChangeGetAssignedElements, d as focusElementInGroup } from './dom-1f06a111.js';
-import { c as createObserver } from './observers-81ed4977.js';
-import { g as guid } from './guid-f05d01d5.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-1b4d548e.js';
-import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-2df2d559.js';
-import './resources-be0262db.js';
-import './key-15222297.js';
-
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.2
- */
-const CSS$1 = {
-    actionIcon: "action-icon",
-    actionIconStart: "action-icon--start",
-    actionIconEnd: "action-icon--end",
-    actionContainer: "action-container",
-    stepBarContainer: "step-bar-container",
-    singleView: "single-view",
-};
-
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.2
- */
-const CSS = {
-    stepBar: "step-bar",
-    stepBarActive: "step-bar--active",
-    stepBarComplete: "step-bar--complete",
-    stepBarDisabled: "step-bar--disabled",
-    stepBarError: "step-bar--error",
-    stepBarInActive: "step-bar--inactive",
-};
-const StepBar = ({ disabled, active, complete, error, key, }) => (h("svg", { class: {
-        [CSS.stepBar]: true,
-    }, key: key }, h("rect", { class: {
-        [CSS.stepBarActive]: active,
-        [CSS.stepBarComplete]: complete,
-        [CSS.stepBarDisabled]: disabled,
-        [CSS.stepBarError]: error,
-        [CSS.stepBarInActive]: true,
-    }, width: "100%", x: "0", y: "0" })));
-
-const stepperCss = ":host([scale=s]){--calcite-internal-stepper-item-spacing-unit-s:0.25rem;--calcite-internal-stepper-action-block-size:2.75rem;--calcite-internal-stepper-action-inline-size:2rem;--calcite-internal-step-bar-gap:0.25rem}:host([scale=m]){--calcite-internal-stepper-item-spacing-unit-s:0.5rem;--calcite-internal-stepper-action-block-size:3.25rem;--calcite-internal-stepper-action-inline-size:2.5rem}:host([scale=l]){--calcite-internal-stepper-item-spacing-unit-s:0.75rem;--calcite-internal-stepper-action-block-size:4rem;--calcite-internal-stepper-action-inline-size:3rem;--calcite-internal-step-bar-gap:0.75rem}:host{display:flex}.container{position:relative;display:flex;inline-size:100%;min-inline-size:-moz-fit-content;min-inline-size:fit-content;flex-direction:row;flex-wrap:wrap;align-items:stretch;justify-content:space-between}:host([layout=vertical]) .container{flex:1 1 auto;flex-direction:column}:host([layout=horizontal]) .container,:host([layout=horizontal-single]) .container{display:grid;grid-template-areas:\"items\" \"content\";gap:0.5rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal][scale=s]) .container,:host([layout=horizontal-single][scale=s]) .container{gap:0.25rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal][scale=l]) .container,:host([layout=horizontal-single][scale=l]) .container{gap:0.75rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal]) .container.single-view{display:flex;grid-template-columns:none}.action-icon{position:relative;display:flex;flex-grow:0;block-size:var(--calcite-internal-stepper-action-block-size);inline-size:var(--calcite-internal-stepper-action-inline-size)}.action-container{position:absolute;display:flex;justify-content:space-between;padding-block:0.25rem;inline-size:100%}.step-bar{display:flex;block-size:100%;inline-size:100%}.step-bar-container{position:absolute;display:flex;align-items:flex-start;justify-content:space-between;block-size:0.125rem;inline-size:100%;gap:var(--calcite-internal-step-bar-gap, 0.5rem)}.step-bar--inactive{fill:var(--calcite-color-border-3, #dfdfdf);fill-opacity:1;block-size:100%}.step-bar--active{fill:var(--calcite-color-brand)}.step-bar--complete{fill:var(--calcite-color-brand);fill-opacity:0.5}.step-bar--error{fill:var(--calcite-color-status-danger)}.step-bar--disabled{opacity:0.5}:host([hidden]){display:none}[hidden]{display:none}";
-
-const Stepper = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteStepperItemChange = createEvent(this, "calciteStepperItemChange", 6);
-        this.calciteInternalStepperItemChange = createEvent(this, "calciteInternalStepperItemChange", 6);
-        this.enabledItems = [];
-        this.itemMap = new Map();
-        this.items = [];
-        this.mutationObserver = createObserver("mutation", () => this.updateItems());
-        /** Specifies if the user is viewing one `stepper-item` at a time when the page width is less than sum of min-width of each item. */
-        this.multipleViewMode = false;
-        this.guid = `calcite-stepper-action-${guid()}`;
-        this.handleActionClick = (event) => {
-            const currentActivePosition = this.currentActivePosition;
-            const target = event.target;
-            if (target.getAttribute("data-position") === "start") {
-                this.prevStep();
-            }
-            else {
-                this.nextStep();
-            }
-            if (typeof this.currentActivePosition === "number" &&
-                currentActivePosition !== this.currentActivePosition &&
-                !this.items[this.currentActivePosition].disabled) {
-                this.calciteStepperItemChange.emit();
-            }
-        };
-        this.setContainerEl = (el) => {
-            this.containerEl = el;
-        };
-        this.handleDefaultSlotChange = (event) => {
-            const items = slotChangeGetAssignedElements(event).filter((el) => (el === null || el === void 0 ? void 0 : el.tagName) === "CALCITE-STEPPER-ITEM");
-            this.items = items;
-            const spacing = Array(items.length).fill("1fr").join(" ");
-            this.containerEl.style.gridTemplateAreas = spacing;
-            this.containerEl.style.gridTemplateColumns = spacing;
-            this.setStepperItemNumberingSystem();
-        };
-        this.icon = false;
-        this.layout = "horizontal";
-        this.numbered = false;
-        this.scale = "m";
-        this.messages = undefined;
-        this.numberingSystem = undefined;
-        this.selectedItem = null;
-        this.messageOverrides = undefined;
-        this.defaultMessages = undefined;
-        this.effectiveLocale = "";
-        this.currentActivePosition = undefined;
-    }
-    handleItemPropChange() {
-        this.updateItems();
-        this.determineActiveStepper();
-    }
-    numberingSystemChange() {
-        this.setStepperItemNumberingSystem();
-    }
-    onMessagesChange() {
-        /* wired up by t9n util */
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Lifecycle
-    //
-    //--------------------------------------------------------------------------
-    connectedCallback() {
-        var _a;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true });
-        this.updateItems();
-        connectMessages(this);
-        connectLocalized(this);
-    }
-    async componentWillLoad() {
-        await setUpMessages(this);
-    }
-    componentDidLoad() {
-        // if no stepper items are set as active, default to the first one
-        if (typeof this.currentActivePosition !== "number") {
-            const enabledStepIndex = this.getFirstEnabledStepperPosition();
-            if (enabledStepIndex === 0) {
-                this.currentActivePosition = enabledStepIndex;
-            }
-            this.calciteInternalStepperItemChange.emit({
-                position: enabledStepIndex,
-            });
-        }
-    }
-    disconnectedCallback() {
-        var _a;
-        disconnectMessages(this);
-        disconnectLocalized(this);
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    render() {
-        return (h(Host, { key: '00695fed43575595fcca8adac07588de79f14170', "aria-label": this.messages.label, role: "region" }, h("div", { key: '3b06715dc1220048bdab4743e783fb28a8da001e', class: { container: true, [CSS$1.singleView]: this.layout === "horizontal-single" },
-            // eslint-disable-next-line react/jsx-sort-props -- auto-generated by @esri/calcite-components/enforce-ref-last-prop
-            ref: this.setContainerEl }, this.layout === "horizontal-single" && (h("div", { key: 'd14afc0d2ae03ea603a5c3a05157825f3dcbcc43', class: { [CSS$1.stepBarContainer]: true } }, this.items.map((item, index) => (h(StepBar, { active: index === this.currentActivePosition, complete: item.complete && index !== this.currentActivePosition && !item.error, disabled: item.disabled && index !== this.currentActivePosition, error: item.error && index !== this.currentActivePosition, key: index }))))), this.layout === "horizontal-single" && (h("div", { key: 'a83ca9efc86407ab66d895027ff3a6b9d4ab698f', class: { [CSS$1.actionContainer]: true } }, this.renderAction("start"), this.renderAction("end"))), h("slot", { key: '104b16d7e23e4ec0977d2934906ea83ffcd7f4cc', onSlotchange: this.handleDefaultSlotChange }))));
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Event Listeners
-    //
-    //--------------------------------------------------------------------------
-    calciteInternalStepperItemKeyEvent(event) {
-        const item = event.detail.item;
-        const itemToFocus = event.target;
-        switch (item.key) {
-            case "ArrowDown":
-            case "ArrowRight":
-                focusElementInGroup(this.enabledItems, itemToFocus, "next");
-                break;
-            case "ArrowUp":
-            case "ArrowLeft":
-                focusElementInGroup(this.enabledItems, itemToFocus, "previous");
-                break;
-            case "Home":
-                focusElementInGroup(this.enabledItems, itemToFocus, "first");
-                break;
-            case "End":
-                focusElementInGroup(this.enabledItems, itemToFocus, "last");
-                break;
-        }
-        event.stopPropagation();
-    }
-    registerItem(event) {
-        const item = event.target;
-        const { content, position } = event.detail;
-        this.itemMap.set(item, { position, content });
-        this.enabledItems = this.filterItems();
-        event.stopPropagation();
-    }
-    updateItem(event) {
-        const { position } = event.detail;
-        if (typeof position === "number") {
-            this.currentActivePosition = position;
-            this.selectedItem = event.target;
-        }
-        this.calciteInternalStepperItemChange.emit({
-            position,
-        });
-    }
-    handleUserRequestedStepperItemSelect() {
-        this.calciteStepperItemChange.emit();
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    //--------------------------------------------------------------------------
-    /** Set the next `calcite-stepper-item` as active. */
-    async nextStep() {
-        const enabledStepIndex = this.getEnabledStepIndex(this.currentActivePosition + 1, "next");
-        if (typeof enabledStepIndex !== "number") {
-            return;
-        }
-        this.updateStep(enabledStepIndex);
-    }
-    /** Set the previous `calcite-stepper-item` as active. */
-    async prevStep() {
-        const enabledStepIndex = this.getEnabledStepIndex(this.currentActivePosition - 1, "previous");
-        if (typeof enabledStepIndex !== "number") {
-            return;
-        }
-        this.updateStep(enabledStepIndex);
-    }
-    /**
-     * Set a specified `calcite-stepper-item` as active.
-     *
-     * @param step
-     */
-    async goToStep(step) {
-        const position = step - 1;
-        if (this.currentActivePosition !== position) {
-            this.updateStep(position);
-        }
-    }
-    /** Set the first `calcite-stepper-item` as active. */
-    async startStep() {
-        const enabledStepIndex = this.getEnabledStepIndex(0, "next");
-        if (typeof enabledStepIndex !== "number") {
-            return;
-        }
-        this.updateStep(enabledStepIndex);
-    }
-    /** Set the last `calcite-stepper-item` as active. */
-    async endStep() {
-        const enabledStepIndex = this.getEnabledStepIndex(this.items.length - 1, "previous");
-        if (typeof enabledStepIndex !== "number") {
-            return;
-        }
-        this.updateStep(enabledStepIndex);
-    }
-    effectiveLocaleChange() {
-        updateMessages(this, this.effectiveLocale);
-    }
-    handlePositionChange() {
-        readTask(() => {
-            this.determineActiveStepper();
-        });
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    updateItems() {
-        this.el.querySelectorAll("calcite-stepper-item").forEach((item) => {
-            item.icon = this.icon;
-            item.numbered = this.numbered;
-            item.layout = this.layout;
-            item.scale = this.scale;
-        });
-    }
-    determineActiveStepper() {
-        const { items } = this;
-        if (items.length < 2) {
-            return;
-        }
-        const { currentActivePosition, layout } = this;
-        this.multipleViewMode = layout !== "horizontal-single";
-        items.forEach((item, index) => {
-            item.hidden = layout === "horizontal-single" && index !== (currentActivePosition || 0);
-        });
-    }
-    getEnabledStepIndex(startIndex, direction = "next") {
-        var _a;
-        const { items, currentActivePosition } = this;
-        let newIndex = startIndex;
-        while (((_a = items[newIndex]) === null || _a === void 0 ? void 0 : _a.disabled) && this.layout !== "horizontal-single") {
-            newIndex = newIndex + (direction === "previous" ? -1 : 1);
-        }
-        return newIndex !== currentActivePosition && newIndex < items.length && newIndex >= 0
-            ? newIndex
-            : null;
-    }
-    updateStep(position) {
-        this.currentActivePosition = position;
-        this.calciteInternalStepperItemChange.emit({
-            position,
-        });
-    }
-    filterItems() {
-        return this.items.filter((item) => !item.disabled);
-    }
-    setStepperItemNumberingSystem() {
-        this.items.forEach((item) => {
-            item.numberingSystem = this.numberingSystem;
-        });
-    }
-    renderAction(position) {
-        const isPositionStart = position === "start";
-        const path = isPositionStart ? "chevron-left" : "chevron-right";
-        const { currentActivePosition, multipleViewMode, layout } = this;
-        const totalItems = this.items.length;
-        const id = `${this.guid}-${isPositionStart ? "start" : "end"}`;
-        return layout === "horizontal-single" && !multipleViewMode ? (h("calcite-action", { alignment: "center", appearance: "transparent", class: {
-                [CSS$1.actionIcon]: true,
-            }, compact: true, "data-position": position, disabled: (currentActivePosition === 0 && isPositionStart) ||
-                (currentActivePosition === totalItems - 1 && !isPositionStart), icon: path, iconFlipRtl: true, id: id, onClick: this.handleActionClick, scale: this.scale, text: isPositionStart ? this.messages.previousStep : this.messages.nextStep })) : null;
-    }
-    getFirstEnabledStepperPosition() {
-        const enabledStepIndex = this.items.findIndex((item) => !item.disabled);
-        if (enabledStepIndex > -1) {
-            return enabledStepIndex;
-        }
-        return 0;
-    }
-    static get assetsDirs() { return ["assets"]; }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "icon": ["handleItemPropChange"],
-        "layout": ["handleItemPropChange"],
-        "numbered": ["handleItemPropChange"],
-        "scale": ["handleItemPropChange"],
-        "numberingSystem": ["numberingSystemChange"],
-        "messageOverrides": ["onMessagesChange"],
-        "effectiveLocale": ["effectiveLocaleChange"],
-        "currentActivePosition": ["handlePositionChange"]
-    }; }
-};
-Stepper.style = stepperCss;
-
-export { Stepper as calcite_stepper };

package/dist/solutions-components/calcite-switch.entry.js

@@ -1,113 +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-0eecd45f.js';
-import { e as focusElement, t as toAriaBoolean } from './dom-1f06a111.js';
-import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-cd789357.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-179483f5.js';
-import { i as isActivationKey } from './key-15222297.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-c34ec0cf.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-5f2ac40f.js';
-import './guid-f05d01d5.js';
-import './resources-be0262db.js';
-import './browser-920df963.js';
-import './component-960ddabf.js';
-
-const switchCss = ":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]) .container{block-size:0.75rem}:host([scale=s]) .track{block-size:0.75rem;inline-size:1.5rem}:host([scale=s]) .handle{block-size:0.5rem;inline-size:0.5rem}:host([scale=m]) .container{block-size:1rem}:host([scale=m]) .track{block-size:1rem;inline-size:2rem}:host([scale=m]) .handle{block-size:0.75rem;inline-size:0.75rem}:host([scale=l]) .container{block-size:1.5rem}:host([scale=l]) .track{block-size:1.5rem;inline-size:3rem}:host([scale=l]) .handle{block-size:1.25rem;inline-size:1.25rem}:host{position:relative;display:inline-block;inline-size:auto;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;tap-highlight-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{outline-width:0px}.track{pointer-events:none;position:relative;box-sizing:border-box;display:inline-block;border-radius:9999px;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-2);background-color:var(--calcite-color-foreground-2);vertical-align:top;outline-color:transparent}:host(:focus) .track{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.handle{pointer-events:none;position:absolute;display:block;border-radius:9999px;border-width:2px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);transition-property:all;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);inset-block-start:-1px;inset-inline:-1px auto}:host(:hover) .handle,:host(:focus) .handle{border-color:var(--calcite-color-brand);box-shadow:inset 0 0 0 1px var(--calcite-color-brand)}:host([checked]) .track{border-color:var(--calcite-color-brand-hover);background-color:var(--calcite-color-brand)}:host([checked]) .handle{border-color:var(--calcite-color-brand);inset-inline:auto -1px}:host([checked]:hover) .track{border-color:var(--calcite-color-brand-hover);background-color:var(--calcite-color-brand)}:host([checked]:hover) .handle{border-color:var(--calcite-color-brand-hover);box-shadow:inset 0 0 0 1px var(--calcite-color-brand-hover)}@media (forced-colors: active){:host([checked]) .track{background-color:canvasText}}::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 Switch = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteSwitchChange = createEvent(this, "calciteSwitchChange", 6);
-        this.keyDownHandler = (event) => {
-            if (!this.disabled && isActivationKey(event.key)) {
-                this.toggle();
-                event.preventDefault();
-            }
-        };
-        this.clickHandler = () => {
-            if (this.disabled) {
-                return;
-            }
-            this.toggle();
-        };
-        this.setSwitchEl = (el) => {
-            this.switchEl = el;
-        };
-        this.disabled = false;
-        this.form = undefined;
-        this.label = undefined;
-        this.name = undefined;
-        this.scale = "m";
-        this.checked = false;
-        this.value = undefined;
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    //--------------------------------------------------------------------------
-    /** Sets focus on the component. */
-    async setFocus() {
-        await componentFocusable(this);
-        focusElement(this.switchEl);
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    syncHiddenFormInput(input) {
-        input.type = "checkbox";
-    }
-    onLabelClick() {
-        if (!this.disabled) {
-            this.toggle();
-            this.setFocus();
-        }
-    }
-    toggle() {
-        this.checked = !this.checked;
-        this.calciteSwitchChange.emit();
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Lifecycle
-    //
-    //--------------------------------------------------------------------------
-    connectedCallback() {
-        connectInteractive(this);
-        connectLabel(this);
-        connectForm(this);
-    }
-    componentWillLoad() {
-        setUpLoadableComponent(this);
-    }
-    componentDidLoad() {
-        setComponentLoaded(this);
-    }
-    disconnectedCallback() {
-        disconnectInteractive(this);
-        disconnectLabel(this);
-        disconnectForm(this);
-    }
-    componentDidRender() {
-        updateHostInteraction(this);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        return (h(Host, { key: '3844964b46482e9b6e902c07eccf97264970f3de', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: 'c0028a5587e7d346ba4d0d7a214f649606f85e17', disabled: this.disabled }, h("div", { key: 'ff48a447bbe579ff1b3f104dea12e76c91cbcb88', "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: "container", role: "switch", tabIndex: 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: this.setSwitchEl }, h("div", { key: '5b9f7b7dcab019e92d62c8ff18bf00068a286b36', class: "track" }, h("div", { key: '7d05ec0e24c81db645735a7d6e03163ec77a2230', class: "handle" })), h(HiddenFormInputSlot, { key: '191a29b812bb8e1f31f56a7a84d941a48fb80372', component: this })))));
-    }
-    get el() { return getElement(this); }
-};
-Switch.style = switchCss;
-
-export { Switch as calcite_switch };