@esri/calcite-components 2.6.0-next.1 → 2.6.0-next.3

package/dist/calcite/p-b832e405.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CSS","container","containerContent","hasProgress","hide","primary","secondary","tertiary","SLOTS","logo","user","progress","navigationAction","contentStart","contentEnd","contentCenter","navSecondary","navTertiary","ICONS","hamburger","navigationCss","CalciteNavigation","this","actionClickHandler","calciteNavigationActionSelect","emit","handleUserSlotChange","event","isPrimaryLevel","userSlotHasElements","slotChangeHasAssignedElement","handleLogoSlotChange","logoSlotHasElements","handleContentStartSlotChange","primaryContentStartSlotHasElements","handleContentEndSlotChange","primaryContentEndSlotHasElements","handleContentCenterSlotChange","primaryContentCenterSlotHasElements","handleSecondarySlotChange","secondarySlotHasElements","handleTertiarySlotChange","tertiarySlotHasElements","handleMenuActionSlotChange","navigationActionSlotHasElements","handleProgressSlotChange","progressSlotHasElement","setFocus","componentFocusable","navigationActionEl","componentWillLoad","setUpLoadableComponent","componentDidLoad","setComponentLoaded","el","slot","renderMenuAction","h","name","onSlotchange","icon","onClick","text","label","ref","render","primaryLevelHasElements","slotName","Host","class","Fragment","heading","description","anchor","image","standalone","navigationLogoCss","CalciteNavigationLogo","href","focus","renderIcon","flipRtl","iconFlipRtl","scale","thumbnail","rel","target","alt","src","key","textContainer","fullName","username","button","navigationUserCss","CalciteNavigationUser","userId","textDisabled"],"sources":["src/components/navigation/resources.ts","src/components/navigation/navigation.scss?tag=calcite-navigation&encapsulation=shadow","src/components/navigation/navigation.tsx","src/components/navigation-logo/resources.ts","src/components/navigation-logo/navigation-logo.scss?tag=calcite-navigation-logo&encapsulation=shadow","src/components/navigation-logo/navigation-logo.tsx","src/components/navigation-user/resources.ts","src/components/navigation-user/navigation-user.scss?tag=calcite-navigation-user&encapsulation=shadow","src/components/navigation-user/navigation-user.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  containerContent: \"container-content\",\n  hasProgress: \"progress-bar\",\n  hide: \"hide\",\n  primary: \"primary\",\n  secondary: \"secondary\",\n  tertiary: \"tertiary\",\n};\n\nexport const SLOTS = {\n  logo: \"logo\",\n  user: \"user\",\n  progress: \"progress\",\n  navigationAction: \"navigation-action\",\n  contentStart: \"content-start\",\n  contentEnd: \"content-end\",\n  contentCenter: \"content-center\",\n  navSecondary: \"navigation-secondary\",\n  navTertiary: \"navigation-tertiary\",\n};\n\nexport const ICONS = {\n  hamburger: \"hamburger\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-navigation-width: Specifies the width of the component's content area.\n * @prop --calcite-navigation-background: Specifies the background color of the component.\n * @prop --calcite-navigation-border-color: Specifies the border color of the component.\n */\n\n@include base-component();\n\n.container {\n  @apply flex\n  flex-col\n  mx-auto\n  w-full;\n  margin-block: 0;\n  margin-inline: auto;\n  background-color: var(--calcite-navigation-background, var(--calcite-color-foreground-1));\n  &.primary,\n  &.secondary,\n  &.tertiary {\n    border-block-end: 1px solid;\n    border-block-end-color: var(--calcite-navigation-border-color, var(--calcite-color-border-3));\n  }\n}\n\n.user,\n.logo {\n  @apply flex;\n}\n\n.hide {\n  @apply hidden;\n}\n\n.primary {\n  @apply h-16;\n}\n\n.secondary {\n  @apply h-12;\n}\n\n.tertiary {\n  @apply h-12;\n}\n\n.container-content {\n  @apply flex\n  w-full\n  h-full\n  mx-auto;\n  margin-block: 0;\n  inline-size: var(--calcite-navigation-width, 100%);\n  max-inline-size: 100%;\n  &.progress-bar {\n    margin-block-start: 0.125rem;\n  }\n}\n\nslot[name] {\n  @apply flex flex-row;\n}\n\nslot[name=\"navigation-secondary\"]::slotted(calcite-navigation),\nslot[name=\"navigation-tertiary\"]::slotted(calcite-navigation) {\n  @apply w-full;\n}\n\nslot[name=\"content-start\"]::slotted(*),\nslot[name=\"content-center\"]::slotted(*),\nslot[name=\"content-end\"]::slotted(*) {\n  @apply flex flex-row items-center;\n}\n\nslot[name=\"progress\"],\nslot[name=\"progress\"] calcite-progress {\n  inset-block-start: 0;\n  inset-inline: 0;\n}\nslot[name=\"content-end\"] {\n  @apply ms-auto;\n}\n\nslot[name=\"content-start\"] {\n  @apply me-auto;\n}\n\nslot[name=\"content-end\"],\nslot[name=\"logo\"] ~ slot[name=\"user\"],\nslot[name=\"user\"]:only-child {\n  @apply ms-auto;\n}\n\nslot[name=\"content-center\"] {\n  @apply ms-auto me-auto;\n}\n\nslot[name=\"content-start\"] ~ slot[name=\"content-center\"] {\n  @apply ms-0;\n}\n\nslot[name=\"content-start\"] ~ slot[name=\"content-end\"],\nslot[name=\"content-center\"] ~ slot[name=\"content-end\"],\nslot[name=\"content-center\"] ~ slot[name=\"user\"],\nslot[name=\"content-end\"] ~ slot[name=\"user\"] {\n  @apply m-0;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  State,\n  VNode,\n  Method,\n} from \"@stencil/core\";\nimport { slotChangeHasAssignedElement } from \"../../utils/dom\";\nimport { CSS, ICONS, SLOTS } from \"./resources\";\nimport {\n  LoadableComponent,\n  componentFocusable,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\n\n/**\n * @slot logo - A slot for adding a `calcite-logo` component to the primary navigation level.\n * @slot user - A slot for adding a `calcite-user` component to the primary navigation level.\n * @slot progress - A slot for adding a `calcite-progress` component to the primary navigation level.\n * @slot navigation-action - A slot for adding a `calcite-action` component to the primary navigation level.\n * @slot content-start - A slot for adding a `calcite-menu`, `calcite-action`, or other interactive elements in the start position of any navigation level.\n * @slot content-center - A slot for adding a `calcite-menu`, `calcite-action`, or other interactive elements in the center position of the primary navigation level.\n * @slot content-end - A slot for adding a `calcite-menu`, `calcite-action`, or other interactive elements in the end position of any navigation level.\n * @slot navigation-secondary - A slot for adding a `calcite-navigation` component in the secondary navigation level. Components rendered here will not display `calcite-navigation-logo` or `calcite-navigation-user` components.\n * @slot navigation-tertiary - A slot for adding a `calcite-navigation` component in the tertiary navigation level.  Components rendered here will not display `calcite-navigation-logo` or `calcite-navigation-user` components.\n */\n@Component({\n  tag: \"calcite-navigation\",\n  styleUrl: \"navigation.scss\",\n  shadow: true,\n})\nexport class CalciteNavigation implements LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `navigationAction` is `true`, specifies the label of the `calcite-action`.\n   */\n  @Prop() label: string;\n\n  /**\n   * When `true`, displays a `calcite-action` and emits a `calciteNavActionSelect` event on selection change.\n   */\n  @Prop({ reflect: true }) navigationAction = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties/ State\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteNavigationElement;\n\n  @State() logoSlotHasElements: boolean;\n\n  @State() navigationActionSlotHasElements: boolean;\n\n  @State() primaryContentCenterSlotHasElements: boolean;\n\n  @State() primaryContentEndSlotHasElements: boolean;\n\n  @State() primaryContentStartSlotHasElements: boolean;\n\n  @State() progressSlotHasElement: boolean;\n\n  @State() secondarySlotHasElements: boolean;\n\n  @State() tertiarySlotHasElements: boolean;\n\n  @State() userSlotHasElements: boolean;\n\n  navigationActionEl: HTMLCalciteActionElement;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /** When `navigationAction` is `true`, emits when the displayed action selection changes. */\n  @Event({ cancelable: false }) calciteNavigationActionSelect: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `navigationAction` is `true`, sets focus on the component's action element. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    return this.navigationActionEl?.setFocus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private actionClickHandler = () => {\n    this.calciteNavigationActionSelect.emit();\n  };\n\n  private handleUserSlotChange = (event: Event): void => {\n    if (this.isPrimaryLevel()) {\n      this.userSlotHasElements = slotChangeHasAssignedElement(event);\n    }\n  };\n\n  private handleLogoSlotChange = (event: Event): void => {\n    if (this.isPrimaryLevel()) {\n      this.logoSlotHasElements = slotChangeHasAssignedElement(event);\n    }\n  };\n\n  private handleContentStartSlotChange = (event: Event): void => {\n    if (this.isPrimaryLevel()) {\n      this.primaryContentStartSlotHasElements = slotChangeHasAssignedElement(event);\n    }\n  };\n\n  private handleContentEndSlotChange = (event: Event): void => {\n    if (this.isPrimaryLevel()) {\n      this.primaryContentEndSlotHasElements = slotChangeHasAssignedElement(event);\n    }\n  };\n\n  private handleContentCenterSlotChange = (event: Event): void => {\n    if (this.isPrimaryLevel()) {\n      this.primaryContentCenterSlotHasElements = slotChangeHasAssignedElement(event);\n    }\n  };\n\n  private handleSecondarySlotChange = (event: Event): void => {\n    this.secondarySlotHasElements = slotChangeHasAssignedElement(event);\n  };\n\n  private handleTertiarySlotChange = (event: Event): void => {\n    this.tertiarySlotHasElements = slotChangeHasAssignedElement(event);\n  };\n\n  private handleMenuActionSlotChange = (event: Event): void => {\n    if (this.isPrimaryLevel()) {\n      this.navigationActionSlotHasElements = slotChangeHasAssignedElement(event);\n      if (this.navigationActionSlotHasElements) {\n        this.navigationAction = false;\n      }\n    }\n  };\n\n  private handleProgressSlotChange = (event: Event): void => {\n    if (this.isPrimaryLevel()) {\n      this.progressSlotHasElement = slotChangeHasAssignedElement(event);\n    }\n  };\n\n  private isPrimaryLevel(): boolean {\n    return this.el.slot !== SLOTS.navSecondary && this.el.slot !== SLOTS.navTertiary;\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  renderMenuAction(): VNode {\n    return (\n      <slot name={SLOTS.navigationAction} onSlotchange={this.handleMenuActionSlotChange}>\n        {this.navigationAction && (\n          <calcite-action\n            icon={ICONS.hamburger}\n            onClick={this.actionClickHandler}\n            text={this.label}\n            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n            ref={(el: HTMLCalciteActionElement) => (this.navigationActionEl = el)}\n          />\n        )}\n      </slot>\n    );\n  }\n\n  render(): VNode {\n    const primaryLevelHasElements =\n      this.logoSlotHasElements ||\n      this.userSlotHasElements ||\n      this.navigationActionSlotHasElements ||\n      this.primaryContentCenterSlotHasElements ||\n      this.primaryContentEndSlotHasElements ||\n      this.primaryContentStartSlotHasElements ||\n      this.navigationAction;\n    const slotName = this.el.slot;\n    return (\n      <Host>\n        <div\n          class={{\n            [CSS.container]: true,\n            [CSS.secondary]: slotName === SLOTS.navSecondary,\n            [CSS.tertiary]: slotName === SLOTS.navTertiary,\n            [CSS.primary]: primaryLevelHasElements,\n          }}\n        >\n          <div class={{ [CSS.hide]: !this.progressSlotHasElement, [SLOTS.progress]: true }}>\n            <slot name={SLOTS.progress} onSlotchange={this.handleProgressSlotChange} />\n          </div>\n          <div\n            class={{ [CSS.containerContent]: true, [CSS.hasProgress]: this.progressSlotHasElement }}\n          >\n            {this.renderMenuAction()}\n            <div class={{ [CSS.hide]: !this.logoSlotHasElements, [SLOTS.logo]: true }}>\n              <slot name={SLOTS.logo} onSlotchange={this.handleLogoSlotChange} />\n            </div>\n            <slot name={SLOTS.contentStart} onSlotchange={this.handleContentStartSlotChange} />\n            <slot name={SLOTS.contentCenter} onSlotchange={this.handleContentCenterSlotChange} />\n            <slot name={SLOTS.contentEnd} onSlotchange={this.handleContentEndSlotChange} />\n            <div class={{ [CSS.hide]: !this.userSlotHasElements, [SLOTS.user]: true }}>\n              <slot name={SLOTS.user} onSlotchange={this.handleUserSlotChange} />\n            </div>\n          </div>\n        </div>\n\n        <Fragment>\n          <slot name={SLOTS.navSecondary} onSlotchange={this.handleSecondarySlotChange} />\n          <slot name={SLOTS.navTertiary} onSlotchange={this.handleTertiarySlotChange} />\n        </Fragment>\n      </Host>\n    );\n  }\n}\n","export const CSS = {\n  container: \"container\",\n  heading: \"heading\",\n  description: \"description\",\n  anchor: \"anchor\",\n  image: \"image\",\n  standalone: \"standalone\",\n  icon: \"icon\",\n};\n",":host {\n  @apply inline-flex outline-none;\n}\n\n.anchor {\n  @apply flex\n    m-0\n    items-center\n    justify-center\n    cursor-pointer\n    transition-default\n    focus-base\n    no-underline\n    text-0h;\n  color: inherit;\n  border-block-end: 2px solid transparent;\n}\n\n.anchor:hover,\n.anchor:focus {\n  @apply bg-foreground-2;\n}\n.anchor:focus {\n  @apply focus-inset;\n}\n\n.anchor:active {\n  @apply bg-foreground-3;\n}\n\n.image,\n.icon {\n  @apply flex h-7 m-0 px-4;\n}\n\n.image ~ .icon {\n  @apply ps-0;\n}\n\n.image ~ .container,\n.icon ~ .container {\n  @apply ps-0;\n}\n\n:host(:active) .anchor {\n  @apply text-color-1;\n}\n\n:host([active]) .anchor {\n  @apply text-color-1;\n  border-color: var(--calcite-color-brand);\n  --calcite-ui-icon-color: var(--calcite-color-brand);\n}\n\n.container {\n  @apply flex\n  flex-col\n  truncate\n  text-start\n  px-4\n  mt-0.5;\n}\n\n.heading {\n  @apply text-0\n  ms-0\n  truncate\n  text-color-1\n  font-medium;\n}\n\n.standalone {\n  @apply text-1;\n}\n\n.description {\n  @apply text-color-2 truncate;\n  font-size: var(--calcite-font-size--1);\n}\n\n@include base-component();\n","import { Component, Element, h, Host, Prop, VNode, Method } from \"@stencil/core\";\nimport { CSS } from \"./resources\";\nimport {\n  LoadableComponent,\n  componentFocusable,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\n\n@Component({\n  tag: \"calcite-navigation-logo\",\n  styleUrl: \"navigation-logo.scss\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class CalciteNavigationLogo implements LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is highlighted. */\n  @Prop({ reflect: true }) active: boolean;\n\n  /** Specifies the URL destination of the component, which can be set as an absolute or relative path.*/\n  @Prop({ reflect: true }) href: string;\n\n  /** Specifies an icon to display. */\n  @Prop({ reflect: true }) icon: string;\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  /** Describes the appearance or function of the `thumbnail`. If no label is provided, context will not be provided to assistive technologies. */\n  @Prop() label: string;\n\n  /**\n   * Defines the relationship between the `href` value and the current document.\n   *\n   * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n   */\n  @Prop({ reflect: true }) rel: string;\n\n  /** A description for the component, which displays below the `heading`.*/\n  @Prop() description: string;\n\n  /**\n   * Specifies where to open the linked document defined in the `href` property.\n   *\n   * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)\n   */\n  @Prop({ reflect: true }) target: string;\n\n  /** Specifies heading text for the component, such as a product or organization name.*/\n  @Prop() heading: string;\n\n  /** Specifies the `src` to an image. */\n  @Prop() thumbnail: string;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    if (this.href) {\n      this.el.focus();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteNavigationLogoElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private renderIcon(): VNode {\n    /** Icon scale is not variable as the component does not have a scale property */\n    return <calcite-icon class={CSS.icon} flipRtl={this.iconFlipRtl} icon={this.icon} scale=\"l\" />;\n  }\n\n  render(): VNode {\n    const { heading, description, thumbnail } = this;\n    return (\n      <Host>\n        <a class={CSS.anchor} href={this.href} rel={this.rel} target={this.target}>\n          {thumbnail && <img alt={this.label || \"\"} class={CSS.image} src={thumbnail} />}\n          {this.icon && this.renderIcon()}\n          {(heading || description) && (\n            <div class={CSS.container}>\n              {heading && (\n                <span\n                  aria-label={this.heading}\n                  class={{\n                    [CSS.heading]: true,\n                    [CSS.standalone]: !this.description,\n                  }}\n                  key={CSS.heading}\n                >\n                  {heading}\n                </span>\n              )}\n              {description && (\n                <span aria-label={this.description} class={CSS.description} key={CSS.description}>\n                  {description}\n                </span>\n              )}\n            </div>\n          )}\n        </a>\n      </Host>\n    );\n  }\n}\n","export const CSS = {\n  textContainer: \"text-container\",\n  fullName: \"full-name\",\n  username: \"username\",\n  button: \"button\",\n};\n",":host {\n  @apply inline-flex outline-none;\n  & .button {\n    background-color: transparent;\n    border: none;\n    @apply flex\n      m-0\n      items-center\n      justify-center\n      cursor-pointer\n      transition-default\n      focus-base\n      font-sans\n      text-0h;\n    border-block-end: 2px solid transparent;\n  }\n}\n\n:host(:hover) .button,\n:host(:focus) .button {\n  @apply bg-foreground-2;\n}\n\n:host(:focus) .button {\n  @apply focus-inset;\n}\n\n:host(:active) .button {\n  @apply bg-foreground-3 text-color-1;\n}\n\ncalcite-avatar {\n  @apply px-4;\n}\n\ncalcite-avatar ~ .text-container {\n  @apply ps-0;\n}\n\n:host([active]) .button {\n  @apply text-color-1 border-color-brand;\n  --calcite-ui-icon-color: var(--calcite-color-brand);\n}\n\n.text-container {\n  @apply flex\n  flex-col\n  text-start\n  px-4\n  mt-0.5;\n}\n\n.full-name {\n  @apply text-0\n  ms-0\n  text-color-1\n  font-medium;\n}\n\n.username {\n  @apply text-color-2;\n  font-size: var(--calcite-font-size--1);\n}\n\n@include base-component();\n","import { Component, Element, h, Host, Prop, VNode, Method } from \"@stencil/core\";\nimport { CSS } from \"./resources\";\nimport {\n  LoadableComponent,\n  componentFocusable,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\n\n@Component({\n  tag: \"calcite-navigation-user\",\n  styleUrl: \"navigation-user.scss\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class CalciteNavigationUser implements LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is highlighted.*/\n  @Prop({ reflect: true }) active: boolean;\n\n  /** Specifies the full name of the user.*/\n  @Prop() fullName: string;\n\n  /** Describes the appearance of the avatar. If no label is provided, context will not be provided to assistive technologies.*/\n  @Prop() label: string;\n\n  /** When `true`, hides the `fullName` and `username` contents.*/\n  @Prop({ reflect: true }) textDisabled = false;\n\n  /** Specifies the `src` to an image (remember to add a token if the user is private).*/\n  @Prop() thumbnail: string;\n\n  /** Specifies the unique id of the user.*/\n  @Prop() userId: string;\n\n  /** Specifies the username of the user.*/\n  @Prop() username: string;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.el.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteNavigationUserElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    return (\n      <Host>\n        <button aria-label={this.label} class={CSS.button}>\n          <calcite-avatar\n            full-name={this.fullName}\n            label={this.label}\n            thumbnail={this.thumbnail}\n            user-id={this.userId}\n            username={this.username}\n          />\n          {(this.fullName || this.username) && !this.textDisabled && (\n            <div class={CSS.textContainer}>\n              {this.fullName && (\n                <span class={CSS.fullName} key={CSS.fullName}>\n                  {this.fullName}\n                </span>\n              )}\n              {this.username && (\n                <span class={CSS.username} key={CSS.username}>\n                  {this.username}\n                </span>\n              )}\n            </div>\n          )}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/calcite/p-baa6b5dd.entry.js

