@esri/solutions-components 0.6.7 → 0.6.8

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

@@ -7,20 +7,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6654298b.js');
-const conditionalSlot = require('./conditionalSlot-a51326e7.js');
-const dom = require('./dom-d529bae8.js');
-const loadable = require('./loadable-6da743c6.js');
-const locale = require('./locale-477d8d51.js');
-const observers = require('./observers-20fe6f01.js');
-const t9n = require('./t9n-8be30efb.js');
-const ExpandToggle = require('./ExpandToggle-70890ae0.js');
-const debounce = require('./debounce-69c3bada.js');
-require('./guid-ca85ade0.js');
-require('./resources-b4b4b4fe.js');
-require('./key-b32a6438.js');
-require('./resources-1d2258a1.js');
-require('./resources-f13e2605.js');
+const index = require('./index-0e50040c.js');
+const conditionalSlot = require('./conditionalSlot-85b3a6b3.js');
+const dom = require('./dom-c1807fc1.js');
+const loadable = require('./loadable-bac9cdd6.js');
+const locale = require('./locale-c63a1b57.js');
+const observers = require('./observers-f5fa975b.js');
+const t9n = require('./t9n-1d032c30.js');
+const ExpandToggle = require('./ExpandToggle-e6a0d66e.js');
+const debounce = require('./debounce-30afab47.js');
+require('./guid-3abe3cc6.js');
+require('./resources-77713c2e.js');
+require('./key-b8b55ea3.js');
+require('./resources-2901b608.js');
+require('./resources-91409a5d.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
@@ -38,208 +38,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) {
-    index.registerInstance(this, hostRef);
-    this.calciteActionBarToggle = index.createEvent(this, "calciteActionBarToggle", 6);
-    // --------------------------------------------------------------------------
-    //
-    //  Private Properties
-    //
-    // --------------------------------------------------------------------------
-    this.mutationObserver = observers.createObserver("mutation", () => {
-      const { el, expanded } = this;
-      ExpandToggle.toggleChildActionText({ el, expanded });
-      this.overflowActions();
-    });
-    this.resizeObserver = observers.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.debounce(({ width, height }) => {
-      const { el, expanded, expandDisabled, layout, overflowActionsDisabled } = this;
-      if (overflowActionsDisabled ||
-        (layout === "vertical" && !height) ||
-        (layout === "horizontal" && !width)) {
-        return;
-      }
-      const actions = ExpandToggle.queryActions(el);
-      const actionCount = expandDisabled ? actions.length : actions.length + 1;
-      const actionGroups = Array.from(el.querySelectorAll("calcite-action-group"));
-      this.setGroupLayout(actionGroups);
-      const groupCount = dom.getSlotted(el, SLOTS.actionsEnd) || dom.getSlotted(el, SLOTS.bottomActions) || !expandDisabled
-        ? actionGroups.length + 1
-        : actionGroups.length;
-      const { actionHeight, actionWidth } = ExpandToggle.geActionDimensions(actions);
-      const overflowCount = ExpandToggle.getOverflowCount({
-        layout,
-        actionCount,
-        actionHeight,
-        actionWidth,
-        height,
-        width,
-        groupCount,
-      });
-      ExpandToggle.overflowActions({
-        actionGroups,
-        expanded,
-        overflowCount,
-      });
-    }, ExpandToggle.overflowActionsDebounceInMs);
-    this.toggleExpand = () => {
-      this.expanded = !this.expanded;
-      this.calciteActionBarToggle.emit();
-    };
-    this.setExpandToggleRef = (el) => {
-      this.expandToggleEl = el;
-    };
-    this.handleDefaultSlotChange = (event) => {
-      const groups = dom.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;
-    ExpandToggle.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() {
-    t9n.updateMessages(this, this.effectiveLocale);
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  // --------------------------------------------------------------------------
-  componentDidLoad() {
-    const { el, expanded } = this;
-    loadable.setComponentLoaded(this);
-    ExpandToggle.toggleChildActionText({ el, expanded });
-    this.overflowActions();
-  }
-  connectedCallback() {
-    var _a, _b;
-    const { el, expanded } = this;
-    locale.connectLocalized(this);
-    t9n.connectMessages(this);
-    ExpandToggle.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();
-    conditionalSlot.connectConditionalSlotComponent(this);
-  }
-  async componentWillLoad() {
-    loadable.setUpLoadableComponent(this);
-    await t9n.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();
-    conditionalSlot.disconnectConditionalSlotComponent(this);
-    locale.disconnectLocalized(this);
-    t9n.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 loadable.componentFocusable(this);
-    dom.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 = dom.getSlotted(el, SLOTS.expandTooltip);
-    const expandToggleNode = !expandDisabled ? (index.h(ExpandToggle.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 dom.getSlotted(el, SLOTS.actionsEnd) ||
-      dom.getSlotted(el, SLOTS.bottomActions) ||
-      expandToggleNode ? (index.h("calcite-action-group", { class: CSS.actionGroupEnd, layout: layout, scale: scale }, index.h("slot", { name: SLOTS.actionsEnd }), index.h("slot", { name: SLOTS.bottomActions }), index.h("slot", { name: SLOTS.expandTooltip }), expandToggleNode)) : null;
-  }
-  render() {
-    return (index.h(index.Host, { onCalciteActionMenuOpen: this.actionMenuOpenHandler }, index.h("slot", { onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup()));
-  }
-  static get assetsDirs() { return ["assets"]; }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "expandDisabled": ["expandHandler"],
-    "expanded": ["expandedHandler"],
-    "layout": ["layoutHandler"],
-    "overflowActionsDisabled": ["overflowDisabledHandler"],
-    "messageOverrides": ["onMessagesChange"],
-    "effectiveLocale": ["effectiveLocaleChange"]
-  }; }
-};
+const ActionBar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.calciteActionBarToggle = index.createEvent(this, "calciteActionBarToggle", 6);
+    // --------------------------------------------------------------------------
+    //
+    //  Private Properties
+    //
+    // --------------------------------------------------------------------------
+    this.mutationObserver = observers.createObserver("mutation", () => {
+      const { el, expanded } = this;
+      ExpandToggle.toggleChildActionText({ el, expanded });
+      this.overflowActions();
+    });
+    this.resizeObserver = observers.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.debounce(({ width, height }) => {
+      const { el, expanded, expandDisabled, layout, overflowActionsDisabled } = this;
+      if (overflowActionsDisabled ||
+        (layout === "vertical" && !height) ||
+        (layout === "horizontal" && !width)) {
+        return;
+      }
+      const actions = ExpandToggle.queryActions(el);
+      const actionCount = expandDisabled ? actions.length : actions.length + 1;
+      const actionGroups = Array.from(el.querySelectorAll("calcite-action-group"));
+      this.setGroupLayout(actionGroups);
+      const groupCount = dom.getSlotted(el, SLOTS.actionsEnd) || dom.getSlotted(el, SLOTS.bottomActions) || !expandDisabled
+        ? actionGroups.length + 1
+        : actionGroups.length;
+      const { actionHeight, actionWidth } = ExpandToggle.geActionDimensions(actions);
+      const overflowCount = ExpandToggle.getOverflowCount({
+        layout,
+        actionCount,
+        actionHeight,
+        actionWidth,
+        height,
+        width,
+        groupCount,
+      });
+      ExpandToggle.overflowActions({
+        actionGroups,
+        expanded,
+        overflowCount,
+      });
+    }, ExpandToggle.overflowActionsDebounceInMs);
+    this.toggleExpand = () => {
+      this.expanded = !this.expanded;
+      this.calciteActionBarToggle.emit();
+    };
+    this.setExpandToggleRef = (el) => {
+      this.expandToggleEl = el;
+    };
+    this.handleDefaultSlotChange = (event) => {
+      const groups = dom.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;
+    ExpandToggle.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() {
+    t9n.updateMessages(this, this.effectiveLocale);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  componentDidLoad() {
+    const { el, expanded } = this;
+    loadable.setComponentLoaded(this);
+    ExpandToggle.toggleChildActionText({ el, expanded });
+    this.overflowActions();
+  }
+  connectedCallback() {
+    var _a, _b;
+    const { el, expanded } = this;
+    locale.connectLocalized(this);
+    t9n.connectMessages(this);
+    ExpandToggle.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();
+    conditionalSlot.connectConditionalSlotComponent(this);
+  }
+  async componentWillLoad() {
+    loadable.setUpLoadableComponent(this);
+    await t9n.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();
+    conditionalSlot.disconnectConditionalSlotComponent(this);
+    locale.disconnectLocalized(this);
+    t9n.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 loadable.componentFocusable(this);
+    dom.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 = dom.getSlotted(el, SLOTS.expandTooltip);
+    const expandToggleNode = !expandDisabled ? (index.h(ExpandToggle.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 dom.getSlotted(el, SLOTS.actionsEnd) ||
+      dom.getSlotted(el, SLOTS.bottomActions) ||
+      expandToggleNode ? (index.h("calcite-action-group", { class: CSS.actionGroupEnd, layout: layout, scale: scale }, index.h("slot", { name: SLOTS.actionsEnd }), index.h("slot", { name: SLOTS.bottomActions }), index.h("slot", { name: SLOTS.expandTooltip }), expandToggleNode)) : null;
+  }
+  render() {
+    return (index.h(index.Host, { onCalciteActionMenuOpen: this.actionMenuOpenHandler }, index.h("slot", { onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup()));
+  }
+  static get assetsDirs() { return ["assets"]; }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "expandDisabled": ["expandHandler"],
+    "expanded": ["expandedHandler"],
+    "layout": ["layoutHandler"],
+    "overflowActionsDisabled": ["overflowDisabledHandler"],
+    "messageOverrides": ["onMessagesChange"],
+    "effectiveLocale": ["effectiveLocaleChange"]
+  }; }
+};
 ActionBar.style = actionBarCss;
 
 exports.calcite_action_bar = ActionBar;