@esri/calcite-components 6.0.0-next.10 → 6.0.0-next.11

package/dist/components/calcite-action-pad/customElement.js

@@ -1,185 +0,0 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
-import { l as logger, c as customElement } from "../../chunks/runtime.js";
-import { css, html } from "lit";
-import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { useDirection } from "@arcgis/lumina/controllers";
-import { b as slotChangeGetAssignedElements, e as focusElementInGroup } from "../../chunks/dom.js";
-import { l as legacyToggleChildActionText, E as ExpandToggle } from "../../chunks/ExpandToggle.js";
-import { c as createObserver } from "../../chunks/observers.js";
-import { u as useT9n } from "../../chunks/useT9n.js";
-import { i as isTooltip } from "../../chunks/resources11.js";
-import { i as isAction } from "../../chunks/resources4.js";
-import { u as useFocusable } from "../../chunks/useFocusable.js";
-const CSS = {
-  actionGroupEnd: "action-group--end",
-  container: "container"
-};
-const SLOTS = {
-  expandTooltip: "expand-tooltip"
-};
-const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1));color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([scale=s]){--calcite-internal-action-pad-gap: var( --calcite-action-pad-items-space, var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs)) );--calcite-internal-action-pad-padding: var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs))}:host([scale=m]){--calcite-internal-action-pad-gap: var( --calcite-action-pad-items-space, var(--calcite-theme-space-sm, var(--calcite-spacing-sm)) );--calcite-internal-action-pad-padding: var(--calcite-theme-space-sm, var(--calcite-spacing-sm))}:host([scale=l]){--calcite-internal-action-pad-gap: var(--calcite-action-pad-items-space, var(--calcite-space-sm-plus));--calcite-internal-action-pad-padding: var(--calcite-theme-space-sm-plus, var(--calcite-spacing-sm-plus))}:host{display:block}@keyframes in{0%{opacity:0}to{opacity:1}}:host{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:var(--calcite-action-pad-corner-radius, .125rem);background:transparent}:host([expanded][layout=vertical]) .container{max-inline-size:var(--calcite-action-pad-expanded-max-width, auto)}:host([layout=vertical]) ::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:1px;padding-block-end:var(--calcite-internal-action-pad-padding)}.container{display:inline-flex;flex-direction:column;overflow:hidden;box-shadow:var(--calcite-shadow-md);border-radius:calc(var(--calcite-action-pad-corner-radius, .125rem) * 2);background-color:var(--calcite-action-background-color, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1)));gap:var(--calcite-internal-action-pad-gap);padding:var(--calcite-internal-action-pad-padding)}.action-group--bottom{flex-grow:1;justify-content:flex-end;padding-block-end:0px}:host([layout=horizontal]) .container{flex-direction:row}:host([layout=horizontal]) .container .action-group--bottom{padding:0}:host([layout=horizontal]) .container ::slotted(calcite-action-group:not(:last-of-type)){border-inline-end-width:1px;padding-inline-end:var(--calcite-internal-action-pad-padding)}:host([hidden]){display:none}[hidden]{display:none}`;
-class ActionPad extends LitElement {
-  constructor() {
-    super();
-    this.actions = [];
-    this.direction = useDirection();
-    this.mutationObserver = createObserver("mutation", () => this.mutationObserverHandler());
-    this.toggleExpand = () => {
-      this.expanded = !this.expanded;
-      this.calciteActionPadToggle.emit();
-    };
-    this.messages = useT9n({ blocking: true });
-    this.focusSetter = useFocusable()(this);
-    this.expandDisabled = false;
-    this.expanded = false;
-    this.layout = "vertical";
-    this.overlayPositioning = "absolute";
-    this.scale = "m";
-    this.selectionAppearance = "neutral";
-    this.calciteActionPadCollapse = createEvent({ cancelable: false });
-    this.calciteActionPadExpand = createEvent({ cancelable: false });
-    this.calciteActionPadToggle = createEvent({ cancelable: false });
-    this.listen("calciteActionMenuOpen", this.actionMenuOpenHandler);
-    this.listen("keydown", this.handleKeyDown);
-  }
-  static {
-    this.properties = { expandTooltip: [16, {}, { state: true }], actionsEndGroupLabel: 1, expandDisabled: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overlayPositioning: [3, {}, { reflect: true }], position: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selectionAppearance: [3, {}, { reflect: true }] };
-  }
-  static {
-    this.shadowRootOptions = { mode: "open", delegatesFocus: true };
-  }
-  static {
-    this.styles = styles;
-  }
-  async setFocus(options) {
-    return this.focusSetter(() => this.el, options);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.updateActions();
-    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
-  }
-  async load() {
-    logger.deprecated("component", {
-      component: this,
-      name: "action-pad",
-      removalVersion: 5,
-      suggested: "action-bar"
-    });
-  }
-  willUpdate(changes) {
-    if (changes.has("expanded") && this.hasUpdated) {
-      legacyToggleChildActionText({ el: this.el, expanded: this.expanded });
-    }
-    if (changes.has("layout") && (this.hasUpdated || this.layout !== "vertical")) {
-      this.updateGroups();
-    }
-    if (changes.has("expanded") && this.hasUpdated) {
-      if (this.expanded) {
-        this.calciteActionPadExpand.emit();
-      } else {
-        this.calciteActionPadCollapse.emit();
-      }
-    }
-    if (changes.has("selectionAppearance") && (this.hasUpdated || this.selectionAppearance !== "neutral")) {
-      this.updateActions();
-    }
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.mutationObserver?.disconnect();
-  }
-  actionMenuOpenHandler(event) {
-    if (event.target.menuOpen) {
-      const composedPath = event.composedPath();
-      this.actionGroups?.forEach((group) => {
-        if (!composedPath.includes(group)) {
-          group.menuOpen = false;
-        }
-      });
-    }
-  }
-  updateGroups() {
-    const groups = Array.from(this.el.querySelectorAll("calcite-action-group"));
-    this.actionGroups = groups;
-    this.setGroupLayout(groups);
-  }
-  setGroupLayout(groups) {
-    groups.forEach((group) => group.layout = this.layout);
-  }
-  handleDefaultSlotChange() {
-    this.updateGroups();
-    this.queryAndStoreActions();
-    this.updateActions();
-  }
-  handleTooltipSlotChange(event) {
-    const tooltips = slotChangeGetAssignedElements(event).filter(isTooltip);
-    this.expandTooltip = tooltips[0];
-  }
-  handleKeyDown(event) {
-    this.queryAndStoreActions();
-    const actions = this.actions.filter((action) => !action.disabled);
-    const current = document.activeElement;
-    if (!isAction(current) || !actions.includes(current)) {
-      return;
-    }
-    switch (event.key) {
-      case "ArrowRight":
-      case "ArrowDown":
-        focusElementInGroup(actions, current, "next", true);
-        event.preventDefault();
-        break;
-      case "ArrowLeft":
-      case "ArrowUp":
-        focusElementInGroup(actions, current, "previous", true);
-        event.preventDefault();
-        break;
-      case "Home":
-        focusElementInGroup(actions, current, "first", true);
-        event.preventDefault();
-        break;
-      case "End":
-        focusElementInGroup(actions, current, "last", true);
-        event.preventDefault();
-        break;
-      case "Tab":
-        this.updateTabIndexOfItems(current);
-        break;
-    }
-  }
-  updateActions() {
-    this.actions.forEach((action) => {
-      action.selectionAppearance = this.selectionAppearance;
-    });
-  }
-  updateTabIndexOfItems(active) {
-    this.actions.forEach((action) => {
-      const tabIndex = !action.disabled && action === active ? 0 : -1;
-      if (tabIndex === 0) {
-        action.removeAttribute("tabindex");
-      } else {
-        action.tabIndex = tabIndex;
-      }
-    });
-  }
-  queryAndStoreActions() {
-    this.actions = Array.from(this.el.querySelectorAll("calcite-action"));
-  }
-  mutationObserverHandler() {
-    this.updateGroups();
-    this.queryAndStoreActions();
-    this.updateActions();
-  }
-  renderBottomActionGroup() {
-    const { expanded, expandDisabled, messages, el, position, toggleExpand, scale, layout, actionsEndGroupLabel, overlayPositioning } = this;
-    const expandToggleNode = !expandDisabled ? ExpandToggle({ collapseLabel: messages.collapseLabel, collapseText: messages.collapse, direction: this.direction, el, expanded, expandLabel: messages.expandLabel, expandText: messages.expand, position, scale, toggle: toggleExpand, tooltip: this.expandTooltip }) : null;
-    return expandToggleNode ? html`<calcite-action-group class=${safeClassMap(CSS.actionGroupEnd)} .label=${actionsEndGroupLabel} .layout=${layout} .overlayPositioning=${overlayPositioning} .scale=${scale}><slot name=${SLOTS.expandTooltip} @slotchange=${this.handleTooltipSlotChange}></slot>${expandToggleNode}</calcite-action-group>` : null;
-  }
-  render() {
-    return html`<div class=${safeClassMap(CSS.container)}><slot @slotchange=${this.handleDefaultSlotChange}></slot>${this.renderBottomActionGroup()}</div>`;
-  }
-}
-customElement("calcite-action-pad", ActionPad);
-export {
-  ActionPad
-};

package/dist/components/calcite-action-pad/index.d.ts

@@ -1 +0,0 @@
-export * from "./customElement.js";

package/dist/components/calcite-action-pad/index.js

@@ -1,3 +0,0 @@
-import "../calcite-action/index.js";
-import "../calcite-action-group/index.js";
-export * from "./customElement.js";