@@ -0,0 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.6.0-next.3
+ */
+import{r as t,c as i,h as e,H as o,g as a}from"./p-819bde10.js";import{c as n,d as s}from"./p-603943ce.js";import{e as r,b as l,f as c,w as d}from"./p-224218c9.js";import{d as h,a as m,c as p,u as b}from"./p-0f2558c6.js";import{s as u,a as f,c as g}from"./p-110e5bc8.js";import{c as x}from"./p-e54e5b79.js";import{o as v}from"./p-573201c9.js";import{c as k,d as z}from"./p-bdc14ccb.js";import{s as w,c as y,d as C,u as j}from"./p-a5baec64.js";import{g as $,c as M}from"./p-af9dc83a.js";import"./p-b5a7ba7b.js";import"./p-7cc4bcb2.js";import"./p-dcfcb77f.js";const O={modal:"modal",title:"title",header:"header",footer:"footer",scrim:"scrim",back:"back",close:"close",secondary:"secondary",primary:"primary",container:"container",containerOpen:"container--open",content:"content",contentNoFooter:"content--no-footer",contentBottom:"content-bottom",contentTop:"content-top",slottedInShell:"slotted-in-shell",openingIdle:"modal--opening-idle",openingActive:"modal--opening-active",closingIdle:"modal--closing-idle",closingActive:"modal--closing-active"};const B={close:"x"};const F={content:"content",contentBottom:"content-bottom",contentTop:"content-top",header:"header",back:"back",secondary:"secondary",primary:"primary"};const D=":host{--calcite-modal-scrim-background:rgba(0, 0, 0, 0.85);position:absolute;inset:0px;z-index:var(--calcite-z-index-overlay);display:flex;opacity:0;visibility:hidden !important;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);--calcite-modal-scrim-background-internal:rgba(0, 0, 0, 0.85)}.content-top[hidden],.content-bottom[hidden]{display:none}.container{position:fixed;inset:0px;z-index:var(--calcite-z-index-overlay);display:flex;align-items:center;justify-content:center;overflow-y:hidden;color:var(--calcite-color-text-2);opacity:0;visibility:hidden !important;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88)}:host([scale=s]){--calcite-modal-padding-internal:0.75rem;--calcite-modal-padding-large-internal:1rem;--calcite-modal-title-text-internal:var(--calcite-font-size-1);--calcite-modal-content-text-internal:var(--calcite-font-size--1)}:host([scale=m]){--calcite-modal-padding-internal:1rem;--calcite-modal-padding-large-internal:1.25rem;--calcite-modal-title-text-internal:var(--calcite-font-size-2);--calcite-modal-content-text-internal:var(--calcite-font-size-0)}:host([scale=l]){--calcite-modal-padding-internal:1.25rem;--calcite-modal-padding-large-internal:1.5rem;--calcite-modal-title-text-internal:var(--calcite-font-size-3);--calcite-modal-content-text-internal:var(--calcite-font-size-1)}.scrim{--calcite-scrim-background:var(--calcite-modal-scrim-background, var(--calcite-color-transparent-scrim));position:fixed;inset:0px;display:flex;overflow-y:hidden}.modal{pointer-events:none;z-index:var(--calcite-z-index-modal);float:none;margin:1.5rem;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;overflow:hidden;border-radius:0.25rem;background-color:var(--calcite-color-foreground-1);opacity:0;--tw-shadow:0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);--tw-shadow-colored:0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -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);-webkit-overflow-scrolling:touch;visibility:hidden;transition:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);--calcite-modal-hidden-position:translate3d(0, 20px, 0);--calcite-modal-shown-position:translate3d(0, 0, 0)}.modal--opening-idle{transform:var(--calcite-modal-hidden-position)}.modal--opening-active{transform:var(--calcite-modal-shown-position)}.modal--closing-idle{transform:var(--calcite-modal-shown-position)}.modal--closing-active{transform:var(--calcite-modal-hidden-position)}:host([opened]){opacity:1;visibility:visible !important;transition-delay:0ms}.container--open{opacity:1;visibility:visible !important;transition-delay:0ms}.container--open .modal{pointer-events:auto;visibility:visible;opacity:1;transition:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-inline-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-block-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition-delay:0ms}.header{z-index:var(--calcite-z-index-header);display:flex;min-inline-size:0px;max-inline-size:100%;border-start-start-radius:0.25rem;border-start-end-radius:0.25rem;border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1);flex:0 0 auto}.close{order:2;margin:0px;cursor:pointer;appearance:none;border-style:none;background-color:transparent;color:var(--calcite-color-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-block:var(--calcite-modal-padding-internal);padding-inline:var(--calcite-modal-padding-internal);flex:0 0 auto}.close calcite-icon{pointer-events:none;vertical-align:-2px}.close:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite-color-brand)));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.close:hover,.close:focus,.close:active{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}.title{order:1;display:flex;min-inline-size:0px;align-items:center;flex:1 1 auto;padding-block:var(--calcite-modal-padding-internal);padding-inline:var(--calcite-modal-padding-large-internal)}slot[name=header]::slotted(*),*::slotted([slot=header]){margin:0px;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-1);font-size:var(--calcite-modal-title-text-internal)}.content{position:relative;box-sizing:border-box;display:block;block-size:100%;overflow:auto;padding:0px;background-color:var(--calcite-modal-content-background, var(--calcite-color-foreground-1));max-block-size:100%;padding:var(--calcite-modal-content-padding, var(--calcite-modal-padding-internal))}.content-top,.content-bottom{z-index:var(--calcite-z-index-header);display:flex;border-width:0px;border-style:solid;border-color:var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1);flex:0 0 auto;padding:var(--calcite-modal-padding-internal)}.content-top{min-inline-size:0px;max-inline-size:100%;border-block-end-width:1px}.content-bottom{margin-block-start:auto;box-sizing:border-box;inline-size:100%;justify-content:space-between;border-block-start-width:1px}.content-top:not(.header~.content-top){border-start-start-radius:0.25rem;border-start-end-radius:0.25rem}.content-bottom:not(.content-bottom~.footer),.content--no-footer{border-end-end-radius:0.25rem;border-end-start-radius:0.25rem}slot[name=content]::slotted(*),*::slotted([slot=content]){font-size:var(--calcite-modal-context-text-internal)}.footer{z-index:var(--calcite-z-index-header);margin-block-start:auto;box-sizing:border-box;display:flex;inline-size:100%;justify-content:space-between;border-end-end-radius:0.25rem;border-end-start-radius:0.25rem;border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1);flex:0 0 auto;padding-block:var(--calcite-modal-padding-internal);padding-inline:var(--calcite-modal-padding-large-internal)}.footer--hide-back .back,.footer--hide-secondary .secondary{display:none}.back{display:block;margin-inline-end:auto}.secondary{margin-inline:0.25rem;display:block}slot[name=primary]{display:block}:host([width=small]) .modal{inline-size:auto}:host([width-scale=s]) .modal{max-block-size:100%;max-inline-size:100%;inline-size:var(--calcite-modal-width, 32rem);block-size:var(--calcite-modal-height, auto)}@media screen and (max-width: 35rem){:host([width-scale=s]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%}:host([width-scale=s]) .content{flex:1 1 auto;max-block-size:unset}:host([width-scale=s][docked]) .container{align-items:flex-end}}:host([width-scale=m]) .modal{max-block-size:100%;max-inline-size:100%;inline-size:var(--calcite-modal-width, 48rem);block-size:var(--calcite-modal-height, auto)}@media screen and (max-width: 51rem){:host([width-scale=m]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%}:host([width-scale=m]) .content{flex:1 1 auto;max-block-size:unset}:host([width-scale=m][docked]) .container{align-items:flex-end}}:host([width-scale=l]) .modal{max-block-size:100%;max-inline-size:100%;inline-size:var(--calcite-modal-width, 94rem);block-size:var(--calcite-modal-height, auto)}@media screen and (max-width: 97rem){:host([width-scale=l]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%}:host([width-scale=l]) .content{flex:1 1 auto;max-block-size:unset}:host([width-scale=l][docked]) .container{align-items:flex-end}}:host([fullscreen]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px;--calcite-modal-hidden-position:translate3D(0, 20px, 0) scale(0.95);--calcite-modal-shown-position:translate3D(0, 0, 0) scale(1)}:host([fullscreen]) .content{max-block-size:100%;flex:1 1 auto}:host([opened][fullscreen]) .header,:host([opened][fullscreen]) .footer,:host([opened][fullscreen]) .content-top,:host([opened][fullscreen]) .content-bottom{border-radius:0}:host([docked]) .modal{block-size:var(--calcite-modal-height, auto)}:host([docked]) .content{block-size:auto;flex:1 1 auto}:host([kind=brand]) .modal{border-color:var(--calcite-color-brand)}:host([kind=danger]) .modal{border-color:var(--calcite-color-status-danger)}:host([kind=info]) .modal{border-color:var(--calcite-color-status-info)}:host([kind=success]) .modal{border-color:var(--calcite-color-status-success)}:host([kind=warning]) .modal{border-color:var(--calcite-color-status-warning)}:host([kind=brand]) .modal,:host([kind=danger]) .modal,:host([kind=info]) .modal,:host([kind=success]) .modal,:host([kind=warning]) .modal{border-width:0px;border-block-start-width:4px;border-style:solid}:host([kind=brand]) .header,:host([kind=brand]) .content-top,:host([kind=danger]) .header,:host([kind=danger]) .content-top,:host([kind=info]) .header,:host([kind=info]) .content-top,:host([kind=success]) .header,:host([kind=success]) .content-top,:host([kind=warning]) .header,:host([kind=warning]) .content-top{border-radius:0.25rem;border-end-end-radius:0px;border-end-start-radius:0px}@media screen and (max-width: 860px){* slot[name=header]::slotted(content-top),* content-top::slotted([slot=header]){font-size:var(--calcite-font-size-1)}.footer,.content-bottom{position:sticky;inset-block-end:0px}}@media screen and (max-width: 480px){.footer,.content-bottom{flex-direction:column}.back,.secondary{margin:0px;margin-block-end:0.25rem}}.container.slotted-in-shell{position:absolute;pointer-events:auto}.container.slotted-in-shell calcite-scrim{position:absolute}:host([hidden]){display:none}[hidden]{display:none}";let T=0;let L="";const S=class{constructor(e){t(this,e);this.calciteModalBeforeClose=i(this,"calciteModalBeforeClose",6);this.calciteModalClose=i(this,"calciteModalClose",6);this.calciteModalBeforeOpen=i(this,"calciteModalBeforeOpen",6);this.calciteModalOpen=i(this,"calciteModalOpen",6);this.ignoreOpenChange=false;this.mutationObserver=x("mutation",(()=>this.handleMutationObserver()));this.cssVarObserver=x("mutation",(()=>{this.updateSizeCssVars()}));this.openTransitionProp="opacity";this.setTransitionEl=t=>{this.transitionEl=t};this.openEnd=()=>{this.setFocus();this.el.removeEventListener("calciteModalOpen",this.openEnd)};this.handleCloseClick=()=>{this.open=false};this.handleOutsideClose=()=>{if(this.outsideCloseDisabled){return}this.open=false};this.closeModal=async()=>{if(this.beforeClose){try{await this.beforeClose(this.el)}catch(t){requestAnimationFrame((()=>{this.ignoreOpenChange=true;this.open=true;this.ignoreOpenChange=false}));return}}T--;this.opened=false;this.removeOverflowHiddenClass()};this.handleMutationObserver=()=>{this.updateFooterVisibility();this.updateFocusTrapElements()};this.updateFooterVisibility=()=>{this.hasFooter=!!r(this.el,[F.back,F.primary,F.secondary])};this.updateSizeCssVars=()=>{this.cssWidth=getComputedStyle(this.el).getPropertyValue("--calcite-modal-width");this.cssHeight=getComputedStyle(this.el).getPropertyValue("--calcite-modal-height")};this.contentTopSlotChangeHandler=t=>{this.hasContentTop=l(t)};this.contentBottomSlotChangeHandler=t=>{this.hasContentBottom=l(t)};this.open=false;this.opened=false;this.beforeClose=undefined;this.closeButtonDisabled=false;this.focusTrapDisabled=false;this.outsideCloseDisabled=false;this.docked=undefined;this.escapeDisabled=false;this.scale="m";this.widthScale="m";this.fullscreen=undefined;this.kind=undefined;this.messages=undefined;this.messageOverrides=undefined;this.slottedInShell=undefined;this.cssWidth=undefined;this.cssHeight=undefined;this.hasFooter=true;this.hasContentTop=false;this.hasContentBottom=false;this.effectiveLocale=undefined;this.defaultMessages=undefined}handleFocusTrapDisabled(t){if(!this.open){return}t?h(this):m(this)}onMessagesChange(){}async componentWillLoad(){await w(this);u(this);if(this.open){this.openModal()}}componentDidLoad(){f(this)}connectedCallback(){this.mutationObserver?.observe(this.el,{childList:true,subtree:true});this.cssVarObserver?.observe(this.el,{attributeFilter:["style"]});this.updateSizeCssVars();this.updateFooterVisibility();n(this);k(this);y(this);p(this)}disconnectedCallback(){this.removeOverflowHiddenClass();this.mutationObserver?.disconnect();this.cssVarObserver?.disconnect();s(this);h(this);z(this);C(this);this.slottedInShell=false}render(){return e(o,{"aria-describedby":this.contentId,"aria-labelledby":this.titleId,"aria-modal":"true",role:"dialog"},e("div",{class:{[O.container]:true,[O.containerOpen]:this.opened,[O.slottedInShell]:this.slottedInShell}},e("calcite-scrim",{class:O.scrim,onClick:this.handleOutsideClose}),this.renderStyle(),e("div",{class:{[O.modal]:true},ref:this.setTransitionEl},e("div",{class:O.header},this.renderCloseButton(),e("header",{class:O.title},e("slot",{name:O.header}))),this.renderContentTop(),e("div",{class:{[O.content]:true,[O.contentNoFooter]:!this.hasFooter},ref:t=>this.modalContent=t},e("slot",{name:F.content})),this.renderContentBottom(),this.renderFooter())))}renderFooter(){return this.hasFooter?e("div",{class:O.footer,key:"footer"},e("span",{class:O.back},e("slot",{name:F.back})),e("span",{class:O.secondary},e("slot",{name:F.secondary})),e("span",{class:O.primary},e("slot",{name:F.primary}))):null}renderContentTop(){return e("div",{class:O.contentTop,hidden:!this.hasContentTop},e("slot",{name:F.contentTop,onSlotchange:this.contentTopSlotChangeHandler}))}renderContentBottom(){return e("div",{class:O.contentBottom,hidden:!this.hasContentBottom},e("slot",{name:F.contentBottom,onSlotchange:this.contentBottomSlotChangeHandler}))}renderCloseButton(){return!this.closeButtonDisabled?e("button",{"aria-label":this.messages.close,class:O.close,key:"button",onClick:this.handleCloseClick,title:this.messages.close,ref:t=>this.closeButtonEl=t},e("calcite-icon",{icon:B.close,scale:$(this.scale)})):null}renderStyle(){if(!this.fullscreen&&(this.cssWidth||this.cssHeight)){return e("style",null,`.${O.container} {\n              ${this.docked&&this.cssWidth?`align-items: center !important;`:""}\n            }\n            .${O.modal} {\n              block-size: ${this.cssHeight?this.cssHeight:"auto"} !important;\n              ${this.cssWidth?`inline-size: ${this.cssWidth} !important;`:""}\n              ${this.cssWidth?`max-inline-size: ${this.cssWidth} !important;`:""}\n              ${this.docked?`border-radius: var(--calcite-border-radius) !important;`:""}\n            }\n            @media screen and (max-width: ${this.cssWidth}) {\n              .${O.container} {\n                ${this.docked?`align-items: flex-end !important;`:""}\n              }\n              .${O.modal} {\n                max-block-size: 100% !important;\n                inline-size: 100% !important;\n                max-inline-size: 100% !important;\n                min-inline-size: 100% !important;\n                margin: 0 !important;\n                ${!this.docked?`block-size: 100% !important;`:""}\n                ${!this.docked?`border-radius: 0 !important;`:""}\n                ${this.docked?`border-radius: var(--calcite-border-radius) var(--calcite-border-radius) 0 0 !important;`:""}\n              }\n            }\n          `)}}effectiveLocaleChange(){j(this,this.effectiveLocale)}handleEscape(t){if(this.open&&!this.escapeDisabled&&t.key==="Escape"&&!t.defaultPrevented){this.open=false;t.preventDefault()}}async setFocus(){await g(this);c(this.el)}async updateFocusTrapElements(){b(this)}async scrollContent(t=0,i=0){if(this.modalContent){if(this.modalContent.scrollTo){this.modalContent.scrollTo({top:t,left:i,behavior:"smooth"})}else{this.modalContent.scrollTop=t;this.modalContent.scrollLeft=i}}}onBeforeOpen(){this.transitionEl.classList.add(O.openingActive);this.calciteModalBeforeOpen.emit()}onOpen(){this.transitionEl.classList.remove(O.openingIdle,O.openingActive);this.calciteModalOpen.emit();m(this)}onBeforeClose(){this.transitionEl.classList.add(O.closingActive);this.calciteModalBeforeClose.emit()}onClose(){this.transitionEl.classList.remove(O.closingIdle,O.closingActive);this.calciteModalClose.emit();h(this)}toggleModal(t){if(this.ignoreOpenChange){return}if(t){this.openModal()}else{this.closeModal()}}handleOpenedChange(t){const i=t?O.openingIdle:O.closingIdle;this.transitionEl.classList.add(i);v(this)}async openModal(){await M(this.el);this.el.addEventListener("calciteModalOpen",this.openEnd);this.opened=true;const t=r(this.el,F.header);const i=r(this.el,F.content);this.titleId=d(t);this.contentId=d(i);if(!this.slottedInShell){if(T===0){L=document.documentElement.style.overflow}T++;document.documentElement.style.setProperty("overflow","hidden")}}removeOverflowHiddenClass(){document.documentElement.style.setProperty("overflow",L)}static get assetsDirs(){return["assets"]}get el(){return a(this)}static get watchers(){return{focusTrapDisabled:["handleFocusTrapDisabled"],messageOverrides:["onMessagesChange"],effectiveLocale:["effectiveLocaleChange"],open:["toggleModal"],opened:["handleOpenedChange"]}}};S.style=D;export{S as calcite_modal};
+//# sourceMappingURL=p-baa6b5dd.entry.js.map

