/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { keyed } from "lit/directives/keyed.js";
import { css, html } from "lit";
import { LitElement, safeClassMap } from "@arcgis/lumina";
import { s as slotChangeHasAssignedElement, a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{position:absolute;inset:0;display:flex;block-size:100%;inline-size:100%;flex-direction:column;overflow:hidden}.main{position:relative;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;flex-direction:row;justify-content:space-between;overflow:hidden}.content{display:flex;block-size:100%;inline-size:100%;flex-direction:column;flex-wrap:nowrap;overflow:auto;justify-content:space-between}.content ::slotted(calcite-panel),.content ::slotted(calcite-flow){flex:1 1 auto;align-self:stretch;max-block-size:unset}.content--behind{position:absolute;inset:0;border-width:0px;z-index:calc(var(--calcite-z-index) - 1);display:initial}.content--non-interactive{pointer-events:none;display:flex;block-size:100%;inline-size:100%;flex-direction:column;flex-wrap:nowrap}::slotted(calcite-shell-panel){inline-size:unset}::slotted(.header .heading){font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);font-weight:var(--calcite-font-weight-normal)}slot[name=panel-start]::slotted(calcite-shell-panel),slot[name=panel-end]::slotted(calcite-shell-panel){position:relative;z-index:calc(var(--calcite-z-index) + 1)}slot[name=panel-end]::slotted(calcite-shell-panel){margin-inline-start:auto}::slotted(calcite-panel),::slotted(calcite-flow){border-width:var(--calcite-border-width-sm);border-color:var(--calcite-shell-border-color, var(--calcite-color-border-3));border-inline-start-width:var(--calcite-border-width-none);border-inline-end-width:var(--calcite-border-width-none);border-style:solid}slot[name=panel-top]::slotted(calcite-shell-panel:not([display-mode^=float])),slot[name=panel-bottom]::slotted(calcite-shell-panel:not([display-mode^=float])){border-color:var(--calcite-shell-border-color, var(--calcite-color-border-3));border-inline-start-width:var(--calcite-border-width-sm);border-inline-end-width:var(--calcite-border-width-sm)}.center-content{display:flex;flex-direction:column;justify-content:space-between;block-size:100%;inline-size:100%;min-inline-size:0}.content-bottom{justify-content:flex-end}::slotted(calcite-shell-panel){flex:none;align-self:stretch}::slotted(calcite-tip-manager){position:absolute;z-index:var(--calcite-z-index-toast);box-sizing:border-box}@keyframes in-up{0%{opacity:0;transform:translate3D(0,5px,0)}to{opacity:1;transform:translateZ(0)}}::slotted(calcite-tip-manager){animation:in-up var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:.25rem;--tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);--tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);inset-block-end:.5rem;inset-inline:var(--calcite-shell-tip-spacing, 26vw)}slot[name=panel-bottom]::slotted(calcite-shell-panel){margin-block-start:auto}slot[name=panel-top]::slotted(calcite-shell-panel){margin-block-end:auto}.position-wrapper{position:absolute;pointer-events:none;inset:0}:host([hidden]){display:none}[hidden]{display:none}`;
const CSS = {
  main: "main",
  content: "content",
  contentBehind: "content--behind",
  contentBottom: "content-bottom",
  contentNonInteractive: "content--non-interactive",
  footer: "footer",
  positionedSlotWrapper: "positioned-slot-wrapper",
  contentBehindCenterContent: "center-content"
};
const SLOTS = {
  panelStart: "panel-start",
  panelEnd: "panel-end",
  panelTop: "panel-top",
  panelBottom: "panel-bottom",
  header: "header",
  footer: "footer",
  alerts: "alerts",
  sheets: "sheets",
  modals: "modals",
  dialogs: "dialogs"
};
class Shell extends LitElement {
  constructor() {
    super();
    this.hasAlerts = false;
    this.hasDialogs = false;
    this.hasFooter = false;
    this.hasHeader = false;
    this.hasModals = false;
    this.hasOnlyPanelBottom = false;
    this.hasPanelBottom = false;
    this.hasPanelTop = false;
    this.hasSheets = false;
    this.panelIsResizing = false;
    this.contentBehind = false;
    this.listen("calciteInternalShellPanelResizeStart", this.handleCalciteInternalShellPanelResizeStart);
    this.listen("calciteInternalShellPanelResizeEnd", this.handleCalciteInternalShellPanelResizeEnd);
  }
  static {
    this.properties = { hasAlerts: [16, {}, { state: true }], hasDialogs: [16, {}, { state: true }], hasFooter: [16, {}, { state: true }], hasHeader: [16, {}, { state: true }], hasModals: [16, {}, { state: true }], hasOnlyPanelBottom: [16, {}, { state: true }], hasPanelBottom: [16, {}, { state: true }], hasPanelTop: [16, {}, { state: true }], hasSheets: [16, {}, { state: true }], panelIsResizing: [16, {}, { state: true }], contentBehind: [7, {}, { reflect: true, type: Boolean }] };
  }
  static {
    this.styles = styles;
  }
  willUpdate(changes) {
    if (changes.has("hasPanelTop") && (this.hasUpdated || this.hasPanelTop !== false) || changes.has("hasPanelBottom") && (this.hasUpdated || this.hasPanelBottom !== false)) {
      this.hasOnlyPanelBottom = !this.hasPanelTop && this.hasPanelBottom;
    }
  }
  handleCalciteInternalShellPanelResizeStart(event) {
    this.panelIsResizing = true;
    event.stopPropagation();
  }
  handleCalciteInternalShellPanelResizeEnd(event) {
    this.panelIsResizing = false;
    event.stopPropagation();
  }
  handleHeaderSlotChange(event) {
    this.hasHeader = !!slotChangeHasAssignedElement(event);
  }
  handleFooterSlotChange(event) {
    this.hasFooter = !!slotChangeHasAssignedElement(event);
  }
  handleAlertsSlotChange(event) {
    this.hasAlerts = !!slotChangeHasAssignedElement(event);
    slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-alert")).forEach((el) => {
      el.embedded = true;
    });
  }
  handleSheetsSlotChange(event) {
    this.hasSheets = !!slotChangeHasAssignedElement(event);
    slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-sheet")).forEach((el) => {
      el.embedded = true;
    });
  }
  handleModalsSlotChange(event) {
    this.hasModals = !!slotChangeHasAssignedElement(event);
    slotChangeGetAssignedElements(event)?.filter((el) => el?.matches("calcite-modal")).forEach((el) => {
      el.embedded = true;
    });
  }
  handlePanelTopChange(event) {
    this.hasPanelTop = slotChangeHasAssignedElement(event);
    slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-shell-panel")).forEach((el) => {
      el.layout = "horizontal";
      el.position = "start";
    });
  }
  handlePanelBottomChange(event) {
    this.hasPanelBottom = slotChangeHasAssignedElement(event);
    slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-shell-panel")).forEach((el) => {
      el.layout = "horizontal";
      el.position = "end";
    });
  }
  handlePanelStartChange(event) {
    slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-shell-panel")).forEach((el) => {
      el.layout = "vertical";
      el.position = "start";
    });
  }
  handlePanelEndChange(event) {
    slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-shell-panel")).forEach((el) => {
      el.layout = "vertical";
      el.position = "end";
    });
  }
  handleDialogsSlotChange(event) {
    this.hasDialogs = !!slotChangeHasAssignedElement(event);
    slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-dialog")).forEach((el) => {
      el.embedded = true;
    });
  }
  renderHeader() {
    return html`<div .hidden=${!this.hasHeader}>${keyed("header", html`<slot name=${SLOTS.header} @slotchange=${this.handleHeaderSlotChange}></slot>`)}</div>`;
  }
  renderFooter() {
    return keyed("footer", html`<div class=${safeClassMap(CSS.footer)} .hidden=${!this.hasFooter}><slot name=${SLOTS.footer} @slotchange=${this.handleFooterSlotChange}></slot></div>`);
  }
  renderAlerts() {
    return html`<div .hidden=${!this.hasAlerts}>${keyed("alerts", html`<slot name=${SLOTS.alerts} @slotchange=${this.handleAlertsSlotChange}></slot>`)}</div>`;
  }
  renderSheets() {
    return html`<div .hidden=${!this.hasSheets}>${keyed("sheets", html`<slot name=${SLOTS.sheets} @slotchange=${this.handleSheetsSlotChange}></slot>`)}</div>`;
  }
  renderModals() {
    return html`<div .hidden=${!this.hasModals}>${keyed("modals", html`<slot name=${SLOTS.modals} @slotchange=${this.handleModalsSlotChange}></slot>`)}</div>`;
  }
  renderDialogs() {
    return html`<div .hidden=${!this.hasDialogs}>${keyed("dialogs", html`<slot name=${SLOTS.dialogs} @slotchange=${this.handleDialogsSlotChange}></slot>`)}</div>`;
  }
  renderContent() {
    const { panelIsResizing } = this;
    const defaultSlotNode = keyed("default-slot", html`<slot></slot>`);
    const defaultSlotContainerNode = panelIsResizing ? html`<div class=${safeClassMap(CSS.contentNonInteractive)}>${defaultSlotNode}</div>` : defaultSlotNode;
    const panelBottomSlotNode = keyed("panel-bottom-slot", html`<slot name=${SLOTS.panelBottom} @slotchange=${this.handlePanelBottomChange}></slot>`);
    const panelTopSlotNode = keyed("panel-top-slot", html`<slot name=${SLOTS.panelTop} @slotchange=${this.handlePanelTopChange}></slot>`);
    const contentContainerKey = "content-container";
    const content = this.contentBehind ? [
      keyed(contentContainerKey, html`<div class=${safeClassMap({
        [CSS.content]: true,
        [CSS.contentBehind]: true
      })}>${defaultSlotContainerNode}</div>`),
      html`<div class=${safeClassMap({
        [CSS.contentBehindCenterContent]: true,
        [CSS.contentBottom]: this.hasOnlyPanelBottom
      })}>${panelTopSlotNode}${panelBottomSlotNode}</div>`
    ] : [
      keyed(contentContainerKey, html`<div class=${safeClassMap({ [CSS.content]: true, [CSS.contentBottom]: this.hasOnlyPanelBottom })}>${panelTopSlotNode}${defaultSlotContainerNode}${panelBottomSlotNode}</div>`)
    ];
    return content;
  }
  renderMain() {
    return html`<div class=${safeClassMap(CSS.main)}><slot name=${SLOTS.panelStart} @slotchange=${this.handlePanelStartChange}></slot>${this.renderContent()}<slot name=${SLOTS.panelEnd} @slotchange=${this.handlePanelEndChange}></slot></div>`;
  }
  renderPositionedSlots() {
    return html`<div class=${safeClassMap(CSS.positionedSlotWrapper)}>${this.renderAlerts()}${this.renderModals()}${this.renderDialogs()}${this.renderSheets()}</div>`;
  }
  render() {
    return html`${this.renderHeader()}${this.renderMain()}${this.renderFooter()}${this.renderPositionedSlots()}`;
  }
}
customElement("calcite-shell", Shell);
export {
  Shell
};
