/* 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, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
import { createRef, ref } from "lit/directives/ref.js";
import { s as slotChangeHasAssignedElement, b as setRequestedIcon } from "../../chunks/dom.js";
import { g as getIconScale } from "../../chunks/component.js";
import { N as NumberStringFormat } from "../../chunks/locale.js";
import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
import { K as KindIcons, a as KindIconsFilled } from "../../chunks/resources4.js";
import { u as useT9n } from "../../chunks/useT9n.js";
import { u as useSetFocus } from "../../chunks/useSetFocus.js";
import { u as useTopLayer } from "../../chunks/useTopLayer.js";
const DURATIONS = {
  slow: 14e3,
  medium: 1e4,
  fast: 6e3
};
const SLOTS = {
  actionsEnd: "actions-end",
  title: "title",
  message: "message",
  link: "link"
};
const CSS = {
  actionsEnd: "actions-end",
  close: "close",
  container: "container",
  containerActive: "container--active",
  dismissProgress: "dismiss-progress",
  icon: "icon",
  containerEmbedded: "container--embedded",
  queueCount: "queue-count",
  queueCountActive: "queue-count--active",
  textContainer: "text-container",
  focused: "focused"
};
const alertQueueTimeoutMs = 300;
class AlertManager {
  constructor() {
    this.registeredElements = [];
  }
  // --------------------------------------------------------------------------
  //
  //  Public Methods
  //
  // --------------------------------------------------------------------------
  registerElement(alert) {
    const { registeredElements } = this;
    if (!registeredElements.includes(alert)) {
      switch (alert.queue) {
        case "immediate":
          registeredElements.unshift(alert);
          break;
        case "next":
          registeredElements.splice(1, 0, alert);
          break;
        case "last":
          registeredElements.push(alert);
          break;
      }
      this.updateAlerts();
    }
  }
  unregisterElement(alert) {
    const { registeredElements } = this;
    const index = registeredElements.indexOf(alert);
    if (index !== -1) {
      registeredElements.splice(index, 1);
    }
    alert.active = false;
    this.updateAlerts();
  }
  // --------------------------------------------------------------------------
  //
  //  Private Methods
  //
  // --------------------------------------------------------------------------
  updateAlerts() {
    window.clearTimeout(this.queueTimeoutId);
    this.queueTimeoutId = void 0;
    this.registeredElements.forEach((alert, index) => {
      alert.openAlertCount = this.registeredElements.length;
      if (index === 0) {
        this.queueTimeoutId = window.setTimeout(() => alert.active = true, alertQueueTimeoutMs);
      } else {
        alert.active = false;
      }
    });
  }
}
const styles = css`:host([scale=s]){--calcite-internal-alert-action-spacing: var(--calcite-spacing-xs)}:host([scale=m]){--calcite-internal-alert-action-spacing: var(--calcite-spacing-xs)}:host([scale=l]){--calcite-internal-alert-action-spacing: var(--calcite-spacing-sm)}:host{display:block;inline-size:var(--calcite-alert-width)}.container--embedded,.container[popover]{pointer-events:none;position:fixed;margin-inline:auto;margin-block:0px;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:min-content;align-items:center;justify-content:center;padding:0;text-align:start;opacity:0;inset:initial;box-shadow:var(--calcite-alert-shadow, var(--calcite-shadow-md));background-color:var(--calcite-alert-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-alert-corner-radius, var(--calcite-border-radius));border-block-start:0 solid transparent;border-inline:1px solid var(--calcite-color-border-3);border-block-end:1px solid var(--calcite-color-border-3);max-inline-size:calc(100% - var(--calcite-alert-offset-size, 2rem) * 2);transition:opacity var(--calcite-internal-animation-timing-slow) ease-in-out,all var(--calcite-animation-timing) ease-in-out;overflow:visible}.container--bottom,.container--top,.container--bottom[popover],.container--top[popover]{inset-inline-end:0;inset-inline-start:0}.container[class*=bottom]{transform:translate3d(0,var(--calcite-alert-offset-size, 2rem),0);inset-block-end:var(--calcite-alert-offset-size, 2rem)}.container[class*=top]{transform:translate3d(0,calc(-1 * var(--calcite-alert-offset-size, 2rem)),0);inset-block-start:var(--calcite-alert-offset-size, 2rem)}.container[class*=start]{inset-inline-start:var(--calcite-alert-offset-size, 2rem);inset-inline-end:auto}.container[class*=end]{inset-inline-end:var(--calcite-alert-offset-size, 2rem);inset-inline-start:auto}.icon{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;margin-block:auto;margin-inline-end:auto}.close{margin-inline-end:var(--calcite-internal-alert-action-spacing)}.queue-count{visibility:hidden;display:flex;min-inline-size:min-content;cursor:default;align-items:center;justify-content:space-around;align-self:stretch;overflow:hidden;text-align:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);opacity:0;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;border-inline:0 solid transparent;border-start-end-radius:0}.queue-count--active{visibility:visible;opacity:1}.dismiss-progress{position:absolute;display:block;inline-size:100%;overflow:hidden;inset-inline:0;inset-block-start:-2px;block-size:2px;border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}.dismiss-progress:after{position:absolute;inset-block-start:0px;display:block;block-size:2px;content:"";background-color:var(--calcite-color-transparent-tint);inset-inline-end:0}.actions-end{display:flex;gap:var(--calcite-internal-alert-action-spacing);padding-block:var(--calcite-internal-alert-action-spacing);padding-inline:0 var(--calcite-internal-alert-action-spacing)}.text-container{box-sizing:border-box;display:flex;min-inline-size:0px;flex:1 1 auto;flex-direction:column;overflow-wrap:break-word}.footer{position:relative;display:flex;inline-size:auto;justify-content:flex-end;align-self:stretch;padding-block-start:1px;block-size:inherit}:host([scale=s]) slot[name=title]::slotted(*),:host([scale=s]) *::slotted([slot=title]){font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=s]) slot[name=message]::slotted(*),:host([scale=s]) *::slotted([slot=message]){font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=s]) slot[name=link]::slotted(*),:host([scale=s]) *::slotted([slot=link]){font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=s]) .queue-count{margin-inline:.5rem}:host([scale=s]) .container{--calcite-internal-alert-min-height: 3.5rem;inline-size:var(--calcite-alert-width, 40em)}:host([scale=s]) .icon{padding-inline-start:.75rem}:host([scale=s]) .text-container{padding-block:.5rem;padding-inline:.75rem .5rem}:host([scale=m]) slot[name=title]::slotted(*),:host([scale=m]) *::slotted([slot=title]){font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=m]) slot[name=message]::slotted(*),:host([scale=m]) *::slotted([slot=message]){font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=m]) slot[name=link]::slotted(*),:host([scale=m]) *::slotted([slot=link]){font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=m]) .queue-count{margin-inline:.75rem}:host([scale=m]) .container{--calcite-internal-alert-min-height: 4.1875rem;inline-size:var(--calcite-alert-width, 50em)}:host([scale=m]) .icon{padding-inline-start:1rem}:host([scale=m]) .text-container{padding-block:.75rem;padding-inline:1rem .75rem}:host([scale=l]) slot[name=title]::slotted(*),:host([scale=l]) *::slotted([slot=title]){font-size:var(--calcite-font-size-relative-lg);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=l]) slot[name=message]::slotted(*),:host([scale=l]) *::slotted([slot=message]){font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=l]) slot[name=link]::slotted(*),:host([scale=l]) *::slotted([slot=link]){font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=l]) .queue-count{margin-inline:1rem}:host([scale=l]) .container{--calcite-internal-alert-min-height: 5.625rem;inline-size:var(--calcite-alert-width, 60em)}:host([scale=l]) .icon{padding-inline-start:1.25rem}:host([scale=l]) .text-container{padding-block:1rem;padding-inline:1.25rem 1rem}:host([open]) .container--active{border-block-start-width:2px;opacity:1;pointer-events:initial}:host([open]) .container--active[class*=bottom]{transform:translate3d(0,calc(-1 * var(--calcite-alert-offset-size, 2rem)),inherit)}:host([open]) .container--active[class*=top]{transform:translate3d(0,var(--calcite-alert-offset-size, 2rem),inherit)}:host([auto-close])>.queue-count{border-inline-end:0 solid transparent}slot[name=title]::slotted(*),*::slotted([slot=title]){font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-relative-snug);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}slot[name=message]::slotted(*),*::slotted([slot=message]){margin:0;display:inline;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-relative-snug);font-weight:var(--calcite-font-weight-normal);margin-inline-end:.5rem;color:var(--calcite-color-text-2)}slot[name=link]::slotted(*),*::slotted([slot=link]){color:var(--calcite-color-text-link)}slot[name=link]::slotted(:not(calcite-link)){display:inline-flex}:host([kind=brand]) .container{border-block-start-color:var(--calcite-color-brand)}:host([kind=brand]) .container .icon{color:var(--calcite-color-brand)}:host([kind=info]) .container{border-block-start-color:var(--calcite-color-status-info)}:host([kind=info]) .container .icon{color:var(--calcite-color-status-info)}:host([kind=danger]) .container{border-block-start-color:var(--calcite-color-status-danger)}:host([kind=danger]) .container .icon{color:var(--calcite-color-status-danger)}:host([kind=success]) .container{border-block-start-color:var(--calcite-color-status-success)}:host([kind=success]) .container .icon{color:var(--calcite-color-status-success)}:host([kind=warning]) .container{border-block-start-color:var(--calcite-color-status-warning)}:host([kind=warning]) .container .icon{color:var(--calcite-color-status-warning)}:host([auto-close-duration=fast]) .dismiss-progress:after{animation:dismissProgress calc(6s * var(--calcite-internal-duration-factor)) ease-out}:host(:hover[auto-close-duration=fast]) .dismiss-progress:after,:host(:focus[auto-close-duration=fast]) .dismiss-progress:after{animation-play-state:paused}:host([auto-close-duration=medium]) .dismiss-progress:after{animation:dismissProgress calc(10s * var(--calcite-internal-duration-factor)) ease-out}:host(:hover[auto-close-duration=medium]) .dismiss-progress:after,:host(:focus[auto-close-duration=medium]) .dismiss-progress:after{animation-play-state:paused}:host([auto-close-duration=slow]) .dismiss-progress:after{animation:dismissProgress calc(14s * var(--calcite-internal-duration-factor)) ease-out}:host(:hover[auto-close-duration=slow]) .dismiss-progress:after,:host(:focus[auto-close-duration=slow]) .dismiss-progress:after{animation-play-state:paused}.container.focused .dismiss-progress:after{animation-play-state:paused}@keyframes dismissProgress{0%{inline-size:0px;opacity:.75}to{inline-size:100%;opacity:1}}:host([top-layer-disabled]) .container,.container--embedded{z-index:var(--calcite-z-index-toast)}.container--embedded{position:absolute}:host([hidden]){display:none}[hidden]{display:none}:host([calcite-hydrated-hidden]){visibility:hidden!important;pointer-events:none}`;
const manager = new AlertManager();
class Alert extends LitElement {
  constructor() {
    super(...arguments);
    this.initialOpenTime = -1;
    this.isHovered = false;
    this.lastMouseOverBegin = -1;
    this.transitionProp = "opacity";
    this.totalHoverTime = 0;
    this.totalOpenTime = 0;
    this.transitionRef = createRef();
    this.messages = useT9n();
    this.focusSetter = useSetFocus()(this);
    this.topLayer = useTopLayer({
      disabledOverride: () => this.embedded,
      target: this.transitionRef
    })(this);
    this.hasEndActions = false;
    this.isFocused = false;
    this.numberStringFormatter = new NumberStringFormat();
    this.active = false;
    this.autoClose = false;
    this.autoCloseDuration = "medium";
    this.embedded = false;
    this.iconFlipRtl = false;
    this.kind = "brand";
    this.open = false;
    this.openAlertCount = 0;
    this.placement = "bottom";
    this.queue = "last";
    this.scale = "m";
    this.topLayerDisabled = false;
    this.calciteAlertBeforeClose = createEvent({ cancelable: false });
    this.calciteAlertBeforeOpen = createEvent({ cancelable: false });
    this.calciteAlertClose = createEvent({ cancelable: false });
    this.calciteAlertOpen = createEvent({ cancelable: false });
  }
  static {
    this.properties = { hasEndActions: [16, {}, { state: true }], isFocused: [16, {}, { state: true }], numberStringFormatter: [16, {}, { state: true }], active: [5, {}, { type: Boolean }], autoClose: [7, {}, { reflect: true, type: Boolean }], autoCloseDuration: [3, {}, { reflect: true }], embedded: [7, {}, { reflect: true, type: Boolean }], icon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], kind: [3, {}, { reflect: true }], label: 1, messageOverrides: [0, {}, { attribute: false }], numberingSystem: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], openAlertCount: [9, {}, { type: Number }], placement: [3, {}, { reflect: true }], queue: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
  }
  static {
    this.styles = styles;
  }
  async setFocus(options) {
    return this.focusSetter(() => this.el, options);
  }
  connectedCallback() {
    super.connectedCallback();
    const open = this.open;
    if (open) {
      manager.registerElement(this.el);
    }
    this.numberStringFormatter.numberFormatOptions = {
      locale: this.messages._lang,
      numberingSystem: this.numberingSystem,
      signDisplay: "always"
    };
  }
  willUpdate(changes) {
    if (changes.has("open") && (this.hasUpdated || this.open !== false)) {
      this.openHandler();
    }
    if (changes.has("active") && (this.hasUpdated || this.active !== false)) {
      this.handleActiveChange();
    }
    if (changes.has("autoCloseDuration") && (this.hasUpdated || this.autoCloseDuration !== "medium")) {
      this.updateDuration();
    }
    if (changes.has("queue") && (this.hasUpdated || this.queue !== "last")) {
      this.handleQueueChange();
    }
    if (changes.has("numberingSystem")) {
      this.numberingSystemChange();
    }
    if (changes.has("messages")) {
      this.effectiveLocaleChange();
    }
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    manager.unregisterElement(this.el);
    this.clearAutoCloseTimeout();
    this.embedded = false;
  }
  handleActiveChange() {
    toggleOpenClose(this);
    this.clearAutoCloseTimeout();
    if (this.active && this.autoClose && !this.autoCloseTimeoutId) {
      this.initialOpenTime = Date.now();
      this.autoCloseTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoCloseDuration]);
    }
  }
  openHandler() {
    if (this.open) {
      manager.registerElement(this.el);
    } else {
      manager.unregisterElement(this.el);
    }
  }
  updateDuration() {
    if (this.autoClose && this.autoCloseTimeoutId) {
      this.clearAutoCloseTimeout();
      this.autoCloseTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoCloseDuration]);
    }
  }
  handleQueueChange() {
    if (this.open) {
      manager.unregisterElement(this.el);
      manager.registerElement(this.el);
    }
  }
  handleKeyBoardFocus() {
    this.isFocused = true;
    this.handleFocus();
  }
  handleKeyBoardBlur() {
    this.isFocused = false;
    if (!this.isHovered) {
      this.handleBlur();
    }
  }
  effectiveLocaleChange() {
    this.numberStringFormatter.numberFormatOptions = {
      locale: this.messages._lang,
      numberingSystem: this.numberingSystem,
      signDisplay: "always"
    };
  }
  numberingSystemChange() {
    this.numberStringFormatter.numberFormatOptions = {
      locale: this.messages._lang,
      numberingSystem: this.numberingSystem,
      signDisplay: "always"
    };
  }
  clearAutoCloseTimeout() {
    window.clearTimeout(this.autoCloseTimeoutId);
    this.autoCloseTimeoutId = void 0;
  }
  closeAlert() {
    this.open = false;
    this.clearAutoCloseTimeout();
  }
  onBeforeOpen() {
    this.calciteAlertBeforeOpen.emit();
    this.topLayer.show();
  }
  onOpen() {
    this.calciteAlertOpen.emit();
  }
  onBeforeClose() {
    this.calciteAlertBeforeClose.emit();
  }
  onClose() {
    this.calciteAlertClose.emit();
    this.topLayer.hide();
  }
  actionsEndSlotChangeHandler(event) {
    this.hasEndActions = slotChangeHasAssignedElement(event);
  }
  handleMouseOver() {
    this.isHovered = true;
    this.handleFocus();
  }
  handleMouseLeave() {
    this.isHovered = false;
    if (!this.isFocused) {
      this.handleBlur();
    }
  }
  handleFocus() {
    this.clearAutoCloseTimeout();
    this.totalOpenTime = Date.now() - this.initialOpenTime;
    this.lastMouseOverBegin = Date.now();
  }
  handleBlur() {
    const hoverDuration = Date.now() - this.lastMouseOverBegin;
    const timeRemaining = DURATIONS[this.autoCloseDuration] - this.totalOpenTime + this.totalHoverTime;
    this.totalHoverTime = this.totalHoverTime ? hoverDuration + this.totalHoverTime : hoverDuration;
    this.autoCloseTimeoutId = window.setTimeout(() => this.closeAlert(), timeRemaining);
  }
  render() {
    const { open, autoClose, label, placement, active, openAlertCount } = this;
    const role = autoClose ? "alert" : "alertdialog";
    const hidden = !open;
    const effectiveIcon = setRequestedIcon(this.kind === "brand" ? KindIcons : KindIconsFilled, this.icon, this.kind);
    const hasQueuedAlerts = openAlertCount > 1;
    this.el.inert = hidden;
    this.el.ariaLabel = label;
    this.el.toggleAttribute("calcite-hydrated-hidden", hidden);
    this.el.role = role;
    return html`<div class=${safeClassMap({
      [CSS.container]: true,
      [CSS.containerActive]: active,
      [`${CSS.container}--${placement}`]: true,
      [CSS.containerEmbedded]: this.embedded,
      [CSS.focused]: this.isFocused
    })} @pointerenter=${this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : void 0} @pointerleave=${this.autoClose ? this.handleMouseLeave : void 0} .popover=${!this.embedded ? "manual" : void 0} ${ref(this.transitionRef)}>${effectiveIcon && this.renderIcon(effectiveIcon) || ""}<div class=${safeClassMap(CSS.textContainer)} @focusin=${this.autoClose && this.autoCloseTimeoutId ? this.handleKeyBoardFocus : void 0} @focusout=${this.autoClose ? this.handleKeyBoardBlur : void 0}><slot name=${SLOTS.title}></slot><slot name=${SLOTS.message}></slot><slot name=${SLOTS.link}></slot></div>${this.renderActionsEnd()}${hasQueuedAlerts ? this.renderQueueCount() : void 0}${this.renderCloseButton()}${open && active && autoClose ? html`<div class=${safeClassMap(CSS.dismissProgress)}></div>` : void 0}</div>`;
  }
  renderCloseButton() {
    return html`<calcite-action class=${safeClassMap(CSS.close)} icon=x .label=${this.messages.close} @click=${this.closeAlert} @focusin=${this.autoClose ? this.handleKeyBoardFocus : void 0} @focusout=${this.autoClose ? this.handleKeyBoardBlur : void 0} .scale=${this.scale} .text=${this.messages.close}></calcite-action>`;
  }
  renderQueueCount() {
    const { openAlertCount } = this;
    const queueNumber = openAlertCount > 2 ? openAlertCount - 1 : 1;
    const queueText = this.numberStringFormatter.numberFormatter.format(queueNumber);
    return keyed("queue-count", html`<div class=${safeClassMap({
      [CSS.queueCount]: true,
      [CSS.queueCountActive]: openAlertCount > 1
    })}><calcite-chip .label=${queueText} .scale=${this.scale} .value=${queueText}>${queueText}</calcite-chip></div>`);
  }
  renderActionsEnd() {
    return html`<div class=${safeClassMap(CSS.actionsEnd)}><slot name=${SLOTS.actionsEnd} @slotchange=${this.actionsEndSlotChangeHandler}></slot></div>`;
  }
  renderIcon(icon) {
    return html`<div class=${safeClassMap(CSS.icon)}><calcite-icon .flipRtl=${this.iconFlipRtl} .icon=${icon} .scale=${getIconScale(this.scale)}></calcite-icon></div>`;
  }
}
customElement("calcite-alert", Alert);
export {
  Alert
};
