@esri/solutions-components 0.6.7 → 0.6.8

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

@@ -3,11 +3,11 @@
  * 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-d298aca9.js';
-import { v as getModeName } from './dom-8a9e4ee8.js';
-import { g as hexToRGB, i as isValidHex } from './utils-649c76ab.js';
-import './guid-1608fd71.js';
-import './resources-f97db74e.js';
+import { r as registerInstance, h, g as getElement } from './index-b5d9d795.js';
+import { v as getModeName } from './dom-843e3afd.js';
+import { g as hexToRGB, i as isValidHex } from './utils-2c91c963.js';
+import './guid-2bbb8cd1.js';
+import './resources-94c47e64.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
@@ -73,74 +73,74 @@ function hexToHue(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-ui-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-ui-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); }
-};
+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-ui-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/esm/calcite-block-section.entry.js

@@ -3,15 +3,15 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-d298aca9.js';
-import { f as focusFirstTabbable, a as getElementDir, t as toAriaBoolean } from './dom-8a9e4ee8.js';
-import { g as guid } from './guid-1608fd71.js';
-import { i as isActivationKey } from './key-97b504af.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-73d0926a.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-745553e0.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-08376d90.js';
-import './resources-f97db74e.js';
-import './observers-67bdf9e5.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b5d9d795.js';
+import { f as focusFirstTabbable, a as getElementDir, t as toAriaBoolean } from './dom-843e3afd.js';
+import { g as guid } from './guid-2bbb8cd1.js';
+import { i as isActivationKey } from './key-7a525416.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-d8561d54.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-76168237.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-6bca96ad.js';
+import './resources-94c47e64.js';
+import './observers-9d66685a.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
@@ -40,119 +40,119 @@ const ICONS = {
 
 const blockSectionCss = ":host{box-sizing:border-box;display:block;background-color:var(--calcite-ui-foreground-1);font-size:var(--calcite-font-size--1);color:var(--calcite-ui-text-2)}:host([open]){border-width:0px;border-block-end-width:1px;border-style:solid;border-block-end-color:var(--calcite-ui-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-ui-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-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.toggle--switch:hover,.section-header:hover{color:var(--calcite-ui-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 calcite-switch{pointer-events:none;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-ui-success)}.status-icon.invalid{color:var(--calcite-ui-danger)}:host([hidden]){display:none}[hidden]{display:none}";
 
-const BlockSection = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.calciteBlockSectionToggle = createEvent(this, "calciteBlockSectionToggle", 6);
-    this.guid = guid();
-    // --------------------------------------------------------------------------
-    //
-    //  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 { guid } = this;
-    const regionId = `${guid}-region`;
-    const buttonId = `${guid}-button`;
-    const headerNode = toggleDisplay === "switch" ? (h("div", { "aria-controls": regionId, "aria-label": toggleLabel, class: {
-        [CSS.toggle]: true,
-        [CSS.toggleSwitch]: true,
-      }, id: buttonId, onClick: this.toggleSection, onKeyDown: this.handleHeaderKeyDown, tabIndex: 0, title: toggleLabel }, h("div", { class: CSS.toggleSwitchContent }, h("span", { class: CSS.toggleSwitchText }, text)), h("calcite-switch", { checked: open, label: toggleLabel, scale: "s", tabIndex: -1 }), this.renderStatusIcon())) : (h("button", { "aria-controls": regionId, "aria-label": toggleLabel, class: {
-        [CSS.sectionHeader]: true,
-        [CSS.toggle]: true,
-      }, id: buttonId, name: toggleLabel, 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-expanded": toAriaBoolean(open), "aria-labelledby": buttonId, class: CSS.content, hidden: !open, id: regionId }, h("slot", null))));
-  }
-  static get assetsDirs() { return ["assets"]; }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "messageOverrides": ["onMessagesChange"],
-    "effectiveLocale": ["effectiveLocaleChange"]
-  }; }
-};
+const BlockSection = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteBlockSectionToggle = createEvent(this, "calciteBlockSectionToggle", 6);
+    this.guid = guid();
+    // --------------------------------------------------------------------------
+    //
+    //  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 { guid } = this;
+    const regionId = `${guid}-region`;
+    const buttonId = `${guid}-button`;
+    const headerNode = toggleDisplay === "switch" ? (h("div", { "aria-controls": regionId, "aria-label": toggleLabel, class: {
+        [CSS.toggle]: true,
+        [CSS.toggleSwitch]: true,
+      }, id: buttonId, onClick: this.toggleSection, onKeyDown: this.handleHeaderKeyDown, tabIndex: 0, title: toggleLabel }, h("div", { class: CSS.toggleSwitchContent }, h("span", { class: CSS.toggleSwitchText }, text)), h("calcite-switch", { checked: open, label: toggleLabel, scale: "s", tabIndex: -1 }), this.renderStatusIcon())) : (h("button", { "aria-controls": regionId, "aria-label": toggleLabel, class: {
+        [CSS.sectionHeader]: true,
+        [CSS.toggle]: true,
+      }, id: buttonId, name: toggleLabel, 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-expanded": toAriaBoolean(open), "aria-labelledby": buttonId, class: CSS.content, hidden: !open, id: regionId }, 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 };