@esri/solutions-components 0.6.7 → 0.6.8

package/dist/esm/calcite-action-bar.entry.js

@@ -3,20 +3,20 @@
  * 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 { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-91396dd5.js';
-import { s as slotChangeGetAssignedElements, f as focusFirstTabbable, g as getSlotted } from './dom-8a9e4ee8.js';
-import { a as setComponentLoaded, s as setUpLoadableComponent, c as componentFocusable } from './loadable-08376d90.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-73d0926a.js';
-import { c as createObserver } from './observers-67bdf9e5.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-745553e0.js';
-import { t as toggleChildActionText, o as overflowActionsDebounceInMs, q as queryActions, g as geActionDimensions, a as overflowActions, E as ExpandToggle, b as getOverflowCount } from './ExpandToggle-3420fa39.js';
-import { d as debounce } from './debounce-4c884e5c.js';
-import './guid-1608fd71.js';
-import './resources-f97db74e.js';
-import './key-97b504af.js';
-import './resources-913009ae.js';
-import './resources-01034dfa.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b5d9d795.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-27a0fce0.js';
+import { s as slotChangeGetAssignedElements, f as focusFirstTabbable, g as getSlotted } from './dom-843e3afd.js';
+import { a as setComponentLoaded, s as setUpLoadableComponent, c as componentFocusable } from './loadable-6bca96ad.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-d8561d54.js';
+import { c as createObserver } from './observers-9d66685a.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-76168237.js';
+import { t as toggleChildActionText, o as overflowActionsDebounceInMs, q as queryActions, g as geActionDimensions, a as overflowActions, E as ExpandToggle, b as getOverflowCount } from './ExpandToggle-3d10bd1e.js';
+import { d as debounce } from './debounce-229b1a22.js';
+import './guid-2bbb8cd1.js';
+import './resources-94c47e64.js';
+import './key-7a525416.js';
+import './resources-58d30a0f.js';
+import './resources-d6a4d343.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
@@ -34,208 +34,208 @@ const SLOTS = {
 
 const actionBarCss = ":host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{pointer-events:auto;display:inline-flex;align-self:stretch;--calcite-action-bar-expanded-max-width:auto}:host([layout=vertical]){flex-direction:column}:host([layout=vertical]) .action-group--end{margin-block-start:auto}:host([layout=horizontal]){flex-direction:row}:host([layout=horizontal]) .action-group--end{margin-inline-start:auto}:host([layout=vertical][overflow-actions-disabled]){overflow-y:auto}:host([layout=horizontal][overflow-actions-disabled]){overflow-x:auto}:host([layout=vertical][expanded]){max-inline-size:var(--calcite-action-bar-expanded-max-width)}::slotted(calcite-action-group){border-block-end:1px solid var(--calcite-ui-border-3)}:host([layout=horizontal]) ::slotted(calcite-action-group){border-block-end:0;border-inline-end:1px solid var(--calcite-ui-border-3)}:host([layout=horizontal][expand-disabled]) ::slotted(calcite-action-group:last-of-type){border-inline-end:0}::slotted(calcite-action-group:last-child){border-block-end:0;border-inline-end:0}.action-group--end{justify-content:flex-end}:host([hidden]){display:none}[hidden]{display:none}";
 
-const ActionBar = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.calciteActionBarToggle = createEvent(this, "calciteActionBarToggle", 6);
-    // --------------------------------------------------------------------------
-    //
-    //  Private Properties
-    //
-    // --------------------------------------------------------------------------
-    this.mutationObserver = createObserver("mutation", () => {
-      const { el, expanded } = this;
-      toggleChildActionText({ el, expanded });
-      this.overflowActions();
-    });
-    this.resizeObserver = createObserver("resize", (entries) => this.resizeHandlerEntries(entries));
-    // --------------------------------------------------------------------------
-    //
-    //  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.resizeHandlerEntries = (entries) => {
-      entries.forEach(this.resizeHandler);
-    };
-    this.resizeHandler = (entry) => {
-      const { width, height } = entry.contentRect;
-      this.resize({ width, height });
-    };
-    this.resize = debounce(({ width, height }) => {
-      const { el, expanded, expandDisabled, layout, overflowActionsDisabled } = this;
-      if (overflowActionsDisabled ||
-        (layout === "vertical" && !height) ||
-        (layout === "horizontal" && !width)) {
-        return;
-      }
-      const actions = queryActions(el);
-      const actionCount = expandDisabled ? actions.length : actions.length + 1;
-      const actionGroups = Array.from(el.querySelectorAll("calcite-action-group"));
-      this.setGroupLayout(actionGroups);
-      const groupCount = getSlotted(el, SLOTS.actionsEnd) || getSlotted(el, SLOTS.bottomActions) || !expandDisabled
-        ? actionGroups.length + 1
-        : actionGroups.length;
-      const { actionHeight, actionWidth } = geActionDimensions(actions);
-      const overflowCount = getOverflowCount({
-        layout,
-        actionCount,
-        actionHeight,
-        actionWidth,
-        height,
-        width,
-        groupCount,
-      });
-      overflowActions({
-        actionGroups,
-        expanded,
-        overflowCount,
-      });
-    }, overflowActionsDebounceInMs);
-    this.toggleExpand = () => {
-      this.expanded = !this.expanded;
-      this.calciteActionBarToggle.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.expandDisabled = false;
-    this.expanded = false;
-    this.layout = "vertical";
-    this.overflowActionsDisabled = false;
-    this.position = undefined;
-    this.scale = undefined;
-    this.messages = undefined;
-    this.messageOverrides = undefined;
-    this.effectiveLocale = undefined;
-    this.defaultMessages = undefined;
-  }
-  expandHandler() {
-    this.overflowActions();
-  }
-  expandedHandler() {
-    const { el, expanded } = this;
-    toggleChildActionText({ el, expanded });
-    this.overflowActions();
-  }
-  layoutHandler() {
-    this.updateGroups();
-  }
-  overflowDisabledHandler(overflowActionsDisabled) {
-    overflowActionsDisabled
-      ? this.resizeObserver.disconnect()
-      : this.resizeObserver.observe(this.el);
-  }
-  onMessagesChange() {
-    /* wired up by t9n util */
-  }
-  effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  // --------------------------------------------------------------------------
-  componentDidLoad() {
-    const { el, expanded } = this;
-    setComponentLoaded(this);
-    toggleChildActionText({ el, expanded });
-    this.overflowActions();
-  }
-  connectedCallback() {
-    var _a, _b;
-    const { el, expanded } = this;
-    connectLocalized(this);
-    connectMessages(this);
-    toggleChildActionText({ el, expanded });
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(el, { childList: true, subtree: true });
-    if (!this.overflowActionsDisabled) {
-      (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(el);
-    }
-    this.overflowActions();
-    connectConditionalSlotComponent(this);
-  }
-  async componentWillLoad() {
-    setUpLoadableComponent(this);
-    await setUpMessages(this);
-  }
-  disconnectedCallback() {
-    var _a, _b;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-    disconnectConditionalSlotComponent(this);
-    disconnectLocalized(this);
-    disconnectMessages(this);
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Methods
-  //
-  // --------------------------------------------------------------------------
-  /**
-   * Overflows actions that won't fit into menus.
-   *
-   * @internal
-   */
-  async overflowActions() {
-    this.resize({ width: this.el.clientWidth, height: this.el.clientHeight });
-  }
-  /**
-   * Sets focus on the component's first focusable element.
-   */
-  async setFocus() {
-    await componentFocusable(this);
-    focusFirstTabbable(this.el);
-  }
-  updateGroups() {
-    this.setGroupLayout(Array.from(this.el.querySelectorAll("calcite-action-group")));
-  }
-  setGroupLayout(groups) {
-    groups.forEach((group) => (group.layout = this.layout));
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Render Methods
-  //
-  // --------------------------------------------------------------------------
-  renderBottomActionGroup() {
-    const { expanded, expandDisabled, el, position, toggleExpand, scale, layout, messages } = this;
-    const tooltip = getSlotted(el, SLOTS.expandTooltip);
-    const expandToggleNode = !expandDisabled ? (h(ExpandToggle, { collapseText: messages.collapse, el: el, expandText: messages.expand, expanded: expanded, position: position, scale: scale, toggle: toggleExpand, tooltip: tooltip,
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: this.setExpandToggleRef })) : null;
-    return getSlotted(el, SLOTS.actionsEnd) ||
-      getSlotted(el, SLOTS.bottomActions) ||
-      expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupEnd, layout: layout, scale: scale }, h("slot", { name: SLOTS.actionsEnd }), h("slot", { name: SLOTS.bottomActions }), h("slot", { name: SLOTS.expandTooltip }), expandToggleNode)) : null;
-  }
-  render() {
-    return (h(Host, { onCalciteActionMenuOpen: this.actionMenuOpenHandler }, h("slot", { onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup()));
-  }
-  static get assetsDirs() { return ["assets"]; }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "expandDisabled": ["expandHandler"],
-    "expanded": ["expandedHandler"],
-    "layout": ["layoutHandler"],
-    "overflowActionsDisabled": ["overflowDisabledHandler"],
-    "messageOverrides": ["onMessagesChange"],
-    "effectiveLocale": ["effectiveLocaleChange"]
-  }; }
-};
+const ActionBar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteActionBarToggle = createEvent(this, "calciteActionBarToggle", 6);
+    // --------------------------------------------------------------------------
+    //
+    //  Private Properties
+    //
+    // --------------------------------------------------------------------------
+    this.mutationObserver = createObserver("mutation", () => {
+      const { el, expanded } = this;
+      toggleChildActionText({ el, expanded });
+      this.overflowActions();
+    });
+    this.resizeObserver = createObserver("resize", (entries) => this.resizeHandlerEntries(entries));
+    // --------------------------------------------------------------------------
+    //
+    //  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.resizeHandlerEntries = (entries) => {
+      entries.forEach(this.resizeHandler);
+    };
+    this.resizeHandler = (entry) => {
+      const { width, height } = entry.contentRect;
+      this.resize({ width, height });
+    };
+    this.resize = debounce(({ width, height }) => {
+      const { el, expanded, expandDisabled, layout, overflowActionsDisabled } = this;
+      if (overflowActionsDisabled ||
+        (layout === "vertical" && !height) ||
+        (layout === "horizontal" && !width)) {
+        return;
+      }
+      const actions = queryActions(el);
+      const actionCount = expandDisabled ? actions.length : actions.length + 1;
+      const actionGroups = Array.from(el.querySelectorAll("calcite-action-group"));
+      this.setGroupLayout(actionGroups);
+      const groupCount = getSlotted(el, SLOTS.actionsEnd) || getSlotted(el, SLOTS.bottomActions) || !expandDisabled
+        ? actionGroups.length + 1
+        : actionGroups.length;
+      const { actionHeight, actionWidth } = geActionDimensions(actions);
+      const overflowCount = getOverflowCount({
+        layout,
+        actionCount,
+        actionHeight,
+        actionWidth,
+        height,
+        width,
+        groupCount,
+      });
+      overflowActions({
+        actionGroups,
+        expanded,
+        overflowCount,
+      });
+    }, overflowActionsDebounceInMs);
+    this.toggleExpand = () => {
+      this.expanded = !this.expanded;
+      this.calciteActionBarToggle.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.expandDisabled = false;
+    this.expanded = false;
+    this.layout = "vertical";
+    this.overflowActionsDisabled = false;
+    this.position = undefined;
+    this.scale = undefined;
+    this.messages = undefined;
+    this.messageOverrides = undefined;
+    this.effectiveLocale = undefined;
+    this.defaultMessages = undefined;
+  }
+  expandHandler() {
+    this.overflowActions();
+  }
+  expandedHandler() {
+    const { el, expanded } = this;
+    toggleChildActionText({ el, expanded });
+    this.overflowActions();
+  }
+  layoutHandler() {
+    this.updateGroups();
+  }
+  overflowDisabledHandler(overflowActionsDisabled) {
+    overflowActionsDisabled
+      ? this.resizeObserver.disconnect()
+      : this.resizeObserver.observe(this.el);
+  }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  componentDidLoad() {
+    const { el, expanded } = this;
+    setComponentLoaded(this);
+    toggleChildActionText({ el, expanded });
+    this.overflowActions();
+  }
+  connectedCallback() {
+    var _a, _b;
+    const { el, expanded } = this;
+    connectLocalized(this);
+    connectMessages(this);
+    toggleChildActionText({ el, expanded });
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(el, { childList: true, subtree: true });
+    if (!this.overflowActionsDisabled) {
+      (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(el);
+    }
+    this.overflowActions();
+    connectConditionalSlotComponent(this);
+  }
+  async componentWillLoad() {
+    setUpLoadableComponent(this);
+    await setUpMessages(this);
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+    disconnectConditionalSlotComponent(this);
+    disconnectLocalized(this);
+    disconnectMessages(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+  /**
+   * Overflows actions that won't fit into menus.
+   *
+   * @internal
+   */
+  async overflowActions() {
+    this.resize({ width: this.el.clientWidth, height: this.el.clientHeight });
+  }
+  /**
+   * Sets focus on the component's first focusable element.
+   */
+  async setFocus() {
+    await componentFocusable(this);
+    focusFirstTabbable(this.el);
+  }
+  updateGroups() {
+    this.setGroupLayout(Array.from(this.el.querySelectorAll("calcite-action-group")));
+  }
+  setGroupLayout(groups) {
+    groups.forEach((group) => (group.layout = this.layout));
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderBottomActionGroup() {
+    const { expanded, expandDisabled, el, position, toggleExpand, scale, layout, messages } = this;
+    const tooltip = getSlotted(el, SLOTS.expandTooltip);
+    const expandToggleNode = !expandDisabled ? (h(ExpandToggle, { collapseText: messages.collapse, el: el, expandText: messages.expand, expanded: expanded, position: position, scale: scale, toggle: toggleExpand, tooltip: tooltip,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.setExpandToggleRef })) : null;
+    return getSlotted(el, SLOTS.actionsEnd) ||
+      getSlotted(el, SLOTS.bottomActions) ||
+      expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupEnd, layout: layout, scale: scale }, h("slot", { name: SLOTS.actionsEnd }), h("slot", { name: SLOTS.bottomActions }), h("slot", { name: SLOTS.expandTooltip }), expandToggleNode)) : null;
+  }
+  render() {
+    return (h(Host, { onCalciteActionMenuOpen: this.actionMenuOpenHandler }, h("slot", { onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup()));
+  }
+  static get assetsDirs() { return ["assets"]; }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "expandDisabled": ["expandHandler"],
+    "expanded": ["expandedHandler"],
+    "layout": ["layoutHandler"],
+    "overflowActionsDisabled": ["overflowDisabledHandler"],
+    "messageOverrides": ["onMessagesChange"],
+    "effectiveLocale": ["effectiveLocaleChange"]
+  }; }
+};
 ActionBar.style = actionBarCss;
 
 export { ActionBar as calcite_action_bar };