package/dist/calcite/p-baa6b5dd.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CSS","modal","title","header","footer","scrim","back","close","secondary","primary","container","containerOpen","content","contentNoFooter","contentBottom","contentTop","slottedInShell","openingIdle","openingActive","closingIdle","closingActive","ICONS","SLOTS","modalCss","totalOpenModals","initialDocumentOverflowStyle","Modal","this","ignoreOpenChange","mutationObserver","createObserver","handleMutationObserver","cssVarObserver","updateSizeCssVars","openTransitionProp","setTransitionEl","el","transitionEl","openEnd","setFocus","removeEventListener","handleCloseClick","open","handleOutsideClose","outsideCloseDisabled","closeModal","async","beforeClose","_error","requestAnimationFrame","opened","removeOverflowHiddenClass","updateFooterVisibility","updateFocusTrapElements","hasFooter","getSlotted","cssWidth","getComputedStyle","getPropertyValue","cssHeight","contentTopSlotChangeHandler","event","hasContentTop","slotChangeHasAssignedElement","contentBottomSlotChangeHandler","hasContentBottom","handleFocusTrapDisabled","focusTrapDisabled","deactivateFocusTrap","activateFocusTrap","onMessagesChange","componentWillLoad","setUpMessages","setUpLoadableComponent","openModal","componentDidLoad","setComponentLoaded","connectedCallback","observe","childList","subtree","attributeFilter","connectConditionalSlotComponent","connectLocalized","connectMessages","connectFocusTrap","disconnectedCallback","disconnect","disconnectConditionalSlotComponent","disconnectLocalized","disconnectMessages","render","h","Host","contentId","titleId","role","class","onClick","renderStyle","ref","renderCloseButton","name","renderContentTop","modalContent","renderContentBottom","renderFooter","key","hidden","onSlotchange","closeButtonDisabled","messages","closeButtonEl","icon","scale","getIconScale","fullscreen","docked","effectiveLocaleChange","updateMessages","effectiveLocale","handleEscape","escapeDisabled","defaultPrevented","preventDefault","componentFocusable","focusFirstTabbable","scrollContent","top","left","scrollTo","behavior","scrollTop","scrollLeft","onBeforeOpen","classList","add","calciteModalBeforeOpen","emit","onOpen","remove","calciteModalOpen","onBeforeClose","calciteModalBeforeClose","onClose","calciteModalClose","toggleModal","value","handleOpenedChange","idleClass","onToggleOpenCloseComponent","componentOnReady","addEventListener","titleEl","contentEl","ensureId","document","documentElement","style","overflow","setProperty"],"sources":["src/components/modal/resources.ts","src/components/modal/modal.scss?tag=calcite-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["export const CSS = {\n  modal: \"modal\",\n  title: \"title\",\n  header: \"header\",\n  footer: \"footer\",\n  scrim: \"scrim\",\n  back: \"back\",\n  close: \"close\",\n  secondary: \"secondary\",\n  primary: \"primary\",\n  container: \"container\",\n  containerOpen: \"container--open\",\n  content: \"content\",\n  contentNoFooter: \"content--no-footer\",\n  contentBottom: \"content-bottom\",\n  contentTop: \"content-top\",\n  slottedInShell: \"slotted-in-shell\",\n\n  // these classes help apply the animation in phases to only set transform on open/close\n  // this helps avoid a positioning issue for any floating-ui-owning children\n  openingIdle: \"modal--opening-idle\",\n  openingActive: \"modal--opening-active\",\n  closingIdle: \"modal--closing-idle\",\n  closingActive: \"modal--closing-active\",\n};\n\nexport const DURATIONS = {\n  slow: 14000,\n  medium: 10000,\n  fast: 6000,\n  test: 300 / 1000,\n};\n\nexport const ICONS = {\n  close: \"x\",\n};\n\nexport const SLOTS = {\n  content: \"content\",\n  contentBottom: \"content-bottom\",\n  contentTop: \"content-top\",\n  header: \"header\",\n  back: \"back\",\n  secondary: \"secondary\",\n  primary: \"primary\",\n};\n","@import \"~@esri/calcite-design-tokens/dist/scss/core\";\n\n/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-modal-content-background: Specifies the background color of content placed in the component's `\"content\"` slot.\n * @prop --calcite-modal-content-padding: Specifies the padding of the component's `\"content\"` slot.\n * @prop --calcite-modal-scrim-background: Specifies the background color of the component's scrim.\n * @prop --calcite-modal-width: Specifies the width of the component, using `px`, `em`, `rem`, `vw`, or `%`. Will never exceed the width of the viewport. Will not apply if `fullscreen` if set.\n * @prop --calcite-modal-height: Specifies the height of the component, using `px`, `em`, `rem`, `vh`, or `%`. Will never exceed the height of the viewport. Will not apply if `fullscreen` if set.\n *\n */\n\n:host {\n  --calcite-modal-scrim-background: #{rgba($calcite-color-neutral-blk-240, $calcite-opacity-85)};\n}\n\n:host {\n  @apply absolute flex inset-0 opacity-0 z-overlay;\n  visibility: hidden !important;\n  transition:\n    visibility 0ms linear var(--calcite-internal-animation-timing-slow),\n    opacity var(--calcite-internal-animation-timing-slow) $easing-function;\n  // the modal should always use a dark scrim, regardless of light / dark mode - matches value in global.scss\n  --calcite-modal-scrim-background-internal: #{rgba($calcite-color-neutral-blk-240, $calcite-opacity-85)};\n}\n\n.content-top[hidden],\n.content-bottom[hidden] {\n  @apply hidden;\n}\n\n.container {\n  @apply text-color-2\n    fixed\n    inset-0\n    flex\n    items-center\n    justify-center\n    overflow-y-hidden\n    opacity-0\n    z-overlay;\n  visibility: hidden !important;\n  transition:\n    visibility 0ms linear var(--calcite-internal-animation-timing-slow),\n    opacity var(--calcite-internal-animation-timing-slow) $easing-function;\n}\n\n:host([scale=\"s\"]) {\n  --calcite-modal-padding-internal: theme(\"spacing.3\");\n  --calcite-modal-padding-large-internal: theme(\"spacing.4\");\n  --calcite-modal-title-text-internal: theme(\"fontSize.1h\");\n  --calcite-modal-content-text-internal: theme(\"fontSize.n1\");\n}\n\n:host([scale=\"m\"]) {\n  --calcite-modal-padding-internal: theme(\"spacing.4\");\n  --calcite-modal-padding-large-internal: theme(\"spacing.5\");\n  --calcite-modal-title-text-internal: theme(\"fontSize.2h\");\n  --calcite-modal-content-text-internal: theme(\"fontSize.0\");\n}\n\n:host([scale=\"l\"]) {\n  --calcite-modal-padding-internal: theme(\"spacing.5\");\n  --calcite-modal-padding-large-internal: theme(\"spacing.6\");\n  --calcite-modal-title-text-internal: theme(\"fontSize.3h\");\n  --calcite-modal-content-text-internal: theme(\"fontSize.1\");\n}\n\n.scrim {\n  --calcite-scrim-background: var(--calcite-modal-scrim-background, var(--calcite-color-transparent-scrim));\n  @apply fixed inset-0 flex overflow-y-hidden;\n}\n\n.modal {\n  @apply shadow-2-sm\n    bg-foreground-1\n    pointer-events-none\n    float-none\n    m-6\n    box-border\n    flex\n    w-full\n    flex-col\n    overflow-hidden\n    rounded\n    opacity-0\n    z-modal;\n  -webkit-overflow-scrolling: touch;\n  visibility: hidden;\n  transition:\n    transform var(--calcite-internal-animation-timing-slow) $easing-function,\n    visibility 0ms linear var(--calcite-internal-animation-timing-slow),\n    opacity var(--calcite-internal-animation-timing-slow) $easing-function;\n\n  --calcite-modal-hidden-position: translate3d(0, 20px, 0);\n  --calcite-modal-shown-position: translate3d(0, 0, 0);\n\n  &--opening {\n    &-idle {\n      transform: var(--calcite-modal-hidden-position);\n    }\n    &-active {\n      transform: var(--calcite-modal-shown-position);\n    }\n  }\n\n  &--closing {\n    &-idle {\n      transform: var(--calcite-modal-shown-position);\n    }\n    &-active {\n      transform: var(--calcite-modal-hidden-position);\n    }\n  }\n}\n\n:host([opened]) {\n  @apply opacity-100;\n  visibility: visible !important;\n  transition-delay: 0ms;\n}\n\n.container--open {\n  @apply opacity-100;\n  visibility: visible !important;\n  transition-delay: 0ms;\n  .modal {\n    @apply pointer-events-auto visible opacity-100;\n    transition:\n      transform var(--calcite-internal-animation-timing-slow) $easing-function,\n      visibility 0ms linear,\n      opacity var(--calcite-internal-animation-timing-slow) $easing-function,\n      max-inline-size var(--calcite-internal-animation-timing-slow) $easing-function,\n      max-block-size var(--calcite-internal-animation-timing-slow) $easing-function;\n    transition-delay: 0ms;\n  }\n}\n\n/**\n * Header\n */\n.header {\n  @apply bg-foreground-1\n    border-color-3\n    flex\n    min-w-0\n    max-w-full\n    rounded-t\n    border-0\n    border-b\n    border-solid\n    z-header;\n  flex: 0 0 auto;\n}\n\n.close {\n  @apply text-color-3\n    transition-default\n    focus-base\n    order-2\n    m-0\n    cursor-pointer\n    appearance-none\n    border-none\n    bg-transparent;\n  padding-block: var(--calcite-modal-padding-internal);\n  padding-inline: var(--calcite-modal-padding-internal);\n  flex: 0 0 auto;\n  calcite-icon {\n    @apply pointer-events-none;\n    vertical-align: -2px;\n  }\n  &:focus {\n    @apply focus-inset;\n  }\n  &:hover,\n  &:focus,\n  &:active {\n    @apply bg-foreground-2 text-color-1;\n  }\n}\n\n.title {\n  @apply order-1 flex min-w-0 items-center;\n  flex: 1 1 auto;\n  padding-block: var(--calcite-modal-padding-internal);\n  padding-inline: var(--calcite-modal-padding-large-internal);\n}\n\n@include slotted(\"header\", \"*\") {\n  @apply text-color-1 m-0 font-normal;\n  font-size: var(--calcite-modal-title-text-internal);\n}\n\n/**\n * Content area\n */\n.content {\n  @apply relative box-border block h-full overflow-auto p-0;\n  background-color: var(--calcite-modal-content-background, theme(\"colors.background.foreground.1\"));\n  max-block-size: 100%;\n  padding: var(--calcite-modal-content-padding, var(--calcite-modal-padding-internal));\n}\n\n.content-top,\n.content-bottom {\n  @apply bg-foreground-1 border-color-3 border-solid border-0 z-header flex;\n  flex: 0 0 auto;\n  padding: var(--calcite-modal-padding-internal);\n}\n\n.content-top {\n  @apply min-w-0 max-w-full border-b;\n}\n\n.content-bottom {\n  @apply mt-auto box-border w-full justify-between border-t;\n}\n\n.content-top:not(.header ~ .content-top) {\n  @apply rounded-t;\n}\n\n.content-bottom:not(.content-bottom ~ .footer),\n.content--no-footer {\n  @apply rounded-b;\n}\n\n@include slotted(\"content\", \"*\") {\n  font-size: var(--calcite-modal-context-text-internal);\n}\n\n/**\n * Footer\n */\n.footer {\n  @apply bg-foreground-1\n    border-color-3\n    mt-auto\n    box-border\n    flex\n    w-full\n    justify-between\n    rounded-b\n    border-0\n    border-t\n    border-solid\n    z-header;\n  flex: 0 0 auto;\n  padding-block: var(--calcite-modal-padding-internal);\n  padding-inline: var(--calcite-modal-padding-large-internal);\n}\n\n.footer--hide-back .back,\n.footer--hide-secondary .secondary {\n  @apply hidden;\n}\n\n.back {\n  @apply block;\n  margin-inline-end: auto;\n}\n\n.secondary {\n  @apply mx-1 block;\n}\n\nslot[name=\"primary\"] {\n  @apply block;\n}\n\n/**\n * Sizes\n */\n@mixin modal-size($size, $width) {\n  :host([width-scale=\"#{$size}\"]) .modal {\n    @apply max-h-full max-w-full;\n    inline-size: var(--calcite-modal-width, $width);\n    block-size: var(--calcite-modal-height, auto);\n  }\n\n  @media screen and (max-width: $width + 2 * $baseline) {\n    :host([width-scale=\"#{$size}\"]) {\n      .modal {\n        @apply m-0 h-full max-h-full w-full max-w-full;\n      }\n      .content {\n        flex: 1 1 auto;\n        max-block-size: unset;\n      }\n    }\n    :host([width-scale=\"#{$size}\"][docked]) .container {\n      align-items: flex-end;\n    }\n  }\n}\n\n:host([width=\"small\"]) .modal {\n  @apply w-auto;\n}\n\n@include modal-size(\"s\", 32rem);\n@include modal-size(\"m\", 48rem);\n@include modal-size(\"l\", 94rem);\n\n/**\n * Fullscreen\n */\n:host([fullscreen]) {\n  .modal {\n    @apply m-0 max-h-full max-w-full h-full w-full rounded-none;\n    --calcite-modal-hidden-position: translate3D(0, 20px, 0) scale(0.95);\n    --calcite-modal-shown-position: translate3D(0, 0, 0) scale(1);\n  }\n  .content {\n    @apply max-h-full;\n    flex: 1 1 auto;\n  }\n}\n\n:host([opened][fullscreen]) {\n  .header,\n  .footer,\n  .content-top,\n  .content-bottom {\n    border-radius: 0;\n  }\n}\n\n/**\n * Docked\n */\n:host([docked]) {\n  .modal {\n    block-size: var(--calcite-modal-height, auto);\n  }\n  .content {\n    @apply h-auto;\n    flex: 1 1 auto;\n  }\n}\n\n/**\n * Kinds\n */\n:host([kind=\"brand\"]) .modal {\n  @apply border-color-brand;\n}\n\n:host([kind=\"danger\"]) .modal {\n  @apply border-color-danger;\n}\n\n:host([kind=\"info\"]) .modal {\n  @apply border-color-info;\n}\n\n:host([kind=\"success\"]) .modal {\n  @apply border-color-success;\n}\n\n:host([kind=\"warning\"]) .modal {\n  @apply border-color-warning;\n}\n\n:host([kind=\"brand\"]),\n:host([kind=\"danger\"]),\n:host([kind=\"info\"]),\n:host([kind=\"success\"]),\n:host([kind=\"warning\"]) {\n  .modal {\n    @apply border-0 border-t-4 border-solid;\n  }\n  .header,\n  .content-top {\n    @apply rounded rounded-b-none;\n  }\n}\n\n/**\n * Tablet\n */\n@media screen and (max-width: $viewport-medium) {\n  @include slotted(\"header\", \"content-top\", \"*\") {\n    @apply text-1;\n  }\n  .footer,\n  .content-bottom {\n    @apply sticky bottom-0;\n  }\n}\n\n/**\n * Mobile\n */\n@media screen and (max-width: $viewport-small) {\n  .footer,\n  .content-bottom {\n    @apply flex-col;\n  }\n  .back,\n  .secondary {\n    @apply m-0 mb-1;\n  }\n}\n\n/**\n * Conditional styles for when Modal is slotted in Shell\n */\n\n.container.slotted-in-shell {\n  position: absolute;\n  pointer-events: auto;\n  calcite-scrim {\n    position: absolute;\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport {\n  ensureId,\n  focusFirstTabbable,\n  getSlotted,\n  slotChangeHasAssignedElement,\n} from \"../../utils/dom\";\nimport {\n  activateFocusTrap,\n  connectFocusTrap,\n  deactivateFocusTrap,\n  FocusTrap,\n  FocusTrapComponent,\n  updateFocusTrapElements,\n} from \"../../utils/focusTrapComponent\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { createObserver } from \"../../utils/observers\";\nimport { onToggleOpenCloseComponent, OpenCloseComponent } from \"../../utils/openCloseComponent\";\nimport { Kind, Scale } from \"../interfaces\";\nimport { CSS, ICONS, SLOTS } from \"./resources\";\n\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { ModalMessages } from \"./assets/modal/t9n\";\n\nimport { componentOnReady, getIconScale } from \"../../utils/component\";\n\nlet totalOpenModals: number = 0;\nlet initialDocumentOverflowStyle: string = \"\";\n\n/**\n * @slot header - A slot for adding header text.\n * @slot content - A slot for adding the component's content.\n * @slot content-top - A slot for adding content to the component's sticky header, where content remains at the top of the component when scrolling up and down.\n * @slot content-bottom - A slot for adding content to the component's sticky footer, where content remains at the bottom of the component when scrolling up and down.\n * @slot primary - A slot for adding a primary button.\n * @slot secondary - A slot for adding a secondary button.\n * @slot back - A slot for adding a back button.\n */\n\n@Component({\n  tag: \"calcite-modal\",\n  styleUrl: \"modal.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Modal\n  implements\n    ConditionalSlotComponent,\n    OpenCloseComponent,\n    FocusTrapComponent,\n    LoadableComponent,\n    LocalizedComponent,\n    T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, displays and positions the component.  */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * We use an internal property to handle styles for when a modal is actually opened, not just when the open attribute is applied. This is a property because we need to apply styles to the host element and to keep the styles present while beforeClose is.\n   *\n   * @internal\n   */\n  @Prop({ mutable: true, reflect: true }) opened = false;\n\n  /** Passes a function to run before the component closes. */\n  @Prop() beforeClose: (el: HTMLCalciteModalElement) => Promise<void>;\n\n  /** When `true`, disables the component's close button. */\n  @Prop({ reflect: true }) closeButtonDisabled = false;\n\n  /**\n   * When `true`, prevents focus trapping.\n   */\n  @Prop({ reflect: true }) focusTrapDisabled = false;\n\n  @Watch(\"focusTrapDisabled\")\n  handleFocusTrapDisabled(focusTrapDisabled: boolean): void {\n    if (!this.open) {\n      return;\n    }\n\n    focusTrapDisabled ? deactivateFocusTrap(this) : activateFocusTrap(this);\n  }\n\n  /** When `true`, disables the closing of the component when clicked outside. */\n  @Prop({ reflect: true }) outsideCloseDisabled = false;\n\n  /** When `true`, prevents the component from expanding to the entire screen on mobile devices. */\n  @Prop({ reflect: true }) docked: boolean;\n\n  /** When `true`, disables the default close on escape behavior. */\n  @Prop({ reflect: true }) escapeDisabled = false;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** Specifies the width of the component. */\n  @Prop({ reflect: true }) widthScale: Scale = \"m\";\n\n  /** Sets the component to always be fullscreen. Overrides `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`. */\n  @Prop({ reflect: true }) fullscreen: boolean;\n\n  /** Specifies the kind of the component, which will apply to top border. */\n  @Prop({ reflect: true }) kind: Extract<\"brand\" | \"danger\" | \"info\" | \"success\" | \"warning\", Kind>;\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: ModalMessages;\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<ModalMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\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 }) slottedInShell: boolean;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n    // when modal initially renders, if active was set we need to open as watcher doesn't fire\n    if (this.open) {\n      this.openModal();\n    }\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  connectedCallback(): void {\n    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });\n    this.cssVarObserver?.observe(this.el, { attributeFilter: [\"style\"] });\n    this.updateSizeCssVars();\n    this.updateFooterVisibility();\n    connectConditionalSlotComponent(this);\n    connectLocalized(this);\n    connectMessages(this);\n    connectFocusTrap(this);\n  }\n\n  disconnectedCallback(): void {\n    this.removeOverflowHiddenClass();\n    this.mutationObserver?.disconnect();\n    this.cssVarObserver?.disconnect();\n    disconnectConditionalSlotComponent(this);\n    deactivateFocusTrap(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.slottedInShell = false;\n  }\n\n  render(): VNode {\n    return (\n      <Host\n        aria-describedby={this.contentId}\n        aria-labelledby={this.titleId}\n        aria-modal=\"true\"\n        role=\"dialog\"\n      >\n        <div\n          class={{\n            [CSS.container]: true,\n            [CSS.containerOpen]: this.opened,\n            [CSS.slottedInShell]: this.slottedInShell,\n          }}\n        >\n          <calcite-scrim class={CSS.scrim} onClick={this.handleOutsideClose} />\n          {this.renderStyle()}\n          <div\n            class={{\n              [CSS.modal]: true,\n            }}\n            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n            ref={this.setTransitionEl}\n          >\n            <div class={CSS.header}>\n              {this.renderCloseButton()}\n              <header class={CSS.title}>\n                <slot name={CSS.header} />\n              </header>\n            </div>\n            {this.renderContentTop()}\n            <div\n              class={{\n                [CSS.content]: true,\n                [CSS.contentNoFooter]: !this.hasFooter,\n              }}\n              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n              ref={(el) => (this.modalContent = el)}\n            >\n              <slot name={SLOTS.content} />\n            </div>\n            {this.renderContentBottom()}\n            {this.renderFooter()}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  renderFooter(): VNode {\n    return this.hasFooter ? (\n      <div class={CSS.footer} key=\"footer\">\n        <span class={CSS.back}>\n          <slot name={SLOTS.back} />\n        </span>\n        <span class={CSS.secondary}>\n          <slot name={SLOTS.secondary} />\n        </span>\n        <span class={CSS.primary}>\n          <slot name={SLOTS.primary} />\n        </span>\n      </div>\n    ) : null;\n  }\n\n  renderContentTop(): VNode {\n    return (\n      <div class={CSS.contentTop} hidden={!this.hasContentTop}>\n        <slot name={SLOTS.contentTop} onSlotchange={this.contentTopSlotChangeHandler} />\n      </div>\n    );\n  }\n\n  renderContentBottom(): VNode {\n    return (\n      <div class={CSS.contentBottom} hidden={!this.hasContentBottom}>\n        <slot name={SLOTS.contentBottom} onSlotchange={this.contentBottomSlotChangeHandler} />\n      </div>\n    );\n  }\n\n  renderCloseButton(): VNode {\n    return !this.closeButtonDisabled ? (\n      <button\n        aria-label={this.messages.close}\n        class={CSS.close}\n        key=\"button\"\n        onClick={this.handleCloseClick}\n        title={this.messages.close}\n        // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n        ref={(el) => (this.closeButtonEl = el)}\n      >\n        <calcite-icon icon={ICONS.close} scale={getIconScale(this.scale)} />\n      </button>\n    ) : null;\n  }\n\n  renderStyle(): VNode {\n    if (!this.fullscreen && (this.cssWidth || this.cssHeight)) {\n      return (\n        <style>\n          {`.${CSS.container} {\n              ${this.docked && this.cssWidth ? `align-items: center !important;` : \"\"}\n            }\n            .${CSS.modal} {\n              block-size: ${this.cssHeight ? this.cssHeight : \"auto\"} !important;\n              ${this.cssWidth ? `inline-size: ${this.cssWidth} !important;` : \"\"}\n              ${this.cssWidth ? `max-inline-size: ${this.cssWidth} !important;` : \"\"}\n              ${this.docked ? `border-radius: var(--calcite-border-radius) !important;` : \"\"}\n            }\n            @media screen and (max-width: ${this.cssWidth}) {\n              .${CSS.container} {\n                ${this.docked ? `align-items: flex-end !important;` : \"\"}\n              }\n              .${CSS.modal} {\n                max-block-size: 100% !important;\n                inline-size: 100% !important;\n                max-inline-size: 100% !important;\n                min-inline-size: 100% !important;\n                margin: 0 !important;\n                ${!this.docked ? `block-size: 100% !important;` : \"\"}\n                ${!this.docked ? `border-radius: 0 !important;` : \"\"}\n                ${\n                  this.docked\n                    ? `border-radius: var(--calcite-border-radius) var(--calcite-border-radius) 0 0 !important;`\n                    : \"\"\n                }\n              }\n            }\n          `}\n        </style>\n      );\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties/ State\n  //\n  //--------------------------------------------------------------------------\n\n  ignoreOpenChange = false;\n\n  @Element() el: HTMLCalciteModalElement;\n\n  modalContent: HTMLDivElement;\n\n  initialOverflowCSS: string;\n\n  private mutationObserver: MutationObserver = createObserver(\"mutation\", () =>\n    this.handleMutationObserver(),\n  );\n\n  private cssVarObserver: MutationObserver = createObserver(\"mutation\", () => {\n    this.updateSizeCssVars();\n  });\n\n  titleId: string;\n\n  openTransitionProp = \"opacity\";\n\n  transitionEl: HTMLDivElement;\n\n  focusTrap: FocusTrap;\n\n  closeButtonEl: HTMLButtonElement;\n\n  contentId: string;\n\n  @State() cssWidth: string | number;\n\n  @State() cssHeight: string | number;\n\n  @State() hasFooter = true;\n\n  @State() hasContentTop = false;\n\n  @State() hasContentBottom = false;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: ModalMessages;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"keydown\", { target: \"window\" })\n  handleEscape(event: KeyboardEvent): void {\n    if (this.open && !this.escapeDisabled && event.key === \"Escape\" && !event.defaultPrevented) {\n      this.open = false;\n      event.preventDefault();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n  /** Fires when the component is requested to be closed and before the closing transition begins. */\n  @Event({ cancelable: false }) calciteModalBeforeClose: EventEmitter<void>;\n\n  /** Fires when the component is closed and animation is complete. */\n  @Event({ cancelable: false }) calciteModalClose: 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 }) calciteModalBeforeOpen: EventEmitter<void>;\n\n  /** Fires when the component is open and animation is complete. */\n  @Event({ cancelable: false }) calciteModalOpen: 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   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    focusFirstTabbable(this.el);\n  }\n\n  /**\n   * Updates the element(s) that are used within the focus-trap of the component.\n   */\n  @Method()\n  async updateFocusTrapElements(): Promise<void> {\n    updateFocusTrapElements(this);\n  }\n\n  /**\n   * Sets the scroll top of the component's content.\n   *\n   * @param top\n   * @param left\n   */\n  @Method()\n  async scrollContent(top = 0, left = 0): Promise<void> {\n    if (this.modalContent) {\n      if (this.modalContent.scrollTo) {\n        this.modalContent.scrollTo({ top, left, behavior: \"smooth\" });\n      } else {\n        this.modalContent.scrollTop = top;\n        this.modalContent.scrollLeft = left;\n      }\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private setTransitionEl = (el: HTMLDivElement): void => {\n    this.transitionEl = el;\n  };\n\n  onBeforeOpen(): void {\n    this.transitionEl.classList.add(CSS.openingActive);\n    this.calciteModalBeforeOpen.emit();\n  }\n\n  onOpen(): void {\n    this.transitionEl.classList.remove(CSS.openingIdle, CSS.openingActive);\n    this.calciteModalOpen.emit();\n    activateFocusTrap(this);\n  }\n\n  onBeforeClose(): void {\n    this.transitionEl.classList.add(CSS.closingActive);\n    this.calciteModalBeforeClose.emit();\n  }\n\n  onClose(): void {\n    this.transitionEl.classList.remove(CSS.closingIdle, CSS.closingActive);\n    this.calciteModalClose.emit();\n    deactivateFocusTrap(this);\n  }\n\n  @Watch(\"open\")\n  toggleModal(value: boolean): void {\n    if (this.ignoreOpenChange) {\n      return;\n    }\n\n    if (value) {\n      this.openModal();\n    } else {\n      this.closeModal();\n    }\n  }\n\n  @Watch(\"opened\")\n  handleOpenedChange(value: boolean): void {\n    const idleClass = value ? CSS.openingIdle : CSS.closingIdle;\n    this.transitionEl.classList.add(idleClass);\n    onToggleOpenCloseComponent(this);\n  }\n\n  private openEnd = (): void => {\n    this.setFocus();\n    this.el.removeEventListener(\"calciteModalOpen\", this.openEnd);\n  };\n\n  private handleCloseClick = () => {\n    this.open = false;\n  };\n\n  private async openModal(): Promise<void> {\n    await componentOnReady(this.el);\n    this.el.addEventListener(\"calciteModalOpen\", this.openEnd);\n    this.opened = true;\n    const titleEl = getSlotted(this.el, SLOTS.header);\n    const contentEl = getSlotted(this.el, SLOTS.content);\n\n    this.titleId = ensureId(titleEl);\n    this.contentId = ensureId(contentEl);\n\n    if (!this.slottedInShell) {\n      if (totalOpenModals === 0) {\n        initialDocumentOverflowStyle = document.documentElement.style.overflow;\n      }\n\n      totalOpenModals++;\n      // use an inline style instead of a utility class to avoid global class declarations.\n      document.documentElement.style.setProperty(\"overflow\", \"hidden\");\n    }\n  }\n\n  private handleOutsideClose = (): void => {\n    if (this.outsideCloseDisabled) {\n      return;\n    }\n\n    this.open = false;\n  };\n\n  closeModal = async (): Promise<void> => {\n    if (this.beforeClose) {\n      try {\n        await this.beforeClose(this.el);\n      } catch (_error) {\n        // close prevented\n        requestAnimationFrame(() => {\n          this.ignoreOpenChange = true;\n          this.open = true;\n          this.ignoreOpenChange = false;\n        });\n        return;\n      }\n    }\n\n    totalOpenModals--;\n    this.opened = false;\n    this.removeOverflowHiddenClass();\n  };\n\n  private removeOverflowHiddenClass(): void {\n    document.documentElement.style.setProperty(\"overflow\", initialDocumentOverflowStyle);\n  }\n\n  private handleMutationObserver = (): void => {\n    this.updateFooterVisibility();\n    this.updateFocusTrapElements();\n  };\n\n  private updateFooterVisibility = (): void => {\n    this.hasFooter = !!getSlotted(this.el, [SLOTS.back, SLOTS.primary, SLOTS.secondary]);\n  };\n\n  private updateSizeCssVars = (): void => {\n    this.cssWidth = getComputedStyle(this.el).getPropertyValue(\"--calcite-modal-width\");\n    this.cssHeight = getComputedStyle(this.el).getPropertyValue(\"--calcite-modal-height\");\n  };\n\n  private contentTopSlotChangeHandler = (event: Event): void => {\n    this.hasContentTop = slotChangeHasAssignedElement(event);\n  };\n\n  private contentBottomSlotChangeHandler = (event: Event): void => {\n    this.hasContentBottom = slotChangeHasAssignedElement(event);\n  };\n}\n"],"mappings":";;;;;8iBAAO,MAAMA,EAAM,CACjBC,MAAO,QACPC,MAAO,QACPC,OAAQ,SACRC,OAAQ,SACRC,MAAO,QACPC,KAAM,OACNC,MAAO,QACPC,UAAW,YACXC,QAAS,UACTC,UAAW,YACXC,cAAe,kBACfC,QAAS,UACTC,gBAAiB,qBACjBC,cAAe,iBACfC,WAAY,cACZC,eAAgB,mBAIhBC,YAAa,sBACbC,cAAe,wBACfC,YAAa,sBACbC,cAAe,yBAUV,MAAMC,EAAQ,CACnBd,MAAO,KAGF,MAAMe,EAAQ,CACnBV,QAAS,UACTE,cAAe,iBACfC,WAAY,cACZZ,OAAQ,SACRG,KAAM,OACNE,UAAW,YACXC,QAAS,WC5CX,MAAMc,EAAW,u3UCwDjB,IAAIC,EAA0B,EAC9B,IAAIC,EAAuC,G,MAkB9BC,EAAK,M,iQAmRhBC,KAAAC,iBAAmB,MAQXD,KAAAE,iBAAqCC,EAAe,YAAY,IACtEH,KAAKI,2BAGCJ,KAAAK,eAAmCF,EAAe,YAAY,KACpEH,KAAKM,mBAAmB,IAK1BN,KAAAO,mBAAqB,UA4GbP,KAAAQ,gBAAmBC,IACzBT,KAAKU,aAAeD,CAAE,EA6ChBT,KAAAW,QAAU,KAChBX,KAAKY,WACLZ,KAAKS,GAAGI,oBAAoB,mBAAoBb,KAAKW,QAAQ,EAGvDX,KAAAc,iBAAmB,KACzBd,KAAKe,KAAO,KAAK,EAwBXf,KAAAgB,mBAAqB,KAC3B,GAAIhB,KAAKiB,qBAAsB,CAC7B,M,CAGFjB,KAAKe,KAAO,KAAK,EAGnBf,KAAAkB,WAAaC,UACX,GAAInB,KAAKoB,YAAa,CACpB,UACQpB,KAAKoB,YAAYpB,KAAKS,G,CAC5B,MAAOY,GAEPC,uBAAsB,KACpBtB,KAAKC,iBAAmB,KACxBD,KAAKe,KAAO,KACZf,KAAKC,iBAAmB,KAAK,IAE/B,M,EAIJJ,IACAG,KAAKuB,OAAS,MACdvB,KAAKwB,2BAA2B,EAO1BxB,KAAAI,uBAAyB,KAC/BJ,KAAKyB,yBACLzB,KAAK0B,yBAAyB,EAGxB1B,KAAAyB,uBAAyB,KAC/BzB,KAAK2B,YAAcC,EAAW5B,KAAKS,GAAI,CAACd,EAAMhB,KAAMgB,EAAMb,QAASa,EAAMd,WAAW,EAG9EmB,KAAAM,kBAAoB,KAC1BN,KAAK6B,SAAWC,iBAAiB9B,KAAKS,IAAIsB,iBAAiB,yBAC3D/B,KAAKgC,UAAYF,iBAAiB9B,KAAKS,IAAIsB,iBAAiB,yBAAyB,EAG/E/B,KAAAiC,4BAA+BC,IACrClC,KAAKmC,cAAgBC,EAA6BF,EAAM,EAGlDlC,KAAAqC,+BAAkCH,IACxClC,KAAKsC,iBAAmBF,EAA6BF,EAAM,E,UAhgBd,M,YAOE,M,oDAMF,M,uBAKF,M,0BAYG,M,0CAMN,M,WAGF,I,gBAGK,I,oMAyPxB,K,mBAEI,M,sBAEG,M,8DAlR5B,uBAAAK,CAAwBC,GACtB,IAAKxC,KAAKe,KAAM,CACd,M,CAGFyB,EAAoBC,EAAoBzC,MAAQ0C,EAAkB1C,K,CAuCpE,gBAAA2C,G,CAkBA,uBAAMC,SACEC,EAAc7C,MACpB8C,EAAuB9C,MAEvB,GAAIA,KAAKe,KAAM,CACbf,KAAK+C,W,EAIT,gBAAAC,GACEC,EAAmBjD,K,CAGrB,iBAAAkD,GACElD,KAAKE,kBAAkBiD,QAAQnD,KAAKS,GAAI,CAAE2C,UAAW,KAAMC,QAAS,OACpErD,KAAKK,gBAAgB8C,QAAQnD,KAAKS,GAAI,CAAE6C,gBAAiB,CAAC,WAC1DtD,KAAKM,oBACLN,KAAKyB,yBACL8B,EAAgCvD,MAChCwD,EAAiBxD,MACjByD,EAAgBzD,MAChB0D,EAAiB1D,K,CAGnB,oBAAA2D,GACE3D,KAAKwB,4BACLxB,KAAKE,kBAAkB0D,aACvB5D,KAAKK,gBAAgBuD,aACrBC,EAAmC7D,MACnCyC,EAAoBzC,MACpB8D,EAAoB9D,MACpB+D,EAAmB/D,MACnBA,KAAKX,eAAiB,K,CAGxB,MAAA2E,GACE,OACEC,EAACC,EAAI,oBACelE,KAAKmE,UAAS,kBACfnE,KAAKoE,QAAO,aAClB,OACXC,KAAK,UAELJ,EAAA,OACEK,MAAO,CACL,CAACjG,EAAIU,WAAY,KACjB,CAACV,EAAIW,eAAgBgB,KAAKuB,OAC1B,CAAClD,EAAIgB,gBAAiBW,KAAKX,iBAG7B4E,EAAA,iBAAeK,MAAOjG,EAAIK,MAAO6F,QAASvE,KAAKgB,qBAC9ChB,KAAKwE,cACNP,EAAA,OACEK,MAAO,CACL,CAACjG,EAAIC,OAAQ,MAGfmG,IAAKzE,KAAKQ,iBAEVyD,EAAA,OAAKK,MAAOjG,EAAIG,QACbwB,KAAK0E,oBACNT,EAAA,UAAQK,MAAOjG,EAAIE,OACjB0F,EAAA,QAAMU,KAAMtG,EAAIG,WAGnBwB,KAAK4E,mBACNX,EAAA,OACEK,MAAO,CACL,CAACjG,EAAIY,SAAU,KACf,CAACZ,EAAIa,kBAAmBc,KAAK2B,WAG/B8C,IAAMhE,GAAQT,KAAK6E,aAAepE,GAElCwD,EAAA,QAAMU,KAAMhF,EAAMV,WAEnBe,KAAK8E,sBACL9E,KAAK+E,iB,CAOhB,YAAAA,GACE,OAAO/E,KAAK2B,UACVsC,EAAA,OAAKK,MAAOjG,EAAII,OAAQuG,IAAI,UAC1Bf,EAAA,QAAMK,MAAOjG,EAAIM,MACfsF,EAAA,QAAMU,KAAMhF,EAAMhB,QAEpBsF,EAAA,QAAMK,MAAOjG,EAAIQ,WACfoF,EAAA,QAAMU,KAAMhF,EAAMd,aAEpBoF,EAAA,QAAMK,MAAOjG,EAAIS,SACfmF,EAAA,QAAMU,KAAMhF,EAAMb,YAGpB,I,CAGN,gBAAA8F,GACE,OACEX,EAAA,OAAKK,MAAOjG,EAAIe,WAAY6F,QAASjF,KAAKmC,eACxC8B,EAAA,QAAMU,KAAMhF,EAAMP,WAAY8F,aAAclF,KAAKiC,8B,CAKvD,mBAAA6C,GACE,OACEb,EAAA,OAAKK,MAAOjG,EAAIc,cAAe8F,QAASjF,KAAKsC,kBAC3C2B,EAAA,QAAMU,KAAMhF,EAAMR,cAAe+F,aAAclF,KAAKqC,iC,CAK1D,iBAAAqC,GACE,OAAQ1E,KAAKmF,oBACXlB,EAAA,uBACcjE,KAAKoF,SAASxG,MAC1B0F,MAAOjG,EAAIO,MACXoG,IAAI,SACJT,QAASvE,KAAKc,iBACdvC,MAAOyB,KAAKoF,SAASxG,MAErB6F,IAAMhE,GAAQT,KAAKqF,cAAgB5E,GAEnCwD,EAAA,gBAAcqB,KAAM5F,EAAMd,MAAO2G,MAAOC,EAAaxF,KAAKuF,UAE1D,I,CAGN,WAAAf,GACE,IAAKxE,KAAKyF,aAAezF,KAAK6B,UAAY7B,KAAKgC,WAAY,CACzD,OACEiC,EAAA,aACG,IAAI5F,EAAIU,8BACHiB,KAAK0F,QAAU1F,KAAK6B,SAAW,kCAAoC,mCAEpExD,EAAIC,sCACS0B,KAAKgC,UAAYhC,KAAKgC,UAAY,qCAC9ChC,KAAK6B,SAAW,gBAAgB7B,KAAK6B,uBAAyB,qBAC9D7B,KAAK6B,SAAW,oBAAoB7B,KAAK6B,uBAAyB,qBAClE7B,KAAK0F,OAAS,0DAA4D,gEAE9C1F,KAAK6B,+BAChCxD,EAAIU,gCACHiB,KAAK0F,OAAS,oCAAsC,uCAErDrH,EAAIC,2QAMF0B,KAAK0F,OAAS,+BAAiC,wBAC/C1F,KAAK0F,OAAS,+BAAiC,uBAEhD1F,KAAK0F,OACD,2FACA,iD,EAyDpB,qBAAAC,GACEC,EAAe5F,KAAMA,KAAK6F,gB,CAY5B,YAAAC,CAAa5D,GACX,GAAIlC,KAAKe,OAASf,KAAK+F,gBAAkB7D,EAAM8C,MAAQ,WAAa9C,EAAM8D,iBAAkB,CAC1FhG,KAAKe,KAAO,MACZmB,EAAM+D,gB,EAgCV,cAAMrF,SACEsF,EAAmBlG,MACzBmG,EAAmBnG,KAAKS,G,CAO1B,6BAAMiB,GACJA,EAAwB1B,K,CAU1B,mBAAMoG,CAAcC,EAAM,EAAGC,EAAO,GAClC,GAAItG,KAAK6E,aAAc,CACrB,GAAI7E,KAAK6E,aAAa0B,SAAU,CAC9BvG,KAAK6E,aAAa0B,SAAS,CAAEF,MAAKC,OAAME,SAAU,U,KAC7C,CACLxG,KAAK6E,aAAa4B,UAAYJ,EAC9BrG,KAAK6E,aAAa6B,WAAaJ,C,GAerC,YAAAK,GACE3G,KAAKU,aAAakG,UAAUC,IAAIxI,EAAIkB,eACpCS,KAAK8G,uBAAuBC,M,CAG9B,MAAAC,GACEhH,KAAKU,aAAakG,UAAUK,OAAO5I,EAAIiB,YAAajB,EAAIkB,eACxDS,KAAKkH,iBAAiBH,OACtBrE,EAAkB1C,K,CAGpB,aAAAmH,GACEnH,KAAKU,aAAakG,UAAUC,IAAIxI,EAAIoB,eACpCO,KAAKoH,wBAAwBL,M,CAG/B,OAAAM,GACErH,KAAKU,aAAakG,UAAUK,OAAO5I,EAAImB,YAAanB,EAAIoB,eACxDO,KAAKsH,kBAAkBP,OACvBtE,EAAoBzC,K,CAItB,WAAAuH,CAAYC,GACV,GAAIxH,KAAKC,iBAAkB,CACzB,M,CAGF,GAAIuH,EAAO,CACTxH,KAAK+C,W,KACA,CACL/C,KAAKkB,Y,EAKT,kBAAAuG,CAAmBD,GACjB,MAAME,EAAYF,EAAQnJ,EAAIiB,YAAcjB,EAAImB,YAChDQ,KAAKU,aAAakG,UAAUC,IAAIa,GAChCC,EAA2B3H,K,CAYrB,eAAM+C,SACN6E,EAAiB5H,KAAKS,IAC5BT,KAAKS,GAAGoH,iBAAiB,mBAAoB7H,KAAKW,SAClDX,KAAKuB,OAAS,KACd,MAAMuG,EAAUlG,EAAW5B,KAAKS,GAAId,EAAMnB,QAC1C,MAAMuJ,EAAYnG,EAAW5B,KAAKS,GAAId,EAAMV,SAE5Ce,KAAKoE,QAAU4D,EAASF,GACxB9H,KAAKmE,UAAY6D,EAASD,GAE1B,IAAK/H,KAAKX,eAAgB,CACxB,GAAIQ,IAAoB,EAAG,CACzBC,EAA+BmI,SAASC,gBAAgBC,MAAMC,Q,CAGhEvI,IAEAoI,SAASC,gBAAgBC,MAAME,YAAY,WAAY,S,EAgCnD,yBAAA7G,GACNyG,SAASC,gBAAgBC,MAAME,YAAY,WAAYvI,E"}

