@esri/calcite-components/dist/components/calcite-shell-panel/customElement.js

Web Components for Esri's Calcite Design System.

/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import { C as CSS_UTILITY, a as resizeShiftStep, b as resizeStep, c as customElement } from "../../chunks/runtime.js";
import { keyed } from "lit-html/directives/keyed.js";
import { ref } from "lit-html/directives/ref.js";
import { i as interact } from "../../chunks/interact.min.js";
import { html } from "lit";
import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
import { g as getElementDir, k as getStylePixelValue, s as slotChangeGetAssignedElements, a as slotChangeHasAssignedElement } from "../../chunks/dom.js";
import { c as clamp } from "../../chunks/math.js";
import { g as getDimensionClass } from "../../chunks/dynamicClasses.js";
import { u as useT9n } from "../../chunks/useT9n.js";
import { css } from "@lit/reactive-element/css-tag.js";
const CSS = {
  container: "container",
  actionBarContainer: "action-bar-container",
  contentContainer: "content-container",
  content: "content",
  contentHeader: "content__header",
  contentBody: "content__body",
  contentOverlay: "content--overlay",
  floatAll: "float-all",
  floatContent: "float--content",
  resizeHandle: "resize-handle",
  resizeHandleBar: "resize-handle-bar"
};
const SLOTS = {
  actionBar: "action-bar",
  header: "header"
};
const styles = css`:host{pointer-events:none;position:relative;display:flex;flex:0 1 auto;align-items:stretch;z-index:var(--calcite-shell-panel-z-index, var(--calcite-z-index));--calcite-shell-panel-max-height: unset;--calcite-internal-shell-panel-shadow-block-start: 0 4px 8px -1px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04);--calcite-internal-shell-panel-shadow-block-end: 0 -4px 8px -1px rgba(0, 0, 0, .08), 0 -2px 4px -1px rgba(0, 0, 0, .04);--calcite-internal-shell-panel-shadow-inline-start: 4px 0 8px -1px rgba(0, 0, 0, .08), 2px 0 4px -1px rgba(0, 0, 0, .04);--calcite-internal-shell-panel-shadow-inline-end: -4px 0 8px -1px rgba(0, 0, 0, .08), -2px 0 4px -1px rgba(0, 0, 0, .04)}.calcite--rtl.content--overlay{--calcite-internal-shell-panel-shadow-inline-start: -4px 0 8px -1px rgba(0, 0, 0, .08), -2px 0 4px -1px rgba(0, 0, 0, .04);--calcite-internal-shell-panel-shadow-inline-end: 4px 0 8px -1px rgba(0, 0, 0, .08), 2px 0 4px -1px rgba(0, 0, 0, .04)}:host([layout=vertical]){z-index:var(--calcite-shell-panel-z-index, calc(var(--calcite-z-index) + 1))}:host([layout=vertical][display-mode=overlay]){z-index:var(--calcite-shell-panel-z-index, calc(var(--calcite-z-index-header) + 1))}:host([layout=vertical][display-mode=float-all]) .content{flex:2}:host([layout=vertical]:not([display-mode=float-all])) .width-s{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 12vw);--calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 300px);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 150px)}:host([layout=vertical][display-mode=float-all]) .width-s{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 12vw);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 150px)}:host([layout=vertical]:not([display-mode=float-all])) .width-m{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 20vw);--calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 420px);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 240px)}:host([layout=vertical][display-mode=float-all]) .width-m{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 20vw);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 240px)}:host([layout=vertical]:not([display-mode=float-all])) .width-l{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 45vw);--calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 680px);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 340px)}:host([layout=vertical][display-mode=float-all]) .width-l{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 45vw);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 340px)}:host([layout=horizontal]) .height-s{--calcite-internal-shell-panel-max-height: var( --calcite-shell-panel-max-height, var(--calcite-shell-panel-detached-max-height, 20vh) )}:host([layout=horizontal]) .content{--calcite-internal-shell-panel-min-height: var(--calcite-shell-panel-min-height, 5vh);--calcite-internal-shell-panel-max-height: var(--calcite-shell-panel-max-height, 30vh)}:host([layout=horizontal]) .height-l{--calcite-internal-shell-panel-max-height: var( --calcite-shell-panel-max-height, var(--calcite-shell-panel-detached-max-height, 40vh) )}.container{pointer-events:none;box-sizing:border-box;display:flex;block-size:100%;flex:1 1 auto;align-items:stretch;background-color:transparent;font-size:var(--calcite-font-size--1);color:var(--calcite-shell-panel-text-color, var(--calcite-color-text-2))}.container *{box-sizing:border-box}.container.float-all{margin-block:var(--calcite-spacing-sm);margin-inline:var(--calcite-spacing-sm)}.float-all{max-block-size:var(--calcite-internal-shell-panel-max-height, calc(100% - 1rem) );box-shadow:var(--calcite-shell-panel-shadow, var(--calcite-shadow-sm));border-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round));overflow:hidden}:host([layout=vertical][position=start]) .float-all{border-inline-start:var(--calcite-border-width-sm) solid var(--calcite-shell-panel-border-color, var(--calcite-color-border-3))}:host([layout=vertical][position=end]) .float-all{border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-shell-border-color, var(--calcite-shell-panel-border-color, var(--calcite-color-border-3)))}:host([layout=horizontal]) .float-all{border-inline:var(--calcite-border-width-sm) solid var(--calcite-shell-border-color, var(--calcite-shell-panel-border-color, var(--calcite-color-border-3)))}:host([layout=horizontal]) .container{block-size:auto;inline-size:100%;flex-direction:column}.resize-handle{position:absolute;box-sizing:border-box;display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;outline:2px solid transparent;outline-offset:2px;--calcite-internal-shell-panel-resize-handle-offset: calc( (var(--calcite-size-fixed-xxl) - var(--calcite-size-fixed-sm-plus)) / 2 * -1 );z-index:var(--calcite-z-index-header)}.resize-handle:active .resize-handle-bar,.resize-handle:hover .resize-handle-bar{color:var(--calcite-shell-panel-resize-icon-color, var(--calcite-color-text-1));background-color:var(--calcite-shell-panel-resize-background-color, var(--calcite-color-foreground-3))}.resize-handle-bar{pointer-events:none;display:flex;align-items:center;justify-content:center;color:var(--calcite-shell-panel-resize-icon-color, var(--calcite-color-border-input));background-color:var(--calcite-shell-panel-resize-background-color, var(--calcite-color-background))}.resize-handle:focus .resize-handle-bar{outline-color:transparent;outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)))}:host([position=start][layout=vertical]) .resize-handle{inline-size:var(--calcite-size-fixed-xxl);inset-inline-end:var(--calcite-internal-shell-panel-resize-handle-offset);block-size:100%}:host([position=start][layout=vertical]) .resize-handle-bar{block-size:100%;inline-size:var(--calcite-size-fixed-sm-plus);border-inline-start:var(--calcite-border-width-sm) solid var(--calcite-shell-border-color, var(--calcite-color-border-3))}:host([position=start][layout=vertical]):host([display-mode^=float]) .resize-handle-bar{border-start-end-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round));border-end-end-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round))}:host([position=end][layout=vertical]) .resize-handle{inline-size:var(--calcite-size-fixed-xxl);inset-inline-start:var(--calcite-internal-shell-panel-resize-handle-offset);block-size:100%}:host([position=end][layout=vertical]) .resize-handle-bar{block-size:100%;inline-size:var(--calcite-size-fixed-sm-plus);border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-shell-border-color, var(--calcite-color-border-3))}:host([position=end][layout=vertical]):host([display-mode^=float]) .resize-handle-bar{border-start-start-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round));border-end-start-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round))}:host([position=start][layout=horizontal]) .resize-handle{block-size:var(--calcite-size-fixed-xxl);inline-size:100%;inset-block-end:var(--calcite-internal-shell-panel-resize-handle-offset)}:host([position=start][layout=horizontal]) .resize-handle-bar{inline-size:100%;block-size:var(--calcite-size-fixed-sm-plus);border-block-start:var(--calcite-border-width-sm) solid var(--calcite-shell-border-color, var(--calcite-color-border-3))}:host([position=start][layout=horizontal]):host([display-mode^=float]) .resize-handle-bar{border-end-end-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round));border-end-start-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round))}:host([position=end][layout=horizontal]) .resize-handle{block-size:var(--calcite-size-fixed-xxl);inline-size:100%;inset-block-start:var(--calcite-internal-shell-panel-resize-handle-offset)}:host([position=end][layout=horizontal]) .resize-handle-bar{inline-size:100%;block-size:var(--calcite-size-fixed-sm-plus);border-block-end:var(--calcite-border-width-sm) solid var(--calcite-shell-border-color, var(--calcite-color-border-3))}:host([position=end][layout=horizontal]):host([display-mode^=float]) .resize-handle-bar{border-start-start-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round));border-start-end-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round))}::slotted(calcite-panel),::slotted(calcite-flow){block-size:100%;inline-size:100%;flex:1 1 auto;max-block-size:unset;max-inline-size:unset}::slotted(.calcite-match-height){display:flex;flex:1 1 auto;overflow:hidden}.action-bar-container{pointer-events:auto;box-sizing:border-box;display:flex;flex:1 1 auto}.content-container{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;align-items:stretch;align-self:stretch}:host([layout=horizontal]) .action-bar-container,:host([layout=horizontal]) .content-container{flex-direction:column}.content{pointer-events:auto;position:relative;box-sizing:border-box;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;align-self:stretch;padding:0;background-color:var(--calcite-shell-panel-background-color, var(--calcite-color-background));transition:max-block-size var(--calcite-animation-timing),max-inline-size var(--calcite-animation-timing)}:host([layout=vertical]:not([display-mode=float-all])) .content{inline-size:var(--calcite-internal-shell-panel-width);max-inline-size:var(--calcite-internal-shell-panel-max-width);min-inline-size:var(--calcite-internal-shell-panel-min-width)}:host([layout=vertical][display-mode=float-all]) .content{inline-size:var(--calcite-internal-shell-panel-width);min-inline-size:var(--calcite-internal-shell-panel-min-width)}:host([layout=horizontal]) .content{block-size:var(--calcite-internal-shell-panel-height);max-block-size:var(--calcite-internal-shell-panel-max-height);min-block-size:var(--calcite-internal-shell-panel-min-height)}:host([resizable][layout=vertical][position=start]) .content{padding-inline-end:var(--calcite-size-fixed-sm-plus)}:host([resizable][layout=vertical][position=end]) .content{padding-inline-start:var(--calcite-size-fixed-sm-plus)}:host([resizable][layout=horizontal][position=start]) .content{padding-block-end:var(--calcite-size-fixed-sm-plus)}:host([resizable][layout=horizontal][position=end]) .content{padding-block-start:var(--calcite-size-fixed-sm-plus)}.content__header{display:flex;flex:0 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch}.content__body{display:flex;flex:1 1 auto;flex-direction:column;overflow:hidden}.content--overlay{position:absolute;--tw-shadow: 0 4px 8px -1px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04);--tw-shadow-colored: 0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--calcite-shell-panel-shadow, var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow))}:host([layout=vertical]) .content--overlay{inset-block-start:0px;block-size:100%}:host([layout=horizontal]) .content--overlay{inset-inline-start:0px;inline-size:100%}:host([layout=vertical][position=start]) .content--overlay{inset-inline-start:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-inline-start)}:host([layout=vertical][position=end]) .content--overlay{inset-inline-end:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-inline-end)}:host([layout=horizontal][position=start]) .content--overlay{inset-block-start:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-block-start)}:host([layout=horizontal][position=end]) .content--overlay{inset-block-end:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-block-end)}.float--content{margin-block-end:auto;block-size:auto;overflow:hidden;--tw-shadow: 0 4px 8px -1px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04);--tw-shadow-colored: 0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--calcite-shell-panel-shadow, var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow));border-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round));margin-inline:var(--calcite-spacing-sm);margin-block-start:var(--calcite-spacing-sm);max-block-size:var(--calcite-internal-shell-panel-max-height, calc(100% - 1rem) )}.float--content ::slotted(calcite-panel),.float--content ::slotted(calcite-flow){max-block-size:unset}:host([layout=horizontal]) .float--content{margin-block:var(--calcite-spacing-sm)}:host([position=start]) .float--content ::slotted(calcite-panel),:host([position=start]) .float--content ::slotted(calcite-flow),:host([position=end]) .float--content ::slotted(calcite-panel),:host([position=end]) .float--content ::slotted(calcite-flow){border-style:none}.content[hidden]{display:none}slot[name=action-bar]::slotted(calcite-action-bar),.content ::slotted(calcite-flow),.content ::slotted(calcite-panel:not([closed])){border:var(--calcite-border-width-sm) solid var(--calcite-shell-border-color, var(--calcite-color-border-3))}:host([position=start]:not([slot=panel-end])) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=start]:not([slot=panel-end])) .content ::slotted(calcite-flow),:host([position=start]:not([slot=panel-end])) .content ::slotted(calcite-panel),:host([position=end][slot=panel-start]) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=end][slot=panel-start]) .content ::slotted(calcite-flow),:host([position=end][slot=panel-start]) .content ::slotted(calcite-panel){border-inline-start:none}:host([resizable][layout=vertical]) .content ::slotted(calcite-flow),:host([resizable][layout=vertical]) .content ::slotted(calcite-panel){border-inline-start:none;border-inline-end:none}:host([resizable][layout=horizontal]) .content ::slotted(calcite-flow),:host([resizable][layout=horizontal]) .content ::slotted(calcite-panel){border-block-start:none;border-block-end:none}:host([position=end]:not([slot=panel-start])) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=end]:not([slot=panel-start])) .content ::slotted(calcite-flow),:host([position=end]:not([slot=panel-start])) .content ::slotted(calcite-panel),:host([position=start][slot=panel-end]) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=start][slot=panel-end]) .content ::slotted(calcite-flow),:host([position=start][slot=panel-end]) .content ::slotted(calcite-panel){border-inline-end:none}:host([layout=horizontal]) slot[name=action-bar]::slotted(calcite-action-bar){border-inline:0}:host([layout=horizontal][position=start]) .content ::slotted(calcite-flow),:host([layout=horizontal][position=start]) .content ::slotted(calcite-panel){border-inline:0;border-block-start:0}:host([layout=horizontal][position=end]) .content ::slotted(calcite-flow),:host([layout=horizontal][position=end]) .content ::slotted(calcite-panel){border-inline:0;border-block-end:0}:host([hidden]){display:none}[hidden]{display:none}`;
class ShellPanel extends LitElement {
  constructor() {
    super(...arguments);
    this.actionBars = [];
    this.messages = useT9n();
    this.resizeValues = {
      inlineSize: null,
      blockSize: null,
      minInlineSize: null,
      minBlockSize: null,
      maxInlineSize: null,
      maxBlockSize: null
    };
    this.hasHeader = false;
    this.collapsed = false;
    this.displayMode = "dock";
    this.layout = "vertical";
    this.position = "start";
    this.resizable = false;
    this.widthScale = "m";
    this.calciteInternalShellPanelResizeEnd = createEvent({ cancelable: false });
    this.calciteInternalShellPanelResizeStart = createEvent({ cancelable: false });
  }
  static {
    this.properties = { resizeValues: [16, {}, { state: true }], hasHeader: [16, {}, { state: true }], collapsed: [7, {}, { reflect: true, type: Boolean }], displayMode: [3, {}, { reflect: true }], heightScale: [3, {}, { reflect: true }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], position: [3, {}, { reflect: true }], resizable: [7, {}, { reflect: true, type: Boolean }], height: [3, {}, { reflect: true }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
  }
  static {
    this.styles = styles;
  }
  willUpdate(changes) {
    if (changes.has("layout") && (this.hasUpdated || this.layout !== "vertical")) {
      this.setActionBarsLayout(this.actionBars);
    }
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    this.cleanupInteractions();
  }
  getContentElDOMRect() {
    return this.contentEl.getBoundingClientRect();
  }
  handleKeyDown(event) {
    const { key, defaultPrevented, shiftKey } = event;
    const { position, layout, resizable, contentEl, el, resizeValues: { maxBlockSize, maxInlineSize, minBlockSize, minInlineSize } } = this;
    const arrowKeys = layout === "horizontal" ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"];
    const keys = [...arrowKeys, "Home", "End"];
    if (!resizable || !contentEl || defaultPrevented || !keys.includes(key)) {
      return;
    }
    const rect = this.getContentElDOMRect();
    const invertRTL = getElementDir(el) === "rtl" ? -1 : 1;
    const stepValue = shiftKey ? resizeShiftStep : resizeStep;
    switch (key) {
      case "ArrowUp":
        this.updateSize({
          size: rect.height + (layout === "horizontal" && position === "end" ? stepValue : -stepValue),
          type: "blockSize"
        });
        event.preventDefault();
        break;
      case "ArrowDown":
        this.updateSize({
          size: rect.height + (layout === "horizontal" && position === "end" ? -stepValue : stepValue),
          type: "blockSize"
        });
        event.preventDefault();
        break;
      case "ArrowLeft":
        this.updateSize({
          size: rect.width + (layout === "vertical" && position === "end" ? stepValue : -stepValue) * invertRTL,
          type: "inlineSize"
        });
        event.preventDefault();
        break;
      case "ArrowRight":
        this.updateSize({
          size: rect.width + (layout === "vertical" && position === "end" ? -stepValue : stepValue) * invertRTL,
          type: "inlineSize"
        });
        event.preventDefault();
        break;
      case "Home":
        this.updateSize({
          size: layout === "horizontal" ? minBlockSize : minInlineSize,
          type: layout === "horizontal" ? "blockSize" : "inlineSize"
        });
        event.preventDefault();
        break;
      case "End":
        this.updateSize({
          size: layout === "horizontal" ? maxBlockSize : maxInlineSize,
          type: layout === "horizontal" ? "blockSize" : "inlineSize"
        });
        event.preventDefault();
        break;
    }
  }
  updateSize({ type, size }) {
    const { contentEl, resizeValues } = this;
    if (!contentEl) {
      return;
    }
    const resizeMin = type === "blockSize" ? "minBlockSize" : "minInlineSize";
    const resizeMax = type === "blockSize" ? "maxBlockSize" : "maxInlineSize";
    const clamped = resizeValues[resizeMin] && resizeValues[resizeMax] ? clamp(size, resizeValues[resizeMin], resizeValues[resizeMax]) : size;
    const rounded = Math.round(clamped);
    this.resizeValues = {
      ...resizeValues,
      [type]: rounded
    };
    contentEl.style[type] = size !== null ? `${rounded}px` : null;
  }
  cleanupInteractions() {
    this.interaction?.unset();
    this.updateSize({ size: null, type: "inlineSize" });
    this.updateSize({ size: null, type: "blockSize" });
  }
  async setupInteractions() {
    this.cleanupInteractions();
    const { el, contentEl, resizable, position, collapsed, resizeHandleEl, layout } = this;
    if (!contentEl || collapsed || !resizable || !resizeHandleEl) {
      return;
    }
    await this.el.componentOnReady();
    const { inlineSize, minInlineSize, blockSize, minBlockSize, maxInlineSize, maxBlockSize } = window.getComputedStyle(contentEl);
    const values = {
      inlineSize: getStylePixelValue(inlineSize),
      blockSize: getStylePixelValue(blockSize),
      minInlineSize: getStylePixelValue(minInlineSize),
      minBlockSize: getStylePixelValue(minBlockSize),
      maxInlineSize: getStylePixelValue(maxInlineSize) || window.innerWidth,
      maxBlockSize: getStylePixelValue(maxBlockSize) || window.innerHeight
    };
    this.resizeValues = values;
    const rtl = getElementDir(el) === "rtl";
    this.interaction = interact(contentEl, { context: el.ownerDocument }).resizable({
      edges: {
        top: position === "end" && layout === "horizontal" ? resizeHandleEl : false,
        right: position === (rtl ? "end" : "start") && layout === "vertical" ? resizeHandleEl : false,
        bottom: position === "start" && layout === "horizontal" ? resizeHandleEl : false,
        left: position === (rtl ? "start" : "end") && layout === "vertical" ? resizeHandleEl : false
      },
      modifiers: [
        interact.modifiers.restrictSize({
          min: {
            width: values.minInlineSize,
            height: values.minBlockSize
          },
          max: {
            width: values.maxInlineSize,
            height: values.maxBlockSize
          }
        })
      ],
      listeners: {
        resizestart: () => {
          this.calciteInternalShellPanelResizeStart.emit();
        },
        resizeend: () => {
          this.calciteInternalShellPanelResizeEnd.emit();
        },
        move: ({ rect }) => {
          const isBlock = layout === "horizontal";
          this.updateSize({
            size: isBlock ? rect.height : rect.width,
            type: isBlock ? "blockSize" : "inlineSize"
          });
        }
      }
    });
  }
  storeContentEl(contentEl) {
    this.contentEl = contentEl;
  }
  setResizeHandleEl(el) {
    this.resizeHandleEl = el;
    this.setupInteractions();
  }
  setActionBarsLayout(actionBars) {
    actionBars.forEach((actionBar) => actionBar.layout = this.layout);
  }
  handleActionBarSlotChange(event) {
    const actionBars = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-action-bar"));
    this.actionBars = actionBars;
    this.setActionBarsLayout(actionBars);
  }
  handleHeaderSlotChange(event) {
    this.hasHeader = slotChangeHasAssignedElement(event);
  }
  getResizeIcon() {
    const { layout } = this;
    return layout === "horizontal" ? "drag-resize-vertical" : "drag-resize-horizontal";
  }
  renderHeader() {
    return keyed("header", html`<div class=${safeClassMap(CSS.contentHeader)} .hidden=${!this.hasHeader}><slot name=${SLOTS.header} @slotchange=${this.handleHeaderSlotChange}></slot></div>`);
  }
  render() {
    const { collapsed, position, resizable, layout, displayMode, resizeValues } = this;
    const dir = getElementDir(this.el);
    const separatorNode = !collapsed && resizable ? keyed("resize-handle", html`<div .ariaLabel=${this.messages.resize} .ariaOrientation=${layout === "horizontal" ? "vertical" : "horizontal"} .ariaValueMax=${layout == "horizontal" ? resizeValues.maxBlockSize : resizeValues.maxInlineSize} .ariaValueMin=${layout == "horizontal" ? resizeValues.minBlockSize : resizeValues.minInlineSize} .ariaValueNow=${layout == "horizontal" ? resizeValues.blockSize : resizeValues.inlineSize} class=${safeClassMap(CSS.resizeHandle)} @keydown=${this.handleKeyDown} role=separator tabindex=0 touch-action=none ${ref(this.setResizeHandleEl)}><div class=${safeClassMap(CSS.resizeHandleBar)}><calcite-icon .icon=${this.getResizeIcon()} scale=s></calcite-icon></div></div>`) : null;
    const getAnimationDir = () => {
      if (layout === "horizontal") {
        return position === "start" ? CSS_UTILITY.calciteAnimateInDown : CSS_UTILITY.calciteAnimateInUp;
      } else {
        const isStart = dir === "ltr" && position === "end" || dir === "rtl" && position === "start";
        return isStart ? CSS_UTILITY.calciteAnimateInLeft : CSS_UTILITY.calciteAnimateInRight;
      }
    };
    const contentNode = html`<div class=${safeClassMap(CSS.contentContainer)}>${keyed("content", html`<div class=${safeClassMap({
      [CSS_UTILITY.rtl]: dir === "rtl",
      [CSS.content]: true,
      [CSS.contentOverlay]: displayMode === "overlay",
      [CSS.floatContent]: displayMode === "float-content" || displayMode === "float",
      [CSS_UTILITY.calciteAnimate]: displayMode === "overlay",
      [getAnimationDir()]: displayMode === "overlay",
      [getDimensionClass("width", this.width, this.widthScale)]: !!(this.width || this.widthScale),
      [getDimensionClass("height", this.height, this.heightScale)]: !!(this.height || this.heightScale)
    })} .hidden=${collapsed} ${ref(this.storeContentEl)}>${this.renderHeader()}<div class=${safeClassMap(CSS.contentBody)}><slot></slot></div>${separatorNode}</div>`)}</div>`;
    const actionBarNode = keyed("action-bar-container", html`<div class=${safeClassMap(CSS.actionBarContainer)}><slot name=${SLOTS.actionBar} @slotchange=${this.handleActionBarSlotChange}></slot></div>`);
    const mainNodes = [actionBarNode, contentNode];
    if (position === "end") {
      mainNodes.reverse();
    }
    return html`<div class=${safeClassMap({ [CSS.container]: true, [CSS.floatAll]: displayMode === "float-all" })}>${mainNodes}</div>`;
  }
}
customElement("calcite-shell-panel", ShellPanel);
export {
  ShellPanel
};