@esri/solutions-components 0.8.3 → 0.8.4

package/dist/solutions-components/calcite-action-pad.entry.js

@@ -1,165 +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 { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-a395417e.js';
-import { s as slotChangeGetAssignedElements } from './dom-b91aa537.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-aea90723.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-857f39cf.js';
-import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-b39c5433.js';
-import { t as toggleChildActionText, E as ExpandToggle } from './ExpandToggle-22fd2faa.js';
-import { c as createObserver } from './observers-5ba39eee.js';
-import './guid-b75a5f7b.js';
-import './resources-0f8db821.js';
-import './key-9a10d862.js';
-import './resources-b0e2b809.js';
-import './resources-20074cb1.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 = {
-    actionGroupEnd: "action-group--end",
-    container: "container",
-};
-const SLOTS = {
-    expandTooltip: "expand-tooltip",
-};
-
-const actionPadCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{display:block}@keyframes in{0%{opacity:0}100%{opacity:1}}:host{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:0.125rem;--calcite-action-pad-expanded-max-width:auto;background:transparent}:host([expanded][layout=vertical]) .container{max-inline-size:var(--calcite-action-pad-expanded-max-width)}::slotted(calcite-action-group){border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);padding-block:0px}.container{display:inline-flex;flex-direction:column;overflow-y:auto;border-radius:0.25rem;background-color:var(--calcite-color-background);--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.action-group--bottom{flex-grow:1;justify-content:flex-end;padding-block-end:0px}:host([layout=horizontal]) .container{flex-direction:row}:host([layout=horizontal]) .container .action-group--bottom{padding:0px}:host([layout=horizontal]) .container ::slotted(calcite-action-group){border-width:0px;padding:0px;border-inline-end-width:1px}::slotted(calcite-action-group:last-child){border-block-end-width:0px}:host([hidden]){display:none}[hidden]{display:none}";
-
-const ActionPad = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteActionPadToggle = createEvent(this, "calciteActionPadToggle", 6);
-        this.mutationObserver = createObserver("mutation", () => this.setGroupLayout(Array.from(this.el.querySelectorAll("calcite-action-group"))));
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.actionMenuOpenHandler = (event) => {
-            if (event.target.menuOpen) {
-                const composedPath = event.composedPath();
-                Array.from(this.el.querySelectorAll("calcite-action-group")).forEach((group) => {
-                    if (!composedPath.includes(group)) {
-                        group.menuOpen = false;
-                    }
-                });
-            }
-        };
-        this.toggleExpand = () => {
-            this.expanded = !this.expanded;
-            this.calciteActionPadToggle.emit();
-        };
-        this.setExpandToggleRef = (el) => {
-            this.expandToggleEl = el;
-        };
-        this.handleDefaultSlotChange = (event) => {
-            const groups = slotChangeGetAssignedElements(event).filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-action-group"));
-            this.setGroupLayout(groups);
-        };
-        this.handleTooltipSlotChange = (event) => {
-            const tooltips = slotChangeGetAssignedElements(event).filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-tooltip"));
-            this.expandTooltip = tooltips[0];
-        };
-        this.actionsEndGroupLabel = undefined;
-        this.expandDisabled = false;
-        this.expanded = false;
-        this.layout = "vertical";
-        this.position = undefined;
-        this.scale = undefined;
-        this.messages = undefined;
-        this.messageOverrides = undefined;
-        this.overlayPositioning = "absolute";
-        this.expandTooltip = undefined;
-        this.effectiveLocale = "";
-        this.defaultMessages = undefined;
-    }
-    expandedHandler(expanded) {
-        toggleChildActionText({ el: this.el, expanded });
-    }
-    layoutHandler() {
-        this.updateGroups();
-    }
-    onMessagesChange() {
-        /* wired up by t9n util */
-    }
-    effectiveLocaleChange() {
-        updateMessages(this, this.effectiveLocale);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Lifecycle
-    //
-    // --------------------------------------------------------------------------
-    connectedCallback() {
-        connectConditionalSlotComponent(this);
-        connectLocalized(this);
-        connectMessages(this);
-    }
-    disconnectedCallback() {
-        disconnectLocalized(this);
-        disconnectMessages(this);
-        disconnectConditionalSlotComponent(this);
-    }
-    async componentWillLoad() {
-        setUpLoadableComponent(this);
-        const { el, expanded } = this;
-        toggleChildActionText({ el, expanded });
-        await setUpMessages(this);
-    }
-    componentDidLoad() {
-        setComponentLoaded(this);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Methods
-    //
-    // --------------------------------------------------------------------------
-    /**
-     * Sets focus on the component's first focusable element.
-     */
-    async setFocus() {
-        var _a;
-        await componentFocusable(this);
-        (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    updateGroups() {
-        this.setGroupLayout(Array.from(this.el.querySelectorAll("calcite-action-group")));
-    }
-    setGroupLayout(groups) {
-        groups.forEach((group) => (group.layout = this.layout));
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Component Methods
-    //
-    // --------------------------------------------------------------------------
-    renderBottomActionGroup() {
-        const { expanded, expandDisabled, messages, el, position, toggleExpand, scale, layout, actionsEndGroupLabel, overlayPositioning, } = this;
-        const expandToggleNode = !expandDisabled ? (h(ExpandToggle, { collapseText: messages.collapse, el: el, expandText: messages.expand, expanded: expanded, position: position, scale: scale, toggle: toggleExpand, tooltip: this.expandTooltip,
-            // 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.setExpandToggleRef })) : null;
-        return expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupEnd, label: actionsEndGroupLabel, layout: layout, overlayPositioning: overlayPositioning, scale: scale }, h("slot", { name: SLOTS.expandTooltip, onSlotchange: this.handleTooltipSlotChange }), expandToggleNode)) : null;
-    }
-    render() {
-        return (h(Host, { onCalciteActionMenuOpen: this.actionMenuOpenHandler }, h("div", { class: CSS.container }, h("slot", { onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup())));
-    }
-    static get delegatesFocus() { return true; }
-    static get assetsDirs() { return ["assets"]; }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "expanded": ["expandedHandler"],
-        "layout": ["layoutHandler"],
-        "messageOverrides": ["onMessagesChange"],
-        "effectiveLocale": ["effectiveLocaleChange"]
-    }; }
-};
-ActionPad.style = actionPadCss;
-
-export { ActionPad as calcite_action_pad };

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

@@ -1,184 +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, i as forceUpdate, f as Build, h, a as Host, g as getElement } from './index-bdfaac50.js';
-import { t as toAriaBoolean } from './dom-b91aa537.js';
-import { g as guid } from './guid-b75a5f7b.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-71585ecc.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-aea90723.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-857f39cf.js';
-import { c as createObserver } from './observers-5ba39eee.js';
-import { g as getIconScale } from './component-edd2c3cd.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-b39c5433.js';
-import './resources-0f8db821.js';
-import './browser-b8d08bed.js';
-import './key-9a10d862.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 = {
-    button: "button",
-    buttonTextVisible: "button--text-visible",
-    buttonCompact: "button--compact",
-    indicatorText: "indicator-text",
-    iconContainer: "icon-container",
-    slotContainer: "slot-container",
-    slotContainerHidden: "slot-container--hidden",
-    textContainer: "text-container",
-    textContainerVisible: "text-container--visible",
-    indicatorWithIcon: "indicator-with-icon",
-    indicatorWithoutIcon: "indicator-without-icon",
-};
-const SLOTS = {
-    tooltip: "tooltip",
-};
-
-const actionCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}: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;background-color:transparent;--calcite-action-indicator-color:var(--calcite-color-brand);--calcite-action-color-transparent-hover:var(--calcite-color-transparent-hover);--calcite-action-color-transparent-press:var(--calcite-color-transparent-press)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.button{position:relative;margin:0px;display:flex;inline-size:auto;cursor:pointer;align-items:center;justify-content:flex-start;border-style:none;background-color:var(--calcite-color-foreground-1);fill:var(--calcite-color-text-3);font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-3);outline-color:transparent;text-align:unset;flex:1 0 auto}.button:hover{background-color:var(--calcite-color-foreground-2);fill:var(--calcite-color-text-1);color:var(--calcite-color-text-1)}.button:focus{background-color:var(--calcite-color-foreground-2);fill:var(--calcite-color-text-1);color:var(--calcite-color-text-1);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          )}.button:active{background-color:var(--calcite-color-foreground-3)}.button .icon-container{pointer-events:none;margin:0px;display:flex;align-items:center;justify-content:center;min-inline-size:1rem;min-block-size:1rem}.button .text-container{margin:0px;inline-size:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5rem;opacity:0;transition-property:opacity;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-property:margin;transition-property:inline-size}.button .text-container--visible{inline-size:auto;flex:1 1 auto;opacity:1}:host([data-active]) .button{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]) .button{padding-inline:0.5rem;padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=s]) .button--text-visible .icon-container{margin-inline-end:0.5rem}:host([scale=m]) .button{padding-inline:1rem;padding-block:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=m]) .button--text-visible .icon-container{margin-inline-end:0.75rem}:host([scale=l]) .button{padding:1.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=l]) .button--text-visible .icon-container{margin-inline-end:1rem}:host([alignment=center]) .button{justify-content:center}:host([alignment=end]) .button{justify-content:flex-end}:host([alignment=center]) .button .text-container--visible,:host([alignment=end]) .button .text-container--visible{flex:0 1 auto}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-inline:0px}.slot-container{display:flex}.slot-container--hidden{display:none}.button--text-visible{inline-size:100%}:host([active]) .button,:host([active]) .button:hover,:host([active]) .button:focus,:host([active][loading]) .button{background-color:var(--calcite-color-foreground-3);fill:var(--calcite-color-text-1);color:var(--calcite-color-text-1)}:host([active]) .button:active{background-color:var(--calcite-color-foreground-1)}:host([appearance=transparent]) .button{background-color:transparent}:host([appearance=transparent][active]) .button,:host([appearance=transparent]) .button:hover,:host([appearance=transparent]) .button:focus{background-color:var(--calcite-action-color-transparent-hover)}:host([appearance=transparent]) .button:active{background-color:var(--calcite-action-color-transparent-press)}:host([appearance=transparent][disabled]) .button{background-color:transparent}:host([loading][appearance=solid]) .button,:host([loading][appearance=solid]) .button:hover,:host([loading][appearance=solid]) .button:focus{background-color:var(--calcite-color-foreground-1)}:host([loading][appearance=solid]) .button .text-container,:host([loading][appearance=solid]) .button:hover .text-container,:host([loading][appearance=solid]) .button:focus .text-container{opacity:var(--calcite-opacity-disabled)}:host([loading]) calcite-loader[inline]{color:var(--calcite-color-text-3);margin-inline-end:0px}:host([disabled]) .button,:host([disabled]) .button:hover,:host([disabled]) .button:focus{cursor:default;background-color:var(--calcite-color-foreground-1);opacity:var(--calcite-opacity-disabled)}:host([disabled][active]) .button,:host([disabled][active]) .button:hover,:host([disabled][active]) .button:focus{background-color:var(--calcite-color-foreground-3);opacity:var(--calcite-opacity-disabled)}:host([appearance=transparent]) .button{background-color:transparent;transition-property:box-shadow;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.indicator-with-icon{position:relative}.indicator-with-icon::after{content:\"\";position:absolute;block-size:0.5rem;inline-size:0.5rem;border-radius:9999px;inset-block-end:-0.275rem;inset-inline-end:-0.275rem;background-color:var(--calcite-action-indicator-color)}.indicator-without-icon{margin-inline:0.25rem;inline-size:1rem;position:relative}.indicator-without-icon::after{content:\"\";position:absolute;block-size:0.5rem;inline-size:0.5rem;border-radius:9999px;inset-block-end:-0.275rem;inset-inline-end:-0.275rem;background-color:var(--calcite-action-indicator-color)}.indicator-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";
-
-const Action = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.mutationObserver = createObserver("mutation", () => forceUpdate(this));
-        this.guid = `calcite-action-${guid()}`;
-        this.indicatorId = `${this.guid}-indicator`;
-        this.buttonId = `${this.guid}-button`;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.handleTooltipSlotChange = (event) => {
-            const tooltips = event.target
-                .assignedElements({
-                flatten: true,
-            })
-                .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-tooltip"));
-            const tooltip = tooltips[0];
-            if (tooltip) {
-                tooltip.referenceElement = this.buttonEl;
-            }
-        };
-        this.active = false;
-        this.alignment = undefined;
-        this.appearance = "solid";
-        this.compact = false;
-        this.disabled = false;
-        this.icon = undefined;
-        this.iconFlipRtl = false;
-        this.indicator = false;
-        this.label = undefined;
-        this.loading = false;
-        this.scale = "m";
-        this.text = undefined;
-        this.textEnabled = false;
-        this.messages = undefined;
-        this.messageOverrides = undefined;
-        this.effectiveLocale = "";
-        this.defaultMessages = undefined;
-    }
-    onMessagesChange() {
-        /* wired up by t9n util */
-    }
-    effectiveLocaleChange() {
-        updateMessages(this, this.effectiveLocale);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Lifecycle
-    //
-    // --------------------------------------------------------------------------
-    connectedCallback() {
-        var _a;
-        connectInteractive(this);
-        connectLocalized(this);
-        connectMessages(this);
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
-    }
-    async componentWillLoad() {
-        setUpLoadableComponent(this);
-        if (Build.isBrowser) {
-            await setUpMessages(this);
-        }
-    }
-    componentDidLoad() {
-        setComponentLoaded(this);
-    }
-    disconnectedCallback() {
-        var _a;
-        disconnectInteractive(this);
-        disconnectLocalized(this);
-        disconnectMessages(this);
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    componentDidRender() {
-        updateHostInteraction(this);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Methods
-    //
-    // --------------------------------------------------------------------------
-    /** Sets focus on the component. */
-    async setFocus() {
-        var _a;
-        await componentFocusable(this);
-        (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    renderTextContainer() {
-        const { text, textEnabled } = this;
-        const textContainerClasses = {
-            [CSS.textContainer]: true,
-            [CSS.textContainerVisible]: textEnabled,
-        };
-        return text ? (h("div", { class: textContainerClasses, key: "text-container" }, text)) : null;
-    }
-    renderIndicatorText() {
-        const { indicator, messages, indicatorId, buttonId } = this;
-        return (h("div", { "aria-labelledby": buttonId, "aria-live": "polite", class: CSS.indicatorText, id: indicatorId, role: "region" }, indicator ? messages.indicator : null));
-    }
-    renderIconContainer() {
-        var _a;
-        const { loading, icon, scale, el, iconFlipRtl, indicator } = this;
-        const loaderScale = scale === "l" ? "l" : "m";
-        const calciteLoaderNode = loading ? (h("calcite-loader", { inline: true, label: this.messages.loading, scale: loaderScale })) : null;
-        const calciteIconNode = icon ? (h("calcite-icon", { class: { [CSS.indicatorWithIcon]: indicator }, flipRtl: iconFlipRtl, icon: icon, scale: getIconScale(this.scale) })) : null;
-        const iconNode = calciteLoaderNode || calciteIconNode;
-        const hasIconToDisplay = iconNode || ((_a = el.children) === null || _a === void 0 ? void 0 : _a.length);
-        const slotContainerNode = (h("div", { class: {
-                [CSS.slotContainer]: true,
-                [CSS.slotContainerHidden]: loading,
-            } }, h("slot", null)));
-        return hasIconToDisplay ? (h("div", { "aria-hidden": "true", class: CSS.iconContainer, key: "icon-container" }, iconNode, slotContainerNode)) : null;
-    }
-    render() {
-        const { active, compact, disabled, icon, loading, textEnabled, label, text, indicator, indicatorId, buttonId, messages, } = this;
-        const ariaLabel = `${label || text}${indicator ? ` (${messages.indicator})` : ""}`;
-        const buttonClasses = {
-            [CSS.button]: true,
-            [CSS.buttonTextVisible]: textEnabled,
-            [CSS.buttonCompact]: compact,
-        };
-        return (h(Host, null, h(InteractiveContainer, { disabled: disabled }, h("button", { "aria-busy": toAriaBoolean(loading), "aria-controls": indicator ? indicatorId : null, "aria-disabled": toAriaBoolean(disabled), "aria-label": ariaLabel, "aria-pressed": toAriaBoolean(active), class: buttonClasses, disabled: disabled, id: buttonId,
-            // 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: (buttonEl) => (this.buttonEl = buttonEl) }, this.renderIconContainer(), this.renderTextContainer(), !icon && indicator && h("div", { class: CSS.indicatorWithoutIcon, key: "indicator-no-icon" })), h("slot", { name: SLOTS.tooltip, onSlotchange: this.handleTooltipSlotChange }), this.renderIndicatorText())));
-    }
-    static get assetsDirs() { return ["assets"]; }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "messageOverrides": ["onMessagesChange"],
-        "effectiveLocale": ["effectiveLocaleChange"]
-    }; }
-};
-Action.style = actionCss;
-
-export { Action as calcite_action };