package/dist/calcite/p-bb1f73f1.entry.js

@@ -0,0 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.6.0-next.3
+ */
+import{h as e,r as t,c as i,H as s,e as o,g as r}from"./p-819bde10.js";import{s as n,l as a}from"./p-224218c9.js";import{c as l}from"./p-e54e5b79.js";import{g as c}from"./p-b5a7ba7b.js";import{c as h,d as p,n as d}from"./p-bdc14ccb.js";import{c as m,s as u,d as b,u as g}from"./p-a5baec64.js";import{c as f,u as v,d as y,I as z}from"./p-94e6d97e.js";import{s as x,a as w,c as k}from"./p-110e5bc8.js";import"./p-7cc4bcb2.js";import"./p-dcfcb77f.js";import"./p-e7e8f7da.js";const I={stepBar:"step-bar",stepBarActive:"step-bar--active",stepBarComplete:"step-bar--complete",stepBarDisabled:"step-bar--disabled",stepBarError:"step-bar--error",stepBarInActive:"step-bar--inactive"};const C=({disabled:t,active:i,complete:s,error:o,key:r})=>e("svg",{class:{[I.stepBar]:true},key:r},e("rect",{class:{[I.stepBarActive]:i,[I.stepBarComplete]:s,[I.stepBarDisabled]:t,[I.stepBarError]:o,[I.stepBarInActive]:true},width:"100%",x:"0",y:"0"}));const S={actionIcon:"action-icon",actionIconStart:"action-icon--start",actionIconEnd:"action-icon--end",actionContainer:"action-container",stepBarContainer:"step-bar-container",singleView:"single-view"};const A=':host([scale=s]){--calcite-internal-stepper-item-spacing-unit-s:0.25rem;--calcite-internal-stepper-action-block-size:2.75rem;--calcite-internal-stepper-action-inline-size:2rem;--calcite-internal-step-bar-gap:0.25rem}:host([scale=m]){--calcite-internal-stepper-item-spacing-unit-s:0.5rem;--calcite-internal-stepper-action-block-size:3.25rem;--calcite-internal-stepper-action-inline-size:2.5rem}:host([scale=l]){--calcite-internal-stepper-item-spacing-unit-s:0.75rem;--calcite-internal-stepper-action-block-size:4rem;--calcite-internal-stepper-action-inline-size:3rem;--calcite-internal-step-bar-gap:0.75rem}:host{display:flex}.container{position:relative;display:flex;inline-size:100%;min-inline-size:-moz-fit-content;min-inline-size:fit-content;flex-direction:row;flex-wrap:wrap;align-items:stretch;justify-content:space-between}:host([layout=vertical]) .container{flex:1 1 auto;flex-direction:column}:host([layout=horizontal]) .container,:host([layout=horizontal-single]) .container{display:grid;grid-template-areas:"items" "content";gap:0.5rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal][scale=s]) .container,:host([layout=horizontal-single][scale=s]) .container{gap:0.25rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal][scale=l]) .container,:host([layout=horizontal-single][scale=l]) .container{gap:0.75rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal]) .container.single-view{display:flex;grid-template-columns:none}.action-icon{position:relative;display:flex;flex-grow:0;block-size:var(--calcite-internal-stepper-action-block-size);inline-size:var(--calcite-internal-stepper-action-inline-size)}.action-container{position:absolute;display:flex;justify-content:space-between;padding-block:0.25rem;inline-size:100%}.step-bar{display:flex;block-size:100%;inline-size:100%}.step-bar-container{position:absolute;display:flex;align-items:flex-start;justify-content:space-between;block-size:0.125rem;inline-size:100%;gap:var(--calcite-internal-step-bar-gap, 0.5rem)}.step-bar--inactive{fill:var(--calcite-color-border-3, #dfdfdf);fill-opacity:1;block-size:100%}.step-bar--active{fill:var(--calcite-color-brand)}.step-bar--complete{fill:var(--calcite-color-brand);fill-opacity:0.5}.step-bar--error{fill:var(--calcite-color-status-danger)}.step-bar--disabled{opacity:0.5}:host([hidden]){display:none}[hidden]{display:none}';const E=class{constructor(e){t(this,e);this.calciteStepperItemChange=i(this,"calciteStepperItemChange",6);this.calciteInternalStepperItemChange=i(this,"calciteInternalStepperItemChange",6);this.enabledItems=[];this.itemMap=new Map;this.items=[];this.mutationObserver=l("mutation",(()=>this.updateItems()));this.multipleViewMode=false;this.guid=`calcite-stepper-action-${c()}`;this.resizeObserver=l("resize",(e=>this.elWidth=e[0].contentRect.width));this.handleActionClick=e=>{const t=this.currentActivePosition;const i=e.target;if(i.getAttribute("data-position")==="start"){this.prevStep()}else{this.nextStep()}if(typeof this.currentActivePosition==="number"&&t!==this.currentActivePosition&&!this.items[this.currentActivePosition].disabled){this.calciteStepperItemChange.emit()}};this.setContainerEl=e=>{this.containerEl=e};this.handleDefaultSlotChange=e=>{const t=n(e).filter((e=>e?.tagName==="CALCITE-STEPPER-ITEM"));this.items=t;const i=Array(t.length).fill("1fr").join(" ");this.containerEl.style.gridTemplateAreas=i;this.containerEl.style.gridTemplateColumns=i;this.setStepperItemNumberingSystem()};this.icon=false;this.layout="horizontal";this.numbered=false;this.scale="m";this.messages=undefined;this.numberingSystem=undefined;this.selectedItem=null;this.messageOverrides=undefined;this.defaultMessages=undefined;this.effectiveLocale="";this.currentActivePosition=undefined;this.elWidth=undefined}handleItemPropChange(){this.updateItems()}numberingSystemChange(){this.setStepperItemNumberingSystem()}onMessagesChange(){}connectedCallback(){this.mutationObserver?.observe(this.el,{childList:true});this.updateItems();m(this);h(this)}async componentWillLoad(){await u(this)}componentDidLoad(){this.resizeObserver?.observe(this.containerEl);if(typeof this.currentActivePosition!=="number"){const e=this.getFirstEnabledStepperPosition();if(e===0){this.currentActivePosition=e}this.calciteInternalStepperItemChange.emit({position:e})}}disconnectedCallback(){this.resizeObserver?.disconnect();b(this);p(this);this.mutationObserver?.disconnect()}render(){return e(s,{"aria-label":this.messages.label,role:"region"},e("div",{class:{container:true,[S.singleView]:this.layout==="horizontal-single"},ref:this.setContainerEl},this.layout==="horizontal-single"&&e("div",{class:{[S.stepBarContainer]:true}},this.items.map(((t,i)=>e(C,{active:i===this.currentActivePosition,complete:t.complete&&i!==this.currentActivePosition&&!t.error,disabled:t.disabled&&i!==this.currentActivePosition,error:t.error&&i!==this.currentActivePosition,key:i})))),this.layout==="horizontal-single"&&e("div",{class:{[S.actionContainer]:true}},this.renderAction("start"),this.renderAction("end")),e("slot",{onSlotchange:this.handleDefaultSlotChange})))}calciteInternalStepperItemKeyEvent(e){const t=e.detail.item;const i=e.target;switch(t.key){case"ArrowDown":case"ArrowRight":a(this.enabledItems,i,"next");break;case"ArrowUp":case"ArrowLeft":a(this.enabledItems,i,"previous");break;case"Home":a(this.enabledItems,i,"first");break;case"End":a(this.enabledItems,i,"last");break}e.stopPropagation()}registerItem(e){const t=e.target;const{content:i,position:s}=e.detail;this.itemMap.set(t,{position:s,content:i});this.enabledItems=this.filterItems();e.stopPropagation()}updateItem(e){const{position:t}=e.detail;if(typeof t==="number"){this.currentActivePosition=t;this.selectedItem=e.target}this.calciteInternalStepperItemChange.emit({position:t})}handleUserRequestedStepperItemSelect(){this.calciteStepperItemChange.emit()}async nextStep(){const e=this.getEnabledStepIndex(this.currentActivePosition+1,"next");if(typeof e!=="number"){return}this.updateStep(e)}async prevStep(){const e=this.getEnabledStepIndex(this.currentActivePosition-1,"previous");if(typeof e!=="number"){return}this.updateStep(e)}async goToStep(e){const t=e-1;if(this.currentActivePosition!==t){this.updateStep(t)}}async startStep(){const e=this.getEnabledStepIndex(0,"next");if(typeof e!=="number"){return}this.updateStep(e)}async endStep(){const e=this.getEnabledStepIndex(this.items.length-1,"previous");if(typeof e!=="number"){return}this.updateStep(e)}effectiveLocaleChange(){g(this,this.effectiveLocale)}handlePositionChange(){o((()=>{this.determineActiveStepper()}))}handleElWidthChange(){o((()=>{this.determineActiveStepper()}))}updateItems(){this.el.querySelectorAll("calcite-stepper-item").forEach((e=>{e.icon=this.icon;e.numbered=this.numbered;e.layout=this.layout;e.scale=this.scale}))}determineActiveStepper(){const e=this.items.length;if(!this.elWidth||!e||this.layout!=="horizontal-single"||e===1){return}const t=this.currentActivePosition||0;if(this.layout==="horizontal-single"){this.multipleViewMode=false;this.items.forEach(((e,i)=>{e.hidden=i!==t}))}}getEnabledStepIndex(e,t="next"){const{items:i,currentActivePosition:s}=this;let o=e;while(i[o]?.disabled&&this.layout!=="horizontal-single"){o=o+(t==="previous"?-1:1)}return o!==s&&o<i.length&&o>=0?o:null}updateStep(e){this.currentActivePosition=e;this.calciteInternalStepperItemChange.emit({position:e})}filterItems(){return this.items.filter((e=>!e.disabled))}setStepperItemNumberingSystem(){this.items.forEach((e=>{e.numberingSystem=this.numberingSystem}))}renderAction(t){const i=t==="start";const s=i?"chevron-left":"chevron-right";const{currentActivePosition:o,multipleViewMode:r,layout:n}=this;const a=this.items.length;const l=`${this.guid}-${i?"start":"end"}`;return n==="horizontal-single"&&!r?e("calcite-action",{alignment:"center",appearance:"transparent",class:{[S.actionIcon]:true},compact:true,"data-position":t,disabled:o===0&&i||o===a-1&&!i,icon:s,iconFlipRtl:true,id:l,onClick:this.handleActionClick,scale:this.scale,text:i?this.messages.previousStep:this.messages.nextStep}):null}getFirstEnabledStepperPosition(){const e=this.items.findIndex((e=>!e.disabled));if(e>-1){return e}return 0}static get assetsDirs(){return["assets"]}get el(){return r(this)}static get watchers(){return{icon:["handleItemPropChange"],layout:["handleItemPropChange"],numbered:["handleItemPropChange"],scale:["handleItemPropChange"],numberingSystem:["numberingSystemChange"],messageOverrides:["onMessagesChange"],effectiveLocale:["effectiveLocaleChange"],currentActivePosition:["handlePositionChange"],elWidth:["handleElWidthChange"]}}};E.style=A;const j={container:"container",stepperItemContent:"stepper-item-content",stepperItemDescription:"stepper-item-description",stepperItemHeader:"stepper-item-header",stepperItemHeading:"stepper-item-heading",stepperItemHeaderText:"stepper-item-header-text",stepperItemNumber:"stepper-item-number",visuallyHidden:"visually-hidden"};const L=":host([layout=horizontal][disabled]) .stepper-item-header,:host([layout=horizontal-single][disabled]) .stepper-item-header,:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([layout=horizontal][disabled]) .stepper-item-header *,:host([layout=horizontal-single][disabled]) .stepper-item-header *,:host([disabled]) *,:host([layout=horizontal][disabled]) .stepper-item-header ::slotted(*),:host([layout=horizontal-single][disabled]) .stepper-item-header ::slotted(*),:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]){--calcite-stepper-item-spacing-unit-s:0.25rem;--calcite-stepper-item-spacing-unit-m:0.75rem;--calcite-stepper-item-spacing-unit-l:1rem;--calcite-internal-stepper-action-inline-size:2rem;font-size:var(--calcite-font-size--1);line-height:1rem;margin-inline-end:0.25rem}:host([scale=s]) .stepper-item-description{font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-stepper-item-spacing-unit-s:0.5rem;--calcite-stepper-item-spacing-unit-m:1rem;--calcite-stepper-item-spacing-unit-l:1.25rem;--calcite-internal-stepper-action-inline-size:2.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;margin-inline-end:0.5rem}:host([scale=m]) .stepper-item-description{font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-stepper-item-spacing-unit-s:0.75rem;--calcite-stepper-item-spacing-unit-m:1.25rem;--calcite-stepper-item-spacing-unit-l:1.5rem;--calcite-internal-stepper-action-inline-size:3rem;font-size:var(--calcite-font-size-1);line-height:1.5rem;margin-inline-end:0.75rem}:host([scale=l]) .stepper-item-description{font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{position:relative;display:flex;flex-grow:1;flex-direction:column;align-self:flex-start;margin-block-end:var(--calcite-stepper-item-spacing-unit-s)}:host .container{position:relative;display:flex;flex-grow:1;cursor:pointer;flex-direction:column;border-width:0px;border-block-start-width:2px;border-style:solid;border-color:var(--calcite-color-border-3);color:var(--calcite-color-text-3);text-decoration-line:none;outline:2px solid transparent;outline-offset:2px;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host{outline-color:transparent}:host(:focus){outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite-color-brand)));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host .stepper-item-header{display:flex;cursor:pointer;align-items:flex-start}:host .stepper-item-content,:host .stepper-item-header{transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);padding-block:var(--calcite-stepper-item-spacing-unit-l);padding-inline-end:var(--calcite-stepper-item-spacing-unit-m);text-align:start}:host .stepper-item-header *{display:inline-flex;align-items:center;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .stepper-item-content{display:none;inline-size:100%;flex-direction:column;font-size:var(--calcite-font-size--2);line-height:1.375}:host .stepper-item-icon{margin-inline-end:var(--calcite-stepper-item-spacing-unit-m);margin-block-start:1px;display:inline-flex;block-size:0.75rem;flex-shrink:0;align-self:flex-start;color:var(--calcite-color-text-3);opacity:var(--calcite-opacity-disabled);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .stepper-item-header-text{flex-direction:column;text-align:initial;margin-inline-end:auto}:host .stepper-item-heading,:host .stepper-item-description{display:flex;inline-size:100%}:host .stepper-item-heading{margin-block-end:0.25rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2)}:host .stepper-item-description{color:var(--calcite-color-text-3)}:host .stepper-item-number{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-3);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline-end:var(--calcite-stepper-item-spacing-unit-m)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([complete]) .container{border-color:rgba(0, 122, 194, 0.5)}:host([complete]) .container .stepper-item-icon{color:var(--calcite-color-brand)}:host([error]) .container{border-block-start-color:var(--calcite-color-status-danger)}:host([error]) .container .stepper-item-number{color:var(--calcite-color-status-danger)}:host([error]) .container .stepper-item-icon{opacity:1;color:var(--calcite-color-status-danger)}:host(:hover:not([disabled]):not([selected])) .container,:host(:focus:not([disabled]):not([selected])) .container{border-block-start-color:var(--calcite-color-brand)}:host(:hover:not([disabled]):not([selected])) .container .stepper-item-heading,:host(:focus:not([disabled]):not([selected])) .container .stepper-item-heading{color:var(--calcite-color-text-1)}:host(:hover:not([disabled]):not([selected])) .container .stepper-item-description,:host(:focus:not([disabled]):not([selected])) .container .stepper-item-description{color:var(--calcite-color-text-2)}:host([error]:hover:not([disabled]):not([selected])) .container,:host([error]:focus:not([disabled]):not([selected])) .container{border-block-start-color:var(--calcite-color-status-danger-hover)}:host([selected]) .container{border-block-start-color:var(--calcite-color-brand)}:host([selected]) .container .stepper-item-heading{color:var(--calcite-color-text-1)}:host([selected]) .container .stepper-item-description{color:var(--calcite-color-text-2)}:host([selected]) .container .stepper-item-number{color:var(--calcite-color-brand)}:host([selected]) .container .stepper-item-icon{color:var(--calcite-color-brand);opacity:1}:host([selected]) .container .stepper-item-content{display:flex}:host([layout=vertical]) .container{margin-inline:0px;margin-block-start:0px;flex:1 1 auto;border-block-start-width:0px;border-style:solid;border-color:var(--calcite-color-border-3);padding-block:0px;border-inline-start-width:2px;padding-inline-start:var(--calcite-stepper-item-spacing-unit-l)}:host([layout=vertical]) .container .stepper-item-icon{order:3;margin-block:1px 0px;padding-inline-start:var(--calcite-stepper-item-spacing-unit-s);margin-inline-start:auto}:host([layout=vertical]) .container .stepper-item-header{padding-inline-end:0px}:host([layout=vertical]) .container .stepper-item-content{padding:0px}:host([layout=vertical][complete]) .container{border-color:rgba(0, 122, 194, 0.5)}:host([layout=vertical][complete]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical][complete]:focus:not([disabled]):not([selected])) .container{border-color:var(--calcite-color-brand)}:host([layout=vertical][error]) .container{border-color:var(--calcite-color-status-danger)}:host([layout=vertical][selected]) .container{border-color:var(--calcite-color-brand)}:host([layout=vertical][selected]) .container .stepper-item-content:not(:empty){margin-block-end:var(--calcite-stepper-item-spacing-unit-l)}:host([layout=vertical]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical]:focus:not([disabled]):not([selected])) .container{border-color:rgba(0, 122, 194, 0.5)}:host([layout=vertical][error]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical][error]:focus:not([disabled]):not([selected])) .container{border-color:var(--calcite-color-status-danger-hover)}:host([layout=horizontal]),:host([layout=horizontal-single]){display:contents}:host([layout=horizontal]) .container,:host([layout=horizontal-single]) .container{display:contents}:host([layout=horizontal]) .stepper-item-header,:host([layout=horizontal-single]) .stepper-item-header{border-width:0px;border-block-start-width:2px;border-style:solid;border-color:var(--calcite-color-border-3);outline-color:transparent;grid-row:items}:host([layout=horizontal]) .stepper-item-header:focus,:host([layout=horizontal-single]) .stepper-item-header:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite-color-brand)));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([layout=horizontal]) .stepper-item-content,:host([layout=horizontal-single]) .stepper-item-content{cursor:auto;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);padding-block:0;padding-inline-end:var(--calcite-stepper-item-spacing-unit-m);text-align:start}:host([layout=horizontal-single]) .stepper-item-header{grid-area:1/1/1/-1}:host([layout=horizontal]) .stepper-item-content,:host([layout=horizontal-single]) .stepper-item-content{grid-area:2/1/2/-1}:host([layout=horizontal][complete]) .stepper-item-header,:host([layout=horizontal-single][complete]) .stepper-item-header{border-color:rgba(0, 122, 194, 0.5)}:host([layout=horizontal][complete]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal][complete]:focus:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single][complete]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single][complete]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:var(--calcite-color-brand)}:host([layout=horizontal][error]) .stepper-item-header,:host([layout=horizontal-single][error]) .stepper-item-header{border-color:var(--calcite-color-status-danger)}:host([layout=horizontal][selected]) .stepper-item-header,:host([layout=horizontal-single][selected]) .stepper-item-header{border-color:var(--calcite-color-brand)}:host([layout=horizontal]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal]:focus:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:rgba(0, 122, 194, 0.5)}:host([layout=horizontal][error]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal][error]:focus:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single][error]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single][error]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:var(--calcite-color-status-danger-hover)}@media (forced-colors: active){:host .container{outline-width:0;outline-offset:0}:host(:focus),:host(:focus-visible){outline-color:canvasText}:host([selected]) .container{border-block-start-color:highlight}:host([selected]) .container .stepper-item-number{color:highlight}:host([selected]) .container .stepper-item-icon{color:highlight}:host([layout=vertical][selected]) .container{border-color:highlight}}:host([layout=horizontal-single]) .stepper-item-header{margin-inline-end:0px;box-sizing:border-box;border-style:none;inline-size:100%;padding-inline:calc(var(--calcite-internal-stepper-action-inline-size) + 0.5rem)}:host([layout=horizontal-single][error]) .container .stepper-item-number{color:var(--calcite-color-status-danger)}:host([layout=horizontal-single][error]) .container .stepper-item-icon{opacity:1;color:var(--calcite-color-status-danger)}:host([layout=horizontal-single][error][selected]),:host([layout=horizontal-single][complete][selected]) .container{color:var(--calcite-color-text-3)}:host([layout=horizontal-single][error][selected]) .stepper-item-heading,:host([layout=horizontal-single][complete][selected]) .container .stepper-item-heading{color:var(--calcite-color-text-2)}:host([layout=horizontal-single][complete][selected]) .container .stepper-item-icon{opacity:var(--calcite-opacity-disabled)}:host([layout=horizontal-single][complete][selected]) .container .stepper-item-number{color:var(--calcite-color-text-3)}.visually-hidden{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";const P=class{constructor(e){t(this,e);this.calciteInternalStepperItemKeyEvent=i(this,"calciteInternalStepperItemKeyEvent",6);this.calciteInternalStepperItemSelect=i(this,"calciteInternalStepperItemSelect",6);this.calciteInternalUserRequestedStepperItemSelect=i(this,"calciteInternalUserRequestedStepperItemSelect",6);this.calciteInternalStepperItemRegister=i(this,"calciteInternalStepperItemRegister",6);this.keyDownHandler=e=>{if(!this.disabled&&e.target===this.el){switch(e.key){case" ":case"Enter":this.emitUserRequestedItem();e.preventDefault();break;case"ArrowUp":case"ArrowDown":case"ArrowLeft":case"ArrowRight":case"Home":case"End":this.calciteInternalStepperItemKeyEvent.emit({item:e});e.preventDefault();break}}};this.handleItemClick=e=>{if(this.disabled||this.layout==="horizontal"&&e.composedPath().some((e=>e.classList?.contains("stepper-item-content")))){return}this.emitUserRequestedItem()};this.emitUserRequestedItem=()=>{this.emitRequestedItem();if(!this.disabled){const e=this.itemPosition;this.calciteInternalUserRequestedStepperItemSelect.emit({position:e})}};this.emitRequestedItem=()=>{if(!this.disabled){const e=this.itemPosition;this.calciteInternalStepperItemSelect.emit({position:e})}};this.selected=false;this.complete=false;this.error=false;this.disabled=false;this.heading=undefined;this.description=undefined;this.iconFlipRtl=false;this.numberingSystem=undefined;this.icon=false;this.layout=undefined;this.messages=undefined;this.numbered=false;this.scale="m";this.messageOverrides=undefined;this.defaultMessages=undefined;this.effectiveLocale=""}selectedHandler(){if(this.selected){this.emitRequestedItem()}}disabledWatcher(){this.registerStepperItem()}onMessagesChange(){}effectiveLocaleWatcher(e){d.numberFormatOptions={locale:e,numberingSystem:this.numberingSystem,useGrouping:false};g(this,this.effectiveLocale)}connectedCallback(){f(this);h(this);m(this)}async componentWillLoad(){x(this);this.parentStepperEl=this.el.parentElement;this.itemPosition=this.getItemPosition();this.registerStepperItem();if(this.selected){this.emitRequestedItem()}await u(this)}componentDidLoad(){w(this)}componentDidRender(){v(this)}disconnectedCallback(){y(this);p(this);b(this)}render(){return e(s,{"aria-current":this.selected?"step":"false",onClick:this.handleItemClick,onKeyDown:this.keyDownHandler,tabIndex:this.disabled?-1:0},e(z,{disabled:this.disabled},e("div",{class:j.container},this.complete&&e("span",{"aria-live":"polite",class:j.visuallyHidden},this.messages.complete),e("div",{class:j.stepperItemHeader,tabIndex:this.layout==="horizontal"&&!this.disabled?0:null,ref:e=>this.headerEl=e},this.icon?this.renderIcon():null,this.numbered?e("div",{class:j.stepperItemNumber},this.renderNumbers(),"."):null,e("div",{class:j.stepperItemHeaderText},e("span",{class:j.stepperItemHeading},this.heading),e("span",{class:j.stepperItemDescription},this.description))),e("div",{class:j.stepperItemContent},e("slot",null)))))}updateActiveItemOnChange(e){if(e.target===this.parentStepperEl||e.composedPath().includes(this.parentStepperEl)){this.selectedPosition=e.detail.position;this.determineSelectedItem()}}async setFocus(){await k(this);(this.layout==="vertical"?this.el:this.headerEl)?.focus()}renderIcon(){let t="circle";if(this.selected&&(this.layout!=="horizontal-single"||!this.error&&!this.complete)){t="circleF"}else if(this.error){t="exclamationMarkCircleF"}else if(this.complete){t="checkCircleF"}return e("calcite-icon",{class:"stepper-item-icon",flipRtl:this.iconFlipRtl,icon:t,scale:"s"})}determineSelectedItem(){this.selected=!this.disabled&&this.itemPosition===this.selectedPosition}registerStepperItem(){this.calciteInternalStepperItemRegister.emit({position:this.itemPosition})}getItemPosition(){return Array.from(this.parentStepperEl?.querySelectorAll("calcite-stepper-item")).indexOf(this.el)}renderNumbers(){d.numberFormatOptions={locale:this.effectiveLocale,numberingSystem:this.numberingSystem,useGrouping:false};return d.numberFormatter.format(this.itemPosition+1)}static get assetsDirs(){return["assets"]}get el(){return r(this)}static get watchers(){return{selected:["selectedHandler"],disabled:["disabledWatcher"],messageOverrides:["onMessagesChange"],effectiveLocale:["effectiveLocaleWatcher"]}}};P.style=L;export{E as calcite_stepper,P as calcite_stepper_item};
+//# sourceMappingURL=p-bb1f73f1.entry.js.map

