@esri/solutions-components 0.6.10 → 0.6.12

package/dist/types/components.d.ts

@@ -5,9 +5,9 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { DistanceUnit, EDrawMode, EExpandType, ELayoutMode, IExportInfos, IInventoryItem, IMapChange, IMapInfo, ISearchConfiguration, ISelectionSet, ISketchGraphicsChange, ISolutionSpatialReferenceInfo, ISpatialRefRepresentation, IValueChange } from "./utils/interfaces";
+import { DistanceUnit, EDrawMode, ELayoutMode, IExportInfos, IInventoryItem, IMapChange, IMapInfo, ISearchConfiguration, ISelectionSet, ISketchGraphicsChange, ISolutionSpatialReferenceInfo, ISpatialRefRepresentation, IValueChange } from "./utils/interfaces";
 import { UserSession } from "@esri/solution-common";
-export { DistanceUnit, EDrawMode, EExpandType, ELayoutMode, IExportInfos, IInventoryItem, IMapChange, IMapInfo, ISearchConfiguration, ISelectionSet, ISketchGraphicsChange, ISolutionSpatialReferenceInfo, ISpatialRefRepresentation, IValueChange } from "./utils/interfaces";
+export { DistanceUnit, EDrawMode, ELayoutMode, IExportInfos, IInventoryItem, IMapChange, IMapInfo, ISearchConfiguration, ISelectionSet, ISketchGraphicsChange, ISolutionSpatialReferenceInfo, ISpatialRefRepresentation, IValueChange } from "./utils/interfaces";
 export { UserSession } from "@esri/solution-common";
 export namespace Components {
     interface BasemapGallery {
@@ -267,6 +267,16 @@ export namespace Components {
          */
         "updateGraphics": () => Promise<void>;
     }
+    interface MapFullscreen {
+        /**
+          * esri/widgets/Fullscreen: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Fullscreen.html
+         */
+        "fullscreenWidget": __esri.Fullscreen;
+        /**
+          * esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
+         */
+        "mapView": __esri.MapView;
+    }
     interface MapLayerPicker {
         /**
           * "transparent" | "solid": controls the button appearance when using the "dropdown" type
@@ -789,10 +799,6 @@ export interface MapSelectToolsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLMapSelectToolsElement;
 }
-export interface MapToolsCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLMapToolsElement;
-}
 export interface PublicNotificationCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPublicNotificationElement;
@@ -906,6 +912,12 @@ declare global {
         prototype: HTMLMapDrawToolsElement;
         new (): HTMLMapDrawToolsElement;
     };
+    interface HTMLMapFullscreenElement extends Components.MapFullscreen, HTMLStencilElement {
+    }
+    var HTMLMapFullscreenElement: {
+        prototype: HTMLMapFullscreenElement;
+        new (): HTMLMapFullscreenElement;
+    };
     interface HTMLMapLayerPickerElement extends Components.MapLayerPicker, HTMLStencilElement {
     }
     var HTMLMapLayerPickerElement: {
@@ -1053,6 +1065,7 @@ declare global {
         "list-item": HTMLListItemElement;
         "map-card": HTMLMapCardElement;
         "map-draw-tools": HTMLMapDrawToolsElement;
+        "map-fullscreen": HTMLMapFullscreenElement;
         "map-layer-picker": HTMLMapLayerPickerElement;
         "map-legend": HTMLMapLegendElement;
         "map-picker": HTMLMapPickerElement;
@@ -1347,6 +1360,16 @@ declare namespace LocalJSX {
          */
         "undoEnabled"?: boolean;
     }
+    interface MapFullscreen {
+        /**
+          * esri/widgets/Fullscreen: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Fullscreen.html
+         */
+        "fullscreenWidget"?: __esri.Fullscreen;
+        /**
+          * esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
+         */
+        "mapView"?: __esri.MapView;
+    }
     interface MapLayerPicker {
         /**
           * "transparent" | "solid": controls the button appearance when using the "dropdown" type
@@ -1522,10 +1545,6 @@ declare namespace LocalJSX {
           * esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
          */
         "mapView"?: __esri.MapView;
-        /**
-          * Emitted when the expand button is clicked
-         */
-        "onExpandMap"?: (event: MapToolsCustomEvent<EExpandType>) => void;
         /**
           * ISearchConfiguration: Configuration details for the Search widget
          */
@@ -1825,6 +1844,7 @@ declare namespace LocalJSX {
         "list-item": ListItem;
         "map-card": MapCard;
         "map-draw-tools": MapDrawTools;
+        "map-fullscreen": MapFullscreen;
         "map-layer-picker": MapLayerPicker;
         "map-legend": MapLegend;
         "map-picker": MapPicker;
@@ -1867,6 +1887,7 @@ declare module "@stencil/core" {
             "list-item": LocalJSX.ListItem & JSXBase.HTMLAttributes<HTMLListItemElement>;
             "map-card": LocalJSX.MapCard & JSXBase.HTMLAttributes<HTMLMapCardElement>;
             "map-draw-tools": LocalJSX.MapDrawTools & JSXBase.HTMLAttributes<HTMLMapDrawToolsElement>;
+            "map-fullscreen": LocalJSX.MapFullscreen & JSXBase.HTMLAttributes<HTMLMapFullscreenElement>;
             "map-layer-picker": LocalJSX.MapLayerPicker & JSXBase.HTMLAttributes<HTMLMapLayerPickerElement>;
             "map-legend": LocalJSX.MapLegend & JSXBase.HTMLAttributes<HTMLMapLegendElement>;
             "map-picker": LocalJSX.MapPicker & JSXBase.HTMLAttributes<HTMLMapPickerElement>;

package/dist/types/preact.d.ts

@@ -502,6 +502,8 @@ declare module "preact/src/jsx" {
         "ondrawRedo"?: (event: CustomEvent<any>) => void;
       }
 
+      "map-fullscreen": JSX.SolutionsMapFullscreen & JSXInternal.HTMLAttributes<HTMLSolutionsMapFullscreenElement>
+
       "map-layer-picker": Omit<JSX.SolutionsMapLayerPicker, "onLayerSelectionChange"> & JSXInternal.HTMLAttributes<HTMLSolutionsMapLayerPickerElement> & {
         "onlayerSelectionChange"?: (event: CustomEvent<any>) => void;
       }
@@ -518,9 +520,7 @@ declare module "preact/src/jsx" {
         "onselectionSetChange"?: (event: CustomEvent<any>) => void;
       }
 
-      "map-tools": Omit<JSX.SolutionsMapTools, "onExpandMap"> & JSXInternal.HTMLAttributes<HTMLSolutionsMapToolsElement> & {
-        "onexpandMap"?: (event: CustomEvent<any>) => void;
-      }
+      "map-tools": JSX.SolutionsMapTools & JSXInternal.HTMLAttributes<HTMLSolutionsMapToolsElement>
 
       "pci-calculator": JSX.SolutionsPciCalculator & JSXInternal.HTMLAttributes<HTMLSolutionsPciCalculatorElement>
 

package/dist/types/utils/interfaces.d.ts

@@ -50,10 +50,6 @@ export declare enum ESelectionType {
   POLY = "POLY",
   RECT = "RECT"
 }
-export declare enum EExpandType {
-  EXPAND = "EXPAND",
-  COLLAPSE = "COLLAPSE"
-}
 export declare enum EWorkflowType {
   SEARCH = "SEARCH",
   SELECT = "SELECT",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/solutions-components",
-  "version": "0.6.10",
+  "version": "0.6.12",
   "description": "Web Components for Esri's Solutions Applications",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

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

@@ -1,250 +0,0 @@
-/*!
- * Copyright 2022 Esri
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-0e50040c.js');
-const conditionalSlot = require('./conditionalSlot-126d557f.js');
-const dom = require('./dom-456f9f13.js');
-const loadable = require('./loadable-6925d840.js');
-const locale = require('./locale-79c3d30e.js');
-const observers = require('./observers-9912f013.js');
-const t9n = require('./t9n-62d807df.js');
-const ExpandToggle = require('./ExpandToggle-c5690e14.js');
-const debounce = require('./debounce-30afab47.js');
-require('./guid-d1123d5e.js');
-require('./resources-993f6faf.js');
-require('./key-8de93212.js');
-require('./resources-a2e2a544.js');
-require('./resources-10d29626.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.
- * v1.6.1
- */
-const CSS = {
-  actionGroupEnd: "action-group--end",
-};
-const SLOTS = {
-  actionsEnd: "actions-end",
-  bottomActions: "bottom-actions",
-  expandTooltip: "expand-tooltip",
-};
-
-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);
-    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 = this.hasActionsEnd || this.hasBottomActions || !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.matches("calcite-action-group"));
-      this.setGroupLayout(groups);
-    };
-    this.handleActionsEndSlotChange = (event) => {
-      this.hasActionsEnd = dom.slotChangeHasAssignedElement(event);
-    };
-    this.handleBottomActionsSlotChange = (event) => {
-      this.hasBottomActions = dom.slotChangeHasAssignedElement(event);
-    };
-    this.handleTooltipSlotChange = (event) => {
-      const tooltips = dom.slotChangeGetAssignedElements(event).filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-tooltip"));
-      this.expandTooltip = tooltips[0];
-    };
-    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.hasActionsEnd = false;
-    this.hasBottomActions = false;
-    this.expandTooltip = 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 expandToggleNode = !expandDisabled ? (index.h(ExpandToggle.ExpandToggle, { collapseText: messages.collapse, el: el, expandText: messages.expand, expanded: expanded, position: position, scale: scale, toggle: toggleExpand, tooltip: this.expandTooltip,
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: this.setExpandToggleRef })) : null;
-    return (index.h("calcite-action-group", { class: CSS.actionGroupEnd, hidden: this.expandDisabled && !(this.hasActionsEnd || this.hasBottomActions), layout: layout, scale: scale }, index.h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), index.h("slot", { name: SLOTS.bottomActions, onSlotchange: this.handleBottomActionsSlotChange }), index.h("slot", { name: SLOTS.expandTooltip, onSlotchange: this.handleTooltipSlotChange }), expandToggleNode));
-  }
-  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;

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

@@ -1,246 +0,0 @@
-/*!
- * Copyright 2022 Esri
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b5d9d795.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-55a14abd.js';
-import { s as slotChangeGetAssignedElements, r as slotChangeHasAssignedElement, f as focusFirstTabbable } from './dom-37f2dec9.js';
-import { a as setComponentLoaded, s as setUpLoadableComponent, c as componentFocusable } from './loadable-47170cb6.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-146251f7.js';
-import { c as createObserver } from './observers-95c50046.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-5f748619.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-3bfcb842.js';
-import { d as debounce } from './debounce-229b1a22.js';
-import './guid-70cda807.js';
-import './resources-1e6d76df.js';
-import './key-02fa06ae.js';
-import './resources-c676d5de.js';
-import './resources-b392187d.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.
- * v1.6.1
- */
-const CSS = {
-  actionGroupEnd: "action-group--end",
-};
-const SLOTS = {
-  actionsEnd: "actions-end",
-  bottomActions: "bottom-actions",
-  expandTooltip: "expand-tooltip",
-};
-
-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);
-    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 = this.hasActionsEnd || this.hasBottomActions || !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.matches("calcite-action-group"));
-      this.setGroupLayout(groups);
-    };
-    this.handleActionsEndSlotChange = (event) => {
-      this.hasActionsEnd = slotChangeHasAssignedElement(event);
-    };
-    this.handleBottomActionsSlotChange = (event) => {
-      this.hasBottomActions = slotChangeHasAssignedElement(event);
-    };
-    this.handleTooltipSlotChange = (event) => {
-      const tooltips = slotChangeGetAssignedElements(event).filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-tooltip"));
-      this.expandTooltip = tooltips[0];
-    };
-    this.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.hasActionsEnd = false;
-    this.hasBottomActions = false;
-    this.expandTooltip = 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 expandToggleNode = !expandDisabled ? (h(ExpandToggle, { collapseText: messages.collapse, el: el, expandText: messages.expand, expanded: expanded, position: position, scale: scale, toggle: toggleExpand, tooltip: this.expandTooltip,
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: this.setExpandToggleRef })) : null;
-    return (h("calcite-action-group", { class: CSS.actionGroupEnd, hidden: this.expandDisabled && !(this.hasActionsEnd || this.hasBottomActions), layout: layout, scale: scale }, h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), h("slot", { name: SLOTS.bottomActions, onSlotchange: this.handleBottomActionsSlotChange }), h("slot", { name: SLOTS.expandTooltip, onSlotchange: this.handleTooltipSlotChange }), expandToggleNode));
-  }
-  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 };