/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { createRef, ref } from "lit/directives/ref.js";
import { css, html } from "lit";
import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
import { u as useSetFocus } from "../../chunks/useSetFocus.js";
import { c as createObserver } from "../../chunks/observers.js";
const CSS = {
  container: "container",
  containerContent: "container-content",
  hasProgress: "progress-bar",
  hide: "hide",
  primary: "primary",
  secondary: "secondary",
  tertiary: "tertiary"
};
const SLOTS = {
  logo: "logo",
  user: "user",
  progress: "progress",
  navigationAction: "navigation-action",
  contentStart: "content-start",
  contentEnd: "content-end",
  contentCenter: "content-center",
  navSecondary: "navigation-secondary",
  navTertiary: "navigation-tertiary"
};
const ICONS = {
  hamburger: "hamburger"
};
const styles = css`:host([hidden]){display:none}[hidden]{display:none}:host{display:block}:host([scale=s]){--calcite-internal-navigation-primary-height: 3rem;--calcite-internal-navigation-secondary-height: 2.25rem;--calcite-internal-navigation-tertiary-height: 2.25rem;--calcite-internal-navigation-navigation-action-margin-inline: 8px}:host([scale=m]){--calcite-internal-navigation-primary-height: 4rem;--calcite-internal-navigation-secondary-height: 3rem;--calcite-internal-navigation-tertiary-height: 3rem;--calcite-internal-navigation-navigation-action-margin-inline: var(--calcite-font-size-sm)}:host([scale=l]){--calcite-internal-navigation-primary-height: 4.75rem;--calcite-internal-navigation-secondary-height: 4rem;--calcite-internal-navigation-tertiary-height: 4rem;--calcite-internal-navigation-navigation-action-margin-inline: var(--calcite-font-size-md)}.container{display:flex;inline-size:100%;flex-direction:column;margin-block:0;margin-inline:auto;background-color:var(--calcite-navigation-background-color, var(--calcite-navigation-background, var(--calcite-color-foreground-1)))}.container.primary,.container.secondary,.container.tertiary{border-block-end:1px solid;border-block-end-color:var(--calcite-navigation-border-color, var(--calcite-color-border-3))}.user,.logo{display:flex}.hide{display:none}.primary{block-size:var(--calcite-internal-navigation-primary-height)}.secondary{block-size:var(--calcite-internal-navigation-secondary-height)}.tertiary{block-size:var(--calcite-internal-navigation-tertiary-height)}.container-content{margin-inline:auto;display:flex;block-size:100%;inline-size:100%;margin-block:0;inline-size:var(--calcite-navigation-width, 100%);max-inline-size:100%}.container-content.progress-bar{margin-block-start:.125rem}slot[name]{display:flex;flex-direction:row}slot[name=navigation-secondary]::slotted(calcite-navigation),slot[name=navigation-tertiary]::slotted(calcite-navigation){inline-size:100%}slot[name=content-start]::slotted(*),slot[name=content-center]::slotted(*),slot[name=content-end]::slotted(*){display:flex;flex-direction:row;align-items:center}slot[name=progress],slot[name=progress] calcite-progress{inset-block-start:0;inset-inline:0}slot[name=content-end]{margin-inline-start:auto}slot[name=content-start]{margin-inline-end:auto}slot[name=content-end],slot[name=logo]~slot[name=user],slot[name=user]:only-child{margin-inline-start:auto}slot[name=content-center]{margin-inline-start:auto;margin-inline-end:auto}slot[name=content-start]~slot[name=content-center]{margin-inline-start:0px}slot[name=content-start]~slot[name=content-end],slot[name=content-center]~slot[name=content-end],slot[name=content-center]~slot[name=user],slot[name=content-end]~slot[name=user]{margin:0}slot[name=navigation-action] calcite-action{align-self:center;margin-inline-start:var(--calcite-internal-navigation-navigation-action-margin-inline)}`;
class Navigation extends LitElement {
  constructor() {
    super(...arguments);
    this.navigationActionRef = createRef();
    this.focusSetter = useSetFocus()(this);
    this.mutationObserver = createObserver("mutation", () => {
      this.updateNavigationLogo();
      this.updateNavigationUser();
      this.updateNestedNavigation();
    });
    this.navigationAction = false;
    this.scale = "m";
    this.calciteNavigationActionSelect = createEvent({ cancelable: false });
  }
  static {
    this.properties = { logoSlotHasElements: [16, {}, { state: true }], navigationActionSlotHasElements: [16, {}, { state: true }], primaryContentCenterSlotHasElements: [16, {}, { state: true }], primaryContentEndSlotHasElements: [16, {}, { state: true }], primaryContentStartSlotHasElements: [16, {}, { state: true }], progressSlotHasElement: [16, {}, { state: true }], secondarySlotHasElements: [16, {}, { state: true }], tertiarySlotHasElements: [16, {}, { state: true }], userSlotHasElements: [16, {}, { state: true }], label: 1, navigationAction: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }] };
  }
  static {
    this.styles = styles;
  }
  async setFocus(options) {
    return this.focusSetter(() => this.navigationActionRef.value, options);
  }
  connectedCallback() {
    super.connectedCallback();
    this.mutationObserver?.observe(this.el, { childList: true });
    this.updateNavigationLogo();
    this.updateNavigationUser();
    this.updateNestedNavigation();
  }
  updated(changes) {
    if (changes.has("scale") || changes.has("logoSlotHasElements") || changes.has("userSlotHasElements") || changes.has("secondarySlotHasElements") || changes.has("tertiarySlotHasElements")) {
      this.updateNavigationLogo();
      this.updateNavigationUser();
      this.updateNestedNavigation();
    }
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    this.mutationObserver?.disconnect();
  }
  actionClickHandler() {
    this.calciteNavigationActionSelect.emit();
  }
  handleUserSlotChange(event) {
    if (this.isPrimaryLevel()) {
      this.userSlotHasElements = slotChangeHasAssignedElement(event);
    }
  }
  handleLogoSlotChange(event) {
    if (this.isPrimaryLevel()) {
      this.logoSlotHasElements = slotChangeHasAssignedElement(event);
    }
  }
  handleContentStartSlotChange(event) {
    if (this.isPrimaryLevel()) {
      this.primaryContentStartSlotHasElements = slotChangeHasAssignedElement(event);
    }
  }
  handleContentEndSlotChange(event) {
    if (this.isPrimaryLevel()) {
      this.primaryContentEndSlotHasElements = slotChangeHasAssignedElement(event);
    }
  }
  handleContentCenterSlotChange(event) {
    if (this.isPrimaryLevel()) {
      this.primaryContentCenterSlotHasElements = slotChangeHasAssignedElement(event);
    }
  }
  handleSecondarySlotChange(event) {
    this.secondarySlotHasElements = slotChangeHasAssignedElement(event);
  }
  handleTertiarySlotChange(event) {
    this.tertiarySlotHasElements = slotChangeHasAssignedElement(event);
  }
  handleMenuActionSlotChange(event) {
    if (this.isPrimaryLevel()) {
      this.navigationActionSlotHasElements = slotChangeHasAssignedElement(event);
      if (this.navigationActionSlotHasElements) {
        this.navigationAction = false;
      }
    }
  }
  handleProgressSlotChange(event) {
    if (this.isPrimaryLevel()) {
      this.progressSlotHasElement = slotChangeHasAssignedElement(event);
    }
  }
  isPrimaryLevel() {
    return this.el.slot !== SLOTS.navSecondary && this.el.slot !== SLOTS.navTertiary;
  }
  getOwnedNavigationElements(slotName, selector) {
    const slot = this.el.shadowRoot?.querySelector(`slot[name="${slotName}"]`);
    if (!slot) {
      return [];
    }
    return slot.assignedElements({ flatten: true }).filter((item) => item.matches(selector));
  }
  updateNavigationLogo() {
    this.getOwnedNavigationElements(SLOTS.logo, "calcite-navigation-logo").forEach((item) => {
      item.scale = this.scale;
    });
  }
  updateNavigationUser() {
    this.getOwnedNavigationElements(SLOTS.user, "calcite-navigation-user").forEach((item) => {
      item.scale = this.scale;
    });
  }
  updateNestedNavigation() {
    const nestedNavigation = [
      ...this.getOwnedNavigationElements(SLOTS.navSecondary, "calcite-navigation"),
      ...this.getOwnedNavigationElements(SLOTS.navTertiary, "calcite-navigation")
    ];
    nestedNavigation.forEach((item) => {
      if (item !== this.el) {
        item.scale = this.scale;
      }
    });
  }
  renderMenuAction() {
    return html`<slot name=${SLOTS.navigationAction} @slotchange=${this.handleMenuActionSlotChange}>${this.navigationAction && html`<calcite-action .icon=${ICONS.hamburger} @click=${this.actionClickHandler} .text=${this.label} ${ref(this.navigationActionRef)}></calcite-action>` || ""}</slot>`;
  }
  render() {
    const primaryLevelHasElements = this.logoSlotHasElements || this.userSlotHasElements || this.navigationActionSlotHasElements || this.primaryContentCenterSlotHasElements || this.primaryContentEndSlotHasElements || this.primaryContentStartSlotHasElements || this.navigationAction;
    const slotName = this.el.slot;
    return html`<div class=${safeClassMap({
      [CSS.container]: true,
      [CSS.secondary]: slotName === SLOTS.navSecondary,
      [CSS.tertiary]: slotName === SLOTS.navTertiary,
      [CSS.primary]: primaryLevelHasElements
    })}><div class=${safeClassMap({ [CSS.hide]: !this.progressSlotHasElement, [SLOTS.progress]: true })}><slot name=${SLOTS.progress} @slotchange=${this.handleProgressSlotChange}></slot></div><div class=${safeClassMap({ [CSS.containerContent]: true, [CSS.hasProgress]: this.progressSlotHasElement })}>${this.renderMenuAction()}<div class=${safeClassMap({ [CSS.hide]: !this.logoSlotHasElements, [SLOTS.logo]: true })}><slot name=${SLOTS.logo} @slotchange=${this.handleLogoSlotChange}></slot></div><slot name=${SLOTS.contentStart} @slotchange=${this.handleContentStartSlotChange}></slot><slot name=${SLOTS.contentCenter} @slotchange=${this.handleContentCenterSlotChange}></slot><slot name=${SLOTS.contentEnd} @slotchange=${this.handleContentEndSlotChange}></slot><div class=${safeClassMap({ [CSS.hide]: !this.userSlotHasElements, [SLOTS.user]: true })}><slot name=${SLOTS.user} @slotchange=${this.handleUserSlotChange}></slot></div></div></div><slot name=${SLOTS.navSecondary} @slotchange=${this.handleSecondarySlotChange}></slot><slot name=${SLOTS.navTertiary} @slotchange=${this.handleTertiarySlotChange}></slot>`;
  }
}
customElement("calcite-navigation", Navigation);
export {
  Navigation
};
