/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { C as CSS_UTILITY, b as resizeShiftStep, d as resizeStep, c as customElement } from "../../chunks/runtime.js";
import { keyed } from "lit/directives/keyed.js";
import { u as useSizeOverride, i as interact } from "../../chunks/useSizeOverride.js";
import { css, html } from "lit";
import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
import { createRef, ref } from "lit/directives/ref.js";
import { useDirection } from "@arcgis/lumina/controllers";
import { g as getStylePixelValue, a as slotChangeGetAssignedElements, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
import { g as getDimensionClass } from "../../chunks/dynamicClasses.js";
import { a as ariaValueFromSize } from "../../chunks/aria.js";
import { u as useT9n } from "../../chunks/useT9n.js";
const styles$1 = css`.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@keyframes in{0%{opacity:0}to{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0,-5px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0,5px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px,0,0)}to{opacity:1;transform:translateZ(0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px,0,0)}to{opacity:1;transform:translateZ(0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(.95,.95,1)}to{opacity:1;transform:scaleZ(1)}}`;
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 ICONS = {
  dragVertical: "drag-resize-vertical",
  dragHorizontal: "drag-resize-horizontal"
};
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]) .content{--calcite-internal-shell-panel-height: var(--calcite-shell-panel-height);--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-s{--calcite-internal-shell-panel-height: var(--calcite-shell-panel-height);--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, 20vh)}:host([layout=horizontal]) .height-l{--calcite-internal-shell-panel-height: var(--calcite-shell-panel-height);--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, 40vh)}:host([display-mode=float-all][height=s]),:host([display-mode=float-all][height-scale=s]) .content{min-block-size:var(--calcite-shell-panel-height, 20vh)}:host([display-mode=float-all][height=m]),:host([display-mode=float-all][height-scale=m]) .content{min-block-size:var(--calcite-shell-panel-height, 30vh)}:host([display-mode=float-all][height=l]),:host([display-mode=float-all][height-scale=l]) .content{min-block-size:var(--calcite-shell-panel-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-relative-base);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:var(--calcite-border-width-md) 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}.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:1 1 auto;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;box-shadow:var(--calcite-shell-panel-shadow, var(--calcite-shadow-sm))}: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;box-shadow:var(--calcite-shell-panel-shadow, var(--calcite-shadow-sm));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}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([display-mode=dock]) .resize-handle-bar,:host([display-mode=float-all]) .resize-handle-bar,:host([display-mode=overlay]) .resize-handle-bar{border-block-start:var(--calcite-border-width-sm) solid var(--calcite-color-border-3);border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-color-border-3);border-block-end:var(--calcite-border-width-sm) solid var(--calcite-color-border-3)}:host([hidden]){display:none}[hidden]{display:none}`;
class ShellPanel extends LitElement {
  constructor() {
    super(...arguments);
    this.direction = useDirection();
    this.resizeHandleRef = createRef();
    this.actionBars = [];
    this.contentRef = createRef();
    this.messages = useT9n();
    this.sizeOverride = useSizeOverride({
      targetElement: this.contentRef,
      getBounds: () => ({
        inline: { min: this.resizeValues.minInlineSize, max: this.resizeValues.maxInlineSize },
        block: { min: this.resizeValues.minBlockSize, max: this.resizeValues.maxBlockSize }
      }),
      onResize: (resizeValues) => {
        this.resizeValues = resizeValues;
      }
    });
    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 });
    this.calciteShellPanelCollapse = createEvent({ cancelable: false });
    this.calciteShellPanelExpand = 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, styles$1];
  }
  async updateSize(size) {
    this.updateSizeInternal(size);
  }
  connectedCallback() {
    super.connectedCallback();
    if (this.hasUpdated) {
      this.refreshResize();
    }
  }
  willUpdate(changes) {
    let shouldRefreshResize = false;
    if (changes.has("layout") && (this.hasUpdated || this.layout !== "vertical")) {
      this.setActionBarsLayout(this.actionBars);
      this.updateSizeInternal({ inline: null, block: null });
      shouldRefreshResize = true;
    }
    if (changes.has("direction") && this.hasUpdated || changes.has("position") && (this.hasUpdated || this.position !== "start")) {
      shouldRefreshResize = true;
    }
    if (changes.has("collapsed") && (this.hasUpdated || this.collapsed !== false) || changes.has("resizable") && (this.hasUpdated || this.resizable !== false)) {
      shouldRefreshResize = this.resizable && !this.collapsed;
      if (!shouldRefreshResize) {
        this.cleanUpInteractions();
      }
    }
    if (shouldRefreshResize) {
      this.refreshResize();
    }
    if (changes.has("collapsed") && this.hasUpdated) {
      if (this.collapsed) {
        this.calciteShellPanelCollapse.emit();
      } else {
        this.calciteShellPanelExpand.emit();
      }
    }
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    this.cleanUpInteractions();
  }
  getContentElDOMRect() {
    return this.contentRef.value.getBoundingClientRect();
  }
  updateSizeInternal(size) {
    if (!this.contentRef.value) {
      return;
    }
    this.sizeOverride.resize(size);
  }
  handleKeyDown(event) {
    const { key, defaultPrevented, shiftKey } = event;
    const { position, layout, resizable, contentRef, resizeValues: { maxBlockSize, maxInlineSize, minBlockSize, minInlineSize } } = this;
    const arrowKeys = layout === "horizontal" ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"];
    const keys = [...arrowKeys, "Home", "End"];
    if (!resizable || !contentRef.value || defaultPrevented || !keys.includes(key)) {
      return;
    }
    const rect = this.getContentElDOMRect();
    const invertRTL = this.direction === "rtl" ? -1 : 1;
    const stepValue = shiftKey ? resizeShiftStep : resizeStep;
    switch (key) {
      case "ArrowUp":
        this.updateSizeInternal({
          block: rect.height + (layout === "horizontal" && position === "end" ? stepValue : -stepValue)
        });
        event.preventDefault();
        break;
      case "ArrowDown":
        this.updateSizeInternal({
          block: rect.height + (layout === "horizontal" && position === "end" ? -stepValue : stepValue)
        });
        event.preventDefault();
        break;
      case "ArrowLeft":
        this.updateSizeInternal({
          inline: rect.width + (layout === "vertical" && position === "end" ? stepValue : -stepValue) * invertRTL
        });
        event.preventDefault();
        break;
      case "ArrowRight":
        this.updateSizeInternal({
          inline: rect.width + (layout === "vertical" && position === "end" ? -stepValue : stepValue) * invertRTL
        });
        event.preventDefault();
        break;
      case "Home":
        this.updateSizeInternal(layout === "horizontal" ? { block: minBlockSize } : { inline: minInlineSize });
        event.preventDefault();
        break;
      case "End":
        this.updateSizeInternal(layout === "horizontal" ? { block: maxBlockSize } : { inline: maxInlineSize });
        event.preventDefault();
        break;
    }
  }
  cleanUpInteractions() {
    this.interaction?.unset();
  }
  updateResizeValues() {
    const { contentRef } = this;
    if (!contentRef.value) {
      return;
    }
    const computedStyle = window.getComputedStyle(contentRef.value);
    this.resizeValues = {
      inlineSize: getStylePixelValue(computedStyle.inlineSize),
      blockSize: getStylePixelValue(computedStyle.blockSize),
      minInlineSize: getStylePixelValue(computedStyle.minInlineSize),
      minBlockSize: getStylePixelValue(computedStyle.minBlockSize),
      maxInlineSize: getStylePixelValue(computedStyle.maxInlineSize) || window.innerWidth,
      maxBlockSize: getStylePixelValue(computedStyle.maxBlockSize) || window.innerHeight
    };
  }
  async refreshResize() {
    await this.componentOnReady();
    await this.updateComplete;
    this.updateResizeValues();
    this.setUpResizeInteractions();
  }
  setUpResizeInteractions() {
    this.cleanUpInteractions();
    const { el, contentRef, resizable, position, collapsed, resizeHandleRef, layout } = this;
    const resizeHandle = resizeHandleRef.value;
    if (!contentRef.value || collapsed || !resizable || !resizeHandle) {
      return;
    }
    const rtl = this.direction === "rtl";
    this.interaction = interact(contentRef.value, { context: el.ownerDocument }).resizable({
      edges: {
        top: position === "end" && layout === "horizontal" ? resizeHandle : false,
        right: position === (rtl ? "end" : "start") && layout === "vertical" ? resizeHandle : false,
        bottom: position === "start" && layout === "horizontal" ? resizeHandle : false,
        left: position === (rtl ? "start" : "end") && layout === "vertical" ? resizeHandle : false
      },
      modifiers: [
        interact.modifiers.restrictSize({
          min: {
            width: this.resizeValues.minInlineSize,
            height: this.resizeValues.minBlockSize
          },
          max: {
            width: this.resizeValues.maxInlineSize,
            height: this.resizeValues.maxBlockSize
          }
        })
      ],
      listeners: {
        resizestart: () => {
          this.calciteInternalShellPanelResizeStart.emit();
        },
        resizeend: () => {
          this.calciteInternalShellPanelResizeEnd.emit();
        },
        move: ({ rect }) => {
          const isBlock = layout === "horizontal";
          this.updateSize(isBlock ? { block: rect.height } : { inline: rect.width });
        }
      }
    });
  }
  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" ? ICONS.dragVertical : ICONS.dragHorizontal;
  }
  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 = this.direction;
    const isBlockPosition = layout === "horizontal";
    const separatorNode = !collapsed && resizable ? keyed("resize-handle", html`<div .ariaLabel=${this.messages.resize} .ariaOrientation=${isBlockPosition ? "vertical" : "horizontal"} .ariaValueMax=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.maxBlockSize, resizeValues.maxInlineSize)} .ariaValueMin=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.minBlockSize, resizeValues.minInlineSize)} .ariaValueNow=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.blockSize, resizeValues.inlineSize)} class=${safeClassMap(CSS.resizeHandle)} @keydown=${this.handleKeyDown} role=separator tabindex=0 touch-action=none ${ref(this.resizeHandleRef)}><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.contentRef)}>${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
};