package/dist/calcite/p-bb1f73f1.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CSS","stepBar","stepBarActive","stepBarComplete","stepBarDisabled","stepBarError","stepBarInActive","StepBar","disabled","active","complete","error","key","h","class","width","x","y","actionIcon","actionIconStart","actionIconEnd","actionContainer","stepBarContainer","singleView","stepperCss","Stepper","this","enabledItems","itemMap","Map","items","mutationObserver","createObserver","updateItems","multipleViewMode","guid","resizeObserver","entries","elWidth","contentRect","handleActionClick","event","currentActivePosition","target","getAttribute","prevStep","nextStep","calciteStepperItemChange","emit","setContainerEl","el","containerEl","handleDefaultSlotChange","slotChangeGetAssignedElements","filter","tagName","spacing","Array","length","fill","join","style","gridTemplateAreas","gridTemplateColumns","setStepperItemNumberingSystem","handleItemPropChange","numberingSystemChange","onMessagesChange","connectedCallback","observe","childList","connectMessages","connectLocalized","componentWillLoad","setUpMessages","componentDidLoad","enabledStepIndex","getFirstEnabledStepperPosition","calciteInternalStepperItemChange","position","disconnectedCallback","disconnect","disconnectMessages","disconnectLocalized","render","Host","messages","label","role","container","layout","ref","map","item","index","renderAction","onSlotchange","calciteInternalStepperItemKeyEvent","detail","itemToFocus","focusElementInGroup","stopPropagation","registerItem","content","set","filterItems","updateItem","selectedItem","handleUserRequestedStepperItemSelect","getEnabledStepIndex","updateStep","goToStep","step","startStep","endStep","effectiveLocaleChange","updateMessages","effectiveLocale","handlePositionChange","readTask","determineActiveStepper","handleElWidthChange","querySelectorAll","forEach","icon","numbered","scale","totalItems","activePosition","hidden","startIndex","direction","newIndex","numberingSystem","isPositionStart","path","id","alignment","appearance","compact","iconFlipRtl","onClick","text","previousStep","findIndex","stepperItemContent","stepperItemDescription","stepperItemHeader","stepperItemHeading","stepperItemHeaderText","stepperItemNumber","visuallyHidden","stepperItemCss","StepperItem","keyDownHandler","emitUserRequestedItem","preventDefault","handleItemClick","composedPath","some","classList","contains","emitRequestedItem","itemPosition","calciteInternalUserRequestedStepperItemSelect","calciteInternalStepperItemSelect","selectedHandler","selected","disabledWatcher","registerStepperItem","effectiveLocaleWatcher","locale","numberStringFormatter","numberFormatOptions","useGrouping","connectInteractive","setUpLoadableComponent","parentStepperEl","parentElement","getItemPosition","setComponentLoaded","componentDidRender","updateHostInteraction","disconnectInteractive","onKeyDown","tabIndex","InteractiveContainer","headerEl","renderIcon","renderNumbers","heading","description","updateActiveItemOnChange","includes","selectedPosition","determineSelectedItem","setFocus","componentFocusable","focus","flipRtl","calciteInternalStepperItemRegister","from","indexOf","numberFormatter","format"],"sources":["src/components/stepper/functional/step-bar.tsx","src/components/stepper/resources.ts","src/components/stepper/stepper.scss?tag=calcite-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx","src/components/stepper-item/resources.ts","src/components/stepper-item/stepper-item.scss?tag=calcite-stepper-item&encapsulation=shadow","src/components/stepper-item/stepper-item.tsx"],"sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\n\ninterface StepBarProps {\n  active: boolean;\n  complete: boolean;\n  error: boolean;\n  disabled: boolean;\n  key: number;\n}\n\nexport const CSS = {\n  stepBar: \"step-bar\",\n  stepBarActive: \"step-bar--active\",\n  stepBarComplete: \"step-bar--complete\",\n  stepBarDisabled: \"step-bar--disabled\",\n  stepBarError: \"step-bar--error\",\n  stepBarInActive: \"step-bar--inactive\",\n};\n\nexport const StepBar: FunctionalComponent<StepBarProps> = ({\n  disabled,\n  active,\n  complete,\n  error,\n  key,\n}) => (\n  <svg\n    class={{\n      [CSS.stepBar]: true,\n    }}\n    key={key}\n  >\n    <rect\n      class={{\n        [CSS.stepBarActive]: active,\n        [CSS.stepBarComplete]: complete,\n        [CSS.stepBarDisabled]: disabled,\n        [CSS.stepBarError]: error,\n        [CSS.stepBarInActive]: true,\n      }}\n      width=\"100%\"\n      x=\"0\"\n      y=\"0\"\n    />\n  </svg>\n);\n","export const CSS = {\n  actionIcon: \"action-icon\",\n  actionIconStart: \"action-icon--start\",\n  actionIconEnd: \"action-icon--end\",\n  actionContainer: \"action-container\",\n  stepBarContainer: \"step-bar-container\",\n  singleView: \"single-view\",\n};\n",":host([scale=\"s\"]) {\n  --calcite-internal-stepper-item-spacing-unit-s: theme(\"spacing.1\");\n  --calcite-internal-stepper-action-block-size: theme(\"spacing.11\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.8\");\n  --calcite-internal-step-bar-gap: theme(\"spacing.1\");\n}\n\n:host([scale=\"m\"]) {\n  --calcite-internal-stepper-item-spacing-unit-s: theme(\"spacing.2\");\n  --calcite-internal-stepper-action-block-size: theme(\"spacing.13\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.10\");\n}\n\n:host([scale=\"l\"]) {\n  --calcite-internal-stepper-item-spacing-unit-s: theme(\"spacing.3\");\n  --calcite-internal-stepper-action-block-size: theme(\"spacing.16\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.12\");\n  --calcite-internal-step-bar-gap: theme(\"spacing.3\");\n}\n\n:host {\n  @apply flex;\n}\n\n.container {\n  @apply relative\n    flex\n    w-full\n    min-w-fit\n    flex-row\n    flex-wrap\n    items-stretch\n    justify-between;\n}\n\n:host([layout=\"vertical\"]) .container {\n  @apply flex-auto flex-col;\n}\n\n:host([layout=\"horizontal\"]),\n:host([layout=\"horizontal-single\"]) {\n  .container {\n    display: grid;\n    // grid-templates-columns are dynamically generated\n    // grid-templates-rows are dynamically generated\n    grid-template-areas:\n      \"items\"\n      \"content\";\n    gap: theme(\"spacing.2\") var(--calcite-internal-stepper-item-spacing-unit-s);\n  }\n}\n\n:host([layout=\"horizontal\"][scale=\"s\"]),\n:host([layout=\"horizontal-single\"][scale=\"s\"]) {\n  .container {\n    gap: theme(\"spacing.1\") var(--calcite-internal-stepper-item-spacing-unit-s);\n  }\n}\n\n:host([layout=\"horizontal\"][scale=\"l\"]),\n:host([layout=\"horizontal-single\"][scale=\"l\"]) {\n  .container {\n    gap: theme(\"spacing.3\") var(--calcite-internal-stepper-item-spacing-unit-s);\n  }\n}\n\n:host([layout=\"horizontal\"]) .container.single-view {\n  @apply flex  grid-cols-none;\n}\n\n.action-icon {\n  @apply flex relative grow-0;\n  block-size: var(--calcite-internal-stepper-action-block-size);\n  inline-size: var(--calcite-internal-stepper-action-inline-size);\n}\n\n.action-container {\n  @apply absolute flex justify-between;\n  padding-block: 0.25rem;\n  inline-size: 100%;\n}\n\n@mixin stepBar {\n  .step-bar {\n    @apply flex;\n    block-size: 100%;\n    inline-size: 100%;\n  }\n\n  .step-bar-container {\n    @apply flex absolute justify-between items-start;\n    block-size: 0.125rem;\n    inline-size: 100%;\n    gap: var(--calcite-internal-step-bar-gap, 0.5rem);\n  }\n\n  .step-bar--inactive {\n    fill: var(--calcite-color-border-3, #dfdfdf);\n    fill-opacity: 1;\n    block-size: 100%;\n  }\n\n  .step-bar--active {\n    fill: var(--calcite-color-brand);\n  }\n\n  .step-bar--complete {\n    fill: var(--calcite-color-brand);\n    fill-opacity: 0.5;\n  }\n\n  .step-bar--error {\n    fill: var(--calcite-color-status-danger);\n  }\n\n  .step-bar--disabled {\n    opacity: 0.5;\n  }\n}\n\n@include stepBar();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n  readTask,\n} from \"@stencil/core\";\nimport { focusElementInGroup, slotChangeGetAssignedElements } from \"../../utils/dom\";\nimport { Position, Scale } from \"../interfaces\";\nimport {\n  StepperItemChangeEventDetail,\n  StepperItemKeyEventDetail,\n  StepperLayout,\n} from \"./interfaces\";\nimport { createObserver } from \"../../utils/observers\";\nimport { StepBar } from \"./functional/step-bar\";\nimport { CSS } from \"./resources\";\nimport { guid } from \"../../utils/guid\";\n\nimport {\n  connectLocalized,\n  disconnectLocalized,\n  LocalizedComponent,\n  NumberingSystem,\n} from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { StepperMessages } from \"./assets/stepper/t9n\";\n\n/**\n * @slot - A slot for adding `calcite-stepper-item` elements.\n */\n@Component({\n  tag: \"calcite-stepper\",\n  styleUrl: \"stepper.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Stepper implements LocalizedComponent, T9nComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, displays a status icon in the `calcite-stepper-item` heading. */\n  @Prop({ reflect: true }) icon = false;\n\n  /** Defines the layout of the component. */\n  @Prop({ reflect: true }) layout: StepperLayout = \"horizontal\";\n\n  /** When `true`, displays the step number in the `calcite-stepper-item` heading. */\n  @Prop({ reflect: true }) numbered = false;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  @Watch(\"icon\")\n  @Watch(\"layout\")\n  @Watch(\"numbered\")\n  @Watch(\"scale\")\n  handleItemPropChange(): void {\n    this.updateItems();\n  }\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: StepperMessages;\n\n  /**\n   * Specifies the Unicode numeral system used by the component for localization.\n   */\n  @Prop({ reflect: true }) numberingSystem?: NumberingSystem;\n\n  @Watch(\"numberingSystem\")\n  numberingSystemChange(): void {\n    this.setStepperItemNumberingSystem();\n  }\n\n  /**\n   * Specifies the component's selected item.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedItem: HTMLCalciteStepperItemElement = null;\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<StepperMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the active `calcite-stepper-item` changes.\n   *\n   */\n  @Event({ cancelable: false }) calciteStepperItemChange: EventEmitter<void>;\n\n  /**\n   * Fires when the active `calcite-stepper-item` changes.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemChange: EventEmitter<StepperItemChangeEventDetail>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.mutationObserver?.observe(this.el, { childList: true });\n    this.updateItems();\n    connectMessages(this);\n    connectLocalized(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    this.resizeObserver?.observe(this.containerEl);\n    // if no stepper items are set as active, default to the first one\n    if (typeof this.currentActivePosition !== \"number\") {\n      const enabledStepIndex = this.getFirstEnabledStepperPosition();\n\n      if (enabledStepIndex === 0) {\n        this.currentActivePosition = enabledStepIndex;\n      }\n\n      this.calciteInternalStepperItemChange.emit({\n        position: enabledStepIndex,\n      });\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n    disconnectMessages(this);\n    disconnectLocalized(this);\n    this.mutationObserver?.disconnect();\n  }\n\n  render(): VNode {\n    return (\n      <Host aria-label={this.messages.label} role=\"region\">\n        <div\n          class={{ container: true, [CSS.singleView]: this.layout === \"horizontal-single\" }}\n          ref={this.setContainerEl}\n        >\n          {this.layout === \"horizontal-single\" && (\n            <div class={{ [CSS.stepBarContainer]: true }}>\n              {this.items.map((item, index) => (\n                <StepBar\n                  active={index === this.currentActivePosition}\n                  complete={item.complete && index !== this.currentActivePosition && !item.error}\n                  disabled={item.disabled && index !== this.currentActivePosition}\n                  error={item.error && index !== this.currentActivePosition}\n                  key={index}\n                />\n              ))}\n            </div>\n          )}\n          {this.layout === \"horizontal-single\" && (\n            <div class={{ [CSS.actionContainer]: true }}>\n              {this.renderAction(\"start\")}\n              {this.renderAction(\"end\")}\n            </div>\n          )}\n          <slot onSlotchange={this.handleDefaultSlotChange} />\n        </div>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalStepperItemKeyEvent\")\n  calciteInternalStepperItemKeyEvent(event: CustomEvent<StepperItemKeyEventDetail>): void {\n    const item = event.detail.item;\n    const itemToFocus = event.target as HTMLCalciteStepperItemElement;\n\n    switch (item.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"next\");\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"previous\");\n        break;\n      case \"Home\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"first\");\n        break;\n      case \"End\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"last\");\n        break;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalStepperItemRegister\")\n  registerItem(event: CustomEvent): void {\n    const item = event.target as HTMLCalciteStepperItemElement;\n    const { content, position } = event.detail;\n\n    this.itemMap.set(item, { position, content });\n    this.enabledItems = this.filterItems();\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalStepperItemSelect\")\n  updateItem(event: CustomEvent): void {\n    const { position } = event.detail;\n    if (typeof position === \"number\") {\n      this.currentActivePosition = position;\n      this.selectedItem = event.target as HTMLCalciteStepperItemElement;\n    }\n\n    this.calciteInternalStepperItemChange.emit({\n      position,\n    });\n  }\n\n  @Listen(\"calciteInternalUserRequestedStepperItemSelect\")\n  handleUserRequestedStepperItemSelect(): void {\n    this.calciteStepperItemChange.emit();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Set the next `calcite-stepper-item` as active. */\n  @Method()\n  async nextStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(this.currentActivePosition + 1, \"next\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  /** Set the previous `calcite-stepper-item` as active. */\n  @Method()\n  async prevStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(this.currentActivePosition - 1, \"previous\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  /**\n   * Set a specified `calcite-stepper-item` as active.\n   *\n   * @param step\n   */\n  @Method()\n  async goToStep(step: number): Promise<void> {\n    const position = step - 1;\n\n    if (this.currentActivePosition !== position) {\n      this.updateStep(position);\n    }\n  }\n\n  /** Set the first `calcite-stepper-item` as active. */\n  @Method()\n  async startStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(0, \"next\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  /** Set the last `calcite-stepper-item` as active. */\n  @Method()\n  async endStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(this.items.length - 1, \"previous\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteStepperElement;\n\n  @State() defaultMessages: StepperMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() currentActivePosition: number;\n\n  @Watch(\"currentActivePosition\")\n  handlePositionChange(): void {\n    readTask((): void => {\n      this.determineActiveStepper();\n    });\n  }\n\n  @State() elWidth: number;\n\n  @Watch(\"elWidth\")\n  handleElWidthChange(): void {\n    readTask((): void => {\n      this.determineActiveStepper();\n    });\n  }\n\n  private enabledItems: HTMLCalciteStepperItemElement[] = [];\n\n  private itemMap = new Map<HTMLCalciteStepperItemElement, { position: number; content: Node[] }>();\n\n  private items: HTMLCalciteStepperItemElement[] = [];\n\n  private mutationObserver = createObserver(\"mutation\", () => this.updateItems());\n\n  /** Specifies if the user is viewing one `stepper-item` at a time when the page width is less than sum of min-width of each item. */\n  private multipleViewMode = false;\n\n  private guid = `calcite-stepper-action-${guid()}`;\n\n  private containerEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private resizeObserver = createObserver(\n    \"resize\",\n    (entries) => (this.elWidth = entries[0].contentRect.width),\n  );\n\n  private updateItems(): void {\n    this.el.querySelectorAll(\"calcite-stepper-item\").forEach((item) => {\n      item.icon = this.icon;\n      item.numbered = this.numbered;\n      item.layout = this.layout;\n      item.scale = this.scale;\n    });\n  }\n\n  private determineActiveStepper(): void {\n    const totalItems = this.items.length;\n    if (!this.elWidth || !totalItems || this.layout !== \"horizontal-single\" || totalItems === 1) {\n      return;\n    }\n    const activePosition = this.currentActivePosition || 0;\n\n    if (this.layout === \"horizontal-single\") {\n      this.multipleViewMode = false;\n      this.items.forEach((item: HTMLCalciteStepperItemElement, index) => {\n        item.hidden = index !== activePosition;\n      });\n    }\n  }\n\n  private getEnabledStepIndex(\n    startIndex: number,\n    direction: \"next\" | \"previous\" = \"next\",\n  ): number | null {\n    const { items, currentActivePosition } = this;\n\n    let newIndex = startIndex;\n\n    while (items[newIndex]?.disabled && this.layout !== \"horizontal-single\") {\n      newIndex = newIndex + (direction === \"previous\" ? -1 : 1);\n    }\n\n    return newIndex !== currentActivePosition && newIndex < items.length && newIndex >= 0\n      ? newIndex\n      : null;\n  }\n\n  private updateStep(position: number): void {\n    this.currentActivePosition = position;\n    this.calciteInternalStepperItemChange.emit({\n      position,\n    });\n  }\n\n  private filterItems(): HTMLCalciteStepperItemElement[] {\n    return this.items.filter((item) => !item.disabled);\n  }\n\n  private setStepperItemNumberingSystem(): void {\n    this.items.forEach((item: HTMLCalciteStepperItemElement) => {\n      item.numberingSystem = this.numberingSystem;\n    });\n  }\n\n  private renderAction(position: Position): VNode {\n    const isPositionStart = position === \"start\";\n    const path = isPositionStart ? \"chevron-left\" : \"chevron-right\";\n    const { currentActivePosition, multipleViewMode, layout } = this;\n    const totalItems = this.items.length;\n    const id = `${this.guid}-${isPositionStart ? \"start\" : \"end\"}`;\n\n    return layout === \"horizontal-single\" && !multipleViewMode ? (\n      <calcite-action\n        alignment=\"center\"\n        appearance=\"transparent\"\n        class={{\n          [CSS.actionIcon]: true,\n        }}\n        compact={true}\n        data-position={position}\n        disabled={\n          (currentActivePosition === 0 && isPositionStart) ||\n          (currentActivePosition === totalItems - 1 && !isPositionStart)\n        }\n        icon={path}\n        iconFlipRtl={true}\n        id={id}\n        onClick={this.handleActionClick}\n        scale={this.scale}\n        text={isPositionStart ? this.messages.previousStep : this.messages.nextStep}\n      />\n    ) : null;\n  }\n\n  private handleActionClick = (event: MouseEvent): void => {\n    const currentActivePosition = this.currentActivePosition;\n    const target = event.target as HTMLCalciteActionElement;\n    if (target.getAttribute(\"data-position\") === \"start\") {\n      this.prevStep();\n    } else {\n      this.nextStep();\n    }\n\n    if (\n      typeof this.currentActivePosition === \"number\" &&\n      currentActivePosition !== this.currentActivePosition &&\n      !this.items[this.currentActivePosition].disabled\n    ) {\n      this.calciteStepperItemChange.emit();\n    }\n  };\n\n  private getFirstEnabledStepperPosition(): number {\n    const enabledStepIndex = this.items.findIndex((item) => !item.disabled);\n\n    if (enabledStepIndex > -1) {\n      return enabledStepIndex;\n    }\n    return 0;\n  }\n\n  private setContainerEl = (el: HTMLDivElement): void => {\n    this.containerEl = el;\n  };\n\n  handleDefaultSlotChange = (event: Event): void => {\n    const items = slotChangeGetAssignedElements(event).filter(\n      (el) => el?.tagName === \"CALCITE-STEPPER-ITEM\",\n    );\n    this.items = items as HTMLCalciteStepperItemElement[];\n    const spacing = Array(items.length).fill(\"1fr\").join(\" \");\n    this.containerEl.style.gridTemplateAreas = spacing;\n    this.containerEl.style.gridTemplateColumns = spacing;\n    this.setStepperItemNumberingSystem();\n  };\n}\n","export const CSS = {\n  container: \"container\",\n  stepperItemContent: \"stepper-item-content\",\n  stepperItemDescription: \"stepper-item-description\",\n  stepperItemHeader: \"stepper-item-header\",\n  stepperItemHeading: \"stepper-item-heading\",\n  stepperItemHeaderText: \"stepper-item-header-text\",\n  stepperItemNumber: \"stepper-item-number\",\n  visuallyHidden: \"visually-hidden\",\n};\n",":host([scale=\"s\"]) {\n  --calcite-stepper-item-spacing-unit-s: theme(\"spacing.1\");\n  --calcite-stepper-item-spacing-unit-m: theme(\"spacing.3\");\n  --calcite-stepper-item-spacing-unit-l: theme(\"spacing.4\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.8\");\n  @apply text-n1h;\n  margin-inline-end: theme(\"margin.1\");\n  .stepper-item-description {\n    @apply text-n2h;\n  }\n}\n\n:host([scale=\"m\"]) {\n  --calcite-stepper-item-spacing-unit-s: theme(\"spacing.2\");\n  --calcite-stepper-item-spacing-unit-m: theme(\"spacing.4\");\n  --calcite-stepper-item-spacing-unit-l: theme(\"spacing.5\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.10\");\n  @apply text-0h;\n  margin-inline-end: theme(\"margin.2\");\n  .stepper-item-description {\n    @apply text-n1h;\n  }\n}\n\n:host([scale=\"l\"]) {\n  --calcite-stepper-item-spacing-unit-s: theme(\"spacing.3\");\n  --calcite-stepper-item-spacing-unit-m: theme(\"spacing.5\");\n  --calcite-stepper-item-spacing-unit-l: theme(\"spacing.6\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.12\");\n  @apply text-1h;\n  margin-inline-end: theme(\"margin.3\");\n  .stepper-item-description {\n    @apply text-0h;\n  }\n}\n\n:host {\n  @apply relative\n  flex\n  flex-grow\n  flex-col\n  self-start;\n  margin-block-end: var(--calcite-stepper-item-spacing-unit-s);\n}\n\n:host .container {\n  @apply text-color-3\n    border-color-3\n    relative\n    flex\n    flex-grow\n    cursor-pointer\n    flex-col\n    border-0\n    border-t-2\n    border-solid\n    no-underline\n    outline-none\n    duration-150\n    ease-in-out;\n}\n\n// focus styles\n:host {\n  @apply focus-base;\n}\n:host(:focus) {\n  @apply focus-outset;\n}\n\n// .stepper-item-header / content\n:host .stepper-item-header {\n  @apply flex cursor-pointer items-start;\n}\n\n:host .stepper-item-content,\n:host .stepper-item-header {\n  @apply duration-150 ease-in-out;\n  padding-block: var(--calcite-stepper-item-spacing-unit-l);\n  padding-inline-end: var(--calcite-stepper-item-spacing-unit-m);\n  text-align: start;\n}\n\n:host .stepper-item-header * {\n  @apply inline-flex\n    items-center\n    duration-150\n    ease-in-out;\n}\n\n:host .stepper-item-content {\n  @apply text-n2-wrap\n    hidden\n    w-full\n    flex-col;\n}\n\n// stepper item icon\n:host .stepper-item-icon {\n  margin-inline-end: var(--calcite-stepper-item-spacing-unit-m);\n  @apply text-color-3\n    opacity-disabled\n    mt-px\n    inline-flex\n    h-3\n    flex-shrink-0\n    self-start\n    duration-150\n    ease-in-out;\n}\n\n// stepper item title\n:host .stepper-item-header-text {\n  @apply flex-col;\n  text-align: initial;\n  margin-inline-end: auto;\n}\n\n:host .stepper-item-heading,\n:host .stepper-item-description {\n  @apply flex w-full;\n}\n:host .stepper-item-heading {\n  @apply text-color-2 mb-1 font-medium;\n}\n:host .stepper-item-description {\n  @apply text-color-3;\n}\n\n:host .stepper-item-number {\n  @apply text-color-3\n    font-medium\n    duration-150\n    ease-in-out;\n  margin-inline-end: var(--calcite-stepper-item-spacing-unit-m);\n}\n\n@include disabled();\n\n:host([complete]) .container {\n  // todo dark mode\n  border-color: rgba($h-bb-060, 0.5);\n  & .stepper-item-icon {\n    color: theme(\"backgroundColor.brand\");\n  }\n}\n\n:host([error]) .container {\n  @apply border-t-color-danger;\n  & .stepper-item-number {\n    color: theme(\"backgroundColor.danger\");\n  }\n  & .stepper-item-icon {\n    @apply opacity-100;\n    color: theme(\"backgroundColor.danger\");\n  }\n}\n\n:host(:hover:not([disabled]):not([selected])) .container,\n:host(:focus:not([disabled]):not([selected])) .container {\n  @apply border-t-color-brand;\n\n  & .stepper-item-heading {\n    @apply text-color-1;\n  }\n  & .stepper-item-description {\n    @apply text-color-2;\n  }\n}\n\n:host([error]:hover:not([disabled]):not([selected])) .container,\n:host([error]:focus:not([disabled]):not([selected])) .container {\n  @apply border-t-color-danger-hover;\n}\n\n:host([selected]) .container {\n  border-block-start-color: theme(\"backgroundColor.brand\");\n  & .stepper-item-heading {\n    @apply text-color-1;\n  }\n  & .stepper-item-description {\n    @apply text-color-2;\n  }\n  & .stepper-item-number {\n    color: theme(\"backgroundColor.brand\");\n  }\n\n  & .stepper-item-icon {\n    color: theme(\"backgroundColor.brand\");\n    @apply opacity-100;\n  }\n}\n\n:host([selected]) .container {\n  & .stepper-item-content {\n    @apply flex;\n  }\n}\n\n:host([layout=\"vertical\"]) .container {\n  @apply border-color-3\n  mx-0\n  mt-0\n  flex-auto\n  border-t-0\n  border-solid\n  py-0;\n  border-inline-start-width: theme(\"borderWidth.2\");\n  padding-inline-start: var(--calcite-stepper-item-spacing-unit-l);\n\n  & .stepper-item-icon {\n    @apply order-3 mt-px mb-0;\n    padding-inline-start: var(--calcite-stepper-item-spacing-unit-s);\n    margin-inline-start: theme(\"margin.auto\");\n  }\n  & .stepper-item-header {\n    padding-inline-end: theme(\"padding.0\");\n  }\n  & .stepper-item-content {\n    @apply p-0;\n  }\n}\n\n:host([layout=\"vertical\"][complete]) .container {\n  border-color: rgba($h-bb-060, 0.5);\n}\n:host([layout=\"vertical\"][complete]:hover:not([disabled]):not([selected])) .container,\n:host([layout=\"vertical\"][complete]:focus:not([disabled]):not([selected])) .container {\n  @apply border-color-brand;\n}\n:host([layout=\"vertical\"][error]) .container {\n  @apply border-color-danger;\n}\n:host([layout=\"vertical\"][selected]) .container {\n  @apply border-color-brand;\n\n  & .stepper-item-content:not(:empty) {\n    margin-block-end: var(--calcite-stepper-item-spacing-unit-l);\n  }\n}\n:host([layout=\"vertical\"]:hover:not([disabled]):not([selected])) .container,\n:host([layout=\"vertical\"]:focus:not([disabled]):not([selected])) .container {\n  border-color: rgba($h-bb-060, 0.5);\n}\n:host([layout=\"vertical\"][error]:hover:not([disabled]):not([selected])) .container,\n:host([layout=\"vertical\"][error]:focus:not([disabled]):not([selected])) .container {\n  @apply border-color-danger-hover;\n}\n\n:host([layout=\"horizontal\"]),\n:host([layout=\"horizontal-single\"]) {\n  display: contents;\n\n  .container {\n    display: contents;\n  }\n\n  .stepper-item-header {\n    @apply border-color-3\n    border-0\n    border-solid\n    border-t-2\n    focus-base;\n    grid-row: items;\n\n    &:focus {\n      @apply focus-outset;\n    }\n  }\n\n  .stepper-item-content {\n    @apply cursor-auto duration-150 ease-in-out;\n    padding-block: 0;\n    padding-inline-end: var(--calcite-stepper-item-spacing-unit-m);\n    text-align: start;\n  }\n}\n\n:host([layout=\"horizontal\"][disabled]),\n:host([layout=\"horizontal-single\"][disabled]) {\n  .stepper-item-header {\n    @extend %disabled-host-only;\n  }\n}\n\n:host([layout=\"horizontal-single\"]) {\n  .stepper-item-header {\n    grid-area: 1 / 1 / 1 / -1;\n  }\n}\n\n:host([layout=\"horizontal\"]),\n:host([layout=\"horizontal-single\"]) {\n  .stepper-item-content {\n    grid-area: 2 / 1 / 2 / -1;\n  }\n}\n\n:host([layout=\"horizontal\"][complete]),\n:host([layout=\"horizontal-single\"][complete]) {\n  .stepper-item-header {\n    border-color: rgba($h-bb-060, 0.5);\n  }\n}\n:host([layout=\"horizontal\"][complete]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal\"][complete]:focus:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"][complete]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"][complete]:focus:not([disabled]):not([selected])) {\n  .stepper-item-header {\n    @apply border-color-brand;\n  }\n}\n:host([layout=\"horizontal\"][error]),\n:host([layout=\"horizontal-single\"][error]) {\n  .stepper-item-header {\n    @apply border-color-danger;\n  }\n}\n:host([layout=\"horizontal\"][selected]),\n:host([layout=\"horizontal-single\"][selected]) {\n  .stepper-item-header {\n    @apply border-color-brand;\n  }\n}\n:host([layout=\"horizontal\"]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal\"]:focus:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"]:focus:not([disabled]):not([selected])) {\n  .stepper-item-header {\n    border-color: rgba($h-bb-060, 0.5);\n  }\n}\n:host([layout=\"horizontal\"][error]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal\"][error]:focus:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"][error]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"][error]:focus:not([disabled]):not([selected])) {\n  .stepper-item-header {\n    @apply border-color-danger-hover;\n  }\n}\n\n@media (forced-colors: active) {\n  :host .container {\n    outline-width: 0;\n    outline-offset: 0;\n  }\n\n  :host(:focus),\n  :host(:focus-visible) {\n    outline-color: canvasText;\n  }\n\n  :host([selected]) .container {\n    border-block-start-color: highlight;\n    & .stepper-item-number {\n      color: highlight;\n    }\n    & .stepper-item-icon {\n      color: highlight;\n    }\n  }\n\n  :host([layout=\"vertical\"][selected]) .container {\n    border-color: highlight;\n  }\n}\n\n:host([layout=\"horizontal-single\"]) .stepper-item-header {\n  @apply border-none box-border\n  me-0;\n  inline-size: 100%;\n  padding-inline: calc(var(--calcite-internal-stepper-action-inline-size) + 0.5rem);\n}\n\n:host([layout=\"horizontal-single\"][error]) .container {\n  & .stepper-item-number {\n    color: theme(\"backgroundColor.danger\");\n  }\n  & .stepper-item-icon {\n    @apply opacity-100;\n    color: theme(\"backgroundColor.danger\");\n  }\n}\n\n:host([layout=\"horizontal-single\"][error][selected]),\n:host([layout=\"horizontal-single\"][complete][selected]) .container {\n  @apply text-color-3;\n  & .stepper-item-heading {\n    @apply text-color-2;\n  }\n}\n\n:host([layout=\"horizontal-single\"][complete][selected]) .container {\n  & .stepper-item-icon {\n    @apply opacity-disabled;\n  }\n  & .stepper-item-number {\n    @apply text-color-3;\n  }\n}\n\n.visually-hidden {\n  @apply sr-only;\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { Scale } from \"../interfaces\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  StepperItemChangeEventDetail,\n  StepperItemEventDetail,\n  StepperItemKeyEventDetail,\n  StepperLayout,\n} from \"../stepper/interfaces\";\nimport {\n  numberStringFormatter,\n  LocalizedComponent,\n  disconnectLocalized,\n  connectLocalized,\n  NumberingSystem,\n} from \"../../utils/locale\";\nimport {\n  setUpLoadableComponent,\n  setComponentLoaded,\n  LoadableComponent,\n  componentFocusable,\n} from \"../../utils/loadable\";\nimport { CSS } from \"./resources\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { StepperItemMessages } from \"./assets/stepper-item/t9n\";\n\n/**\n * @slot - A slot for adding custom content.\n */\n@Component({\n  tag: \"calcite-stepper-item\",\n  styleUrl: \"stepper-item.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class StepperItem\n  implements InteractiveComponent, LocalizedComponent, LoadableComponent, T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is selected.\n   */\n  @Prop({ reflect: true, mutable: true }) selected = false;\n\n  @Watch(\"selected\")\n  selectedHandler(): void {\n    if (this.selected) {\n      this.emitRequestedItem();\n    }\n  }\n\n  /** When `true`, the step has been completed. */\n  @Prop({ reflect: true }) complete = false;\n\n  /** When `true`, the component contains an error that requires resolution from the user. */\n  @Prop({ reflect: true }) error = false;\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The component header text. */\n  @Prop() heading: string;\n\n  /** A description for the component. Displays below the header text. */\n  @Prop() description: string;\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  /**\n   * @internal\n   */\n  @Prop() numberingSystem: NumberingSystem;\n\n  // watch for removal of disabled to register step\n  @Watch(\"disabled\")\n  disabledWatcher(): void {\n    this.registerStepperItem();\n  }\n\n  /**\n   * When `true`, displays a status icon in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`.\n   *\n   * @internal\n   */\n  @Prop() icon = false;\n\n  /**\n   * Specifies the layout of the `calcite-stepper-item` inherited from parent `calcite-stepper`, defaults to `horizontal`.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) layout: StepperLayout;\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: StepperItemMessages;\n\n  /**\n   * When `true`, displays the step number in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`.\n   *\n   * @internal\n   */\n  @Prop() numbered = false;\n\n  /**\n   * Specifies the size of the component inherited from the `calcite-stepper`, defaults to `m`.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\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<StepperItemMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Internal State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @State() defaultMessages: StepperItemMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleWatcher(locale: string): void {\n    numberStringFormatter.numberFormatOptions = {\n      locale,\n      numberingSystem: this.numberingSystem,\n      useGrouping: false,\n    };\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  headerEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemKeyEvent: EventEmitter<StepperItemKeyEventDetail>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemSelect: EventEmitter<StepperItemEventDetail>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalUserRequestedStepperItemSelect: EventEmitter<StepperItemChangeEventDetail>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemRegister: EventEmitter<StepperItemEventDetail>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    this.parentStepperEl = this.el.parentElement as HTMLCalciteStepperElement;\n    this.itemPosition = this.getItemPosition();\n    this.registerStepperItem();\n\n    if (this.selected) {\n      this.emitRequestedItem();\n    }\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  render(): VNode {\n    return (\n      <Host\n        aria-current={this.selected ? \"step\" : \"false\"}\n        onClick={this.handleItemClick}\n        onKeyDown={this.keyDownHandler}\n        tabIndex={this.disabled ? -1 : 0}\n      >\n        <InteractiveContainer disabled={this.disabled}>\n          <div class={CSS.container}>\n            {this.complete && (\n              <span aria-live=\"polite\" class={CSS.visuallyHidden}>\n                {this.messages.complete}\n              </span>\n            )}\n            <div\n              class={CSS.stepperItemHeader}\n              tabIndex={\n                /* additional tab index logic needed because of display: contents */\n                this.layout === \"horizontal\" && !this.disabled ? 0 : null\n              }\n              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n              ref={(el) => (this.headerEl = el)}\n            >\n              {this.icon ? this.renderIcon() : null}\n              {this.numbered ? (\n                <div class={CSS.stepperItemNumber}>{this.renderNumbers()}.</div>\n              ) : null}\n              <div class={CSS.stepperItemHeaderText}>\n                <span class={CSS.stepperItemHeading}>{this.heading}</span>\n                <span class={CSS.stepperItemDescription}>{this.description}</span>\n              </div>\n            </div>\n            <div class={CSS.stepperItemContent}>\n              <slot />\n            </div>\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalStepperItemChange\", { target: \"body\" })\n  updateActiveItemOnChange(event: CustomEvent<StepperItemChangeEventDetail>): void {\n    if (\n      event.target === this.parentStepperEl ||\n      event.composedPath().includes(this.parentStepperEl)\n    ) {\n      this.selectedPosition = event.detail.position;\n      this.determineSelectedItem();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    (this.layout === \"vertical\" ? this.el : this.headerEl)?.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteStepperItemElement;\n\n  /** position within parent */\n  private itemPosition: number;\n\n  /** the latest requested item position*/\n  private selectedPosition: number;\n\n  /** the parent stepper component */\n  private parentStepperEl: HTMLCalciteStepperElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private keyDownHandler = (event: KeyboardEvent): void => {\n    if (!this.disabled && event.target === this.el) {\n      switch (event.key) {\n        case \" \":\n        case \"Enter\":\n          this.emitUserRequestedItem();\n          event.preventDefault();\n          break;\n        case \"ArrowUp\":\n        case \"ArrowDown\":\n        case \"ArrowLeft\":\n        case \"ArrowRight\":\n        case \"Home\":\n        case \"End\":\n          this.calciteInternalStepperItemKeyEvent.emit({ item: event });\n          event.preventDefault();\n          break;\n      }\n    }\n  };\n\n  private renderIcon(): VNode {\n    let path = \"circle\";\n\n    if (this.selected && (this.layout !== \"horizontal-single\" || (!this.error && !this.complete))) {\n      path = \"circleF\";\n    } else if (this.error) {\n      path = \"exclamationMarkCircleF\";\n    } else if (this.complete) {\n      path = \"checkCircleF\";\n    }\n\n    return (\n      <calcite-icon class=\"stepper-item-icon\" flipRtl={this.iconFlipRtl} icon={path} scale=\"s\" />\n    );\n  }\n\n  private determineSelectedItem(): void {\n    this.selected = !this.disabled && this.itemPosition === this.selectedPosition;\n  }\n\n  private registerStepperItem(): void {\n    this.calciteInternalStepperItemRegister.emit({\n      position: this.itemPosition,\n    });\n  }\n\n  private handleItemClick = (event: MouseEvent): void => {\n    if (\n      this.disabled ||\n      (this.layout === \"horizontal\" &&\n        event\n          .composedPath()\n          .some((el) => (el as HTMLElement).classList?.contains(\"stepper-item-content\")))\n    ) {\n      return;\n    }\n\n    this.emitUserRequestedItem();\n  };\n\n  private emitUserRequestedItem = (): void => {\n    this.emitRequestedItem();\n    if (!this.disabled) {\n      const position = this.itemPosition;\n\n      this.calciteInternalUserRequestedStepperItemSelect.emit({\n        position,\n      });\n    }\n  };\n\n  private emitRequestedItem = (): void => {\n    if (!this.disabled) {\n      const position = this.itemPosition;\n\n      this.calciteInternalStepperItemSelect.emit({\n        position,\n      });\n    }\n  };\n\n  private getItemPosition(): number {\n    return Array.from(this.parentStepperEl?.querySelectorAll(\"calcite-stepper-item\")).indexOf(\n      this.el,\n    );\n  }\n\n  renderNumbers(): string {\n    numberStringFormatter.numberFormatOptions = {\n      locale: this.effectiveLocale,\n      numberingSystem: this.numberingSystem,\n      useGrouping: false,\n    };\n    return numberStringFormatter.numberFormatter.format(this.itemPosition + 1);\n  }\n}\n"],"mappings":"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"}

