@ukic/web-components 3.0.0-alpha.12 → 3.0.0-alpha.13

package/dist/core/p-e6dc3cd1.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icToastCss","AUTO_DISMISS_TIMER_REFRESH_RATE_MS","TOAST_HEADING_CHAR_LIMIT","TOAST_MESSAGE_CHAR_LIMIT","Toast","this","interactiveElements","dismissAction","icDismiss","emit","handleProgressChange","timerProgress","autoDismissTimeout","onFocus","focusInteractiveElement","isManual","onBlur","handleTimer","type","dismissModeChangeHandler","newValue","disconnectedCallback","window","clearTimeout","dismissTimeout","clearInterval","timerRefreshInterval","componentWillLoad","handleLongText","heading","length","_a","message","isSlotUsed","el","dismissMode","variant","neutralVariantLabel","_b","neutralIconAriaLabel","VARIANT_ICONS","ariaLabel","toastMessage","isPropDefined","setAttribute","componentDidLoad","onComponentRequiredPropUndefined","prop","propName","componentDidUpdate","resetAutoDismissTimer","actionContent","getSlot","dismissButton","shadowRoot","querySelector","push","findNextInteractiveElement","shiftKeyPressed","setFocus","watchVisibleHandler","visible","handleDismiss","handleKeyboard","ev","key","preventDefault","shiftKey","repeat","stopImmediatePropagation","setTimeout","setInterval","setVisible","document","activeElement","headingTooLong","messageTooLong","console","error","isBackwards","firstEl","lastEl","isActive","currentIndex","some","index","targetEl","render","dismissButtonAriaLabel","h","Host","class","tabindex","role","name","innerHTML","icon","theme","monochrome","size","progress","description","id","closeIcon","onClick"],"sources":["src/components/ic-toast/ic-toast.css?tag=ic-toast&encapsulation=shadow","src/components/ic-toast/ic-toast.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-toast: z-index of toast\n */\n\n@media (prefers-reduced-motion: no-preference) {\n  :host {\n    animation: fadein var(--ic-transition-duration-slow) ease-in-out;\n  }\n\n  :host(.hidden) {\n    animation: fadeout var(--ic-transition-duration-slow) ease-in-out;\n  }\n}\n\n:host {\n  --bottom-position: var(--ic-space-xl);\n\n  position: fixed;\n  bottom: var(--bottom-position);\n  left: 50%;\n  transform: translate(-50%);\n  z-index: var(--ic-z-index-toast);\n}\n\n:host(.ic-toast-hidden) {\n  display: none;\n}\n\n:host(:focus) {\n  outline: none;\n}\n\n.container {\n  max-width: 32.5rem;\n  min-width: 18rem;\n  box-shadow: var(--ic-elevation-overlay);\n  min-height: 3.5rem;\n  background-color: var(--ic-toast-background);\n  display: flex;\n  align-items: center;\n  position: relative;\n  border-radius: var(--ic-border-radius);\n}\n\n.toast-icon-container {\n  height: 100%;\n  display: flex;\n  align-items: center;\n}\n\n.divider {\n  height: 100%;\n  width: var(--ic-space-xs);\n  position: absolute;\n  border-radius: var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);\n}\n\n.divider-neutral {\n  background-color: var(--ic-toast-status-neutral);\n}\n\n.divider-info {\n  background-color: var(--ic-toast-status-info);\n}\n\n.divider-warning {\n  background-color: var(--ic-toast-status-warning);\n}\n\n.divider-error {\n  background-color: var(--ic-toast-status-error);\n}\n\n.divider-success {\n  background-color: var(--ic-toast-status-success);\n}\n\n.toast-icon,\n::slotted(svg) {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  margin-left: var(--ic-space-md);\n}\n\n:host([variant=\"neutral\"]) .toast-icon svg,\n::slotted(svg) {\n  fill: var(--ic-toast-icon-neutral);\n}\n\n:host([variant=\"info\"]) .toast-icon svg {\n  fill: var(--ic-toast-icon-info);\n}\n\n:host([variant=\"warning\"]) .toast-icon svg {\n  fill: var(--ic-toast-icon-warning);\n}\n\n:host([variant=\"error\"]) .toast-icon svg {\n  fill: var(--ic-toast-icon-error);\n}\n\n:host([variant=\"success\"]) .toast-icon svg {\n  fill: var(--ic-toast-icon-success);\n}\n\n.toast-content {\n  margin-left: var(--ic-space-xs);\n  width: 100%;\n}\n\n.no-icon {\n  margin-left: var(--ic-space-md);\n}\n\n.toast-text {\n  padding: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n.toast-heading {\n  --ic-typography-color: var(--ic-toast-title);\n}\n\n.toast-message {\n  --ic-typography-color: var(--ic-toast-description);\n}\n\n.toast-action-container {\n  padding-bottom: var(--ic-space-md);\n}\n\n#dismiss-button {\n  padding: var(--ic-space-xs);\n}\n\n#dismiss-button > svg {\n  color: var(--ic-toast-dismiss-button);\n}\n\nic-loading-indicator {\n  --outer-color: transparent;\n  --inner-color: var(--ic-action-light);\n}\n\n.toast-dismiss-timer {\n  padding: var(--ic-space-sm);\n}\n\n@media (max-width: 576px) {\n  :host {\n    --bottom-position: var(--ic-space-lg);\n\n    width: calc(100% - 2 * var(--ic-space-md));\n  }\n}\n\n@media (min-width: 993px) {\n  :host {\n    --bottom-position: calc(var(--ic-space-xl) + var(--ic-space-xs));\n  }\n}\n\n@media (forced-colors: active) {\n  .container {\n    border: var(--ic-border-hc);\n  }\n}\n\n@keyframes fadein {\n  from {\n    bottom: 0;\n    opacity: 0;\n  }\n\n  to {\n    bottom: var(--bottom-position);\n    opacity: 1;\n  }\n}\n\n@keyframes fadeout {\n  from {\n    bottom: var(--bottom-position);\n    opacity: 1;\n  }\n\n  to {\n    bottom: 0;\n    opacity: 0;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\nimport {\n  getSlot,\n  isPropDefined,\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcActivationTypes, IcStatusVariants } from \"../../utils/types\";\nimport { ActionAreaElementTypes } from \"./ic-toast.types\";\n\nconst AUTO_DISMISS_TIMER_REFRESH_RATE_MS = 1000;\nconst TOAST_HEADING_CHAR_LIMIT = 70;\nconst TOAST_MESSAGE_CHAR_LIMIT = 140;\n\n/**\n * @slot action - IcButton or IcLink is placed below header and message. If used will default toast to manual `dismiss` type.\n * @slot neutral-icon - A custom neutral icon is placed on the left side of the component. If used will default toast to `neutral` variant.\n */\n@Component({\n  tag: \"ic-toast\",\n  styleUrl: \"ic-toast.css\",\n  shadow: true,\n})\nexport class Toast {\n  private dismissTimeout: number;\n  private interactiveElements: ActionAreaElementTypes[] = [];\n  private neutralVariantLabel: string;\n  private timerRefreshInterval: number;\n  private focusInteractiveElement: boolean;\n  private shiftKeyPressed: boolean;\n\n  @Element() el: HTMLIcToastElement;\n\n  @State() isManual: boolean;\n  @State() timerProgress = 100;\n  @State() visible = false;\n\n  /**\n   * If toast dismissMode is set to `automatic`, use this prop to define the time before the toast dismisses (in MILLISECONDS)\n   * (NOTE: Has a minimum value of `5000ms`)\n   */\n  @Prop({ mutable: true }) autoDismissTimeout? = 5000;\n\n  /**\n   * If toast can be manually dismissed, this prop sets a custom aria-label for the ic-button component\n   */\n  @Prop() dismissButtonAriaLabel? = \"dismiss\";\n\n  /**\n   * How the toast will be dismissed. If manual will display a dismiss button.\n   */\n  @Prop({ mutable: true }) dismissMode?: IcActivationTypes = \"manual\";\n  @Watch(\"dismissMode\")\n  dismissModeChangeHandler(newValue: IcActivationTypes): void {\n    this.isManual = newValue === \"manual\";\n  }\n\n  /**\n   * The title to display at the start of the toast. (NOTE: Should be no more than `70` characters)\n   */\n  @Prop() heading!: string;\n\n  /**\n   * The main body message of the toast. (NOTE: Should be no more than `140` characters)\n   */\n  @Prop() message?: string;\n\n  /**\n   * Provides a custom alt-text to be announced to screen readers, if slotting a custom neutral icon\n   */\n  @Prop() neutralIconAriaLabel?: string;\n\n  /**\n   * The variant of the toast being rendered\n   */\n  @Prop({ mutable: true }) variant?: IcStatusVariants;\n\n  /**\n   * Is emitted when the user dismisses the toast\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    window.clearTimeout(this.dismissTimeout);\n    window.clearInterval(this.timerRefreshInterval);\n  }\n\n  componentWillLoad(): void {\n    this.handleLongText(\n      this.heading.length > TOAST_HEADING_CHAR_LIMIT,\n      this.message?.length > TOAST_MESSAGE_CHAR_LIMIT\n    );\n\n    if (this.autoDismissTimeout < 5000) this.autoDismissTimeout = 5000;\n\n    if (isSlotUsed(this.el, \"action\")) this.dismissMode = \"manual\";\n    this.isManual = this.dismissMode === \"manual\";\n\n    if (isSlotUsed(this.el, \"neutral-icon\")) this.variant = \"neutral\";\n    if (this.variant === \"neutral\") {\n      this.neutralVariantLabel =\n        this.neutralIconAriaLabel ?? VARIANT_ICONS[this.variant].ariaLabel;\n    }\n\n    if (this.isManual) {\n      const toastMessage: string = isPropDefined(this.message)\n        ? `. ${this.message}`\n        : \"\";\n      this.el.setAttribute(\n        \"aria-label\",\n        this.variant\n          ? this.neutralVariantLabel || VARIANT_ICONS[this.variant].ariaLabel\n          : this.heading\n      );\n      (this.variant || this.message) &&\n        this.el.setAttribute(\n          \"aria-description\",\n          this.variant ? `${this.heading}${toastMessage}` : this.message\n        );\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Toast\"\n    );\n  }\n\n  componentDidUpdate(): void {\n    if (this.focusInteractiveElement && this.isManual) {\n      this.resetAutoDismissTimer();\n\n      const actionContent = getSlot(\n        this.el,\n        \"action\"\n      ) as ActionAreaElementTypes;\n      const dismissButton = this.el.shadowRoot.querySelector(\"ic-button\");\n      if (actionContent) this.interactiveElements.push(actionContent);\n      if (dismissButton) this.interactiveElements.push(dismissButton);\n\n      this.focusInteractiveElement = false;\n      this.findNextInteractiveElement(this.shiftKeyPressed).setFocus();\n      this.shiftKeyPressed = false;\n    }\n  }\n\n  @Watch(\"visible\")\n  watchVisibleHandler(): void {\n    if (this.visible) {\n      const actionContent = getSlot(\n        this.el,\n        \"action\"\n      ) as ActionAreaElementTypes;\n      const dismissButton = this.el.shadowRoot.querySelector(\"ic-button\");\n      if (actionContent) this.interactiveElements.push(actionContent);\n      if (dismissButton) this.interactiveElements.push(dismissButton);\n    } else {\n      this.interactiveElements = [];\n    }\n  }\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleDismiss(): void {\n    this.visible = false;\n    this.resetAutoDismissTimer();\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeyboard(ev: KeyboardEvent): void {\n    if (this.visible) {\n      if (this.isManual) {\n        switch (ev.key) {\n          case \"Tab\":\n            ev.preventDefault();\n            this.findNextInteractiveElement(ev.shiftKey).setFocus();\n            break;\n          case \"Escape\":\n            !ev.repeat && this.dismissAction();\n            ev.stopImmediatePropagation();\n            break;\n        }\n      } else {\n        if (ev.key === \"Tab\") {\n          this.shiftKeyPressed = ev.shiftKey;\n          this.focusInteractiveElement = true;\n        }\n      }\n    }\n  }\n\n  @Listen(\"mouseenter\")\n  @Listen(\"mouseleave\")\n  handleTimer(ev: MouseEvent): void {\n    switch (ev.type) {\n      case \"mouseenter\":\n        if (!this.isManual) {\n          this.resetAutoDismissTimer();\n        }\n        this.isManual = true;\n        break;\n      case \"mouseleave\":\n        if (this.dismissMode === \"automatic\") {\n          this.isManual = false;\n          this.interactiveElements = [];\n          if (this.visible) {\n            this.dismissTimeout = window.setTimeout(\n              this.dismissAction,\n              this.autoDismissTimeout\n            );\n            this.timerRefreshInterval = window.setInterval(\n              this.handleProgressChange,\n              AUTO_DISMISS_TIMER_REFRESH_RATE_MS\n            );\n          }\n        }\n        break;\n    }\n  }\n\n  /**\n   * @internal Used to display the individual toast.\n   * @returns The element that previously had focus before the toast appeared\n   */\n  @Method()\n  async setVisible(): Promise<HTMLElement> {\n    if (!this.visible) this.visible = true;\n    if (!this.isManual) {\n      this.dismissTimeout = window.setTimeout(\n        this.dismissAction,\n        this.autoDismissTimeout\n      );\n      this.timerRefreshInterval = window.setInterval(\n        this.handleProgressChange,\n        AUTO_DISMISS_TIMER_REFRESH_RATE_MS\n      );\n      return null;\n    } else {\n      window.setTimeout(() => this.interactiveElements[0].setFocus(), 200);\n      return document.activeElement as HTMLElement;\n    }\n  }\n\n  private dismissAction = (): void => {\n    this.icDismiss.emit();\n  };\n\n  private handleProgressChange = () => {\n    this.timerProgress -=\n      (AUTO_DISMISS_TIMER_REFRESH_RATE_MS / this.autoDismissTimeout) * 100;\n  };\n\n  private handleLongText(\n    headingTooLong: boolean,\n    messageTooLong?: boolean\n  ): void {\n    if (messageTooLong || headingTooLong) {\n      console.error(\n        `Too many characters in toast ${headingTooLong ? \"heading\" : \"\"}${\n          headingTooLong && messageTooLong ? \" and \" : \"\"\n        }${\n          messageTooLong ? \"message\" : \"\"\n        }. Refer to character limits specified in the prop description`\n      );\n    }\n  }\n\n  private findNextInteractiveElement(\n    isBackwards: boolean\n  ): ActionAreaElementTypes {\n    const firstEl = this.interactiveElements[0];\n    const lastEl =\n      this.interactiveElements[this.interactiveElements.length - 1];\n\n    if (this.isActive(isBackwards ? firstEl : lastEl))\n      return isBackwards ? lastEl : firstEl;\n\n    let currentIndex: number;\n\n    return this.interactiveElements.some((el, index) => {\n      if (!this.isActive(el)) return false;\n      currentIndex = index;\n      return true;\n    })\n      ? this.interactiveElements[currentIndex + (isBackwards ? -1 : 1)]\n      : firstEl;\n  }\n\n  private resetAutoDismissTimer(): void {\n    window.clearTimeout(this.dismissTimeout);\n    window.clearInterval(this.timerRefreshInterval);\n    this.timerProgress = 100;\n  }\n\n  private isActive(targetEl: HTMLElement): boolean {\n    return targetEl === this.el\n      ? !!this.el.shadowRoot.activeElement\n      : document.activeElement === targetEl;\n  }\n\n  private onFocus = (): void => {\n    if (this.focusInteractiveElement) {\n      this.isManual = true;\n    }\n  };\n\n  private onBlur = (): void => {\n    this.handleTimer({ type: \"mouseleave\" } as MouseEvent);\n  };\n\n  render() {\n    const {\n      variant,\n      heading,\n      message,\n      visible,\n      isManual,\n      dismissButtonAriaLabel,\n    } = this;\n    return (\n      <Host\n        class={{ [\"ic-toast-hidden\"]: !visible }}\n        tabindex=\"0\"\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n        role={isManual ? \"dialog\" : \"alert\"}\n        aria-live={isManual ? null : \"polite\"}\n      >\n        <div class=\"container\">\n          {variant && visible && (\n            <div class=\"toast-icon-container\">\n              <div\n                class={{\n                  [\"divider\"]: true,\n                  [`divider-${variant}`]: true,\n                }}\n              ></div>\n              {variant === \"neutral\" ? (\n                <slot name=\"neutral-icon\" />\n              ) : (\n                <span\n                  class=\"toast-icon\"\n                  innerHTML={VARIANT_ICONS[variant].icon}\n                ></span>\n              )}\n            </div>\n          )}\n          <div\n            class={{\n              [\"toast-content\"]: true,\n              [\"no-icon\"]:\n                variant === \"neutral\" && !isSlotUsed(this.el, \"neutral-icon\"),\n            }}\n          >\n            <div class=\"toast-text\">\n              <ic-typography variant=\"subtitle-large\" class=\"toast-heading\">\n                {visible && (isManual ? <h5>{heading}</h5> : <p>{heading}</p>)}\n              </ic-typography>\n              {message && (\n                <ic-typography variant=\"body\" class=\"toast-message\">\n                  {visible && <p>{message}</p>}\n                </ic-typography>\n              )}\n            </div>\n            {isSlotUsed(this.el, \"action\") && (\n              <div class=\"toast-action-container\">\n                <slot name=\"action\" />\n              </div>\n            )}\n          </div>\n          {!isManual ? (\n            <ic-loading-indicator\n              class=\"toast-dismiss-timer\"\n              theme=\"dark\"\n              monochrome\n              size=\"icon\"\n              progress={this.timerProgress}\n              description=\"Dismiss timer\"\n            ></ic-loading-indicator>\n          ) : (\n            <ic-button\n              id=\"dismiss-button\"\n              innerHTML={closeIcon}\n              onClick={this.dismissAction}\n              variant=\"icon\"\n              aria-label={dismissButtonAriaLabel}\n            ></ic-button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/core/p-e831277e.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as a,H as s,g as e}from"./p-6b5e91e2.js";import{c as n}from"./p-f074ef5b.js";import{C as o}from"./p-3b185c32.js";import{z as r,D as l,i as d,K as p,e as c,g as h,f as v,b as g,v as m,I as b,d as u}from"./p-cda4aca9.js";const y=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">\n  <path d="M0 0h24v24H0V0z" fill="none" />\n  <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />\n  <title>menu icon</title>\n</svg>\n`;const x=':host{display:block;--ic-typography-color:currentcolor;--side-navigation-position:fixed;--side-navigation-position-left:0;--side-navigation-position-top:var(--ic-space-xxl);--side-navigation-height:var(--ic-space-xxl);--sm-side-navigation-top-bar-height:3.5rem;--sm-side-navigation-collapsed-labels-width:6rem;--sm-side-navigation-expand-transition-duration:var(\n    --ic-transition-duration-slow\n  );--side-navigation-width:20rem;--sm-side-navigation-bottom-bar-height:3.5rem;--keyline-lighten:var(--ic-space-1px) solid var(--ic-side-navigation-keyline);--keyline-darken:var(--ic-space-1px) solid var(--ic-state-layer-darken-20);--ic-button-secondary-text-monochrome:var(--ic-brand-text-color);--ic-button-secondary-border-monochrome:var(--ic-brand-text-color);z-index:var(--ic-z-index-side-navigation)}:host>*{box-sizing:border-box}.side-navigation{display:flex;flex-direction:column;width:var(--side-navigation-width);color:var(--ic-side-navigation-text);position:var(--side-navigation-position);top:var(--side-navigation-position-top);left:calc(var(--side-navigation-width) * -1);bottom:0;background-color:var(--ic-side-navigation-background);z-index:var(--ic-z-index-side-navigation)}:host(.ic-side-navigation-inline) .side-navigation{position:absolute;height:100%}:host(.anchor-right) .side-navigation{right:calc(var(--side-navigation-width) * -1)}.classification-spacing{margin-bottom:var(--ic-space-lg)}.navigation-list{padding:0;margin:0;list-style:none}.side-navigation-inner{background-color:var(--ic-side-navigation-background);display:flex;flex-direction:column;flex:1 1 0;overflow:auto}:host(.ic-side-navigation-inline) .side-navigation-inner{flex:1}:host(.xs-menu-open) .side-navigation{transition:left var(--ic-easing-transition-slow);left:0}:host(:has(.xs-menu-open,.xs-menu-close)) ::slotted(ic-navigation-item){--navigation-item-side-nav-right:var(--ic-space-xl)}:host(.xs-menu-close) .side-navigation{left:calc(var(--side-navigation-width) * -1);transition:left var(--ic-easing-transition-slow)}:host(.xs-menu-close) .side-navigation>*{visibility:hidden}:host(.anchor-right.xs-menu-open) .side-navigation{right:0;left:auto}:host(.anchor-right.xs-menu-close) .side-navigation{right:calc(var(--side-navigation-width) * -1);left:auto;transition:right var(--ic-easing-transition-slow)}.bottom-wrapper{border-top:var(--keyline-lighten);bottom:0;left:0;z-index:2;box-shadow:-0.188rem -0.188rem 0.5rem rgb(0 0 0 / 20%);background-color:var(--ic-side-navigation-background);display:flex;flex-direction:column}:host(.ic-side-navigation-inline) .bottom-wrapper{position:sticky}:host(.ic-side-navigation-dark) .bottom-wrapper{border-top:var(--keyline-darken)}.top-bar{display:flex;flex-direction:row;align-items:center;min-height:var(--side-navigation-height);padding:var(--ic-space-xs);box-sizing:border-box;background-color:var(--ic-side-navigation-background);position:fixed;top:0;left:0;right:0;border-bottom:var(--keyline-lighten);box-shadow:var(--ic-elevation-overlay);z-index:2;overflow:hidden;visibility:visible}:host(.ic-side-navigation-inline) .top-bar{position:absolute}:host(.ic-side-navigation-dark) .top-bar{border-bottom:var(--keyline-darken)}.top-bar.dark a:focus{box-shadow:var(--ic-border-focus)}.app-title-wrapper{display:flex;margin-left:var(--ic-space-xs);border-left:var(--keyline-lighten);padding-left:var(--ic-space-xxs);color:var(--ic-side-navigation-text);align-items:center}:host(.ic-side-navigation-dark) .app-title-wrapper{border-left:var(--keyline-darken)}.app-title-wrapper ic-typography h1{margin:0}@media screen and (min-width: 340px){.app-title-wrapper ic-typography{margin-left:var(--ic-space-xs)}}:host .title-link{display:flex;align-items:center;transition:box-shadow var(--ic-easing-transition-fast),\n    background-color var(--ic-easing-transition-fast);text-decoration:none;padding:var(--ic-space-xxs);color:var(--ic-side-navigation-text)}:host .title-link:visited,:host .title-link:active{color:var(--ic-side-navigation-text)}slot[name="app-title"]::slotted(a),slot[name="app-icon"]::slotted(a){color:var(--ic-side-navigation-text);outline:none;text-decoration:none;display:flex}slot[name="app-title"]::slotted(ic-typography),slot[name="app-title"]::slotted(a){margin-left:var(--ic-space-xs) !important}slot[name="app-title"]::slotted(a){font:var(--ic-font-subtitle-small)}@media screen and (min-width: 577px){:host(.sm-collapsed) slot[name="app-title"]::slotted(ic-typography),:host(.sm-collapsed) slot[name="app-title"]::slotted(a){position:absolute;left:-9999px;opacity:0;transition:opacity var(--ic-easing-transition-slow)}:host(.sm-expanded) slot[name="app-title"]::slotted(a){font:var(--ic-font-h3) !important;font-weight:var(--ic-font-weight-semibold) !important;margin-left:var(--ic-space-xs) !important}}:host .title-link:hover{border-radius:var(--ic-border-radius);background-color:var(--ic-side-navigation-hover)}:host .title-link:active{background-color:var(--ic-side-navigation-pressed)}:host .title-link:focus,:host .title-link:focus-within{border-radius:var(--ic-border-radius);box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);background-color:transparent}:host .title-link ic-typography{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.app-title-wrapper ::slotted(svg){fill:var(--ic-side-navigation-text)}.app-icon-container{display:none}.button-label{display:flex;align-items:center}.mobile-top-bar-menu-icon{display:flex}.menu-button{width:6.5rem}.app-status-wrapper{inset:0 var(--ic-space-sm) 0 3.5rem;width:auto;display:flex;gap:var(--ic-space-xs);padding:var(--ic-space-sm) 0;justify-content:flex-end;align-items:flex-end;pointer-events:none;height:-moz-fit-content;height:fit-content;margin:0 var(--ic-space-xs)}.app-status-wrapper .app-version{display:flex;overflow-wrap:break-word;padding-bottom:var(--ic-space-xxs)}.app-status-wrapper .app-status{display:flex;border-radius:1rem;background-color:var(--ic-side-navigation-text);color:var(--ic-side-navigation-status-tag-text);padding:var(--ic-space-xxs) var(--ic-space-lg);min-width:1rem}.app-status-wrapper .app-status-text{overflow-wrap:break-word}:host(.ic-side-navigation-dark) .app-status-wrapper .app-status{--ic-typography-color:var(--ic-architectural-white)}.navigation-landmark-title{position:absolute;width:var(--ic-space-1px);height:var(--ic-space-1px);padding:0;margin:calc(-1 * var(--ic-space-1px));overflow:hidden}::slotted(ic-navigation-group){--navigation-group-height:2.75rem;--navigation-group-width:100%;--navigation-group-justify-content:space-between;--navigation-group-hover:var(--ic-side-navigation-hover);--navigation-group-text-hover:var(--ic-side-navigation-text);--navigation-item-child-height:3.5rem;--navigation-item-child-active:var(--ic-action-dark-bg-pressed);--navigation-item-child-color:var(--ic-side-navigation-text);--navigation-group-expand-toggle-padding:0.25rem}::slotted(ic-navigation-item),::slotted(ic-navigation-group){--navigation-item-justify-content:flex-start;--navigation-item-min-height:56px;--navigation-item-height:auto}.bottom-side-nav{position:relative;align-content:flex-end;min-height:var(--sm-side-navigation-top-bar-height)}.bottom-side-nav ic-divider{position:absolute;top:0}.primary-navigation{flex:1;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none}.primary-navigation::-webkit-scrollbar{display:none}.primary-navigation,.secondary-navigation{overflow-x:hidden}.bottom-side-nav .menu-expand-button{position:absolute;display:none}.menu-visibility-visible{visibility:visible;width:100%}.app-title-show{min-width:15.5rem}:host(.side-display){display:flex;flex-direction:column;height:100vh;position:var(--side-navigation-position);left:0;top:0;bottom:0}:host(.side-display) .app-icon-container{height:40px;display:flex;align-items:center}:host(.side-display) .top-bar{--side-navigation-height:var(--sm-side-navigation-top-bar-height);position:relative;padding:0;box-shadow:-0.188rem 0.188rem 0.5rem rgb(0 0 0 / 20%)}:host(.ic-side-navigation-inline.side-display) .top-bar{position:sticky}:host(.anchor-right.side-display) .top-bar{box-shadow:0.188rem 0.188rem 0.5rem rgb(0 0 0 / 20%)}:host(.anchor-right.side-display) .bottom-wrapper{box-shadow:0.188rem -0.188rem 0.5rem rgb(0 0 0 / 20%)}:host(.side-display) .side-navigation,:host(.side-display) .top-bar{width:var(--sm-side-navigation-top-bar-height)}:host(.sm-collapsed.side-display){width:var(--sm-side-navigation-top-bar-height);transition:width var(--ic-easing-transition-slow)}:host(.sm-collapsed.collapsed-labels.side-display){width:var(--sm-side-navigation-collapsed-labels-width)}:host(.sm-expanded.side-display){width:var(--side-navigation-width);transition:width var(--ic-easing-transition-slow);box-shadow:var(--ic-elevation-overlay)}:host(.side-display) .side-navigation{--side-navigation-position-top:0;flex:1;position:relative;top:auto;left:auto;bottom:auto}:host(.ic-side-navigation-inline.side-display) .side-navigation{position:relative}:host(.anchor-right.side-display) .side-navigation{left:auto;right:0}:host(.side-display) .app-title-wrapper{margin-left:0;border-left:none;padding:var(--ic-space-xs) var(--ic-space-sm)}:host(.side-display) .app-title-wrapper ::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg)}:host(.side-display) .app-title-wrapper ic-typography{font-weight:var(--ic-font-weight-semibold)}:host(.sm-collapsed.side-display) .app-title-wrapper ic-typography{position:absolute;left:-9999px;opacity:0;transition:opacity var(--ic-easing-transition-slow)}:host(.sm-expanded.side-display) ic-typography{position:relative;left:0}:host(.sm-expanded.side-display) :is(.side-navigation,.top-bar){width:var(--side-navigation-width);transition:width var(--ic-easing-transition-slow)}:host(.sm-collapsed.side-display) :is(.side-navigation,.top-bar){width:var(--sm-side-navigation-top-bar-height);transition:width var(--ic-easing-transition-slow)}:host(.anchor-right.sm-expanded.side-display) :is(.side-navigation,.top-bar){left:auto;right:0}:host(.side-display) .app-status-wrapper,:host(.sm-collapsed.side-display) .app-status-wrapper{display:none;margin-left:0}:host(.sm-expanded.side-display) .app-status-wrapper{display:flex;max-width:16rem;margin-right:calc(var(--ic-space-xxxs) + var(--ic-space-xs))}:host(.side-display) .bottom-side-nav{justify-items:flex-end;align-items:flex-end;justify-content:flex-end;display:flex;outline:none}:host(.side-display) .bottom-side-nav .menu-expand-button{padding-left:var(--ic-space-md);height:var(--sm-side-navigation-top-bar-height);width:100%;color:var(--ic-side-navigation-text);background-color:transparent;outline:var(--ic-hc-focus-outline);border:none;cursor:pointer;display:flex;transition:var(--ic-easing-transition-fast)}:host(.sm-expanded.side-display) .bottom-side-nav .menu-expand-button{height:100%}:host(.side-display) .bottom-side-nav .menu-expand-button svg{justify-items:flex-start;align-self:center;display:inline-block;width:var(--ic-space-lg);height:var(--ic-space-lg)}:host(.side-display) .bottom-side-nav .menu-expand-button:hover{background-color:var(--ic-side-navigation-hover)}:host(.side-display) .bottom-side-nav .menu-expand-button:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background-color:transparent}:host(.sm-collapsed.side-display) .bottom-side-nav .menu-expand-button svg{transform:scaleX(1);transition:transform var(--ic-easing-transition-slow)}:host(.sm-expanded.side-display) .bottom-side-nav .menu-expand-button svg{transform:scaleX(-1);transition:transform var(--ic-easing-transition-slow);align-self:flex-end;margin-bottom:0.875rem}:host(.anchor-right.sm-collapsed.side-display) .bottom-side-nav .menu-expand-button svg{transform:scaleX(-1)}:host(.anchor-right.sm-expanded.side-display) .bottom-side-nav .menu-expand-button svg{transform:scaleX(1)}:host(.sm-collapsed.side-display) ::slotted(ic-navigation-item){--navigation-item-label-opacity:1}:host(.sm-collapsed.side-display) ::slotted(ic-navigation-item),:host(.sm-collapsed.side-display) ::slotted(ic-navigation-group){--navigation-item-label-opacity:0;--navigation-item-min-height:3.5rem;--navigation-item-height:3.5rem}:host(.sm-expanded.side-display) ::slotted(ic-navigation-item),:host(.sm-expanded.side-display) ::slotted(ic-navigation-group){--navigation-item-label-opacity:1;--navigation-item-height:auto;--navigation-item-min-height:3.5rem;--navigation-item-width:20rem;--navigation-item-side-nav-right:var(--ic-space-xl)}:host(.sm-collapsed.side-display) ::slotted(ic-navigation-group){--navigation-group-title-position:absolute;--navigation-group-title-position-left:-9999px;--navigation-group-title-opacity:none}:host(.sm-expanded.side-display) ::slotted(ic-navigation-group){--navigation-group-title-position:relative;--navigation-group-title-position-left:0;--navigation-group-expand-toggle-padding:0.25rem;--navigation-group-title-opacity:flex}:host(.sm-collapsed.collapsed-labels.side-display) .side-navigation,:host(.sm-collapsed.collapsed-labels.side-display) .top-bar{width:var(--sm-side-navigation-collapsed-labels-width)}:host(.sm-collapsed.collapsed-labels.side-display) .menu-expand-button{padding:0}:host(.sm-collapsed.collapsed-labels.side-display) .app-title-wrapper{width:100%;justify-content:center}:host(.sm-collapsed.collapsed-labels.side-display) ::slotted(ic-navigation-group){--navigation-group-justify-content:center;--navigation-item-label-opacity:1;--navigation-group-item-min-width:100%;--navigation-group-expand-toggle-padding:1rem}:host(.collapsed-labels.side-display) .bottom-side-nav .menu-expand-button{justify-content:center}:host(.side-display) .collapsed-icon-labels-start{visibility:hidden;opacity:0}:host(.side-display) .collapsed-icon-labels-end{visibility:visible;opacity:1;transition:visibility 0s, opacity var(--ic-easing-transition-slow)}@media screen and (max-width: 419px){.top-bar{height:var(--side-navigation-height)}.side-navigation{width:100%}}@media screen and (min-width: 340px){.app-icon-container{display:flex}}@media screen and (min-width: 993px){:host(.side-display){position:sticky;left:auto;top:0;bottom:0}:host(.sm-expanded.side-display){box-shadow:none}}@media (forced-colors: active){.side-navigation,.top-bar{border-right:var(--ic-border-hc)}.menu-expand-button{color:Highlight !important}slot[name="app-icon"]::slotted(svg){fill:currentcolor}}';const f=class{constructor(s){i(this,s);this.icSideNavExpanded=t(this,"icSideNavExpanded",7);this.ANIMATION_DURATION=parseInt(r("--ic-transition-duration-slow"))||0;this.IC_NAVIGATION_ITEM="ic-navigation-item";this.resizeObserver=null;this.COLLAPSED_ICON_LABELS_END="collapsed-icon-labels-end";this.COLLAPSED_ICON_LABELS_START="collapsed-icon-labels-start";this.menuButton=null;this.emitSideNavigationExpanded=i=>{this.icSideNavExpanded.emit({sideNavExpanded:i.sideNavExpanded,sideNavMobile:i.sideNavMobile})};this.toggleMenu=()=>{this.menuOpen=!this.menuOpen;this.setMobileMenuAriaAttributes(this.menuOpen);this.arrangeSlottedNavigationItem(this.menuOpen);this.setToggleMenuFlyoutMenuVisibility(this.menuOpen);this.emitSideNavigationExpanded({sideNavExpanded:this.menuOpen,sideNavMobile:true})};this.setToggleMenuFlyoutMenuVisibility=i=>{const t=this.el.shadowRoot.querySelector("#side-navigation");const a=t.querySelector(".side-navigation-inner");const s=t.querySelector(".bottom-wrapper");const e="menu-visibility-visible";if(i){s.classList.add(e);a.classList.add(e)}else{setTimeout((()=>{a.classList.remove(e);s.classList.remove(e)}),this.ANIMATION_DURATION)}};this.setMobileMenuAriaAttributes=i=>{if(this.menuButton!==null){this.menuButton.setAttribute("aria-expanded",`${i}`);this.menuButton.setAttribute("aria-label",`${i?"Close":"Open"} navigation menu`)}};this.setAndRemoveNoWrapAfterMenuExpanded=()=>{const i=this.el.shadowRoot.querySelector(".title-link ic-typography")||this.el.querySelector("[slot='app-title']");i.classList.add("ic-typography-no-wrap");setTimeout((()=>{i.classList.remove("ic-typography-no-wrap")}),this.ANIMATION_DURATION)};this.toggleMenuExpanded=i=>{if(this.deviceSize>l.S){this.menuExpanded=i}if(this.menuExpanded){this.setAndRemoveNoWrapAfterMenuExpanded();this.el.shadowRoot.querySelector(".app-title-inner-wrapper").classList.add("app-title-show")}else{this.el.style.setProperty("--navigation-item-width","320px");this.el.shadowRoot.querySelector(".app-title-inner-wrapper").classList.remove("app-title-show");this.el.addEventListener("transitionend",(i=>{if(i.propertyName==="width"){this.el.style.setProperty("--navigation-item-width",null)}}))}this.arrangeSlottedNavigationItem(this.menuExpanded);this.displayTooltipWithExpandedLongLabel(this.menuExpanded);if(this.collapsedIconLabels){this.animateCollapsedIconLabels()}this.setExpandedButtonHeight();this.emitSideNavigationExpanded({sideNavExpanded:this.menuExpanded})};this.arrangeSlottedNavigationItem=i=>{const t=this.el.querySelectorAll("ic-navigation-item");t.forEach((t=>{const a=d(t,"navigation-item");const s=t.children[0]&&!t.children[0].getAttribute("slot");if(a||s){let s;if(a){s=t.querySelector("[slot='navigation-item']")}else{s=t.children[0]}const e=document.createElement("div");const n=s.querySelector("svg");const o=t.textContent.trim();const r=document.createElement("ic-typography");r.classList.add("ic-typography-label","hydrated","navigation-item-side-nav-slotted-text");e.style.height="var(--ic-space-lg)";e.append(n);s.textContent="";r.textContent=o;s.append(e);s.append(r);if(this.collapsedIconLabels){this.styleSlottedCollapsedIconLabels(i,r)}else{this.styleSlottedIconLabels(i,r)}}}))};this.styleSlottedCollapsedIconLabels=(i,t)=>{if(i){t.style.marginTop="0";t.style.whiteSpace="nowrap";t.style.overflow="hidden";t.style.textOverflow="ellipsis"}else{t.style.marginTop="10px";t.style.whiteSpace="nowrap";t.style.overflow="hidden";t.style.textOverflow="ellipsis"}};this.setExpandedButtonHeight=()=>{const i=this.el.shadowRoot.querySelector("#side-navigation > .bottom-wrapper > .bottom-side-nav > .app-status-wrapper");if(i.offsetHeight!==0){this.el.style.setProperty("--sm-side-navigation-bottom-bar-height",`${i.offsetHeight}px`)}};this.styleSlottedIconLabels=(i,t)=>{if(i){t.style.opacity="1";t.style.visibility="visible";t.style.transition="visibility 0s, opacity var(--ic-easing-transition-slow)"}else{t.style.opacity="0";t.style.visibility="hidden";t.style.transition="visibility 0s, opacity var(--ic-easing-transition-slow)"}};this.transitionHandler=i=>{const t=this.el.shadowRoot.querySelector(".primary-navigation");const a=this.el.shadowRoot.querySelector(".bottom-wrapper > .secondary-navigation");const s=i==="start"?this.COLLAPSED_ICON_LABELS_END:this.COLLAPSED_ICON_LABELS_START;const e=i==="start"?this.COLLAPSED_ICON_LABELS_START:this.COLLAPSED_ICON_LABELS_END;if(t){t.classList.remove(s);t.classList.add(e)}if(a){a.classList.remove(s);a.classList.add(e)}};this.transitionEndHandler=()=>{this.transitionHandler("end")};this.animateCollapsedIconLabels=()=>{this.transitionHandler("start");this.transitionEndHandler();this.el.addEventListener("transitionend",this.transitionEndHandler)};this.paddingIconWidth=i=>{const t=i[0].shadowRoot&&(i[0].shadowRoot.querySelector("ic-tooltip a")||i[0].shadowRoot.querySelector("ic-tooltip div"))||i[0].querySelector("a")||i[0].querySelector("div");const a=i[0].querySelector("svg");const s={gap:window.getComputedStyle(t).gap,iconWidth:window.getComputedStyle(a).width,paddingLeft:window.getComputedStyle(t).paddingLeft};return Object.values(s).reduce(((i,t)=>i+=parseInt(t)),0)};this.displayTooltipWithExpandedLongLabel=i=>{let t;if(i){t=setTimeout((()=>{const i=this.el.clientWidth;const t=Array.from(this.el.querySelectorAll(this.IC_NAVIGATION_ITEM));const a=t.length?this.paddingIconWidth(t):0;t.forEach((t=>{var s,e;const n=((s=t.shadowRoot&&t.shadowRoot.querySelector("ic-tooltip .link ic-typography.ic-typography-label"))===null||s===void 0?void 0:s.scrollWidth)||((e=t.querySelector("ic-typography.ic-typography-label"))===null||e===void 0?void 0:e.scrollWidth);if(n>i-a){t.setAttribute("display-navigation-tooltip","true")}}))}),this.ANIMATION_DURATION)}else{clearTimeout(t);const i=Array.from(this.el.querySelectorAll(this.IC_NAVIGATION_ITEM));i.forEach((i=>{i.setAttribute("display-navigation-tooltip","false")}))}};this.setMenuExpanded=i=>{this.menuExpanded=i};this.setParentPaddingTop=i=>{this.el.parentElement.style.setProperty("padding-top",i)};this.setParentPaddingLeft=i=>{this.el.parentElement.style.setProperty("padding-left",i)};this.renderAppTitle=i=>{const t=this.deviceSize<=l.S&&!p(this.shortAppTitle);return a("ic-typography",{variant:t||i?"subtitle-small":"h3","aria-label":t?`${this.appTitle} (${this.shortAppTitle})`:undefined},a("h1",null,t?this.shortAppTitle:this.appTitle))};this.resizeObserverCallback=i=>{var t;this.deviceSize=i;const a=i===l.S&&!this.disableTopBarBehaviour;if(!this.disableAutoParentStyling){const i=(t=this.el.shadowRoot.querySelector(".top-bar"))===null||t===void 0?void 0:t.scrollHeight;this.setParentPaddingTop(a?`${i}px`:"0");if(a)this.setParentPaddingLeft("0");if(a&&this.inline){this.el.parentElement.style.setProperty("height",`calc(100% - ${i}px)`)}else if(!a){this.el.parentElement.style.setProperty("height","100%")}}if(!this.disableAutoParentStyling){const t=`calc(var(--ic-space-xxl) ${this.collapsedIconLabels?"* 2":"+ var(--ic-space-xs)"})`;if(i>l.L){this.setParentPaddingTop("0");this.setParentPaddingLeft("0")}else if((i>l.S||this.disableTopBarBehaviour)&&i<=l.M&&this.static){this.setParentPaddingLeft(t)}else if((i>l.S||this.disableTopBarBehaviour)&&i<=l.L){this.setParentPaddingLeft(this.static&&this.menuExpanded?"calc(var(--ic-space-xl) * 10)":t)}}};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{const i=c();this.deviceSizeAppTitle=i;this.resizeObserverCallback(i)}));this.resizeObserver.observe(document.body,{box:"content-box"})};this.setCollapsedIconLabels=()=>{const i=Array.from(this.el.querySelectorAll(this.IC_NAVIGATION_ITEM));i.forEach((i=>{i.setAttribute("collapsed-icon-label","true")}))};this.styleSlottedCollapsedIconLabel=()=>{const i=Array.from(this.el.querySelectorAll(".navigation-item-side-nav-slotted-text"));i.forEach((i=>{var t,a;if((a=(t=i===null||i===void 0?void 0:i.parentElement)===null||t===void 0?void 0:t.parentElement)===null||a===void 0?void 0:a.classList.contains("navigation-item-side-nav-collapsed-with-label")){i.style.whiteSpace="nowrap";i.style.overflow="hidden";i.style.textOverflow="ellipsis";i.style.marginTop="10px"}}))};this.renderTopBar=({isSDevice:i,foregroundColor:t,menuOpen:s,href:e,isAppNameSubtitleVariant:o})=>{const r=this.appTitle!==""&&u(this.appTitle);const l=d(this.el,"app-title")?"div":"a";const p=l=="a"&&{href:e};return a("div",{class:{"top-bar":true,[this.foregroundColor]:true}},i&&a("nav",{"aria-labelledby":"menu-navigation-toggle-button-landmark","aria-hidden":"false"},a("ic-button",{"aria-label":"Open navigation menu",class:"menu-button",id:"menu-button",variant:"secondary",size:"small","full-width":"true",theme:t=="default"||t=="light"?"light":"dark",monochrome:true,onClick:this.toggleMenu,ariaOwnsId:"side-navigation","aria-haspopup":"true","aria-expanded":"false",ref:i=>this.menuButton=i},a("span",{class:"mobile-top-bar-menu-icon",slot:"left-icon",innerHTML:s?n:y}),s?"Close":"Menu"),a("span",{id:"menu-navigation-toggle-button-landmark",class:"navigation-landmark-title","aria-hidden":"true"},"Navigation menu toggle button")),a("div",{class:"app-title-wrapper"},(r||d(this.el,"app-title"))&&a(l,Object.assign({},p,{class:"title-link"}),a("div",{class:"app-icon-container","aria-hidden":"true"},a("slot",{name:"app-icon"})),a("div",{class:"app-title-inner-wrapper"},d(this.el,"app-title")?a("slot",{name:"app-title"}):this.renderAppTitle(o)))))};this.deviceSize=c();this.deviceSizeAppTitle=l.S;this.foregroundColor=h();this.hasSecondaryNavigation=false;this.menuExpanded=false;this.menuOpen=false;this.appTitle=undefined;this.collapsedIconLabels=false;this.disableAutoParentStyling=false;this.disableTopBarBehaviour=false;this.expanded=false;this.href="/";this.inline=false;this.shortAppTitle="";this.static=false;this.status=undefined;this.version=undefined}watchExpandedHandler(){this.toggleMenuExpanded(this.expanded)}componentWillLoad(){this.setMenuExpanded(this.expanded);if(this.collapsedIconLabels){this.setCollapsedIconLabels()}this.hasSecondaryNavigation=d(this.el,"secondary-navigation")}componentDidLoad(){this.emitSideNavigationExpanded({sideNavExpanded:this.menuExpanded,sideNavMobile:this.deviceSize===l.S&&!this.disableTopBarBehaviour});v(this.runResizeObserver);this.styleSlottedCollapsedIconLabel();this.arrangeSlottedNavigationItem(this.menuExpanded);this.displayTooltipWithExpandedLongLabel(this.menuExpanded);this.setExpandedButtonHeight();!d(this.el,"app-title")&&g([{prop:this.appTitle,propName:"app-title"}],"Side Navigation")}disconnectedCallback(){var i;if(this.resizeObserver!==null){this.resizeObserver.disconnect()}(i=this.el)===null||i===void 0?void 0:i.removeEventListener("transitionend",this.transitionEndHandler)}brandChangeHandler({detail:i}){this.foregroundColor=i.mode}render(){const{appTitle:i,menuOpen:t,foregroundColor:e,menuExpanded:n,href:r,status:p,version:c,collapsedIconLabels:h,inline:v}=this;const g=!this.disableTopBarBehaviour&&this.deviceSize===l.S;const u=this.deviceSize===l.M;const y=this.deviceSize>=l.L;const x=this.deviceSizeAppTitle===l.S;const f=u||this.disableTopBarBehaviour||y&&!this.static;const w={isSDevice:g,foregroundColor:e,menuOpen:t,href:r,isAppNameSubtitleVariant:x,appTitle:i};return a(s,{class:{"xs-menu-open":t&&g,"xs-menu-close":!t&&g,"sm-collapsed":!g&&!n,"sm-expanded":!g&&n,"side-display":this.deviceSize>l.S||this.disableTopBarBehaviour,[`ic-side-navigation-${b.Dark}`]:e===b.Dark,["collapsed-labels"]:!g&&!n&&h,["ic-side-navigation-inline"]:v}},g&&this.renderTopBar(Object.assign({},w)),a("div",{class:"side-navigation",id:"side-navigation"},!g&&this.renderTopBar(Object.assign({},w)),a("div",{class:"side-navigation-inner"},d(this.el,"primary-navigation")&&a("nav",{class:"primary-navigation","aria-labelledby":"primary-navigation-landmark"},a("span",{"aria-hidden":"true",class:"navigation-landmark-title",id:"primary-navigation-landmark"},"Primary"),a("ul",{class:"navigation-list"},a("slot",{name:"primary-navigation"})))),a("div",{class:{["bottom-wrapper"]:true,["classification-spacing"]:m()}},d(this.el,"secondary-navigation")&&a("nav",{class:"secondary-navigation","aria-labelledby":"secondary-navigation-landmark"},a("span",{"aria-hidden":"true",class:"navigation-landmark-title",id:"secondary-navigation-landmark"},"Secondary"),a("ul",{class:"navigation-list"},a("slot",{name:"secondary-navigation"}))),a("div",{class:"bottom-side-nav"},this.hasSecondaryNavigation&&a("ic-divider",null),f&&a("button",{class:"menu-expand-button",innerHTML:o,onClick:()=>this.toggleMenuExpanded(!this.menuExpanded),"aria-label":`${n?"Collapse":"Expand"} side navigation`}),a("div",{class:"app-status-wrapper"},p!==""&&a("div",{class:{["app-status"]:true}},a("ic-typography",{"aria-label":"app tag",variant:"label-uppercase",class:"app-status-text"},p)),c!==""&&a("ic-typography",{variant:"label",class:"app-version","aria-label":"app version"},c))))))}get el(){return e(this)}static get watchers(){return{expanded:["watchExpandedHandler"]}}};f.style=x;export{f as ic_side_navigation};
-//# sourceMappingURL=p-e831277e.entry.js.map

package/dist/core/p-e831277e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icSideNavigationCss","SideNavigation","this","ANIMATION_DURATION","parseInt","getCssProperty","IC_NAVIGATION_ITEM","resizeObserver","COLLAPSED_ICON_LABELS_END","COLLAPSED_ICON_LABELS_START","menuButton","emitSideNavigationExpanded","objDetails","icSideNavExpanded","emit","sideNavExpanded","sideNavMobile","toggleMenu","menuOpen","setMobileMenuAriaAttributes","arrangeSlottedNavigationItem","setToggleMenuFlyoutMenuVisibility","sideNav","el","shadowRoot","querySelector","sideNavInner","bottomWrapper","menuVisibilityVisible","classList","add","setTimeout","remove","setAttribute","setAndRemoveNoWrapAfterMenuExpanded","appTitle","toggleMenuExpanded","expanded","deviceSize","DEVICE_SIZES","S","menuExpanded","style","setProperty","addEventListener","e","propertyName","displayTooltipWithExpandedLongLabel","collapsedIconLabels","animateCollapsedIconLabels","setExpandedButtonHeight","navItems","querySelectorAll","forEach","navItem","isNamedSlot","isSlotUsed","isUnnamedSlot","children","getAttribute","navItemSlot","iconWrapper","document","createElement","icon","label","textContent","trim","icTypography","height","append","styleSlottedCollapsedIconLabels","styleSlottedIconLabels","marginTop","whiteSpace","overflow","textOverflow","appStatusWrapper","offsetHeight","opacity","visibility","transition","transitionHandler","type","primaryNavigationWrapper","secondaryNavigationWrapper","classToRemove","classToAdd","transitionEndHandler","paddingIconWidth","navItemLink","navItemSVG","navStyles","gap","window","getComputedStyle","iconWidth","width","paddingLeft","Object","values","reduce","prev","curr","timer","sideNavWidth","clientWidth","navigationItems","Array","from","paddingIconDelta","length","navigationItem","icTypographyScrollWidth","_a","scrollWidth","_b","clearTimeout","setMenuExpanded","setParentPaddingTop","value","parentElement","setParentPaddingLeft","renderAppTitle","isAppNameSubtitleVariant","displayShortAppTitle","isEmptyString","shortAppTitle","h","variant","undefined","resizeObserverCallback","currSize","isSmallAndDisableTopBar","disableTopBarBehaviour","disableAutoParentStyling","topBarHeight","scrollHeight","inline","L","M","static","runResizeObserver","ResizeObserver","getCurrentDeviceSize","deviceSizeAppTitle","observe","body","box","setCollapsedIconLabels","styleSlottedCollapsedIconLabel","dynamicSlottedIcTypographyComps","contains","renderTopBar","isSDevice","foregroundColor","href","hasTitle","isPropDefined","Component","attrs","class","id","size","theme","monochrome","onClick","ariaOwnsId","ref","slot","innerHTML","closeIcon","menuIcon","assign","name","getBrandForegroundAppearance","watchExpandedHandler","componentWillLoad","hasSecondaryNavigation","componentDidLoad","checkResizeObserver","onComponentRequiredPropUndefined","prop","propName","disconnectedCallback","disconnect","removeEventListener","brandChangeHandler","detail","mode","render","status","version","isMdDevice","isLgDevice","displayExpandBtn","topBarProps","Host","IcBrandForegroundEnum","Dark","hasClassificationBanner","chevronIcon"],"sources":["src/components/ic-side-navigation/ic-side-navigation.css?tag=ic-side-navigation&encapsulation=shadow","src/components/ic-side-navigation/ic-side-navigation.tsx"],"sourcesContent":["/**\n * @prop --ic-z-index-side-navigation: z-index of side navigation panel\n */\n\n:host {\n  display: block;\n\n  --ic-typography-color: currentcolor;\n  --side-navigation-position: fixed;\n  --side-navigation-position-left: 0;\n  --side-navigation-position-top: var(--ic-space-xxl);\n  --side-navigation-height: var(--ic-space-xxl);\n  --sm-side-navigation-top-bar-height: 3.5rem;\n  --sm-side-navigation-collapsed-labels-width: 6rem;\n  --sm-side-navigation-expand-transition-duration: var(\n    --ic-transition-duration-slow\n  );\n  --side-navigation-width: 20rem;\n  --sm-side-navigation-bottom-bar-height: 3.5rem;\n  --keyline-lighten: var(--ic-space-1px) solid var(--ic-side-navigation-keyline);\n  --keyline-darken: var(--ic-space-1px) solid var(--ic-state-layer-darken-20);\n\n  --ic-button-secondary-text-monochrome: var(--ic-brand-text-color);\n  --ic-button-secondary-border-monochrome: var(--ic-brand-text-color);\n  z-index: var(--ic-z-index-side-navigation);\n}\n\n:host > * {\n  box-sizing: border-box;\n}\n\n.side-navigation {\n  display: flex;\n  flex-direction: column;\n  width: var(--side-navigation-width);\n  color: var(--ic-side-navigation-text);\n  position: var(--side-navigation-position);\n  top: var(--side-navigation-position-top);\n  left: calc(var(--side-navigation-width) * -1);\n  bottom: 0;\n  background-color: var(--ic-side-navigation-background);\n  z-index: var(--ic-z-index-side-navigation);\n}\n\n:host(.ic-side-navigation-inline) .side-navigation {\n  position: absolute;\n  height: 100%;\n}\n\n:host(.anchor-right) .side-navigation {\n  right: calc(var(--side-navigation-width) * -1);\n}\n\n.classification-spacing {\n  margin-bottom: var(--ic-space-lg);\n}\n\n.navigation-list {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n\n.side-navigation-inner {\n  background-color: var(--ic-side-navigation-background);\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 0;\n  overflow: auto;\n}\n\n:host(.ic-side-navigation-inline) .side-navigation-inner {\n  flex: 1;\n}\n\n:host(.xs-menu-open) .side-navigation {\n  transition: left var(--ic-easing-transition-slow);\n  left: 0;\n}\n\n:host(:has(.xs-menu-open, .xs-menu-close)) ::slotted(ic-navigation-item) {\n  --navigation-item-side-nav-right: var(--ic-space-xl);\n}\n\n:host(.xs-menu-close) .side-navigation {\n  left: calc(var(--side-navigation-width) * -1);\n  transition: left var(--ic-easing-transition-slow);\n}\n\n:host(.xs-menu-close) .side-navigation > * {\n  visibility: hidden;\n}\n\n:host(.anchor-right.xs-menu-open) .side-navigation {\n  right: 0;\n  left: auto;\n}\n\n:host(.anchor-right.xs-menu-close) .side-navigation {\n  right: calc(var(--side-navigation-width) * -1);\n  left: auto;\n  transition: right var(--ic-easing-transition-slow);\n}\n\n.bottom-wrapper {\n  border-top: var(--keyline-lighten);\n  bottom: 0;\n  left: 0;\n  z-index: 2;\n  box-shadow: -0.188rem -0.188rem 0.5rem rgb(0 0 0 / 20%);\n  background-color: var(--ic-side-navigation-background);\n  display: flex;\n  flex-direction: column;\n}\n\n:host(.ic-side-navigation-inline) .bottom-wrapper {\n  position: sticky;\n}\n\n:host(.ic-side-navigation-dark) .bottom-wrapper {\n  border-top: var(--keyline-darken);\n}\n\n/* Mobile Top Bar */\n\n.top-bar {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  min-height: var(--side-navigation-height);\n  padding: var(--ic-space-xs);\n  box-sizing: border-box;\n  background-color: var(--ic-side-navigation-background);\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  border-bottom: var(--keyline-lighten);\n  box-shadow: var(--ic-elevation-overlay);\n  z-index: 2;\n  overflow: hidden;\n  visibility: visible;\n}\n\n:host(.ic-side-navigation-inline) .top-bar {\n  position: absolute;\n}\n\n:host(.ic-side-navigation-dark) .top-bar {\n  border-bottom: var(--keyline-darken);\n}\n\n.top-bar.dark a:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n.app-title-wrapper {\n  display: flex;\n  margin-left: var(--ic-space-xs);\n  border-left: var(--keyline-lighten);\n  padding-left: var(--ic-space-xxs);\n  color: var(--ic-side-navigation-text);\n  align-items: center;\n}\n\n:host(.ic-side-navigation-dark) .app-title-wrapper {\n  border-left: var(--keyline-darken);\n}\n\n.app-title-wrapper ic-typography h1 {\n  margin: 0;\n}\n\n@media screen and (min-width: 340px) {\n  .app-title-wrapper ic-typography {\n    margin-left: var(--ic-space-xs);\n  }\n}\n\n:host .title-link {\n  display: flex;\n  align-items: center;\n  transition: box-shadow var(--ic-easing-transition-fast),\n    background-color var(--ic-easing-transition-fast);\n  text-decoration: none;\n  padding: var(--ic-space-xxs);\n  color: var(--ic-side-navigation-text);\n}\n\n:host .title-link:visited,\n:host .title-link:active {\n  color: var(--ic-side-navigation-text);\n}\n\nslot[name=\"app-title\"]::slotted(a),\nslot[name=\"app-icon\"]::slotted(a) {\n  color: var(--ic-side-navigation-text);\n  outline: none;\n  text-decoration: none;\n  display: flex;\n}\n\nslot[name=\"app-title\"]::slotted(ic-typography),\nslot[name=\"app-title\"]::slotted(a) {\n  margin-left: var(--ic-space-xs) !important;\n}\n\nslot[name=\"app-title\"]::slotted(a) {\n  font: var(--ic-font-subtitle-small);\n}\n\n@media screen and (min-width: 577px) {\n  :host(.sm-collapsed) slot[name=\"app-title\"]::slotted(ic-typography),\n  :host(.sm-collapsed) slot[name=\"app-title\"]::slotted(a) {\n    position: absolute;\n    left: -9999px;\n    opacity: 0;\n    transition: opacity var(--ic-easing-transition-slow);\n  }\n\n  :host(.sm-expanded) slot[name=\"app-title\"]::slotted(a) {\n    font: var(--ic-font-h3) !important;\n    font-weight: var(--ic-font-weight-semibold) !important;\n    margin-left: var(--ic-space-xs) !important;\n  }\n}\n\n:host .title-link:hover {\n  border-radius: var(--ic-border-radius);\n  background-color: var(--ic-side-navigation-hover);\n}\n\n:host .title-link:active {\n  background-color: var(--ic-side-navigation-pressed);\n}\n\n:host .title-link:focus,\n:host .title-link:focus-within {\n  border-radius: var(--ic-border-radius);\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n  background-color: transparent;\n}\n\n:host .title-link ic-typography {\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.app-title-wrapper ::slotted(svg) {\n  fill: var(--ic-side-navigation-text);\n}\n\n.app-icon-container {\n  display: none;\n}\n\n.button-label {\n  display: flex;\n  align-items: center;\n}\n\n.mobile-top-bar-menu-icon {\n  display: flex;\n}\n\n.menu-button {\n  width: 6.5rem;\n}\n\n.app-status-wrapper {\n  inset: 0 var(--ic-space-sm) 0 3.5rem;\n  width: auto;\n  display: flex;\n  gap: var(--ic-space-xs);\n  padding: var(--ic-space-sm) 0;\n  justify-content: flex-end;\n  align-items: flex-end;\n  pointer-events: none;\n  height: fit-content;\n  margin: 0 var(--ic-space-xs);\n}\n\n.app-status-wrapper .app-version {\n  display: flex;\n  overflow-wrap: break-word;\n  padding-bottom: var(--ic-space-xxs);\n}\n\n.app-status-wrapper .app-status {\n  display: flex;\n  border-radius: 1rem;\n  background-color: var(--ic-side-navigation-text);\n  color: var(--ic-side-navigation-status-tag-text);\n  padding: var(--ic-space-xxs) var(--ic-space-lg);\n  min-width: 1rem;\n}\n\n.app-status-wrapper .app-status-text {\n  overflow-wrap: break-word;\n}\n\n:host(.ic-side-navigation-dark) .app-status-wrapper .app-status {\n  --ic-typography-color: var(--ic-architectural-white);\n}\n\n.navigation-landmark-title {\n  position: absolute;\n  width: var(--ic-space-1px);\n  height: var(--ic-space-1px);\n  padding: 0;\n  margin: calc(-1 * var(--ic-space-1px));\n  overflow: hidden;\n}\n\n/* Navigation Group */\n\n::slotted(ic-navigation-group) {\n  --navigation-group-height: 2.75rem;\n  --navigation-group-width: 100%;\n  --navigation-group-justify-content: space-between;\n  --navigation-group-hover: var(--ic-side-navigation-hover);\n  --navigation-group-text-hover: var(--ic-side-navigation-text);\n  --navigation-item-child-height: 3.5rem;\n  --navigation-item-child-active: var(--ic-action-dark-bg-pressed);\n  --navigation-item-child-color: var(--ic-side-navigation-text);\n  --navigation-group-expand-toggle-padding: 0.25rem;\n}\n\n/* Navigation Items */\n\n::slotted(ic-navigation-item),\n::slotted(ic-navigation-group) {\n  --navigation-item-justify-content: flex-start;\n  --navigation-item-min-height: 56px;\n  --navigation-item-height: auto;\n}\n\n/* Toggle Chevron */\n\n.bottom-side-nav {\n  position: relative;\n  align-content: flex-end;\n  min-height: var(--sm-side-navigation-top-bar-height);\n}\n\n.bottom-side-nav ic-divider {\n  position: absolute;\n  top: 0;\n}\n\n.primary-navigation {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n\n  /* Hide scrollbar when required but keep functionality */\n  scrollbar-width: none;\n}\n\n.primary-navigation::-webkit-scrollbar {\n  display: none;\n}\n\n.primary-navigation,\n.secondary-navigation {\n  overflow-x: hidden;\n}\n\n.bottom-side-nav .menu-expand-button {\n  position: absolute;\n  display: none;\n}\n\n.menu-visibility-visible {\n  visibility: visible;\n  width: 100%;\n}\n\n.app-title-show {\n  min-width: 15.5rem;\n}\n\n:host(.side-display) {\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n  position: var(--side-navigation-position);\n  left: 0;\n  top: 0;\n  bottom: 0;\n}\n\n:host(.side-display) .app-icon-container {\n  height: 40px;\n  display: flex;\n  align-items: center;\n}\n\n:host(.side-display) .top-bar {\n  --side-navigation-height: var(--sm-side-navigation-top-bar-height);\n\n  position: relative;\n  padding: 0;\n  box-shadow: -0.188rem 0.188rem 0.5rem rgb(0 0 0 / 20%);\n}\n\n:host(.ic-side-navigation-inline.side-display) .top-bar {\n  position: sticky;\n}\n\n:host(.anchor-right.side-display) .top-bar {\n  box-shadow: 0.188rem 0.188rem 0.5rem rgb(0 0 0 / 20%);\n}\n\n:host(.anchor-right.side-display) .bottom-wrapper {\n  box-shadow: 0.188rem -0.188rem 0.5rem rgb(0 0 0 / 20%);\n}\n\n:host(.side-display) .side-navigation,\n:host(.side-display) .top-bar {\n  width: var(--sm-side-navigation-top-bar-height);\n}\n\n:host(.sm-collapsed.side-display) {\n  width: var(--sm-side-navigation-top-bar-height);\n  transition: width var(--ic-easing-transition-slow);\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display) {\n  width: var(--sm-side-navigation-collapsed-labels-width);\n}\n\n:host(.sm-expanded.side-display) {\n  width: var(--side-navigation-width);\n  transition: width var(--ic-easing-transition-slow);\n  box-shadow: var(--ic-elevation-overlay);\n}\n\n:host(.side-display) .side-navigation {\n  --side-navigation-position-top: 0;\n\n  flex: 1;\n  position: relative;\n  top: auto;\n  left: auto;\n  bottom: auto;\n}\n\n:host(.ic-side-navigation-inline.side-display) .side-navigation {\n  position: relative;\n}\n\n:host(.anchor-right.side-display) .side-navigation {\n  left: auto;\n  right: 0;\n}\n\n:host(.side-display) .app-title-wrapper {\n  margin-left: 0;\n  border-left: none;\n  padding: var(--ic-space-xs) var(--ic-space-sm);\n}\n\n:host(.side-display) .app-title-wrapper ::slotted(svg) {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n}\n\n:host(.side-display) .app-title-wrapper ic-typography {\n  font-weight: var(--ic-font-weight-semibold);\n}\n\n:host(.sm-collapsed.side-display) .app-title-wrapper ic-typography {\n  position: absolute;\n  left: -9999px;\n  opacity: 0;\n  transition: opacity var(--ic-easing-transition-slow);\n}\n\n:host(.sm-expanded.side-display) ic-typography {\n  position: relative;\n  left: 0;\n}\n\n:host(.sm-expanded.side-display) :is(.side-navigation, .top-bar) {\n  width: var(--side-navigation-width);\n  transition: width var(--ic-easing-transition-slow);\n}\n\n:host(.sm-collapsed.side-display) :is(.side-navigation, .top-bar) {\n  width: var(--sm-side-navigation-top-bar-height);\n  transition: width var(--ic-easing-transition-slow);\n}\n\n:host(.anchor-right.sm-expanded.side-display) :is(.side-navigation, .top-bar) {\n  left: auto;\n  right: 0;\n}\n\n:host(.side-display) .app-status-wrapper,\n:host(.sm-collapsed.side-display) .app-status-wrapper {\n  display: none;\n  margin-left: 0;\n}\n\n:host(.sm-expanded.side-display) .app-status-wrapper {\n  display: flex;\n  max-width: 16rem;\n  margin-right: calc(var(--ic-space-xxxs) + var(--ic-space-xs));\n}\n\n:host(.side-display) .bottom-side-nav {\n  justify-items: flex-end;\n  align-items: flex-end;\n  justify-content: flex-end;\n  display: flex;\n  outline: none;\n}\n\n:host(.side-display) .bottom-side-nav .menu-expand-button {\n  padding-left: var(--ic-space-md);\n  height: var(--sm-side-navigation-top-bar-height);\n  width: 100%;\n  color: var(--ic-side-navigation-text);\n  background-color: transparent;\n  outline: var(--ic-hc-focus-outline);\n  border: none;\n  cursor: pointer;\n  display: flex;\n  transition: var(--ic-easing-transition-fast);\n}\n\n:host(.sm-expanded.side-display) .bottom-side-nav .menu-expand-button {\n  height: 100%;\n}\n\n:host(.side-display) .bottom-side-nav .menu-expand-button svg {\n  justify-items: flex-start;\n  align-self: center;\n  display: inline-block;\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n}\n\n:host(.side-display) .bottom-side-nav .menu-expand-button:hover {\n  background-color: var(--ic-side-navigation-hover);\n}\n\n:host(.side-display) .bottom-side-nav .menu-expand-button:focus {\n  box-shadow: var(--ic-border-focus-inset);\n  border-radius: var(--ic-border-radius-inset);\n  background-color: transparent;\n}\n\n:host(.sm-collapsed.side-display) .bottom-side-nav .menu-expand-button svg {\n  transform: scaleX(1);\n  transition: transform var(--ic-easing-transition-slow);\n}\n\n:host(.sm-expanded.side-display) .bottom-side-nav .menu-expand-button svg {\n  transform: scaleX(-1);\n  transition: transform var(--ic-easing-transition-slow);\n  align-self: flex-end;\n  margin-bottom: 0.875rem;\n}\n\n:host(.anchor-right.sm-collapsed.side-display)\n  .bottom-side-nav\n  .menu-expand-button\n  svg {\n  transform: scaleX(-1);\n}\n\n:host(.anchor-right.sm-expanded.side-display)\n  .bottom-side-nav\n  .menu-expand-button\n  svg {\n  transform: scaleX(1);\n}\n\n:host(.sm-collapsed.side-display) ::slotted(ic-navigation-item) {\n  --navigation-item-label-opacity: 1;\n}\n\n:host(.sm-collapsed.side-display) ::slotted(ic-navigation-item),\n:host(.sm-collapsed.side-display) ::slotted(ic-navigation-group) {\n  --navigation-item-label-opacity: 0;\n  --navigation-item-min-height: 3.5rem;\n  --navigation-item-height: 3.5rem;\n}\n\n:host(.sm-expanded.side-display) ::slotted(ic-navigation-item),\n:host(.sm-expanded.side-display) ::slotted(ic-navigation-group) {\n  --navigation-item-label-opacity: 1;\n  --navigation-item-height: auto;\n  --navigation-item-min-height: 3.5rem;\n  --navigation-item-width: 20rem;\n  --navigation-item-side-nav-right: var(--ic-space-xl);\n}\n\n:host(.sm-collapsed.side-display) ::slotted(ic-navigation-group) {\n  --navigation-group-title-position: absolute;\n  --navigation-group-title-position-left: -9999px;\n  --navigation-group-title-opacity: none;\n}\n\n:host(.sm-expanded.side-display) ::slotted(ic-navigation-group) {\n  --navigation-group-title-position: relative;\n  --navigation-group-title-position-left: 0;\n  --navigation-group-expand-toggle-padding: 0.25rem;\n  --navigation-group-title-opacity: flex;\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display) .side-navigation,\n:host(.sm-collapsed.collapsed-labels.side-display) .top-bar {\n  width: var(--sm-side-navigation-collapsed-labels-width);\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display) .menu-expand-button {\n  padding: 0;\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display) .app-title-wrapper {\n  width: 100%;\n  justify-content: center;\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display)\n  ::slotted(ic-navigation-group) {\n  --navigation-group-justify-content: center;\n  --navigation-item-label-opacity: 1;\n  --navigation-group-item-min-width: 100%;\n  --navigation-group-expand-toggle-padding: 1rem;\n}\n\n:host(.collapsed-labels.side-display) .bottom-side-nav .menu-expand-button {\n  justify-content: center;\n}\n\n:host(.side-display) .collapsed-icon-labels-start {\n  visibility: hidden;\n  opacity: 0;\n}\n\n:host(.side-display) .collapsed-icon-labels-end {\n  visibility: visible;\n  opacity: 1;\n  transition: visibility 0s, opacity var(--ic-easing-transition-slow);\n}\n\n/* Media Queries */\n\n@media screen and (max-width: 419px) {\n  .top-bar {\n    height: var(--side-navigation-height);\n  }\n  .side-navigation {\n    width: 100%;\n  }\n}\n\n@media screen and (min-width: 340px) {\n  .app-icon-container {\n    display: flex;\n  }\n}\n\n@media screen and (min-width: 993px) {\n  :host(.side-display) {\n    position: sticky;\n    left: auto;\n    top: 0;\n    bottom: 0;\n  }\n\n  :host(.sm-expanded.side-display) {\n    box-shadow: none;\n  }\n}\n\n@media (forced-colors: active) {\n  .side-navigation,\n  .top-bar {\n    border-right: var(--ic-border-hc);\n  }\n\n  .menu-expand-button {\n    color: Highlight !important;\n  }\n\n  slot[name=\"app-icon\"]::slotted(svg) {\n    fill: currentcolor;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Listen,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\n\nimport menuIcon from \"../../assets/hamburger-menu-icon.svg\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport {\n  getCurrentDeviceSize,\n  DEVICE_SIZES,\n  checkResizeObserver,\n  isSlotUsed,\n  getBrandForegroundAppearance,\n  getCssProperty,\n  hasClassificationBanner,\n  onComponentRequiredPropUndefined,\n  isEmptyString,\n  isPropDefined,\n} from \"../../utils/helpers\";\nimport {\n  IcBrand,\n  IcBrandForeground,\n  IcBrandForegroundEnum,\n} from \"../../utils/types\";\nimport { IcTopBar, IcExpandedDetail } from \"./ic-side-navigation.types\";\n\n/**\n * @slot app-icon - Content will be rendered adjacent to the app title at the very top of the side navigation.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot primary-navigation - Content will be rendered at the top of the side navigation.\n * @slot secondary-navigation - Content will be rendered at the bottom of the side navigation.\n */\n\n@Component({\n  tag: \"ic-side-navigation\",\n  styleUrl: \"ic-side-navigation.css\",\n  shadow: true,\n})\nexport class SideNavigation {\n  private ANIMATION_DURATION =\n    parseInt(getCssProperty(\"--ic-transition-duration-slow\")) || 0;\n  private IC_NAVIGATION_ITEM: string = \"ic-navigation-item\";\n  private resizeObserver: ResizeObserver = null;\n  private COLLAPSED_ICON_LABELS_END = \"collapsed-icon-labels-end\";\n  private COLLAPSED_ICON_LABELS_START = \"collapsed-icon-labels-start\";\n  private menuButton: HTMLIcButtonElement = null;\n\n  @Element() el: HTMLIcSideNavigationElement;\n\n  @State() deviceSize: number = getCurrentDeviceSize();\n  @State() deviceSizeAppTitle: number = DEVICE_SIZES.S;\n  @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n  @State() hasSecondaryNavigation: boolean = false;\n  @State() menuExpanded: boolean = false;\n  @State() menuOpen: boolean = false;\n\n  /**\n   * The app title to be displayed. This is required, unless a slotted app title link is used.\n   */\n  @Prop() appTitle: string;\n\n  /**\n   * If `true`, the icon and label will appear when side navigation is collapsed.\n   */\n  @Prop() collapsedIconLabels: boolean = false;\n\n  /**\n   * If `true`, automatic parent wrapper styling will be disabled.\n   */\n  @Prop() disableAutoParentStyling: boolean = false;\n\n  /**\n   * If `true`, the side navigation will not display as a top bar on small devices.\n   */\n  @Prop() disableTopBarBehaviour: boolean = false;\n\n  /**\n   * If `true`, the side navigation will display in an expanded state.\n   */\n  @Prop() expanded: boolean = false;\n\n  @Watch(\"expanded\")\n  watchExpandedHandler(): void {\n    this.toggleMenuExpanded(this.expanded);\n  }\n\n  /**\n   * The URL that the app title link points to.\n   */\n  @Prop() href: string = \"/\";\n\n  /**\n   * @internal If `true`, side navigation will be contained by its parent element.\n   */\n  @Prop() inline: boolean = false;\n\n  /**\n   * The short title of the app to be displayed at small screen sizes in place of the app title.\n   */\n  @Prop() shortAppTitle: string = \"\";\n\n  /**\n   * If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).\n   */\n  @Prop() static: boolean = false;\n\n  /**\n   * The status of the app to be displayed.\n   */\n  @Prop() status: string;\n\n  /**\n   * The version of the app to be displayed.\n   */\n  @Prop() version: string;\n\n  /**\n   * Emitted when the side navigation is collapsed and expanded.\n   */\n  @Event() icSideNavExpanded: EventEmitter<IcExpandedDetail>;\n\n  componentWillLoad(): void {\n    this.setMenuExpanded(this.expanded);\n\n    if (this.collapsedIconLabels) {\n      this.setCollapsedIconLabels();\n    }\n\n    this.hasSecondaryNavigation = isSlotUsed(this.el, \"secondary-navigation\");\n  }\n\n  componentDidLoad(): void {\n    this.emitSideNavigationExpanded({\n      sideNavExpanded: this.menuExpanded,\n      sideNavMobile:\n        this.deviceSize === DEVICE_SIZES.S && !this.disableTopBarBehaviour,\n    });\n\n    checkResizeObserver(this.runResizeObserver);\n    this.styleSlottedCollapsedIconLabel();\n    this.arrangeSlottedNavigationItem(this.menuExpanded);\n    this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n    this.setExpandedButtonHeight();\n\n    !isSlotUsed(this.el, \"app-title\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.appTitle, propName: \"app-title\" }],\n        \"Side Navigation\"\n      );\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n\n    this.el?.removeEventListener(\"transitionend\", this.transitionEndHandler);\n  }\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n    this.foregroundColor = detail.mode;\n  }\n\n  private emitSideNavigationExpanded = (objDetails: {\n    sideNavExpanded: boolean;\n    sideNavMobile?: boolean;\n  }): void => {\n    this.icSideNavExpanded.emit({\n      sideNavExpanded: objDetails.sideNavExpanded,\n      sideNavMobile: objDetails.sideNavMobile,\n    });\n  };\n\n  private toggleMenu = (): void => {\n    this.menuOpen = !this.menuOpen;\n    this.setMobileMenuAriaAttributes(this.menuOpen);\n\n    this.arrangeSlottedNavigationItem(this.menuOpen);\n\n    this.setToggleMenuFlyoutMenuVisibility(this.menuOpen);\n\n    this.emitSideNavigationExpanded({\n      sideNavExpanded: this.menuOpen,\n      sideNavMobile: true,\n    });\n  };\n\n  private setToggleMenuFlyoutMenuVisibility = (menuOpen: boolean) => {\n    const sideNav = this.el.shadowRoot.querySelector(\n      \"#side-navigation\"\n    ) as HTMLDivElement;\n    const sideNavInner = sideNav.querySelector(\n      \".side-navigation-inner\"\n    ) as HTMLElement;\n    const bottomWrapper = sideNav.querySelector(\n      \".bottom-wrapper\"\n    ) as HTMLElement;\n\n    const menuVisibilityVisible = \"menu-visibility-visible\";\n\n    if (menuOpen) {\n      bottomWrapper.classList.add(menuVisibilityVisible);\n      sideNavInner.classList.add(menuVisibilityVisible);\n    } else {\n      setTimeout(() => {\n        sideNavInner.classList.remove(menuVisibilityVisible);\n        bottomWrapper.classList.remove(menuVisibilityVisible);\n      }, this.ANIMATION_DURATION);\n    }\n  };\n\n  private setMobileMenuAriaAttributes = (menuOpen: boolean) => {\n    if (this.menuButton !== null) {\n      this.menuButton.setAttribute(\"aria-expanded\", `${menuOpen}`);\n      this.menuButton.setAttribute(\n        \"aria-label\",\n        `${menuOpen ? \"Close\" : \"Open\"} navigation menu`\n      );\n    }\n  };\n\n  private setAndRemoveNoWrapAfterMenuExpanded = () => {\n    const appTitle =\n      this.el.shadowRoot.querySelector(\".title-link ic-typography\") ||\n      this.el.querySelector(\"[slot='app-title']\");\n\n    appTitle.classList.add(\"ic-typography-no-wrap\");\n\n    setTimeout(() => {\n      appTitle.classList.remove(\"ic-typography-no-wrap\");\n    }, this.ANIMATION_DURATION);\n  };\n\n  private toggleMenuExpanded = (expanded: boolean): void => {\n    if (this.deviceSize > DEVICE_SIZES.S) {\n      this.menuExpanded = expanded;\n    }\n\n    if (this.menuExpanded) {\n      this.setAndRemoveNoWrapAfterMenuExpanded();\n      this.el.shadowRoot\n        .querySelector(\".app-title-inner-wrapper\")\n        .classList.add(\"app-title-show\");\n    } else {\n      this.el.style.setProperty(\"--navigation-item-width\", \"320px\");\n      this.el.shadowRoot\n        .querySelector(\".app-title-inner-wrapper\")\n        .classList.remove(\"app-title-show\");\n\n      this.el.addEventListener(\"transitionend\", (e) => {\n        if (e.propertyName === \"width\") {\n          this.el.style.setProperty(\"--navigation-item-width\", null);\n        }\n      });\n    }\n\n    this.arrangeSlottedNavigationItem(this.menuExpanded);\n\n    this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n    if (this.collapsedIconLabels) {\n      this.animateCollapsedIconLabels();\n    }\n\n    this.setExpandedButtonHeight();\n    this.emitSideNavigationExpanded({ sideNavExpanded: this.menuExpanded });\n  };\n\n  /**\n   * In order to style nested slotted elements (e.g. using React Router components), this method\n   * rearranges the a tag and labels and adds inline styling expand/collapsed animations as external CSS classes are not\n   * do not take affect.\n   * @param menuExpanded boolean - true or false depending on side navigation state\n   */\n  private arrangeSlottedNavigationItem = (menuExpanded?: boolean) => {\n    const navItems = this.el.querySelectorAll(\"ic-navigation-item\");\n    navItems.forEach((navItem) => {\n      const isNamedSlot = isSlotUsed(navItem, \"navigation-item\");\n      const isUnnamedSlot =\n        navItem.children[0] && !navItem.children[0].getAttribute(\"slot\");\n      if (isNamedSlot || isUnnamedSlot) {\n        let navItemSlot;\n        if (isNamedSlot) {\n          navItemSlot = navItem.querySelector(\"[slot='navigation-item']\");\n        } else {\n          navItemSlot = navItem.children[0];\n        }\n        const iconWrapper = document.createElement(\"div\");\n        const icon = navItemSlot.querySelector(\"svg\");\n        const label = navItem.textContent.trim();\n        const icTypography = document.createElement(\"ic-typography\");\n        icTypography.classList.add(\n          \"ic-typography-label\",\n          \"hydrated\",\n          \"navigation-item-side-nav-slotted-text\"\n        );\n\n        iconWrapper.style.height = \"var(--ic-space-lg)\";\n        iconWrapper.append(icon);\n\n        navItemSlot.textContent = \"\";\n\n        icTypography.textContent = label;\n\n        navItemSlot.append(iconWrapper);\n        navItemSlot.append(icTypography);\n\n        if (this.collapsedIconLabels) {\n          this.styleSlottedCollapsedIconLabels(menuExpanded, icTypography);\n        } else {\n          this.styleSlottedIconLabels(menuExpanded, icTypography);\n        }\n      }\n    });\n  };\n\n  private styleSlottedCollapsedIconLabels = (\n    menuExpanded: boolean,\n    icTypography: HTMLIcTypographyElement\n  ) => {\n    if (menuExpanded) {\n      icTypography.style.marginTop = \"0\";\n      icTypography.style.whiteSpace = \"nowrap\";\n      icTypography.style.overflow = \"hidden\";\n      icTypography.style.textOverflow = \"ellipsis\";\n    } else {\n      icTypography.style.marginTop = \"10px\";\n      icTypography.style.whiteSpace = \"nowrap\";\n      icTypography.style.overflow = \"hidden\";\n      icTypography.style.textOverflow = \"ellipsis\";\n    }\n  };\n\n  private setExpandedButtonHeight = () => {\n    const appStatusWrapper = this.el.shadowRoot.querySelector(\n      \"#side-navigation > .bottom-wrapper > .bottom-side-nav > .app-status-wrapper\"\n    ) as HTMLDivElement;\n\n    if (appStatusWrapper.offsetHeight !== 0) {\n      this.el.style.setProperty(\n        \"--sm-side-navigation-bottom-bar-height\",\n        `${appStatusWrapper.offsetHeight}px`\n      );\n    }\n  };\n\n  private styleSlottedIconLabels = (\n    menuExpanded: boolean,\n    icTypography: HTMLSpanElement\n  ) => {\n    if (menuExpanded) {\n      icTypography.style.opacity = \"1\";\n      icTypography.style.visibility = \"visible\";\n      icTypography.style.transition =\n        \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n    } else {\n      icTypography.style.opacity = \"0\";\n      icTypography.style.visibility = \"hidden\";\n      icTypography.style.transition =\n        \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n    }\n  };\n\n  private transitionHandler = (type: string) => {\n    const primaryNavigationWrapper = this.el.shadowRoot.querySelector(\n      \".primary-navigation\"\n    );\n\n    const secondaryNavigationWrapper = this.el.shadowRoot.querySelector(\n      \".bottom-wrapper > .secondary-navigation\"\n    );\n\n    const classToRemove =\n      type === \"start\"\n        ? this.COLLAPSED_ICON_LABELS_END\n        : this.COLLAPSED_ICON_LABELS_START;\n\n    const classToAdd =\n      type === \"start\"\n        ? this.COLLAPSED_ICON_LABELS_START\n        : this.COLLAPSED_ICON_LABELS_END;\n\n    if (primaryNavigationWrapper) {\n      primaryNavigationWrapper.classList.remove(classToRemove);\n      primaryNavigationWrapper.classList.add(classToAdd);\n    }\n\n    if (secondaryNavigationWrapper) {\n      secondaryNavigationWrapper.classList.remove(classToRemove);\n      secondaryNavigationWrapper.classList.add(classToAdd);\n    }\n  };\n\n  private transitionEndHandler = () => {\n    this.transitionHandler(\"end\");\n  };\n\n  private animateCollapsedIconLabels = () => {\n    this.transitionHandler(\"start\");\n    this.transitionEndHandler();\n\n    this.el.addEventListener(\"transitionend\", this.transitionEndHandler);\n  };\n\n  private paddingIconWidth = (\n    navItems: HTMLIcNavigationItemElement[]\n  ): number => {\n    const navItemLink =\n      (navItems[0].shadowRoot &&\n        (navItems[0].shadowRoot.querySelector(\"ic-tooltip a\") ||\n          navItems[0].shadowRoot.querySelector(\"ic-tooltip div\"))) ||\n      navItems[0].querySelector(\"a\") ||\n      navItems[0].querySelector(\"div\");\n    const navItemSVG = navItems[0].querySelector(\"svg\");\n\n    const navStyles = {\n      gap: window.getComputedStyle(navItemLink).gap,\n      iconWidth: window.getComputedStyle(navItemSVG).width,\n      paddingLeft: window.getComputedStyle(navItemLink).paddingLeft,\n    };\n\n    return Object.values(navStyles).reduce((prev, curr) => {\n      return (prev += parseInt(curr));\n    }, 0);\n  };\n\n  private displayTooltipWithExpandedLongLabel = (menuExpanded: boolean) => {\n    let timer;\n\n    if (menuExpanded) {\n      timer = setTimeout(() => {\n        const sideNavWidth = this.el.clientWidth;\n\n        const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n          this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n        );\n\n        const paddingIconDelta = navigationItems.length\n          ? this.paddingIconWidth(navigationItems)\n          : 0;\n\n        navigationItems.forEach(\n          (navigationItem: HTMLIcNavigationItemElement) => {\n            const icTypographyScrollWidth =\n              (\n                navigationItem.shadowRoot &&\n                navigationItem.shadowRoot.querySelector(\n                  \"ic-tooltip .link ic-typography.ic-typography-label\"\n                )\n              )?.scrollWidth ||\n              navigationItem.querySelector(\"ic-typography.ic-typography-label\")\n                ?.scrollWidth;\n\n            if (icTypographyScrollWidth > sideNavWidth - paddingIconDelta) {\n              navigationItem.setAttribute(\"display-navigation-tooltip\", \"true\");\n            }\n          }\n        );\n      }, this.ANIMATION_DURATION);\n    } else {\n      clearTimeout(timer);\n\n      const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n        this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n      );\n      navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n        navigationItem.setAttribute(\"display-navigation-tooltip\", \"false\");\n      });\n    }\n  };\n\n  private setMenuExpanded = (expanded: boolean): void => {\n    this.menuExpanded = expanded;\n  };\n\n  /**\n   * As the mobile top bar is fixed, a padding top is required\n   * to push main content down the height of the mobile top bar\n   * @param value - padding-top css value\n   */\n  private setParentPaddingTop = (value: string) => {\n    this.el.parentElement.style.setProperty(\"padding-top\", value);\n  };\n\n  private setParentPaddingLeft = (value: string) => {\n    this.el.parentElement.style.setProperty(\"padding-left\", value);\n  };\n\n  private renderAppTitle = (isAppNameSubtitleVariant: boolean) => {\n    const displayShortAppTitle =\n      this.deviceSize <= DEVICE_SIZES.S && !isEmptyString(this.shortAppTitle);\n    return (\n      <ic-typography\n        variant={\n          displayShortAppTitle || isAppNameSubtitleVariant\n            ? \"subtitle-small\"\n            : \"h3\"\n        }\n        aria-label={\n          displayShortAppTitle\n            ? `${this.appTitle} (${this.shortAppTitle})`\n            : undefined\n        }\n      >\n        <h1>{displayShortAppTitle ? this.shortAppTitle : this.appTitle}</h1>\n      </ic-typography>\n    );\n  };\n\n  private resizeObserverCallback = (currSize: number) => {\n    this.deviceSize = currSize;\n\n    const isSmallAndDisableTopBar =\n      currSize === DEVICE_SIZES.S && !this.disableTopBarBehaviour;\n\n    if (!this.disableAutoParentStyling) {\n      const topBarHeight =\n        this.el.shadowRoot.querySelector(\".top-bar\")?.scrollHeight;\n      this.setParentPaddingTop(\n        isSmallAndDisableTopBar ? `${topBarHeight}px` : \"0\"\n      );\n      if (isSmallAndDisableTopBar) this.setParentPaddingLeft(\"0\");\n      if (isSmallAndDisableTopBar && this.inline) {\n        this.el.parentElement.style.setProperty(\n          \"height\",\n          `calc(100% - ${topBarHeight}px)`\n        );\n      } else if (!isSmallAndDisableTopBar) {\n        this.el.parentElement.style.setProperty(\"height\", \"100%\");\n      }\n    }\n\n    if (!this.disableAutoParentStyling) {\n      const paddingLeft = `calc(var(--ic-space-xxl) ${\n        this.collapsedIconLabels ? \"* 2\" : \"+ var(--ic-space-xs)\"\n      })`;\n\n      if (currSize > DEVICE_SIZES.L) {\n        this.setParentPaddingTop(\"0\");\n        this.setParentPaddingLeft(\"0\");\n      } else if (\n        (currSize > DEVICE_SIZES.S || this.disableTopBarBehaviour) &&\n        currSize <= DEVICE_SIZES.M &&\n        this.static\n      ) {\n        this.setParentPaddingLeft(paddingLeft);\n      } else if (\n        (currSize > DEVICE_SIZES.S || this.disableTopBarBehaviour) &&\n        currSize <= DEVICE_SIZES.L\n      ) {\n        this.setParentPaddingLeft(\n          this.static && this.menuExpanded\n            ? \"calc(var(--ic-space-xl) * 10)\"\n            : paddingLeft\n        );\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.deviceSizeAppTitle = currSize;\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(document.body, { box: \"content-box\" });\n  };\n\n  private setCollapsedIconLabels = () => {\n    const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n      this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n    );\n    navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n      navigationItem.setAttribute(\"collapsed-icon-label\", \"true\");\n    });\n  };\n\n  private styleSlottedCollapsedIconLabel = () => {\n    const dynamicSlottedIcTypographyComps: HTMLIcTypographyElement[] =\n      Array.from(\n        this.el.querySelectorAll(\".navigation-item-side-nav-slotted-text\")\n      );\n\n    dynamicSlottedIcTypographyComps.forEach((icTypography) => {\n      if (\n        icTypography?.parentElement?.parentElement?.classList.contains(\n          \"navigation-item-side-nav-collapsed-with-label\"\n        )\n      ) {\n        icTypography.style.whiteSpace = \"nowrap\";\n        icTypography.style.overflow = \"hidden\";\n        icTypography.style.textOverflow = \"ellipsis\";\n        icTypography.style.marginTop = \"10px\";\n      }\n    });\n  };\n\n  private renderTopBar = ({\n    isSDevice,\n    foregroundColor,\n    menuOpen,\n    href,\n    isAppNameSubtitleVariant,\n  }: IcTopBar) => {\n    const hasTitle = this.appTitle !== \"\" && isPropDefined(this.appTitle);\n\n    const Component = isSlotUsed(this.el, \"app-title\") ? \"div\" : \"a\";\n\n    const attrs = Component == \"a\" && {\n      href: href,\n    };\n\n    return (\n      <div\n        class={{\n          \"top-bar\": true,\n          [this.foregroundColor]: true,\n        }}\n      >\n        {isSDevice && (\n          <nav\n            aria-labelledby=\"menu-navigation-toggle-button-landmark\"\n            aria-hidden=\"false\"\n          >\n            <ic-button\n              aria-label=\"Open navigation menu\"\n              class=\"menu-button\"\n              id=\"menu-button\"\n              variant=\"secondary\"\n              size=\"small\"\n              full-width=\"true\"\n              theme={\n                foregroundColor == \"default\" || foregroundColor == \"light\"\n                  ? \"light\"\n                  : \"dark\"\n              }\n              monochrome\n              onClick={this.toggleMenu}\n              ariaOwnsId=\"side-navigation\"\n              aria-haspopup=\"true\"\n              aria-expanded=\"false\"\n              ref={(el) => (this.menuButton = el)}\n            >\n              <span\n                class=\"mobile-top-bar-menu-icon\"\n                slot=\"left-icon\"\n                innerHTML={menuOpen ? closeIcon : menuIcon}\n              ></span>\n              {menuOpen ? \"Close\" : \"Menu\"}\n            </ic-button>\n            <span\n              id=\"menu-navigation-toggle-button-landmark\"\n              class=\"navigation-landmark-title\"\n              aria-hidden=\"true\"\n            >\n              Navigation menu toggle button\n            </span>\n          </nav>\n        )}\n        <div class=\"app-title-wrapper\">\n          {(hasTitle || isSlotUsed(this.el, \"app-title\")) && (\n            <Component {...attrs} class=\"title-link\">\n              <div class=\"app-icon-container\" aria-hidden=\"true\">\n                <slot name=\"app-icon\"></slot>\n              </div>\n              <div class=\"app-title-inner-wrapper\">\n                {isSlotUsed(this.el, \"app-title\") ? (\n                  <slot name=\"app-title\"></slot>\n                ) : (\n                  this.renderAppTitle(isAppNameSubtitleVariant)\n                )}\n              </div>\n            </Component>\n          )}\n        </div>\n      </div>\n    );\n  };\n\n  render() {\n    const {\n      appTitle,\n      menuOpen,\n      foregroundColor,\n      menuExpanded,\n      href,\n      status,\n      version,\n      collapsedIconLabels,\n      inline,\n    } = this;\n\n    const isSDevice =\n      !this.disableTopBarBehaviour && this.deviceSize === DEVICE_SIZES.S;\n    const isMdDevice = this.deviceSize === DEVICE_SIZES.M;\n    const isLgDevice = this.deviceSize >= DEVICE_SIZES.L;\n    const isAppNameSubtitleVariant = this.deviceSizeAppTitle === DEVICE_SIZES.S;\n    const displayExpandBtn =\n      isMdDevice || this.disableTopBarBehaviour || (isLgDevice && !this.static);\n\n    const topBarProps: IcTopBar = {\n      isSDevice,\n      foregroundColor,\n      menuOpen,\n      href,\n      isAppNameSubtitleVariant,\n      appTitle,\n    };\n\n    return (\n      <Host\n        class={{\n          \"xs-menu-open\": menuOpen && isSDevice,\n          \"xs-menu-close\": !menuOpen && isSDevice,\n          \"sm-collapsed\": !isSDevice && !menuExpanded,\n          \"sm-expanded\": !isSDevice && menuExpanded,\n          \"side-display\":\n            this.deviceSize > DEVICE_SIZES.S || this.disableTopBarBehaviour,\n          [`ic-side-navigation-${IcBrandForegroundEnum.Dark}`]:\n            foregroundColor === IcBrandForegroundEnum.Dark,\n          [\"collapsed-labels\"]:\n            !isSDevice && !menuExpanded && collapsedIconLabels,\n          [\"ic-side-navigation-inline\"]: inline,\n        }}\n      >\n        {isSDevice && this.renderTopBar({ ...topBarProps })}\n        <div class=\"side-navigation\" id=\"side-navigation\">\n          {!isSDevice && this.renderTopBar({ ...topBarProps })}\n          <div class=\"side-navigation-inner\">\n            {isSlotUsed(this.el, \"primary-navigation\") && (\n              <nav\n                class=\"primary-navigation\"\n                aria-labelledby=\"primary-navigation-landmark\"\n              >\n                <span\n                  aria-hidden=\"true\"\n                  class=\"navigation-landmark-title\"\n                  id=\"primary-navigation-landmark\"\n                >\n                  Primary\n                </span>\n                <ul class=\"navigation-list\">\n                  <slot name=\"primary-navigation\"></slot>\n                </ul>\n              </nav>\n            )}\n          </div>\n          <div\n            class={{\n              [\"bottom-wrapper\"]: true,\n              [\"classification-spacing\"]: hasClassificationBanner(),\n            }}\n          >\n            {isSlotUsed(this.el, \"secondary-navigation\") && (\n              <nav\n                class=\"secondary-navigation\"\n                aria-labelledby=\"secondary-navigation-landmark\"\n              >\n                <span\n                  aria-hidden=\"true\"\n                  class=\"navigation-landmark-title\"\n                  id=\"secondary-navigation-landmark\"\n                >\n                  Secondary\n                </span>\n                <ul class=\"navigation-list\">\n                  <slot name=\"secondary-navigation\"></slot>\n                </ul>\n              </nav>\n            )}\n            <div class=\"bottom-side-nav\">\n              {this.hasSecondaryNavigation && <ic-divider></ic-divider>}\n              {displayExpandBtn && (\n                <button\n                  class=\"menu-expand-button\"\n                  innerHTML={chevronIcon}\n                  onClick={() => this.toggleMenuExpanded(!this.menuExpanded)}\n                  aria-label={`${\n                    menuExpanded ? \"Collapse\" : \"Expand\"\n                  } side navigation`}\n                ></button>\n              )}\n              <div class=\"app-status-wrapper\">\n                {status !== \"\" && (\n                  <div\n                    class={{\n                      [\"app-status\"]: true,\n                    }}\n                  >\n                    <ic-typography\n                      aria-label=\"app tag\"\n                      variant=\"label-uppercase\"\n                      class=\"app-status-text\"\n                    >\n                      {status}\n                    </ic-typography>\n                  </div>\n                )}\n                {version !== \"\" && (\n                  <ic-typography\n                    variant=\"label\"\n                    class=\"app-version\"\n                    aria-label=\"app version\"\n                  >\n                    {version}\n                  </ic-typography>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/core/p-eb7c589b.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as e,H as a,g as i}from"./p-6b5e91e2.js";import{i as s,b as o,a as c}from"./p-cda4aca9.js";const n=':host{gap:var(--ic-space-xs);padding:var(--ic-space-xs)}:host,.action-area{display:flex;flex-direction:column}.action-area{gap:var(--ic-space-md)}:host ::slotted(svg),:host ::slotted(img){border-radius:var(--ic-space-xxs)}:host(.ic-empty-state-right),:host(.ic-empty-state-right) .action-area{align-items:flex-end;text-align:right}:host(.ic-empty-state-center),:host(.ic-empty-state-center) .action-area{align-items:center;text-align:center}:host(.image-medium) ::slotted(svg),:host(.image-medium) ::slotted(img){height:calc(3 * var(--ic-space-lg)) !important;width:calc(3 * var(--ic-space-lg)) !important}:host(.image-small) ::slotted(svg),:host(.image-small) ::slotted(img){height:var(--ic-space-xxl) !important;width:var(--ic-space-xxl) !important}:host(.image-large) ::slotted(svg),:host(.image-large) ::slotted(img){height:calc(4 * var(--ic-space-xl)) !important;width:calc(4 * var(--ic-space-xl)) !important}::slotted([slot="heading"]),.empty-state-heading{--ic-typography-color:var(--ic-empty-state-title)}::slotted([slot="subheading"]),.empty-state-subheading{--ic-typography-color:var(--ic-empty-state-subtitle)}::slotted([slot="body"]),.empty-state-body{--ic-typography-color:var(--ic-empty-state-body)}';const h=class{constructor(e){t(this,e);this.hostMutationObserver=null;this.aligned="left";this.body=undefined;this.maxLines=undefined;this.heading=undefined;this.imageSize="medium";this.subheading=undefined;this.theme="inherit"}disconnectedCallback(){var t;(t=this.hostMutationObserver)===null||t===void 0?void 0:t.disconnect()}componentDidLoad(){!s(this.el,"heading")&&o([{prop:this.heading,propName:"heading"}],"Empty State");this.hostMutationObserver=new MutationObserver((t=>c(t,["image","actions"],this)));this.hostMutationObserver.observe(this.el,{childList:true})}render(){const{aligned:t,body:i,maxLines:o,heading:c,imageSize:n,subheading:h,theme:r}=this;return e(a,{class:{[`ic-empty-state-${t}`]:true,[`image-${n}`]:s(this.el,"image"),[`ic-theme-${r}`]:r!=="inherit"}},s(this.el,"image")&&e("slot",{name:"image"}),e("div",null,e("slot",{name:"heading"},e("ic-typography",{variant:"h4",class:"empty-state-heading"},c)),e("slot",{name:"subheading"},e("ic-typography",{variant:"subtitle-small",class:"empty-state-subheading"},h)),e("slot",{name:"body"},e("ic-typography",{maxLines:o,class:"empty-state-body"},i))),s(this.el,"actions")&&e("div",{class:"action-area"},e("slot",{name:"actions"})))}get el(){return i(this)}};h.style=n;export{h as ic_empty_state};
-//# sourceMappingURL=p-eb7c589b.entry.js.map

package/dist/core/p-eb7c589b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icEmptyStateCss","EmptyState","this","hostMutationObserver","disconnectedCallback","_a","disconnect","componentDidLoad","isSlotUsed","el","onComponentRequiredPropUndefined","prop","heading","propName","MutationObserver","mutationList","renderDynamicChildSlots","observe","childList","render","aligned","body","maxLines","imageSize","subheading","theme","h","Host","class","name","variant"],"sources":["src/components/ic-empty-state/ic-empty-state.css?tag=ic-empty-state&encapsulation=shadow","src/components/ic-empty-state/ic-empty-state.tsx"],"sourcesContent":[":host {\n  gap: var(--ic-space-xs);\n  padding: var(--ic-space-xs);\n}\n\n:host,\n.action-area {\n  display: flex;\n  flex-direction: column;\n}\n\n.action-area {\n  gap: var(--ic-space-md);\n}\n\n:host ::slotted(svg),\n:host ::slotted(img) {\n  border-radius: var(--ic-space-xxs);\n}\n\n:host(.ic-empty-state-right),\n:host(.ic-empty-state-right) .action-area {\n  align-items: flex-end;\n  text-align: right;\n}\n\n:host(.ic-empty-state-center),\n:host(.ic-empty-state-center) .action-area {\n  align-items: center;\n  text-align: center;\n}\n\n:host(.image-medium) ::slotted(svg),\n:host(.image-medium) ::slotted(img) {\n  height: calc(3 * var(--ic-space-lg)) !important;\n  width: calc(3 * var(--ic-space-lg)) !important;\n}\n\n:host(.image-small) ::slotted(svg),\n:host(.image-small) ::slotted(img) {\n  height: var(--ic-space-xxl) !important;\n  width: var(--ic-space-xxl) !important;\n}\n\n:host(.image-large) ::slotted(svg),\n:host(.image-large) ::slotted(img) {\n  height: calc(4 * var(--ic-space-xl)) !important;\n  width: calc(4 * var(--ic-space-xl)) !important;\n}\n\n::slotted([slot=\"heading\"]),\n.empty-state-heading {\n  --ic-typography-color: var(--ic-empty-state-title);\n}\n\n::slotted([slot=\"subheading\"]),\n.empty-state-subheading {\n  --ic-typography-color: var(--ic-empty-state-subtitle);\n}\n\n::slotted([slot=\"body\"]),\n.empty-state-body {\n  --ic-typography-color: var(--ic-empty-state-body);\n}\n","import { h, Component, Host, Prop, Element } from \"@stencil/core\";\n\nimport { IcEmptyStateAlignment } from \"./ic-empty-state.types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\n\n/**\n * @slot image - Content is placed at the top above all other content.\n * @slot actions - Content is placed at the bottom below all other content.\n * @slot heading - Content will be rendered in place of the heading prop.\n * @slot subheading - Content will be rendered in place of the subheading prop.\n * @slot body - Content will be rendered in place of the body prop.\n */\n@Component({\n  tag: \"ic-empty-state\",\n  styleUrl: \"ic-empty-state.css\",\n  shadow: true,\n})\nexport class EmptyState {\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcEmptyStateElement;\n\n  /**\n   * The alignment of the empty state container.\n   */\n  @Prop() aligned?: IcEmptyStateAlignment = \"left\";\n\n  /**\n   * The body text rendered in the empty state container.\n   */\n  @Prop() body?: string;\n\n  /**\n   * The number of lines of body text to display before truncating.\n   */\n  @Prop() maxLines?: number;\n\n  /**\n   * The title rendered in the empty state container.\n   */\n  @Prop() heading?: string;\n\n  /**\n   * The size of the image or icon used in the image slot.\n   */\n  @Prop() imageSize?: IcSizes = \"medium\";\n\n  /**\n   * The subtitle rendered in the empty state container.\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentDidLoad(): void {\n    !isSlotUsed(this.el, \"heading\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.heading, propName: \"heading\" }],\n        \"Empty State\"\n      );\n\n    this.hostMutationObserver = new MutationObserver((mutationList) =>\n      renderDynamicChildSlots(mutationList, [\"image\", \"actions\"], this)\n    );\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n\n  render() {\n    const { aligned, body, maxLines, heading, imageSize, subheading, theme } =\n      this;\n    return (\n      <Host\n        class={{\n          [`ic-empty-state-${aligned}`]: true,\n          [`image-${imageSize}`]: isSlotUsed(this.el, \"image\"),\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        {isSlotUsed(this.el, \"image\") && <slot name=\"image\"></slot>}\n        <div>\n          <slot name=\"heading\">\n            <ic-typography variant=\"h4\" class=\"empty-state-heading\">\n              {heading}\n            </ic-typography>\n          </slot>\n          <slot name=\"subheading\">\n            <ic-typography\n              variant=\"subtitle-small\"\n              class=\"empty-state-subheading\"\n            >\n              {subheading}\n            </ic-typography>\n          </slot>\n          <slot name=\"body\">\n            <ic-typography maxLines={maxLines} class=\"empty-state-body\">\n              {body}\n            </ic-typography>\n          </slot>\n        </div>\n        {isSlotUsed(this.el, \"actions\") && (\n          <div class=\"action-area\">\n            <slot name=\"actions\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"2GAAA,MAAMA,EAAkB,gsC,MCsBXC,EAAU,M,yBACbC,KAAAC,qBAAyC,K,aAOP,O,kFAoBZ,S,qCAUA,S,CAE9B,oBAAAC,G,OACEC,EAAAH,KAAKC,wBAAoB,MAAAE,SAAA,SAAAA,EAAEC,Y,CAG7B,gBAAAC,IACGC,EAAWN,KAAKO,GAAI,YACnBC,EACE,CAAC,CAAEC,KAAMT,KAAKU,QAASC,SAAU,YACjC,eAGJX,KAAKC,qBAAuB,IAAIW,kBAAkBC,GAChDC,EAAwBD,EAAc,CAAC,QAAS,WAAYb,QAE9DA,KAAKC,qBAAqBc,QAAQf,KAAKO,GAAI,CACzCS,UAAW,M,CAIf,MAAAC,GACE,MAAMC,QAAEA,EAAOC,KAAEA,EAAIC,SAAEA,EAAQV,QAAEA,EAAOW,UAAEA,EAASC,WAAEA,EAAUC,MAAEA,GAC/DvB,KACF,OACEwB,EAACC,EAAI,CACHC,MAAO,CACL,CAAC,kBAAkBR,KAAY,KAC/B,CAAC,SAASG,KAAcf,EAAWN,KAAKO,GAAI,SAC5C,CAAC,YAAYgB,KAAUA,IAAU,YAGlCjB,EAAWN,KAAKO,GAAI,UAAYiB,EAAA,QAAMG,KAAK,UAC5CH,EAAA,WACEA,EAAA,QAAMG,KAAK,WACTH,EAAA,iBAAeI,QAAQ,KAAKF,MAAM,uBAC/BhB,IAGLc,EAAA,QAAMG,KAAK,cACTH,EAAA,iBACEI,QAAQ,iBACRF,MAAM,0BAELJ,IAGLE,EAAA,QAAMG,KAAK,QACTH,EAAA,iBAAeJ,SAAUA,EAAUM,MAAM,oBACtCP,KAINb,EAAWN,KAAKO,GAAI,YACnBiB,EAAA,OAAKE,MAAM,eACTF,EAAA,QAAMG,KAAK,a"}

package/dist/core/p-f65179fe.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as e,H as s,g as a}from"./p-6b5e91e2.js";import{c as o}from"./p-f074ef5b.js";import{f as n,t as r,i as h,b as l}from"./p-cda4aca9.js";const d='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;min-height:100% !important;background:rgb(0 0 0 / 60%);z-index:var(--ic-z-index-dialog);opacity:0}:host(.ic-dialog-fade-in){opacity:1}:host(.disable-height-constraint){background:none;justify-content:unset;align-items:unset}.dialog.disable-height-constraint{max-height:none;position:relative}.dialog.disable-height-constraint .content-area{overflow-y:visible}@media (prefers-reduced-motion: no-preference){:host{transition:opacity var(--ic-easing-transition-slow)}.dialog{transform:translateY(-3rem);transition:transform 1000s}:host(.ic-dialog-fade-in) .dialog{transform:translateY(0);transition:transform var(--ic-easing-transition-slow)}}:host(.ic-dialog-hidden){display:none}.dialog{background-color:var(--ic-dialog-background);color:var(--ic-dialog-text-primary);--ic-typography-color:var(--ic-dialog-text-primary);border:var(--ic-space-1px) solid var(--ic-dialog-border);border-radius:var(--ic-border-radius);padding:var(--ic-space-xs) 0 var(--ic-space-md);display:flex;flex-direction:column;box-sizing:border-box;overflow-x:visible}.small{width:50%;max-width:25rem;min-height:11rem;max-height:70vh}.medium{width:70vw;max-width:44rem;min-height:12.5rem;max-height:70vh}.large{width:90vw;max-width:62.5rem;min-height:12.5rem;max-height:90vh}.heading-area{display:flex;margin-bottom:var(--ic-space-xs);padding:0 var(--ic-space-md)}.heading{overflow-wrap:break-word}.close-icon{margin-left:auto}.close-icon>svg{color:var(--ic-dialog-clear-button)}.content-area{padding:0 var(--ic-space-md);margin:0;overflow-y:auto}#dialog-content{margin-bottom:var(--ic-space-sm)}#dialog-content ::slotted(ic-typography){overflow-wrap:break-word}#dialog-content ::slotted(*){position:relative}.dialog-controls{margin-top:auto;padding:var(--ic-space-xs) var(--ic-space-md) 0;display:flex;justify-content:flex-end;gap:var(--ic-space-md)}.dialog-control-button{width:-moz-fit-content;width:fit-content}.backdrop{overflow-y:auto;position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgb(0 0 0 / 60%);z-index:var(--ic-z-index-dialog);padding-top:16px;padding-bottom:16px}.heading ic-typography{--ic-typography-color:var(--ic-dialog-text-primary)}.label ic-typography{--ic-typography-color:var(--ic-dialog-label)}@media (min-width: 800px){:host([size="large"]) .dialog:not(.disable-width-constraint)>.content-area{width:75%}}@media (max-width: 576px){.dialog{width:100vw;height:100vh;transform:translateY(-5rem);max-width:none;max-height:none;box-sizing:border-box}.backdrop{padding:0}.dialog.disable-height-constraint{height:auto;min-height:100vh}}@media (max-width: 364px){.dialog-control-button{width:unset}}';const c=class{constructor(s){i(this,s);this.icDialogCancelled=t(this,"icDialogCancelled",7);this.icDialogClosed=t(this,"icDialogClosed",7);this.icDialogConfirmed=t(this,"icDialogConfirmed",7);this.icDialogOpened=t(this,"icDialogOpened",7);this.contentAreaMutationObserver=null;this.DATA_GETS_FOCUS="data-gets-focus";this.DATA_GETS_FOCUS_SELECTOR="[data-gets-focus]";this.DIALOG_CONTROLS="dialog-controls";this.dialogHeight=0;this.focusedElementIndex=0;this.IC_TEXT_FIELD="IC-TEXT-FIELD";this.IC_ACCORDION="IC-ACCORDION";this.IC_ACCORDION_GROUP="IC-ACCORDION-GROUP";this.resizeObserver=null;this.dialogOpened=()=>{var i;this.dialogRendered=true;if(this.disableHeightConstraint){this.dialogEl.show()}else{(i=this.dialogEl)===null||i===void 0?void 0:i.showModal()}setTimeout((()=>{this.fadeIn=true;if(this.disableHeightConstraint&&this.backdropEl.scrollTop!==0){this.backdropEl.scrollTop=0}}),10);setTimeout((()=>{this.setInitialFocus();n(this.runResizeObserver)}),75);setTimeout((()=>{this.getFocusedElementIndex();this.icDialogOpened.emit()}),80)};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{clearTimeout(this.resizeTimeout);this.resizeTimeout=window.setTimeout(this.resizeObserverCallback,80)}));this.resizeObserver.observe(this.dialogEl)};this.resizeObserverCallback=()=>{if(this.dialogEl.clientHeight!==this.dialogHeight){this.dialogHeight=this.dialogEl.clientHeight}};this.refreshInteractiveElementsOnSlotChange=()=>{const i=this.el.shadowRoot.querySelector("#dialog-content");this.contentArea=i.querySelector("slot");this.contentArea.addEventListener("slotchange",this.getInteractiveElements);this.contentAreaMutationObserver=new MutationObserver((()=>{this.getInteractiveElements()}));r(i).forEach((i=>{this.contentAreaMutationObserver.observe(i,{childList:true,subtree:true})}))};this.removeSlotChangeListener=()=>{var i;if(this.contentArea){this.contentArea.removeEventListener("slotchange",this.getInteractiveElements);(i=this.contentAreaMutationObserver)===null||i===void 0?void 0:i.disconnect()}};this.setInitialFocus=()=>{this.sourceElement=document.activeElement;let i;if(this.el.querySelector(this.DATA_GETS_FOCUS_SELECTOR)!==null){i=this.el.querySelector(this.DATA_GETS_FOCUS_SELECTOR)}else{i=this.el.shadowRoot.querySelector(this.DATA_GETS_FOCUS_SELECTOR)}if(i.tagName===this.IC_TEXT_FIELD){i.setFocus()}else if(i.tagName===this.IC_ACCORDION_GROUP){i.setFocus()}else if(i.tagName===this.IC_ACCORDION){i.setFocus()}else{i.focus({preventScroll:this.disableHeightConstraint?true:false})}};this.getFocusedElementIndex=()=>{for(let i=0;i<this.interactiveElementList.length;i++){if(this.interactiveElementList[i]===(this.el.shadowRoot.activeElement||document.activeElement)){this.focusedElementIndex=i}}};this.closeIconClick=()=>{this.open=false};this.getInteractiveElements=()=>{this.interactiveElementList=Array.from(this.el.shadowRoot.querySelectorAll("ic-button"));const i=Array.from(this.el.querySelectorAll(`a[href], button, input:not(.ic-input), textarea, select, details, [tabindex]:not([tabindex="-1"]),\n          ic-button, ic-checkbox, ic-select, ic-search-bar, ic-tab-group, ic-radio-group,\n          ic-back-to-top, ic-breadcrumb, ic-chip[dismissible="true"], ic-footer-link, ic-link, ic-navigation-button,\n          ic-navigation-item, ic-switch, ic-text-field, ic-accordion-group, ic-accordion, ic-date-input, ic-date-picker`));if(i.length>0){if(i[0].slot!==this.DIALOG_CONTROLS){i[0].setAttribute(this.DATA_GETS_FOCUS,"")}else if(!this.destructive){i[i.length-1].setAttribute(this.DATA_GETS_FOCUS,"")}}for(let t=0;t<i.length;t++){this.interactiveElementList.splice(1+t,0,i[t])}};this.getNextFocusEl=i=>this.interactiveElementList[i];this.focusNextInteractiveElement=i=>{this.getFocusedElementIndex();if(this.interactiveElementList[this.focusedElementIndex].tagName==="IC-SEARCH-BAR"){return false}this.setFocusIndexBasedOnShiftKey(i);this.loopNextFocusIndexIfLastElement();let t=this.getNextFocusEl(this.focusedElementIndex);const e=getComputedStyle(t).visibility==="hidden"||t.tagName===this.IC_ACCORDION_GROUP&&t.hasAttribute("single-expansion");if(t.tagName===this.IC_TEXT_FIELD){t.setFocus()}else{if(e){this.setFocusIndexBasedOnShiftKey(i);this.loopNextFocusIndexIfLastElement();t=this.getNextFocusEl(this.focusedElementIndex)}if(t.tagName===this.IC_ACCORDION_GROUP){t.setFocus()}else if(t.tagName===this.IC_ACCORDION){t.setFocus()}else{t.focus()}}return true};this.renderDialog=()=>{const{buttons:i,size:t,heading:s,label:a,destructive:n,dismissLabel:r,hideCloseButton:l}=this;return e("dialog",{class:{["dialog"]:true,[`${t}`]:true,["disable-height-constraint"]:this.disableHeightConstraint,["disable-width-constraint"]:this.disableWidthConstraint},"aria-labelledby":"dialog-label dialog-heading","aria-describedby":"dialog-alert dialog-content",ref:i=>this.dialogEl=i},e("div",{class:"heading-area"},e("div",{class:"heading-content"},e("div",{class:"label"},e("slot",{name:"label"},e("ic-typography",{variant:"label",id:"dialog-label"},a))),e("div",{class:"heading"},e("slot",{name:"heading"},e("ic-typography",{variant:"h4",id:"dialog-heading"},s)))),!l&&e("ic-button",{class:"close-icon",variant:"icon",innerHTML:o,"aria-label":r,onClick:this.closeIconClick,"data-gets-focus":n||!i?"":null})),e("div",{class:"content-area"},h(this.el,"alert")&&e("slot",{name:"alert"}),e("div",{id:"dialog-content"},e("slot",null))),i&&(h(this.el,this.DIALOG_CONTROLS)?e("div",{class:{[this.DIALOG_CONTROLS]:true}},e("slot",{name:this.DIALOG_CONTROLS})):e("div",{class:{[this.DIALOG_CONTROLS]:true}},e("ic-button",{variant:"tertiary",onClick:()=>this.cancelDialog(),class:"dialog-control-button","data-gets-focus":null},"Cancel"),e("ic-button",{variant:this.destructive?"destructive":"primary",onClick:()=>this.confirmDialog(),class:"dialog-control-button","data-gets-focus":""},"Confirm"))))};this.dialogRendered=false;this.fadeIn=false;this.buttons=true;this.closeOnBackdropClick=true;this.destructive=false;this.dismissLabel="Dismiss";this.disableHeightConstraint=false;this.disableWidthConstraint=false;this.hideCloseButton=false;this.heading=undefined;this.label=undefined;this.open=undefined;this.size="small";this.theme="inherit"}watchOpenHandler(){if(this.open){this.dialogOpened()}else{this.fadeIn=false;if(this.resizeObserver!==null){this.resizeObserver.disconnect()}setTimeout((()=>{var i;this.dialogRendered=false;this.dialogEl.close();(i=this.sourceElement)===null||i===void 0?void 0:i.focus();this.dialogHeight=0;this.icDialogClosed.emit()}),80)}}disconnectedCallback(){this.removeSlotChangeListener()}componentDidLoad(){this.getInteractiveElements();this.refreshInteractiveElementsOnSlotChange();if(this.open){this.dialogOpened()}!h(this.el,"heading")&&l([{prop:this.heading,propName:"heading"}],"Dialog")}componentDidRender(){if(getComputedStyle(this.el).display!=="none"&&this.disableHeightConstraint){document.body.style.overflow="hidden"}else{document.body.style.overflow="auto"}}handleKeyboard(i){if(this.dialogRendered){switch(i.key){case"Tab":if(this.focusNextInteractiveElement(i.shiftKey)){i.preventDefault()}break;case"Escape":if(!i.repeat){this.open=false}i.stopImmediatePropagation();break}}}handleClick(i){const t=this.el.shadowRoot.querySelector("dialog");if(this.closeOnBackdropClick&&i.composedPath().indexOf(t)<=0){const t=this.dialogEl.getBoundingClientRect();const e=t.top<=i.clientY&&i.clientY<=t.top+t.height&&t.left<=i.clientX&&i.clientX<=t.left+t.width;if(!e){this.open=false}}}async cancelDialog(){this.icDialogCancelled.emit();this.open=false}async confirmDialog(){this.icDialogConfirmed.emit()}loopNextFocusIndexIfLastElement(){if(this.focusedElementIndex>this.interactiveElementList.length-1)this.focusedElementIndex=0;else if(this.focusedElementIndex<0){this.focusedElementIndex=this.interactiveElementList.length-1}}setFocusIndexBasedOnShiftKey(i){if(i){this.focusedElementIndex-=1}else{this.focusedElementIndex+=1}}render(){return e(s,{class:{["ic-dialog-hidden"]:!this.dialogRendered,["ic-dialog-fade-in"]:this.fadeIn,["disable-height-constraint"]:this.disableHeightConstraint,[`ic-theme-${this.theme}`]:this.theme!=="inherit"}},this.disableHeightConstraint?e("div",{class:"backdrop",ref:i=>this.backdropEl=i},this.renderDialog()):this.renderDialog())}get el(){return a(this)}static get watchers(){return{open:["watchOpenHandler"]}}};c.style=d;export{c as ic_dialog};
-//# sourceMappingURL=p-f65179fe.entry.js.map

package/dist/core/p-f65179fe.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icDialogCss","Dialog","this","contentAreaMutationObserver","DATA_GETS_FOCUS","DATA_GETS_FOCUS_SELECTOR","DIALOG_CONTROLS","dialogHeight","focusedElementIndex","IC_TEXT_FIELD","IC_ACCORDION","IC_ACCORDION_GROUP","resizeObserver","dialogOpened","dialogRendered","disableHeightConstraint","dialogEl","show","_a","showModal","setTimeout","fadeIn","backdropEl","scrollTop","setInitialFocus","checkResizeObserver","runResizeObserver","getFocusedElementIndex","icDialogOpened","emit","ResizeObserver","clearTimeout","resizeTimeout","window","resizeObserverCallback","observe","clientHeight","refreshInteractiveElementsOnSlotChange","contentWrapper","el","shadowRoot","querySelector","contentArea","addEventListener","getInteractiveElements","MutationObserver","getSlotElements","forEach","childList","subtree","removeSlotChangeListener","removeEventListener","disconnect","sourceElement","document","activeElement","focusedElement","tagName","setFocus","focus","preventScroll","i","interactiveElementList","length","closeIconClick","open","Array","from","querySelectorAll","slottedInteractiveElements","slot","setAttribute","destructive","splice","getNextFocusEl","focusNextInteractiveElement","shiftKey","setFocusIndexBasedOnShiftKey","loopNextFocusIndexIfLastElement","nextFocusEl","isHidden","getComputedStyle","visibility","hasAttribute","renderDialog","buttons","size","heading","label","dismissLabel","hideCloseButton","h","class","disableWidthConstraint","ref","name","variant","id","innerHTML","closeIcon","onClick","isSlotUsed","cancelDialog","confirmDialog","undefined","watchOpenHandler","close","icDialogClosed","disconnectedCallback","componentDidLoad","onComponentRequiredPropUndefined","prop","propName","componentDidRender","display","body","style","overflow","handleKeyboard","ev","key","preventDefault","repeat","stopImmediatePropagation","handleClick","dialogElement","closeOnBackdropClick","composedPath","indexOf","rect","getBoundingClientRect","isInDialog","top","clientY","height","left","clientX","width","icDialogCancelled","icDialogConfirmed","render","Host","theme"],"sources":["src/components/ic-dialog/ic-dialog.css?tag=ic-dialog&encapsulation=shadow","src/components/ic-dialog/ic-dialog.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n  * @prop --ic-z-index-dialog: z-index of dialog \n  */\n\n:host {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 100% !important;\n  background: rgb(0 0 0 / 60%);\n  z-index: var(--ic-z-index-dialog);\n  opacity: 0;\n}\n\n:host(.ic-dialog-fade-in) {\n  opacity: 1;\n}\n\n:host(.disable-height-constraint) {\n  background: none;\n  justify-content: unset;\n  align-items: unset;\n}\n\n.dialog.disable-height-constraint {\n  max-height: none;\n  position: relative;\n}\n\n.dialog.disable-height-constraint .content-area {\n  overflow-y: visible;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  :host {\n    transition: opacity var(--ic-easing-transition-slow);\n  }\n\n  .dialog {\n    transform: translateY(-3rem);\n    transition: transform 1000s;\n  }\n\n  :host(.ic-dialog-fade-in) .dialog {\n    transform: translateY(0);\n    transition: transform var(--ic-easing-transition-slow);\n  }\n}\n\n:host(.ic-dialog-hidden) {\n  display: none;\n}\n\n.dialog {\n  background-color: var(--ic-dialog-background);\n  color: var(--ic-dialog-text-primary);\n  --ic-typography-color: var(--ic-dialog-text-primary);\n  border: var(--ic-space-1px) solid var(--ic-dialog-border);\n  border-radius: var(--ic-border-radius);\n  padding: var(--ic-space-xs) 0 var(--ic-space-md);\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow-x: visible;\n}\n\n.small {\n  width: 50%;\n  max-width: 25rem;\n  min-height: 11rem;\n  max-height: 70vh;\n}\n\n.medium {\n  width: 70vw;\n  max-width: 44rem;\n  min-height: 12.5rem;\n  max-height: 70vh;\n}\n\n.large {\n  width: 90vw;\n  max-width: 62.5rem;\n  min-height: 12.5rem;\n  max-height: 90vh;\n}\n\n.heading-area {\n  display: flex;\n  margin-bottom: var(--ic-space-xs);\n  padding: 0 var(--ic-space-md);\n}\n\n.heading {\n  overflow-wrap: break-word;\n}\n\n.close-icon {\n  margin-left: auto;\n}\n\n.close-icon > svg {\n  color: var(--ic-dialog-clear-button);\n}\n\n.content-area {\n  padding: 0 var(--ic-space-md);\n  margin: 0;\n  overflow-y: auto;\n}\n\n#dialog-content {\n  margin-bottom: var(--ic-space-sm);\n}\n\n#dialog-content ::slotted(ic-typography) {\n  overflow-wrap: break-word;\n}\n\n#dialog-content ::slotted(*) {\n  position: relative;\n}\n\n.dialog-controls {\n  margin-top: auto;\n  padding: var(--ic-space-xs) var(--ic-space-md) 0;\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--ic-space-md);\n}\n\n.dialog-control-button {\n  width: fit-content;\n}\n\n.backdrop {\n  overflow-y: auto;\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgb(0 0 0 / 60%);\n  z-index: var(--ic-z-index-dialog);\n  padding-top: 16px;\n  padding-bottom: 16px;\n}\n\n.heading ic-typography {\n  --ic-typography-color: var(--ic-dialog-text-primary);\n}\n\n.label ic-typography {\n  --ic-typography-color: var(--ic-dialog-label);\n}\n\n@media (min-width: 800px) {\n  :host([size=\"large\"]) .dialog:not(.disable-width-constraint) > .content-area {\n    width: 75%;\n  }\n}\n\n@media (max-width: 576px) {\n  .dialog {\n    width: 100vw;\n    height: 100vh;\n    transform: translateY(-5rem);\n    max-width: none;\n    max-height: none;\n    box-sizing: border-box;\n  }\n\n  .backdrop {\n    padding: 0;\n  }\n\n  .dialog.disable-height-constraint {\n    height: auto;\n    min-height: 100vh;\n  }\n}\n\n@media (max-width: 364px) {\n  .dialog-control-button {\n    width: unset;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  State,\n  Method,\n  Listen,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport {\n  isSlotUsed,\n  checkResizeObserver,\n  onComponentRequiredPropUndefined,\n  getSlotElements,\n} from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n/**\n * @slot dialog-controls - Content will be place at the bottom of the dialog.\n * @slot heading - Content will be placed at the top of the dialog.\n * @slot label - Content will be placed above the dialog heading.\n * @slot alert - Content will be placed at the top of the content area of the dialog.\n */\n@Component({\n  tag: \"ic-dialog\",\n  styleUrl: \"ic-dialog.css\",\n  shadow: true,\n})\nexport class Dialog {\n  private backdropEl: HTMLDivElement;\n  private contentArea: HTMLSlotElement;\n  private contentAreaMutationObserver: MutationObserver = null;\n  private DATA_GETS_FOCUS: string = \"data-gets-focus\";\n  private DATA_GETS_FOCUS_SELECTOR: string = \"[data-gets-focus]\";\n  private DIALOG_CONTROLS: string = \"dialog-controls\";\n  private dialogEl: HTMLDialogElement;\n  private dialogHeight: number = 0;\n  private focusedElementIndex = 0;\n  private IC_TEXT_FIELD: string = \"IC-TEXT-FIELD\";\n  private IC_ACCORDION: string = \"IC-ACCORDION\";\n  private IC_ACCORDION_GROUP: string = \"IC-ACCORDION-GROUP\";\n  private interactiveElementList: HTMLElement[];\n  private resizeObserver: ResizeObserver = null;\n  private resizeTimeout: number;\n  private sourceElement: HTMLElement;\n\n  @Element() el: HTMLIcDialogElement;\n\n  @State() dialogRendered: boolean = false;\n  @State() fadeIn: boolean = false;\n\n  /**\n   * If set to `false`, default buttons will not be shown, but slotted dialog controls will still be displayed.\n   */\n  @Prop() buttons?: boolean = true;\n\n  /**\n   * If set to `false`, the dialog will not close when the backdrop is clicked.\n   */\n  @Prop() closeOnBackdropClick?: boolean = true;\n\n  /**\n   * If 'true', sets the 'primary' or rightmost button to the destructive variant. Stops initial focus being set on the 'primary' or rightmost default or slotted button.\n   */\n  @Prop() destructive?: boolean = false;\n\n  /**\n   * Sets the dismiss label tooltip and aria label.\n   */\n  @Prop() dismissLabel?: string = \"Dismiss\";\n\n  /**\n   * If set to `true`, the content area max height and overflow properties are removed allowing the dialog to stretch below the fold.\n   * This prop also prevents popover elements from being cut off within the content area.\n   */\n  @Prop() disableHeightConstraint?: boolean = false;\n\n  /**\n   * If set to `true`, the content area width property is removed, allowing content to take the full width of the dialog when using the large variant.\n   */\n  @Prop() disableWidthConstraint?: boolean = false;\n\n  /**\n   * If `true`, the close button will not be displayed.\n   */\n  @Prop() hideCloseButton?: boolean = false;\n\n  /**\n   * Sets the heading for the dialog.\n   */\n  @Prop() heading: string;\n\n  /**\n   * Sets the optional label for the dialog which appears above the heading.\n   */\n  @Prop() label?: string;\n\n  /**\n   * If `true`, the dialog will be displayed.\n   */\n  @Prop({ reflect: true, mutable: true }) open: boolean = undefined;\n\n  @Watch(\"open\")\n  watchOpenHandler(): void {\n    if (this.open) {\n      this.dialogOpened();\n    } else {\n      this.fadeIn = false;\n      if (this.resizeObserver !== null) {\n        this.resizeObserver.disconnect();\n      }\n      setTimeout(() => {\n        this.dialogRendered = false;\n        this.dialogEl.close();\n        this.sourceElement?.focus();\n        this.dialogHeight = 0;\n        this.icDialogClosed.emit();\n      }, 80);\n    }\n  }\n\n  /**\n   * Sets the maximum and minimum height and width for the dialog.\n   */\n  @Prop() size?: \"small\" | \"medium\" | \"large\" = \"small\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * Cancelation event emitted when default 'Cancel' button clicked or 'cancelDialog' method is called.\n   */\n  @Event() icDialogCancelled: EventEmitter<void>;\n\n  /**\n   * Emitted when dialog has closed.\n   */\n  @Event() icDialogClosed: EventEmitter<void>;\n\n  /**\n   * Confirmation event emitted when default 'Confirm' primary button clicked or 'confirmDialog' method is called.\n   */\n  @Event() icDialogConfirmed: EventEmitter<void>;\n\n  /**\n   * Emitted when dialog has opened.\n   */\n  @Event() icDialogOpened: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    this.removeSlotChangeListener();\n  }\n\n  componentDidLoad(): void {\n    this.getInteractiveElements();\n\n    this.refreshInteractiveElementsOnSlotChange();\n\n    if (this.open) {\n      this.dialogOpened();\n    }\n\n    !isSlotUsed(this.el, \"heading\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.heading, propName: \"heading\" }],\n        \"Dialog\"\n      );\n  }\n\n  componentDidRender(): void {\n    if (\n      getComputedStyle(this.el).display !== \"none\" &&\n      this.disableHeightConstraint\n    ) {\n      document.body.style.overflow = \"hidden\";\n    } else {\n      document.body.style.overflow = \"auto\";\n    }\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeyboard(ev: KeyboardEvent): void {\n    if (this.dialogRendered) {\n      switch (ev.key) {\n        case \"Tab\":\n          if (this.focusNextInteractiveElement(ev.shiftKey)) {\n            ev.preventDefault();\n          }\n          break;\n        case \"Escape\":\n          if (!ev.repeat) {\n            this.open = false;\n          }\n          ev.stopImmediatePropagation();\n          break;\n      }\n    }\n  }\n\n  @Listen(\"click\", {})\n  handleClick(ev: MouseEvent): void {\n    const dialogElement = this.el.shadowRoot.querySelector(\"dialog\");\n    if (\n      this.closeOnBackdropClick &&\n      ev.composedPath().indexOf(dialogElement) <= 0\n    ) {\n      const rect = this.dialogEl.getBoundingClientRect();\n      const isInDialog =\n        rect.top <= ev.clientY &&\n        ev.clientY <= rect.top + rect.height &&\n        rect.left <= ev.clientX &&\n        ev.clientX <= rect.left + rect.width;\n      if (!isInDialog) {\n        this.open = false;\n      }\n    }\n  }\n\n  /**\n   * Cancels the dialog. Used by the default 'Cancel' button or can be called manually to trigger cancelling of dialog.\n   */\n  @Method()\n  async cancelDialog(): Promise<void> {\n    this.icDialogCancelled.emit();\n    this.open = false;\n  }\n\n  /**\n   * Confirms the dialog. Used by the default 'Confirm' button or can be called manually to trigger confirming of dialog.\n   */\n  @Method()\n  async confirmDialog(): Promise<void> {\n    this.icDialogConfirmed.emit();\n  }\n\n  private dialogOpened = () => {\n    this.dialogRendered = true;\n\n    if (this.disableHeightConstraint) {\n      this.dialogEl.show();\n    } else {\n      this.dialogEl?.showModal();\n    }\n\n    setTimeout(() => {\n      this.fadeIn = true;\n\n      /**\n       * This is required to set scroll back to top if:\n       * - dialog content goes below the fold\n       * - is closed using cancel or confirm and reopened.\n       *\n       * Without this, the scroll bar will start from the dialog's last scroll-x coordinate.\n       */\n      if (this.disableHeightConstraint && this.backdropEl.scrollTop !== 0) {\n        this.backdropEl.scrollTop = 0;\n      }\n    }, 10);\n\n    setTimeout(() => {\n      this.setInitialFocus();\n      checkResizeObserver(this.runResizeObserver);\n    }, 75);\n\n    setTimeout(() => {\n      this.getFocusedElementIndex();\n      this.icDialogOpened.emit();\n    }, 80);\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      clearTimeout(this.resizeTimeout);\n      this.resizeTimeout = window.setTimeout(this.resizeObserverCallback, 80);\n    });\n    this.resizeObserver.observe(this.dialogEl);\n  };\n\n  private resizeObserverCallback = () => {\n    if (this.dialogEl.clientHeight !== this.dialogHeight) {\n      this.dialogHeight = this.dialogEl.clientHeight;\n    }\n  };\n\n  private refreshInteractiveElementsOnSlotChange = () => {\n    const contentWrapper = this.el.shadowRoot.querySelector(\"#dialog-content\");\n    this.contentArea = contentWrapper.querySelector(\"slot\");\n\n    // Detect changes to slotted elements\n    this.contentArea.addEventListener(\n      \"slotchange\",\n      this.getInteractiveElements\n    );\n\n    this.contentAreaMutationObserver = new MutationObserver(() => {\n      this.getInteractiveElements();\n    });\n\n    // Detect changes to children of slotted elements\n    getSlotElements(contentWrapper).forEach((el) => {\n      this.contentAreaMutationObserver.observe(el, {\n        childList: true,\n        subtree: true,\n      });\n    });\n  };\n\n  private removeSlotChangeListener = () => {\n    if (this.contentArea) {\n      this.contentArea.removeEventListener(\n        \"slotchange\",\n        this.getInteractiveElements\n      );\n\n      this.contentAreaMutationObserver?.disconnect();\n    }\n  };\n\n  private setInitialFocus = () => {\n    this.sourceElement = document.activeElement as HTMLElement;\n\n    let focusedElement;\n\n    if (this.el.querySelector(this.DATA_GETS_FOCUS_SELECTOR) !== null) {\n      focusedElement = this.el.querySelector(\n        this.DATA_GETS_FOCUS_SELECTOR\n      ) as HTMLElement;\n    } else {\n      focusedElement = this.el.shadowRoot.querySelector(\n        this.DATA_GETS_FOCUS_SELECTOR\n      ) as HTMLElement;\n    }\n    if (focusedElement.tagName === this.IC_TEXT_FIELD) {\n      (focusedElement as HTMLIcTextFieldElement).setFocus();\n    } else if (focusedElement.tagName === this.IC_ACCORDION_GROUP) {\n      (focusedElement as HTMLIcAccordionGroupElement).setFocus();\n    } else if (focusedElement.tagName === this.IC_ACCORDION) {\n      (focusedElement as HTMLIcAccordionElement).setFocus();\n    } else {\n      focusedElement.focus({\n        preventScroll: this.disableHeightConstraint ? true : false,\n      });\n    }\n  };\n\n  private getFocusedElementIndex = () => {\n    for (let i = 0; i < this.interactiveElementList.length; i++) {\n      if (\n        (this.interactiveElementList[i] as HTMLElement) ===\n        (this.el.shadowRoot.activeElement || document.activeElement)\n      ) {\n        this.focusedElementIndex = i;\n      }\n    }\n  };\n\n  private closeIconClick = () => {\n    this.open = false;\n  };\n\n  private getInteractiveElements = () => {\n    this.interactiveElementList = Array.from(\n      this.el.shadowRoot.querySelectorAll(\"ic-button\")\n    );\n    const slottedInteractiveElements = Array.from(\n      this.el.querySelectorAll(\n        `a[href], button, input:not(.ic-input), textarea, select, details, [tabindex]:not([tabindex=\"-1\"]),\n          ic-button, ic-checkbox, ic-select, ic-search-bar, ic-tab-group, ic-radio-group,\n          ic-back-to-top, ic-breadcrumb, ic-chip[dismissible=\"true\"], ic-footer-link, ic-link, ic-navigation-button,\n          ic-navigation-item, ic-switch, ic-text-field, ic-accordion-group, ic-accordion, ic-date-input, ic-date-picker`\n      )\n    );\n    if (slottedInteractiveElements.length > 0) {\n      if (slottedInteractiveElements[0].slot !== this.DIALOG_CONTROLS) {\n        slottedInteractiveElements[0].setAttribute(this.DATA_GETS_FOCUS, \"\");\n      } else if (!this.destructive) {\n        slottedInteractiveElements[\n          slottedInteractiveElements.length - 1\n        ].setAttribute(this.DATA_GETS_FOCUS, \"\");\n      }\n    }\n    for (let i = 0; i < slottedInteractiveElements.length; i++) {\n      this.interactiveElementList.splice(\n        1 + i,\n        0,\n        slottedInteractiveElements[i] as HTMLElement\n      );\n    }\n  };\n\n  private getNextFocusEl = (focusedElementIndex: number) =>\n    this.interactiveElementList[focusedElementIndex];\n\n  private focusNextInteractiveElement = (shiftKey: boolean): boolean => {\n    this.getFocusedElementIndex();\n\n    if (\n      this.interactiveElementList[this.focusedElementIndex].tagName ===\n      \"IC-SEARCH-BAR\"\n    ) {\n      return false;\n    }\n\n    this.setFocusIndexBasedOnShiftKey(shiftKey);\n    this.loopNextFocusIndexIfLastElement();\n\n    let nextFocusEl = this.getNextFocusEl(this.focusedElementIndex);\n\n    const isHidden =\n      getComputedStyle(nextFocusEl).visibility === \"hidden\" ||\n      (nextFocusEl.tagName === this.IC_ACCORDION_GROUP &&\n        nextFocusEl.hasAttribute(\"single-expansion\"));\n\n    if (nextFocusEl.tagName === this.IC_TEXT_FIELD) {\n      (nextFocusEl as HTMLIcTextFieldElement).setFocus();\n    } else {\n      if (isHidden) {\n        this.setFocusIndexBasedOnShiftKey(shiftKey);\n        this.loopNextFocusIndexIfLastElement();\n\n        nextFocusEl = this.getNextFocusEl(this.focusedElementIndex);\n      }\n      if (nextFocusEl.tagName === this.IC_ACCORDION_GROUP) {\n        (nextFocusEl as HTMLIcAccordionGroupElement).setFocus();\n      } else if (nextFocusEl.tagName === this.IC_ACCORDION) {\n        (nextFocusEl as HTMLIcAccordionElement).setFocus();\n      } else {\n        (nextFocusEl as HTMLElement).focus();\n      }\n    }\n    return true;\n  };\n\n  private loopNextFocusIndexIfLastElement() {\n    if (this.focusedElementIndex > this.interactiveElementList.length - 1)\n      this.focusedElementIndex = 0;\n    else if (this.focusedElementIndex < 0) {\n      this.focusedElementIndex = this.interactiveElementList.length - 1;\n    }\n  }\n\n  private setFocusIndexBasedOnShiftKey(shiftKey: boolean) {\n    if (shiftKey) {\n      this.focusedElementIndex -= 1;\n    } else {\n      this.focusedElementIndex += 1;\n    }\n  }\n\n  private renderDialog = () => {\n    const {\n      buttons,\n      size,\n      heading,\n      label,\n      destructive,\n      dismissLabel,\n      hideCloseButton,\n    } = this;\n\n    return (\n      <dialog\n        class={{\n          [\"dialog\"]: true,\n          [`${size}`]: true,\n          [\"disable-height-constraint\"]: this.disableHeightConstraint,\n          [\"disable-width-constraint\"]: this.disableWidthConstraint,\n        }}\n        aria-labelledby=\"dialog-label dialog-heading\"\n        aria-describedby=\"dialog-alert dialog-content\"\n        ref={(el) => (this.dialogEl = el)}\n      >\n        <div class=\"heading-area\">\n          <div class=\"heading-content\">\n            <div class=\"label\">\n              <slot name=\"label\">\n                <ic-typography variant=\"label\" id=\"dialog-label\">\n                  {label}\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"heading\">\n              <slot name=\"heading\">\n                <ic-typography variant=\"h4\" id=\"dialog-heading\">\n                  {heading}\n                </ic-typography>\n              </slot>\n            </div>\n          </div>\n          {!hideCloseButton && (\n            <ic-button\n              class=\"close-icon\"\n              variant=\"icon\"\n              innerHTML={closeIcon}\n              aria-label={dismissLabel}\n              onClick={this.closeIconClick}\n              data-gets-focus={destructive || !buttons ? \"\" : null}\n            ></ic-button>\n          )}\n        </div>\n        <div class=\"content-area\">\n          {isSlotUsed(this.el, \"alert\") && <slot name=\"alert\"></slot>}\n          <div id=\"dialog-content\">\n            <slot></slot>\n          </div>\n        </div>\n        {buttons &&\n          (isSlotUsed(this.el, this.DIALOG_CONTROLS) ? (\n            <div\n              class={{\n                [this.DIALOG_CONTROLS]: true,\n              }}\n            >\n              <slot name={this.DIALOG_CONTROLS}></slot>\n            </div>\n          ) : (\n            <div\n              class={{\n                [this.DIALOG_CONTROLS]: true,\n              }}\n            >\n              <ic-button\n                variant=\"tertiary\"\n                onClick={() => this.cancelDialog()}\n                class=\"dialog-control-button\"\n                data-gets-focus={null}\n              >\n                Cancel\n              </ic-button>\n              <ic-button\n                variant={this.destructive ? \"destructive\" : \"primary\"}\n                onClick={() => this.confirmDialog()}\n                class=\"dialog-control-button\"\n                data-gets-focus=\"\"\n              >\n                Confirm\n              </ic-button>\n            </div>\n          ))}\n      </dialog>\n    );\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          [\"ic-dialog-hidden\"]: !this.dialogRendered,\n          [\"ic-dialog-fade-in\"]: this.fadeIn,\n          [\"disable-height-constraint\"]: this.disableHeightConstraint,\n          [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n        }}\n      >\n        {this.disableHeightConstraint ? (\n          <div class=\"backdrop\" ref={(el) => (this.backdropEl = el)}>\n            {this.renderDialog()}\n          </div>\n        ) : (\n          this.renderDialog()\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/core/p-fd60eef7.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,f as i,h as s,H as a,g as r}from"./p-6b5e91e2.js";import{F as n,r as o,C as l,k as c,w as d,j as h,b as u,J as p,n as b,l as f,m,i as x,K as v,x as g}from"./p-cda4aca9.js";const y='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;--ic-input-label-helpertext-padding:var(--ic-space-xxs);--border-color:var(--ic-text-field-border-neutral);--border-color-hover:var(--ic-text-field-border-neutral-hover);--border-color-pressed:var(--ic-text-field-border-neutral-pressed);--border-color-disabled:var(--ic-text-field-border-disabled);--border-color-error:var(--ic-text-field-border-error);--border-color-error-hover:var(--ic-text-field-border-error-hover);--border-color-error-pressed:var(--ic-text-field-border-error-pressed);--border-color-success:var(--ic-text-field-border-success);--border-color-success-hover:var(--ic-text-field-border-success-hover);--border-color-success-pressed:var(--ic-text-field-border-success-pressed);--border-color-warning:var(--ic-text-field-border-warning);--border-color-warning-hover:var(--ic-text-field-border-warning-hover);--border-color-warning-pressed:var(--ic-text-field-border-warning-pressed);--ic-input-label-text-color:var(--ic-text-field-label);--ic-input-label-helper-text-color:var(--ic-text-field-subtitle);--ic-input-validation-status-text-color:var(--ic-text-field-state-text);--ic-input-validation-error:var(--ic-text-field-state-icon-error);--ic-input-validation-warning-icon-color:var(\n    --ic-text-field-state-icon-warning\n  );--ic-input-validation-success-icon-color:var(\n    --ic-text-field-state-icon-success\n  );--ic-input-component-container-success-icon-inline-color:var(\n    --ic-text-field-state-icon-success\n  )}:host(.ic-text-field-disabled){--ic-input-label-text-color:var(--ic-text-field-label-disabled);--ic-input-label-helper-text-color:var(--ic-text-field-subtitle-disabled);--text-field-placeholder-color:var(\n    --ic-text-field-text-area-placeholder-text-disabled\n  )}:host(.ic-text-field-full-width){width:100%}::-moz-placeholder{color:var(\n    --text-field-placeholder-color,\n    var(--ic-text-field-placeholder-text)\n  );opacity:1}::placeholder{color:var(\n    --text-field-placeholder-color,\n    var(--ic-text-field-placeholder-text)\n  );opacity:1}input,textarea{border:0;border-radius:var(--ic-border-radius);color:var(--text-field-text-color, var(--ic-text-field-text));background-color:var(--input-bg-color, var(--ic-text-field-background));line-height:1.5rem;letter-spacing:0.005rem;width:100%;padding-right:var(--ic-space-xs);padding-left:var(--ic-space-xs);caret-color:var(\n    --text-field-typing-cursor,\n    var(--ic-text-field-typing-cursor)\n  )}textarea{min-height:var(--ic-space-lg);resize:vertical;padding-top:0.375rem}input:focus,textarea:focus{border:0;outline:0}input:disabled,textarea:disabled{color:var(\n    --text-field-disabled-text-color,\n    var(--ic-text-field-text-disabled)\n  )}input.readonly,textarea.readonly{color:var(--ic-text-field-read-only-input-text-internal)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type="number"]{-moz-appearance:textfield}textarea.no-resize{resize:none}.char-count-text{--ic-typography-color:var(--ic-text-field-character-limit);padding-right:var(--ic-space-xxxs)}:host(.ic-text-field-disabled) .char-count-text{--ic-typography-color:var(--ic-text-field-character-limit-disabled)}.no-left-pad{padding-left:0}::slotted([slot="icon"]){fill:var(--ic-text-field-text-disabled)}.has-value ::slotted([slot="icon"]){fill:var(--ic-text-field-input-internal-icon)}.char-count{margin-right:calc(-1 * var(--ic-space-xxxs))}.remaining-char-count-desc{position:absolute;left:-9999px}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration{display:none}input[type="search"].truncate-value{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media (forced-colors: active){input.readonly,textarea.readonly{color:canvastext}.has-value ::slotted([slot="icon"]){fill:currentcolor}}';let w=0;const k=[...g,"title"];const z=class{constructor(s){e(this,s);this.getValidationText=t(this,"getValidationText",7);this.icBlur=t(this,"icBlur",7);this.icChange=t(this,"icChange",7);this.icFocus=t(this,"icFocus",7);this.icInput=t(this,"icInput",7);this.icKeydown=t(this,"icKeydown",7);this.inheritedAttributes={};this.hostMutationObserver=null;this.checkChildHydration=()=>{var e;const t=(e=this.el.shadowRoot)===null||e===void 0?void 0:e.querySelector("ic-typography");if(this.hideLabel||t&&t.classList.contains("hydrated")){this.setFocus();clearInterval(this.interval)}};this.getNumberOfCharacters=e=>e!==null&&e!==undefined?e.length:0;this.getMaxValueExceeded=e=>{this.numChars=this.getNumberOfCharacters(e);if(this.type==="number"){this.minValueUnattained=e&&Number(e)<Number(this.min);this.maxValueExceeded=Number(e)>Number(this.max)}};this.getMaxCharactersReached=e=>{this.numChars=this.getNumberOfCharacters(e);this.maxCharactersReached=this.maxCharacters>0?this.numChars>=this.maxCharacters:false;if(this.maxCharactersWarning&&!this.maxCharactersReached){this.maxCharactersWarning=false}};this.onInput=e=>{this.value=e.target.value;this.icInput.emit({value:this.value})};this.onBlur=e=>{const t=e.target.value;this.numChars=t.length;this.minCharactersUnattained=this.minCharacters>0?this.numChars<this.minCharacters:false;this.icBlur.emit({value:t})};this.onFocus=e=>{this.icFocus.emit({value:e.target.value})};this.hasStatus=e=>e!==""&&!this.disabled;this.handleFormReset=()=>{this.value=this.initialValue};this.hostMutationCallback=e=>{let t=false;e.forEach((({attributeName:e,type:i,addedNodes:s,removedNodes:a})=>{if(k.includes(e)){this.inheritedAttributes[e]=this.el.getAttribute(e);t=true}else if(i==="childList"){t=n(s,a,"icon")}}));if(t){i(this)}};this.numChars=0;this.maxCharactersReached=false;this.maxCharactersWarning=false;this.minCharactersUnattained=false;this.maxValueExceeded=false;this.minValueUnattained=false;this.ariaActiveDescendant=undefined;this.ariaAutocomplete=undefined;this.ariaExpanded=undefined;this.ariaOwns=undefined;this.autocapitalize="off";this.autocomplete="off";this.autocorrect="off";this.autofocus=false;this.disabled=false;this.fullWidth=false;this.helperText="";this.hideCharCount=false;this.hideLabel=false;this.hiddenInput=true;this.inputId=`ic-text-field-input-${w++}`;this.inputmode="text";this.label=undefined;this.max=undefined;this.maxCharacters=0;this.min=undefined;this.minCharacters=0;this.name=this.inputId;this.placeholder="";this.readonly=false;this.required=false;this.resize=false;this.role=undefined;this.rows=1;this.size="medium";this.spellcheck=false;this.theme="inherit";this.truncateValue=undefined;this.type="text";this.validationInline=false;this.validationInlineInternal=false;this.validationStatus="";this.validationText="";this.debounce=0;this.value="";this.initialValue=this.value}watchDisabledHandler(){o(this.disabled,this.el)}debounceChanged(){this.icChange=l(this.icChange,this.debounce)}watchValueHandler(e){let t;if(this.maxCharacters>0){t=e.substring(0,this.maxCharacters);this.value=t}else{t=e}if(this.inputEl&&this.inputEl.value!==t){this.inputEl.value=t}this.getMaxValueExceeded(t);this.getMaxCharactersReached(t);this.icChange.emit({value:t})}connectedCallback(){this.debounceChanged()}disconnectedCallback(){var e;c(this.el,this.handleFormReset);(e=this.hostMutationObserver)===null||e===void 0?void 0:e.disconnect()}componentWillLoad(){if(this.value!==this.initialValue){this.watchValueHandler(this.value)}else if(this.maxCharacters>0){this.value=this.value.substring(0,this.maxCharacters)}this.getMaxValueExceeded(this.value);this.getMaxCharactersReached(this.value);this.inheritedAttributes=d(this.el,k);if(this.readonly){this.maxValueExceeded=false;this.minValueUnattained=false}h(this.el,this.handleFormReset);o(this.disabled,this.el)}componentDidLoad(){u([{prop:this.label,propName:"label"}],"Text Field");if(this.validationInlineInternal){this.getValidationText.emit({value:this.validationText})}this.hostMutationObserver=new MutationObserver(this.hostMutationCallback);this.hostMutationObserver.observe(this.el,{attributes:true,childList:true});if(this.autofocus&&!this.disabled&&!this.readonly){this.interval=setInterval(this.checkChildHydration,50)}}handleKeyDown(e){this.icKeydown.emit({event:e});this.maxCharactersWarning=this.maxCharactersReached}async setFocus(){var e;(e=this.inputEl)===null||e===void 0?void 0:e.focus()}render(){const{inputId:e,name:t,label:i,required:r,size:n,placeholder:o,helperText:l,hideCharCount:c,rows:d,resize:h,disabled:u,value:g,min:y,max:w,numChars:k,readonly:z,maxCharacters:C,maxCharactersWarning:I,maxCharactersReached:$,minCharacters:N,minCharactersUnattained:j,minValueUnattained:F,maxValueExceeded:L,validationStatus:M,validationText:T,validationInline:q,validationInlineInternal:V,spellcheck:H,inputmode:W,fullWidth:B,truncateValue:D,hiddenInput:K,theme:O}=this;const S=z||u;const U=L||F||j||I?I?p.Warning:p.Error:M;const _=I?`Maximum input is ${C} characters`:L?`Maximum value of ${w} exceeded`:F?`Minimum value of ${y} not met`:j?`Minimum input is ${N} characters`:T;const E=z?0:C;const J=I||L||F||U===p.Error?"assertive":"polite";const R=this.hasStatus(U)&&!(U==p.Success&&q)&&!V;const A=d>1;const G=E-k;const P=`${G} character${G===1?"":"s"} remaining.`;const Q=C>0?`${e}-char-count-desc`:"";const X=`${Q} ${b(e,l!=="",R)}`.trim();const Y=S&&!z;const Z=!!this.el.querySelector(`[slot="icon"]`)&&!Y;const ee=`${U===p.Error}`;K?f(true,this.el,t,g,S):m(this.el);return s(a,{class:{"ic-text-field-full-width":B,[`ic-theme-${O}`]:O!=="inherit","ic-text-field-disabled":S}},s("ic-input-container",{readonly:z,disabled:S},!this.hideLabel&&s("ic-input-label",{for:e,label:i,helperText:l,required:r,disabled:Y,readonly:z}),s("ic-input-component-container",{size:n,validationStatus:U,multiLine:A,disabled:S,readonly:z,validationInline:q,fullWidth:B},Z&&s("span",{class:{readonly:z,"has-value":this.getNumberOfCharacters(g)>0},slot:"left-icon"},s("slot",{name:"icon"})),!A?s("input",Object.assign({id:e,name:t,ref:e=>this.inputEl=e,type:this.type,min:y,max:w,value:g,class:{"no-left-pad":!Z&&z,readonly:z,"truncate-value":D},placeholder:o?o:"",required:r,disabled:S,readonly:z,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus,"aria-label":i,"aria-describedby":X,"aria-invalid":ee,"aria-activedescendant":this.ariaActiveDescendant,"aria-expanded":this.ariaExpanded,"aria-owns":this.ariaOwns,autocomplete:this.autocomplete,autocapitalize:this.autocapitalize,spellcheck:H,inputmode:W,role:this.role,maxlength:$?C:null,minlength:j?N:null},this.inheritedAttributes)):s("textarea",Object.assign({id:e,class:{"no-resize":h===false||z,"no-left-pad":!Z&&z,readonly:z},name:t,ref:e=>this.inputEl=e,value:g,rows:d,required:r,disabled:S,placeholder:o?o:"",readonly:z,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus,"aria-label":i,"aria-describedby":X,"aria-invalid":ee,autocapitalize:this.autocapitalize,spellcheck:H,inputmode:W,maxlength:$?C:null,minlength:j?N:null},this.inheritedAttributes)),x(this.el,"clear-button")&&s("slot",{name:"clear-button"}),x(this.el,"search-submit-button")&&s("slot",{name:"search-submit-button"})),x(this.el,"menu")&&s("slot",{name:"menu"}),(!v(M)||!v(T)||E>0||L||I||j||F)&&!V&&s("ic-input-validation",{status:this.hasStatus(U)===false||U===p.Success&&q||V?"":U,message:R?_:"",ariaLiveMode:J,for:e,fullWidth:B},!z&&E>0&&s("div",{slot:"validation-message-adornment"},!c&&s("ic-typography",{variant:"caption",class:"char-count-text"},s("span",{class:"char-count"},k,"/",E)),s("span",{class:"remaining-char-count-desc","aria-live":"polite"},P),s("span",{hidden:true,id:Q},"Field can contain a maximum of ",E," characters.")))))}get el(){return r(this)}static get watchers(){return{disabled:["watchDisabledHandler"],debounce:["debounceChanged"],value:["watchValueHandler"]}}};z.style=y;export{z as ic_text_field};
-//# sourceMappingURL=p-fd60eef7.entry.js.map

package/dist/core/p-fd60eef7.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icTextFieldCss","inputIds","MUTABLE_ATTRIBUTES","IC_INHERITED_ARIA","TextField","this","inheritedAttributes","hostMutationObserver","checkChildHydration","el","_a","shadowRoot","querySelector","hideLabel","classList","contains","setFocus","clearInterval","interval","getNumberOfCharacters","value","undefined","length","getMaxValueExceeded","numChars","type","minValueUnattained","Number","min","maxValueExceeded","max","getMaxCharactersReached","maxCharactersReached","maxCharacters","maxCharactersWarning","onInput","ev","target","icInput","emit","onBlur","minCharactersUnattained","minCharacters","icBlur","onFocus","icFocus","hasStatus","status","disabled","handleFormReset","initialValue","hostMutationCallback","mutationList","forceComponentUpdate","forEach","attributeName","addedNodes","removedNodes","includes","getAttribute","checkSlotInChildMutations","forceUpdate","inputId","watchDisabledHandler","removeDisabledFalse","debounceChanged","icChange","debounceEvent","debounce","watchValueHandler","newValue","substring","inputEl","connectedCallback","disconnectedCallback","removeFormResetListener","disconnect","componentWillLoad","inheritAttributes","readonly","addFormResetListener","componentDidLoad","onComponentRequiredPropUndefined","prop","label","propName","validationInlineInternal","getValidationText","validationText","MutationObserver","observe","attributes","childList","autofocus","setInterval","handleKeyDown","icKeydown","event","focus","render","name","required","size","placeholder","helperText","hideCharCount","rows","resize","validationStatus","validationInline","spellcheck","inputmode","fullWidth","truncateValue","hiddenInput","theme","disabledMode","currentStatus","IcInformationStatus","Warning","Error","currentValidationText","maxNumChars","messageAriaLive","showStatusText","Success","multiline","charsRemaining","hiddenRemainingCharCountDesc","hiddenCharCountDescId","describedBy","getInputDescribedByText","trim","disabledText","showLeftIcon","invalid","renderHiddenInput","removeHiddenInput","h","Host","class","for","multiLine","slot","Object","assign","id","ref","ariaActiveDescendant","ariaExpanded","ariaOwns","autocomplete","autocapitalize","role","maxlength","minlength","isSlotUsed","isEmptyString","message","ariaLiveMode","variant","hidden"],"sources":["src/components/ic-text-field/ic-text-field.css?tag=ic-text-field&encapsulation=shadow","src/components/ic-text-field/ic-text-field.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  /**\n   * @prop --input-width: Width of the input field\n   */\n  display: block;\n\n  --ic-input-label-helpertext-padding: var(--ic-space-xxs);\n  --border-color: var(--ic-text-field-border-neutral);\n  --border-color-hover: var(--ic-text-field-border-neutral-hover);\n  --border-color-pressed: var(--ic-text-field-border-neutral-pressed);\n  --border-color-disabled: var(--ic-text-field-border-disabled);\n  --border-color-error: var(--ic-text-field-border-error);\n  --border-color-error-hover: var(--ic-text-field-border-error-hover);\n  --border-color-error-pressed: var(--ic-text-field-border-error-pressed);\n  --border-color-success: var(--ic-text-field-border-success);\n  --border-color-success-hover: var(--ic-text-field-border-success-hover);\n  --border-color-success-pressed: var(--ic-text-field-border-success-pressed);\n  --border-color-warning: var(--ic-text-field-border-warning);\n  --border-color-warning-hover: var(--ic-text-field-border-warning-hover);\n  --border-color-warning-pressed: var(--ic-text-field-border-warning-pressed);\n  --ic-input-label-text-color: var(--ic-text-field-label);\n  --ic-input-label-helper-text-color: var(--ic-text-field-subtitle);\n  --ic-input-validation-status-text-color: var(--ic-text-field-state-text);\n  --ic-input-validation-error: var(--ic-text-field-state-icon-error);\n  --ic-input-validation-warning-icon-color: var(\n    --ic-text-field-state-icon-warning\n  );\n  --ic-input-validation-success-icon-color: var(\n    --ic-text-field-state-icon-success\n  );\n  --ic-input-component-container-success-icon-inline-color: var(\n    --ic-text-field-state-icon-success\n  );\n}\n\n:host(.ic-text-field-disabled) {\n  --ic-input-label-text-color: var(--ic-text-field-label-disabled);\n  --ic-input-label-helper-text-color: var(--ic-text-field-subtitle-disabled);\n  --text-field-placeholder-color: var(\n    --ic-text-field-text-area-placeholder-text-disabled\n  );\n}\n\n:host(.ic-text-field-full-width) {\n  width: 100%;\n}\n\n::placeholder {\n  color: var(\n    --text-field-placeholder-color,\n    var(--ic-text-field-placeholder-text)\n  );\n  opacity: 1;\n}\n\ninput,\ntextarea {\n  border: 0;\n  border-radius: var(--ic-border-radius);\n  color: var(--text-field-text-color, var(--ic-text-field-text));\n  background-color: var(--input-bg-color, var(--ic-text-field-background));\n  line-height: 1.5rem;\n  letter-spacing: 0.005rem;\n  width: 100%;\n  padding-right: var(--ic-space-xs);\n  padding-left: var(--ic-space-xs);\n  caret-color: var(\n    --text-field-typing-cursor,\n    var(--ic-text-field-typing-cursor)\n  );\n}\n\ntextarea {\n  min-height: var(--ic-space-lg);\n  resize: vertical;\n  padding-top: 0.375rem;\n}\n\ninput:focus,\ntextarea:focus {\n  border: 0;\n  outline: 0;\n}\n\ninput:disabled,\ntextarea:disabled {\n  color: var(\n    --text-field-disabled-text-color,\n    var(--ic-text-field-text-disabled)\n  );\n}\n\ninput.readonly,\ntextarea.readonly {\n  color: var(--ic-text-field-read-only-input-text-internal);\n}\n\n/* Chrome, Safari, Edge */\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n/* Firefox */\ninput[type=\"number\"] {\n  -moz-appearance: textfield;\n}\n\ntextarea.no-resize {\n  resize: none;\n}\n\n.char-count-text {\n  --ic-typography-color: var(--ic-text-field-character-limit);\n\n  padding-right: var(--ic-space-xxxs);\n}\n\n:host(.ic-text-field-disabled) .char-count-text {\n  --ic-typography-color: var(--ic-text-field-character-limit-disabled);\n}\n\n.no-left-pad {\n  padding-left: 0;\n}\n\n::slotted([slot=\"icon\"]) {\n  fill: var(--ic-text-field-text-disabled);\n}\n\n.has-value ::slotted([slot=\"icon\"]) {\n  fill: var(--ic-text-field-input-internal-icon);\n}\n\n.char-count {\n  margin-right: calc(-1 * var(--ic-space-xxxs));\n}\n\n.remaining-char-count-desc {\n  position: absolute;\n  left: -9999px;\n}\n\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-decoration,\ninput[type=\"search\"]::-webkit-search-results-button,\ninput[type=\"search\"]::-webkit-search-results-decoration {\n  display: none;\n}\n\ninput[type=\"search\"].truncate-value {\n  width: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n@media (forced-colors: active) {\n  input.readonly,\n  textarea.readonly {\n    color: canvastext;\n  }\n\n  .has-value ::slotted([slot=\"icon\"]) {\n    fill: currentcolor;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  Method,\n  h,\n  forceUpdate,\n} from \"@stencil/core\";\nimport {\n  IcInformationStatus,\n  IcAutocompleteTypes,\n  IcAutocorrectStates,\n  IcInformationStatusOrEmpty,\n  IcValueEventDetail,\n  IcSizesNoLarge,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport {\n  inheritAttributes,\n  debounceEvent,\n  getInputDescribedByText,\n  renderHiddenInput,\n  isEmptyString,\n  onComponentRequiredPropUndefined,\n  addFormResetListener,\n  removeFormResetListener,\n  isSlotUsed,\n  removeDisabledFalse,\n  checkSlotInChildMutations,\n  removeHiddenInput,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcAriaAutocompleteTypes,\n  IcTextFieldInputModes,\n  IcTextFieldTypes,\n} from \"./ic-text-field.types\";\n\nlet inputIds = 0;\nconst MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, \"title\"];\n\n/**\n * @slot icon - Content will be placed to the left of the text input.\n */\n@Component({\n  tag: \"ic-text-field\",\n  styleUrl: \"ic-text-field.css\",\n  shadow: true,\n})\nexport class TextField {\n  private inheritedAttributes: { [k: string]: string } = {};\n  private inputEl: HTMLInputElement | HTMLTextAreaElement;\n  private hostMutationObserver: MutationObserver = null;\n  private interval: ReturnType<typeof setInterval>;\n\n  @Element() el: HTMLIcTextFieldElement;\n\n  @State() numChars: number = 0;\n  @State() maxCharactersReached: boolean = false;\n  @State() maxCharactersWarning: boolean = false;\n  @State() minCharactersUnattained: boolean = false;\n  @State() maxValueExceeded: boolean = false;\n  @State() minValueUnattained: boolean = false;\n\n  /**\n   * @slot clear-button - an ic-button clear component will render as an end adornment to the input.\n   * @slot search-submit-button - an ic-button search submit component will render as an end adornment to the input.\n   * @slot menu - an ic-menu component will appear below the input.\n   */\n\n  /**\n   * @internal The active element when focus is on the ic-menu items.\n   */\n  @Prop() ariaActiveDescendant?: string;\n\n  /**\n   * @internal Used to identify whether inputting any text triggers more predictions\n   */\n  @Prop() ariaAutocomplete: IcAriaAutocompleteTypes = undefined;\n\n  /**\n   * @internal Used to identify if the slotted menu is rendered\n   */\n  @Prop() ariaExpanded: string;\n\n  /**\n   * @internal Used to identify any related child component\n   */\n  @Prop() ariaOwns: string;\n\n  /**\n   * The automatic capitalisation of the text value as it is entered/edited by the user.\n   * Available options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\".\n   */\n  @Prop() autocapitalize = \"off\";\n\n  /**\n   * The state of autocompletion the browser can apply on the text value.\n   */\n  @Prop() autocomplete: IcAutocompleteTypes = \"off\";\n\n  /**\n   * The state of autocorrection the browser can apply when the user is entering/editing the text value.\n   */\n  @Prop() autocorrect: IcAutocorrectStates = \"off\";\n\n  /**\n   * If `true`, the form control will have input focus when the page loads.\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * Specify whether the text field fills the full width of the container.\n   * If `true`, this overrides the --input-width CSS variable.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * If `true`, the character count which is displayed when `maxCharacters` is set will be visually hidden.\n   */\n  @Prop() hideCharCount: boolean = false;\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * @internal If `true`, the hidden form input will stop rendering for form submission.\n   */\n  @Prop() hiddenInput: boolean = true;\n\n  /**\n   * The ID for the input.\n   */\n  @Prop() inputId?: string = `ic-text-field-input-${inputIds++}`;\n\n  /**\n   * A hint to the browser for which keyboard to display.\n   * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n   * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n   */\n  @Prop() inputmode: IcTextFieldInputModes = \"text\";\n\n  /**\n   * The label for the input.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The maximum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of max value in `helperText` or `label`)\n   */\n  @Prop() max: string | number = undefined;\n\n  /**\n   * The count of characters in the field. Will display a warning if the bound is reached. (NOTE: If the value of the text field has been set using the `value` prop, it will be truncated to this number of characters)\n   */\n  @Prop() maxCharacters: number = 0;\n\n  /**\n   * The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)\n   */\n  @Prop() min: string | number = undefined;\n\n  /**\n   * The minimum number of characters that can be entered in the field.\n   */\n  @Prop() minCharacters: number = 0;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * The placeholder value to be displayed.\n   */\n  @Prop() placeholder: string = \"\";\n\n  /**\n   * If `true`, the read only state will be set.\n   */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /**\n   * If `true`, the input will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If `true`, the multiline text area will be resizeable.\n   */\n  @Prop() resize: boolean = false;\n\n  /**\n   * @internal Used to set the role if not default textbox;\n   */\n  @Prop() role: string;\n\n  /**\n   * The number of rows to transform the text field into a text area with a specific height.\n   */\n  @Prop() rows: number = 1;\n\n  /**\n   * The size of the text field component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"medium\";\n\n  /**\n   * If `true`, the value of the text field will have its spelling and grammar checked.\n   */\n  @Prop() spellcheck: boolean = false;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme: IcThemeMode = \"inherit\";\n\n  /**\n   * @internal If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container.\n   */\n  @Prop() truncateValue?: boolean;\n\n  /**\n   * The type of control to display. The default type is text.\n   */\n  @Prop() type: IcTextFieldTypes = \"text\";\n\n  /**\n   * If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.\n   */\n  @Prop() validationInline: boolean = false;\n\n  /**\n   *  @internal If `true`, the validation will display inline.\n   */\n  @Prop() validationInlineInternal: boolean = false;\n\n  /**\n   * The validation state - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n  /**\n   * The validation state - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationText: string = \"\";\n\n  /**\n   * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n   */\n  @Prop() debounce: number = 0;\n\n  @Watch(\"debounce\")\n  private debounceChanged() {\n    this.icChange = debounceEvent(this.icChange, this.debounce);\n  }\n\n  /**\n   * The value of the text field.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = \"\";\n  @State() initialValue = this.value;\n\n  @Watch(\"value\")\n  private watchValueHandler(newValue: string): void {\n    let value;\n\n    if (this.maxCharacters > 0) {\n      value = newValue.substring(0, this.maxCharacters);\n      this.value = value;\n    } else {\n      value = newValue;\n    }\n\n    if (this.inputEl && this.inputEl.value !== value) {\n      this.inputEl.value = value;\n    }\n\n    this.getMaxValueExceeded(value);\n\n    this.getMaxCharactersReached(value);\n\n    this.icChange.emit({ value });\n  }\n\n  /**\n   * @internal Emitted when the validationInlineInternal is `true`\n   */\n  @Event() getValidationText: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * Emitted when input loses focus.\n   */\n  @Event() icBlur: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * Emitted when input gains focus.\n   */\n  @Event() icFocus: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() icInput: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * Emitted when a keydown event occurred.\n   */\n  @Event() icKeydown: EventEmitter<{ event: KeyboardEvent }>;\n\n  connectedCallback(): void {\n    this.debounceChanged();\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    if (this.value !== this.initialValue) {\n      this.watchValueHandler(this.value);\n    } else if (this.maxCharacters > 0) {\n      this.value = this.value.substring(0, this.maxCharacters);\n    }\n\n    this.getMaxValueExceeded(this.value);\n    this.getMaxCharactersReached(this.value);\n\n    this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);\n\n    if (this.readonly) {\n      this.maxValueExceeded = false;\n      this.minValueUnattained = false;\n    }\n\n    addFormResetListener(this.el, this.handleFormReset);\n\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Text Field\"\n    );\n    if (this.validationInlineInternal) {\n      this.getValidationText.emit({ value: this.validationText });\n    }\n\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      attributes: true,\n      childList: true,\n    });\n\n    if (this.autofocus && !this.disabled && !this.readonly) {\n      this.interval = setInterval(this.checkChildHydration, 50);\n    }\n  }\n\n  private checkChildHydration = () => {\n    const el = this.el.shadowRoot?.querySelector(\"ic-typography\");\n    if (this.hideLabel || (el && el.classList.contains(\"hydrated\"))) {\n      this.setFocus();\n      clearInterval(this.interval);\n    }\n  };\n\n  @Listen(\"keydown\", {})\n  handleKeyDown(ev: KeyboardEvent): void {\n    this.icKeydown.emit({ event: ev });\n    this.maxCharactersWarning = this.maxCharactersReached;\n  }\n\n  /**\n   * Sets focus on the native `input`.\n   */\n\n  @Method()\n  async setFocus() {\n    this.inputEl?.focus();\n  }\n\n  private getNumberOfCharacters = (value: string) =>\n    value !== null && value !== undefined ? value.length : 0;\n\n  private getMaxValueExceeded = (value: string) => {\n    this.numChars = this.getNumberOfCharacters(value);\n\n    if (this.type === \"number\") {\n      this.minValueUnattained = value && Number(value) < Number(this.min);\n      this.maxValueExceeded = Number(value) > Number(this.max);\n    }\n  };\n\n  private getMaxCharactersReached = (value: string) => {\n    this.numChars = this.getNumberOfCharacters(value);\n\n    this.maxCharactersReached =\n      this.maxCharacters > 0 ? this.numChars >= this.maxCharacters : false;\n\n    if (this.maxCharactersWarning && !this.maxCharactersReached) {\n      this.maxCharactersWarning = false;\n    }\n  };\n\n  private onInput = (ev: Event) => {\n    this.value = (ev.target as HTMLInputElement).value;\n    this.icInput.emit({ value: this.value });\n  };\n\n  private onBlur = (ev: Event) => {\n    const value = (ev.target as HTMLInputElement).value;\n    this.numChars = value.length;\n    this.minCharactersUnattained =\n      this.minCharacters > 0 ? this.numChars < this.minCharacters : false;\n    this.icBlur.emit({ value: value });\n  };\n\n  private onFocus = (ev: Event) => {\n    this.icFocus.emit({ value: (ev.target as HTMLInputElement).value });\n  };\n\n  private hasStatus = (status: IcInformationStatusOrEmpty) =>\n    status !== \"\" && !this.disabled;\n\n  private handleFormReset = (): void => {\n    this.value = this.initialValue;\n  };\n\n  // triggered when attributes of host element change\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(\n      ({ attributeName, type, addedNodes, removedNodes }) => {\n        if (MUTABLE_ATTRIBUTES.includes(attributeName)) {\n          this.inheritedAttributes[attributeName] =\n            this.el.getAttribute(attributeName);\n          forceComponentUpdate = true;\n        } else if (type === \"childList\") {\n          forceComponentUpdate = checkSlotInChildMutations(\n            addedNodes,\n            removedNodes,\n            \"icon\"\n          );\n        }\n      }\n    );\n    if (forceComponentUpdate) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const {\n      inputId,\n      name,\n      label,\n      required,\n      size,\n      placeholder,\n      helperText,\n      hideCharCount,\n      rows,\n      resize,\n      disabled,\n      value,\n      min,\n      max,\n      numChars,\n      readonly,\n      maxCharacters,\n      maxCharactersWarning,\n      maxCharactersReached,\n      minCharacters,\n      minCharactersUnattained,\n      minValueUnattained,\n      maxValueExceeded,\n      validationStatus,\n      validationText,\n      validationInline,\n      validationInlineInternal,\n      spellcheck,\n      inputmode,\n      fullWidth,\n      truncateValue,\n      hiddenInput,\n      theme,\n    } = this;\n\n    const disabledMode = readonly || disabled;\n\n    const currentStatus =\n      maxValueExceeded ||\n      minValueUnattained ||\n      minCharactersUnattained ||\n      maxCharactersWarning\n        ? maxCharactersWarning\n          ? IcInformationStatus.Warning\n          : IcInformationStatus.Error\n        : validationStatus;\n\n    const currentValidationText = maxCharactersWarning\n      ? `Maximum input is ${maxCharacters} characters`\n      : maxValueExceeded\n      ? `Maximum value of ${max} exceeded`\n      : minValueUnattained\n      ? `Minimum value of ${min} not met`\n      : minCharactersUnattained\n      ? `Minimum input is ${minCharacters} characters`\n      : validationText;\n\n    const maxNumChars = readonly ? 0 : maxCharacters;\n    const messageAriaLive =\n      maxCharactersWarning ||\n      maxValueExceeded ||\n      minValueUnattained ||\n      currentStatus === IcInformationStatus.Error\n        ? \"assertive\"\n        : \"polite\";\n\n    const showStatusText =\n      this.hasStatus(currentStatus) &&\n      !(currentStatus == IcInformationStatus.Success && validationInline) &&\n      !validationInlineInternal;\n\n    const multiline = rows > 1;\n\n    const charsRemaining = maxNumChars - numChars;\n    const hiddenRemainingCharCountDesc = `${charsRemaining} character${\n      charsRemaining === 1 ? \"\" : \"s\"\n    } remaining.`;\n    const hiddenCharCountDescId =\n      maxCharacters > 0 ? `${inputId}-char-count-desc` : \"\";\n\n    const describedBy = `${hiddenCharCountDescId} ${getInputDescribedByText(\n      inputId,\n      helperText !== \"\",\n      showStatusText\n    )}`.trim();\n\n    const disabledText = disabledMode && !readonly;\n    const showLeftIcon =\n      !!this.el.querySelector(`[slot=\"icon\"]`) && !disabledText;\n\n    const invalid = `${currentStatus === IcInformationStatus.Error}`;\n\n    hiddenInput\n      ? renderHiddenInput(true, this.el, name, value, disabledMode)\n      : removeHiddenInput(this.el);\n\n    return (\n      <Host\n        class={{\n          \"ic-text-field-full-width\": fullWidth,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          \"ic-text-field-disabled\": disabledMode,\n        }}\n      >\n        <ic-input-container readonly={readonly} disabled={disabledMode}>\n          {!this.hideLabel && (\n            <ic-input-label\n              for={inputId}\n              label={label}\n              helperText={helperText}\n              required={required}\n              disabled={disabledText}\n              readonly={readonly}\n            ></ic-input-label>\n          )}\n\n          <ic-input-component-container\n            size={size}\n            validationStatus={currentStatus}\n            multiLine={multiline}\n            disabled={disabledMode}\n            readonly={readonly}\n            validationInline={validationInline}\n            fullWidth={fullWidth}\n          >\n            {showLeftIcon && (\n              <span\n                class={{\n                  readonly,\n                  \"has-value\": this.getNumberOfCharacters(value) > 0,\n                }}\n                slot=\"left-icon\"\n              >\n                <slot name=\"icon\" />\n              </span>\n            )}\n\n            {!multiline ? (\n              <input\n                id={inputId}\n                name={name}\n                ref={(el) => (this.inputEl = el as HTMLInputElement)}\n                type={this.type}\n                min={min}\n                max={max}\n                value={value}\n                class={{\n                  \"no-left-pad\": !showLeftIcon && readonly,\n                  readonly,\n                  \"truncate-value\": truncateValue,\n                }}\n                placeholder={placeholder ? placeholder : \"\"}\n                required={required}\n                disabled={disabledMode}\n                readonly={readonly}\n                onInput={this.onInput}\n                onBlur={this.onBlur}\n                onFocus={this.onFocus}\n                aria-label={label}\n                aria-describedby={describedBy}\n                aria-invalid={invalid}\n                aria-activedescendant={this.ariaActiveDescendant}\n                aria-expanded={this.ariaExpanded}\n                aria-owns={this.ariaOwns}\n                autocomplete={this.autocomplete}\n                autocapitalize={this.autocapitalize}\n                spellcheck={spellcheck}\n                inputmode={inputmode}\n                role={this.role}\n                maxlength={maxCharactersReached ? maxCharacters : null}\n                minlength={minCharactersUnattained ? minCharacters : null}\n                {...this.inheritedAttributes}\n              ></input>\n            ) : (\n              <textarea\n                id={inputId}\n                class={{\n                  \"no-resize\": resize === false || readonly,\n                  \"no-left-pad\": !showLeftIcon && readonly,\n                  readonly,\n                }}\n                name={name}\n                ref={(el) => (this.inputEl = el as HTMLTextAreaElement)}\n                value={value}\n                rows={rows}\n                required={required}\n                disabled={disabledMode}\n                placeholder={placeholder ? placeholder : \"\"}\n                readonly={readonly}\n                onInput={this.onInput}\n                onBlur={this.onBlur}\n                onFocus={this.onFocus}\n                aria-label={label}\n                aria-describedby={describedBy}\n                aria-invalid={invalid}\n                autocapitalize={this.autocapitalize}\n                spellcheck={spellcheck}\n                inputmode={inputmode}\n                maxlength={maxCharactersReached ? maxCharacters : null}\n                minlength={minCharactersUnattained ? minCharacters : null}\n                {...this.inheritedAttributes}\n              ></textarea>\n            )}\n            {isSlotUsed(this.el, \"clear-button\") && (\n              <slot name=\"clear-button\"></slot>\n            )}\n            {isSlotUsed(this.el, \"search-submit-button\") && (\n              <slot name=\"search-submit-button\"></slot>\n            )}\n          </ic-input-component-container>\n          {isSlotUsed(this.el, \"menu\") && <slot name=\"menu\"></slot>}\n          {(!isEmptyString(validationStatus) ||\n            !isEmptyString(validationText) ||\n            maxNumChars > 0 ||\n            maxValueExceeded ||\n            maxCharactersWarning ||\n            minCharactersUnattained ||\n            minValueUnattained) &&\n            !validationInlineInternal && (\n              <ic-input-validation\n                status={\n                  this.hasStatus(currentStatus) === false ||\n                  (currentStatus === IcInformationStatus.Success &&\n                    validationInline) ||\n                  validationInlineInternal\n                    ? \"\"\n                    : currentStatus\n                }\n                message={showStatusText ? currentValidationText : \"\"}\n                ariaLiveMode={messageAriaLive}\n                for={inputId}\n                fullWidth={fullWidth}\n              >\n                {!readonly && maxNumChars > 0 && (\n                  <div slot=\"validation-message-adornment\">\n                    {!hideCharCount && (\n                      <ic-typography variant=\"caption\" class=\"char-count-text\">\n                        <span class=\"char-count\">\n                          {numChars}/{maxNumChars}\n                        </span>\n                      </ic-typography>\n                    )}\n                    <span class=\"remaining-char-count-desc\" aria-live=\"polite\">\n                      {hiddenRemainingCharCountDesc}\n                    </span>\n                    <span hidden={true} id={hiddenCharCountDescId}>\n                      Field can contain a maximum of {maxNumChars} characters.\n                    </span>\n                  </div>\n                )}\n              </ic-input-validation>\n            )}\n        </ic-input-container>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/core/p-fd9f3fd0.entry.js

@@ -1,2 +0,0 @@
-import{r as o,h as t,H as r}from"./p-6b5e91e2.js";import{b as i}from"./p-cda4aca9.js";const e=":host{display:block;margin-bottom:var(--ic-space-md);border-bottom:var(--ic-space-1px) solid var(--ic-tab-bottom-border)}:host(.ic-tab-group-monochrome){border-bottom:var(--ic-space-1px) solid\n    var(--ic-tab-bottom-border-monochrome)}:host(.ic-tab-group-inline){margin-bottom:0;border-bottom:none}.tabs-container{display:flex;flex-direction:row}.tabs-container::-webkit-scrollbar{display:none}:host ic-horizontal-scroll{--splitter-color:var(--ic-tab-divider)}:host(.ic-tab-group-monochrome) ic-horizontal-scroll{--splitter-color:var(--ic-tab-divider-monochrome)}";const a=class{constructor(t){o(this,t);this.inline=false;this.label=undefined;this.monochrome=false;this.theme="inherit"}componentDidLoad(){i([{prop:this.label,propName:"label"}],"Tab Group")}render(){const{theme:o,label:i,monochrome:e}=this;return t(r,{role:"tablist","aria-label":i,class:{["ic-tab-group-inline"]:this.inline,[`ic-theme-${o}`]:o!=="inherit",["ic-tab-group-monochrome"]:e}},t("ic-horizontal-scroll",{theme:this.theme,"focus-trigger":"tabFocus",monochrome:this.monochrome},t("div",{class:"tabs-container"},t("slot",null))))}static get delegatesFocus(){return true}};a.style=e;export{a as ic_tab_group};
-//# sourceMappingURL=p-fd9f3fd0.entry.js.map

package/dist/core/p-fd9f3fd0.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icTabGroupCss","TabGroup","componentDidLoad","onComponentRequiredPropUndefined","prop","this","label","propName","render","theme","monochrome","h","Host","role","class","inline"],"sources":["src/components/ic-tab-group/ic-tab-group.css?tag=ic-tab-group&encapsulation=shadow","src/components/ic-tab-group/ic-tab-group.tsx"],"sourcesContent":[":host {\n  display: block;\n  margin-bottom: var(--ic-space-md);\n  border-bottom: var(--ic-space-1px) solid var(--ic-tab-bottom-border);\n}\n\n:host(.ic-tab-group-monochrome) {\n  border-bottom: var(--ic-space-1px) solid\n    var(--ic-tab-bottom-border-monochrome);\n}\n\n:host(.ic-tab-group-inline) {\n  margin-bottom: 0;\n  border-bottom: none;\n}\n\n.tabs-container {\n  display: flex;\n  flex-direction: row;\n}\n\n.tabs-container::-webkit-scrollbar {\n  display: none;\n}\n\n:host ic-horizontal-scroll {\n  --splitter-color: var(--ic-tab-divider);\n}\n\n:host(.ic-tab-group-monochrome) ic-horizontal-scroll {\n  --splitter-color: var(--ic-tab-divider-monochrome);\n}\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-tab-group\",\n  styleUrl: \"ic-tab-group.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class TabGroup {\n  /**\n   * If `true`, the tabs and tab panels will be positioned separately.\n   */\n  @Prop({ reflect: true }) inline?: boolean = false;\n\n  /**\n   * The label to describe the purpose of the set of tabs to screen reader users.\n   */\n  @Prop() label!: string;\n\n  /** @internal Determines whether black variant of the tabs should be displayed. */\n  @Prop() monochrome?: boolean = false;\n\n  /** @internal Determines whether the light or dark variant of the tabs should be displayed. */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Tab Group\"\n    );\n  }\n\n  render() {\n    const { theme, label, monochrome } = this;\n\n    return (\n      <Host\n        role=\"tablist\"\n        aria-label={label}\n        class={{\n          [\"ic-tab-group-inline\"]: this.inline,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [\"ic-tab-group-monochrome\"]: monochrome,\n        }}\n      >\n        <ic-horizontal-scroll\n          theme={this.theme}\n          focus-trigger=\"tabFocus\"\n          monochrome={this.monochrome}\n        >\n          <div class=\"tabs-container\">\n            <slot></slot>\n          </div>\n        </ic-horizontal-scroll>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAgB,wjB,MCYTC,EAAQ,M,qCAIyB,M,qCAQb,M,WAGD,S,CAE9B,gBAAAC,GACEC,EACE,CAAC,CAAEC,KAAMC,KAAKC,MAAOC,SAAU,UAC/B,Y,CAIJ,MAAAC,GACE,MAAMC,MAAEA,EAAKH,MAAEA,EAAKI,WAAEA,GAAeL,KAErC,OACEM,EAACC,EAAI,CACHC,KAAK,UAAS,aACFP,EACZQ,MAAO,CACL,CAAC,uBAAwBT,KAAKU,OAC9B,CAAC,YAAYN,KAAUA,IAAU,UACjC,CAAC,2BAA4BC,IAG/BC,EAAA,wBACEF,MAAOJ,KAAKI,MAAK,gBACH,WACdC,WAAYL,KAAKK,YAEjBC,EAAA,OAAKG,MAAM,kBACTH,EAAA,e"}