/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { css, html } from "lit";
import { keyed } from "lit/directives/keyed.js";
import { LitElement, safeClassMap } from "@arcgis/lumina";
import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
import { S as SLOTS, C as CSS } from "../../chunks/resources10.js";
const styles = css`:host([disabled]) .content{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) .content *,:host([disabled]) .content ::slotted(*){pointer-events:none}:host{display:flex;flex:1 1 0%;flex-direction:column}.container{display:flex;flex:1 1 auto;align-items:stretch;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}.content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);padding-inline:var(--calcite-stack-padding-inline, .75rem);padding-block:var(--calcite-stack-padding-block, .5rem)}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:0 1 auto}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:.75rem;align-self:center}.actions-start,.actions-end,.content-start,.content-end{display:flex;align-items:center}.actions-start ::slotted(calcite-action),.actions-start ::slotted(calcite-action-menu),.actions-start ::slotted(calcite-handle),.actions-start ::slotted(calcite-dropdown),.actions-end ::slotted(calcite-action),.actions-end ::slotted(calcite-action-menu),.actions-end ::slotted(calcite-handle),.actions-end ::slotted(calcite-dropdown){align-self:stretch;color:inherit}:host([hidden]){display:none}[hidden]{display:none}`;
class Stack extends LitElement {
  constructor() {
    super(...arguments);
    this.hasActionsEnd = false;
    this.hasActionsStart = false;
    this.hasContentEnd = false;
    this.hasContentStart = false;
    this.disabled = false;
  }
  static {
    this.properties = { hasActionsEnd: [16, {}, { state: true }], hasActionsStart: [16, {}, { state: true }], hasContentEnd: [16, {}, { state: true }], hasContentStart: [16, {}, { state: true }], disabled: [7, {}, { reflect: true, type: Boolean }] };
  }
  static {
    this.styles = styles;
  }
  handleActionsStartSlotChange(event) {
    this.hasActionsStart = slotChangeHasAssignedElement(event);
  }
  handleActionsEndSlotChange(event) {
    this.hasActionsEnd = slotChangeHasAssignedElement(event);
  }
  handleContentStartSlotChange(event) {
    this.hasContentStart = slotChangeHasAssignedElement(event);
  }
  handleContentEndSlotChange(event) {
    this.hasContentEnd = slotChangeHasAssignedElement(event);
  }
  renderActionsStart() {
    const { hasActionsStart } = this;
    return keyed("actions-start-container", html`<div class=${safeClassMap(CSS.actionsStart)} .hidden=${!hasActionsStart}><slot name=${SLOTS.actionsStart} @slotchange=${this.handleActionsStartSlotChange}></slot></div>`);
  }
  renderActionsEnd() {
    const { hasActionsEnd } = this;
    return keyed("actions-end-container", html`<div class=${safeClassMap(CSS.actionsEnd)} .hidden=${!hasActionsEnd}><slot name=${SLOTS.actionsEnd} @slotchange=${this.handleActionsEndSlotChange}></slot></div>`);
  }
  renderContentStart() {
    const { hasContentStart } = this;
    return html`<div class=${safeClassMap(CSS.contentStart)} .hidden=${!hasContentStart}><slot name=${SLOTS.contentStart} @slotchange=${this.handleContentStartSlotChange}></slot></div>`;
  }
  renderDefaultContent() {
    return html`<div class=${safeClassMap(CSS.content)}><slot></slot></div>`;
  }
  renderContentEnd() {
    const { hasContentEnd } = this;
    return html`<div class=${safeClassMap(CSS.contentEnd)} .hidden=${!hasContentEnd}><slot name=${SLOTS.contentEnd} @slotchange=${this.handleContentEndSlotChange}></slot></div>`;
  }
  render() {
    return html`<div class=${safeClassMap(CSS.container)}>${this.renderActionsStart()}${this.renderContentStart()}${this.renderDefaultContent()}${this.renderContentEnd()}${this.renderActionsEnd()}</div>`;
  }
}
customElement("calcite-stack", Stack);
export {
  Stack
};