package/dist/calcite/p-bdc14ccb.js

@@ -0,0 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.6.0-next.3
+ */
+import{c as t,a as n}from"./p-224218c9.js";import{n as e}from"./p-dcfcb77f.js";import{c as s}from"./p-e54e5b79.js";const r=new RegExp(`\\${"."}(0+)?$`);const i=new RegExp("0+$");class o{constructor(t){if(t instanceof o){return t}const[n,e]=b(t).split(".").concat("");this.value=BigInt(n+e.padEnd(o.DECIMALS,"0").slice(0,o.DECIMALS))+BigInt(o.ROUNDED&&e[o.DECIMALS]>="5");this.isNegative=t.charAt(0)==="-"}getIntegersAndDecimals(){const t=this.value.toString().replace("-","").padStart(o.DECIMALS+1,"0");const n=t.slice(0,-o.DECIMALS);const e=t.slice(-o.DECIMALS).replace(i,"");return{integers:n,decimals:e}}toString(){const{integers:t,decimals:n}=this.getIntegersAndDecimals();return`${this.isNegative?"-":""}${t}${n.length?"."+n:""}`}formatToParts(t){const{integers:n,decimals:e}=this.getIntegersAndDecimals();const s=t.numberFormatter.formatToParts(BigInt(n));this.isNegative&&s.unshift({type:"minusSign",value:t.minusSign});if(e.length){s.push({type:"decimal",value:t.decimal});e.split("").forEach((t=>s.push({type:"fraction",value:t})))}return s}format(t){const{integers:n,decimals:e}=this.getIntegersAndDecimals();const s=`${this.isNegative?t.minusSign:""}${t.numberFormatter.format(BigInt(n))}`;const r=e.length?`${t.decimal}${e.split("").map((n=>t.numberFormatter.format(Number(n)))).join("")}`:"";return`${s}${r}`}add(t){return o.fromBigInt(this.value+new o(t).value)}subtract(t){return o.fromBigInt(this.value-new o(t).value)}multiply(t){return o._divRound(this.value*new o(t).value,o.SHIFT)}divide(t){return o._divRound(this.value*o.SHIFT,new o(t).value)}}o.DECIMALS=100;o.ROUNDED=true;o.SHIFT=BigInt("1"+"0".repeat(o.DECIMALS));o._divRound=(t,n)=>o.fromBigInt(t/n+(o.ROUNDED?t*BigInt(2)/n%BigInt(2):BigInt(0)));o.fromBigInt=t=>Object.assign(Object.create(o.prototype),{value:t,isNegative:t<BigInt(0)});function c(t){return!(!t||isNaN(Number(t)))}function u(t){if(!t||!d(t)){return""}return p(t,(t=>{let n=false;const s=t.split("").filter(((t,s)=>{if(t.match(/\./g)&&!n){n=true;return true}if(t.match(/\-/g)&&s===0){return true}return e.includes(t)})).join("");return c(s)?new o(s).toString():""}))}const a=/^([-0])0+(?=\d)/;const h=/(?!^\.)\.$/;const f=/(?!^-)-/g;const l=/^-\b0\b\.?0*$/;const g=/0*$/;const $=t=>p(t,(t=>{const n=t.replace(f,"").replace(h,"").replace(a,"$1");return c(n)?l.test(n)?n:m(n):t}));function m(t){const n=t.split(".")[1];const e=new o(t).toString();const[s,r]=e.split(".");return n&&r!==n?`${s}.${n}`:e}function p(t,n){if(!t){return t}const e=t.toLowerCase().indexOf("e")+1;if(!e){return n(t)}return t.replace(/[eE]*$/g,"").substring(0,e).concat(t.slice(e).replace(/[eE]/g,"")).split(/[eE]/).map(((t,e)=>e===1?n(t.replace(/\./g,"")):n(t))).join("e").replace(/^e/,"1e")}function b(t){const n=t.split(/[eE]/);if(n.length===1){return t}const e=+t;if(Number.isSafeInteger(e)){return`${e}`}const s=t.charAt(0)==="-";const i=+n[1];const o=n[0].split(".");const c=(s?o[0].substring(1):o[0])||"";const u=o[1]||"";const h=(t,n)=>{const e=Math.abs(n)-t.length;const s=e>0?`${"0".repeat(e)}${t}`:t;const r=`${s.slice(0,n)}${"."}${s.slice(n)}`;return r};const f=(t,n)=>{const e=n>t.length?`${t}${"0".repeat(n-t.length)}`:t;const s=`${e.slice(0,n)}${"."}${e.slice(n)}`;return s};const l=i>0?`${c}${f(u,i)}`:`${h(c,i)}${u}`;return`${s?"-":""}${l.charAt(0)==="."?"0":""}${l.replace(r,"").replace(a,"")}`}function d(t){return e.some((n=>t.includes(n)))}function w(t,n,e){const s=n.split(".")[1];if(s){const r=s.match(g)[0];if(r&&e.delocalize(t).length!==n.length&&s.indexOf("e")===-1){const n=e.decimal;t=!t.includes(n)?`${t}${n}`:t;return t.padEnd(t.length+r.length,e.localize("0"))}}return t}const I="en";const v=["ar","bg","bs","ca","cs","da","de","el",I,"es","et","fi","fr","he","hr","hu","id","it","ja","ko","lt","lv","no","nl","pl","pt-BR","pt-PT","ro","ru","sk","sl","sr","sv","th","tr","uk","vi","zh-CN","zh-HK","zh-TW"];const B=["ar","bg","bs","ca","cs","da","de","de-AT","de-CH","el",I,"en-AU","en-CA","en-GB","es","es-MX","et","fi","fr","fr-CH","he","hi","hr","hu","id","it","it-CH","ja","ko","lt","lv","mk","no","nl","pl","pt","pt-PT","ro","ru","sk","sl","sr","sv","th","tr","uk","vi","zh-CN","zh-HK","zh-TW"];const E=["arab","arabext","latn"];const N=t=>E.includes(t);const j=(new Intl.NumberFormat).resolvedOptions().numberingSystem;const x=j==="arab"||!N(j)?"latn":j;const R=t=>N(t)?t:x;function S(t,n="cldr"){const e=n==="cldr"?B:v;if(!t){return I}if(e.includes(t)){return t}t=t.toLowerCase();if(t==="nb"){return"no"}if(n==="t9n"&&t==="pt"){return"pt-BR"}if(t.includes("-")){t=t.replace(/(\w+)-(\w+)/,((t,n,e)=>`${n}-${e.toUpperCase()}`));if(!e.includes(t)){t=t.split("-")[0]}}if(t==="zh"){return"zh-CN"}if(!e.includes(t)){console.warn(`Translations for the "${t}" locale are not available and will fall back to the default, English (en).`);return I}return t}const k=new Set;function z(t){O(t);if(k.size===0){T?.observe(document.documentElement,{attributes:true,attributeFilter:["lang"],subtree:true})}k.add(t)}function O(t){t.effectiveLocale=y(t)}function C(t){k.delete(t);if(k.size===0){T.disconnect()}}const T=s("mutation",(e=>{e.forEach((e=>{const s=e.target;k.forEach((e=>{const r=!n(s,e.el);if(r){return}const i=t(e.el,"[lang]");if(!i){e.effectiveLocale=I;return}const o=i.lang;e.effectiveLocale=i.hasAttribute("lang")&&o===""?I:o}))}))}));function y(n){return n.el.lang||t(n.el,"[lang]")?.lang||document.documentElement.lang||I}class H{constructor(){this.delocalize=t=>this._numberFormatOptions?p(t,(t=>t.replace(new RegExp(`[${this._minusSign}]`,"g"),"-").replace(new RegExp(`[${this._group}]`,"g"),"").replace(new RegExp(`[${this._decimal}]`,"g"),".").replace(new RegExp(`[${this._digits.join("")}]`,"g"),this._getDigitIndex))):t;this.localize=t=>this._numberFormatOptions?p(t,(t=>c(t.trim())?new o(t.trim()).format(this).replace(new RegExp(`[${this._actualGroup}]`,"g"),this._group):t)):t}get group(){return this._group}get decimal(){return this._decimal}get minusSign(){return this._minusSign}get digits(){return this._digits}get numberFormatter(){return this._numberFormatter}get numberFormatOptions(){return this._numberFormatOptions}set numberFormatOptions(t){t.locale=S(t?.locale);t.numberingSystem=R(t?.numberingSystem);if(!this._numberFormatOptions&&t.locale===I&&t.numberingSystem===x&&Object.keys(t).length===2||JSON.stringify(this._numberFormatOptions)===JSON.stringify(t)){return}this._numberFormatOptions=t;this._numberFormatter=new Intl.NumberFormat(this._numberFormatOptions.locale,this._numberFormatOptions);this._digits=[...new Intl.NumberFormat(this._numberFormatOptions.locale,{useGrouping:false,numberingSystem:this._numberFormatOptions.numberingSystem}).format(9876543210)].reverse();const n=new Map(this._digits.map(((t,n)=>[t,n])));const e=new Intl.NumberFormat(this._numberFormatOptions.locale,{numberingSystem:this._numberFormatOptions.numberingSystem}).formatToParts(-12345678.9);this._actualGroup=e.find((t=>t.type==="group")).value;this._group=this._actualGroup.trim().length===0||this._actualGroup==" "?" ":this._actualGroup;this._decimal=e.find((t=>t.type==="decimal")).value;this._minusSign=e.find((t=>t.type==="minusSign")).value;this._getDigitIndex=t=>n.get(t)}}const A=new H;let F;let M;function P(t={}){return Object.entries(t).sort((([t],[n])=>t.localeCompare(n))).map((t=>`${t[0]}-${t[1]}`)).flat().join(":")}function G(t,n){t=S(t);if(!F){F=new Map}if(M!==t){F.clear();M=t}const e=P(n);const s=F.get(e);if(s){return s}const r=new Intl.DateTimeFormat(t,n);F.set(e,r);return r}export{o as B,H as N,w as a,R as b,z as c,C as d,G as e,S as g,c as i,A as n,u as p,$ as s};
+//# sourceMappingURL=p-bdc14ccb.js.map

