@oiz/stzh-components 2.8.0-alpha → 2.8.0-beta

package/dist/stzh-components/{p-08050ce2.system.entry.js.map → p-62ca262c.system.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stzhDialogCss","keyCode","ESC","CLASS_BODY_OPEN","activeDialog","dialogCounter","StzhDialog","exports","this","handleDialogClick","event","target","dataset","stzhDialogClose","_this","hide","closest","handleCloseButtonClick","init","actions","element","querySelector","setPropsIfNull","variant","withBorder","class_1","prototype","handleOutsideClick","open","closeOnBackdropClick","isClickOutside","dialogElement","contains","handleKeydown","closeOnEscapeKey","handleOpenTriggerClick","stzhDialogTrigger","id","show","stzhOpen","emit","component","stzhClose","getSiblings","parentElement","Array","from","children","filter","child","disableSiblings","forEach","sibling","setAttribute","enableSiblings","removeAttribute","dialogShown","document","body","classList","add","trap","activate","dialogHidden","remove","deactivate","componentWillLoad","concat","localization","_a","fetchTranslations","_b","sent","componentDidRender","componentDidUpdate","updateContainerElements","componentDidLoad","createFocusTrap","Object","assign","fallbackFocus","createBaseFocusTrapOptions","connectedCallback","stay","appendChild","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","h","Host","class","heading","hideClose","size","ref","el","tabindex","role","a11yRole","a11yLabel","onClick","level","name","close","type","closeAnalyticsId"],"sources":["src/components/stzh-dialog/stzh-dialog.scss?tag=stzh-dialog&encapsulation=scoped","src/components/stzh-dialog/stzh-dialog.tsx"],"sourcesContent":[":host {\n  --width: 100%;\n  --padding: #{spaceCurveValue('large')};\n  --close-color: #{$baseLeadColor};\n  --backdrop-opacity: 0.8;\n\n  @include mq($from: small) {\n    --width: 536px;\n    --padding: #{spaceCurveValue('large', 'small')};\n  }\n\n  @include mq($from: medium) {\n    --width: 782px;\n    --padding: #{spaceCurveValue('large', 'medium')};\n  }\n\n  @include mq($from: large) {\n    --width: 832px;\n    --padding: #{spaceCurveValue('large', 'large')};\n  }\n\n  &[size=\"small\"] {\n    @include mq($from: small) {\n      --width: 395px;\n    }\n\n    @include mq($from: medium) {\n      --width: 460px;\n    }\n\n    @include mq($from: large) {\n      --width: 512px;\n    }\n  }\n}\n\n.stzh-dialog {\n  z-index: $zIndexDialog;\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: stretch;\n\n  &__content {\n    z-index: 2;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    flex-grow: 1;\n    overflow: auto;\n  }\n\n  &__dialog {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    margin: auto;\n    border: none;\n    background-color: $colorWhite;\n    width: var(--width);\n    max-width: 100%;\n    box-shadow: $boxShadowOverlay;\n    height: 100vh;\n    max-height: 100vh;\n    // overflow: visible;\n    overflow: hidden;\n    outline: none;\n\n    @include mq($from: small) {\n      height: auto;\n    }\n  }\n\n  &__backdrop {\n    z-index: 1;\n\t\tposition: absolute;\n\t\ttop: 0px;\n\t\tleft: 0px;\n\t\twidth: 100%;\n    height: 100%;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\ttext-align: center;\n    background-color: $colorPrimary;\n    opacity: var(--backdrop-opacity);\n  }\n\n  &__heading {\n    padding: var(--padding);\n    padding-bottom: 0;\n  }\n\n  &__dialog-content {\n    padding: var(--padding);\n    @include spaceCurve('padding-top', 'medium');\n    @include spaceCurve('padding-bottom', 'medium');\n    overflow: auto;\n    flex-grow: 1;\n  }\n\n  &__actions {\n    padding: var(--padding);\n    padding-top: 0;\n  }\n\n  &__close-button {\n    position: absolute;\n    top: space('xsmall');\n    right: space('xsmall');\n    display: flex;\n    appearance: none;\n    font-family: inherit;\n    border: none;\n    background: none;\n    padding: space('xsmall');\n    margin: calc(#{space('xsmall')} * -1);\n    border-radius: $buttonBorderRadius;\n    cursor: pointer;\n\n    @include mq($from: small) {\n      top: space('small');\n      right: space('small');\n    }\n\n    @include mq($from: medium) {\n      top: space('large');\n      right: space('large');\n    }\n\n    @include mq($from: large) {\n      top: calc(#{space('xxlarge')} + #{space('xxsmall')});\n      right: calc(#{space('xxlarge')} + #{space('xxsmall')});\n    }\n  }\n\n  &__close-icon {\n    --size: #{iconSize('medium')};\n    color: var(--close-color);\n  }\n\n  &--is-open {\n    display: flex;\n  }\n}\n","import {\n  Host,\n  Component,\n  Element,\n  Method,\n  Listen,\n  Prop,\n  Event,\n  EventEmitter,\n  h,\n} from \"@stencil/core\";\n\nimport {\n  StzhDialogOpenEvent,\n  StzhDialogCloseEvent\n} from \"../../index\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { StzhDialogLocalizedText } from \"./stzh-dialog.localization\"\n\nimport { createFocusTrap, FocusTrap } from 'focus-trap';\n\nconst keyCode = {\n  ESC: 27\n};\n\nconst CLASS_BODY_OPEN = \"stzh-dialog-open\";\n\nlet activeDialog: StzhDialog = null;\nlet dialogCounter = 0;\n\n/**\n * @slot - Slot for any content inside the dialog\n * @prop --width: Width of dialog\n */\n@Component({\n  tag: \"stzh-dialog\",\n  styleUrl: \"stzh-dialog.scss\",\n  scoped: true\n})\nexport class StzhDialog {\n  /** Translation strings */\n  @Prop() localization: StzhDialogLocalizedText;\n\n  /** Close dialog when pressing ESC */\n  @Prop() closeOnEscapeKey: boolean = false;\n\n  /** Close dialog when clicking outside of it */\n  @Prop() closeOnBackdropClick: boolean = false;\n\n  /** Open status */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Stay in original position (true) or move to body (false) */\n  @Prop() stay: boolean = true;\n\n  /** Size */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Heading text */\n  @Prop() heading: string = \"\";\n\n  /** Accessibility role */\n  @Prop({ attribute: \"a11y-role\" }) a11yRole: \"dialog\" | \"alertdialog\" = \"alertdialog\";\n\n  /** Accessible label for dialog (use if no heading is used) */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the close button element.\n   * Default value will be taken from translations.\n   */\n  @Prop() closeAnalyticsId: string;\n\n  /** Dialog open event */\n  @Event() stzhOpen: EventEmitter<StzhDialogOpenEvent>;\n\n  /** Dialog close event */\n  @Event() stzhClose: EventEmitter<StzhDialogCloseEvent>;\n\n  @Element() element: HTMLStzhDialogElement;\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleOutsideClick(event: MouseEvent) {\n    if (!this.open || !this.closeOnBackdropClick) {\n      return\n    }\n\n    const isClickOutside = event.target !== this.dialogElement\n      && this.dialogElement.contains(event.target as HTMLElement) === false\n\n    if (isClickOutside) {\n      this.hide()\n    }\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeydown(event: KeyboardEvent) {\n    if (\n      event.keyCode === keyCode.ESC\n      && activeDialog === this\n      && this.closeOnEscapeKey\n    ) {\n      this.hide();\n    }\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  handleOpenTriggerClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (target.dataset.stzhDialogTrigger === this.element.id) {\n      this.show();\n    } else {\n      const closest = target.closest(\"[data-stzh-dialog-trigger]\") as HTMLElement;\n\n      if (closest && closest.dataset.stzhDialogTrigger === this.element.id) {\n        this.show();\n      }\n    }\n  }\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-dialog\"\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-dialog\"\n    });\n  }\n\n  private observer: MutationObserver;\n  private id: string;\n  private trap: FocusTrap;\n  private parentElement: HTMLElement;\n  private dialogElement: HTMLDivElement;\n\n  private handleDialogClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    if (target.dataset.stzhDialogClose) {\n      this.hide();\n    } else {\n      const closest = target.closest(\"[data-stzh-dialog-close]\");\n\n      if (closest) {\n        this.hide();\n      }\n    }\n  }\n\n  private handleCloseButtonClick = () => {\n    this.hide();\n  }\n\n  private init = () => {\n    const actions = this.element.querySelector('stzh-actions[slot=\"actions\"]');\n\n    if (actions) {\n      setPropsIfNull(actions, {\n        variant: \"dialog\",\n        withBorder: true\n      } as HTMLStzhActionsElement)\n    }\n  }\n\n  private getSiblings() {\n    if (!this.parentElement) {\n      return [];\n    }\n\n    return Array.from(this.parentElement.children).filter(\n      (child) => child !== this.element\n    );\n  }\n\n  private disableSiblings() {\n    this.getSiblings().forEach((sibling) => {\n      sibling.setAttribute(\"aria-hidden\", \"true\");\n    });\n  }\n\n  private enableSiblings() {\n    this.getSiblings().forEach((sibling) => {\n      sibling.removeAttribute(\"aria-hidden\");\n    });\n  }\n\n  private dialogShown() {\n    activeDialog = this;\n    document.body.classList.add(CLASS_BODY_OPEN);\n    this.disableSiblings();\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private dialogHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n    this.enableSiblings();\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n\n    activeDialog = null;\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-dialog-${dialogCounter}`;\n    dialogCounter++;\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"dialog\");\n    }\n  }\n\n  componentDidRender() {\n    this.open ? this.dialogShown() : this.dialogHidden();\n  }\n\n  componentDidUpdate() {\n    this.trap.updateContainerElements(this.element);\n  }\n\n  componentDidLoad() {\n    this.trap = createFocusTrap(this.element, {\n      fallbackFocus: this.dialogElement,\n      ...createBaseFocusTrapOptions()\n    });\n\n    if (this.open) {\n      this.dialogShown();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.stay && this.element.parentElement !== document.body) {\n      document.body.appendChild(this.element);\n    }\n\n    this.parentElement = this.element.parentElement;\n\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    this.dialogHidden();\n\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-dialog\": true,\n            \"stzh-dialog--is-open\": this.open,\n            \"stzh-dialog--has-heading\": !!this.heading,\n            \"stzh-dialog--has-close-hidden\": this.hideClose,\n            [`stzh-dialog--size-${this.size}`]: !!this.size,\n          }}\n        >\n          <div class=\"stzh-dialog__backdrop\"></div>\n          <div class=\"stzh-dialog__content\">\n            <div\n              class=\"stzh-dialog__dialog\"\n              ref={(el) => (this.dialogElement = el as HTMLDivElement)}\n              tabindex=\"-1\"\n              role={this.a11yRole}\n              aria-label={this.a11yLabel}\n              aria-labelledby={this.heading ? `${this.id}-heading` : null}\n              aria-hidden={this.open ? \"false\" : \"true\"}\n              onClick={this.handleDialogClick}\n            >\n              {this.heading &&\n                <stzh-heading\n                  id={`${this.id}-heading`}\n                  class=\"stzh-dialog__heading\"\n                  level=\"2\"\n                  with-border\n                >\n                  {this.heading}\n                </stzh-heading>\n              }\n\n              <div class=\"stzh-dialog__dialog-content\">\n                <slot></slot>\n              </div>\n\n              <div class=\"stzh-dialog__actions\">\n                <slot name=\"actions\"></slot>\n              </div>\n\n              {!this.hideClose &&\n                <button\n                  class=\"stzh-dialog__close-button\"\n                  onClick={this.handleCloseButtonClick}\n                  aria-label={this.localization.close}\n                  type=\"button\"\n                  s-object-id={this.closeAnalyticsId || this.localization.close}\n                >\n                  <stzh-icon class=\"stzh-dialog__close-icon\" name=\"close\"></stzh-icon>\n                </button>\n              }\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"mappings":"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"}
+{"version":3,"names":["stzhDialogCss","keyCode","ESC","CLASS_BODY_OPEN","activeDialog","dialogCounter","StzhDialog","exports","this","handleDialogClick","event","target","dataset","stzhDialogClose","_this","hide","closest","handleCloseButtonClick","init","actions","element","querySelector","setPropsIfNull","variant","withBorder","class_1","prototype","handleOutsideClick","open","closeOnBackdropClick","isClickOutside","dialogElement","contains","handleKeydown","closeOnEscapeKey","handleOpenTriggerClick","stzhDialogTrigger","id","show","stzhOpen","emit","component","stzhClose","getSiblings","parentElement","Array","from","children","filter","child","disableSiblings","forEach","sibling","setAttribute","enableSiblings","removeAttribute","dialogShown","document","body","classList","add","trap","activate","dialogHidden","remove","deactivate","componentWillLoad","concat","localization","_a","fetchTranslations","_b","sent","componentDidRender","componentDidUpdate","updateContainerElements","componentDidLoad","createFocusTrap","Object","assign","fallbackFocus","createBaseFocusTrapOptions","connectedCallback","stay","appendChild","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","h","Host","class","heading","hideClose","size","ref","el","tabindex","role","a11yRole","a11yLabel","onClick","level","name","close","type","closeAnalyticsId"],"sources":["src/components/stzh-dialog/stzh-dialog.scss?tag=stzh-dialog&encapsulation=scoped","src/components/stzh-dialog/stzh-dialog.tsx"],"sourcesContent":[":host {\n  --width: 100%;\n  --padding: #{spaceCurveValue('large')};\n  --close-color: #{$baseLeadColor};\n  --backdrop-opacity: 0.8;\n\n  @include mq($from: small) {\n    --width: 536px;\n    --padding: #{spaceCurveValue('large', 'small')};\n  }\n\n  @include mq($from: medium) {\n    --width: 782px;\n    --padding: #{spaceCurveValue('large', 'medium')};\n  }\n\n  @include mq($from: large) {\n    --width: 832px;\n    --padding: #{spaceCurveValue('large', 'large')};\n  }\n\n  &[size=\"small\"] {\n    @include mq($from: small) {\n      --width: 395px;\n    }\n\n    @include mq($from: medium) {\n      --width: 460px;\n    }\n\n    @include mq($from: large) {\n      --width: 512px;\n    }\n  }\n}\n\n.stzh-dialog {\n  z-index: $zIndexDialog;\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: stretch;\n\n  &__content {\n    z-index: 2;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    flex-grow: 1;\n    overflow: auto;\n  }\n\n  &__dialog {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    margin: auto;\n    border: none;\n    background-color: $colorWhite;\n    width: var(--width);\n    max-width: 100%;\n    box-shadow: $boxShadowOverlay;\n    height: 100vh;\n    max-height: 100vh;\n    // overflow: visible;\n    overflow: hidden;\n    outline: none;\n\n    @include mq($from: small) {\n      height: auto;\n    }\n  }\n\n  &__backdrop {\n    z-index: 1;\n\t\tposition: absolute;\n\t\ttop: 0px;\n\t\tleft: 0px;\n\t\twidth: 100%;\n    height: 100%;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\ttext-align: center;\n    background-color: $colorPrimary;\n    opacity: var(--backdrop-opacity);\n  }\n\n  &__heading {\n    padding: var(--padding);\n    padding-bottom: 0;\n  }\n\n  &__dialog-content {\n    padding: var(--padding);\n    @include spaceCurve('padding-top', 'medium');\n    @include spaceCurve('padding-bottom', 'medium');\n    overflow: auto;\n    flex-grow: 1;\n  }\n\n  &__actions {\n    padding: var(--padding);\n    padding-top: 0;\n  }\n\n  &__close-button {\n    position: absolute;\n    top: space('xsmall');\n    right: space('xsmall');\n    display: flex;\n    appearance: none;\n    font-family: inherit;\n    border: none;\n    background: none;\n    padding: space('xsmall');\n    margin: calc(#{space('xsmall')} * -1);\n    border-radius: $buttonBorderRadius;\n    cursor: pointer;\n\n    @include mq($from: small) {\n      top: space('small');\n      right: space('small');\n    }\n\n    @include mq($from: medium) {\n      top: space('large');\n      right: space('large');\n    }\n\n    @include mq($from: large) {\n      top: calc(#{space('xxlarge')} + #{space('xxsmall')});\n      right: calc(#{space('xxlarge')} + #{space('xxsmall')});\n    }\n  }\n\n  &__close-icon {\n    --size: #{iconSize('medium')};\n    color: var(--close-color);\n  }\n\n  &--is-open {\n    display: flex;\n  }\n}\n","import {\n  Host,\n  Component,\n  Element,\n  Method,\n  Listen,\n  Prop,\n  Event,\n  EventEmitter,\n  h,\n} from \"@stencil/core\";\n\nimport {\n  StzhDialogOpenEvent,\n  StzhDialogCloseEvent\n} from \"../../index\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { StzhDialogLocalizedText } from \"./stzh-dialog.localization\"\n\nimport { createFocusTrap, FocusTrap } from 'focus-trap';\n\nconst keyCode = {\n  ESC: 27\n};\n\nconst CLASS_BODY_OPEN = \"stzh-dialog-open\";\n\nlet activeDialog: StzhDialog = null;\nlet dialogCounter = 0;\n\n/**\n * @slot - Slot for any content inside the dialog\n * @prop --width: Width of dialog\n */\n@Component({\n  tag: \"stzh-dialog\",\n  styleUrl: \"stzh-dialog.scss\",\n  scoped: true\n})\nexport class StzhDialog {\n  /** Translation strings */\n  @Prop() localization: StzhDialogLocalizedText;\n\n  /** Close dialog when pressing ESC */\n  @Prop() closeOnEscapeKey: boolean = false;\n\n  /** Close dialog when clicking outside of it */\n  @Prop() closeOnBackdropClick: boolean = false;\n\n  /** Open status */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Stay in original position (true) or move to body (false) */\n  @Prop() stay: boolean = true;\n\n  /** Size */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Heading text */\n  @Prop() heading: string = \"\";\n\n  /** Accessibility role */\n  @Prop({ attribute: \"a11y-role\" }) a11yRole: \"dialog\" | \"alertdialog\" = \"alertdialog\";\n\n  /** Accessible label for dialog (use if no heading is used) */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the close button element.\n   * Default value will be taken from translations.\n   */\n  @Prop() closeAnalyticsId: string;\n\n  /** Dialog open event */\n  @Event() stzhOpen: EventEmitter<StzhDialogOpenEvent>;\n\n  /** Dialog close event */\n  @Event() stzhClose: EventEmitter<StzhDialogCloseEvent>;\n\n  @Element() element: HTMLStzhDialogElement;\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleOutsideClick(event: MouseEvent) {\n    if (!this.open || !this.closeOnBackdropClick) {\n      return\n    }\n\n    const isClickOutside = event.target !== this.dialogElement\n      && this.dialogElement.contains(event.target as HTMLElement) === false\n\n    if (isClickOutside) {\n      this.hide()\n    }\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeydown(event: KeyboardEvent) {\n    if (\n      event.keyCode === keyCode.ESC\n      && activeDialog === this\n      && this.closeOnEscapeKey\n    ) {\n      this.hide();\n    }\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  handleOpenTriggerClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (target.dataset.stzhDialogTrigger === this.element.id) {\n      this.show();\n    } else {\n      const closest = target.closest(\"[data-stzh-dialog-trigger]\") as HTMLElement;\n\n      if (closest && closest.dataset.stzhDialogTrigger === this.element.id) {\n        this.show();\n      }\n    }\n  }\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-dialog\"\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-dialog\"\n    });\n  }\n\n  private observer: MutationObserver;\n  private id: string;\n  private trap: FocusTrap;\n  private parentElement: HTMLElement;\n  private dialogElement: HTMLDivElement;\n\n  private handleDialogClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    if (target.dataset.stzhDialogClose) {\n      this.hide();\n    } else {\n      const closest = target.closest(\"[data-stzh-dialog-close]\");\n\n      if (closest) {\n        this.hide();\n      }\n    }\n  }\n\n  private handleCloseButtonClick = () => {\n    this.hide();\n  }\n\n  private init = () => {\n    const actions = this.element.querySelector('stzh-actions[slot=\"actions\"]');\n\n    if (actions) {\n      setPropsIfNull(actions, {\n        variant: \"dialog\",\n        withBorder: true\n      } as HTMLStzhActionsElement)\n    }\n  }\n\n  private getSiblings() {\n    if (!this.parentElement) {\n      return [];\n    }\n\n    return Array.from(this.parentElement.children).filter(\n      (child) => child !== this.element\n    );\n  }\n\n  private disableSiblings() {\n    this.getSiblings().forEach((sibling) => {\n      sibling.setAttribute(\"aria-hidden\", \"true\");\n    });\n  }\n\n  private enableSiblings() {\n    this.getSiblings().forEach((sibling) => {\n      sibling.removeAttribute(\"aria-hidden\");\n    });\n  }\n\n  private dialogShown() {\n    activeDialog = this;\n    document.body.classList.add(CLASS_BODY_OPEN);\n    this.disableSiblings();\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private dialogHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n    this.enableSiblings();\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n\n    activeDialog = null;\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-dialog-${dialogCounter}`;\n    dialogCounter++;\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"dialog\");\n    }\n  }\n\n  componentDidRender() {\n    this.open ? this.dialogShown() : this.dialogHidden();\n  }\n\n  componentDidUpdate() {\n    this.trap.updateContainerElements(this.element);\n  }\n\n  componentDidLoad() {\n    this.trap = createFocusTrap(this.element, {\n      fallbackFocus: this.dialogElement,\n      ...createBaseFocusTrapOptions()\n    });\n\n    if (this.open) {\n      this.dialogShown();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.stay && this.element.parentElement !== document.body) {\n      document.body.appendChild(this.element);\n    }\n\n    this.parentElement = this.element.parentElement;\n\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    this.dialogHidden();\n\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-dialog\": true,\n            \"stzh-dialog--is-open\": this.open,\n            \"stzh-dialog--has-heading\": !!this.heading,\n            \"stzh-dialog--has-close-hidden\": this.hideClose,\n            [`stzh-dialog--size-${this.size}`]: !!this.size,\n          }}\n        >\n          <div class=\"stzh-dialog__backdrop\"></div>\n          <div class=\"stzh-dialog__content\">\n            <div\n              class=\"stzh-dialog__dialog\"\n              ref={(el) => (this.dialogElement = el as HTMLDivElement)}\n              tabindex=\"-1\"\n              role={this.a11yRole}\n              aria-label={this.a11yLabel || null}\n              aria-labelledby={this.heading ? `${this.id}-heading` : null}\n              aria-hidden={this.open ? \"false\" : \"true\"}\n              onClick={this.handleDialogClick}\n            >\n              {this.heading &&\n                <stzh-heading\n                  id={`${this.id}-heading`}\n                  class=\"stzh-dialog__heading\"\n                  level=\"2\"\n                  with-border\n                >\n                  {this.heading}\n                </stzh-heading>\n              }\n\n              <div class=\"stzh-dialog__dialog-content\">\n                <slot></slot>\n              </div>\n\n              <div class=\"stzh-dialog__actions\">\n                <slot name=\"actions\"></slot>\n              </div>\n\n              {!this.hideClose &&\n                <button\n                  class=\"stzh-dialog__close-button\"\n                  onClick={this.handleCloseButtonClick}\n                  aria-label={this.localization.close}\n                  type=\"button\"\n                  s-object-id={this.closeAnalyticsId || this.localization.close}\n                >\n                  <stzh-icon class=\"stzh-dialog__close-icon\" name=\"close\"></stzh-icon>\n                </button>\n              }\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"mappings":"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"}

package/dist/stzh-components/{p-6cb99167.system.entry.js → p-62e0ad8d.system.entry.js}

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(e,t,n,s){function i(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,o){function r(e){try{c(s.next(e))}catch(e){o(e)}}function a(e){try{c(s["throw"](e))}catch(e){o(e)}}function c(e){e.done?n(e.value):i(e.value).then(r,a)}c((s=s.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},s,i,o,r;return r={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function a(e){return function(t){return c([e,t])}}function c(a){if(s)throw new TypeError("Generator is already executing.");while(r&&(r=0,a[0]&&(n=0)),n)try{if(s=1,i&&(o=a[0]&2?i["return"]:a[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,a[1])).done)return o;if(i=0,o)a=[a[0]&2,o.value];switch(a[0]){case 0:case 1:o=a;break;case 4:n.label++;return{value:a[1],done:false};case 5:n.label++;i=a[1];a=[0];continue;case 7:a=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(a[0]===6||a[0]===2)){n=0;continue}if(a[0]===3&&(!o||a[1]>o[0]&&a[1]<o[3])){n.label=a[1];break}if(a[0]===6&&n.label<o[1]){n.label=o[1];o=a;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(a);break}if(o[2])n.ops.pop();n.trys.pop();continue}a=t.call(e,n)}catch(e){a=[6,e];i=0}finally{s=o=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./p-7b184ebb.system.js","./p-22a2f4c1.system.js"],(function(e){"use strict";var t,n,s,i,o,r,a;return{setters:[function(e){t=e.r;n=e.h;s=e.a;i=e.c;o=e.F;r=e.g},function(e){a=e.h}],execute:function(){var c=".sc-stzh-menu-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-menu-h{display:none}.sc-stzh-menu-h *.sc-stzh-menu,.sc-stzh-menu-h *.sc-stzh-menu::before,.sc-stzh-menu-h *.sc-stzh-menu::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-menu-h .sc-stzh-menu-s>stzh-hr{margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}.stzh-menu.sc-stzh-menu{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}";var h=e("stzh_menu",function(){function e(e){t(this,e)}e.prototype.render=function(){return n(s,{role:"menu"},n("div",{class:"stzh-menu"},n("slot",null)))};return e}());h.style=c;var l=".sc-stzh-menu-item-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-menu-item-h{display:none}.sc-stzh-menu-item-h *.sc-stzh-menu-item,.sc-stzh-menu-item-h *.sc-stzh-menu-item::before,.sc-stzh-menu-item-h *.sc-stzh-menu-item::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-menu-item-h{--height:var(--stzh-menu-item-height);--color:var(--stzh-color-grey70);--background-color:transparent;--icon-size:var(--stzh-icon-size-small);--hover-color:var(--stzh-color-grey70);--hover-background-color:var(--stzh-color-grey5)}[active].sc-stzh-menu-item-h:not([active=false]){--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:var(--stzh-color-primary8)}[disabled].sc-stzh-menu-item-h:not([disabled=false]){--color:var(--stzh-color-white);--background-color:var(--stzh-color-grey13);--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-grey13)}.sc-stzh-menu-item-h .sc-stzh-menu-item-s>stzh-icon,.stzh-menu-item__icon.sc-stzh-menu-item{--size:var(--icon-size)}.stzh-menu-item.sc-stzh-menu-item{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);font-family:inherit;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:stretch;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-text-decoration-line:none;text-decoration-line:none;border:none;padding:var(--stzh-space-xsmall) var(--stzh-space-medium);padding-left:var(--stzh-space-large);color:var(--color);background-color:var(--background-color);width:100%;height:var(--height);line-height:var(--height);-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;cursor:pointer}.stzh-menu-item.sc-stzh-menu-item:hover{color:var(--hover-color);background-color:var(--hover-background-color)}.stzh-menu-item__icon-wrapper.sc-stzh-menu-item{position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;width:auto;height:1em}.stzh-menu-item__badge.sc-stzh-menu-item{position:absolute;z-index:1;top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-menu-item__icon-wrapper.sc-stzh-menu-item+.stzh-menu-item__text.sc-stzh-menu-item:not(:empty){margin-left:var(--stzh-space-xsmall)}.stzh-menu-item__text.sc-stzh-menu-item{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.stzh-menu-item--is-disabled.sc-stzh-menu-item{cursor:not-allowed}";var u=e("stzh_menu_item",function(){function e(e){var n=this;t(this,e);this.stzhFocus=i(this,"stzhFocus",7);this.stzhBlur=i(this,"stzhBlur",7);this.focusedByInput=false;this.onRootFocus=function(){if(!n.focusedByInput){n.setFocus()}n.focusedByInput=false};this.onFocus=function(e){n.focusedByInput=true;var t=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});n.element.dispatchEvent(t);n.stzhFocus.emit({component:"stzh-menu-item",originalEvent:e})};this.onBlur=function(e){var t=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});n.element.dispatchEvent(t);n.stzhBlur.emit({component:"stzh-menu-item",originalEvent:e})};this.badge="";this.badgeType="default";this.badgeEmpty=false;this.disabled=false;this.active=false;this.icon="";this.label="";this.href="";this.target="";this.a11yLabel=undefined;this.analyticsId=undefined}e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.menuItem.focus();return[2]}))}))};e.prototype.componentDidRender=function(){var e=this;requestAnimationFrame((function(){e.menuItem.setAttribute("s-object-id",e.analyticsId||e.text.innerText)}))};e.prototype.renderInner=function(e){var t=this;return n(o,null,e&&n("div",{class:"stzh-menu-item__icon-wrapper"},this.icon?n("stzh-icon",{class:"stzh-menu-item__icon",name:this.icon}):n("slot",{name:"icon"}),(this.badge||this.badgeEmpty)&&n("stzh-badge",{class:"stzh-menu-item__badge",label:this.badge,type:this.badgeType})),n("div",{ref:function(e){return t.text=e},class:"stzh-menu-item__text"},this.label?this.label:n("slot",null)))};e.prototype.render=function(){var e=this;var t=a(this.element,"icon")||!!this.icon;var i={"stzh-menu-item":true,"stzh-menu-item--has-icon":t,"stzh-menu-item--has-badge":!!this.badge,"stzh-menu-item--is-disabled":this.disabled,"stzh-menu-item--is-active":this.active};return n(s,{role:"menuitem",tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},this.href?n("a",{ref:function(t){return e.menuItem=t},href:this.disabled?null:this.href,target:this.target,class:i,"aria-label":this.a11yLabel,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner(t)):n("button",{ref:function(t){return e.menuItem=t},class:i,type:"button",disabled:this.disabled,"aria-label":this.a11yLabel,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner(t)))};Object.defineProperty(e.prototype,"element",{get:function(){return r(this)},enumerable:false,configurable:true});return e}());u.style=l}}}));
-//# sourceMappingURL=p-6cb99167.system.entry.js.map
+var __awaiter=this&&this.__awaiter||function(e,t,n,s){function i(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,o){function r(e){try{c(s.next(e))}catch(e){o(e)}}function a(e){try{c(s["throw"](e))}catch(e){o(e)}}function c(e){e.done?n(e.value):i(e.value).then(r,a)}c((s=s.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},s,i,o,r;return r={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function a(e){return function(t){return c([e,t])}}function c(a){if(s)throw new TypeError("Generator is already executing.");while(r&&(r=0,a[0]&&(n=0)),n)try{if(s=1,i&&(o=a[0]&2?i["return"]:a[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,a[1])).done)return o;if(i=0,o)a=[a[0]&2,o.value];switch(a[0]){case 0:case 1:o=a;break;case 4:n.label++;return{value:a[1],done:false};case 5:n.label++;i=a[1];a=[0];continue;case 7:a=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(a[0]===6||a[0]===2)){n=0;continue}if(a[0]===3&&(!o||a[1]>o[0]&&a[1]<o[3])){n.label=a[1];break}if(a[0]===6&&n.label<o[1]){n.label=o[1];o=a;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(a);break}if(o[2])n.ops.pop();n.trys.pop();continue}a=t.call(e,n)}catch(e){a=[6,e];i=0}finally{s=o=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./p-7b184ebb.system.js","./p-22a2f4c1.system.js"],(function(e){"use strict";var t,n,s,i,o,r,a;return{setters:[function(e){t=e.r;n=e.h;s=e.a;i=e.c;o=e.F;r=e.g},function(e){a=e.h}],execute:function(){var c=".sc-stzh-menu-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-menu-h{display:none}.sc-stzh-menu-h *.sc-stzh-menu,.sc-stzh-menu-h *.sc-stzh-menu::before,.sc-stzh-menu-h *.sc-stzh-menu::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-menu-h .sc-stzh-menu-s>stzh-hr{margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}.stzh-menu.sc-stzh-menu{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}";var l=e("stzh_menu",function(){function e(e){t(this,e)}e.prototype.render=function(){return n(s,{role:"menu"},n("div",{class:"stzh-menu"},n("slot",null)))};return e}());l.style=c;var h=".sc-stzh-menu-item-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-menu-item-h{display:none}.sc-stzh-menu-item-h *.sc-stzh-menu-item,.sc-stzh-menu-item-h *.sc-stzh-menu-item::before,.sc-stzh-menu-item-h *.sc-stzh-menu-item::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-menu-item-h{--height:var(--stzh-menu-item-height);--color:var(--stzh-color-grey70);--background-color:transparent;--icon-size:var(--stzh-icon-size-small);--hover-color:var(--stzh-color-grey70);--hover-background-color:var(--stzh-color-grey5)}[active].sc-stzh-menu-item-h:not([active=false]){--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:var(--stzh-color-primary8)}[disabled].sc-stzh-menu-item-h:not([disabled=false]){--color:var(--stzh-color-white);--background-color:var(--stzh-color-grey13);--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-grey13)}.sc-stzh-menu-item-h .sc-stzh-menu-item-s>stzh-icon,.stzh-menu-item__icon.sc-stzh-menu-item{--size:var(--icon-size)}.stzh-menu-item.sc-stzh-menu-item{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);font-family:inherit;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:stretch;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-text-decoration-line:none;text-decoration-line:none;border:none;padding:var(--stzh-space-xsmall) var(--stzh-space-medium);padding-left:var(--stzh-space-large);color:var(--color);background-color:var(--background-color);width:100%;height:var(--height);line-height:var(--height);-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;cursor:pointer}.stzh-menu-item.sc-stzh-menu-item:hover{color:var(--hover-color);background-color:var(--hover-background-color)}.stzh-menu-item__icon-wrapper.sc-stzh-menu-item{position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;width:auto;height:1em}.stzh-menu-item__badge.sc-stzh-menu-item{position:absolute;z-index:1;top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-menu-item__icon-wrapper.sc-stzh-menu-item+.stzh-menu-item__text.sc-stzh-menu-item:not(:empty){margin-left:var(--stzh-space-xsmall)}.stzh-menu-item__text.sc-stzh-menu-item{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.stzh-menu-item--is-disabled.sc-stzh-menu-item{cursor:not-allowed}";var u=e("stzh_menu_item",function(){function e(e){var n=this;t(this,e);this.stzhFocus=i(this,"stzhFocus",7);this.stzhBlur=i(this,"stzhBlur",7);this.focusedByInput=false;this.onRootFocus=function(){if(!n.focusedByInput){n.setFocus()}n.focusedByInput=false};this.onFocus=function(e){n.focusedByInput=true;var t=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});n.element.dispatchEvent(t);n.stzhFocus.emit({component:"stzh-menu-item",originalEvent:e})};this.onBlur=function(e){var t=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});n.element.dispatchEvent(t);n.stzhBlur.emit({component:"stzh-menu-item",originalEvent:e})};this.badge="";this.badgeType="default";this.badgeEmpty=false;this.disabled=false;this.active=false;this.icon="";this.label="";this.href="";this.target="";this.a11yLabel=undefined;this.analyticsId=undefined}e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.menuItem.focus();return[2]}))}))};e.prototype.componentDidRender=function(){var e=this;requestAnimationFrame((function(){e.menuItem.setAttribute("s-object-id",e.analyticsId||e.text.innerText)}))};e.prototype.renderInner=function(e){var t=this;return n(o,null,e&&n("div",{class:"stzh-menu-item__icon-wrapper"},this.icon?n("stzh-icon",{class:"stzh-menu-item__icon",name:this.icon}):n("slot",{name:"icon"}),(this.badge||this.badgeEmpty)&&n("stzh-badge",{class:"stzh-menu-item__badge",label:this.badge,type:this.badgeType})),n("div",{ref:function(e){return t.text=e},class:"stzh-menu-item__text"},this.label?this.label:n("slot",null)))};e.prototype.render=function(){var e=this;var t=a(this.element,"icon")||!!this.icon;var i={"stzh-menu-item":true,"stzh-menu-item--has-icon":t,"stzh-menu-item--has-badge":!!this.badge,"stzh-menu-item--is-disabled":this.disabled,"stzh-menu-item--is-active":this.active};return n(s,{role:"menuitem",tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},this.href?n("a",{ref:function(t){return e.menuItem=t},href:this.disabled?null:this.href,target:this.target,class:i,"aria-label":this.a11yLabel||null,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner(t)):n("button",{ref:function(t){return e.menuItem=t},class:i,type:"button",disabled:this.disabled,"aria-label":this.a11yLabel||null,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner(t)))};Object.defineProperty(e.prototype,"element",{get:function(){return r(this)},enumerable:false,configurable:true});return e}());u.style=h}}}));
+//# sourceMappingURL=p-62e0ad8d.system.entry.js.map

package/dist/stzh-components/{p-6cb99167.system.entry.js.map → p-62e0ad8d.system.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stzhMenuCss","StzhMenu","exports","class_1","prototype","render","h","Host","role","class","stzhMenuItemCss","StzhMenuItem","this","focusedByInput","onRootFocus","_this","setFocus","onFocus","event","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","emit","component","originalEvent","onBlur","blurEvent","stzhBlur","class_2","menuItem","focus","componentDidRender","requestAnimationFrame","setAttribute","analyticsId","text","innerText","renderInner","iconUsed","Fragment","icon","name","badge","badgeEmpty","label","type","badgeType","ref","el","hasSlot","classes","disabled","active","tabindex","href","target","a11yLabel"],"sources":["src/components/stzh-menu/stzh-menu.scss?tag=stzh-menu&encapsulation=scoped","src/components/stzh-menu/stzh-menu.tsx","src/components/stzh-menu-item/stzh-menu-item.scss?tag=stzh-menu-item&encapsulation=scoped","src/components/stzh-menu-item/stzh-menu-item.tsx"],"sourcesContent":[":host {\n  ::slotted(stzh-hr) {\n    margin-top: space('xsmall');\n    margin-bottom: space('xsmall');\n  }\n}\n\n.stzh-menu {\n  display: flex;\n  flex-direction: column;\n}\n","import {\n  Component,\n  Host,\n  h,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for `stzh-menu-item` elements\n */\n@Component({\n  tag: \"stzh-menu\",\n  styleUrl: \"stzh-menu.scss\",\n  scoped: true\n})\nexport class StzhMenu {\n  render() {\n    return (\n      <Host role=\"menu\">\n        <div class=\"stzh-menu\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --height: #{$menuItemHeight};\n  --color: #{$colorGrey70};\n  --background-color: transparent;\n  --icon-size: #{iconSize('small')};\n\n  --hover-color: #{$colorGrey70};\n  --hover-background-color: #{$colorGrey5};\n\n  &[active]:not([active=\"false\"]) {\n    --color: #{$colorPrimary};\n    --hover-color: #{$colorPrimaryHover};\n    --hover-background-color: #{$colorPrimary8};\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorWhite};\n    --background-color: #{$colorGrey13};\n\n    --hover-color: #{$colorWhite};\n    --hover-background-color: #{$colorGrey13};\n  }\n}\n\n:host ::slotted(stzh-icon),\n.stzh-menu-item__icon {\n  --size: var(--icon-size);\n}\n\n.stzh-menu-item {\n  @include fontSize('micro');\n  font-family: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  text-decoration-line: none;\n  border: none;\n  padding: space('xsmall') space('medium');\n  padding-left: space('large');\n  color: var(--color);\n  background-color: var(--background-color);\n  width: 100%;\n  height: var(--height);\n  line-height: var(--height);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  cursor: pointer;\n\n  &:hover {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  &__icon-wrapper {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: 1em;\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('xsmall')} * -1);\n  }\n\n  &__icon-wrapper + &__text:not(:empty) {\n    margin-left: space('xsmall');\n  }\n\n  &__text {\n    @include truncate;\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Method,\n  Element,\n  Fragment,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhMenuItemFocusEvent,\n  StzhMenuItemBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for any content\n * @slot icon - Slot for `stzh-icon` element\n */\n@Component({\n  tag: \"stzh-menu-item\",\n  styleUrl: \"stzh-menu-item.scss\",\n  scoped: true\n})\nexport class StzhMenuItem {\n  /** Badge (only displayed if `icon` property or icon slot is used) */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Whether the button is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether the button is active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** `href` if the button should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhMenuItemElement;\n\n  /** Focus menu item */\n  @Method()\n  async setFocus() {\n    this.menuItem.focus();\n  }\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhMenuItemFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhMenuItemBlurEvent>;\n\n  private menuItem: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLDivElement;\n\n  private focusedByInput: boolean = false;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.setFocus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event\n    });\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.menuItem.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        {iconUsed &&\n          <div class=\"stzh-menu-item__icon-wrapper\">\n            {this.icon ?\n              <stzh-icon class=\"stzh-menu-item__icon\" name={this.icon}></stzh-icon>\n              :\n              <slot name=\"icon\"></slot>\n            }\n            {(this.badge || this.badgeEmpty) &&\n              <stzh-badge class=\"stzh-menu-item__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n            }\n          </div>\n        }\n        <div\n          ref={(el) => (this.text = el as HTMLDivElement)}\n          class=\"stzh-menu-item__text\"\n        >\n          {this.label ? this.label : <slot></slot>}\n        </div>\n      </Fragment>\n    );\n  }\n\n  render() {\n    const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-menu-item\": true,\n      \"stzh-menu-item--has-icon\": iconUsed,\n      \"stzh-menu-item--has-badge\": !!this.badge,\n      \"stzh-menu-item--is-disabled\": this.disabled,\n      \"stzh-menu-item--is-active\": this.active\n    };\n\n    return (\n      <Host role=\"menuitem\" tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ?\n          <a\n            ref={(el) => (this.menuItem = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n        :\n          <button\n            ref={(el) => (this.menuItem = el as HTMLButtonElement)}\n            class={classes}\n            type=\"button\"\n            disabled={this.disabled}\n            aria-label={this.a11yLabel}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </button>\n        }\n      </Host>\n    );\n  }\n}\n"],"mappings":"sqDAAA,IAAMA,EAAc,+vB,ICcPC,EAAQC,EAAA,uB,wBACnBC,EAAAC,UAAAC,OAAA,WACE,OACEC,EAACC,EAAI,CAACC,KAAK,QACTF,EAAA,OAAKG,MAAM,aACTH,EAAA,c,WALW,I,UCdrB,IAAMI,EAAkB,kjG,IC4BXC,EAAYT,EAAA,4B,2GAuDfU,KAAAC,eAA0B,MAE1BD,KAAAE,YAAc,WACpB,IAAKC,EAAKF,eAAgB,CACxBE,EAAKC,U,CAGPD,EAAKF,eAAiB,K,EAGhBD,KAAAK,QAAU,SAACC,GACjBH,EAAKF,eAAiB,KAEtB,IAAMM,EAAa,IAAIC,WAAW,QAAS,CACzCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdT,EAAKU,QAAQC,cAAcP,GAC3BJ,EAAKY,UAAUC,KAAK,CAClBC,UAAW,iBACXC,cAAeZ,G,EAIXN,KAAAmB,OAAS,SAACb,GAChB,IAAMc,EAAY,IAAIZ,WAAW,OAAQ,CACvCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdT,EAAKU,QAAQC,cAAcM,GAC3BjB,EAAKkB,SAASL,KAAK,CACjBC,UAAW,iBACXC,cAAeZ,G,aAzFK,G,eAGmE,U,gBAG5C,M,cAGF,M,YAGF,M,UAGpB,G,WAGC,G,UAGD,G,YAGE,G,oDAgBnBgB,EAAA9B,UAAAY,SAAN,W,qFACEJ,KAAKuB,SAASC,Q,iBAoDhBF,EAAA9B,UAAAiC,mBAAA,eAAAtB,EAAAH,KACE0B,uBAAsB,WACpBvB,EAAKoB,SAASI,aAAa,cAAexB,EAAKyB,aAAezB,EAAK0B,KAAKC,U,KAIpER,EAAA9B,UAAAuC,YAAA,SAAYC,GAAZ,IAAA7B,EAAAH,KACN,OACEN,EAACuC,EAAQ,KACND,GACCtC,EAAA,OAAKG,MAAM,gCACRG,KAAKkC,KACJxC,EAAA,aAAWG,MAAM,uBAAuBsC,KAAMnC,KAAKkC,OAEnDxC,EAAA,QAAMyC,KAAK,UAEXnC,KAAKoC,OAASpC,KAAKqC,aACnB3C,EAAA,cAAYG,MAAM,wBAAwByC,MAAOtC,KAAKoC,MAAOG,KAAMvC,KAAKwC,aAI9E9C,EAAA,OACE+C,IAAK,SAACC,GAAE,OAAMvC,EAAK0B,KAAOa,CAAlB,EACR7C,MAAM,wBAELG,KAAKsC,MAAQtC,KAAKsC,MAAQ5C,EAAA,c,EAMnC4B,EAAA9B,UAAAC,OAAA,eAAAU,EAAAH,KACE,IAAMgC,EAAoBW,EAAQ3C,KAAKa,QAAS,WAAab,KAAKkC,KAClE,IAAMU,EAAU,CACd,iBAAkB,KAClB,2BAA4BZ,EAC5B,8BAA+BhC,KAAKoC,MACpC,8BAA+BpC,KAAK6C,SACpC,4BAA6B7C,KAAK8C,QAGpC,OACEpD,EAACC,EAAI,CAACC,KAAK,WAAWmD,SAAU/C,KAAK6C,SAAW,KAAO,KAAMxC,QAASL,KAAKE,aACxEF,KAAKgD,KACJtD,EAAA,KACE+C,IAAK,SAACC,GAAE,OAAMvC,EAAKoB,SAAWmB,CAAtB,EACRM,KAAMhD,KAAK6C,SAAW,KAAO7C,KAAKgD,KAClCC,OAAQjD,KAAKiD,OACbpD,MAAO+C,EAAO,aACF5C,KAAKkD,UACjB7C,QAASL,KAAKK,QACdc,OAAQnB,KAAKmB,QAEZnB,KAAK+B,YAAYC,IAGpBtC,EAAA,UACE+C,IAAK,SAACC,GAAE,OAAMvC,EAAKoB,SAAWmB,CAAtB,EACR7C,MAAO+C,EACPL,KAAK,SACLM,SAAU7C,KAAK6C,SAAQ,aACX7C,KAAKkD,UACjB7C,QAASL,KAAKK,QACdc,OAAQnB,KAAKmB,QAEZnB,KAAK+B,YAAYC,I,4HAhKL,I"}
+{"version":3,"names":["stzhMenuCss","StzhMenu","exports","class_1","prototype","render","h","Host","role","class","stzhMenuItemCss","StzhMenuItem","this","focusedByInput","onRootFocus","_this","setFocus","onFocus","event","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","emit","component","originalEvent","onBlur","blurEvent","stzhBlur","class_2","menuItem","focus","componentDidRender","requestAnimationFrame","setAttribute","analyticsId","text","innerText","renderInner","iconUsed","Fragment","icon","name","badge","badgeEmpty","label","type","badgeType","ref","el","hasSlot","classes","disabled","active","tabindex","href","target","a11yLabel"],"sources":["src/components/stzh-menu/stzh-menu.scss?tag=stzh-menu&encapsulation=scoped","src/components/stzh-menu/stzh-menu.tsx","src/components/stzh-menu-item/stzh-menu-item.scss?tag=stzh-menu-item&encapsulation=scoped","src/components/stzh-menu-item/stzh-menu-item.tsx"],"sourcesContent":[":host {\n  ::slotted(stzh-hr) {\n    margin-top: space('xsmall');\n    margin-bottom: space('xsmall');\n  }\n}\n\n.stzh-menu {\n  display: flex;\n  flex-direction: column;\n}\n","import {\n  Component,\n  Host,\n  h,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for `stzh-menu-item` elements\n */\n@Component({\n  tag: \"stzh-menu\",\n  styleUrl: \"stzh-menu.scss\",\n  scoped: true\n})\nexport class StzhMenu {\n  render() {\n    return (\n      <Host role=\"menu\">\n        <div class=\"stzh-menu\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --height: #{$menuItemHeight};\n  --color: #{$colorGrey70};\n  --background-color: transparent;\n  --icon-size: #{iconSize('small')};\n\n  --hover-color: #{$colorGrey70};\n  --hover-background-color: #{$colorGrey5};\n\n  &[active]:not([active=\"false\"]) {\n    --color: #{$colorPrimary};\n    --hover-color: #{$colorPrimaryHover};\n    --hover-background-color: #{$colorPrimary8};\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorWhite};\n    --background-color: #{$colorGrey13};\n\n    --hover-color: #{$colorWhite};\n    --hover-background-color: #{$colorGrey13};\n  }\n}\n\n:host ::slotted(stzh-icon),\n.stzh-menu-item__icon {\n  --size: var(--icon-size);\n}\n\n.stzh-menu-item {\n  @include fontSize('micro');\n  font-family: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  text-decoration-line: none;\n  border: none;\n  padding: space('xsmall') space('medium');\n  padding-left: space('large');\n  color: var(--color);\n  background-color: var(--background-color);\n  width: 100%;\n  height: var(--height);\n  line-height: var(--height);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  cursor: pointer;\n\n  &:hover {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  &__icon-wrapper {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: 1em;\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('xsmall')} * -1);\n  }\n\n  &__icon-wrapper + &__text:not(:empty) {\n    margin-left: space('xsmall');\n  }\n\n  &__text {\n    @include truncate;\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Method,\n  Element,\n  Fragment,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhMenuItemFocusEvent,\n  StzhMenuItemBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for any content\n * @slot icon - Slot for `stzh-icon` element\n */\n@Component({\n  tag: \"stzh-menu-item\",\n  styleUrl: \"stzh-menu-item.scss\",\n  scoped: true\n})\nexport class StzhMenuItem {\n  /** Badge (only displayed if `icon` property or icon slot is used) */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Whether the button is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether the button is active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** `href` if the button should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhMenuItemElement;\n\n  /** Focus menu item */\n  @Method()\n  async setFocus() {\n    this.menuItem.focus();\n  }\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhMenuItemFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhMenuItemBlurEvent>;\n\n  private menuItem: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLDivElement;\n\n  private focusedByInput: boolean = false;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.setFocus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event\n    });\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.menuItem.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        {iconUsed &&\n          <div class=\"stzh-menu-item__icon-wrapper\">\n            {this.icon ?\n              <stzh-icon class=\"stzh-menu-item__icon\" name={this.icon}></stzh-icon>\n              :\n              <slot name=\"icon\"></slot>\n            }\n            {(this.badge || this.badgeEmpty) &&\n              <stzh-badge class=\"stzh-menu-item__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n            }\n          </div>\n        }\n        <div\n          ref={(el) => (this.text = el as HTMLDivElement)}\n          class=\"stzh-menu-item__text\"\n        >\n          {this.label ? this.label : <slot></slot>}\n        </div>\n      </Fragment>\n    );\n  }\n\n  render() {\n    const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-menu-item\": true,\n      \"stzh-menu-item--has-icon\": iconUsed,\n      \"stzh-menu-item--has-badge\": !!this.badge,\n      \"stzh-menu-item--is-disabled\": this.disabled,\n      \"stzh-menu-item--is-active\": this.active\n    };\n\n    return (\n      <Host role=\"menuitem\" tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ?\n          <a\n            ref={(el) => (this.menuItem = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n        :\n          <button\n            ref={(el) => (this.menuItem = el as HTMLButtonElement)}\n            class={classes}\n            type=\"button\"\n            disabled={this.disabled}\n            aria-label={this.a11yLabel || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </button>\n        }\n      </Host>\n    );\n  }\n}\n"],"mappings":"sqDAAA,IAAMA,EAAc,+vB,ICcPC,EAAQC,EAAA,uB,wBACnBC,EAAAC,UAAAC,OAAA,WACE,OACEC,EAACC,EAAI,CAACC,KAAK,QACTF,EAAA,OAAKG,MAAM,aACTH,EAAA,c,WALW,I,UCdrB,IAAMI,EAAkB,kjG,IC4BXC,EAAYT,EAAA,4B,2GAuDfU,KAAAC,eAA0B,MAE1BD,KAAAE,YAAc,WACpB,IAAKC,EAAKF,eAAgB,CACxBE,EAAKC,U,CAGPD,EAAKF,eAAiB,K,EAGhBD,KAAAK,QAAU,SAACC,GACjBH,EAAKF,eAAiB,KAEtB,IAAMM,EAAa,IAAIC,WAAW,QAAS,CACzCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdT,EAAKU,QAAQC,cAAcP,GAC3BJ,EAAKY,UAAUC,KAAK,CAClBC,UAAW,iBACXC,cAAeZ,G,EAIXN,KAAAmB,OAAS,SAACb,GAChB,IAAMc,EAAY,IAAIZ,WAAW,OAAQ,CACvCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdT,EAAKU,QAAQC,cAAcM,GAC3BjB,EAAKkB,SAASL,KAAK,CACjBC,UAAW,iBACXC,cAAeZ,G,aAzFK,G,eAGmE,U,gBAG5C,M,cAGF,M,YAGF,M,UAGpB,G,WAGC,G,UAGD,G,YAGE,G,oDAgBnBgB,EAAA9B,UAAAY,SAAN,W,qFACEJ,KAAKuB,SAASC,Q,iBAoDhBF,EAAA9B,UAAAiC,mBAAA,eAAAtB,EAAAH,KACE0B,uBAAsB,WACpBvB,EAAKoB,SAASI,aAAa,cAAexB,EAAKyB,aAAezB,EAAK0B,KAAKC,U,KAIpER,EAAA9B,UAAAuC,YAAA,SAAYC,GAAZ,IAAA7B,EAAAH,KACN,OACEN,EAACuC,EAAQ,KACND,GACCtC,EAAA,OAAKG,MAAM,gCACRG,KAAKkC,KACJxC,EAAA,aAAWG,MAAM,uBAAuBsC,KAAMnC,KAAKkC,OAEnDxC,EAAA,QAAMyC,KAAK,UAEXnC,KAAKoC,OAASpC,KAAKqC,aACnB3C,EAAA,cAAYG,MAAM,wBAAwByC,MAAOtC,KAAKoC,MAAOG,KAAMvC,KAAKwC,aAI9E9C,EAAA,OACE+C,IAAK,SAACC,GAAE,OAAMvC,EAAK0B,KAAOa,CAAlB,EACR7C,MAAM,wBAELG,KAAKsC,MAAQtC,KAAKsC,MAAQ5C,EAAA,c,EAMnC4B,EAAA9B,UAAAC,OAAA,eAAAU,EAAAH,KACE,IAAMgC,EAAoBW,EAAQ3C,KAAKa,QAAS,WAAab,KAAKkC,KAClE,IAAMU,EAAU,CACd,iBAAkB,KAClB,2BAA4BZ,EAC5B,8BAA+BhC,KAAKoC,MACpC,8BAA+BpC,KAAK6C,SACpC,4BAA6B7C,KAAK8C,QAGpC,OACEpD,EAACC,EAAI,CAACC,KAAK,WAAWmD,SAAU/C,KAAK6C,SAAW,KAAO,KAAMxC,QAASL,KAAKE,aACxEF,KAAKgD,KACJtD,EAAA,KACE+C,IAAK,SAACC,GAAE,OAAMvC,EAAKoB,SAAWmB,CAAtB,EACRM,KAAMhD,KAAK6C,SAAW,KAAO7C,KAAKgD,KAClCC,OAAQjD,KAAKiD,OACbpD,MAAO+C,EAAO,aACF5C,KAAKkD,WAAa,KAC9B7C,QAASL,KAAKK,QACdc,OAAQnB,KAAKmB,QAEZnB,KAAK+B,YAAYC,IAGpBtC,EAAA,UACE+C,IAAK,SAACC,GAAE,OAAMvC,EAAKoB,SAAWmB,CAAtB,EACR7C,MAAO+C,EACPL,KAAK,SACLM,SAAU7C,KAAK6C,SAAQ,aACX7C,KAAKkD,WAAa,KAC9B7C,QAASL,KAAKK,QACdc,OAAQnB,KAAKmB,QAEZnB,KAAK+B,YAAYC,I,4HAhKL,I"}

package/dist/stzh-components/{p-f5c99792.system.entry.js → p-8547ae9e.system.entry.js}

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(e,t,r,o){function i(e){return e instanceof r?e:new r((function(t){t(e)}))}return new(r||(r=Promise))((function(r,s){function n(e){try{c(o.next(e))}catch(e){s(e)}}function a(e){try{c(o["throw"](e))}catch(e){s(e)}}function c(e){e.done?r(e.value):i(e.value).then(n,a)}c((o=o.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var r={label:0,sent:function(){if(s[0]&1)throw s[1];return s[1]},trys:[],ops:[]},o,i,s,n;return n={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(n[Symbol.iterator]=function(){return this}),n;function a(e){return function(t){return c([e,t])}}function c(a){if(o)throw new TypeError("Generator is already executing.");while(n&&(n=0,a[0]&&(r=0)),r)try{if(o=1,i&&(s=a[0]&2?i["return"]:a[0]?i["throw"]||((s=i["return"])&&s.call(i),0):i.next)&&!(s=s.call(i,a[1])).done)return s;if(i=0,s)a=[a[0]&2,s.value];switch(a[0]){case 0:case 1:s=a;break;case 4:r.label++;return{value:a[1],done:false};case 5:r.label++;i=a[1];a=[0];continue;case 7:a=r.ops.pop();r.trys.pop();continue;default:if(!(s=r.trys,s=s.length>0&&s[s.length-1])&&(a[0]===6||a[0]===2)){r=0;continue}if(a[0]===3&&(!s||a[1]>s[0]&&a[1]<s[3])){r.label=a[1];break}if(a[0]===6&&r.label<s[1]){r.label=s[1];s=a;break}if(s&&r.label<s[2]){r.label=s[2];r.ops.push(a);break}if(s[2])r.ops.pop();r.trys.pop();continue}a=t.call(e,r)}catch(e){a=[6,e];i=0}finally{o=s=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./p-7b184ebb.system.js","./p-a408bfba.system.js"],(function(e){"use strict";var t,r,o,i,s,n,a;return{setters:[function(e){t=e.r;r=e.c;o=e.h;i=e.F;s=e.a;n=e.g},function(e){a=e.f}],execute:function(){var c=".sc-stzh-chip-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-chip-h{display:none}.sc-stzh-chip-h *.sc-stzh-chip,.sc-stzh-chip-h *.sc-stzh-chip::before,.sc-stzh-chip-h *.sc-stzh-chip::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-chip-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--height:2rem;--padding:0 var(--stzh-space-medium);--border-color:var(--stzh-color-grey13);--border-radius:1rem;--remove-color:var(--stzh-base-lead-color);--remove-border-radius:1.5rem;--background-color:var(--stzh-color-white);--icon-size:var(--stzh-icon-size-small);--icon-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--icon-gap:var(--stzh-space-xsmall);--counter-color:var(--stzh-color-primary60op);--counter-gap:var(--stzh-space-xsmall);--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--border-color);--hover-background-color:var(--stzh-color-primary8);--hover-remove-color:var(--hover-color);--hover-remove-background-color:var(--hover-background-color);--hover-icon-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-counter-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));display:-ms-inline-flexbox;display:inline-flex}@media (forced-colors: active), (-ms-high-contrast: active){.sc-stzh-chip-h{--hover-color:Highlight;--hover-border:0.0625rem solid Highlight;--hover-background-color:Canvas;--hover-remove-color:Highlight;--hover-remove-background-color:Canvas;--hover-icon-color:Highlight;--hover-counter-color:Highlight}}[size=large].sc-stzh-chip-h{--height:2.5rem;--border-radius:1.25rem;--padding:0 var(--stzh-space-xlarge)}[size=small].sc-stzh-chip-h{--height:1.5rem;--icon-size:var(--stzh-icon-size-xsmall);--counter-gap:var(--stzh-space-xxsmall)}[variant=input].sc-stzh-chip-h{--border-color:transparent;--background-color:var(--stzh-color-grey5);--hover-border-color:transparent}[variant=tag].sc-stzh-chip-h{--color:var(--stzh-base-color);--icon-color:var(--stzh-base-color);--counter-color:var(--stzh-base-color);--border-color:transparent;--background-color:var(--stzh-color-black8);--hover-color:var(--stzh-base-color);--hover-border-color:transparent;--hover-background-color:var(--stzh-color-black8);--hover-icon-color:var(--stzh-base-color);--hover-counter-color:var(--stzh-base-color)}[variant=input][size=small].sc-stzh-chip-h{--padding:0 var(--stzh-space-small);--icon-gap:var(--stzh-space-xxsmall)}[variant=tag][size=small].sc-stzh-chip-h{--padding:0 var(--stzh-space-xsmall);--icon-gap:var(--stzh-space-xxsmall)}[type=secondary].sc-stzh-chip-h{--color:var(--stzh-base-lead-color);--counter-color:var(--stzh-color-grey40)}[type=important].sc-stzh-chip-h{--color:var(--stzh-color-error);--icon-color:var(--stzh-color-error);--counter-color:var(--stzh-color-error);--hover-color:var(--stzh-color-error);--hover-icon-color:var(--stzh-color-error);--hover-counter-color:var(--stzh-color-error)}@media (forced-colors: active), (-ms-high-contrast: active){[type=important].sc-stzh-chip-h{--hover-color:Highlight;--hover-icon-color:Highlight;--hover-counter-color:Highlight}}[active].sc-stzh-chip-h:not([active=false]){--color:var(--stzh-color-white);--border-color:transparent;--remove-color:var(--stzh-color-white);--background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--icon-color:var(--stzh-color-white);--counter-color:var(--stzh-color-white56);--hover-color:var(--stzh-color-white);--hover-border-color:transparent;--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-remove-color:var(--stzh-color-white);--hover-remove-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-icon-color:var(--stzh-color-white);--hover-counter-color:var(--stzh-color-white56)}@media (forced-colors: active), (-ms-high-contrast: active){[active].sc-stzh-chip-h:not([active=false]){--color:SelectedItem;--border-color:SelectedItem;--remove-color:SelectedItem;--background-color:Canvas;--icon-color:SelectedItem;--counter-color:SelectedItem;--hover-color:Highlight;--hover-border-color:Highlight;--hover-background-color:Canvas;--hover-remove-color:Highlight;--hover-remove-background-color:Canvas;--hover-icon-color:Highlight;--hover-counter-color:Highlight}}[non-interactive].sc-stzh-chip-h:not([non-interactive=false]){--hover-color:var(--color);--hover-border:var(--border-color);--hover-background-color:var(--background-color);--hover-icon-color:var(--icon-color);--hover-counter-color:var(--counter-color)}[disabled].sc-stzh-chip-h:not([disabled=false]){--color:var(--stzh-color-grey25);--border-color:var(--stzh-base-border-color);--remove-color:var(--stzh-color-grey13);--background-color:var(--stzh-color-white);--icon-color:var(--stzh-color-grey25);--counter-color:var(--stzh-color-grey25);--hover-color:var(--stzh-color-grey25);--hover-border-color:var(--stzh-base-border-color);--hover-background-color:var(--stzh-color-white);--hover-remove-color:var(--stzh-color-grey13);--hover-remove-background-color:transparent;--hover-icon-color:var(--stzh-color-grey25);--hover-counter-color:var(--stzh-color-grey25)}.sc-stzh-chip-h .sc-stzh-chip-s>stzh-icon,.stzh-chip__icon.sc-stzh-chip{--size:var(--icon-size)}.stzh-chip.sc-stzh-chip{position:relative}.stzh-chip__vhidden.sc-stzh-chip{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-chip__button.sc-stzh-chip{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);font-family:inherit;height:var(--height);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;border-radius:var(--border-radius);padding:var(--padding);color:var(--color);-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:0.0625rem;border-style:solid;border-color:var(--border-color);background-color:var(--background-color);-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-chip__button.is-button.sc-stzh-chip,.stzh-chip__button.is-link.sc-stzh-chip{cursor:pointer}.stzh-chip__label.sc-stzh-chip{text-align:left}.stzh-chip__icon-wrapper.sc-stzh-chip{display:-ms-flexbox;display:flex;color:var(--icon-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);-ms-flex-negative:0;flex-shrink:0}.stzh-chip__icon-wrapper.sc-stzh-chip:not(:empty){margin-right:var(--icon-gap)}.stzh-chip__counter.sc-stzh-chip{display:-ms-flexbox;display:flex;font-variant-numeric:tabular-nums;margin-left:var(--counter-gap);color:var(--counter-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-chip__remove.sc-stzh-chip{position:absolute;top:0;right:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background:none;padding:0;width:var(--height);height:var(--height);border-radius:var(--remove-border-radius);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin-left:var(--stzh-space-xxsmall);color:var(--remove-color);-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;cursor:pointer}.stzh-chip__remove.sc-stzh-chip:hover{color:var(--hover-remove-color);background-color:var(--hover-remove-background-color)}.stzh-chip__remove-icon.sc-stzh-chip{--size:var(--stzh-icon-size-xxsmall)}.stzh-chip__button.sc-stzh-chip:hover,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip{color:var(--hover-color);background-color:var(--hover-background-color);border-color:var(--hover-border-color)}.stzh-chip__button.sc-stzh-chip:hover .stzh-chip__counter.sc-stzh-chip,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip .stzh-chip__counter.sc-stzh-chip{color:var(--hover-counter-color)}.stzh-chip__button.sc-stzh-chip:hover .stzh-chip__icon-wrapper.sc-stzh-chip,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip .stzh-chip__icon-wrapper.sc-stzh-chip{color:var(--hover-icon-color)}.stzh-chip--size-small.sc-stzh-chip .stzh-chip__button.sc-stzh-chip{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-chip--is-removable.sc-stzh-chip .stzh-chip__button.sc-stzh-chip{padding-right:calc(var(--height) + var(--stzh-space-xxsmall))}.stzh-chip--is-disabled.sc-stzh-chip .stzh-chip__button.sc-stzh-chip,.stzh-chip--is-disabled.sc-stzh-chip .stzh-chip__remove.sc-stzh-chip{cursor:not-allowed}";var h=e("stzh_chip",function(){function e(e){var o=this;t(this,e);this.stzhClick=r(this,"stzhClick",7);this.stzhRemove=r(this,"stzhRemove",7);this.stzhFocus=r(this,"stzhFocus",7);this.stzhBlur=r(this,"stzhBlur",7);this.focusedByInput=false;this.onRootFocus=function(){if(!o.focusedByInput){o.setFocus()}o.focusedByInput=false};this.onFocus=function(e){o.focusedByInput=true;var t=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});o.element.dispatchEvent(t);o.stzhFocus.emit({component:"stzh-chip",originalEvent:e})};this.onBlur=function(e){var t=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});o.element.dispatchEvent(t);o.stzhBlur.emit({component:"stzh-chip",originalEvent:e})};this.onClick=function(e){o.stzhClick.emit({component:"stzh-chip",originalEvent:e})};this.onRemoveClick=function(e){o.stzhRemove.emit({component:"stzh-chip",originalEvent:e})};this.label="";this.icon="";this.href="";this.target="";this.nonInteractive=false;this.removable=false;this.variant="tag";this.size="default";this.type="default";this.counter="";this.removeLabel="";this.active=false;this.disabled=false;this.a11yTabindex=undefined;this.a11yLabel=undefined;this.a11yDescribedby="";this.analyticsId=undefined;this.removeAnalyticsId=undefined}e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.chip.focus();return[2]}))}))};e.prototype.componentDidRender=function(){var e=this;requestAnimationFrame((function(){e.chip.setAttribute("s-object-id",e.analyticsId||e.text.innerText)}))};e.prototype.renderInner=function(){var e=this;return o(i,null,o("div",{class:"stzh-chip__icon-wrapper"},this.icon?o("stzh-icon",{class:"stzh-chip__icon",name:this.icon}):o("slot",{name:"icon"})),o("stzh-clamp",{lines:1,class:"stzh-chip__label",ref:function(t){return e.text=t}},this.label?this.label:o("slot",null),this.counter&&o("span",{class:"stzh-chip__vhidden"}," (",this.counter,")")),this.counter&&o("div",{class:"stzh-chip__counter","aria-hidden":"true"},this.counter))};e.prototype.render=function(){var e;var t=this;var r=(e={"stzh-chip":true,"stzh-chip--is-active":this.active,"stzh-chip--is-disabled":this.disabled,"stzh-chip--is-removable":this.removable,"stzh-chip--has-counter":!!this.counter},e["stzh-chip--type-".concat(this.type)]=!!this.type,e["stzh-chip--size-".concat(this.size)]=!!this.size,e["stzh-chip--".concat(this.variant)]=!!this.variant,e);var i=this.nonInteractive?"div":this.href?"a":"button";return o(s,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},o("div",{class:r},this.removable&&o("button",{class:"stzh-chip__remove",onClick:this.onRemoveClick,disabled:this.disabled,"aria-label":this.removeLabel,type:"button","s-object-id":this.removeAnalyticsId||this.removeLabel},o("stzh-icon",{class:"stzh-chip__remove-icon",name:"close"})),this.href?o(i,{ref:function(e){return t.chip=e},class:{"stzh-chip__button":true,"is-button":!this.nonInteractive&&!this.href,"is-link":!this.nonInteractive&&!!this.href},href:this.disabled?null:this.href,target:this.target,tabindex:this.a11yTabindex,"aria-label":this.a11yLabel,"aria-describedby":this.a11yDescribedby,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner()):o(i,{ref:function(e){return t.chip=e},class:{"stzh-chip__button":true,"is-button":!this.nonInteractive&&!this.href,"is-link":!this.nonInteractive&&!!this.href},disabled:this.disabled,type:"button",tabindex:this.a11yTabindex,"aria-label":this.a11yLabel,"aria-describedby":this.a11yDescribedby,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner())))};Object.defineProperty(e.prototype,"element",{get:function(){return n(this)},enumerable:false,configurable:true});return e}());h.style=c;var l=":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}stzh-clamp{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;--current-lines:var(--lines, 0);width:100%;color:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;font-size:inherit;line-height:inherit}stzh-clamp[hidden]{display:none}stzh-clamp *,stzh-clamp *::before,stzh-clamp *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}@media screen and (min-width: 600px){stzh-clamp{--current-lines:var(--lines-small, var(--lines, 0))}}@media screen and (min-width: 1024px){stzh-clamp{--current-lines:var(--lines-medium, var(--lines-small, var(--lines, 0)))}}@media screen and (min-width: 1260px){stzh-clamp{--current-lines:var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0))))}}@media screen and (min-width: 1440px){stzh-clamp{--current-lines:var(--lines-ultra, var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0)))))}}.stzh-clamp{position:relative}.stzh-clamp__text{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.stzh-clamp__text>*:first-child{margin-top:0 !important}.stzh-clamp__text>*:last-child{margin-bottom:0 !important}.stzh-clamp__text.is-clone{position:absolute;visibility:hidden;opacity:0;top:0;left:0;width:100%}.stzh-clamp__trigger{margin-top:var(--stzh-space-xxsmall)}.stzh-clamp--is-not-expanded .stzh-clamp__text,.stzh-clamp__text.is-clone{-webkit-line-clamp:var(--current-lines);line-clamp:var(--current-lines)}";var p=e("stzh_clamp",function(){function e(e){var o=this;t(this,e);this.stzhClamp=r(this,"stzhClamp",7);this.stzhExpand=r(this,"stzhExpand",7);this.updateClamped=function(){if(!o.textCloneElement){return}var e=o.clamped;o.clamped=o.textCloneElement.scrollHeight>o.textCloneElement.clientHeight;if(e!==o.clamped){o.stzhClamp.emit({component:"stzh-clamp",clamped:o.clamped})}};this.handleResize=function(){if(o.debounceResize){window.cancelAnimationFrame(o.debounceResize)}o.debounceResize=requestAnimationFrame(o.updateClamped)};this.handleMutaton=function(){o.update()};this.handleExpandClick=function(){o.expanded=!o.expanded;o.stzhExpand.emit({component:"stzh-clamp",expanded:o.expanded})};this.localization=undefined;this.lines=1;this.linesSmall=0;this.linesMedium=0;this.linesLarge=0;this.linesUltra=0;this.showExpandLink=false;this.expanded=false;this.clamped=false}e.prototype.update=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.textCloneElement.innerHTML=this.textElement.innerHTML;this.updateClamped();return[2]}))}))};e.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){switch(t.label){case 0:if(!!this.localization)return[3,2];e=this;return[4,a(this.element,"clamp")];case 1:e.localization=t.sent();t.label=2;case 2:return[2]}}))}))};e.prototype.componentDidLoad=function(){this.mutationObserver=new MutationObserver(this.handleMutaton);this.mutationObserver.observe(this.textElement,{childList:true,subtree:true})};e.prototype.componentDidRender=function(){this.update()};e.prototype.connectedCallback=function(){this.resizeObserver=new ResizeObserver(this.handleResize);this.resizeObserver.observe(this.element)};e.prototype.disconnectedCallback=function(){if(this.resizeObserver){this.resizeObserver.disconnect()}if(this.mutationObserver){this.mutationObserver.disconnect()}};e.prototype.render=function(){var e=this;var t={"stzh-clamp":true,"stzh-clamp--is-not-expanded":!this.expanded};return o(s,{style:{"--lines":this.lines?this.lines.toString():null,"--lines-small":this.linesSmall?this.linesSmall.toString():null,"--lines-medium":this.linesMedium?this.linesMedium.toString():null,"--lines-large":this.linesLarge?this.linesLarge.toString():null,"--lines-ultra":this.linesUltra?this.linesUltra.toString():null}},o("div",{class:t},o("div",{ref:function(t){return e.textElement=t},class:"stzh-clamp__text"},o("slot",null)),o("div",{ref:function(t){return e.textCloneElement=t},class:"stzh-clamp__text is-clone","aria-hidden":"true"}),this.showExpandLink&&this.clamped&&o("stzh-link",{class:"stzh-clamp__trigger",a11yTabindex:"-1","aria-hidden":"true",onClick:this.handleExpandClick},!this.expanded?this.localization.showMore:this.localization.showLess)))};Object.defineProperty(e.prototype,"element",{get:function(){return n(this)},enumerable:false,configurable:true});return e}());p.style=l}}}));
-//# sourceMappingURL=p-f5c99792.system.entry.js.map
+var __awaiter=this&&this.__awaiter||function(e,t,r,o){function i(e){return e instanceof r?e:new r((function(t){t(e)}))}return new(r||(r=Promise))((function(r,s){function n(e){try{c(o.next(e))}catch(e){s(e)}}function a(e){try{c(o["throw"](e))}catch(e){s(e)}}function c(e){e.done?r(e.value):i(e.value).then(n,a)}c((o=o.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var r={label:0,sent:function(){if(s[0]&1)throw s[1];return s[1]},trys:[],ops:[]},o,i,s,n;return n={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(n[Symbol.iterator]=function(){return this}),n;function a(e){return function(t){return c([e,t])}}function c(a){if(o)throw new TypeError("Generator is already executing.");while(n&&(n=0,a[0]&&(r=0)),r)try{if(o=1,i&&(s=a[0]&2?i["return"]:a[0]?i["throw"]||((s=i["return"])&&s.call(i),0):i.next)&&!(s=s.call(i,a[1])).done)return s;if(i=0,s)a=[a[0]&2,s.value];switch(a[0]){case 0:case 1:s=a;break;case 4:r.label++;return{value:a[1],done:false};case 5:r.label++;i=a[1];a=[0];continue;case 7:a=r.ops.pop();r.trys.pop();continue;default:if(!(s=r.trys,s=s.length>0&&s[s.length-1])&&(a[0]===6||a[0]===2)){r=0;continue}if(a[0]===3&&(!s||a[1]>s[0]&&a[1]<s[3])){r.label=a[1];break}if(a[0]===6&&r.label<s[1]){r.label=s[1];s=a;break}if(s&&r.label<s[2]){r.label=s[2];r.ops.push(a);break}if(s[2])r.ops.pop();r.trys.pop();continue}a=t.call(e,r)}catch(e){a=[6,e];i=0}finally{o=s=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./p-7b184ebb.system.js","./p-a408bfba.system.js"],(function(e){"use strict";var t,r,o,i,s,n,a;return{setters:[function(e){t=e.r;r=e.c;o=e.h;i=e.F;s=e.a;n=e.g},function(e){a=e.f}],execute:function(){var c=".sc-stzh-chip-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-chip-h{display:none}.sc-stzh-chip-h *.sc-stzh-chip,.sc-stzh-chip-h *.sc-stzh-chip::before,.sc-stzh-chip-h *.sc-stzh-chip::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-chip-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--height:2rem;--padding:0 var(--stzh-space-medium);--border-color:var(--stzh-color-grey13);--border-radius:1rem;--remove-color:var(--stzh-base-lead-color);--remove-border-radius:1.5rem;--background-color:var(--stzh-color-white);--icon-size:var(--stzh-icon-size-small);--icon-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--icon-gap:var(--stzh-space-xsmall);--counter-color:var(--stzh-color-primary60op);--counter-gap:var(--stzh-space-xsmall);--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--border-color);--hover-background-color:var(--stzh-color-primary8);--hover-remove-color:var(--hover-color);--hover-remove-background-color:var(--hover-background-color);--hover-icon-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-counter-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));display:-ms-inline-flexbox;display:inline-flex}@media (forced-colors: active), (-ms-high-contrast: active){.sc-stzh-chip-h{--hover-color:Highlight;--hover-border:0.0625rem solid Highlight;--hover-background-color:Canvas;--hover-remove-color:Highlight;--hover-remove-background-color:Canvas;--hover-icon-color:Highlight;--hover-counter-color:Highlight}}[size=large].sc-stzh-chip-h{--height:2.5rem;--border-radius:1.25rem;--padding:0 var(--stzh-space-xlarge)}[size=small].sc-stzh-chip-h{--height:1.5rem;--icon-size:var(--stzh-icon-size-xsmall);--counter-gap:var(--stzh-space-xxsmall)}[variant=input].sc-stzh-chip-h{--border-color:transparent;--background-color:var(--stzh-color-grey5);--hover-border-color:transparent}[variant=tag].sc-stzh-chip-h{--color:var(--stzh-base-color);--icon-color:var(--stzh-base-color);--counter-color:var(--stzh-base-color);--border-color:transparent;--background-color:var(--stzh-color-black8);--hover-color:var(--stzh-base-color);--hover-border-color:transparent;--hover-background-color:var(--stzh-color-black8);--hover-icon-color:var(--stzh-base-color);--hover-counter-color:var(--stzh-base-color)}[variant=input][size=small].sc-stzh-chip-h{--padding:0 var(--stzh-space-small);--icon-gap:var(--stzh-space-xxsmall)}[variant=tag][size=small].sc-stzh-chip-h{--padding:0 var(--stzh-space-xsmall);--icon-gap:var(--stzh-space-xxsmall)}[type=secondary].sc-stzh-chip-h{--color:var(--stzh-base-lead-color);--counter-color:var(--stzh-color-grey40)}[type=important].sc-stzh-chip-h{--color:var(--stzh-color-error);--icon-color:var(--stzh-color-error);--counter-color:var(--stzh-color-error);--hover-color:var(--stzh-color-error);--hover-icon-color:var(--stzh-color-error);--hover-counter-color:var(--stzh-color-error)}@media (forced-colors: active), (-ms-high-contrast: active){[type=important].sc-stzh-chip-h{--hover-color:Highlight;--hover-icon-color:Highlight;--hover-counter-color:Highlight}}[active].sc-stzh-chip-h:not([active=false]){--color:var(--stzh-color-white);--border-color:transparent;--remove-color:var(--stzh-color-white);--background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--icon-color:var(--stzh-color-white);--counter-color:var(--stzh-color-white56);--hover-color:var(--stzh-color-white);--hover-border-color:transparent;--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-remove-color:var(--stzh-color-white);--hover-remove-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-icon-color:var(--stzh-color-white);--hover-counter-color:var(--stzh-color-white56)}@media (forced-colors: active), (-ms-high-contrast: active){[active].sc-stzh-chip-h:not([active=false]){--color:SelectedItem;--border-color:SelectedItem;--remove-color:SelectedItem;--background-color:Canvas;--icon-color:SelectedItem;--counter-color:SelectedItem;--hover-color:Highlight;--hover-border-color:Highlight;--hover-background-color:Canvas;--hover-remove-color:Highlight;--hover-remove-background-color:Canvas;--hover-icon-color:Highlight;--hover-counter-color:Highlight}}[non-interactive].sc-stzh-chip-h:not([non-interactive=false]){--hover-color:var(--color);--hover-border:var(--border-color);--hover-background-color:var(--background-color);--hover-icon-color:var(--icon-color);--hover-counter-color:var(--counter-color)}[disabled].sc-stzh-chip-h:not([disabled=false]){--color:var(--stzh-color-grey25);--border-color:var(--stzh-base-border-color);--remove-color:var(--stzh-color-grey13);--background-color:var(--stzh-color-white);--icon-color:var(--stzh-color-grey25);--counter-color:var(--stzh-color-grey25);--hover-color:var(--stzh-color-grey25);--hover-border-color:var(--stzh-base-border-color);--hover-background-color:var(--stzh-color-white);--hover-remove-color:var(--stzh-color-grey13);--hover-remove-background-color:transparent;--hover-icon-color:var(--stzh-color-grey25);--hover-counter-color:var(--stzh-color-grey25)}.sc-stzh-chip-h .sc-stzh-chip-s>stzh-icon,.stzh-chip__icon.sc-stzh-chip{--size:var(--icon-size)}.stzh-chip.sc-stzh-chip{position:relative}.stzh-chip__vhidden.sc-stzh-chip{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-chip__button.sc-stzh-chip{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);font-family:inherit;height:var(--height);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;border-radius:var(--border-radius);padding:var(--padding);color:var(--color);-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:0.0625rem;border-style:solid;border-color:var(--border-color);background-color:var(--background-color);-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-chip__button.is-button.sc-stzh-chip,.stzh-chip__button.is-link.sc-stzh-chip{cursor:pointer}.stzh-chip__label.sc-stzh-chip{text-align:left}.stzh-chip__icon-wrapper.sc-stzh-chip{display:-ms-flexbox;display:flex;color:var(--icon-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);-ms-flex-negative:0;flex-shrink:0}.stzh-chip__icon-wrapper.sc-stzh-chip:not(:empty){margin-right:var(--icon-gap)}.stzh-chip__counter.sc-stzh-chip{display:-ms-flexbox;display:flex;font-variant-numeric:tabular-nums;margin-left:var(--counter-gap);color:var(--counter-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-chip__remove.sc-stzh-chip{position:absolute;top:0;right:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background:none;padding:0;width:var(--height);height:var(--height);border-radius:var(--remove-border-radius);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin-left:var(--stzh-space-xxsmall);color:var(--remove-color);-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;cursor:pointer}.stzh-chip__remove.sc-stzh-chip:hover{color:var(--hover-remove-color);background-color:var(--hover-remove-background-color)}.stzh-chip__remove-icon.sc-stzh-chip{--size:var(--stzh-icon-size-xxsmall)}.stzh-chip__button.sc-stzh-chip:hover,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip{color:var(--hover-color);background-color:var(--hover-background-color);border-color:var(--hover-border-color)}.stzh-chip__button.sc-stzh-chip:hover .stzh-chip__counter.sc-stzh-chip,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip .stzh-chip__counter.sc-stzh-chip{color:var(--hover-counter-color)}.stzh-chip__button.sc-stzh-chip:hover .stzh-chip__icon-wrapper.sc-stzh-chip,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip .stzh-chip__icon-wrapper.sc-stzh-chip{color:var(--hover-icon-color)}.stzh-chip--size-small.sc-stzh-chip .stzh-chip__button.sc-stzh-chip{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-chip--is-removable.sc-stzh-chip .stzh-chip__button.sc-stzh-chip{padding-right:calc(var(--height) + var(--stzh-space-xxsmall))}.stzh-chip--is-disabled.sc-stzh-chip .stzh-chip__button.sc-stzh-chip,.stzh-chip--is-disabled.sc-stzh-chip .stzh-chip__remove.sc-stzh-chip{cursor:not-allowed}";var h=e("stzh_chip",function(){function e(e){var o=this;t(this,e);this.stzhClick=r(this,"stzhClick",7);this.stzhRemove=r(this,"stzhRemove",7);this.stzhFocus=r(this,"stzhFocus",7);this.stzhBlur=r(this,"stzhBlur",7);this.focusedByInput=false;this.onRootFocus=function(){if(!o.focusedByInput){o.setFocus()}o.focusedByInput=false};this.onFocus=function(e){o.focusedByInput=true;var t=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});o.element.dispatchEvent(t);o.stzhFocus.emit({component:"stzh-chip",originalEvent:e})};this.onBlur=function(e){var t=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});o.element.dispatchEvent(t);o.stzhBlur.emit({component:"stzh-chip",originalEvent:e})};this.onClick=function(e){o.stzhClick.emit({component:"stzh-chip",originalEvent:e})};this.onRemoveClick=function(e){o.stzhRemove.emit({component:"stzh-chip",originalEvent:e})};this.label="";this.icon="";this.href="";this.target="";this.nonInteractive=false;this.removable=false;this.variant="tag";this.size="default";this.type="default";this.counter="";this.removeLabel="";this.active=false;this.disabled=false;this.a11yTabindex=undefined;this.a11yLabel=undefined;this.a11yDescribedby="";this.analyticsId=undefined;this.removeAnalyticsId=undefined}e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.chip.focus();return[2]}))}))};e.prototype.componentDidRender=function(){var e=this;requestAnimationFrame((function(){e.chip.setAttribute("s-object-id",e.analyticsId||e.text.innerText)}))};e.prototype.renderInner=function(){var e=this;return o(i,null,o("div",{class:"stzh-chip__icon-wrapper"},this.icon?o("stzh-icon",{class:"stzh-chip__icon",name:this.icon}):o("slot",{name:"icon"})),o("stzh-clamp",{lines:1,class:"stzh-chip__label",ref:function(t){return e.text=t}},this.label?this.label:o("slot",null),this.counter&&o("span",{class:"stzh-chip__vhidden"}," (",this.counter,")")),this.counter&&o("div",{class:"stzh-chip__counter","aria-hidden":"true"},this.counter))};e.prototype.render=function(){var e;var t=this;var r=(e={"stzh-chip":true,"stzh-chip--is-active":this.active,"stzh-chip--is-disabled":this.disabled,"stzh-chip--is-removable":this.removable,"stzh-chip--has-counter":!!this.counter},e["stzh-chip--type-".concat(this.type)]=!!this.type,e["stzh-chip--size-".concat(this.size)]=!!this.size,e["stzh-chip--".concat(this.variant)]=!!this.variant,e);var i=this.nonInteractive?"div":this.href?"a":"button";return o(s,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},o("div",{class:r},this.removable&&o("button",{class:"stzh-chip__remove",onClick:this.onRemoveClick,disabled:this.disabled,"aria-label":this.removeLabel,type:"button","s-object-id":this.removeAnalyticsId||this.removeLabel},o("stzh-icon",{class:"stzh-chip__remove-icon",name:"close"})),this.href?o(i,{ref:function(e){return t.chip=e},class:{"stzh-chip__button":true,"is-button":!this.nonInteractive&&!this.href,"is-link":!this.nonInteractive&&!!this.href},href:this.disabled?null:this.href,target:this.target,tabindex:this.a11yTabindex,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner()):o(i,{ref:function(e){return t.chip=e},class:{"stzh-chip__button":true,"is-button":!this.nonInteractive&&!this.href,"is-link":!this.nonInteractive&&!!this.href},disabled:this.disabled,type:"button",tabindex:this.a11yTabindex,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner())))};Object.defineProperty(e.prototype,"element",{get:function(){return n(this)},enumerable:false,configurable:true});return e}());h.style=c;var l=":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}stzh-clamp{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;--current-lines:var(--lines, 0);width:100%;color:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;font-size:inherit;line-height:inherit}stzh-clamp[hidden]{display:none}stzh-clamp *,stzh-clamp *::before,stzh-clamp *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}@media screen and (min-width: 600px){stzh-clamp{--current-lines:var(--lines-small, var(--lines, 0))}}@media screen and (min-width: 1024px){stzh-clamp{--current-lines:var(--lines-medium, var(--lines-small, var(--lines, 0)))}}@media screen and (min-width: 1260px){stzh-clamp{--current-lines:var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0))))}}@media screen and (min-width: 1440px){stzh-clamp{--current-lines:var(--lines-ultra, var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0)))))}}.stzh-clamp{position:relative}.stzh-clamp__text{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.stzh-clamp__text>*:first-child{margin-top:0 !important}.stzh-clamp__text>*:last-child{margin-bottom:0 !important}.stzh-clamp__text.is-clone{position:absolute;visibility:hidden;opacity:0;top:0;left:0;width:100%}.stzh-clamp__trigger{margin-top:var(--stzh-space-xxsmall)}.stzh-clamp--is-not-expanded .stzh-clamp__text,.stzh-clamp__text.is-clone{-webkit-line-clamp:var(--current-lines);line-clamp:var(--current-lines)}";var p=e("stzh_clamp",function(){function e(e){var o=this;t(this,e);this.stzhClamp=r(this,"stzhClamp",7);this.stzhExpand=r(this,"stzhExpand",7);this.updateClamped=function(){if(!o.textCloneElement){return}var e=o.clamped;o.clamped=o.textCloneElement.scrollHeight>o.textCloneElement.clientHeight;if(e!==o.clamped){o.stzhClamp.emit({component:"stzh-clamp",clamped:o.clamped})}};this.handleResize=function(){if(o.debounceResize){window.cancelAnimationFrame(o.debounceResize)}o.debounceResize=requestAnimationFrame(o.updateClamped)};this.handleMutaton=function(){o.update()};this.handleExpandClick=function(){o.expanded=!o.expanded;o.stzhExpand.emit({component:"stzh-clamp",expanded:o.expanded})};this.localization=undefined;this.lines=1;this.linesSmall=0;this.linesMedium=0;this.linesLarge=0;this.linesUltra=0;this.showExpandLink=false;this.expanded=false;this.clamped=false}e.prototype.update=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.textCloneElement.innerHTML=this.textElement.innerHTML;this.updateClamped();return[2]}))}))};e.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){switch(t.label){case 0:if(!!this.localization)return[3,2];e=this;return[4,a(this.element,"clamp")];case 1:e.localization=t.sent();t.label=2;case 2:return[2]}}))}))};e.prototype.componentDidLoad=function(){this.mutationObserver=new MutationObserver(this.handleMutaton);this.mutationObserver.observe(this.textElement,{childList:true,subtree:true})};e.prototype.componentDidRender=function(){this.update()};e.prototype.connectedCallback=function(){this.resizeObserver=new ResizeObserver(this.handleResize);this.resizeObserver.observe(this.element)};e.prototype.disconnectedCallback=function(){if(this.resizeObserver){this.resizeObserver.disconnect()}if(this.mutationObserver){this.mutationObserver.disconnect()}};e.prototype.render=function(){var e=this;var t={"stzh-clamp":true,"stzh-clamp--is-not-expanded":!this.expanded};return o(s,{style:{"--lines":this.lines?this.lines.toString():null,"--lines-small":this.linesSmall?this.linesSmall.toString():null,"--lines-medium":this.linesMedium?this.linesMedium.toString():null,"--lines-large":this.linesLarge?this.linesLarge.toString():null,"--lines-ultra":this.linesUltra?this.linesUltra.toString():null}},o("div",{class:t},o("div",{ref:function(t){return e.textElement=t},class:"stzh-clamp__text"},o("slot",null)),o("div",{ref:function(t){return e.textCloneElement=t},class:"stzh-clamp__text is-clone","aria-hidden":"true"}),this.showExpandLink&&this.clamped&&o("stzh-link",{class:"stzh-clamp__trigger",a11yTabindex:"-1","aria-hidden":"true",onClick:this.handleExpandClick},!this.expanded?this.localization.showMore:this.localization.showLess)))};Object.defineProperty(e.prototype,"element",{get:function(){return n(this)},enumerable:false,configurable:true});return e}());p.style=l}}}));
+//# sourceMappingURL=p-8547ae9e.system.entry.js.map

package/dist/stzh-components/{p-f5c99792.system.entry.js.map → p-8547ae9e.system.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stzhChipCss","StzhChip","exports","this","focusedByInput","onRootFocus","_this","setFocus","onFocus","event","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","emit","component","originalEvent","onBlur","blurEvent","stzhBlur","onClick","stzhClick","onRemoveClick","stzhRemove","class_1","prototype","chip","focus","componentDidRender","requestAnimationFrame","setAttribute","analyticsId","text","innerText","renderInner","h","Fragment","class","icon","name","lines","ref","el","label","counter","render","classes","_a","active","disabled","removable","concat","type","size","variant","Chip","nonInteractive","href","Host","tabindex","removeLabel","removeAnalyticsId","target","a11yTabindex","a11yLabel","a11yDescribedby","stzhClampCss","StzhClamp","updateClamped","textCloneElement","beforeClamped","clamped","scrollHeight","clientHeight","stzhClamp","handleResize","debounceResize","cancelAnimationFrame","handleMutaton","update","handleExpandClick","expanded","stzhExpand","class_2","innerHTML","textElement","componentWillLoad","localization","fetchTranslations","_b","sent","componentDidLoad","mutationObserver","MutationObserver","observe","childList","subtree","connectedCallback","resizeObserver","ResizeObserver","disconnectedCallback","disconnect","style","toString","linesSmall","linesMedium","linesLarge","linesUltra","showExpandLink","showMore","showLess"],"sources":["src/components/stzh-chip/stzh-chip.scss?tag=stzh-chip&encapsulation=scoped","src/components/stzh-chip/stzh-chip.tsx","src/components/stzh-clamp/stzh-clamp.scss?tag=stzh-clamp","src/components/stzh-clamp/stzh-clamp.tsx"],"sourcesContent":[":host {\n  --color: #{$colorPrimary};\n  --height: 32px;\n  --padding: 0 #{space('medium')};\n  --border-color: #{$colorGrey13};\n  --border-radius: 16px;\n  --remove-color: #{$baseLeadColor};\n  --remove-border-radius: 24px;\n  --background-color: #{$colorWhite};\n  --icon-size: #{iconSize('small')};\n  --icon-color: #{$colorPrimary};\n  --icon-gap: #{space('xsmall')};\n  --counter-color: #{$colorPrimary60op};\n  --counter-gap: #{space('xsmall')};\n\n  --hover-color: #{$colorPrimaryHover};\n  --hover-border-color: var(--border-color);\n  --hover-background-color: #{$colorPrimary8};\n  --hover-remove-color: var(--hover-color);\n  --hover-remove-background-color: var(--hover-background-color);\n  --hover-icon-color: #{$colorPrimaryHover};\n  --hover-counter-color: #{$colorPrimaryHover};\n\n  display: inline-flex;\n\n  @include highContrast() {\n    --hover-color: Highlight;\n    --hover-border: 1px solid Highlight;\n    --hover-background-color: Canvas;\n    --hover-remove-color: Highlight;\n    --hover-remove-background-color: Canvas;\n    --hover-icon-color: Highlight;\n    --hover-counter-color: Highlight;\n  }\n\n  &[size=\"large\"] {\n    --height: 40px;\n    --border-radius: 20px;\n    --padding: 0 #{space('xlarge')};\n  }\n\n  &[size=\"small\"] {\n    --height: 24px;\n    --icon-size: #{iconSize('xsmall')};\n    --counter-gap: #{space('xxsmall')};\n  }\n\n  &[variant=\"input\"] {\n    --border-color: transparent;\n    --background-color: #{$colorGrey5};\n\n    --hover-border-color: transparent;\n  }\n\n  &[variant=\"tag\"] {\n    --color: #{$baseColor};\n    --icon-color: #{$baseColor};\n    --counter-color: #{$baseColor};\n    --border-color: transparent;\n    --background-color: #{$colorBlack8};\n\n    --hover-color: #{$baseColor};\n    --hover-border-color: transparent;\n    --hover-background-color: #{$colorBlack8};\n    --hover-icon-color: #{$baseColor};\n    --hover-counter-color: #{$baseColor};\n  }\n\n  &[variant=\"input\"][size=\"small\"] {\n    --padding: 0 #{space('small')};\n    --icon-gap: #{space('xxsmall')};\n  }\n\n  &[variant=\"tag\"][size=\"small\"] {\n    --padding: 0 #{space('xsmall')};\n    --icon-gap: #{space('xxsmall')};\n  }\n\n  &[type=\"secondary\"] {\n    --color: #{$baseLeadColor};\n    --counter-color: #{$colorGrey40};\n  }\n\n  &[type=\"important\"] {\n    --color: #{$colorError};\n    --icon-color: #{$colorError};\n    --counter-color: #{$colorError};\n\n    --hover-color: #{$colorError};\n    --hover-icon-color: #{$colorError};\n    --hover-counter-color: #{$colorError};\n\n    @include highContrast() {\n      --hover-color: Highlight;\n      --hover-icon-color: Highlight;\n      --hover-counter-color: Highlight;\n    }\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: #{$colorWhite};\n    --border-color: transparent;\n    --remove-color: #{$colorWhite};\n    --background-color: #{$colorPrimary};\n    --icon-color: #{$colorWhite};\n    --counter-color: #{$colorWhite56};\n\n    --hover-color: #{$colorWhite};\n    --hover-border-color: transparent;\n    --hover-background-color: #{$colorPrimaryHover};\n    --hover-remove-color: #{$colorWhite};\n    --hover-remove-background-color: #{$colorPrimaryHover};\n    --hover-icon-color: #{$colorWhite};\n    --hover-counter-color: #{$colorWhite56};\n\n    @include highContrast() {\n      --color: SelectedItem;\n      --border-color: SelectedItem;\n      --remove-color: SelectedItem;\n      --background-color: Canvas;\n      --icon-color: SelectedItem;\n      --counter-color: SelectedItem;\n\n      --hover-color: Highlight;\n      --hover-border-color: Highlight;\n      --hover-background-color: Canvas;\n      --hover-remove-color: Highlight;\n      --hover-remove-background-color: Canvas;\n      --hover-icon-color: Highlight;\n      --hover-counter-color: Highlight;\n    }\n  }\n\n  &[non-interactive]:not([non-interactive=\"false\"]) {\n    --hover-color: var(--color);\n    --hover-border: var(--border-color);\n    --hover-background-color: var(--background-color);\n    --hover-icon-color: var(--icon-color);\n    --hover-counter-color: var(--counter-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorGrey25};\n    --border-color: #{$baseBorderColor};\n    --remove-color: #{$colorGrey13};\n    --background-color: #{$colorWhite};\n    --icon-color: #{$colorGrey25};\n    --counter-color: #{$colorGrey25};\n\n    --hover-color: #{$colorGrey25};\n    --hover-border-color: #{$baseBorderColor};\n    --hover-background-color: #{$colorWhite};\n    --hover-remove-color: #{$colorGrey13};\n    --hover-remove-background-color: transparent;\n    --hover-icon-color: #{$colorGrey25};\n    --hover-counter-color: #{$colorGrey25};\n  }\n}\n\n:host ::slotted(stzh-icon),\n.stzh-chip__icon {\n  --size: var(--icon-size);\n}\n\n.stzh-chip {\n  position: relative;\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__button {\n    @include fontSize('micro');\n    font-family: inherit;\n    height: var(--height);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    border-radius: var(--border-radius);\n    padding: var(--padding);\n    color: var(--color);\n    appearance: none;\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--border-color);\n    background-color: var(--background-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color, border-color;\n    text-decoration-line: none;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__label {\n    text-align: left;\n  }\n\n  &__icon-wrapper {\n    display: flex;\n    color: var(--icon-color);\n    transition: color $baseTransitionAnimationSpeed;\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      margin-right: var(--icon-gap);\n    }\n  }\n\n  &__counter {\n    display: flex;\n    font-variant-numeric: tabular-nums;\n    margin-left: var(--counter-gap);\n    color: var(--counter-color);\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  &__remove {\n    position: absolute;\n    top: 0;\n    right: 0;\n    appearance: none;\n    font-family: inherit;\n    border: none;\n    background: none;\n    padding: 0;\n    width: var(--height);\n    height: var(--height);\n    border-radius: var(--remove-border-radius);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-left: space('xxsmall');\n    color: var(--remove-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color, border-color;\n    cursor: pointer;\n\n    &:hover {\n      color: var(--hover-remove-color);\n      background-color: var(--hover-remove-background-color);\n    }\n  }\n\n  &__remove-icon {\n    --size: #{iconSize('xxsmall')};\n  }\n\n  &__button:hover,\n  &__remove:hover + &__button {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n    border-color: var(--hover-border-color);\n  }\n\n  &__button:hover &__counter,\n  &__remove:hover + &__button &__counter {\n    color: var(--hover-counter-color);\n  }\n\n  &__button:hover &__icon-wrapper,\n  &__remove:hover + &__button &__icon-wrapper {\n    color: var(--hover-icon-color);\n  }\n\n  /* Size */\n\n  &--size-small &__button {\n    @include fontSize('nano');\n  }\n\n  /* Removeable */\n\n  &--is-removable &__button {\n    padding-right: calc(var(--height) + #{space('xxsmall')});\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button,\n  &--is-disabled &__remove {\n    cursor: not-allowed;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n  Fragment\n} from \"@stencil/core\";\n\nimport {\n  StzhChipClickEvent,\n  StzhChipRemoveEvent,\n  StzhChipFocusEvent,\n  StzhChipBlurEvent\n} from \"../../index\";\n\n/**\n * @slot - Slot for label\n * @slot icon - Slot for icon\n */\n@Component({\n  tag: \"stzh-chip\",\n  styleUrl: \"stzh-chip.scss\",\n  scoped: true\n})\nexport class StzhChip {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** `href` if the chip should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Whether chip is not interactive */\n  @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n  /** Whether remove button should be shown */\n  @Prop({ reflect: true }) removable: boolean = false;\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"tag\" | \"filter\" | \"input\" = \"tag\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" | \"large\" = \"default\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: \"default\" | \"secondary\" | \"important\" = \"default\";\n\n  /** Counter */\n  @Prop() counter: string = \"\";\n\n  /** Label of remove button for screenreaders */\n  @Prop() removeLabel: string = \"\";\n\n  /** Active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the link/button */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the remove button element.\n   * Default value will be taken from `removeLabel` prop.\n   */\n  @Prop() removeAnalyticsId: string;\n\n  @Element() element: HTMLStzhChipElement;\n\n  /** Focus menu item */\n  @Method()\n  async setFocus() {\n    this.chip.focus();\n  }\n\n  /** Chip click event */\n  @Event() stzhClick: EventEmitter<StzhChipClickEvent>;\n\n  /** Chip remove event */\n  @Event() stzhRemove: EventEmitter<StzhChipRemoveEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhChipFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhChipBlurEvent>;\n\n  private chip: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLElement;\n  private focusedByInput: boolean = false;\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.chip.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(): DocumentFragment {\n    return (\n      <Fragment>\n        <div class=\"stzh-chip__icon-wrapper\">\n          {this.icon ?\n            <stzh-icon class=\"stzh-chip__icon\" name={this.icon}></stzh-icon>\n            :\n            <slot name=\"icon\"></slot>\n          }\n        </div>\n\n        <stzh-clamp\n          lines={1}\n          class=\"stzh-chip__label\"\n          ref={(el) => (this.text = el as HTMLElement)}\n        >\n          {this.label ? this.label : <slot></slot>}\n          {this.counter &&\n            <span class=\"stzh-chip__vhidden\">\n              &nbsp;({this.counter})\n            </span>\n          }\n        </stzh-clamp>\n\n        {this.counter &&\n          <div class=\"stzh-chip__counter\" aria-hidden=\"true\">\n            {this.counter}\n          </div>\n        }\n      </Fragment>\n    );\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.setFocus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-chip\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-chip\",\n      originalEvent: event\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-chip\",\n      originalEvent: event\n    });\n  }\n\n  private onRemoveClick = (event: MouseEvent) => {\n    this.stzhRemove.emit({\n      component: \"stzh-chip\",\n      originalEvent: event\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-chip\": true,\n      \"stzh-chip--is-active\": this.active,\n      \"stzh-chip--is-disabled\": this.disabled,\n      \"stzh-chip--is-removable\": this.removable,\n      \"stzh-chip--has-counter\": !!this.counter,\n      [`stzh-chip--type-${this.type}`]: !!this.type,\n      [`stzh-chip--size-${this.size}`]: !!this.size,\n      [`stzh-chip--${this.variant}`]: !!this.variant\n    };\n\n    const Chip = this.nonInteractive ? \"div\" :\n      this.href ? \"a\" : \"button\";\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {this.removable &&\n            <button\n              class=\"stzh-chip__remove\"\n              onClick={this.onRemoveClick}\n              disabled={this.disabled}\n              aria-label={this.removeLabel}\n              type=\"button\"\n              s-object-id={this.removeAnalyticsId || this.removeLabel}\n            >\n              <stzh-icon class=\"stzh-chip__remove-icon\" name=\"close\"></stzh-icon>\n            </button>\n          }\n\n          {this.href ?\n            <Chip\n              ref={(el) => (this.chip = el as HTMLAnchorElement)}\n              class={{\n                \"stzh-chip__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href\n              }}\n              href={this.disabled ? null : this.href}\n              target={this.target}\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel}\n              aria-describedby={this.a11yDescribedby}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Chip>\n            :\n            <Chip\n              ref={(el) => (this.chip = el as HTMLButtonElement)}\n              class={{\n                \"stzh-chip__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href\n              }}\n              disabled={this.disabled}\n              type=\"button\"\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel}\n              aria-describedby={this.a11yDescribedby}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Chip>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n","stzh-clamp {\n  @include host;\n  --current-lines: var(--lines, 0);\n\n  @include mq($from: small) {\n    --current-lines: var(--lines-small, var(--lines, 0));\n  }\n\n  @include mq($from: medium) {\n    --current-lines: var(--lines-medium, var(--lines-small, var(--lines, 0)));\n  }\n\n  @include mq($from: large) {\n    --current-lines: var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0))));\n  }\n\n  @include mq($from: ultra) {\n    --current-lines: var(--lines-ultra, var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0)))));\n  }\n\n  width: 100%;\n  color: inherit;\n  font-family: inherit;\n  font-weight: inherit;\n  font-style: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.stzh-clamp {\n  position: relative;\n\n  &__text {\n    @include wordWrap;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n\n    & > *:first-child {\n      margin-top: 0 !important;\n    }\n\n    & > *:last-child {\n      margin-bottom: 0 !important;\n    }\n\n    &.is-clone {\n      position: absolute;\n      visibility: hidden;\n      opacity: 0;\n      top: 0;\n      left: 0;\n      width: 100%;\n    }\n  }\n\n  &__trigger {\n    margin-top: space('xxsmall');\n  }\n\n  &--is-not-expanded &__text,\n  &__text.is-clone {\n    -webkit-line-clamp: var(--current-lines);\n    line-clamp: var(--current-lines);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Method,\n  Element,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhClampClampEvent,\n  StzhClampExpandEvent\n} from \"../../index\";\n\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { StzhClampLocalizedText } from \"./stzh-clamp.localization\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-clamp\",\n  styleUrl: \"stzh-clamp.scss\"\n})\nexport class StzhClamp {\n  /** Translation strings */\n  @Prop() localization: StzhClampLocalizedText;\n\n  /** Line number */\n  @Prop() lines: number = 1;\n  /** Line number above small breakpoint */\n  @Prop() linesSmall: number = 0;\n  /** Line number above medium breakpoint */\n  @Prop() linesMedium: number = 0;\n  /** Line number above large breakpoint */\n  @Prop() linesLarge: number = 0;\n  /** Line number above ultra breakpoint */\n  @Prop() linesUltra: number = 0;\n\n  /** Whether clamping is expanded */\n  @Prop() showExpandLink: boolean = false;\n\n  /** Whether clamping is expanded */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  /** Whether the text is currently clamped (readonly) */\n  @Prop({ mutable: true, reflect: true }) clamped: boolean = false;\n\n  @Element() element: HTMLStzhClampElement;\n\n  /** Event when clamping state changed */\n  @Event() stzhClamp: EventEmitter<StzhClampClampEvent>;\n\n  /** Event when expanding state changed */\n  @Event() stzhExpand: EventEmitter<StzhClampExpandEvent>;\n\n  @Method()\n  async update() {\n    this.textCloneElement.innerHTML = this.textElement.innerHTML;\n    this.updateClamped();\n  }\n\n  private textElement: HTMLElement;\n  private textCloneElement: HTMLElement;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n  private mutationObserver: MutationObserver;\n\n  private updateClamped = () => {\n    if (!this.textCloneElement) {\n      return;\n    }\n\n    const beforeClamped = this.clamped;\n    this.clamped = this.textCloneElement.scrollHeight > this.textCloneElement.clientHeight;\n\n    if (beforeClamped !== this.clamped) {\n      this.stzhClamp.emit({\n        component: \"stzh-clamp\",\n        clamped: this.clamped\n      });\n    }\n  }\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateClamped);\n  }\n\n  private handleMutaton = () => {\n    this.update();\n  }\n\n  private handleExpandClick = () => {\n    this.expanded = !this.expanded;\n\n    this.stzhExpand.emit({\n      component: \"stzh-clamp\",\n      expanded: this.expanded\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"clamp\");\n    }\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = new MutationObserver(this.handleMutaton);\n    this.mutationObserver.observe(this.textElement, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  componentDidRender() {\n    this.update();\n  }\n\n  connectedCallback() {\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-clamp\": true,\n      \"stzh-clamp--is-not-expanded\": !this.expanded\n    };\n\n    return (\n      <Host\n        style={{\n          '--lines': this.lines ? this.lines.toString() : null,\n          '--lines-small': this.linesSmall ? this.linesSmall.toString() : null,\n          '--lines-medium': this.linesMedium ? this.linesMedium.toString() : null,\n          '--lines-large': this.linesLarge ? this.linesLarge.toString() : null,\n          '--lines-ultra': this.linesUltra ? this.linesUltra.toString() : null,\n        }}\n      >\n        <div class={classes}>\n          <div\n            ref={(el) => (this.textElement = el as HTMLDivElement)}\n            class=\"stzh-clamp__text\"\n          >\n            <slot></slot>\n          </div>\n\n          <div\n            ref={(el) => (this.textCloneElement = el as HTMLDivElement)}\n            class=\"stzh-clamp__text is-clone\"\n            aria-hidden=\"true\"\n          ></div>\n\n          {this.showExpandLink && this.clamped &&\n            <stzh-link\n              class=\"stzh-clamp__trigger\"\n              a11yTabindex=\"-1\"\n              aria-hidden=\"true\"\n              onClick={this.handleExpandClick}\n            >\n              {!this.expanded ? this.localization.showMore : this.localization.showLess}\n            </stzh-link>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["stzhChipCss","StzhChip","exports","this","focusedByInput","onRootFocus","_this","setFocus","onFocus","event","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","emit","component","originalEvent","onBlur","blurEvent","stzhBlur","onClick","stzhClick","onRemoveClick","stzhRemove","class_1","prototype","chip","focus","componentDidRender","requestAnimationFrame","setAttribute","analyticsId","text","innerText","renderInner","h","Fragment","class","icon","name","lines","ref","el","label","counter","render","classes","_a","active","disabled","removable","concat","type","size","variant","Chip","nonInteractive","href","Host","tabindex","removeLabel","removeAnalyticsId","target","a11yTabindex","a11yLabel","a11yDescribedby","stzhClampCss","StzhClamp","updateClamped","textCloneElement","beforeClamped","clamped","scrollHeight","clientHeight","stzhClamp","handleResize","debounceResize","cancelAnimationFrame","handleMutaton","update","handleExpandClick","expanded","stzhExpand","class_2","innerHTML","textElement","componentWillLoad","localization","fetchTranslations","_b","sent","componentDidLoad","mutationObserver","MutationObserver","observe","childList","subtree","connectedCallback","resizeObserver","ResizeObserver","disconnectedCallback","disconnect","style","toString","linesSmall","linesMedium","linesLarge","linesUltra","showExpandLink","showMore","showLess"],"sources":["src/components/stzh-chip/stzh-chip.scss?tag=stzh-chip&encapsulation=scoped","src/components/stzh-chip/stzh-chip.tsx","src/components/stzh-clamp/stzh-clamp.scss?tag=stzh-clamp","src/components/stzh-clamp/stzh-clamp.tsx"],"sourcesContent":[":host {\n  --color: #{$colorPrimary};\n  --height: 32px;\n  --padding: 0 #{space('medium')};\n  --border-color: #{$colorGrey13};\n  --border-radius: 16px;\n  --remove-color: #{$baseLeadColor};\n  --remove-border-radius: 24px;\n  --background-color: #{$colorWhite};\n  --icon-size: #{iconSize('small')};\n  --icon-color: #{$colorPrimary};\n  --icon-gap: #{space('xsmall')};\n  --counter-color: #{$colorPrimary60op};\n  --counter-gap: #{space('xsmall')};\n\n  --hover-color: #{$colorPrimaryHover};\n  --hover-border-color: var(--border-color);\n  --hover-background-color: #{$colorPrimary8};\n  --hover-remove-color: var(--hover-color);\n  --hover-remove-background-color: var(--hover-background-color);\n  --hover-icon-color: #{$colorPrimaryHover};\n  --hover-counter-color: #{$colorPrimaryHover};\n\n  display: inline-flex;\n\n  @include highContrast() {\n    --hover-color: Highlight;\n    --hover-border: 1px solid Highlight;\n    --hover-background-color: Canvas;\n    --hover-remove-color: Highlight;\n    --hover-remove-background-color: Canvas;\n    --hover-icon-color: Highlight;\n    --hover-counter-color: Highlight;\n  }\n\n  &[size=\"large\"] {\n    --height: 40px;\n    --border-radius: 20px;\n    --padding: 0 #{space('xlarge')};\n  }\n\n  &[size=\"small\"] {\n    --height: 24px;\n    --icon-size: #{iconSize('xsmall')};\n    --counter-gap: #{space('xxsmall')};\n  }\n\n  &[variant=\"input\"] {\n    --border-color: transparent;\n    --background-color: #{$colorGrey5};\n\n    --hover-border-color: transparent;\n  }\n\n  &[variant=\"tag\"] {\n    --color: #{$baseColor};\n    --icon-color: #{$baseColor};\n    --counter-color: #{$baseColor};\n    --border-color: transparent;\n    --background-color: #{$colorBlack8};\n\n    --hover-color: #{$baseColor};\n    --hover-border-color: transparent;\n    --hover-background-color: #{$colorBlack8};\n    --hover-icon-color: #{$baseColor};\n    --hover-counter-color: #{$baseColor};\n  }\n\n  &[variant=\"input\"][size=\"small\"] {\n    --padding: 0 #{space('small')};\n    --icon-gap: #{space('xxsmall')};\n  }\n\n  &[variant=\"tag\"][size=\"small\"] {\n    --padding: 0 #{space('xsmall')};\n    --icon-gap: #{space('xxsmall')};\n  }\n\n  &[type=\"secondary\"] {\n    --color: #{$baseLeadColor};\n    --counter-color: #{$colorGrey40};\n  }\n\n  &[type=\"important\"] {\n    --color: #{$colorError};\n    --icon-color: #{$colorError};\n    --counter-color: #{$colorError};\n\n    --hover-color: #{$colorError};\n    --hover-icon-color: #{$colorError};\n    --hover-counter-color: #{$colorError};\n\n    @include highContrast() {\n      --hover-color: Highlight;\n      --hover-icon-color: Highlight;\n      --hover-counter-color: Highlight;\n    }\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: #{$colorWhite};\n    --border-color: transparent;\n    --remove-color: #{$colorWhite};\n    --background-color: #{$colorPrimary};\n    --icon-color: #{$colorWhite};\n    --counter-color: #{$colorWhite56};\n\n    --hover-color: #{$colorWhite};\n    --hover-border-color: transparent;\n    --hover-background-color: #{$colorPrimaryHover};\n    --hover-remove-color: #{$colorWhite};\n    --hover-remove-background-color: #{$colorPrimaryHover};\n    --hover-icon-color: #{$colorWhite};\n    --hover-counter-color: #{$colorWhite56};\n\n    @include highContrast() {\n      --color: SelectedItem;\n      --border-color: SelectedItem;\n      --remove-color: SelectedItem;\n      --background-color: Canvas;\n      --icon-color: SelectedItem;\n      --counter-color: SelectedItem;\n\n      --hover-color: Highlight;\n      --hover-border-color: Highlight;\n      --hover-background-color: Canvas;\n      --hover-remove-color: Highlight;\n      --hover-remove-background-color: Canvas;\n      --hover-icon-color: Highlight;\n      --hover-counter-color: Highlight;\n    }\n  }\n\n  &[non-interactive]:not([non-interactive=\"false\"]) {\n    --hover-color: var(--color);\n    --hover-border: var(--border-color);\n    --hover-background-color: var(--background-color);\n    --hover-icon-color: var(--icon-color);\n    --hover-counter-color: var(--counter-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorGrey25};\n    --border-color: #{$baseBorderColor};\n    --remove-color: #{$colorGrey13};\n    --background-color: #{$colorWhite};\n    --icon-color: #{$colorGrey25};\n    --counter-color: #{$colorGrey25};\n\n    --hover-color: #{$colorGrey25};\n    --hover-border-color: #{$baseBorderColor};\n    --hover-background-color: #{$colorWhite};\n    --hover-remove-color: #{$colorGrey13};\n    --hover-remove-background-color: transparent;\n    --hover-icon-color: #{$colorGrey25};\n    --hover-counter-color: #{$colorGrey25};\n  }\n}\n\n:host ::slotted(stzh-icon),\n.stzh-chip__icon {\n  --size: var(--icon-size);\n}\n\n.stzh-chip {\n  position: relative;\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__button {\n    @include fontSize('micro');\n    font-family: inherit;\n    height: var(--height);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    border-radius: var(--border-radius);\n    padding: var(--padding);\n    color: var(--color);\n    appearance: none;\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--border-color);\n    background-color: var(--background-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color, border-color;\n    text-decoration-line: none;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__label {\n    text-align: left;\n  }\n\n  &__icon-wrapper {\n    display: flex;\n    color: var(--icon-color);\n    transition: color $baseTransitionAnimationSpeed;\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      margin-right: var(--icon-gap);\n    }\n  }\n\n  &__counter {\n    display: flex;\n    font-variant-numeric: tabular-nums;\n    margin-left: var(--counter-gap);\n    color: var(--counter-color);\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  &__remove {\n    position: absolute;\n    top: 0;\n    right: 0;\n    appearance: none;\n    font-family: inherit;\n    border: none;\n    background: none;\n    padding: 0;\n    width: var(--height);\n    height: var(--height);\n    border-radius: var(--remove-border-radius);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-left: space('xxsmall');\n    color: var(--remove-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color, border-color;\n    cursor: pointer;\n\n    &:hover {\n      color: var(--hover-remove-color);\n      background-color: var(--hover-remove-background-color);\n    }\n  }\n\n  &__remove-icon {\n    --size: #{iconSize('xxsmall')};\n  }\n\n  &__button:hover,\n  &__remove:hover + &__button {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n    border-color: var(--hover-border-color);\n  }\n\n  &__button:hover &__counter,\n  &__remove:hover + &__button &__counter {\n    color: var(--hover-counter-color);\n  }\n\n  &__button:hover &__icon-wrapper,\n  &__remove:hover + &__button &__icon-wrapper {\n    color: var(--hover-icon-color);\n  }\n\n  /* Size */\n\n  &--size-small &__button {\n    @include fontSize('nano');\n  }\n\n  /* Removeable */\n\n  &--is-removable &__button {\n    padding-right: calc(var(--height) + #{space('xxsmall')});\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button,\n  &--is-disabled &__remove {\n    cursor: not-allowed;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n  Fragment\n} from \"@stencil/core\";\n\nimport {\n  StzhChipClickEvent,\n  StzhChipRemoveEvent,\n  StzhChipFocusEvent,\n  StzhChipBlurEvent\n} from \"../../index\";\n\n/**\n * @slot - Slot for label\n * @slot icon - Slot for icon\n */\n@Component({\n  tag: \"stzh-chip\",\n  styleUrl: \"stzh-chip.scss\",\n  scoped: true\n})\nexport class StzhChip {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** `href` if the chip should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Whether chip is not interactive */\n  @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n  /** Whether remove button should be shown */\n  @Prop({ reflect: true }) removable: boolean = false;\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"tag\" | \"filter\" | \"input\" = \"tag\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" | \"large\" = \"default\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: \"default\" | \"secondary\" | \"important\" = \"default\";\n\n  /** Counter */\n  @Prop() counter: string = \"\";\n\n  /** Label of remove button for screenreaders */\n  @Prop() removeLabel: string = \"\";\n\n  /** Active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the link/button */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the remove button element.\n   * Default value will be taken from `removeLabel` prop.\n   */\n  @Prop() removeAnalyticsId: string;\n\n  @Element() element: HTMLStzhChipElement;\n\n  /** Focus menu item */\n  @Method()\n  async setFocus() {\n    this.chip.focus();\n  }\n\n  /** Chip click event */\n  @Event() stzhClick: EventEmitter<StzhChipClickEvent>;\n\n  /** Chip remove event */\n  @Event() stzhRemove: EventEmitter<StzhChipRemoveEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhChipFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhChipBlurEvent>;\n\n  private chip: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLElement;\n  private focusedByInput: boolean = false;\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.chip.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(): DocumentFragment {\n    return (\n      <Fragment>\n        <div class=\"stzh-chip__icon-wrapper\">\n          {this.icon ?\n            <stzh-icon class=\"stzh-chip__icon\" name={this.icon}></stzh-icon>\n            :\n            <slot name=\"icon\"></slot>\n          }\n        </div>\n\n        <stzh-clamp\n          lines={1}\n          class=\"stzh-chip__label\"\n          ref={(el) => (this.text = el as HTMLElement)}\n        >\n          {this.label ? this.label : <slot></slot>}\n          {this.counter &&\n            <span class=\"stzh-chip__vhidden\">\n              &nbsp;({this.counter})\n            </span>\n          }\n        </stzh-clamp>\n\n        {this.counter &&\n          <div class=\"stzh-chip__counter\" aria-hidden=\"true\">\n            {this.counter}\n          </div>\n        }\n      </Fragment>\n    );\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.setFocus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-chip\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-chip\",\n      originalEvent: event\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-chip\",\n      originalEvent: event\n    });\n  }\n\n  private onRemoveClick = (event: MouseEvent) => {\n    this.stzhRemove.emit({\n      component: \"stzh-chip\",\n      originalEvent: event\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-chip\": true,\n      \"stzh-chip--is-active\": this.active,\n      \"stzh-chip--is-disabled\": this.disabled,\n      \"stzh-chip--is-removable\": this.removable,\n      \"stzh-chip--has-counter\": !!this.counter,\n      [`stzh-chip--type-${this.type}`]: !!this.type,\n      [`stzh-chip--size-${this.size}`]: !!this.size,\n      [`stzh-chip--${this.variant}`]: !!this.variant\n    };\n\n    const Chip = this.nonInteractive ? \"div\" :\n      this.href ? \"a\" : \"button\";\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {this.removable &&\n            <button\n              class=\"stzh-chip__remove\"\n              onClick={this.onRemoveClick}\n              disabled={this.disabled}\n              aria-label={this.removeLabel}\n              type=\"button\"\n              s-object-id={this.removeAnalyticsId || this.removeLabel}\n            >\n              <stzh-icon class=\"stzh-chip__remove-icon\" name=\"close\"></stzh-icon>\n            </button>\n          }\n\n          {this.href ?\n            <Chip\n              ref={(el) => (this.chip = el as HTMLAnchorElement)}\n              class={{\n                \"stzh-chip__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href\n              }}\n              href={this.disabled ? null : this.href}\n              target={this.target}\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Chip>\n            :\n            <Chip\n              ref={(el) => (this.chip = el as HTMLButtonElement)}\n              class={{\n                \"stzh-chip__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href\n              }}\n              disabled={this.disabled}\n              type=\"button\"\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Chip>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n","stzh-clamp {\n  @include host;\n  --current-lines: var(--lines, 0);\n\n  @include mq($from: small) {\n    --current-lines: var(--lines-small, var(--lines, 0));\n  }\n\n  @include mq($from: medium) {\n    --current-lines: var(--lines-medium, var(--lines-small, var(--lines, 0)));\n  }\n\n  @include mq($from: large) {\n    --current-lines: var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0))));\n  }\n\n  @include mq($from: ultra) {\n    --current-lines: var(--lines-ultra, var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0)))));\n  }\n\n  width: 100%;\n  color: inherit;\n  font-family: inherit;\n  font-weight: inherit;\n  font-style: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.stzh-clamp {\n  position: relative;\n\n  &__text {\n    @include wordWrap;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n\n    & > *:first-child {\n      margin-top: 0 !important;\n    }\n\n    & > *:last-child {\n      margin-bottom: 0 !important;\n    }\n\n    &.is-clone {\n      position: absolute;\n      visibility: hidden;\n      opacity: 0;\n      top: 0;\n      left: 0;\n      width: 100%;\n    }\n  }\n\n  &__trigger {\n    margin-top: space('xxsmall');\n  }\n\n  &--is-not-expanded &__text,\n  &__text.is-clone {\n    -webkit-line-clamp: var(--current-lines);\n    line-clamp: var(--current-lines);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Method,\n  Element,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhClampClampEvent,\n  StzhClampExpandEvent\n} from \"../../index\";\n\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { StzhClampLocalizedText } from \"./stzh-clamp.localization\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-clamp\",\n  styleUrl: \"stzh-clamp.scss\"\n})\nexport class StzhClamp {\n  /** Translation strings */\n  @Prop() localization: StzhClampLocalizedText;\n\n  /** Line number */\n  @Prop() lines: number = 1;\n  /** Line number above small breakpoint */\n  @Prop() linesSmall: number = 0;\n  /** Line number above medium breakpoint */\n  @Prop() linesMedium: number = 0;\n  /** Line number above large breakpoint */\n  @Prop() linesLarge: number = 0;\n  /** Line number above ultra breakpoint */\n  @Prop() linesUltra: number = 0;\n\n  /** Whether clamping is expanded */\n  @Prop() showExpandLink: boolean = false;\n\n  /** Whether clamping is expanded */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  /** Whether the text is currently clamped (readonly) */\n  @Prop({ mutable: true, reflect: true }) clamped: boolean = false;\n\n  @Element() element: HTMLStzhClampElement;\n\n  /** Event when clamping state changed */\n  @Event() stzhClamp: EventEmitter<StzhClampClampEvent>;\n\n  /** Event when expanding state changed */\n  @Event() stzhExpand: EventEmitter<StzhClampExpandEvent>;\n\n  @Method()\n  async update() {\n    this.textCloneElement.innerHTML = this.textElement.innerHTML;\n    this.updateClamped();\n  }\n\n  private textElement: HTMLElement;\n  private textCloneElement: HTMLElement;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n  private mutationObserver: MutationObserver;\n\n  private updateClamped = () => {\n    if (!this.textCloneElement) {\n      return;\n    }\n\n    const beforeClamped = this.clamped;\n    this.clamped = this.textCloneElement.scrollHeight > this.textCloneElement.clientHeight;\n\n    if (beforeClamped !== this.clamped) {\n      this.stzhClamp.emit({\n        component: \"stzh-clamp\",\n        clamped: this.clamped\n      });\n    }\n  }\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateClamped);\n  }\n\n  private handleMutaton = () => {\n    this.update();\n  }\n\n  private handleExpandClick = () => {\n    this.expanded = !this.expanded;\n\n    this.stzhExpand.emit({\n      component: \"stzh-clamp\",\n      expanded: this.expanded\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"clamp\");\n    }\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = new MutationObserver(this.handleMutaton);\n    this.mutationObserver.observe(this.textElement, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  componentDidRender() {\n    this.update();\n  }\n\n  connectedCallback() {\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-clamp\": true,\n      \"stzh-clamp--is-not-expanded\": !this.expanded\n    };\n\n    return (\n      <Host\n        style={{\n          '--lines': this.lines ? this.lines.toString() : null,\n          '--lines-small': this.linesSmall ? this.linesSmall.toString() : null,\n          '--lines-medium': this.linesMedium ? this.linesMedium.toString() : null,\n          '--lines-large': this.linesLarge ? this.linesLarge.toString() : null,\n          '--lines-ultra': this.linesUltra ? this.linesUltra.toString() : null,\n        }}\n      >\n        <div class={classes}>\n          <div\n            ref={(el) => (this.textElement = el as HTMLDivElement)}\n            class=\"stzh-clamp__text\"\n          >\n            <slot></slot>\n          </div>\n\n          <div\n            ref={(el) => (this.textCloneElement = el as HTMLDivElement)}\n            class=\"stzh-clamp__text is-clone\"\n            aria-hidden=\"true\"\n          ></div>\n\n          {this.showExpandLink && this.clamped &&\n            <stzh-link\n              class=\"stzh-clamp__trigger\"\n              a11yTabindex=\"-1\"\n              aria-hidden=\"true\"\n              onClick={this.handleExpandClick}\n            >\n              {!this.expanded ? this.localization.showMore : this.localization.showLess}\n            </stzh-link>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/{p-2009a8df.system.entry.js → p-88440469.system.entry.js}

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(t,o,e,s){function n(t){return t instanceof e?t:new e((function(o){o(t)}))}return new(e||(e=Promise))((function(e,r){function i(t){try{h(s.next(t))}catch(t){r(t)}}function a(t){try{h(s["throw"](t))}catch(t){r(t)}}function h(t){t.done?e(t.value):n(t.value).then(i,a)}h((s=s.apply(t,o||[])).next())}))};var __generator=this&&this.__generator||function(t,o){var e={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},s,n,r,i;return i={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function a(t){return function(o){return h([t,o])}}function h(a){if(s)throw new TypeError("Generator is already executing.");while(i&&(i=0,a[0]&&(e=0)),e)try{if(s=1,n&&(r=a[0]&2?n["return"]:a[0]?n["throw"]||((r=n["return"])&&r.call(n),0):n.next)&&!(r=r.call(n,a[1])).done)return r;if(n=0,r)a=[a[0]&2,r.value];switch(a[0]){case 0:case 1:r=a;break;case 4:e.label++;return{value:a[1],done:false};case 5:e.label++;n=a[1];a=[0];continue;case 7:a=e.ops.pop();e.trys.pop();continue;default:if(!(r=e.trys,r=r.length>0&&r[r.length-1])&&(a[0]===6||a[0]===2)){e=0;continue}if(a[0]===3&&(!r||a[1]>r[0]&&a[1]<r[3])){e.label=a[1];break}if(a[0]===6&&e.label<r[1]){e.label=r[1];r=a;break}if(r&&e.label<r[2]){e.label=r[2];e.ops.push(a);break}if(r[2])e.ops.pop();e.trys.pop();continue}a=o.call(t,e)}catch(t){a=[6,t];n=0}finally{s=r=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./p-7b184ebb.system.js","./p-22a2f4c1.system.js","./p-a408bfba.system.js"],(function(t){"use strict";var o,e,s,n,r,i,a,h;return{setters:[function(t){o=t.r;e=t.h;s=t.a;n=t.c;r=t.F;i=t.g},function(t){a=t.h},function(t){h=t.f}],execute:function(){var c=".sc-stzh-badge-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-badge-h{display:none}.sc-stzh-badge-h *.sc-stzh-badge,.sc-stzh-badge-h *.sc-stzh-badge::before,.sc-stzh-badge-h *.sc-stzh-badge::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-badge-h{--color:var(--stzh-color-white);--background-color:var(--stzh-base-color);display:-ms-inline-flexbox;display:inline-flex}[type=success].sc-stzh-badge-h{--background-color:var(--stzh-color-truegreen)}[type=warning].sc-stzh-badge-h{--color:var(--stzh-color-grey87);--background-color:var(--stzh-color-warning)}[type=error].sc-stzh-badge-h{--background-color:var(--stzh-color-error)}[type=info].sc-stzh-badge-h{--background-color:var(--stzh-color-zueriblue)}.stzh-badge.sc-stzh-badge{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:normal;-webkit-box-sizing:content-box;box-sizing:content-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;min-width:0.625rem;font-size:0.625rem;line-height:1.4;-webkit-box-shadow:0 0 0 0.0625rem #fff;box-shadow:0 0 0 0.0625rem #fff;border-radius:0.875rem;padding:0.0625rem 0.375rem;background-color:var(--background-color);color:var(--color);text-transform:uppercase}.stzh-badge.sc-stzh-badge:empty{width:0.875rem;height:0.875rem;padding:0}";var l=t("stzh_badge",function(){function t(t){o(this,t);this.label="";this.type="default"}t.prototype.render=function(){var t;var o=(t={"stzh-badge":true},t["stzh-badge--type-".concat(this.type)]=!!this.type,t);return e(s,null,e("div",{class:o},this.label))};return t}());l.style=c;var b='@charset "UTF-8";.sc-stzh-button-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-button-h{display:none}.sc-stzh-button-h *.sc-stzh-button,.sc-stzh-button-h *.sc-stzh-button::before,.sc-stzh-button-h *.sc-stzh-button::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-button-h{--color:var(--stzh-color-white);--background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--border-width:0.0625rem;--border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--border-radius:var(--stzh-button-border-radius);--height:var(--stzh-form-input-height);--icon-size:var(--stzh-icon-size-small);--icon-text-margin:var(--stzh-space-small);--badge-icon-text-margin:calc(var(--icon-text-margin) + var(--stzh-space-xxsmall));--padding:calc(var(--stzh-space-xsmall) - 0.0625rem) var(--stzh-space-xlarge);--white-space:normal;--border-radius:var(--stzh-button-border-radius);--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--floating-position:sticky;--floating-float:right;--floating-bottom:var(--stzh-space-medium);--floating-right:var(--stzh-space-medium);display:inline-block}@media screen and (min-width: 600px){.sc-stzh-button-h{--floating-bottom:var(--stzh-space-xlarge);--floating-right:var(--stzh-space-xlarge)}}[fullwidth].sc-stzh-button-h:not([fullwidth=false]){width:100%;display:block}[rounded].sc-stzh-button-h:not([rounded=false]){--border-radius:var(--height)}[floating].sc-stzh-button-h:not([floating=false]){position:var(--floating-position);bottom:var(--floating-bottom);right:var(--floating-right);float:var(--floating-float)}[size=small].sc-stzh-button-h{--height:var(--stzh-form-input-small-height)}[size=tiny].sc-stzh-button-h{--height:var(--stzh-form-input-tiny-height);--icon-text-margin:var(--stzh-space-xsmall);--padding:calc(var(--stzh-space-xxsmall) - 0.0625rem) var(--stzh-space-medium)}[variant=secondary].sc-stzh-button-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:var(--stzh-color-white);--border-color:var(--stzh-color-primary60op)}[variant=input].sc-stzh-button-h{--color:var(--stzh-color-grey61);--background-color:transparent;--border-color:var(--stzh-color-grey61);--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:transparent;--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}[variant=tertiary].sc-stzh-button-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:transparent;--border-color:transparent;--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:var(--stzh-button-text-hover-background);--hover-border-color:transparent}[active].sc-stzh-button-h:not([active=false]){--color:var(--stzh-color-white);--background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}[disabled].sc-stzh-button-h:not([disabled=false]),[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false]){--border-color:var(--stzh-color-grey13);--background-color:var(--stzh-color-grey13);--hover-border-color:var(--stzh-color-grey13);--hover-background-color:var(--stzh-color-grey13)}[disabled].sc-stzh-button-h:not([disabled=false])[variant=secondary],[disabled].sc-stzh-button-h:not([disabled=false])[variant=input],[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=secondary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=input],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=tertiary]{--color:var(--stzh-color-grey25);--border-color:var(--stzh-color-grey13);--background-color:transparent;--hover-color:var(--stzh-color-grey25);--hover-border-color:var(--stzh-color-grey13);--hover-background-color:transparent}@-webkit-keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}60%{-webkit-transform:translateX(-0.25rem);transform:translateX(-0.25rem)}}@keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}60%{-webkit-transform:translateX(-0.25rem);transform:translateX(-0.25rem)}}.sc-stzh-button-h .sc-stzh-button-s>stzh-icon,.stzh-button__icon.sc-stzh-button{--size:var(--icon-size)}.stzh-button.sc-stzh-button{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);line-height:1.25;font-family:inherit;position:relative;z-index:0;overflow:visible;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:stretch;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--color);padding:var(--padding);background-color:var(--background-color);-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;border-style:solid;border-width:var(--border-width);border-color:var(--border-color);cursor:pointer;-webkit-text-decoration-line:none;text-decoration-line:none;width:100%;min-width:var(--height);min-height:var(--height);border-radius:var(--border-radius);text-align:left}.stzh-button.sc-stzh-button:hover{border-color:var(--hover-border-color);background-color:var(--hover-background-color);color:var(--hover-color)}.stzh-button__vhidden.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button__inner.sc-stzh-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}.stzh-button__icon-wrapper.sc-stzh-button{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;width:auto;height:1em}.stzh-button__text.sc-stzh-button{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;white-space:var(--white-space);text-align:center}.stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--icon-text-margin)}.stzh-button__badge.sc-stzh-button{position:absolute;z-index:1;top:0;right:0}.stzh-button__input.sc-stzh-button{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.stzh-button__mark.sc-stzh-button{border:0.0625rem solid var(--stzh-color-grey61);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;-ms-flex-negative:0;flex-shrink:0;border-radius:50%;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:border-color var(--stzh-base-transition-animation-speed);transition:border-color var(--stzh-base-transition-animation-speed);width:1.25rem;height:1.25rem;margin-right:var(--stzh-space-xsmall);border-color:currentColor}.stzh-button__mark.sc-stzh-button::before{content:""}.stzh-button__check.sc-stzh-button{background-color:currentColor;color:var(--stzh-color-primary, var(--stzh-color-zueriblue));width:0.5rem;height:0.5rem;border-radius:50%;opacity:0}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-button__check.sc-stzh-button{background-color:ButtonText}}.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-button.sc-stzh-button:hover .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:focus:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-button__input.sc-stzh-button:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{opacity:1}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-grey61)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:transparent}.stzh-button--is-disabled.sc-stzh-button .stzh-button__mark.sc-stzh-button{background-color:var(--stzh-color-black8)}.stzh-button--size-small.sc-stzh-button,.stzh-button--size-tiny.sc-stzh-button{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-button--is-floating.sc-stzh-button{-webkit-box-shadow:var(--stzh-box-shadow-overlay);box-shadow:var(--stzh-box-shadow-overlay)}.stzh-button--badge-position-button.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:static}.stzh-button__badge.sc-stzh-button,.stzh-button--badge-position-button.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:relative}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--badge-icon-text-margin)}.stzh-button--has-icon-only.sc-stzh-button{width:var(--height);height:var(--height);padding:0}.stzh-button--has-icon-only.sc-stzh-button .stzh-button__text.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button--effect-cta.sc-stzh-button:hover .stzh-button__icon-wrapper.sc-stzh-button{-webkit-animation:stzh-button-effect-cta 1s;animation:stzh-button-effect-cta 1s}.stzh-button--align-left.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:start;justify-content:flex-start}.stzh-button--align-right.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:end;justify-content:flex-end}.stzh-button--align-center.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:center;justify-content:center}.stzh-button--align-space-between.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:justify;justify-content:space-between}.stzh-button--is-disabled.sc-stzh-button{cursor:not-allowed}';var u=t("stzh_button",function(){function t(t){var e=this;o(this,t);this.stzhFocus=n(this,"stzhFocus",7);this.stzhBlur=n(this,"stzhBlur",7);this.stzhChange=n(this,"stzhChange",7);this.focusedByInput=false;this.onInput=function(t){e.checked=e.input.checked;e.stzhChange.emit({component:"stzh-button",originalEvent:t,value:e.value,checked:e.checked})};this.onRootFocus=function(){if(!e.focusedByInput){e.setFocus()}e.focusedByInput=false};this.onFocus=function(t){e.focusedByInput=true;var o=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});e.element.dispatchEvent(o);e.stzhFocus.emit({component:"stzh-button",originalEvent:t})};this.onBlur=function(t){var o=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});e.element.dispatchEvent(o);e.stzhBlur.emit({component:"stzh-button",originalEvent:t})};this.onClick=function(t){if(e.disabled){t.stopPropagation();t.preventDefault()}};this.localization=undefined;this.badge="";this.badgeType="default";this.badgePosition="button";this.badgeEmpty=false;this.fullwidth=false;this.rounded=false;this.floating=false;this.size="default";this.textAlign="default";this.variant="default";this.icon="";this.iconPosition="left";this.checked=false;this.name="";this.value="";this.href="";this.rel=undefined;this.target="";this.download=undefined;this.type="button";this.disabled=false;this.active=false;this.label="";this.effect="default";this.iconOnly=false;this.linkAccesskey=undefined;this.a11yLabel=undefined;this.a11yDescribedby="";this.a11yExpanded=undefined;this.a11yDisabled=undefined;this.a11yControls=undefined;this.a11yTabindex=undefined;this.analyticsId=undefined}t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.button.focus();return[2]}))}))};t.prototype.renderIcon=function(t){return e("div",{class:"stzh-button__icon-wrapper"},this.icon?e("stzh-icon",{class:"stzh-button__icon",name:this.icon}):e("slot",{name:"icon"}),(this.badge||this.badgeEmpty)&&this.badgePosition==="icon"&&t&&e("stzh-badge",{class:"stzh-button__badge",label:this.badge,type:this.badgeType}))};t.prototype.renderContent=function(){var t=this;return e("div",{class:"stzh-button__text"},this.rel&&this.rel.includes("external")&&e("div",{class:"stzh-button__vhidden"},this.localization.$globals.externalLinkLabel),this.download&&e("div",{class:"stzh-button__vhidden"},this.localization.$globals.downloadLinkLabel),e("div",{ref:function(o){return t.text=o}},this.label?this.label:e("slot",null)))};t.prototype.renderInner=function(t){return e(r,null,e("div",{class:"stzh-button__inner",onClick:this.onClick},this.type==="radio"&&e("div",{class:"stzh-button__mark"},e("div",{class:"stzh-button__check"})),this.iconPosition==="left"&&this.renderIcon(t),this.renderContent(),this.iconPosition==="right"&&this.renderIcon(t)),(this.badge||this.badgeEmpty)&&(this.badgePosition==="button"||!t)&&e("stzh-badge",{class:"stzh-button__badge",label:this.badge,type:this.badgeType,onClick:this.onClick}))};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(o){switch(o.label){case 0:if(!!this.localization)return[3,2];t=this;return[4,h(this.element,"button")];case 1:t.localization=o.sent();o.label=2;case 2:return[2]}}))}))};t.prototype.componentDidRender=function(){var t=this;requestAnimationFrame((function(){t.button.setAttribute("s-object-id",t.analyticsId||t.text.innerText)}))};t.prototype.render=function(){var t;var o=this;var n=a(this.element,"icon")||!!this.icon;var r=(t={"stzh-button":true,"stzh-button--has-icon":n,"stzh-button--has-icon-only":this.iconOnly,"stzh-button--has-badge":!!this.badge,"stzh-button--is-floating":this.floating,"stzh-button--is-rounded":this.rounded,"stzh-button--is-fullwidth":this.fullwidth,"stzh-button--is-disabled":this.disabled||this.a11yDisabled,"stzh-button--is-active":this.active},t["stzh-button--effect-".concat(this.effect)]=!!this.effect,t["stzh-button--badge-position-".concat(this.badgePosition)]=!!this.badgePosition,t["stzh-button--align-".concat(this.textAlign)]=!!this.textAlign,t["stzh-button--size-".concat(this.size)]=!!this.size,t["stzh-button--type-".concat(this.type)]=!!this.type,t["stzh-button--".concat(this.variant)]=!!this.variant,t);return e(s,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},this.href?e("a",{ref:function(t){return o.button=t},href:this.disabled?null:this.href,rel:this.rel,download:this.download,target:this.target,class:r,"aria-label":this.a11yLabel,"aria-describedby":this.a11yDescribedby,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},this.renderInner(n)):this.type==="radio"?e("label",{ref:function(t){return o.button=t},class:r,onClick:this.onClick},e("input",{ref:function(t){return o.input=t},type:"radio",class:"stzh-button__input",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,"aria-label":this.a11yLabel,"aria-describedby":this.a11yDescribedby,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick,onInput:this.onInput}),this.renderInner(n)):e("button",{ref:function(t){return o.button=t},class:r,type:this.type,disabled:this.disabled,"aria-label":this.a11yLabel,"aria-describedby":this.a11yDescribedby,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},this.renderInner(n)))};Object.defineProperty(t.prototype,"element",{get:function(){return i(this)},enumerable:false,configurable:true});return t}());u.style=b;var d=".sc-stzh-icon-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-icon-h{display:none}.sc-stzh-icon-h *.sc-stzh-icon,.sc-stzh-icon-h *.sc-stzh-icon::before,.sc-stzh-icon-h *.sc-stzh-icon::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-icon-h{--size:var(--stzh-icon-size-default);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:currentColor;vertical-align:text-top}.stzh-icon.sc-stzh-icon{width:var(--size);height:var(--size)}";var z=0;var f=t("stzh_icon",function(){function t(t){o(this,t);this.name="";this.a11yTitle=""}t.prototype.componentWillLoad=function(){this.iconId="stzh-icon-".concat(z++)};t.prototype.render=function(){return e(s,null,this.name&&e("svg",{class:"stzh-icon",role:this.a11yTitle?"img":"presentation","aria-hidden":this.a11yTitle?null:"true",focusable:this.a11yTitle?"true":"false","aria-labelledby":this.a11yTitle?"".concat(this.iconId,"-title"):null},this.a11yTitle&&e("title",{id:"".concat(this.iconId,"-title")},this.a11yTitle),e("use",{href:"#stzh-icon-".concat(this.name)})))};return t}());f.style=d}}}));
-//# sourceMappingURL=p-2009a8df.system.entry.js.map
+var __awaiter=this&&this.__awaiter||function(t,o,e,s){function n(t){return t instanceof e?t:new e((function(o){o(t)}))}return new(e||(e=Promise))((function(e,r){function i(t){try{h(s.next(t))}catch(t){r(t)}}function a(t){try{h(s["throw"](t))}catch(t){r(t)}}function h(t){t.done?e(t.value):n(t.value).then(i,a)}h((s=s.apply(t,o||[])).next())}))};var __generator=this&&this.__generator||function(t,o){var e={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},s,n,r,i;return i={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function a(t){return function(o){return h([t,o])}}function h(a){if(s)throw new TypeError("Generator is already executing.");while(i&&(i=0,a[0]&&(e=0)),e)try{if(s=1,n&&(r=a[0]&2?n["return"]:a[0]?n["throw"]||((r=n["return"])&&r.call(n),0):n.next)&&!(r=r.call(n,a[1])).done)return r;if(n=0,r)a=[a[0]&2,r.value];switch(a[0]){case 0:case 1:r=a;break;case 4:e.label++;return{value:a[1],done:false};case 5:e.label++;n=a[1];a=[0];continue;case 7:a=e.ops.pop();e.trys.pop();continue;default:if(!(r=e.trys,r=r.length>0&&r[r.length-1])&&(a[0]===6||a[0]===2)){e=0;continue}if(a[0]===3&&(!r||a[1]>r[0]&&a[1]<r[3])){e.label=a[1];break}if(a[0]===6&&e.label<r[1]){e.label=r[1];r=a;break}if(r&&e.label<r[2]){e.label=r[2];e.ops.push(a);break}if(r[2])e.ops.pop();e.trys.pop();continue}a=o.call(t,e)}catch(t){a=[6,t];n=0}finally{s=r=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./p-7b184ebb.system.js","./p-22a2f4c1.system.js","./p-a408bfba.system.js"],(function(t){"use strict";var o,e,s,n,r,i,a,h;return{setters:[function(t){o=t.r;e=t.h;s=t.a;n=t.c;r=t.F;i=t.g},function(t){a=t.h},function(t){h=t.f}],execute:function(){var c=".sc-stzh-badge-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-badge-h{display:none}.sc-stzh-badge-h *.sc-stzh-badge,.sc-stzh-badge-h *.sc-stzh-badge::before,.sc-stzh-badge-h *.sc-stzh-badge::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-badge-h{--color:var(--stzh-color-white);--background-color:var(--stzh-base-color);display:-ms-inline-flexbox;display:inline-flex}[type=success].sc-stzh-badge-h{--background-color:var(--stzh-color-truegreen)}[type=warning].sc-stzh-badge-h{--color:var(--stzh-color-grey87);--background-color:var(--stzh-color-warning)}[type=error].sc-stzh-badge-h{--background-color:var(--stzh-color-error)}[type=info].sc-stzh-badge-h{--background-color:var(--stzh-color-zueriblue)}.stzh-badge.sc-stzh-badge{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:normal;-webkit-box-sizing:content-box;box-sizing:content-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;min-width:0.625rem;font-size:0.625rem;line-height:1.4;-webkit-box-shadow:0 0 0 0.0625rem #fff;box-shadow:0 0 0 0.0625rem #fff;border-radius:0.875rem;padding:0.0625rem 0.375rem;background-color:var(--background-color);color:var(--color);text-transform:uppercase}.stzh-badge.sc-stzh-badge:empty{width:0.875rem;height:0.875rem;padding:0}";var l=t("stzh_badge",function(){function t(t){o(this,t);this.label="";this.type="default"}t.prototype.render=function(){var t;var o=(t={"stzh-badge":true},t["stzh-badge--type-".concat(this.type)]=!!this.type,t);return e(s,null,e("div",{class:o},this.label))};return t}());l.style=c;var b='@charset "UTF-8";.sc-stzh-button-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-button-h{display:none}.sc-stzh-button-h *.sc-stzh-button,.sc-stzh-button-h *.sc-stzh-button::before,.sc-stzh-button-h *.sc-stzh-button::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-button-h{--color:var(--stzh-color-white);--background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--border-width:0.0625rem;--border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--border-radius:var(--stzh-button-border-radius);--height:var(--stzh-form-input-height);--icon-size:var(--stzh-icon-size-small);--icon-text-margin:var(--stzh-space-small);--badge-icon-text-margin:calc(var(--icon-text-margin) + var(--stzh-space-xxsmall));--padding:calc(var(--stzh-space-xsmall) - 0.0625rem) var(--stzh-space-xlarge);--white-space:normal;--border-radius:var(--stzh-button-border-radius);--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--floating-position:sticky;--floating-float:right;--floating-bottom:var(--stzh-space-medium);--floating-right:var(--stzh-space-medium);display:inline-block}@media screen and (min-width: 600px){.sc-stzh-button-h{--floating-bottom:var(--stzh-space-xlarge);--floating-right:var(--stzh-space-xlarge)}}[fullwidth].sc-stzh-button-h:not([fullwidth=false]){width:100%;display:block}[rounded].sc-stzh-button-h:not([rounded=false]){--border-radius:var(--height)}[floating].sc-stzh-button-h:not([floating=false]){position:var(--floating-position);bottom:var(--floating-bottom);right:var(--floating-right);float:var(--floating-float)}[size=small].sc-stzh-button-h{--height:var(--stzh-form-input-small-height)}[size=tiny].sc-stzh-button-h{--height:var(--stzh-form-input-tiny-height);--icon-text-margin:var(--stzh-space-xsmall);--padding:calc(var(--stzh-space-xxsmall) - 0.0625rem) var(--stzh-space-medium)}[variant=secondary].sc-stzh-button-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:var(--stzh-color-white);--border-color:var(--stzh-color-primary60op)}[variant=input].sc-stzh-button-h{--color:var(--stzh-color-grey61);--background-color:transparent;--border-color:var(--stzh-color-grey61);--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:transparent;--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}[variant=tertiary].sc-stzh-button-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:transparent;--border-color:transparent;--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:var(--stzh-button-text-hover-background);--hover-border-color:transparent}[active].sc-stzh-button-h:not([active=false]){--color:var(--stzh-color-white);--background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}[disabled].sc-stzh-button-h:not([disabled=false]),[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false]){--border-color:var(--stzh-color-grey13);--background-color:var(--stzh-color-grey13);--hover-border-color:var(--stzh-color-grey13);--hover-background-color:var(--stzh-color-grey13)}[disabled].sc-stzh-button-h:not([disabled=false])[variant=secondary],[disabled].sc-stzh-button-h:not([disabled=false])[variant=input],[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=secondary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=input],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=tertiary]{--color:var(--stzh-color-grey25);--border-color:var(--stzh-color-grey13);--background-color:transparent;--hover-color:var(--stzh-color-grey25);--hover-border-color:var(--stzh-color-grey13);--hover-background-color:transparent}@-webkit-keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}60%{-webkit-transform:translateX(-0.25rem);transform:translateX(-0.25rem)}}@keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}60%{-webkit-transform:translateX(-0.25rem);transform:translateX(-0.25rem)}}.sc-stzh-button-h .sc-stzh-button-s>stzh-icon,.stzh-button__icon.sc-stzh-button{--size:var(--icon-size)}.stzh-button.sc-stzh-button{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);line-height:1.25;font-family:inherit;position:relative;z-index:0;overflow:visible;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:stretch;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--color);padding:var(--padding);background-color:var(--background-color);-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;border-style:solid;border-width:var(--border-width);border-color:var(--border-color);cursor:pointer;-webkit-text-decoration-line:none;text-decoration-line:none;width:100%;min-width:var(--height);min-height:var(--height);border-radius:var(--border-radius);text-align:left}.stzh-button.sc-stzh-button:hover{border-color:var(--hover-border-color);background-color:var(--hover-background-color);color:var(--hover-color)}.stzh-button__vhidden.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button__inner.sc-stzh-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}.stzh-button__icon-wrapper.sc-stzh-button{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;width:auto;height:1em}.stzh-button__text.sc-stzh-button{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;white-space:var(--white-space);text-align:center}.stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--icon-text-margin)}.stzh-button__badge.sc-stzh-button{position:absolute;z-index:1;top:0;right:0}.stzh-button__input.sc-stzh-button{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.stzh-button__mark.sc-stzh-button{border:0.0625rem solid var(--stzh-color-grey61);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;-ms-flex-negative:0;flex-shrink:0;border-radius:50%;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:border-color var(--stzh-base-transition-animation-speed);transition:border-color var(--stzh-base-transition-animation-speed);width:1.25rem;height:1.25rem;margin-right:var(--stzh-space-xsmall);border-color:currentColor}.stzh-button__mark.sc-stzh-button::before{content:""}.stzh-button__check.sc-stzh-button{background-color:currentColor;color:var(--stzh-color-primary, var(--stzh-color-zueriblue));width:0.5rem;height:0.5rem;border-radius:50%;opacity:0}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-button__check.sc-stzh-button{background-color:ButtonText}}.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-button.sc-stzh-button:hover .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:focus:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-button__input.sc-stzh-button:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{opacity:1}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-grey61)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:transparent}.stzh-button--is-disabled.sc-stzh-button .stzh-button__mark.sc-stzh-button{background-color:var(--stzh-color-black8)}.stzh-button--size-small.sc-stzh-button,.stzh-button--size-tiny.sc-stzh-button{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-button--is-floating.sc-stzh-button{-webkit-box-shadow:var(--stzh-box-shadow-overlay);box-shadow:var(--stzh-box-shadow-overlay)}.stzh-button--badge-position-button.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:static}.stzh-button__badge.sc-stzh-button,.stzh-button--badge-position-button.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:relative}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--badge-icon-text-margin)}.stzh-button--has-icon-only.sc-stzh-button{width:var(--height);height:var(--height);padding:0}.stzh-button--has-icon-only.sc-stzh-button .stzh-button__text.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button--effect-cta.sc-stzh-button:hover .stzh-button__icon-wrapper.sc-stzh-button{-webkit-animation:stzh-button-effect-cta 1s;animation:stzh-button-effect-cta 1s}.stzh-button--align-left.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:start;justify-content:flex-start}.stzh-button--align-right.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:end;justify-content:flex-end}.stzh-button--align-center.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:center;justify-content:center}.stzh-button--align-space-between.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:justify;justify-content:space-between}.stzh-button--is-disabled.sc-stzh-button{cursor:not-allowed}';var u=t("stzh_button",function(){function t(t){var e=this;o(this,t);this.stzhFocus=n(this,"stzhFocus",7);this.stzhBlur=n(this,"stzhBlur",7);this.stzhChange=n(this,"stzhChange",7);this.focusedByInput=false;this.onInput=function(t){e.checked=e.input.checked;e.stzhChange.emit({component:"stzh-button",originalEvent:t,value:e.value,checked:e.checked})};this.onRootFocus=function(){if(!e.focusedByInput){e.setFocus()}e.focusedByInput=false};this.onFocus=function(t){e.focusedByInput=true;var o=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});e.element.dispatchEvent(o);e.stzhFocus.emit({component:"stzh-button",originalEvent:t})};this.onBlur=function(t){var o=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});e.element.dispatchEvent(o);e.stzhBlur.emit({component:"stzh-button",originalEvent:t})};this.onClick=function(t){if(e.disabled){t.stopPropagation();t.preventDefault()}};this.localization=undefined;this.badge="";this.badgeType="default";this.badgePosition="button";this.badgeEmpty=false;this.fullwidth=false;this.rounded=false;this.floating=false;this.size="default";this.textAlign="default";this.variant="default";this.icon="";this.iconPosition="left";this.checked=false;this.name="";this.value="";this.href="";this.rel=undefined;this.target="";this.download=undefined;this.type="button";this.disabled=false;this.active=false;this.label="";this.effect="default";this.iconOnly=false;this.linkAccesskey=undefined;this.a11yLabel=undefined;this.a11yDescribedby="";this.a11yExpanded=undefined;this.a11yDisabled=undefined;this.a11yControls=undefined;this.a11yTabindex=undefined;this.analyticsId=undefined}t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.button.focus();return[2]}))}))};t.prototype.renderIcon=function(t){return e("div",{class:"stzh-button__icon-wrapper"},this.icon?e("stzh-icon",{class:"stzh-button__icon",name:this.icon}):e("slot",{name:"icon"}),(this.badge||this.badgeEmpty)&&this.badgePosition==="icon"&&t&&e("stzh-badge",{class:"stzh-button__badge",label:this.badge,type:this.badgeType}))};t.prototype.renderContent=function(){var t=this;return e("div",{class:"stzh-button__text"},this.rel&&this.rel.includes("external")&&e("div",{class:"stzh-button__vhidden"},this.localization.$globals.externalLinkLabel),this.download&&e("div",{class:"stzh-button__vhidden"},this.localization.$globals.downloadLinkLabel),e("div",{ref:function(o){return t.text=o}},this.label?this.label:e("slot",null)))};t.prototype.renderInner=function(t){return e(r,null,e("div",{class:"stzh-button__inner",onClick:this.onClick},this.type==="radio"&&e("div",{class:"stzh-button__mark"},e("div",{class:"stzh-button__check"})),this.iconPosition==="left"&&this.renderIcon(t),this.renderContent(),this.iconPosition==="right"&&this.renderIcon(t)),(this.badge||this.badgeEmpty)&&(this.badgePosition==="button"||!t)&&e("stzh-badge",{class:"stzh-button__badge",label:this.badge,type:this.badgeType,onClick:this.onClick}))};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(o){switch(o.label){case 0:if(!!this.localization)return[3,2];t=this;return[4,h(this.element,"button")];case 1:t.localization=o.sent();o.label=2;case 2:return[2]}}))}))};t.prototype.componentDidRender=function(){var t=this;requestAnimationFrame((function(){t.button.setAttribute("s-object-id",t.analyticsId||t.text.innerText)}))};t.prototype.render=function(){var t;var o=this;var n=a(this.element,"icon")||!!this.icon;var r=(t={"stzh-button":true,"stzh-button--has-icon":n,"stzh-button--has-icon-only":this.iconOnly,"stzh-button--has-badge":!!this.badge,"stzh-button--is-floating":this.floating,"stzh-button--is-rounded":this.rounded,"stzh-button--is-fullwidth":this.fullwidth,"stzh-button--is-disabled":this.disabled||this.a11yDisabled,"stzh-button--is-active":this.active},t["stzh-button--effect-".concat(this.effect)]=!!this.effect,t["stzh-button--badge-position-".concat(this.badgePosition)]=!!this.badgePosition,t["stzh-button--align-".concat(this.textAlign)]=!!this.textAlign,t["stzh-button--size-".concat(this.size)]=!!this.size,t["stzh-button--type-".concat(this.type)]=!!this.type,t["stzh-button--".concat(this.variant)]=!!this.variant,t);return e(s,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},this.href?e("a",{ref:function(t){return o.button=t},href:this.disabled?null:this.href,rel:this.rel,download:this.download,target:this.target,class:r,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls||null,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},this.renderInner(n)):this.type==="radio"?e("label",{ref:function(t){return o.button=t},class:r,onClick:this.onClick},e("input",{ref:function(t){return o.input=t},type:"radio",class:"stzh-button__input",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls||null,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick,onInput:this.onInput}),this.renderInner(n)):e("button",{ref:function(t){return o.button=t},class:r,type:this.type,disabled:this.disabled,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls||null,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},this.renderInner(n)))};Object.defineProperty(t.prototype,"element",{get:function(){return i(this)},enumerable:false,configurable:true});return t}());u.style=b;var d=".sc-stzh-icon-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-icon-h{display:none}.sc-stzh-icon-h *.sc-stzh-icon,.sc-stzh-icon-h *.sc-stzh-icon::before,.sc-stzh-icon-h *.sc-stzh-icon::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-icon-h{--size:var(--stzh-icon-size-default);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:currentColor;vertical-align:text-top}.stzh-icon.sc-stzh-icon{width:var(--size);height:var(--size)}";var z=0;var f=t("stzh_icon",function(){function t(t){o(this,t);this.name="";this.a11yTitle=""}t.prototype.componentWillLoad=function(){this.iconId="stzh-icon-".concat(z++)};t.prototype.render=function(){return e(s,null,this.name&&e("svg",{class:"stzh-icon",role:this.a11yTitle?"img":"presentation","aria-hidden":this.a11yTitle?null:"true",focusable:this.a11yTitle?"true":"false","aria-labelledby":this.a11yTitle?"".concat(this.iconId,"-title"):null},this.a11yTitle&&e("title",{id:"".concat(this.iconId,"-title")},this.a11yTitle),e("use",{href:"#stzh-icon-".concat(this.name)})))};return t}());f.style=d}}}));
+//# sourceMappingURL=p-88440469.system.entry.js.map