{"version":3,"names":["DURATIONS","slow","medium","fast","SLOTS","actionsEnd","title","message","link","CSS","close","container","containerBottom","containerBottomEnd","containerBottomStart","containerActive","containerTop","containerTopEnd","containerTopStart","content","contentContainer","dismissProgress","footer","icon","containerEmbedded","queueCount","queueCountActive","textContainer","focused","alertQueueTimeoutMs","AlertManager","constructor","this","registeredElements","queueTimeoutId","registerElement","alert","includes","queue","unshift","splice","push","updateAlerts","unregisterElement","index","indexOf","active","window","clearTimeout","forEach","openAlertCount","length","setTimeout","alertCss","CalciteAlertStyle0","manager","Alert","handleKeyBoardFocus","isFocused","handleFocus","handleKeyBoardBlur","isHovered","handleBlur","autoCloseTimeoutId","totalOpenTime","totalHoverTime","openTransitionProp","setTransitionEl","el","transitionEl","closeAlert","open","clearAutoCloseTimeout","actionsEndSlotChangeHandler","event","hasEndActions","slotChangeHasAssignedElement","handleMouseOver","handleMouseLeave","Date","now","initialOpenTime","lastMouseOverBegin","hoverDuration","timeRemaining","autoCloseDuration","NumberStringFormat","handleActiveChange","autoClose","openHandler","onToggleOpenCloseComponent","updateDuration","onMessagesChange","handleQueueChange","connectedCallback","connectLocalized","connectMessages","numberStringFormatter","numberFormatOptions","locale","effectiveLocale","numberingSystem","signDisplay","componentWillLoad","setUpLoadableComponent","setUpMessages","componentDidLoad","setComponentLoaded","disconnectedCallback","disconnectLocalized","disconnectMessages","embedded","render","label","placement","role","hidden","effectiveIcon","setRequestedIcon","KindIcons","kind","hasQueuedAlerts","h","Host","key","toAriaBoolean","class","onPointerEnter","onPointerLeave","ref","renderIcon","onFocusin","onFocusout","name","renderActionsEnd","renderQueueCount","renderCloseButton","messages","onClick","closeButton","type","scale","getIconScale","queueNumber","queueText","numberFormatter","format","value","onSlotchange","flipRtl","iconFlipRtl","setFocus","componentFocusable","alertLinkEl","getSlotted","selector","focus","effectiveLocaleChange","updateMessages","numberingSystemChange","onBeforeOpen","calciteAlertBeforeOpen","emit","onOpen","calciteAlertOpen","onBeforeClose","calciteAlertBeforeClose","onClose","calciteAlertClose"],"sources":["src/components/alert/resources.ts","src/components/alert/AlertManager.ts","src/components/alert/alert.scss?tag=calcite-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["export const DURATIONS = {\n  slow: 14000,\n  medium: 10000,\n  fast: 6000,\n};\n\nexport const SLOTS = {\n  actionsEnd: \"actions-end\",\n  title: \"title\",\n  message: \"message\",\n  link: \"link\",\n};\n\nexport const CSS = {\n  actionsEnd: \"actions-end\",\n  close: \"close\",\n  container: \"container\",\n  containerBottom: \"container--bottom\",\n  containerBottomEnd: \"container--bottom-end\",\n  containerBottomStart: \"container--bottom-start\",\n  containerActive: \"container--active\",\n  containerTop: \"container--top\",\n  containerTopEnd: \"container--top-end\",\n  containerTopStart: \"container--top-start\",\n  content: \"content\",\n  contentContainer: \"content-container\",\n  dismissProgress: \"dismiss-progress\",\n  footer: \"footer\",\n  icon: \"icon\",\n  containerEmbedded: \"container--embedded\",\n  queueCount: \"queue-count\",\n  queueCountActive: \"queue-count--active\",\n  textContainer: \"text-container\",\n  focused: \"focused\",\n};\n","export const alertQueueTimeoutMs = 300;\n\nexport default class AlertManager {\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  private registeredElements: HTMLCalciteAlertElement[] = [];\n\n  private queueTimeoutId: number = null;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  registerElement(alert: HTMLCalciteAlertElement): void {\n    const { registeredElements } = this;\n\n    if (!registeredElements.includes(alert)) {\n      switch (alert.queue) {\n        case \"immediate\":\n          registeredElements.unshift(alert);\n          break;\n        case \"next\":\n          registeredElements.splice(1, 0, alert);\n          break;\n        case \"last\":\n          registeredElements.push(alert);\n          break;\n      }\n\n      this.updateAlerts();\n    }\n  }\n\n  unregisterElement(alert: HTMLCalciteAlertElement): void {\n    const { registeredElements } = this;\n\n    const index = registeredElements.indexOf(alert);\n\n    if (index !== -1) {\n      registeredElements.splice(index, 1);\n    }\n\n    alert.active = false;\n    this.updateAlerts();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private updateAlerts(): void {\n    window.clearTimeout(this.queueTimeoutId);\n    this.queueTimeoutId = null;\n\n    this.registeredElements.forEach((alert, index) => {\n      alert.openAlertCount = this.registeredElements.length;\n\n      if (index === 0) {\n        this.queueTimeoutId = window.setTimeout(() => (alert.active = true), alertQueueTimeoutMs);\n      } else {\n        alert.active = false;\n      }\n    });\n  }\n}\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-alert-width: Specifies the width of the component.\n * @prop --calcite-alert-background-color: Specifies the component's background color.\n * @prop --calcite-alert-corner-radius: Specifies the component's corner radius.\n * @prop --calcite-alert-shadow: Specifies the component's shadow.\n */\n\n$border-style: 1px solid var(--calcite-color-border-3);\n\n:host {\n  --calcite-internal-alert-edge-distance: theme(\"spacing.8\");\n  @apply block;\n\n  inline-size: var(--calcite-alert-width);\n}\n\n.container {\n  @apply box-border\n  fixed\n  flex\n  items-center\n  justify-center\n  min-w-min\n  mx-auto\n  my-0\n  opacity-0\n  pointer-events-none\n  text-start\n  w-full\n  z-toast;\n\n  --tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);\n  --tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);\n  box-shadow: var(\n    --calcite-alert-shadow,\n    (var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow))\n  );\n  background-color: var(--calcite-alert-background-color, var(--calcite-color-foreground-1));\n  border-radius: var(--calcite-alert-corner-radius, var(--calcite-border-radius));\n  border-block-start: 0 solid transparent;\n  border-inline: $border-style;\n  border-block-end: $border-style;\n  max-inline-size: calc(100% - (var(--calcite-internal-alert-edge-distance) * 2));\n  transition:\n    opacity var(--calcite-internal-animation-timing-slow) $easing-function,\n    all var(--calcite-animation-timing) ease-in-out;\n\n  &--bottom,\n  &--top {\n    inset-inline-end: 0;\n    inset-inline-start: 0;\n  }\n  &[class*=\"bottom\"] {\n    transform: translate3d(0, var(--calcite-internal-alert-edge-distance), 0);\n    inset-block-end: var(--calcite-internal-alert-edge-distance);\n  }\n  &[class*=\"top\"] {\n    transform: translate3d(0, calc(-1 * var(--calcite-internal-alert-edge-distance)), 0);\n    inset-block-start: var(--calcite-internal-alert-edge-distance);\n  }\n  &[class*=\"start\"] {\n    inset-inline-start: var(--calcite-internal-alert-edge-distance);\n    inset-inline-end: auto;\n  }\n  &[class*=\"end\"] {\n    inset-inline-end: var(--calcite-internal-alert-edge-distance);\n    inset-inline-start: auto;\n  }\n}\n\n.icon {\n  @apply flex flex-col items-center justify-center p-0;\n  margin-block: auto;\n  margin-inline-end: auto;\n}\n\n.close {\n  @apply bg-transparent border-none cursor-pointer flex items-center justify-end outline-none self-stretch text-color-3;\n  -webkit-appearance: none;\n  border-start-end-radius: var(--calcite-alert-corner-radius, var(--calcite-border-radius));\n  border-end-end-radius: var(--calcite-alert-corner-radius, var(--calcite-border-radius));\n\n  @apply focus-base;\n  &:focus {\n    @apply focus-inset;\n  }\n\n  &:hover,\n  &:focus {\n    @apply text-color-1;\n    background-color: var(--calcite-color-foreground-2);\n  }\n\n  &:active {\n    background-color: var(--calcite-color-foreground-3);\n  }\n}\n\n.queue-count {\n  @apply cursor-default\n  flex\n  font-medium\n  invisible\n  items-center\n  justify-around\n  min-w-min\n  opacity-0\n  overflow-hidden\n  self-stretch\n  text-center\n  text-color-2\n  transition-default;\n  border-inline: 0 solid transparent;\n  border-start-end-radius: 0;\n\n  &--active {\n    @apply visible opacity-100;\n  }\n}\n\n.dismiss-progress {\n  @apply absolute\n  block\n  w-full\n  overflow-hidden;\n  inset-inline: 0;\n  inset-block-start: -2px;\n  block-size: 2px;\n  border-radius: var(--calcite-border-radius) var(--calcite-border-radius) 0 0;\n  &::after {\n    @apply absolute\n    top-0\n    block;\n    block-size: 2px;\n    content: \"\";\n    background-color: var(--calcite-color-transparent-tint);\n    inset-inline-end: 0;\n  }\n}\n\n.actions-end {\n  @apply flex self-stretch;\n}\n\n.text-container {\n  @apply box-border flex flex-auto min-w-0 flex-col break-words;\n}\n\n.footer {\n  @apply flex justify-end pt-px relative self-stretch w-auto;\n  block-size: inherit;\n}\n\n// scale variables\n:host([scale=\"s\"]) {\n  @include slotted(\"title\", \"*\") {\n    @apply text-n1-wrap;\n  }\n  @include slotted(\"message\", \"*\") {\n    @apply text-n2-wrap;\n  }\n  @include slotted(\"link\", \"*\") {\n    @apply text-n2-wrap;\n  }\n  .queue-count {\n    @apply mx-2;\n  }\n  .container {\n    --calcite-internal-alert-min-height: 3.5rem;\n    inline-size: var(--calcite-alert-width, 40em);\n  }\n  .close {\n    padding: theme(\"spacing.3\");\n  }\n  .icon {\n    padding-inline-start: theme(\"spacing.3\");\n  }\n  .text-container {\n    padding-block: theme(\"spacing.2\");\n    padding-inline: theme(\"spacing.3\") theme(\"spacing.2\");\n  }\n}\n\n:host([scale=\"m\"]) {\n  @include slotted(\"title\", \"*\") {\n    @apply text-0-wrap;\n  }\n  @include slotted(\"message\", \"*\") {\n    @apply text-n1-wrap;\n  }\n  @include slotted(\"link\", \"*\") {\n    @apply text-n1-wrap;\n  }\n  .queue-count {\n    @apply mx-3;\n  }\n  .container {\n    --calcite-internal-alert-min-height: 4.1875rem;\n    inline-size: var(--calcite-alert-width, 50em);\n  }\n  .close {\n    padding: theme(\"spacing.4\");\n  }\n  .icon {\n    padding-inline-start: theme(\"spacing.4\");\n  }\n  .text-container {\n    padding-block: theme(\"spacing.3\");\n    padding-inline: theme(\"spacing.4\") theme(\"spacing.3\");\n  }\n}\n\n:host([scale=\"l\"]) {\n  @include slotted(\"title\", \"*\") {\n    @apply text-1-wrap mb-1;\n  }\n  @include slotted(\"message\", \"*\") {\n    @apply text-0-wrap;\n  }\n  @include slotted(\"link\", \"*\") {\n    @apply text-0-wrap;\n  }\n  .queue-count {\n    @apply mx-4;\n  }\n  .container {\n    --calcite-internal-alert-min-height: 5.625rem;\n    inline-size: var(--calcite-alert-width, 60em);\n  }\n  .close {\n    padding: theme(\"spacing.5\");\n  }\n  .icon {\n    padding-inline-start: theme(\"spacing.5\");\n  }\n  .text-container {\n    padding-block: theme(\"spacing.4\");\n    padding-inline: theme(\"spacing.5\") theme(\"spacing.4\");\n  }\n}\n\n:host([open]) {\n  .container--active {\n    @apply border-t-2 opacity-100;\n    pointer-events: initial;\n    &[class*=\"bottom\"] {\n      transform: translate3d(0, calc(-1 * var(--calcite-internal-alert-edge-distance)), inherit);\n    }\n    &[class*=\"top\"] {\n      transform: translate3d(0, var(--calcite-internal-alert-edge-distance), inherit);\n    }\n  }\n}\n\n:host([auto-close]) > .queue-count {\n  border-inline-end: 0 solid transparent;\n}\n\n@include slotted(\"title\", \"*\") {\n  @apply text-0-wrap\n    font-medium;\n\n  color: var(--calcite-color-text-1);\n}\n\n@include slotted(\"message\", \"*\") {\n  @apply text-n1-wrap\n    m-0\n    inline\n    font-normal;\n  margin-inline-end: theme(\"margin.2\");\n  color: var(--calcite-color-text-2);\n}\n\n@include slotted(\"link\", \"*\") {\n  @apply text-color-link inline-flex;\n}\n\n$alert-kinds:\n  \"brand\" var(--calcite-color-brand),\n  \"info\" var(--calcite-color-status-info),\n  \"danger\" var(--calcite-color-status-danger),\n  \"success\" var(--calcite-color-status-success),\n  \"warning\" var(--calcite-color-status-warning);\n\n@each $alert-kind in $alert-kinds {\n  $name: nth($alert-kind, 1);\n  $kind: nth($alert-kind, 2);\n\n  :host([kind=\"#{$name}\"]) {\n    .container {\n      border-block-start-color: $kind;\n\n      & .icon {\n        color: $kind;\n      }\n    }\n  }\n}\n\n$alert-durations:\n  \"fast\" 6000ms,\n  \"medium\" 10000ms,\n  \"slow\" 14000ms;\n\n@each $alert-duration in $alert-durations {\n  $name: nth($alert-duration, 1);\n  $duration: nth($alert-duration, 2);\n\n  :host([auto-close-duration=\"#{$name}\"]) .dismiss-progress:after {\n    animation: dismissProgress $duration ease-out;\n  }\n  :host(:hover[auto-close-duration=\"#{$name}\"]) .dismiss-progress:after,\n  :host(:focus[auto-close-duration=\"#{$name}\"]) .dismiss-progress:after {\n    animation-play-state: paused;\n  }\n}\n\n.container.focused .dismiss-progress::after {\n  animation-play-state: paused;\n}\n\n@keyframes dismissProgress {\n  0% {\n    @apply w-0 opacity-75;\n  }\n  100% {\n    @apply w-full opacity-100;\n  }\n}\n\n/**\n * Conditional styles for when Alert is slotted in Shell\n */\n.container--embedded {\n  @apply absolute;\n}\n\n@include base-component();\n@include calcite-hydrated-hidden();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  getSlotted,\n  setRequestedIcon,\n  slotChangeHasAssignedElement,\n  toAriaBoolean,\n} from \"../../utils/dom\";\nimport { MenuPlacement } from \"../../utils/floating-ui\";\nimport { getIconScale } from \"../../utils/component\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport {\n  connectLocalized,\n  disconnectLocalized,\n  NumberingSystem,\n  NumberStringFormat,\n} from \"../../utils/locale\";\nimport { onToggleOpenCloseComponent, OpenCloseComponent } from \"../../utils/openCloseComponent\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Kind, Scale } from \"../interfaces\";\nimport { KindIcons } from \"../resources\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { AlertMessages } from \"./assets/alert/t9n\";\nimport { AlertDuration, AlertQueue } from \"./interfaces\";\nimport { CSS, DURATIONS, SLOTS } from \"./resources\";\nimport AlertManager from \"./AlertManager\";\n\nconst manager = new AlertManager();\n\n/**\n * Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned\n * at the bottom of the page. Multiple opened alerts will be added to a queue, allowing users to dismiss them in the order they are provided.\n */\n\n/**\n * @slot title - A slot for adding a title to the component.\n * @slot message - A slot for adding main text to the component.\n * @slot link - A slot for adding a `calcite-action` to take from the component such as: \"undo\", \"try again\", \"link to page\", etc.\n * @slot actions-end - A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or fewer actions.\n */\n\n@Component({\n  tag: \"calcite-alert\",\n  styleUrl: \"alert.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Alert implements OpenCloseComponent, LoadableComponent, T9nComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //---------------------------------------------------------------------------\n\n  /**\n   * This internal property, managed by the AlertManager, is used\n   * to inform the component if it is the active open Alert.\n   *\n   * @internal\n   */\n  @Prop() active = false;\n\n  @Watch(\"active\")\n  handleActiveChange(): void {\n    this.clearAutoCloseTimeout();\n    if (this.active && this.autoClose && !this.autoCloseTimeoutId) {\n      this.initialOpenTime = Date.now();\n      this.autoCloseTimeoutId = window.setTimeout(\n        () => this.closeAlert(),\n        DURATIONS[this.autoCloseDuration],\n      );\n    }\n  }\n\n  /**\n   * This internal property, managed by the AlertManager, is used\n   * to inform the component of how many alerts are currently open.\n   *\n   * @internal\n   */\n  @Prop() openAlertCount = 0;\n\n  /** When `true`, displays and positions the component. */\n  @Prop({ reflect: true, mutable: true }) open = false;\n\n  @Watch(\"open\")\n  openHandler(): void {\n    onToggleOpenCloseComponent(this);\n    if (this.open) {\n      manager.registerElement(this.el);\n    } else {\n      manager.unregisterElement(this.el);\n    }\n  }\n\n  /** When `true`, the component closes automatically. Recommended for passive, non-blocking alerts. */\n  @Prop({ reflect: true }) autoClose = false;\n\n  /** Specifies the duration before the component automatically closes - only use with `autoClose`. */\n  @Prop({ reflect: true }) autoCloseDuration: AlertDuration = \"medium\";\n\n  @Watch(\"autoCloseDuration\")\n  updateDuration(): void {\n    if (this.autoClose && this.autoCloseTimeoutId) {\n      this.clearAutoCloseTimeout();\n      this.autoCloseTimeoutId = window.setTimeout(\n        () => this.closeAlert(),\n        DURATIONS[this.autoCloseDuration],\n      );\n    }\n  }\n\n  /**\n   * This internal property, managed by a containing calcite-shell, is used\n   * to inform the component if special configuration or styles are needed\n   *\n   * @internal\n   */\n  @Prop({ mutable: true }) embedded = false;\n\n  /** Specifies the kind of the component, which will apply to top border and icon. */\n  @Prop({ reflect: true }) kind: Extract<\n    \"brand\" | \"danger\" | \"info\" | \"success\" | \"warning\",\n    Kind\n  > = \"brand\";\n\n  /**\n   * When `true`, shows a default recommended icon. Alternatively,\n   * pass a Calcite UI Icon name to display a specific icon.\n   */\n  @Prop({ reflect: true }) icon: IconNameOrString | boolean;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /** Specifies an accessible name for the component. */\n  @Prop() label!: string;\n\n  /**\n   * Specifies the Unicode numeral system used by the component for localization.\n   */\n  @Prop({ reflect: true }) numberingSystem: NumberingSystem;\n\n  /** Specifies the placement of the component. */\n  @Prop({ reflect: true }) placement: MenuPlacement = \"bottom\";\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: AlertMessages;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<AlertMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /** Specifies the ordering priority of the component when opened. */\n  @Prop({ reflect: true }) queue: AlertQueue = \"last\";\n\n  @Watch(\"queue\")\n  handleQueueChange(): void {\n    if (this.open) {\n      manager.unregisterElement(this.el);\n      manager.registerElement(this.el);\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n\n    const open = this.open;\n\n    if (open) {\n      manager.registerElement(this.el);\n    }\n\n    this.numberStringFormatter.numberFormatOptions = {\n      locale: this.effectiveLocale,\n      numberingSystem: this.numberingSystem,\n      signDisplay: \"always\",\n    };\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n    if (this.open) {\n      onToggleOpenCloseComponent(this);\n    }\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    manager.unregisterElement(this.el);\n    this.clearAutoCloseTimeout();\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.embedded = false;\n  }\n\n  render(): VNode {\n    const { open, autoClose, label, placement, active, openAlertCount } = this;\n    const role = autoClose ? \"alert\" : \"alertdialog\";\n    const hidden = !open;\n    const effectiveIcon = setRequestedIcon(KindIcons, this.icon, this.kind);\n    const hasQueuedAlerts = openAlertCount > 1;\n\n    return (\n      <Host\n        aria-hidden={toAriaBoolean(hidden)}\n        aria-label={label}\n        calcite-hydrated-hidden={hidden}\n        role={role}\n      >\n        <div\n          class={{\n            [CSS.container]: true,\n            [CSS.containerActive]: active,\n            [`${CSS.container}--${placement}`]: true,\n            [CSS.containerEmbedded]: this.embedded,\n            [CSS.focused]: this.isFocused,\n          }}\n          onPointerEnter={this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null}\n          onPointerLeave={this.autoClose ? this.handleMouseLeave : null}\n          ref={this.setTransitionEl}\n        >\n          {effectiveIcon && this.renderIcon(effectiveIcon)}\n          <div\n            class={CSS.textContainer}\n            onFocusin={this.autoClose && this.autoCloseTimeoutId ? this.handleKeyBoardFocus : null}\n            onFocusout={this.autoClose ? this.handleKeyBoardBlur : null}\n          >\n            <slot name={SLOTS.title} />\n            <slot name={SLOTS.message} />\n            <slot name={SLOTS.link} />\n          </div>\n          {this.renderActionsEnd()}\n          {hasQueuedAlerts ? this.renderQueueCount() : null}\n          {this.renderCloseButton()}\n          {open && active && autoClose ? <div class={CSS.dismissProgress} /> : null}\n        </div>\n      </Host>\n    );\n  }\n\n  private handleKeyBoardFocus = (): void => {\n    this.isFocused = true;\n    this.handleFocus();\n  };\n\n  private handleKeyBoardBlur = (): void => {\n    this.isFocused = false;\n    if (!this.isHovered) {\n      this.handleBlur();\n    }\n  };\n\n  private renderCloseButton(): VNode {\n    return (\n      <button\n        aria-label={this.messages.close}\n        class={CSS.close}\n        key=\"close\"\n        onClick={this.closeAlert}\n        onFocusin={this.autoClose ? this.handleKeyBoardFocus : null}\n        onFocusout={this.autoClose ? this.handleKeyBoardBlur : null}\n        ref={(el) => (this.closeButton = el)}\n        type=\"button\"\n      >\n        <calcite-icon icon=\"x\" scale={getIconScale(this.scale)} />\n      </button>\n    );\n  }\n\n  private renderQueueCount(): VNode {\n    const { openAlertCount } = this;\n    const queueNumber = openAlertCount > 2 ? openAlertCount - 1 : 1;\n    const queueText = this.numberStringFormatter.numberFormatter.format(queueNumber);\n\n    return (\n      <div\n        class={{\n          [CSS.queueCount]: true,\n          [CSS.queueCountActive]: openAlertCount > 1,\n        }}\n        key=\"queue-count\"\n      >\n        <calcite-chip scale={this.scale} value={queueText}>\n          {queueText}\n        </calcite-chip>\n      </div>\n    );\n  }\n\n  private renderActionsEnd(): VNode {\n    return (\n      <div class={CSS.actionsEnd}>\n        <slot name={SLOTS.actionsEnd} onSlotchange={this.actionsEndSlotChangeHandler} />\n      </div>\n    );\n  }\n\n  private renderIcon(icon: IconNameOrString): VNode {\n    return (\n      <div class={CSS.icon}>\n        <calcite-icon flipRtl={this.iconFlipRtl} icon={icon} scale={getIconScale(this.scale)} />\n      </div>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /** Fires when the component is requested to be closed and before the closing transition begins. */\n  @Event({ cancelable: false }) calciteAlertBeforeClose: EventEmitter<void>;\n\n  /** Fires when the component is closed and animation is complete. */\n  @Event({ cancelable: false }) calciteAlertClose: EventEmitter<void>;\n\n  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */\n  @Event({ cancelable: false }) calciteAlertBeforeOpen: EventEmitter<void>;\n\n  /** Fires when the component is open and animation is complete. */\n  @Event({ cancelable: false }) calciteAlertOpen: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component's \"close\" button, the first focusable item.\n   *\n    @returns {Promise<void>}\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    const alertLinkEl: HTMLCalciteLinkElement = getSlotted(this.el, { selector: \"calcite-link\" });\n\n    if (!this.closeButton && !alertLinkEl) {\n      return;\n    } else if (alertLinkEl) {\n      return alertLinkEl.setFocus();\n    } else if (this.closeButton) {\n      this.closeButton.focus();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteAlertElement;\n\n  @State() defaultMessages: AlertMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n    this.numberStringFormatter.numberFormatOptions = {\n      locale: this.effectiveLocale,\n      numberingSystem: this.numberingSystem,\n      signDisplay: \"always\",\n    };\n  }\n\n  @State() numberStringFormatter = new NumberStringFormat();\n\n  @Watch(\"numberingSystem\")\n  numberingSystemChange(): void {\n    this.numberStringFormatter.numberFormatOptions = {\n      locale: this.effectiveLocale,\n      numberingSystem: this.numberingSystem,\n      signDisplay: \"always\",\n    };\n  }\n\n  @State() hasEndActions = false;\n\n  @State() isFocused = false;\n\n  private autoCloseTimeoutId: number = null;\n\n  private closeButton: HTMLButtonElement;\n\n  private initialOpenTime: number;\n\n  private lastMouseOverBegin: number;\n\n  private totalOpenTime = 0;\n\n  private totalHoverTime = 0;\n\n  private isHovered: boolean;\n\n  openTransitionProp = \"opacity\";\n\n  transitionEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private clearAutoCloseTimeout(): void {\n    window.clearTimeout(this.autoCloseTimeoutId);\n    this.autoCloseTimeoutId = null;\n  }\n\n  private setTransitionEl = (el: HTMLDivElement): void => {\n    this.transitionEl = el;\n  };\n\n  /** close and emit calciteInternalAlertSync event with the updated queue payload */\n  private closeAlert = (): void => {\n    this.open = false;\n    this.clearAutoCloseTimeout();\n  };\n\n  onBeforeOpen(): void {\n    this.calciteAlertBeforeOpen.emit();\n  }\n\n  onOpen(): void {\n    this.calciteAlertOpen.emit();\n  }\n\n  onBeforeClose(): void {\n    this.calciteAlertBeforeClose.emit();\n  }\n\n  onClose(): void {\n    this.calciteAlertClose.emit();\n  }\n\n  private actionsEndSlotChangeHandler = (event: Event): void => {\n    this.hasEndActions = slotChangeHasAssignedElement(event);\n  };\n\n  private handleMouseOver = (): void => {\n    this.isHovered = true;\n    this.handleFocus();\n  };\n\n  private handleMouseLeave = (): void => {\n    this.isHovered = false;\n    if (!this.isFocused) {\n      this.handleBlur();\n    }\n  };\n\n  private handleFocus = (): void => {\n    this.clearAutoCloseTimeout();\n    this.totalOpenTime = Date.now() - this.initialOpenTime;\n    this.lastMouseOverBegin = Date.now();\n  };\n\n  private handleBlur = (): void => {\n    const hoverDuration = Date.now() - this.lastMouseOverBegin;\n    const timeRemaining =\n      DURATIONS[this.autoCloseDuration] - this.totalOpenTime + this.totalHoverTime;\n    this.totalHoverTime = this.totalHoverTime ? hoverDuration + this.totalHoverTime : hoverDuration;\n    this.autoCloseTimeoutId = window.setTimeout(() => this.closeAlert(), timeRemaining);\n  };\n}\n"],"mappings":"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","ignoreList":[]}