package/dist/calcite/p-beb22c39.entry.js

@@ -0,0 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.6.0-next.3
+ */
+import{r as t,c as e,h as i,g as o}from"./p-819bde10.js";import{c as n,d as s}from"./p-603943ce.js";import{h as a,e as c}from"./p-224218c9.js";import{s as l,a as r,c as d}from"./p-110e5bc8.js";import{c as h,d as g}from"./p-bdc14ccb.js";import{c as p,d as m,s as f,u}from"./p-a5baec64.js";import{K as b}from"./p-1204cf5a.js";import{o as v}from"./p-573201c9.js";import{g as k}from"./p-af9dc83a.js";import"./p-e54e5b79.js";import"./p-b5a7ba7b.js";import"./p-7cc4bcb2.js";import"./p-dcfcb77f.js";const x={title:"title",message:"message",link:"link",actionsEnd:"actions-end"};const w={actionsEnd:"actions-end",close:"notice-close",container:"container",content:"notice-content",icon:"notice-icon"};const z=":host([scale=s]){--calcite-notice-spacing-token-small:0.5rem;--calcite-notice-spacing-token-large:0.75rem}:host([scale=s]) .container slot[name=title]::slotted(*),:host([scale=s]) .container *::slotted([slot=title]){margin-block:0.125rem;font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=s]) .container slot[name=message]::slotted(*),:host([scale=s]) .container *::slotted([slot=message]){margin-block:0.125rem;font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) ::slotted(calcite-link){margin-block:0.125rem;font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) .notice-close{padding:0.5rem}:host([scale=m]){--calcite-notice-spacing-token-small:0.75rem;--calcite-notice-spacing-token-large:1rem}:host([scale=m]) .container slot[name=title]::slotted(*),:host([scale=m]) .container *::slotted([slot=title]){margin-block:0.125rem;font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=m]) .container slot[name=message]::slotted(*),:host([scale=m]) .container *::slotted([slot=message]){margin-block:0.125rem;font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) ::slotted(calcite-link){margin-block:0.125rem;font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=l]){--calcite-notice-spacing-token-small:1rem;--calcite-notice-spacing-token-large:1.25rem}:host([scale=l]) .container slot[name=title]::slotted(*),:host([scale=l]) .container *::slotted([slot=title]){margin-block:0.125rem;font-size:var(--calcite-font-size-1);line-height:1.375}:host([scale=l]) .container slot[name=message]::slotted(*),:host([scale=l]) .container *::slotted([slot=message]){margin-block:0.125rem;font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) ::slotted(calcite-link){margin-block:0.125rem;font-size:var(--calcite-font-size-0);line-height:1.375}:host([width=auto]){--calcite-notice-width:auto}:host([width=half]){--calcite-notice-width:50%}:host([width=full]){--calcite-notice-width:100%}:host{margin-inline:auto;display:none;max-inline-size:100%;align-items:center;inline-size:var(--calcite-notice-width)}.container{pointer-events:none;margin-block:0px;box-sizing:border-box;display:none;inline-size:100%;background-color:var(--calcite-color-foreground-1);opacity:0;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;max-block-size:0;text-align:start;border-inline-start:0px solid;box-shadow:0 0 0 0 transparent}.notice-close{outline-color:transparent}.notice-close:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite-color-brand)));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host{display:flex}:host([open]) .container{pointer-events:auto;display:flex;max-block-size:100%;align-items:center;border-width:2px;opacity:1;--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.container slot[name=title]::slotted(*),.container *::slotted([slot=title]){margin:0px;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}.container slot[name=message]::slotted(*),.container *::slotted([slot=message]){margin:0px;display:inline;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2);margin-inline-end:var(--calcite-notice-spacing-token-small)}.notice-content{box-sizing:border-box;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-inline:var(--calcite-notice-spacing-token-large);flex:0 0 auto;display:flex;min-inline-size:0px;flex-direction:column;overflow-wrap:break-word;flex:1 1 0;padding-block:var(--calcite-notice-spacing-token-small);padding-inline:0 var(--calcite-notice-spacing-token-small)}.notice-content:first-of-type:not(:only-child){padding-inline-start:var(--calcite-notice-spacing-token-large)}.notice-content:only-of-type{padding-block:var(--calcite-notice-spacing-token-small);padding-inline:var(--calcite-notice-spacing-token-large)}.notice-icon{display:flex;align-items:center;box-sizing:border-box;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-block:var(--calcite-notice-spacing-token-small);padding-inline:var(--calcite-notice-spacing-token-large);flex:0 0 auto}.notice-close{display:flex;cursor:pointer;align-items:center;align-self:stretch;border-style:none;background-color:transparent;color:var(--calcite-color-text-3);outline:2px solid transparent;outline-offset:2px;box-sizing:border-box;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-block:var(--calcite-notice-spacing-token-small);padding-inline:var(--calcite-notice-spacing-token-large);flex:0 0 auto;-webkit-appearance:none}.notice-close:hover,.notice-close:focus{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}.notice-close:active{background-color:var(--calcite-color-foreground-3)}.actions-end{display:flex;align-self:stretch}:host([kind=brand]) .container{border-color:var(--calcite-color-brand)}:host([kind=brand]) .container .notice-icon{color:var(--calcite-color-brand)}:host([kind=info]) .container{border-color:var(--calcite-color-status-info)}:host([kind=info]) .container .notice-icon{color:var(--calcite-color-status-info)}:host([kind=danger]) .container{border-color:var(--calcite-color-status-danger)}:host([kind=danger]) .container .notice-icon{color:var(--calcite-color-status-danger)}:host([kind=success]) .container{border-color:var(--calcite-color-status-success)}:host([kind=success]) .container .notice-icon{color:var(--calcite-color-status-success)}:host([kind=warning]) .container{border-color:var(--calcite-color-status-warning)}:host([kind=warning]) .container .notice-icon{color:var(--calcite-color-status-warning)}:host([hidden]){display:none}[hidden]{display:none}";const y=class{constructor(i){t(this,i);this.calciteNoticeBeforeClose=e(this,"calciteNoticeBeforeClose",6);this.calciteNoticeBeforeOpen=e(this,"calciteNoticeBeforeOpen",6);this.calciteNoticeClose=e(this,"calciteNoticeClose",6);this.calciteNoticeOpen=e(this,"calciteNoticeOpen",6);this.setTransitionEl=t=>{this.transitionEl=t};this.close=()=>{this.open=false};this.openTransitionProp="opacity";this.open=false;this.kind="brand";this.closable=false;this.icon=undefined;this.iconFlipRtl=false;this.scale="m";this.width="auto";this.messages=undefined;this.messageOverrides=undefined;this.effectiveLocale=undefined;this.defaultMessages=undefined}openHandler(){v(this)}onMessagesChange(){}updateRequestedIcon(){this.requestedIcon=a(b,this.icon,this.kind)}connectedCallback(){n(this);h(this);p(this)}disconnectedCallback(){s(this);g(this);m(this)}async componentWillLoad(){l(this);this.requestedIcon=a(b,this.icon,this.kind);await f(this);if(this.open){v(this)}}componentDidLoad(){r(this)}render(){const{el:t}=this;const e=i("button",{"aria-label":this.messages.close,class:w.close,onClick:this.close,ref:t=>this.closeButton=t},i("calcite-icon",{icon:"x",scale:k(this.scale)}));const o=c(t,x.actionsEnd);return i("div",{class:w.container,ref:this.setTransitionEl},this.requestedIcon?i("div",{class:w.icon},i("calcite-icon",{flipRtl:this.iconFlipRtl,icon:this.requestedIcon,scale:k(this.scale)})):null,i("div",{class:w.content},i("slot",{name:x.title}),i("slot",{name:x.message}),i("slot",{name:x.link})),o?i("div",{class:w.actionsEnd},i("slot",{name:x.actionsEnd})):null,this.closable?e:null)}async setFocus(){await d(this);const t=this.el.querySelector("calcite-link");if(!this.closeButton&&!t){return}if(t){return t.setFocus()}else if(this.closeButton){this.closeButton.focus()}}onBeforeClose(){this.calciteNoticeBeforeClose.emit()}onBeforeOpen(){this.calciteNoticeBeforeOpen.emit()}onClose(){this.calciteNoticeClose.emit()}onOpen(){this.calciteNoticeOpen.emit()}effectiveLocaleChange(){u(this,this.effectiveLocale)}static get assetsDirs(){return["assets"]}get el(){return o(this)}static get watchers(){return{open:["openHandler"],messageOverrides:["onMessagesChange"],icon:["updateRequestedIcon"],kind:["updateRequestedIcon"],effectiveLocale:["effectiveLocaleChange"]}}};y.style=z;export{y as calcite_notice};
+//# sourceMappingURL=p-beb22c39.entry.js.map

