@esri/solutions-components 0.8.2 → 0.8.3

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

@@ -0,0 +1,318 @@
+/*!
+ * 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 { u as slotChangeHasAssignedElement, x as setRequestedIcon, t as toAriaBoolean, g as getSlotted } from './dom-b91aa537.js';
+import { g as getIconScale } from './component-edd2c3cd.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-aea90723.js';
+import { N as NumberStringFormat, c as connectLocalized, d as disconnectLocalized } from './locale-857f39cf.js';
+import { o as onToggleOpenCloseComponent } from './openCloseComponent-b4b3788b.js';
+import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-b39c5433.js';
+import { K as KindIcons } from './resources-88a48c5c.js';
+import './guid-b75a5f7b.js';
+import './resources-0f8db821.js';
+import './key-9a10d862.js';
+import './observers-5ba39eee.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 DURATIONS = {
+    slow: 14000,
+    medium: 10000,
+    fast: 6000,
+};
+const SLOTS = {
+    actionsEnd: "actions-end",
+    title: "title",
+    message: "message",
+    link: "link",
+};
+const CSS = {
+    actionsEnd: "actions-end",
+    close: "close",
+    container: "container",
+    containerBottom: "container--bottom",
+    containerBottomEnd: "container--bottom-end",
+    containerBottomStart: "container--bottom-start",
+    containerQueued: "container--queued",
+    containerTop: "container--top",
+    containerTopEnd: "container--top-end",
+    containerTopStart: "container--top-start",
+    content: "content",
+    contentContainer: "content-container",
+    dismissProgress: "dismiss-progress",
+    footer: "footer",
+    icon: "icon",
+    containerSlottedInShell: "container--slotted-in-shell",
+    queueCount: "queue-count",
+    queueCountActive: "queue-count--active",
+    textContainer: "text-container",
+};
+
+const alertCss = ":host{--calcite-alert-edge-distance:2rem;--calcite-alert-dismiss-progress-background:var(--calcite-color-transparent-tint);display:block}.container{pointer-events:none;position:fixed;z-index:var(--calcite-z-index-toast);margin-inline:auto;margin-block:0px;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:-moz-min-content;min-inline-size:min-content;align-items:center;justify-content:center;background-color:var(--calcite-color-foreground-1);text-align:start;opacity:0;--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);border-radius:var(--calcite-border-radius);border-block-start:0 solid transparent;border-inline:1px solid var(--calcite-color-border-3);border-block-end:1px solid var(--calcite-color-border-3);inline-size:var(--calcite-alert-width);max-inline-size:calc(100% - var(--calcite-alert-edge-distance) * 2);transition:var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out}.container--bottom,.container--top{inset-inline-end:0;inset-inline-start:0}.container[class*=bottom]{transform:translate3d(0, var(--calcite-alert-edge-distance), 0);inset-block-end:var(--calcite-alert-edge-distance)}.container[class*=top]{transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), 0);inset-block-start:var(--calcite-alert-edge-distance)}.container[class*=start]{inset-inline-start:var(--calcite-alert-edge-distance);inset-inline-end:auto}.container[class*=end]{inset-inline-end:var(--calcite-alert-edge-distance);inset-inline-start:auto}.icon{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0px;margin-block:auto;margin-inline-end:auto;padding-inline-start:var(--calcite-alert-spacing-token-large)}.close{display:flex;cursor:pointer;align-items:center;justify-content:flex-end;align-self:stretch;border-style:none;background-color:transparent;color:var(--calcite-color-text-3);outline:2px solid transparent;outline-offset:2px;-webkit-appearance:none;padding:var(--calcite-alert-spacing-token-large);outline-color:transparent}.close: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          )}.close:hover,.close:focus{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}.close:active{background-color:var(--calcite-color-foreground-3)}.queue-count{visibility:hidden;display:flex;min-inline-size:-moz-min-content;min-inline-size:min-content;cursor:default;align-items:center;justify-content:space-around;align-self:stretch;overflow:hidden;background-color:var(--calcite-color-foreground-1);text-align:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);opacity:0;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-inline:0 solid transparent;border-start-end-radius:0}.queue-count--active{visibility:visible;opacity:1}.dismiss-progress{position:absolute;display:block;inline-size:100%;overflow:hidden;inset-inline:0;inset-block-start:-2px;block-size:2px;border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}.dismiss-progress:after{position:absolute;inset-block-start:0px;display:block;block-size:2px;content:\"\";background-color:var(--calcite-alert-dismiss-progress-background);inset-inline-end:0}.actions-end{display:flex;align-self:stretch}.text-container{box-sizing:border-box;display:flex;min-inline-size:0px;flex:1 1 auto;flex-direction:column;overflow-wrap:break-word;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:var(--calcite-alert-spacing-token-large) var(--calcite-alert-spacing-token-small)}.footer{position:relative;display:flex;inline-size:auto;justify-content:flex-end;align-self:stretch;padding-block-start:1px;block-size:inherit}:host([scale=s]){--calcite-alert-width:40em;--calcite-alert-spacing-token-small:0.5rem;--calcite-alert-spacing-token-large:0.75rem;--calcite-alert-footer-height:2rem;--calcite-alert-footer-divider-gap:0.125rem}:host([scale=s]) slot[name=title]::slotted(*),:host([scale=s]) *::slotted([slot=title]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=s]) slot[name=message]::slotted(*),:host([scale=s]) *::slotted([slot=message]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) slot[name=link]::slotted(*),:host([scale=s]) *::slotted([slot=link]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) .queue-count{margin-inline:0.5rem}:host([scale=s]) .container{--calcite-alert-min-height:3.5rem}:host([scale=m]){--calcite-alert-width:50em;--calcite-alert-spacing-token-small:0.75rem;--calcite-alert-spacing-token-large:1rem;--calcite-alert-footer-height:3rem;--calcite-alert-footer-divider-gap:0.25rem}:host([scale=m]) slot[name=title]::slotted(*),:host([scale=m]) *::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=m]) slot[name=message]::slotted(*),:host([scale=m]) *::slotted([slot=message]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) slot[name=link]::slotted(*),:host([scale=m]) *::slotted([slot=link]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) .queue-count{margin-inline:0.75rem}:host([scale=m]) .container{--calcite-alert-min-height:4.1875rem}:host([scale=l]){--calcite-alert-width:60em;--calcite-alert-spacing-token-small:1rem;--calcite-alert-spacing-token-large:1.25rem;--calcite-alert-footer-height:4rem;--calcite-alert-footer-divider-gap:0.5rem}:host([scale=l]) slot[name=title]::slotted(*),:host([scale=l]) *::slotted([slot=title]){margin-block-end:0.25rem;font-size:var(--calcite-font-size-1);line-height:1.375}:host([scale=l]) slot[name=message]::slotted(*),:host([scale=l]) *::slotted([slot=message]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) slot[name=link]::slotted(*),:host([scale=l]) *::slotted([slot=link]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) .queue-count{margin-inline:1rem}:host([scale=l]) .container{--calcite-alert-min-height:5.625rem}:host([open]) .container:not(.container--queued){border-block-start-width:2px;opacity:1;pointer-events:initial}:host([open]) .container:not(.container--queued)[class*=bottom]{transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), inherit)}:host([open]) .container:not(.container--queued)[class*=top]{transform:translate3d(0, var(--calcite-alert-edge-distance), inherit)}:host([auto-close])>.queue-count{border-inline-end:0 solid transparent}slot[name=title]::slotted(*),*::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}slot[name=message]::slotted(*),*::slotted([slot=message]){margin:0px;display:inline;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2);margin-inline-end:0.5rem}slot[name=link]::slotted(*),*::slotted([slot=link]){display:inline-flex;color:var(--calcite-color-text-link)}:host([kind=brand]) .container{border-block-start-color:var(--calcite-color-brand)}:host([kind=brand]) .container .icon{color:var(--calcite-color-brand)}:host([kind=info]) .container{border-block-start-color:var(--calcite-color-status-info)}:host([kind=info]) .container .icon{color:var(--calcite-color-status-info)}:host([kind=danger]) .container{border-block-start-color:var(--calcite-color-status-danger)}:host([kind=danger]) .container .icon{color:var(--calcite-color-status-danger)}:host([kind=success]) .container{border-block-start-color:var(--calcite-color-status-success)}:host([kind=success]) .container .icon{color:var(--calcite-color-status-success)}:host([kind=warning]) .container{border-block-start-color:var(--calcite-color-status-warning)}:host([kind=warning]) .container .icon{color:var(--calcite-color-status-warning)}:host([auto-close-duration=fast]) .dismiss-progress:after{animation:dismissProgress 6000ms ease-out}:host(:hover[auto-close-duration=fast]) .dismiss-progress:after{animation-play-state:paused}:host([auto-close-duration=medium]) .dismiss-progress:after{animation:dismissProgress 10000ms ease-out}:host(:hover[auto-close-duration=medium]) .dismiss-progress:after{animation-play-state:paused}:host([auto-close-duration=slow]) .dismiss-progress:after{animation:dismissProgress 14000ms ease-out}:host(:hover[auto-close-duration=slow]) .dismiss-progress:after{animation-play-state:paused}@keyframes dismissProgress{0%{inline-size:0px;opacity:0.75}100%{inline-size:100%;opacity:1}}.container--slotted-in-shell{position:absolute}:host([hidden]){display:none}[hidden]{display:none}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}";
+
+const Alert = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.calciteAlertBeforeClose = createEvent(this, "calciteAlertBeforeClose", 6);
+        this.calciteAlertClose = createEvent(this, "calciteAlertClose", 6);
+        this.calciteAlertBeforeOpen = createEvent(this, "calciteAlertBeforeOpen", 6);
+        this.calciteAlertOpen = createEvent(this, "calciteAlertOpen", 6);
+        this.calciteInternalAlertSync = createEvent(this, "calciteInternalAlertSync", 6);
+        this.calciteInternalAlertRegister = createEvent(this, "calciteInternalAlertRegister", 6);
+        this.autoCloseTimeoutId = null;
+        this.totalOpenTime = 0;
+        this.totalHoverTime = 0;
+        this.openTransitionProp = "opacity";
+        //--------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        //--------------------------------------------------------------------------
+        this.setTransitionEl = (el) => {
+            this.transitionEl = el;
+        };
+        /** close and emit calciteInternalAlertSync event with the updated queue payload */
+        this.closeAlert = () => {
+            this.autoCloseTimeoutId = null;
+            this.queued = false;
+            this.open = false;
+            this.queue = this.queue.filter((el) => el !== this.el);
+            this.determineActiveAlert();
+            this.calciteInternalAlertSync.emit({ queue: this.queue });
+        };
+        this.actionsEndSlotChangeHandler = (event) => {
+            this.hasEndActions = slotChangeHasAssignedElement(event);
+        };
+        this.handleMouseOver = () => {
+            window.clearTimeout(this.autoCloseTimeoutId);
+            this.totalOpenTime = Date.now() - this.initialOpenTime;
+            this.lastMouseOverBegin = Date.now();
+        };
+        this.handleMouseLeave = () => {
+            const hoverDuration = Date.now() - this.lastMouseOverBegin;
+            const timeRemaining = DURATIONS[this.autoCloseDuration] - this.totalOpenTime + this.totalHoverTime;
+            this.totalHoverTime = this.totalHoverTime ? hoverDuration + this.totalHoverTime : hoverDuration;
+            this.autoCloseTimeoutId = window.setTimeout(() => this.closeAlert(), timeRemaining);
+        };
+        this.open = false;
+        this.autoClose = false;
+        this.autoCloseDuration = "medium";
+        this.kind = "brand";
+        this.icon = undefined;
+        this.iconFlipRtl = false;
+        this.label = undefined;
+        this.numberingSystem = undefined;
+        this.placement = "bottom";
+        this.scale = "m";
+        this.messages = undefined;
+        this.messageOverrides = undefined;
+        this.slottedInShell = undefined;
+        this.defaultMessages = undefined;
+        this.effectiveLocale = "";
+        this.numberStringFormatter = new NumberStringFormat();
+        this.hasEndActions = false;
+        this.queue = [];
+        this.queueLength = 0;
+        this.queued = false;
+    }
+    openHandler() {
+        onToggleOpenCloseComponent(this);
+        if (this.open && !this.queued) {
+            this.calciteInternalAlertRegister.emit();
+        }
+        if (!this.open) {
+            this.queue = this.queue.filter((el) => el !== this.el);
+            this.calciteInternalAlertSync.emit({ queue: this.queue });
+        }
+    }
+    onMessagesChange() {
+        /* wired up by t9n util */
+    }
+    updateDuration() {
+        if (this.autoClose && this.autoCloseTimeoutId) {
+            window.clearTimeout(this.autoCloseTimeoutId);
+            this.autoCloseTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoCloseDuration]);
+        }
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    connectedCallback() {
+        connectLocalized(this);
+        connectMessages(this);
+        const open = this.open;
+        if (open && !this.queued) {
+            this.calciteInternalAlertRegister.emit();
+        }
+        this.numberStringFormatter.numberFormatOptions = {
+            locale: this.effectiveLocale,
+            numberingSystem: this.numberingSystem,
+            signDisplay: "always",
+        };
+    }
+    async componentWillLoad() {
+        setUpLoadableComponent(this);
+        await setUpMessages(this);
+        if (this.open) {
+            onToggleOpenCloseComponent(this);
+        }
+    }
+    componentDidLoad() {
+        setComponentLoaded(this);
+    }
+    disconnectedCallback() {
+        window.dispatchEvent(new CustomEvent("calciteInternalAlertUnregister", {
+            detail: { alert: this.el },
+        }));
+        window.clearTimeout(this.autoCloseTimeoutId);
+        window.clearTimeout(this.queueTimeout);
+        disconnectLocalized(this);
+        disconnectMessages(this);
+        this.slottedInShell = false;
+    }
+    render() {
+        const { open, autoClose, label, placement, queued } = this;
+        const role = autoClose ? "alert" : "alertdialog";
+        const hidden = !open;
+        const effectiveIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
+        const hasQueuedAlerts = this.queueLength > 1;
+        return (h(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role }, h("div", { class: {
+                [CSS.container]: true,
+                [CSS.containerQueued]: queued,
+                [`${CSS.container}--${placement}`]: true,
+                [CSS.containerSlottedInShell]: this.slottedInShell,
+            }, onPointerEnter: this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null, onPointerLeave: this.autoClose && this.autoCloseTimeoutId ? this.handleMouseLeave : null,
+            // 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.setTransitionEl }, effectiveIcon && this.renderIcon(effectiveIcon), h("div", { class: CSS.textContainer }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.message }), h("slot", { name: SLOTS.link })), this.renderActionsEnd(), hasQueuedAlerts ? this.renderQueueCount() : null, this.renderCloseButton(), open && !queued && autoClose ? h("div", { class: CSS.dismissProgress }) : null)));
+    }
+    renderCloseButton() {
+        return (h("button", { "aria-label": this.messages.close, class: CSS.close, key: "close", onClick: this.closeAlert, type: "button",
+            // 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.closeButton = el) }, h("calcite-icon", { icon: "x", scale: getIconScale(this.scale) })));
+    }
+    renderQueueCount() {
+        const queueNumber = this.queueLength > 2 ? this.queueLength - 1 : 1;
+        const queueText = this.numberStringFormatter.numberFormatter.format(queueNumber);
+        return (h("div", { class: {
+                [CSS.queueCount]: true,
+                [CSS.queueCountActive]: this.queueLength > 1,
+            }, key: "queue-count" }, h("calcite-chip", { scale: this.scale, value: queueText }, queueText)));
+    }
+    renderActionsEnd() {
+        return (h("div", { class: CSS.actionsEnd }, h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.actionsEndSlotChangeHandler })));
+    }
+    renderIcon(icon) {
+        return (h("div", { class: CSS.icon }, h("calcite-icon", { flipRtl: this.iconFlipRtl, icon: icon, scale: getIconScale(this.scale) })));
+    }
+    // when an alert is opened or closed, update queue and determine active alert
+    alertSync(event) {
+        if (this.queue !== event.detail.queue) {
+            this.queue = event.detail.queue;
+        }
+        this.queueLength = this.queue.length;
+        this.determineActiveAlert();
+        event.stopPropagation();
+    }
+    // when an alert is first registered, trigger a queue sync
+    alertRegister() {
+        if (this.open && !this.queue.includes(this.el)) {
+            this.queued = true;
+            this.queue.push(this.el);
+        }
+        this.calciteInternalAlertSync.emit({ queue: this.queue });
+        this.determineActiveAlert();
+    }
+    // Event is dispatched on the window because the element is not in the DOM so bubbling won't occur.
+    alertUnregister(event) {
+        const queue = this.queue.filter((el) => el !== event.detail.alert);
+        this.queue = queue;
+        window.dispatchEvent(new CustomEvent("calciteInternalAlertSync", {
+            detail: { queue },
+        }));
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    //--------------------------------------------------------------------------
+    /** Sets focus on the component's "close" button, the first focusable item. */
+    async setFocus() {
+        await componentFocusable(this);
+        const alertLinkEl = getSlotted(this.el, { selector: "calcite-link" });
+        if (!this.closeButton && !alertLinkEl) {
+            return;
+        }
+        else if (alertLinkEl) {
+            return alertLinkEl.setFocus();
+        }
+        else if (this.closeButton) {
+            this.closeButton.focus();
+        }
+    }
+    effectiveLocaleChange() {
+        updateMessages(this, this.effectiveLocale);
+        this.numberStringFormatter.numberFormatOptions = {
+            locale: this.effectiveLocale,
+            numberingSystem: this.numberingSystem,
+            signDisplay: "always",
+        };
+    }
+    numberingSystemChange() {
+        this.numberStringFormatter.numberFormatOptions = {
+            locale: this.effectiveLocale,
+            numberingSystem: this.numberingSystem,
+            signDisplay: "always",
+        };
+    }
+    /** determine which alert is active */
+    determineActiveAlert() {
+        var _a;
+        if (((_a = this.queue) === null || _a === void 0 ? void 0 : _a[0]) === this.el) {
+            this.openAlert();
+            if (this.autoClose && !this.autoCloseTimeoutId) {
+                this.initialOpenTime = Date.now();
+                this.autoCloseTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoCloseDuration]);
+            }
+        }
+        else {
+            return;
+        }
+    }
+    onBeforeOpen() {
+        this.calciteAlertBeforeOpen.emit();
+    }
+    onOpen() {
+        this.calciteAlertOpen.emit();
+    }
+    onBeforeClose() {
+        this.calciteAlertBeforeClose.emit();
+    }
+    onClose() {
+        this.calciteAlertClose.emit();
+    }
+    /** remove queued class after animation completes */
+    openAlert() {
+        window.clearTimeout(this.queueTimeout);
+        this.queueTimeout = window.setTimeout(() => (this.queued = false), 300);
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "open": ["openHandler"],
+        "messageOverrides": ["onMessagesChange"],
+        "autoCloseDuration": ["updateDuration"],
+        "effectiveLocale": ["effectiveLocaleChange"],
+        "numberingSystem": ["numberingSystemChange"]
+    }; }
+};
+Alert.style = alertCss;
+
+export { Alert as calcite_alert };

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

@@ -0,0 +1,146 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, h, g as getElement } from './index-bdfaac50.js';
+import { w as getModeName } from './dom-b91aa537.js';
+import { g as hexToRGB, i as isValidHex } from './utils-cfbe589a.js';
+import './guid-b75a5f7b.js';
+import './resources-0f8db821.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
+ */
+/**
+ * Convert a string to a valid hex by hashing its contents
+ * and using the hash as a seed for three distinct color values
+ *
+ * @param str
+ */
+function stringToHex(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    let hex = "#";
+    for (let j = 0; j < 3; j++) {
+        const value = (hash >> (j * 8)) & 0xff;
+        hex += ("00" + value.toString(16)).substr(-2);
+    }
+    return hex;
+}
+/**
+ * Find the hue of a color given the separate RGB color channels
+ *
+ * @param rgb
+ */
+function rgbToHue(rgb) {
+    let { r, g, b } = rgb;
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const delta = max - min;
+    if (max === min) {
+        return 0;
+    }
+    let hue = (max + min) / 2;
+    switch (max) {
+        case r:
+            hue = (g - b) / delta + (g < b ? 6 : 0);
+            break;
+        case g:
+            hue = (b - r) / delta + 2;
+            break;
+        case b:
+            hue = (r - g) / delta + 4;
+            break;
+    }
+    return Math.round(hue * 60);
+}
+/**
+ * For a hex color, find the hue
+ *
+ * @param hex {string} - form of "#------"
+ */
+function hexToHue(hex) {
+    return rgbToHue(hexToRGB(hex));
+}
+
+const avatarCss = ":host{display:inline-block;overflow:hidden;border-radius:50%}:host([scale=s]){block-size:1.5rem;inline-size:1.5rem;font-size:var(--calcite-font-size--3)}:host([scale=m]){block-size:2rem;inline-size:2rem;font-size:var(--calcite-font-size--2)}:host([scale=l]){block-size:2.75rem;inline-size:2.75rem;font-size:var(--calcite-font-size-0)}.icon{display:flex}.background{display:flex;block-size:100%;inline-size:100%;align-items:center;justify-content:center;border-radius:50%}.initials{font-weight:var(--calcite-font-weight-bold);text-transform:uppercase;color:var(--calcite-color-text-2)}.thumbnail{block-size:100%;inline-size:100%;border-radius:50%}:host([hidden]){display:none}[hidden]{display:none}";
+
+const Avatar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.scale = "m";
+        this.thumbnail = undefined;
+        this.fullName = undefined;
+        this.username = undefined;
+        this.userId = undefined;
+        this.label = undefined;
+        this.thumbnailFailedToLoad = false;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    render() {
+        return this.determineContent();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    determineContent() {
+        if (this.thumbnail && !this.thumbnailFailedToLoad) {
+            return (h("img", { alt: this.label || "", class: "thumbnail", onError: () => (this.thumbnailFailedToLoad = true), src: this.thumbnail }));
+        }
+        const initials = this.generateInitials();
+        const backgroundColor = this.generateFillColor();
+        return (h("span", { "aria-label": this.label || this.fullName, class: "background", role: "figure", style: { backgroundColor } }, initials ? (h("span", { "aria-hidden": "true", class: "initials" }, initials)) : (h("calcite-icon", { class: "icon", icon: "user", scale: this.scale }))));
+    }
+    /**
+     * Generate a valid background color that is consistent and unique to this user
+     */
+    generateFillColor() {
+        const { userId, username, fullName, el } = this;
+        const theme = getModeName(el);
+        const id = userId && `#${userId.substr(userId.length - 6)}`;
+        const name = username || fullName || "";
+        const hex = id && isValidHex(id) ? id : stringToHex(name);
+        // if there is not unique information, or an invalid hex is produced, return a default
+        if ((!userId && !name) || !isValidHex(hex)) {
+            return `var(--calcite-color-foreground-2)`;
+        }
+        const hue = hexToHue(hex);
+        const l = theme === "dark" ? 20 : 90;
+        return `hsl(${hue}, 60%, ${l}%)`;
+    }
+    /**
+     * Use fullName or username to generate initials
+     */
+    generateInitials() {
+        const { fullName, username } = this;
+        if (fullName) {
+            return fullName
+                .trim()
+                .split(" ")
+                .map((name) => name.substring(0, 1))
+                .join("");
+        }
+        else if (username) {
+            return username.substring(0, 2);
+        }
+        return false;
+    }
+    get el() { return getElement(this); }
+};
+Avatar.style = avatarCss;
+
+export { Avatar as calcite_avatar };