package/dist/calcite/p-beb22c39.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SLOTS","title","message","link","actionsEnd","CSS","close","container","content","icon","noticeCss","Notice","this","setTransitionEl","el","transitionEl","open","openTransitionProp","openHandler","onToggleOpenCloseComponent","onMessagesChange","updateRequestedIcon","requestedIcon","setRequestedIcon","KindIcons","kind","connectedCallback","connectConditionalSlotComponent","connectLocalized","connectMessages","disconnectedCallback","disconnectConditionalSlotComponent","disconnectLocalized","disconnectMessages","componentWillLoad","setUpLoadableComponent","setUpMessages","componentDidLoad","setComponentLoaded","render","closeButton","h","messages","class","onClick","ref","scale","getIconScale","hasActionEnd","getSlotted","flipRtl","iconFlipRtl","name","closable","setFocus","componentFocusable","noticeLinkEl","querySelector","focus","onBeforeClose","calciteNoticeBeforeClose","emit","onBeforeOpen","calciteNoticeBeforeOpen","onClose","calciteNoticeClose","onOpen","calciteNoticeOpen","effectiveLocaleChange","updateMessages","effectiveLocale"],"sources":["src/components/notice/resources.ts","src/components/notice/notice.scss?tag=calcite-notice&encapsulation=shadow","src/components/notice/notice.tsx"],"sourcesContent":["export const SLOTS = {\n  title: \"title\",\n  message: \"message\",\n  link: \"link\",\n  actionsEnd: \"actions-end\",\n};\n\nexport const CSS = {\n  actionsEnd: \"actions-end\",\n  close: \"notice-close\",\n  container: \"container\",\n  content: \"notice-content\",\n  icon: \"notice-icon\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-notice-width: The width of the component.\n */\n\n// scale variables\n:host([scale=\"s\"]) {\n  --calcite-notice-spacing-token-small: theme(\"spacing.2\");\n  --calcite-notice-spacing-token-large: theme(\"spacing.3\");\n  @include slotted(\"title\", \"*\", \".container\") {\n    @apply text-n1-wrap my-0.5;\n  }\n  @include slotted(\"message\", \"*\", \".container\") {\n    @apply text-n2-wrap my-0.5;\n  }\n  ::slotted(calcite-link) {\n    @apply text-n2-wrap my-0.5;\n  }\n  .notice-close {\n    // specific padding for close button to align with calcite-action small-scale spacing\n    @apply p-2;\n  }\n}\n\n:host([scale=\"m\"]) {\n  --calcite-notice-spacing-token-small: theme(\"spacing.3\");\n  --calcite-notice-spacing-token-large: theme(\"spacing.4\");\n  @include slotted(\"title\", \"*\", \".container\") {\n    @apply text-0-wrap my-0.5;\n  }\n  @include slotted(\"message\", \"*\", \".container\") {\n    @apply text-n1-wrap my-0.5;\n  }\n  ::slotted(calcite-link) {\n    @apply text-n1-wrap my-0.5;\n  }\n}\n\n:host([scale=\"l\"]) {\n  --calcite-notice-spacing-token-small: theme(\"spacing.4\");\n  --calcite-notice-spacing-token-large: theme(\"spacing.5\");\n  @include slotted(\"title\", \"*\", \".container\") {\n    @apply text-1-wrap my-0.5;\n  }\n  @include slotted(\"message\", \"*\", \".container\") {\n    @apply text-0-wrap my-0.5;\n  }\n  ::slotted(calcite-link) {\n    @apply text-0-wrap my-0.5;\n  }\n}\n\n:host([width=\"auto\"]) {\n  --calcite-notice-width: theme(\"width.auto\");\n}\n\n:host([width=\"half\"]) {\n  --calcite-notice-width: theme(\"width[1/2]\");\n}\n\n:host([width=\"full\"]) {\n  --calcite-notice-width: theme(\"width.full\");\n}\n\n:host {\n  @apply mx-auto hidden max-w-full items-center;\n  inline-size: var(--calcite-notice-width);\n}\n\n.container {\n  @apply bg-foreground-1\n    pointer-events-none\n    my-0\n    box-border\n    hidden\n    w-full\n    opacity-0\n    transition-default;\n  max-block-size: 0;\n  text-align: start;\n  border-inline-start: 0px solid;\n  box-shadow: 0 0 0 0 transparent;\n}\n\n// focus styles\n.notice-close {\n  @apply focus-base;\n  &:focus {\n    @apply focus-inset;\n  }\n}\n\n:host {\n  @apply flex;\n}\n\n:host([open]) .container {\n  @apply shadow-1\n    pointer-events-auto\n    flex\n    max-h-full\n    items-center\n    border-2\n    opacity-100;\n}\n\n@include slotted(\"title\", \"*\", \".container\") {\n  @apply text-color-1 m-0 font-medium;\n}\n\n@include slotted(\"message\", \"*\", \".container\") {\n  @apply text-color-2 m-0 inline font-normal;\n  margin-inline-end: var(--calcite-notice-spacing-token-small);\n}\n\n@mixin notice-element-base() {\n  @apply transition-default box-border;\n  padding-block: var(--calcite-notice-spacing-token-small);\n  padding-inline: var(--calcite-notice-spacing-token-large);\n  flex: 0 0 auto;\n}\n\n.notice-content {\n  @include notice-element-base;\n  @apply flex min-w-0 flex-col break-words;\n  flex: 1 1 0;\n  padding-block: var(--calcite-notice-spacing-token-small);\n  padding-inline: 0 var(--calcite-notice-spacing-token-small);\n\n  &:first-of-type:not(:only-child) {\n    padding-inline-start: var(--calcite-notice-spacing-token-large);\n  }\n  &:only-of-type {\n    padding-block: var(--calcite-notice-spacing-token-small);\n    padding-inline: var(--calcite-notice-spacing-token-large);\n  }\n}\n\n.notice-icon {\n  @apply flex items-center;\n  @include notice-element-base;\n}\n\n.notice-close {\n  @apply text-color-3 flex cursor-pointer items-center self-stretch border-none bg-transparent outline-none;\n  @include notice-element-base;\n  -webkit-appearance: none;\n\n  &:hover,\n  &:focus {\n    @apply bg-foreground-2 text-color-1;\n  }\n\n  &:active {\n    @apply bg-foreground-3;\n  }\n}\n\n.actions-end {\n  @apply flex self-stretch;\n}\n\n$noticeKinds:\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 $noticeKind in $noticeKinds {\n  $name: nth($noticeKind, 1);\n  $kind: nth($noticeKind, 2);\n\n  :host([kind=\"#{$name}\"]) .container {\n    border-color: $kind;\n    & .notice-icon {\n      color: $kind;\n    }\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport { getSlotted, setRequestedIcon } from \"../../utils/dom\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Kind, Scale, Width } from \"../interfaces\";\nimport { KindIcons } from \"../resources\";\nimport { NoticeMessages } from \"./assets/notice/t9n\";\nimport { CSS, SLOTS } from \"./resources\";\nimport { onToggleOpenCloseComponent, OpenCloseComponent } from \"../../utils/openCloseComponent\";\nimport { getIconScale } from \"../../utils/component\";\n\n/**\n * Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because\n * notices are displayed inline, a common use case is displaying them on page-load to present users with short hints or contextual copy.\n * They are optionally closable - useful for keeping track of whether or not a user has closed the notice. You can also choose not\n * to display a notice on page load and set the \"active\" attribute as needed to contextually provide inline messaging to users.\n */\n\n/**\n * @slot title - A slot for adding the title.\n * @slot message - A slot for adding the message.\n * @slot link - A slot for adding a `calcite-action` to take, 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 less actions.\n */\n\n@Component({\n  tag: \"calcite-notice\",\n  styleUrl: \"notice.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Notice\n  implements\n    ConditionalSlotComponent,\n    LoadableComponent,\n    T9nComponent,\n    LocalizedComponent,\n    OpenCloseComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //---------------------------------------------------------------------------\n\n  /** When `true`, the component is visible. */\n  @Prop({ reflect: true, mutable: true }) open = false;\n\n  @Watch(\"open\")\n  openHandler(): void {\n    onToggleOpenCloseComponent(this);\n  }\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  /** When `true`, a close button is added to the component. */\n  @Prop({ reflect: true }) closable = false;\n\n  /**\n   * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.\n   */\n  @Prop({ reflect: true }) icon: string | 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 the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** Specifies the width of the component. */\n  @Prop({ reflect: true }) width: Width = \"auto\";\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: NoticeMessages;\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<NoticeMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  @Watch(\"icon\")\n  @Watch(\"kind\")\n  updateRequestedIcon(): void {\n    this.requestedIcon = setRequestedIcon(KindIcons, this.icon, this.kind);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectConditionalSlotComponent(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectConditionalSlotComponent(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    this.requestedIcon = setRequestedIcon(KindIcons, this.icon, this.kind);\n    await setUpMessages(this);\n    if (this.open) {\n      onToggleOpenCloseComponent(this);\n    }\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  render(): VNode {\n    const { el } = this;\n    const closeButton = (\n      <button\n        aria-label={this.messages.close}\n        class={CSS.close}\n        onClick={this.close}\n        // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n        ref={(el) => (this.closeButton = el)}\n      >\n        <calcite-icon icon=\"x\" scale={getIconScale(this.scale)} />\n      </button>\n    );\n\n    const hasActionEnd = getSlotted(el, SLOTS.actionsEnd);\n\n    return (\n      <div\n        class={CSS.container}\n        // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n        ref={this.setTransitionEl}\n      >\n        {this.requestedIcon ? (\n          <div class={CSS.icon}>\n            <calcite-icon\n              flipRtl={this.iconFlipRtl}\n              icon={this.requestedIcon}\n              scale={getIconScale(this.scale)}\n            />\n          </div>\n        ) : null}\n        <div class={CSS.content}>\n          <slot name={SLOTS.title} />\n          <slot name={SLOTS.message} />\n          <slot name={SLOTS.link} />\n        </div>\n        {hasActionEnd ? (\n          <div class={CSS.actionsEnd}>\n            <slot name={SLOTS.actionsEnd} />\n          </div>\n        ) : null}\n        {this.closable ? closeButton : null}\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 }) calciteNoticeBeforeClose: 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 }) calciteNoticeBeforeOpen: EventEmitter<void>;\n\n  /** Fires when the component is closed and animation is complete. */\n  @Event({ cancelable: false }) calciteNoticeClose: EventEmitter<void>;\n\n  /** Fires when the component is open and animation is complete. */\n  @Event({ cancelable: false }) calciteNoticeOpen: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component's first focusable element. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    const noticeLinkEl = this.el.querySelector(\"calcite-link\");\n\n    if (!this.closeButton && !noticeLinkEl) {\n      return;\n    }\n    if (noticeLinkEl) {\n      return noticeLinkEl.setFocus();\n    } else if (this.closeButton) {\n      this.closeButton.focus();\n    }\n  }\n\n  onBeforeClose(): void {\n    this.calciteNoticeBeforeClose.emit();\n  }\n\n  onBeforeOpen(): void {\n    this.calciteNoticeBeforeOpen.emit();\n  }\n\n  onClose(): void {\n    this.calciteNoticeClose.emit();\n  }\n\n  onOpen(): void {\n    this.calciteNoticeOpen.emit();\n  }\n\n  private setTransitionEl = (el: HTMLElement): void => {\n    this.transitionEl = el;\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n  private close = (): void => {\n    this.open = false;\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteNoticeElement;\n\n  /** The close button element. */\n  private closeButton?: HTMLButtonElement;\n\n  /** The computed icon to render. */\n  private requestedIcon?: string;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: NoticeMessages;\n\n  openTransitionProp = \"opacity\";\n\n  transitionEl: HTMLElement;\n}\n"],"mappings":";;;;;4eAAO,MAAMA,EAAQ,CACnBC,MAAO,QACPC,QAAS,UACTC,KAAM,OACNC,WAAY,eAGP,MAAMC,EAAM,CACjBD,WAAY,cACZE,MAAO,eACPC,UAAW,YACXC,QAAS,iBACTC,KAAM,eCZR,MAAMC,EAAY,qmM,MC2DLC,EAAM,M,yQA4MTC,KAAAC,gBAAmBC,IACzBF,KAAKG,aAAeD,CAAE,EAQhBF,KAAAN,MAAQ,KACdM,KAAKI,KAAO,KAAK,EA0BnBJ,KAAAK,mBAAqB,U,UAjO0B,M,UAW3C,Q,cAGgC,M,qCAQG,M,WAGC,I,WAGA,O,sHAzBxC,WAAAC,GACEC,EAA2BP,K,CAyC7B,gBAAAQ,G,CAMA,mBAAAC,GACET,KAAKU,cAAgBC,EAAiBC,EAAWZ,KAAKH,KAAMG,KAAKa,K,CASnE,iBAAAC,GACEC,EAAgCf,MAChCgB,EAAiBhB,MACjBiB,EAAgBjB,K,CAGlB,oBAAAkB,GACEC,EAAmCnB,MACnCoB,EAAoBpB,MACpBqB,EAAmBrB,K,CAGrB,uBAAMsB,GACJC,EAAuBvB,MACvBA,KAAKU,cAAgBC,EAAiBC,EAAWZ,KAAKH,KAAMG,KAAKa,YAC3DW,EAAcxB,MACpB,GAAIA,KAAKI,KAAM,CACbG,EAA2BP,K,EAI/B,gBAAAyB,GACEC,EAAmB1B,K,CAGrB,MAAA2B,GACE,MAAMzB,GAAEA,GAAOF,KACf,MAAM4B,EACJC,EAAA,uBACc7B,KAAK8B,SAASpC,MAC1BqC,MAAOtC,EAAIC,MACXsC,QAAShC,KAAKN,MAEduC,IAAM/B,GAAQF,KAAK4B,YAAc1B,GAEjC2B,EAAA,gBAAchC,KAAK,IAAIqC,MAAOC,EAAanC,KAAKkC,UAIpD,MAAME,EAAeC,EAAWnC,EAAId,EAAMI,YAE1C,OACEqC,EAAA,OACEE,MAAOtC,EAAIE,UAEXsC,IAAKjC,KAAKC,iBAETD,KAAKU,cACJmB,EAAA,OAAKE,MAAOtC,EAAII,MACdgC,EAAA,gBACES,QAAStC,KAAKuC,YACd1C,KAAMG,KAAKU,cACXwB,MAAOC,EAAanC,KAAKkC,UAG3B,KACJL,EAAA,OAAKE,MAAOtC,EAAIG,SACdiC,EAAA,QAAMW,KAAMpD,EAAMC,QAClBwC,EAAA,QAAMW,KAAMpD,EAAME,UAClBuC,EAAA,QAAMW,KAAMpD,EAAMG,QAEnB6C,EACCP,EAAA,OAAKE,MAAOtC,EAAID,YACdqC,EAAA,QAAMW,KAAMpD,EAAMI,cAElB,KACHQ,KAAKyC,SAAWb,EAAc,K,CA+BrC,cAAMc,SACEC,EAAmB3C,MAEzB,MAAM4C,EAAe5C,KAAKE,GAAG2C,cAAc,gBAE3C,IAAK7C,KAAK4B,cAAgBgB,EAAc,CACtC,M,CAEF,GAAIA,EAAc,CAChB,OAAOA,EAAaF,U,MACf,GAAI1C,KAAK4B,YAAa,CAC3B5B,KAAK4B,YAAYkB,O,EAIrB,aAAAC,GACE/C,KAAKgD,yBAAyBC,M,CAGhC,YAAAC,GACElD,KAAKmD,wBAAwBF,M,CAG/B,OAAAG,GACEpD,KAAKqD,mBAAmBJ,M,CAG1B,MAAAK,GACEtD,KAAKuD,kBAAkBN,M,CAiCzB,qBAAAO,GACEC,EAAezD,KAAMA,KAAK0D,gB"}

package/dist/calcite/p-bf6a6593.entry.js

@@ -0,0 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.6.0-next.3
+ */
+import{r as t,c as e,h as s,H as i,g as n}from"./p-819bde10.js";import{c as o,d as a}from"./p-b5d774a4.js";import{u as c,I as h}from"./p-94e6d97e.js";import{e as r,c as l,d}from"./p-bdc14ccb.js";import{u,c as m,d as p,s as f}from"./p-a5baec64.js";import{c as b,s as g,a as C}from"./p-110e5bc8.js";import{c as T,d as y,a as D,H as I}from"./p-8bcc99c2.js";import"./p-224218c9.js";import"./p-b5a7ba7b.js";import"./p-7cc4bcb2.js";import"./p-af9dc83a.js";import"./p-e7e8f7da.js";import"./p-dcfcb77f.js";import"./p-e54e5b79.js";const j=60;const v=["CET","CST6CDT","EET","EST","EST5EDT","Factory","HST","MET","MST","MST7MDT","PST8PDT","UTC","WET"];function Z(t){const e="−";const s="-";return t.replace(":15",".25").replace(":30",".5").replace(":45",".75").replace(e,s)}function w(t,e){const s=L(t,"en-US",e).replace("GMT","");if(s===""){return 0}return Number(Z(s))*j}function x(){const t=new Date;return t.getTimezoneOffset()*-1}function E(){const t=new Intl.DateTimeFormat;return t.resolvedOptions().timeZone}let S;async function M(t,e,s,i){const n=i.getTime();const o=Intl.supportedValuesOf("timeZone");if(s==="offset"){if(!S){S=Promise.all([import("./p-952d10a6.js"),import("./p-15f3a8e1.js")])}return S.then((async([{groupTimeZones:s},{DateEngine:i}])=>{const o=await s({dateEngine:new i,groupDateRange:1,startDate:new Date(n).toISOString()});const a=new Intl.ListFormat(t,{style:"long",type:"conjunction"});o.forEach((t=>{const e=[];let s=0;t.tzs.forEach(((t,i)=>{if(v.includes(t)){s++}e[i]=s}));t.tzs=t.tzs.filter((t=>!v.includes(t)));t.labelTzIndices=t.labelTzIndices.map((t=>t-e[t])).filter((e=>e>=0&&e<t.tzs.length))}));return o.map((({labelTzIndices:s,tzs:i})=>{const o=i[0];const c=Z(L(o,t,n));const h=w(o,n);const r=s.map((t=>{const s=i[t];const n=e[s];return n||s.split("/").pop()}));const l=k(e,c,a.format(r));return{label:l,value:h,filterValue:i.map((t=>P(t)))}})).filter((t=>!!t)).sort(((t,e)=>t.value-e.value))}))}return o.map((t=>{const e=P(t);const s=t;return{label:e,value:s,filterValue:t}})).filter((t=>!!t)).sort()}function P(t){return t.replace(/_/g," ")}function k(t,e,s){return t.timeZoneLabel.replace("{offset}",e).replace("{cities}",s)}function L(t,e,s=Date.now()){const i=r(e,{timeZone:t,timeZoneName:"shortOffset"});const n=i.formatToParts(s);return n.find((({type:t})=>t==="timeZoneName")).value}const O=":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";const z=class{constructor(s){t(this,s);this.calciteInputTimeZoneBeforeClose=e(this,"calciteInputTimeZoneBeforeClose",6);this.calciteInputTimeZoneBeforeOpen=e(this,"calciteInputTimeZoneBeforeOpen",6);this.calciteInputTimeZoneChange=e(this,"calciteInputTimeZoneChange",6);this.calciteInputTimeZoneClose=e(this,"calciteInputTimeZoneClose",6);this.calciteInputTimeZoneOpen=e(this,"calciteInputTimeZoneOpen",6);this.setComboboxRef=t=>{this.comboboxEl=t};this.onComboboxBeforeClose=t=>{t.stopPropagation();this.calciteInputTimeZoneBeforeClose.emit()};this.onComboboxBeforeOpen=t=>{t.stopPropagation();this.calciteInputTimeZoneBeforeOpen.emit()};this.onComboboxChange=t=>{t.stopPropagation();const e=t.target;const s=this.findTimeZoneItem(e.selectedItems[0].getAttribute("data-value"));const i=`${s.value}`;if(this.value===i){return}this.value=i;this.selectedTimeZoneItem=s;this.calciteInputTimeZoneChange.emit()};this.onComboboxClose=t=>{t.stopPropagation();this.open=false;this.calciteInputTimeZoneClose.emit()};this.onComboboxOpen=t=>{this.open=true;t.stopPropagation();this.calciteInputTimeZoneOpen.emit()};this.disabled=false;this.form=undefined;this.maxItems=0;this.messages=undefined;this.messageOverrides=undefined;this.mode="offset";this.validationMessage=undefined;this.validationIcon=undefined;this.name=undefined;this.open=false;this.overlayPositioning="absolute";this.referenceDate=undefined;this.required=false;this.scale="m";this.status="idle";this.value=undefined;this.defaultMessages=undefined;this.effectiveLocale=""}onMessagesChange(){}handleTimeZoneItemPropsChange(){this.updateTimeZoneItemsAndSelection()}handleValueChange(t,e){const s=this.findTimeZoneItem(t);if(!s){this.value=e;return}this.selectedTimeZoneItem=s}async setFocus(){await b(this);await this.comboboxEl.setFocus()}effectiveLocaleWatcher(){u(this,this.effectiveLocale)}onLabelClick(){this.setFocus()}findTimeZoneItem(t){const e=t;return this.timeZoneItems.find((({value:t})=>t==e))}async updateTimeZoneItemsAndSelection(){this.timeZoneItems=await this.createTimeZoneItems();const t=this.mode==="offset"?x():E();const e=this.value??t;this.selectedTimeZoneItem=this.findTimeZoneItem(e);if(!this.selectedTimeZoneItem){this.selectedTimeZoneItem=this.findTimeZoneItem(t)}}async createTimeZoneItems(){if(!this.effectiveLocale||!this.messages){return[]}return M(this.effectiveLocale,this.messages,this.mode,this.referenceDate instanceof Date?this.referenceDate:new Date(this.referenceDate??Date.now()))}connectedCallback(){T(this);o(this);l(this);m(this)}disconnectedCallback(){y(this);a(this);d(this);p(this)}async componentWillLoad(){g(this);await f(this);await this.updateTimeZoneItemsAndSelection();const t=`${this.selectedTimeZoneItem.value}`;D(this,t);this.value=t}componentDidLoad(){C(this)}componentDidRender(){c(this)}render(){return s(i,null,s(h,{disabled:this.disabled},s("calcite-combobox",{clearDisabled:true,disabled:this.disabled,label:this.messages.chooseTimeZone,lang:this.effectiveLocale,maxItems:this.maxItems,onCalciteComboboxBeforeClose:this.onComboboxBeforeClose,onCalciteComboboxBeforeOpen:this.onComboboxBeforeOpen,onCalciteComboboxChange:this.onComboboxChange,onCalciteComboboxClose:this.onComboboxClose,onCalciteComboboxOpen:this.onComboboxOpen,open:this.open,overlayPositioning:this.overlayPositioning,scale:this.scale,selectionMode:"single-persist",status:this.status,"validation-icon":this.validationIcon,"validation-message":this.validationMessage,ref:this.setComboboxRef},this.timeZoneItems.map((t=>{const e=this.selectedTimeZoneItem===t;const{label:i,value:n}=t;return s("calcite-combobox-item",{"data-value":n,key:i,selected:e,textLabel:i,value:`${t.filterValue}`})}))),s(I,{component:this})))}static get delegatesFocus(){return true}static get assetsDirs(){return["assets"]}get el(){return n(this)}static get watchers(){return{messageOverrides:["onMessagesChange"],messages:["handleTimeZoneItemPropsChange"],mode:["handleTimeZoneItemPropsChange"],referenceDate:["handleTimeZoneItemPropsChange"],value:["handleValueChange"],effectiveLocale:["effectiveLocaleWatcher"]}}};z.style=O;export{z as calcite_input_time_zone};
+//# sourceMappingURL=p-bf6a6593.entry.js.map