package/dist/solutions-components/calcite-block-section.entry.js

@@ -0,0 +1,162 @@
+/*!
+ * 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 { f as focusFirstTabbable, a as getElementDir, t as toAriaBoolean } from './dom-b91aa537.js';
+import { i as isActivationKey } from './key-9a10d862.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-857f39cf.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-b39c5433.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-aea90723.js';
+import './guid-b75a5f7b.js';
+import './resources-0f8db821.js';
+import './observers-5ba39eee.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 IDS = {
+    content: "content",
+    toggle: "toggle",
+};
+const CSS = {
+    content: "content",
+    focusGuard: "focus-guard",
+    invalid: "invalid",
+    sectionHeader: "section-header",
+    sectionHeaderText: "section-header__text",
+    statusIcon: "status-icon",
+    toggle: "toggle",
+    toggleSwitch: "toggle--switch",
+    toggleSwitchContainer: "toggle--switch-container",
+    toggleSwitchContent: "toggle--switch__content",
+    toggleSwitchText: "toggle--switch__text",
+    valid: "valid",
+};
+const ICONS = {
+    menuOpen: "chevron-down",
+    menuClosedLeft: "chevron-left",
+    menuClosedRight: "chevron-right",
+    valid: "check-circle",
+    invalid: "exclamation-mark-triangle",
+};
+
+const blockSectionCss = ":host{box-sizing:border-box;display:block;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--1);color:var(--calcite-color-text-2)}:host([open]){border-width:0px;border-block-end-width:1px;border-style:solid;border-block-end-color:var(--calcite-color-border-3)}:host(:last-child){border-block-end-width:0px}.toggle{inline-size:100%;border-width:0px;background-color:transparent;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2)}.toggle--switch,.section-header{margin-inline:0px;margin-block:0.25rem;display:flex;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;padding-inline:0px;padding-block:0.5rem;font-size:var(--calcite-font-size--1);outline-color:transparent}.toggle--switch:focus,.section-header: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          )}.toggle--switch:hover,.section-header:hover{color:var(--calcite-color-text-1)}.section-header .status-icon{align-self:flex-end}.section-header__text{margin-inline:0.75rem;margin-block:0px;flex:1 1 auto;text-align:initial;word-wrap:anywhere}.toggle--switch-container{position:relative;display:flex;inline-size:100%;align-items:center;background-color:transparent;word-break:break-word}.toggle--switch-container .focus-guard{--calcite-label-margin-bottom:0;pointer-events:none;position:absolute;inset-inline-end:0;margin-inline-start:0.25rem}.toggle--switch .status-icon{margin-inline-start:0.5rem}.toggle--switch__content{display:flex;flex:1 1 auto;align-items:center}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}:host([toggle-display=switch]) .toggle .toggle--switch__content{margin-inline-end:1.75rem}:host([hidden]){display:none}[hidden]{display:none}";
+
+const BlockSection = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.calciteBlockSectionToggle = createEvent(this, "calciteBlockSectionToggle", 6);
+        // --------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        // --------------------------------------------------------------------------
+        this.handleHeaderKeyDown = (event) => {
+            if (isActivationKey(event.key)) {
+                this.toggleSection();
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        this.toggleSection = () => {
+            this.open = !this.open;
+            this.calciteBlockSectionToggle.emit();
+        };
+        this.open = false;
+        this.status = undefined;
+        this.text = undefined;
+        this.toggleDisplay = "button";
+        this.messages = undefined;
+        this.messageOverrides = undefined;
+        this.effectiveLocale = undefined;
+        this.defaultMessages = undefined;
+    }
+    onMessagesChange() {
+        /* wired up by t9n util */
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Sets focus on the component's first tabbable element.
+     *
+     */
+    async setFocus() {
+        await componentFocusable(this);
+        focusFirstTabbable(this.el);
+    }
+    effectiveLocaleChange() {
+        updateMessages(this, this.effectiveLocale);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    // --------------------------------------------------------------------------
+    connectedCallback() {
+        connectLocalized(this);
+        connectMessages(this);
+    }
+    async componentWillLoad() {
+        await setUpMessages(this);
+        setUpLoadableComponent(this);
+    }
+    componentDidLoad() {
+        setComponentLoaded(this);
+    }
+    disconnectedCallback() {
+        disconnectLocalized(this);
+        disconnectMessages(this);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Render Methods
+    //
+    // --------------------------------------------------------------------------
+    renderStatusIcon() {
+        var _a;
+        const { status } = this;
+        const statusIcon = (_a = ICONS[status]) !== null && _a !== void 0 ? _a : false;
+        const statusIconClasses = {
+            [CSS.statusIcon]: true,
+            [CSS.valid]: status == "valid",
+            [CSS.invalid]: status == "invalid",
+        };
+        return !!statusIcon ? (h("calcite-icon", { class: statusIconClasses, icon: statusIcon, scale: "s" })) : null;
+    }
+    render() {
+        const { el, messages, open, text, toggleDisplay } = this;
+        const dir = getElementDir(el);
+        const arrowIcon = open
+            ? ICONS.menuOpen
+            : dir === "rtl"
+                ? ICONS.menuClosedLeft
+                : ICONS.menuClosedRight;
+        const toggleLabel = open ? messages.collapse : messages.expand;
+        const headerNode = toggleDisplay === "switch" ? (h("div", { class: {
+                [CSS.toggleSwitchContainer]: true,
+            } }, h("div", { "aria-controls": IDS.content, "aria-expanded": toAriaBoolean(open), class: {
+                [CSS.toggle]: true,
+                [CSS.toggleSwitch]: true,
+            }, id: IDS.toggle, onClick: this.toggleSection, onKeyDown: this.handleHeaderKeyDown, role: "button", tabIndex: 0, title: toggleLabel }, h("div", { class: CSS.toggleSwitchContent }, h("span", { class: CSS.toggleSwitchText }, text)), this.renderStatusIcon()), h("calcite-label", { class: CSS.focusGuard, layout: "inline", tabIndex: -1 }, h("calcite-switch", { checked: open, label: toggleLabel, scale: "s" })))) : (h("button", { "aria-controls": IDS.content, "aria-expanded": toAriaBoolean(open), class: {
+                [CSS.sectionHeader]: true,
+                [CSS.toggle]: true,
+            }, id: IDS.toggle, onClick: this.toggleSection }, h("calcite-icon", { icon: arrowIcon, scale: "s" }), h("span", { class: CSS.sectionHeaderText }, text), this.renderStatusIcon()));
+        return (h(Host, null, headerNode, h("section", { "aria-labelledby": IDS.toggle, class: CSS.content, hidden: !open, id: IDS.content }, h("slot", null))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "messageOverrides": ["onMessagesChange"],
+        "effectiveLocale": ["effectiveLocaleChange"]
+    }; }
+};
+BlockSection.style = blockSectionCss;
+
+export { BlockSection as calcite_block_section };