@oiz/stzh-components 2.7.0 → 2.8.0-beta

package/dist/stzh-components/{p-0f71e85f.entry.js.map → p-8a44987c.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stzhChipCss","StzhChip","this","focusedByInput","onRootFocus","setFocus","onFocus","event","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","emit","component","originalEvent","onBlur","blurEvent","stzhBlur","onClick","stzhClick","onRemoveClick","stzhRemove","async","chip","focus","componentDidRender","requestAnimationFrame","setAttribute","analyticsId","text","innerText","renderInner","h","Fragment","class","icon","name","lines","ref","el","label","counter","render","classes","active","disabled","removable","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","innerHTML","textElement","localization","fetchTranslations","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","this","focusedByInput","onRootFocus","setFocus","onFocus","event","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","emit","component","originalEvent","onBlur","blurEvent","stzhBlur","onClick","stzhClick","onRemoveClick","stzhRemove","async","chip","focus","componentDidRender","requestAnimationFrame","setAttribute","analyticsId","text","innerText","renderInner","h","Fragment","class","icon","name","lines","ref","el","label","counter","render","classes","active","disabled","removable","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","innerHTML","textElement","localization","fetchTranslations","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-8a58fa64.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as o,h as e,a as s,g as r}from"./p-9e02896c.js";import{j as h}from"./p-26c09e81.js";import{s as a}from"./p-fc339100.js";import{f as i}from"./p-25a09313.js";import"./p-3e8ff66b.js";const n=".sc-stzh-ghettobox-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-ghettobox-h{display:none}.sc-stzh-ghettobox-h *.sc-stzh-ghettobox,.sc-stzh-ghettobox-h *.sc-stzh-ghettobox::before,.sc-stzh-ghettobox-h *.sc-stzh-ghettobox::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-ghettobox-h{--stzh-flyingfocus-color:var(--stzh-base-invert-color);--stzh-base-color:var(--stzh-base-invert-color);--stzh-base-lead-color:var(--stzh-base-invert-color);--stzh-base-border-color:var(--stzh-base-invert-color);--stzh-heading-color:var(--stzh-base-invert-color);--stzh-link-color:var(--stzh-base-invert-color);--stzh-link-hover-color:var(--stzh-base-invert-color);--background-color:var(--stzh-color-error);--color:var(--stzh-base-invert-color);--richtext-color:var(--color);--close-color:var(--stzh-base-invert-color);--button-color:var(--color);--hover-button-color:var(--background-color);--hover-close-color:var(--background-color)}.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-richtext{--stzh-base-color:var(--richtext-color)}.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][variant=default]{--color:var(--hover-button-color);--background-color:var(--stzh-base-invert-color);--border-color:var(--stzh-base-invert-color);--hover-color:var(--hover-button-color);--hover-background-color:var(--stzh-base-invert-color72);--hover-border-color:transparent}.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][variant=secondary]{--color:var(--stzh-base-invert-color);--background-color:transparent;--border-color:var(--stzh-base-invert-color);--hover-color:var(--hover-button-color);--hover-background-color:var(--stzh-base-invert-color72);--hover-border-color:transparent}.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][variant=tertiary]{--color:var(--stzh-base-invert-color);--background-color:transparent;--hover-color:var(--stzh-base-invert-color);--hover-background-color:var(--stzh-base-invert-color16)}.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][active]:not([active=false]){--color:var(--hover-button-color);--background-color:var(--stzh-base-invert-color72);--border-color:transparent;--hover-color:var(--hover-button-color);--hover-background-color:var(--stzh-base-invert-color72);--hover-border-color:transparent}.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][disabled]:not([disabled=false]),.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][a11y-disabled]:not([a11y-disabled=false]){--border-color:transparent;--background-color:var(--stzh-base-invert-color32);--hover-border-color:transparent;--hover-background-color:var(--stzh-base-invert-color32)}.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][disabled]:not([disabled=false])[variant=secondary],.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][disabled]:not([disabled=false])[variant=input],.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][disabled]:not([disabled=false])[variant=tertiary],.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][a11y-disabled]:not([a11y-disabled=false])[variant=secondary],.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][a11y-disabled]:not([a11y-disabled=false])[variant=input],.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][a11y-disabled]:not([a11y-disabled=false])[variant=tertiary]{--color:var(--stzh-base-invert-color32);--border-color:var(--stzh-base-invert-color32);--background-color:transparent;--hover-color:var(--stzh-base-invert-color32);--hover-border-color:var(--stzh-base-invert-color32);--hover-background-color:transparent}.stzh-ghettobox.sc-stzh-ghettobox{padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-xxlarge);padding-left:var(--stzh-space-xxxlarge);padding-right:var(--stzh-space-xxxlarge);position:relative;display:-ms-flexbox;display:flex;background-color:var(--background-color);color:var(--color);-webkit-box-shadow:var(--stzh-box-shadow-message);box-shadow:var(--stzh-box-shadow-message);border-radius:var(--stzh-button-border-radius)}@media screen and (min-width: 1024px){.stzh-ghettobox.sc-stzh-ghettobox{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-ghettobox.sc-stzh-ghettobox{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){.stzh-ghettobox.sc-stzh-ghettobox{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-ghettobox.sc-stzh-ghettobox{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){.stzh-ghettobox.sc-stzh-ghettobox{padding-left:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){.stzh-ghettobox.sc-stzh-ghettobox{padding-left:var(--stzh-space-big)}}@media screen and (min-width: 1260px){.stzh-ghettobox.sc-stzh-ghettobox{padding-left:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){.stzh-ghettobox.sc-stzh-ghettobox{padding-right:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){.stzh-ghettobox.sc-stzh-ghettobox{padding-right:var(--stzh-space-big)}}@media screen and (min-width: 1260px){.stzh-ghettobox.sc-stzh-ghettobox{padding-right:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){.stzh-ghettobox.sc-stzh-ghettobox{border-radius:0.1875rem}}.stzh-ghettobox__hidden-title.sc-stzh-ghettobox{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-ghettobox__message.sc-stzh-ghettobox{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-positive:1;flex-grow:1}.stzh-ghettobox__main-title.sc-stzh-ghettobox{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-size:var(--stzh-font-curve-h1-default-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h1-default-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h1-default-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing));margin:0;color:inherit}@media screen and (min-width: 600px){.stzh-ghettobox__main-title.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-h1-small-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h1-small-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h1-small-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}@media screen and (min-width: 1024px){.stzh-ghettobox__main-title.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-h1-medium-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-h1-medium-heading-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-h1-medium-heading-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1440px){.stzh-ghettobox__main-title.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-h1-ultra-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-h1-ultra-heading-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-h1-ultra-heading-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}.stzh-ghettobox__description.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 1024px){.stzh-ghettobox__description.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-ghettobox__description.sc-stzh-ghettobox:not(:empty),.stzh-ghettobox__button.sc-stzh-ghettobox:not(:empty){margin-top:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-ghettobox__description.sc-stzh-ghettobox:not(:empty),.stzh-ghettobox__button.sc-stzh-ghettobox:not(:empty){margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-ghettobox__description.sc-stzh-ghettobox:not(:empty),.stzh-ghettobox__button.sc-stzh-ghettobox:not(:empty){margin-top:var(--stzh-space-large)}}.stzh-ghettobox__close.sc-stzh-ghettobox{-ms-flex-negative:0;flex-shrink:0}@media screen and (min-width: 600px){.stzh-ghettobox__close.sc-stzh-ghettobox{margin-left:var(--stzh-space-small)}}.stzh-ghettobox__close.sc-stzh-ghettobox{position:absolute;top:0;right:0}.stzh-ghettobox__close[variant=default].sc-stzh-ghettobox{--color:var(--hover-close-color);--background-color:var(--stzh-base-invert-color);--border-color:var(--stzh-base-invert-color);--hover-color:var(--hover-close-color);--hover-background-color:var(--stzh-base-invert-color72);--hover-border-color:transparent}.stzh-ghettobox__close[variant=secondary].sc-stzh-ghettobox{--color:var(--stzh-base-invert-color);--background-color:transparent;--border-color:var(--stzh-base-invert-color);--hover-color:var(--hover-close-color);--hover-background-color:var(--stzh-base-invert-color72);--hover-border-color:transparent}.stzh-ghettobox__close[variant=tertiary].sc-stzh-ghettobox{--color:var(--stzh-base-invert-color);--background-color:transparent;--hover-color:var(--stzh-base-invert-color);--hover-background-color:var(--stzh-base-invert-color16)}.stzh-ghettobox__close[active].sc-stzh-ghettobox:not([active=false]){--color:var(--hover-close-color);--background-color:var(--stzh-base-invert-color72);--border-color:transparent;--hover-color:var(--hover-close-color);--hover-background-color:var(--stzh-base-invert-color72);--hover-border-color:transparent}.stzh-ghettobox__close[disabled].sc-stzh-ghettobox:not([disabled=false]),.stzh-ghettobox__close[a11y-disabled].sc-stzh-ghettobox:not([a11y-disabled=false]){--border-color:transparent;--background-color:var(--stzh-base-invert-color32);--hover-border-color:transparent;--hover-background-color:var(--stzh-base-invert-color32)}.stzh-ghettobox__close[disabled].sc-stzh-ghettobox:not([disabled=false])[variant=secondary],.stzh-ghettobox__close[disabled].sc-stzh-ghettobox:not([disabled=false])[variant=input],.stzh-ghettobox__close[disabled].sc-stzh-ghettobox:not([disabled=false])[variant=tertiary],.stzh-ghettobox__close[a11y-disabled].sc-stzh-ghettobox:not([a11y-disabled=false])[variant=secondary],.stzh-ghettobox__close[a11y-disabled].sc-stzh-ghettobox:not([a11y-disabled=false])[variant=input],.stzh-ghettobox__close[a11y-disabled].sc-stzh-ghettobox:not([a11y-disabled=false])[variant=tertiary]{--color:var(--stzh-base-invert-color32);--border-color:var(--stzh-base-invert-color32);--background-color:transparent;--hover-color:var(--stzh-base-invert-color32);--hover-border-color:var(--stzh-base-invert-color32);--hover-background-color:transparent}.stzh-ghettobox--has-close-button.sc-stzh-ghettobox{padding-right:var(--stzh-space-xxxlarge)}@media screen and (min-width: 600px){.stzh-ghettobox--has-close-button.sc-stzh-ghettobox{padding-right:var(--stzh-space-medium)}}@media screen and (min-width: 600px) and (min-width: 1024px){.stzh-ghettobox--has-close-button.sc-stzh-ghettobox{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 600px) and (min-width: 1260px){.stzh-ghettobox--has-close-button.sc-stzh-ghettobox{padding-right:var(--stzh-space-xlarge)}}";const c="stzh-components-ghettobox-close-time";const l=class{constructor(e){t(this,e);this.stzhOpen=o(this,"stzhOpen",7);this.stzhClose=o(this,"stzhClose",7);this.onCloseButtonClick=()=>{this.hide()};this.init=()=>{const t=this.element.querySelector('stzh-button[slot="button"]');if(t){a(t,{size:"small",variant:"secondary",effect:"cta",icon:"arrow-right-long",iconPosition:"right"})}};this.hiddenTitle="";this.mainTitle="";this.description="";this.hideClose=false;this.publishDate=undefined;this.closeTimeKey="global-alert";this.localization=undefined;this.open=true}publishDateWatcher(t){if(typeof t==="string"){this._publishDate=new Date(t)}else{this._publishDate=t}if(this.closeTimeKey&&this._publishDate){const t=h.get(`${c}-${this.closeTimeKey}`);if(t&&Number(t)>=this._publishDate.getTime()){this.hide(false)}}}async show(){this.open=true;this.stzhOpen.emit({component:"stzh-ghettobox"})}async hide(t=true){this.open=false;this.stzhClose.emit({component:"stzh-ghettobox"});if(this.closeTimeKey&&t){h.set(`${c}-${this.closeTimeKey}`,Date.now().toString())}}async componentWillLoad(){this.publishDateWatcher(this.publishDate);if(!this.localization){this.localization=await i(this.element,"ghettobox")}}connectedCallback(){this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}render(){const t={"stzh-ghettobox":true,"stzh-ghettobox--has-close-button":!this.hideClose};return e(s,{hidden:!this.open},e("div",{class:t},e("h1",{class:"stzh-ghettobox__hidden-title"},this.hiddenTitle||this.localization.hiddenTitle),e("div",{class:"stzh-ghettobox__message"},e("h2",{class:"stzh-ghettobox__main-title"},this.mainTitle),e("div",{class:"stzh-ghettobox__description"},this.description?this.description:e("slot",null)),e("div",{class:"stzh-ghettobox__button"},e("slot",{name:"button"}))),!this.hideClose&&e("stzh-button",{class:"stzh-ghettobox__close",onClick:this.onCloseButtonClick,a11yLabel:this.localization.close,variant:"tertiary",size:"small",iconOnly:true,icon:"close"})))}get element(){return r(this)}static get watchers(){return{publishDate:["publishDateWatcher"]}}};l.style=n;export{l as stzh_ghettobox};
+//# sourceMappingURL=p-8a58fa64.entry.js.map

package/dist/stzh-components/p-8a58fa64.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stzhGhettoboxCss","KEY_PREFIX_CLOSE_TIME","StzhGhettobox","this","onCloseButtonClick","hide","init","button","element","querySelector","setPropsIfNull","size","variant","effect","icon","iconPosition","publishDateWatcher","newValue","_publishDate","Date","closeTimeKey","timeClosed","Cookie","get","Number","getTime","async","open","stzhOpen","emit","component","setCloseKey","stzhClose","set","now","toString","publishDate","localization","fetchTranslations","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","classes","hideClose","h","Host","hidden","class","hiddenTitle","mainTitle","description","name","onClick","a11yLabel","close","iconOnly"],"sources":["./src/components/stzh-ghettobox/stzh-ghettobox.scss?tag=stzh-ghettobox&encapsulation=scoped","./src/components/stzh-ghettobox/stzh-ghettobox.tsx"],"sourcesContent":[":host {\n  @include base-invert;\n\n  --background-color: #{$colorError};\n  --color: #{$baseInvertColor};\n  --richtext-color: var(--color);\n  --close-color: #{$baseInvertColor};\n  --button-color: var(--color);\n\n  --hover-button-color: var(--background-color);\n  --hover-close-color: var(--background-color);\n\n  ::slotted(stzh-richtext) {\n    --stzh-base-color: var(--richtext-color);\n  }\n\n  ::slotted(stzh-button[slot=\"button\"]) {\n    @include button-invert(var(--hover-button-color));\n  }\n}\n\n.stzh-ghettobox {\n  @include spaceCurve('padding-top', 'large');\n  @include spaceCurve('padding-bottom', 'large');\n  @include spaceCurve('padding-left', 'big');\n  @include spaceCurve('padding-right', 'big');\n  position: relative;\n  display: flex;\n  background-color: var(--background-color);\n  color: var(--color);\n  box-shadow: $boxShadowMessage;\n  border-radius: $buttonBorderRadius;\n\n  @include mq($from: large) {\n    border-radius: 3px;\n  }\n\n  &__hidden-title {\n    @include visuallyhidden;\n  }\n\n  &__message {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n  }\n\n  &__main-title {\n    @include font('title');\n    @include fontCurve('h1', 'heading');\n    margin: 0;\n    color: inherit;\n  }\n\n  &__description {\n    @include fontCurve('p1');\n  }\n\n  &__description,\n  &__button {\n    &:not(:empty) {\n      @include spaceCurve('margin-top', 'small');\n    }\n  }\n\n  &__close {\n    flex-shrink: 0;\n\n    @include mq($from: small) {\n      margin-left: space('small');\n    }\n  }\n\n  &__close {\n    @include button-invert(var(--hover-close-color));\n\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  /* Has close button */\n\n  &--has-close-button {\n    padding-right: spaceCurveValue('big');\n\n    @include mq($from: small) {\n      @include spaceCurve('padding-right', 'regular');\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  Watch,\n  State\n} from \"@stencil/core\";\n\nimport Cookie from \"js-cookie\";\n\nimport { StzhGhettoboxOpenEvent, StzhGhettoboxCloseEvent } from \"../../index\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { StzhGhettoboxLocalizedText } from \"./stzh-ghettobox.localization\"\n\nconst KEY_PREFIX_CLOSE_TIME = \"stzh-components-ghettobox-close-time\";\n\n/**\n * @slot - Slot for description content (use instead of description property)\n * @prop --background-color: Set background and button text hover color\n */\n@Component({\n  tag: \"stzh-ghettobox\",\n  styleUrl: \"stzh-ghettobox.scss\",\n  scoped: true\n})\nexport class StzhGhettobox {\n  /** Overwrite hidden h1 title */\n  @Prop() hiddenTitle: string = \"\";\n\n  /** Main title */\n  @Prop() mainTitle: string = \"\";\n\n  /** Description */\n  @Prop() description: string = \"\";\n\n  /** Hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /**\n   * Publish date for ghettobox.\n   * If user hasn't closed it yet or closed before this date\n   * (cookie check), it will be shown.\n   */\n  @Prop() publishDate: string | Date;\n  private _publishDate: Date;\n\n  /**\n   * Name of cookie to compare its value with set `publishDate`\n   * to determine if ghettobox was already closed before by the user.\n   * If empty (\"\"), no check is done and ghettobox\n   * will always be shown again after a refresh.\n   * Cookie name will be prefixed with `stzh-components-ghettobox-close-time`.\n   */\n  @Prop() closeTimeKey: string = \"global-alert\";\n\n  /** Translation strings */\n  @Prop() localization: StzhGhettoboxLocalizedText;\n\n  /** Ghettobox open event */\n  @Event() stzhOpen: EventEmitter<StzhGhettoboxOpenEvent>;\n\n  /** Ghettobox close event */\n  @Event() stzhClose: EventEmitter<StzhGhettoboxCloseEvent>;\n\n  @Element() element: HTMLStzhGhettoboxElement;\n\n  /** Open state */\n  @State() open: boolean = true;\n\n  @Watch(\"publishDate\")\n  publishDateWatcher(newValue: string | Date) {\n    if (typeof newValue === \"string\") {\n      this._publishDate = new Date(newValue);\n    } else {\n      this._publishDate = newValue;\n    }\n\n    if (this.closeTimeKey && this._publishDate) {\n      const timeClosed = Cookie.get(`${KEY_PREFIX_CLOSE_TIME}-${this.closeTimeKey}`);\n      if (timeClosed && Number(timeClosed) >= this._publishDate.getTime()) {\n        this.hide(false);\n      }\n    }\n  }\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-ghettobox\"\n    })\n  }\n\n  @Method()\n  async hide(setCloseKey: boolean = true) {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-ghettobox\"\n    });\n\n    if (this.closeTimeKey && setCloseKey) {\n      Cookie.set(`${KEY_PREFIX_CLOSE_TIME}-${this.closeTimeKey}`, Date.now().toString());\n    }\n  }\n\n  private observer: MutationObserver;\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  }\n\n  private init = () => {\n    const button = this.element.querySelector('stzh-button[slot=\"button\"]');\n\n    if (button) {\n      setPropsIfNull(button, {\n        size: \"small\",\n        variant: \"secondary\",\n        effect: \"cta\",\n        icon: \"arrow-right-long\",\n        iconPosition: \"right\"\n      } as HTMLStzhButtonElement)\n    }\n  }\n\n  async componentWillLoad() {\n    this.publishDateWatcher(this.publishDate);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"ghettobox\");\n    }\n  }\n\n  connectedCallback() {\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    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-ghettobox\": true,\n      \"stzh-ghettobox--has-close-button\": !this.hideClose\n    };\n\n    return (\n      <Host hidden={!this.open}>\n        <div class={classes}>\n          <h1 class=\"stzh-ghettobox__hidden-title\">\n            {this.hiddenTitle || this.localization.hiddenTitle}\n          </h1>\n          <div class=\"stzh-ghettobox__message\">\n            <h2 class=\"stzh-ghettobox__main-title\">\n              {this.mainTitle}\n            </h2>\n            <div class=\"stzh-ghettobox__description\">\n              {this.description ? this.description : <slot></slot>}\n            </div>\n            <div class=\"stzh-ghettobox__button\">\n              <slot name=\"button\"></slot>\n            </div>\n          </div>\n          {!this.hideClose &&\n            <stzh-button\n              class=\"stzh-ghettobox__close\"\n              onClick={this.onCloseButtonClick}\n              a11yLabel={this.localization.close}\n              variant=\"tertiary\"\n              size=\"small\"\n              iconOnly={true}\n              icon=\"close\"\n            ></stzh-button>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oMAAA,MAAMA,EAAmB,qmXCqBzB,MAAMC,EAAwB,uC,MAWjBC,EAAa,M,iGAkFhBC,KAAAC,mBAAqB,KAC3BD,KAAKE,MAAM,EAGLF,KAAAG,KAAO,KACb,MAAMC,EAASJ,KAAKK,QAAQC,cAAc,8BAE1C,GAAIF,EAAQ,CACVG,EAAeH,EAAQ,CACrBI,KAAM,QACNC,QAAS,YACTC,OAAQ,MACRC,KAAM,mBACNC,aAAc,S,oBA7FU,G,eAGF,G,iBAGE,G,eAGD,M,6CAiBE,e,sCAcN,I,CAGzBC,mBAAmBC,GACjB,UAAWA,IAAa,SAAU,CAChCd,KAAKe,aAAe,IAAIC,KAAKF,E,KACxB,CACLd,KAAKe,aAAeD,C,CAGtB,GAAId,KAAKiB,cAAgBjB,KAAKe,aAAc,CAC1C,MAAMG,EAAaC,EAAOC,IAAI,GAAGtB,KAAyBE,KAAKiB,gBAC/D,GAAIC,GAAcG,OAAOH,IAAelB,KAAKe,aAAaO,UAAW,CACnEtB,KAAKE,KAAK,M,GAMhBqB,aACEvB,KAAKwB,KAAO,KACZxB,KAAKyB,SAASC,KAAK,CACjBC,UAAW,kB,CAKfJ,WAAWK,EAAuB,MAChC5B,KAAKwB,KAAO,MACZxB,KAAK6B,UAAUH,KAAK,CAClBC,UAAW,mBAGb,GAAI3B,KAAKiB,cAAgBW,EAAa,CACpCT,EAAOW,IAAI,GAAGhC,KAAyBE,KAAKiB,eAAgBD,KAAKe,MAAMC,W,EAwB3ET,0BACEvB,KAAKa,mBAAmBb,KAAKiC,aAE7B,IAAKjC,KAAKkC,aAAc,CACtBlC,KAAKkC,mBAAqBC,EAAkBnC,KAAKK,QAAS,Y,EAI9D+B,oBACEpC,KAAKG,OAELH,KAAKqC,SAAW,IAAIC,iBAAiBtC,KAAKG,MAC1CH,KAAKqC,SAASE,QAAQvC,KAAKK,QAAS,CAClCmC,UAAW,KACXC,QAAS,M,CAIbC,uBACE,GAAI1C,KAAKqC,SAAU,CACjBrC,KAAKqC,SAASM,Y,EAIlBC,SACE,MAAMC,EAAU,CACd,iBAAkB,KAClB,oCAAqC7C,KAAK8C,WAG5C,OACEC,EAACC,EAAI,CAACC,QAASjD,KAAKwB,MAClBuB,EAAA,OAAKG,MAAOL,GACVE,EAAA,MAAIG,MAAM,gCACPlD,KAAKmD,aAAenD,KAAKkC,aAAaiB,aAEzCJ,EAAA,OAAKG,MAAM,2BACTH,EAAA,MAAIG,MAAM,8BACPlD,KAAKoD,WAERL,EAAA,OAAKG,MAAM,+BACRlD,KAAKqD,YAAcrD,KAAKqD,YAAcN,EAAA,cAEzCA,EAAA,OAAKG,MAAM,0BACTH,EAAA,QAAMO,KAAK,cAGbtD,KAAK8C,WACLC,EAAA,eACEG,MAAM,wBACNK,QAASvD,KAAKC,mBACduD,UAAWxD,KAAKkC,aAAauB,MAC7BhD,QAAQ,WACRD,KAAK,QACLkD,SAAU,KACV/C,KAAK,W"}

package/dist/stzh-components/p-8eaac610.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as s,a,g as e,F as l}from"./p-9e02896c.js";import{m as h,a as n,r as d}from"./p-9111e257.js";import{f as o}from"./p-25a09313.js";const r=".sc-stzh-datalist-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-datalist-h{display:none}.sc-stzh-datalist-h *.sc-stzh-datalist,.sc-stzh-datalist-h *.sc-stzh-datalist::before,.sc-stzh-datalist-h *.sc-stzh-datalist::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-datalist-h{--item-label-min-width:7.5rem}@media screen and (min-width: 800px){.sc-stzh-datalist-h{--item-label-min-width:9rem}}[disable-label-min-width].sc-stzh-datalist-h:not([disable-label-min-width=false]){--item-label-min-width:none}.sc-stzh-datalist-h .sc-stzh-datalist-s>stzh-details,.stzh-datalist.sc-stzh-datalist stzh-details.sc-stzh-datalist{--content-grid-column:1 / 6;--content-padding:var(--stzh-space-large) 0 var(--stzh-space-xlarge);--content-border-bottom:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 1024px){.sc-stzh-datalist-h .sc-stzh-datalist-s>stzh-details,.stzh-datalist.sc-stzh-datalist stzh-details.sc-stzh-datalist{--content-padding:var(--stzh-space-large) 0 var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-datalist-h .sc-stzh-datalist-s>stzh-details,.stzh-datalist.sc-stzh-datalist stzh-details.sc-stzh-datalist{--content-padding:var(--stzh-space-large) 0 var(--stzh-space-xxxlarge)}}.stzh-datalist__list.sc-stzh-datalist{width:100%}.stzh-datalist--has-hidden-border.sc-stzh-datalist .stzh-datalist__list.sc-stzh-datalist{margin-top:calc(var(--stzh-space-xsmall) / -2);margin-bottom:calc(var(--stzh-space-xsmall) / -2)}.stzh-datalist--direction-horizontal.sc-stzh-datalist .stzh-datalist__list.sc-stzh-datalist{width:100%;display:grid;border-collapse:collapse;grid-template-columns:auto auto minmax(auto, 1fr) auto auto;-ms-flex-align:stretch;align-items:stretch}";const c=class{constructor(s){t(this,s);this.stzhDirectionChange=i(this,"stzhDirectionChange",7);this.stzhHideBorderChange=i(this,"stzhHideBorderChange",7);this._items=[];this.resizeHandler=()=>{if(h("ultra").matches&&this.directionUltra!=="inherit"){this.currentDirection=this.directionUltra}else if(h("large").matches&&this.directionLarge!=="inherit"){this.currentDirection=this.directionLarge}else if(h("medium").matches&&this.directionMedium!=="inherit"){this.currentDirection=this.directionMedium}else if(h("small").matches&&this.directionSmall!=="inherit"){this.currentDirection=this.directionSmall}else{this.currentDirection=this.direction}};this.direction="vertical";this.directionSmall="horizontal";this.directionMedium="inherit";this.directionLarge="inherit";this.directionUltra="inherit";this.hideBorder=false;this.disableLabelMinWidth=false;this.currentDirection=undefined;this.items=[]}hideBorderWatcher(t){this.stzhHideBorderChange.emit({component:"stzh-datalist",value:t})}directionWatcher(){this.resizeHandler()}currentDirectionWatcher(t){this.stzhDirectionChange.emit({component:"stzh-datalist",value:t})}itemsWatcher(t){if(typeof t==="string"){this._items=JSON.parse(t)}else{this._items=t}}async componentWillLoad(){this.itemsWatcher(this.items);this.hideBorderWatcher(this.hideBorder);this.resizeHandler()}connectedCallback(){n(this.resizeHandler)}disconnectedCallback(){d(this.resizeHandler)}render(){const t={"stzh-datalist":true,"stzh-datalist--has-hidden-border":this.hideBorder,[`stzh-datalist--direction-${this.currentDirection}`]:!!this.currentDirection};return s(a,null,s("div",{class:t},s("div",{class:"stzh-datalist__list",role:"list"},this._items.map((t=>s("stzh-datalist-item",Object.assign({},t),t.items&&t.items.length>0&&s("stzh-datalist",{items:t.items})))),s("slot",null))))}get element(){return e(this)}static get watchers(){return{hideBorder:["hideBorderWatcher"],direction:["directionWatcher"],directionSmall:["directionWatcher"],directionMedium:["directionWatcher"],directionLarge:["directionWatcher"],directionUltra:["directionWatcher"],currentDirection:["currentDirectionWatcher"],items:["itemsWatcher"]}}};c.style=r;const m='.sc-stzh-datalist-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-datalist-item-h{display:none}.sc-stzh-datalist-item-h *.sc-stzh-datalist-item,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::before,.sc-stzh-datalist-item-h *.sc-stzh-datalist-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-datalist-item-h{--font-family:var(--stzh-font-family-regular);--font-weight:var(--stzh-font-weight-regular);--color:inherit;--action-display:flex;--label-min-width:var(--item-label-min-width, none);--leading-icon-background-color:var(--stzh-color-grey5);--leading-icon-color:var(--stzh-color-grey70);--hover-leading-icon-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-leading-icon-color:var(--stzh-color-white);--horizontal-min-height:3rem;display:contents}[href].sc-stzh-datalist-item-h:not([href=""]),[a11y-expanded].sc-stzh-datalist-item-h,[a11y-controls].sc-stzh-datalist-item-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.sc-stzh-datalist-item-h .sc-stzh-datalist-item-s>stzh-datalist{margin-left:var(--stzh-space-large)}.stzh-datalist-item.sc-stzh-datalist-item{position:relative;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__vhidden.sc-stzh-datalist-item{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-datalist-item__wrapper.sc-stzh-datalist-item{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}.stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item__action-list.sc-stzh-datalist-item{color:inherit;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;background:transparent;border:none;padding:0;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__leading.is-button.sc-stzh-datalist-item,.stzh-datalist-item__leading.is-link.sc-stzh-datalist-item,.stzh-datalist-item__value.is-button.sc-stzh-datalist-item,.stzh-datalist-item__value.is-link.sc-stzh-datalist-item,.stzh-datalist-item__label.is-button.sc-stzh-datalist-item,.stzh-datalist-item__label.is-link.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-button.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-link.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-button.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-link.sc-stzh-datalist-item{cursor:pointer}.stzh-datalist-item__leading.sc-stzh-datalist-item{-ms-flex-negative:0;flex-shrink:0}.stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty){padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--leading-icon-color);background-color:var(--leading-icon-background-color);width:2.5rem;height:2.5rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-radius:50%;-webkit-transition-property:color, background-color;transition-property:color, background-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);font-family:var(--font-family);font-weight:var(--font-weight);-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 1024px){.stzh-datalist-item__value.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__icon.sc-stzh-datalist-item{color:var(--color)}.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 1024px){.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-datalist-item__meta.sc-stzh-datalist-item{-ms-flex-pack:end;justify-content:flex-end}.stzh-datalist-item__label.sc-stzh-datalist-item{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:normal;color:var(--stzh-base-lead-color)}.stzh-datalist-item__action-list.sc-stzh-datalist-item{display:var(--action-display);-ms-flex-pack:center;justify-content:center;text-align:center}.stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item__action.is-non-interactive.sc-stzh-datalist-item{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:var(--stzh-form-input-tiny-height);height:var(--stzh-form-input-tiny-height)}.stzh-datalist-item__action.is-button[variant=tertiary].sc-stzh-datalist-item{--color:inherit}.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__icon.sc-stzh-datalist-item{-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__richtext.sc-stzh-datalist-item{color:inherit;font-family:inherit;font-weight:inherit}.stzh-datalist-item__interactive.sc-stzh-datalist-item{position:absolute;top:0;left:0}.stzh-datalist-item--is-button.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-closed.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:-ms-inline-flexbox;display:inline-flex}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__icon.sc-stzh-datalist-item{color:var(--hover-color)}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value.sc-stzh-datalist-item{-webkit-text-decoration-line:underline;text-decoration-line:underline}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item,.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:focus-within .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--hover-leading-icon-color);background-color:var(--hover-leading-icon-background-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item{display:-ms-flexbox;display:flex;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-vertical.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item{padding-top:calc(var(--stzh-space-xsmall) / 2);padding-bottom:calc(var(--stzh-space-xsmall) / 2)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border){border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{width:2.5rem;height:2.5rem}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading-icon.sc-stzh-datalist-item{--size:var(--stzh-icon-size-medium)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{-ms-flex-direction:column;flex-direction:column}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item+.stzh-datalist-item__nested.sc-stzh-datalist-item{display:contents}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item+.stzh-datalist-item__nested.sc-stzh-datalist-item .stzh-datalist-item__nested-inner.sc-stzh-datalist-item{grid-column:1/6}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item{min-height:var(--horizontal-min-height)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-top:calc(var(--stzh-space-xsmall) / 2);padding-bottom:calc(var(--stzh-space-xsmall) / 2)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__action-list.sc-stzh-datalist-item{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty){min-width:var(--label-min-width);padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{width:2rem;height:2rem}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta-status.sc-stzh-datalist-item+.stzh-datalist-item__meta-text.sc-stzh-datalist-item{margin-left:var(--stzh-space-xsmall)}';let z=0;const _=class{constructor(s){t(this,s);this.stzhItemActionClick=i(this,"stzhItemActionClick",7);this.actionClick=t=>{this.stzhItemActionClick.emit({component:"stzh-datalist-item",originalEvent:t})};this.handleDirectionChange=t=>{this.direction=t.detail.value};this.handleHideBorderChange=t=>{this.hideBorder=t.detail.value};this.localization=undefined;this.direction="vertical";this.href=undefined;this.rel=undefined;this.target=undefined;this.download=undefined;this.leadingIcon=undefined;this.icon=undefined;this.iconLabel=undefined;this.iconTooltip=undefined;this.label="";this.value="";this.meta="";this.statusLabel="";this.statusType="default";this.hideBorder=false;this.a11yExpanded=undefined;this.a11yControls=undefined;this.external=false}externalWatcher(){this.external=this.rel&&this.rel.includes("external")}renderInner(t){const i=t?"button":this.href?"a":"div";return s(l,null,s(i,{"aria-hidden":this.label?null:"true",tabindex:"-1",id:`${this.datalistItemId}-label`,class:{"stzh-datalist-item__label":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download},this.label),s(i,{id:`${this.datalistItemId}-value`,class:{"stzh-datalist-item__value":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download,"aria-labelledby":i!=="div"?`${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta`:null,"aria-controls":this.a11yControls||null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null},this.external&&s("div",{class:"stzh-datalist-item__vhidden"},this.localization.$globals.externalLinkLabel),this.download&&s("div",{class:"stzh-datalist-item__vhidden"},this.localization.$globals.downloadLinkLabel),s("stzh-richtext",{class:"stzh-datalist-item__richtext",innerHTML:this.value},s("slot",{name:"value"}))),s(i,{"aria-hidden":this.statusLabel||this.meta?null:"true",tabindex:"-1",id:`${this.datalistItemId}-meta`,class:{"stzh-datalist-item__meta":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download},this.statusLabel&&s("stzh-status",{class:"stzh-datalist-item__meta-status",label:this.statusLabel,type:this.statusType}),this.meta&&s("span",{class:"stzh-datalist-item__meta-text"},this.meta)))}renderLeadingIcon(t){const i=t?"button":this.href?"a":"div";return s(i,{role:"presentation","aria-hidden":"true",tabindex:"-1",class:{"stzh-datalist-item__leading":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download},this.leadingIcon&&s("div",{class:"stzh-datalist-item__leading-icon-container"},s("stzh-icon",{class:"stzh-datalist-item__leading-icon",name:this.leadingIcon})))}async connectedCallback(){this.datalist=this.element.closest("stzh-datalist");if(this.datalist){this.direction=this.datalist.currentDirection;this.hideBorder=this.datalist.hideBorder;this.datalist.addEventListener("stzhDirectionChange",this.handleDirectionChange);this.datalist.addEventListener("stzhHideBorderChange",this.handleHideBorderChange)}}disconnectedCallback(){if(this.datalist){this.datalist.removeEventListener("stzhDirectionChange",this.handleDirectionChange);this.datalist.removeEventListener("stzhHideBorderChange",this.handleHideBorderChange);this.datalist=null}}async componentWillLoad(){this.datalistItemId=`stzh-datalist-item-${z++}`;this.externalWatcher();if(!this.localization){this.localization=await o(this.element,"datalist-item")}}render(){const t=typeof this.a11yExpanded!=="undefined"||typeof this.a11yControls!=="undefined";const i=!this.href&&this.icon;const e={"stzh-datalist-item":true,"stzh-datalist-item--is-interactive":!!this.href||t,"stzh-datalist-item--is-link":!!this.href,"stzh-datalist-item--is-button":t,"stzh-datalist-item--is-expanded":this.a11yExpanded,"stzh-datalist-item--has-hidden-border":this.hideBorder,[`stzh-datalist-item--direction-${this.direction}`]:!!this.direction};const h=t?"button":this.href?"a":"div";const n=()=>s("stzh-button",{class:{"stzh-datalist-item__action":true,"is-button":true},variant:"tertiary",size:"tiny","aria-label":this.iconLabel||`${this.label} ${this.value}`,iconOnly:true,icon:this.icon,onClick:this.actionClick});return s(a,{role:"listitem"},s("div",{class:e},this.direction==="horizontal"?s(l,null,this.renderLeadingIcon(t),this.renderInner(t)):s(l,null,this.renderLeadingIcon(t),s("div",{class:"stzh-datalist-item__wrapper"},this.renderInner(t))),s(h,{role:i?null:"presentation","aria-hidden":i?null:"true",tabindex:"-1",class:{"stzh-datalist-item__action-list":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download},this.href&&(this.download?s("div",{class:"stzh-datalist-item__action is-non-interactive"},s("stzh-icon",{class:"stzh-datalist-item__icon",name:this.icon?this.icon:"download"})):s("div",{class:"stzh-datalist-item__action is-non-interactive"},s("stzh-icon",{class:"stzh-datalist-item__icon",name:this.icon?this.icon:this.external?"external-link":"arrow-right"}))),t&&s("div",{class:"stzh-datalist-item__action is-non-interactive"},s("stzh-icon",{class:"stzh-datalist-item__icon is-closed",name:this.icon?this.icon:"plus"}),s("stzh-icon",{class:"stzh-datalist-item__icon is-open",name:this.icon?this.icon:"minus"})),i&&(this.iconTooltip?s("stzh-tooltip",{content:this.iconTooltip},n()):n()))),s("div",{class:"stzh-datalist-item__nested"},s("div",{class:"stzh-datalist-item__nested-inner"},s("slot",null))))}get element(){return e(this)}static get watchers(){return{rel:["externalWatcher"]}}};_.style=m;export{c as stzh_datalist,_ as stzh_datalist_item};
+//# sourceMappingURL=p-8eaac610.entry.js.map

package/dist/stzh-components/p-8eaac610.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stzhDatalistCss","StzhDatalist","this","_items","resizeHandler","media","matches","directionUltra","currentDirection","directionLarge","directionMedium","directionSmall","direction","hideBorderWatcher","newValue","stzhHideBorderChange","emit","component","value","directionWatcher","currentDirectionWatcher","stzhDirectionChange","itemsWatcher","JSON","parse","async","items","hideBorder","connectedCallback","addMediaChangeListener","disconnectedCallback","removeMediaChangeListener","render","classes","h","Host","class","role","map","item","Object","assign","length","stzhDatalistItemCss","datalistItemCounter","StzhDatalistItem","actionClick","originalEvent","stzhItemActionClick","handleDirectionChange","event","detail","handleHideBorderChange","externalWatcher","external","rel","includes","renderInner","isButton","Item","href","Fragment","label","tabindex","id","datalistItemId","target","download","a11yControls","a11yExpanded","localization","$globals","externalLinkLabel","downloadLinkLabel","innerHTML","name","statusLabel","meta","type","statusType","renderLeadingIcon","leadingIcon","datalist","element","closest","addEventListener","removeEventListener","fetchTranslations","hasActionButton","icon","ActionButton","variant","size","iconLabel","iconOnly","onClick","iconTooltip","content"],"sources":["./src/components/stzh-datalist/stzh-datalist.scss?tag=stzh-datalist&encapsulation=scoped","./src/components/stzh-datalist/stzh-datalist.tsx","./src/components/stzh-datalist-item/stzh-datalist-item.scss?tag=stzh-datalist-item&encapsulation=scoped","./src/components/stzh-datalist-item/stzh-datalist-item.tsx"],"sourcesContent":[":host {\n  --item-label-min-width: 120px;\n\n  @include mq($from: smallheader) {\n    --item-label-min-width: 144px;\n  }\n\n  &[disable-label-min-width]:not([disable-label-min-width=\"false\"]) {\n    --item-label-min-width: none;\n  }\n}\n\n:host ::slotted(stzh-details),\n.stzh-datalist stzh-details {\n  --content-grid-column: 1 / 6;\n  --content-padding: #{space('large')} 0 #{spaceCurveValue('medium')};\n  --content-border-bottom: 1px solid #{$baseBorderColor};\n\n  @include mq($from: medium) {\n    --content-padding: #{space('large')} 0 #{spaceCurveValue('medium', 'medium')};\n  }\n\n  @include mq($from: large) {\n    --content-padding: #{space('large')} 0 #{spaceCurveValue('medium', 'large')};\n  }\n}\n\n.stzh-datalist {\n  &__list {\n    width: 100%;\n  }\n\n  /* Has hidden border variant */\n\n  &--has-hidden-border &__list {\n    margin-top: calc(#{space('xsmall')} / -2);\n    margin-bottom: calc(#{space('xsmall')} / -2);\n  }\n\n  /* Vertical variant */\n\n  &--direction-horizontal &__list {\n    width: 100%;\n    display: grid;\n    border-collapse: collapse;\n    grid-template-columns: auto auto minmax(auto, 1fr) auto auto;\n    align-items: stretch;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Watch,\n  Prop,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhDatalistItemEntry,\n  StzhDatalistDirectionChangeEvent,\n  StzhDatalistHideBorderChangeEvent\n} from \"../../index\";\n\nimport {\n  media,\n  addMediaChangeListener,\n  removeMediaChangeListener\n} from '../../utils/media-utils';\n\n/**\n */\n@Component({\n  tag: \"stzh-datalist\",\n  styleUrl: \"stzh-datalist.scss\",\n  scoped: true\n})\nexport class StzhDatalist {\n  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n  /** Direction above small breakpoint */\n  @Prop({ reflect: true }) directionSmall: \"vertical\" | \"horizontal\" | \"inherit\" = \"horizontal\";\n\n  /** Direction above medium breakpoint  */\n  @Prop({ reflect: true }) directionMedium: \"vertical\" | \"horizontal\" | \"inherit\" = \"inherit\";\n\n  /** Direction above large breakpoint  */\n  @Prop({ reflect: true }) directionLarge: \"vertical\" | \"horizontal\" | \"inherit\" = \"inherit\";\n\n  /** Direction above ultra breakpoint  */\n  @Prop({ reflect: true }) directionUltra: \"vertical\" | \"horizontal\" | \"inherit\" = \"inherit\";\n\n  /** Hide border lines between items */\n  @Prop({ reflect: true }) hideBorder: boolean = false;\n\n  /**\n   * Whether to disable min-width of datalist item label for the `horizontal` variant.\n   *\n   * If `false`, the default `min-width` is `144px` (for >= 800px) and `120px` (for < 800px).\n   * If `true`, the `min-width` is `none`, so the label column, will have the width of cell with the widest content.\n   *\n   * You can also overwrite the label min-width via CSS with the custom property `--item-label-min-width`.\n   */\n  @Prop({ reflect: true }) disableLabelMinWidth: boolean = false;\n\n  /** Current direction in use (readonly)  */\n  @Prop({ reflect: true }) currentDirection: \"vertical\" | \"horizontal\";\n\n  /**\n   * Items in datalist\n   * Array of objects that must at least include `value` attribute.\n   * Can optionally contain `leadingIcon`, `label`, `meta`, `icon`, `iconLabel`, `iconTooltip`, `href`, `statusLabel`, `statusType` attribute and be nested to display deeper levels:\n   * `[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\", \"items\": [...]}]`\n   */\n  @Prop() items: StzhDatalistItemEntry[] | string = [];\n  private _items: StzhDatalistItemEntry[] = [];\n\n\n  /** Direction attribute change event */\n  @Event() stzhDirectionChange: EventEmitter<StzhDatalistDirectionChangeEvent>;\n\n  /** Hide border change event */\n  @Event() stzhHideBorderChange: EventEmitter<StzhDatalistHideBorderChangeEvent>;\n\n  @Element() element: HTMLStzhDatalistElement;\n\n  @Watch(\"hideBorder\")\n  hideBorderWatcher(newValue: boolean) {\n    this.stzhHideBorderChange.emit({\n      component: \"stzh-datalist\",\n      value: newValue\n    });\n  }\n\n  @Watch(\"direction\")\n  @Watch(\"directionSmall\")\n  @Watch(\"directionMedium\")\n  @Watch(\"directionLarge\")\n  @Watch(\"directionUltra\")\n  directionWatcher() {\n    this.resizeHandler();\n  }\n\n  @Watch(\"currentDirection\")\n  currentDirectionWatcher(newValue: \"vertical\" | \"horizontal\") {\n    this.stzhDirectionChange.emit({\n      component: \"stzh-datalist\",\n      value: newValue\n    });\n  }\n\n  @Watch(\"items\")\n  itemsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._items = JSON.parse(newValue);\n    } else {\n      this._items = newValue;\n    }\n  }\n\n  resizeHandler = () => {\n    if (media(\"ultra\").matches && this.directionUltra !== \"inherit\") {\n      this.currentDirection = this.directionUltra;\n    } else if (media(\"large\").matches && this.directionLarge !== \"inherit\") {\n      this.currentDirection = this.directionLarge;\n    } else if (media(\"medium\").matches && this.directionMedium !== \"inherit\") {\n      this.currentDirection = this.directionMedium;\n    } else if (media(\"small\").matches && this.directionSmall !== \"inherit\") {\n      this.currentDirection = this.directionSmall;\n    } else {\n      this.currentDirection = this.direction;\n    }\n  }\n\n  async componentWillLoad() {\n    this.itemsWatcher(this.items);\n    this.hideBorderWatcher(this.hideBorder);\n    this.resizeHandler();\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.resizeHandler);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.resizeHandler);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-datalist\": true,\n      \"stzh-datalist--has-hidden-border\": this.hideBorder,\n      [`stzh-datalist--direction-${this.currentDirection}`]: !!this.currentDirection\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-datalist__list\" role=\"list\">\n            {this._items.map((item) =>\n              <stzh-datalist-item {...item}>\n                {item.items && item.items.length > 0 &&\n                  <stzh-datalist items={item.items}></stzh-datalist>\n                }\n              </stzh-datalist-item>\n            )}\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --font-family: var(--stzh-font-family-regular);\n  --font-weight: var(--stzh-font-weight-regular);\n  --color: inherit;\n  --action-display: flex;\n  --label-min-width: var(--item-label-min-width, none);\n  --leading-icon-background-color: #{$colorGrey5};\n  --leading-icon-color: #{$colorGrey70};\n\n  --hover-leading-icon-background-color: #{$colorPrimaryHover};\n  --hover-leading-icon-color: #{$colorWhite};\n\n  --horizontal-min-height: 48px;\n\n  display: contents;\n\n  &[href]:not([href=\"\"]),\n  &[a11y-expanded],\n  &[a11y-controls] {\n    --color: #{$colorPrimary};\n    --hover-color: #{$colorPrimaryHover};\n  }\n\n  ::slotted(stzh-datalist) {\n    margin-left: space('large');\n  }\n}\n\n.stzh-datalist-item {\n  position: relative;\n  text-decoration-line: none;\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__wrapper {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  &__leading,\n  &__value,\n  &__label,\n  &__meta,\n  &__action-list {\n    color: inherit;\n    display: flex;\n    align-items: center;\n    appearance: none;\n    font-family: inherit;\n    background: transparent;\n    border: none;\n    padding: 0;\n    text-decoration-line: none;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__leading {\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      padding-right: space('xsmall');\n    }\n  }\n\n  &__leading-icon-container {\n    color: var(--leading-icon-color);\n    background-color: var(--leading-icon-background-color);\n    width: 40px;\n    height: 40px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    transition-property: color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__value {\n    @include fontCurve('p1');\n    font-family: var(--font-family);\n    font-weight: var(--font-weight);\n    flex-grow: 1;\n  }\n\n  &__value,\n  &__icon {\n    color: var(--color);\n  }\n\n  &__label,\n  &__meta {\n    @include fontCurve('caption');\n  }\n\n  &__meta {\n    justify-content: flex-end;\n  }\n\n  &__label {\n    @include font('medium');\n    color: $baseLeadColor;\n  }\n\n  &__action-list {\n    display: var(--action-display);\n    justify-content: center;\n    text-align: center;\n\n    &:not(:empty) {\n      padding-left: space('xsmall');\n    }\n  }\n\n  &__action {\n    &.is-non-interactive {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: $formInputHeightTiny;\n      height: $formInputHeightTiny;\n    }\n\n    &.is-button[variant=\"tertiary\"] {\n      --color: inherit;\n    }\n  }\n\n  &__value,\n  &__icon {\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  &__richtext {\n    color: inherit;\n    font-family: inherit;\n    font-weight: inherit;\n  }\n\n  &__interactive {\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  /* Button variant */\n\n  &--is-button &__icon.is-open {\n    display: none;\n  }\n\n  &--is-button#{&}--is-expanded &__icon {\n    &.is-closed {\n      display: none;\n    }\n\n    &.is-open {\n      display: inline-flex;\n    }\n  }\n\n  /* Interactive variant */\n\n  &--is-interactive:hover &__value,\n  &--is-interactive:hover &__icon {\n    color: var(--hover-color);\n  }\n\n  &--is-interactive:hover &__value {\n    text-decoration-line: underline;\n  }\n\n  &--is-interactive:hover &__leading-icon-container,\n  &--is-interactive:focus-within &__leading-icon-container {\n    color: var(--hover-leading-icon-color);\n    background-color: var(--hover-leading-icon-background-color);\n  }\n\n  /* Vertical variant */\n\n  &--direction-vertical {\n    display: flex;\n    padding-top: space('xsmall');\n    padding-bottom: space('xsmall');\n  }\n\n  &--direction-vertical#{&}--has-hidden-border {\n    padding-top: calc(#{space('xsmall')} / 2);\n    padding-bottom: calc(#{space('xsmall')} / 2);\n  }\n\n  &--direction-vertical:not(#{&}--has-hidden-border) {\n    border-bottom: 1px solid $baseBorderColor;\n  }\n\n  &--direction-vertical &__leading-icon-container {\n    width: 40px;\n    height: 40px;\n  }\n\n  &--direction-vertical &__leading-icon {\n    --size: #{iconSize('medium')};\n  }\n\n  &--direction-vertical &__meta {\n    flex-direction: column;\n  }\n\n  /* Horizontal variant */\n\n  &--direction-horizontal,\n  &--direction-horizontal + &__nested {\n    display: contents;\n  }\n\n  &--direction-horizontal + &__nested &__nested-inner {\n    grid-column: 1 / 6;\n  }\n\n  &--direction-horizontal &__leading,\n  &--direction-horizontal &__value,\n  &--direction-horizontal &__label,\n  &--direction-horizontal &__meta,\n  &--direction-horizontal &__action-list {\n    min-height: var(--horizontal-min-height);\n  }\n\n  &--direction-horizontal &__label,\n  &--direction-horizontal &__value,\n  &--direction-horizontal &__meta {\n    padding-top: space('xsmall');\n    padding-bottom: space('xsmall');\n  }\n\n  &--direction-horizontal#{&}--has-hidden-border &__label,\n  &--direction-horizontal#{&}--has-hidden-border &__value,\n  &--direction-horizontal#{&}--has-hidden-border &__meta {\n    padding-top: calc(#{space('xsmall')} / 2);\n    padding-bottom: calc(#{space('xsmall')} / 2);\n  }\n\n  // &--direction-horizontal:not(#{&}--has-hidden-border) &__leading,\n  &--direction-horizontal:not(#{&}--has-hidden-border) &__label,\n  &--direction-horizontal:not(#{&}--has-hidden-border) &__value,\n  &--direction-horizontal:not(#{&}--has-hidden-border) &__meta,\n  &--direction-horizontal:not(#{&}--has-hidden-border) &__action-list {\n    border-bottom: 1px solid $baseBorderColor;\n  }\n\n  &--direction-horizontal &__label {\n    &:not(:empty) {\n      min-width: var(--label-min-width);\n      padding-right: space('xsmall');\n    }\n  }\n\n  &--direction-horizontal &__meta {\n    &:not(:empty) {\n      padding-left: space('xsmall');\n    }\n  }\n\n  &--direction-horizontal &__leading-icon-container {\n    width: 32px;\n    height: 32px;\n  }\n\n  &--direction-horizontal &__meta-status + &__meta-text {\n    margin-left: space('xsmall');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Fragment,\n  State,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhDatalistItemActionClickEvent,\n  StzhDatalistDirectionChangeEvent,\n  StzhDatalistHideBorderChangeEvent\n} from \"../../index\";\n\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet datalistItemCounter = 0;\n\n/**\n * @slot - Slot for nested datalist\n * @slot value - Slot for value (or use value slot instead)\n */\n@Component({\n  tag: \"stzh-datalist-item\",\n  styleUrl: \"stzh-datalist-item.scss\",\n  scoped: true\n})\nexport class StzhDatalistItem {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n  /** Link */\n  @Prop({ reflect: true }) href: string;\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target (if href is used) */\n  @Prop() target: string;\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** Leading icon */\n  @Prop() leadingIcon: string;\n\n  /** Icon of action button (if href is used, will only be for presentation and default to link icon) */\n  @Prop() icon: string;\n\n  /** Overwrite aria-label of action button (default aria label is `label` and `value`). */\n  @Prop() iconLabel: string;\n\n  /** Tooltip content of action button. Overwrites aria-label (set by default or `iconLabel`) of action button. */\n  @Prop() iconTooltip: string;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Value (or use value slot instead) */\n  @Prop() value: string = \"\";\n\n  /** Meta */\n  @Prop() meta: string = \"\";\n\n  /** Status Label */\n  @Prop() statusLabel: string = \"\";\n\n  /** Status Type */\n  @Prop() statusType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n  /** Hide border lines */\n  @Prop({ reflect: true }) hideBorder: boolean = false;\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Whether rel contains external */\n  @State() external: boolean = false;\n\n  /** Item action click event */\n  @Event() stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;\n\n  @Element() element: HTMLStzhDatalistItemElement;\n\n  @Watch(\"rel\")\n  externalWatcher() {\n    this.external = this.rel && this.rel.includes(\"external\");\n  }\n\n  private datalist: HTMLStzhDatalistElement;\n  private datalistItemId: string;\n\n  private actionClick = (originalEvent: MouseEvent) => {\n    this.stzhItemActionClick.emit({\n      component: \"stzh-datalist-item\",\n      originalEvent\n    });\n  }\n\n  private handleDirectionChange = (event: CustomEvent<StzhDatalistDirectionChangeEvent>) => {\n    this.direction = event.detail.value;\n  }\n\n  private handleHideBorderChange = (event: CustomEvent<StzhDatalistHideBorderChangeEvent>) => {\n    this.hideBorder = event.detail.value;\n  }\n\n  private renderInner(isButton: boolean): DocumentFragment {\n    const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n    return (\n      <Fragment>\n        <Item\n          aria-hidden={this.label ? null : \"true\"}\n          tabindex=\"-1\"\n          id={`${this.datalistItemId}-label`}\n          class={{\n            \"stzh-datalist-item__label\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n        >\n          {this.label}\n        </Item>\n\n        <Item\n          id={`${this.datalistItemId}-value`}\n          class={{\n            \"stzh-datalist-item__value\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n          aria-labelledby={Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n          aria-controls={this.a11yControls || null}\n          aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n            ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n        >\n          {this.external && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n          {this.download && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n          <stzh-richtext class=\"stzh-datalist-item__richtext\" innerHTML={this.value}>\n            <slot name=\"value\"></slot>\n          </stzh-richtext>\n        </Item>\n\n        <Item\n          aria-hidden={this.statusLabel || this.meta ? null : \"true\"}\n          tabindex=\"-1\"\n          id={`${this.datalistItemId}-meta`}\n          class={{\n            \"stzh-datalist-item__meta\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n        >\n          {this.statusLabel &&\n            <stzh-status\n              class=\"stzh-datalist-item__meta-status\"\n              label={this.statusLabel}\n              type={this.statusType}\n            ></stzh-status>\n          }\n          {this.meta && <span class=\"stzh-datalist-item__meta-text\">{this.meta}</span>}\n        </Item>\n      </Fragment>\n    )\n  }\n\n  private renderLeadingIcon(isButton: boolean): HTMLElement {\n    const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n    return (\n      <Item\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        tabindex=\"-1\"\n        class={{\n          \"stzh-datalist-item__leading\": true,\n          \"is-button\": isButton,\n          \"is-link\": !!this.href\n        }}\n        href={this.href}\n        rel={this.rel}\n        target={this.target}\n        download={this.download}\n      >\n        {this.leadingIcon &&\n          <div class=\"stzh-datalist-item__leading-icon-container\">\n            <stzh-icon class=\"stzh-datalist-item__leading-icon\" name={this.leadingIcon}></stzh-icon>\n          </div>\n        }\n      </Item>\n    );\n  }\n\n  async connectedCallback() {\n    this.datalist = this.element.closest(\"stzh-datalist\");\n\n    if (this.datalist) {\n      this.direction = this.datalist.currentDirection;\n      this.hideBorder = this.datalist.hideBorder;\n\n      this.datalist.addEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist.addEventListener(\"stzhHideBorderChange\", this.handleHideBorderChange);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.datalist) {\n      this.datalist.removeEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist.removeEventListener(\"stzhHideBorderChange\", this.handleHideBorderChange);\n      this.datalist = null;\n    }\n  }\n\n  async componentWillLoad() {\n    this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;\n    this.externalWatcher();\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"datalist-item\");\n    }\n  }\n\n  render() {\n    const isButton = typeof this.a11yExpanded !== \"undefined\"\n      || typeof this.a11yControls !== \"undefined\";\n\n    const hasActionButton = !this.href && this.icon;\n\n    const classes = {\n      \"stzh-datalist-item\": true,\n      \"stzh-datalist-item--is-interactive\": !!this.href || isButton,\n      \"stzh-datalist-item--is-link\": !!this.href,\n      \"stzh-datalist-item--is-button\": isButton,\n      \"stzh-datalist-item--is-expanded\": this.a11yExpanded,\n      \"stzh-datalist-item--has-hidden-border\": this.hideBorder,\n      [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction\n    };\n\n    const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n    const ActionButton = () => {\n      return (\n        <stzh-button\n          class={{\n            \"stzh-datalist-item__action\": true,\n            \"is-button\": true\n          }}\n          variant=\"tertiary\"\n          size=\"tiny\"\n          aria-label={this.iconLabel || (`${this.label} ${this.value}`)}\n          iconOnly={true}\n          icon={this.icon}\n          onClick={this.actionClick}\n        ></stzh-button>\n      );\n    }\n\n    return (\n      <Host role=\"listitem\">\n        <div class={classes}>\n          {this.direction === \"horizontal\" ?\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              {this.renderInner(isButton)}\n            </Fragment>\n            :\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              <div class=\"stzh-datalist-item__wrapper\">\n                {this.renderInner(isButton)}\n              </div>\n            </Fragment>\n          }\n          <Item\n            role={hasActionButton ? null : \"presentation\"}\n            aria-hidden={hasActionButton ? null : \"true\"}\n            tabindex=\"-1\"\n            class={{\n              \"stzh-datalist-item__action-list\": true,\n              \"is-button\": isButton,\n              \"is-link\": !!this.href\n            }}\n            href={this.href}\n            rel={this.rel}\n            target={this.target}\n            download={this.download}\n          >\n            {this.href &&\n              (this.download ?\n                <div class=\"stzh-datalist-item__action is-non-interactive\">\n                  <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : \"download\"}></stzh-icon>\n                </div>\n                :\n                <div class=\"stzh-datalist-item__action is-non-interactive\">\n                  <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : (this.external ? \"external-link\" : \"arrow-right\")}></stzh-icon>\n                </div>\n              )\n            }\n\n            {isButton &&\n              <div class=\"stzh-datalist-item__action is-non-interactive\">\n                <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n                <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n              </div>\n            }\n\n            {hasActionButton &&\n              (this.iconTooltip ?\n                <stzh-tooltip content={this.iconTooltip}>\n                  {ActionButton()}\n                </stzh-tooltip>\n                :\n                ActionButton())\n            }\n          </Item>\n        </div>\n\n        <div class=\"stzh-datalist-item__nested\">\n          <div class=\"stzh-datalist-item__nested-inner\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/{p-3184a123.system.entry.js → p-8f6c5346.system.entry.js}

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(t,e,n,o){function i(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,r){function s(t){try{l(o.next(t))}catch(t){r(t)}}function a(t){try{l(o["throw"](t))}catch(t){r(t)}}function l(t){t.done?n(t.value):i(t.value).then(s,a)}l((o=o.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},o,i,r,s;return s={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function a(t){return function(e){return l([t,e])}}function l(a){if(o)throw new TypeError("Generator is already executing.");while(s&&(s=0,a[0]&&(n=0)),n)try{if(o=1,i&&(r=a[0]&2?i["return"]:a[0]?i["throw"]||((r=i["return"])&&r.call(i),0):i.next)&&!(r=r.call(i,a[1])).done)return r;if(i=0,r)a=[a[0]&2,r.value];switch(a[0]){case 0:case 1:r=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(!(r=n.trys,r=r.length>0&&r[r.length-1])&&(a[0]===6||a[0]===2)){n=0;continue}if(a[0]===3&&(!r||a[1]>r[0]&&a[1]<r[3])){n.label=a[1];break}if(a[0]===6&&n.label<r[1]){n.label=r[1];r=a;break}if(r&&n.label<r[2]){n.label=r[2];n.ops.push(a);break}if(r[2])n.ops.pop();n.trys.pop();continue}a=e.call(t,n)}catch(t){a=[6,t];i=0}finally{o=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-66ea8863.system.js","./p-58321149.system.js"],(function(t){"use strict";var e,n,o,i,r,s,a;return{setters:[function(t){e=t.r;n=t.c;o=t.h;i=t.a;r=t.g},function(t){s=t.c},function(t){a=t.c}],execute:function(){var l=".sc-stzh-overlay-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-overlay-h{display:none}.sc-stzh-overlay-h *.sc-stzh-overlay,.sc-stzh-overlay-h *.sc-stzh-overlay::before,.sc-stzh-overlay-h *.sc-stzh-overlay::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-overlay-h{--backdrop-opacity:0.8}.stzh-overlay.sc-stzh-overlay{display:none;z-index:var(--stzh-z-index-overlay);position:fixed;top:0;left:0;width:100%;height:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:stretch;justify-content:stretch;-ms-flex-align:stretch;align-items:stretch}.stzh-overlay__backdrop.sc-stzh-overlay{z-index:1;background-color:var(--stzh-color-white);opacity:var(--backdrop-opacity);position:absolute;top:0;left:0;width:100%;height:100%}.stzh-overlay__content.sc-stzh-overlay{z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;position:relative;-ms-flex-positive:1;flex-grow:1;overflow:auto}.stzh-overlay__content-inner.sc-stzh-overlay{margin-top:auto;margin-bottom:auto;outline:none}.stzh-overlay--is-open.sc-stzh-overlay{display:-ms-flexbox;display:flex}";var c="stzh-overlay-open";var h=t("stzh_overlay",function(){function t(t){e(this,t);this.stzhOpen=n(this,"stzhOpen",7);this.stzhClose=n(this,"stzhClose",7);this.open=false;this.stay=true;this.a11yLabel=""}t.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.open=true;this.stzhOpen.emit({component:"stzh-overlay"});return[2]}))}))};t.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.open=false;this.stzhClose.emit({component:"stzh-overlay"});return[2]}))}))};t.prototype.getSiblings=function(){var t=this;if(!this.parentElement){return[]}return Array.from(this.parentElement.children).filter((function(e){return e!==t.element}))};t.prototype.disableSiblings=function(){this.getSiblings().forEach((function(t){t.setAttribute("aria-hidden","true")}))};t.prototype.enableSiblings=function(){this.getSiblings().forEach((function(t){t.removeAttribute("aria-hidden")}))};t.prototype.dialogShown=function(){document.body.classList.add(c);this.disableSiblings();if(this.trap){this.trap.activate()}};t.prototype.dialogHidden=function(){document.body.classList.remove(c);this.enableSiblings();if(this.trap){this.trap.deactivate()}};t.prototype.connectedCallback=function(){if(!this.stay&&this.element.parentElement!==document.body){document.body.appendChild(this.element)}this.parentElement=this.element.parentElement};t.prototype.componentDidRender=function(){this.open?this.dialogShown():this.dialogHidden()};t.prototype.componentDidUpdate=function(){this.trap.updateContainerElements(this.element)};t.prototype.componentDidLoad=function(){this.trap=a(this.element,Object.assign({fallbackFocus:this.dialogElement},s()));if(this.open){this.dialogShown()}};t.prototype.disconnectedCallback=function(){this.dialogHidden()};t.prototype.render=function(){var t=this;var e={"stzh-overlay":true,"stzh-overlay--is-open":this.open};return o(i,null,o("div",{class:e},o("div",{class:"stzh-overlay__backdrop"}),o("div",{class:"stzh-overlay__content"},o("div",{class:"stzh-overlay__content-inner",ref:function(e){return t.dialogElement=e},tabindex:"-1",role:"dialog","aria-label":this.a11yLabel,"aria-hidden":this.open?"false":"true"},o("slot",null)))))};Object.defineProperty(t.prototype,"element",{get:function(){return r(this)},enumerable:false,configurable:true});return t}());h.style=l}}}));
-//# sourceMappingURL=p-3184a123.system.entry.js.map
+var __awaiter=this&&this.__awaiter||function(t,e,n,o){function i(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,r){function s(t){try{l(o.next(t))}catch(t){r(t)}}function a(t){try{l(o["throw"](t))}catch(t){r(t)}}function l(t){t.done?n(t.value):i(t.value).then(s,a)}l((o=o.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},o,i,r,s;return s={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function a(t){return function(e){return l([t,e])}}function l(a){if(o)throw new TypeError("Generator is already executing.");while(s&&(s=0,a[0]&&(n=0)),n)try{if(o=1,i&&(r=a[0]&2?i["return"]:a[0]?i["throw"]||((r=i["return"])&&r.call(i),0):i.next)&&!(r=r.call(i,a[1])).done)return r;if(i=0,r)a=[a[0]&2,r.value];switch(a[0]){case 0:case 1:r=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(!(r=n.trys,r=r.length>0&&r[r.length-1])&&(a[0]===6||a[0]===2)){n=0;continue}if(a[0]===3&&(!r||a[1]>r[0]&&a[1]<r[3])){n.label=a[1];break}if(a[0]===6&&n.label<r[1]){n.label=r[1];r=a;break}if(r&&n.label<r[2]){n.label=r[2];n.ops.push(a);break}if(r[2])n.ops.pop();n.trys.pop();continue}a=e.call(t,n)}catch(t){a=[6,t];i=0}finally{o=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-66ea8863.system.js","./p-58321149.system.js"],(function(t){"use strict";var e,n,o,i,r,s,a;return{setters:[function(t){e=t.r;n=t.c;o=t.h;i=t.a;r=t.g},function(t){s=t.c},function(t){a=t.c}],execute:function(){var l=".sc-stzh-overlay-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-overlay-h{display:none}.sc-stzh-overlay-h *.sc-stzh-overlay,.sc-stzh-overlay-h *.sc-stzh-overlay::before,.sc-stzh-overlay-h *.sc-stzh-overlay::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-overlay-h{--backdrop-opacity:0.8}.stzh-overlay.sc-stzh-overlay{display:none;z-index:var(--stzh-z-index-overlay);position:fixed;top:0;left:0;width:100%;height:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:stretch;justify-content:stretch;-ms-flex-align:stretch;align-items:stretch}.stzh-overlay__backdrop.sc-stzh-overlay{z-index:1;background-color:var(--stzh-color-white);opacity:var(--backdrop-opacity);position:absolute;top:0;left:0;width:100%;height:100%}.stzh-overlay__content.sc-stzh-overlay{z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;position:relative;-ms-flex-positive:1;flex-grow:1;overflow:auto}.stzh-overlay__content-inner.sc-stzh-overlay{margin-top:auto;margin-bottom:auto;outline:none}.stzh-overlay--is-open.sc-stzh-overlay{display:-ms-flexbox;display:flex}";var c="stzh-overlay-open";var h=t("stzh_overlay",function(){function t(t){e(this,t);this.stzhOpen=n(this,"stzhOpen",7);this.stzhClose=n(this,"stzhClose",7);this.open=false;this.stay=true;this.a11yLabel=""}t.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.open=true;this.stzhOpen.emit({component:"stzh-overlay"});return[2]}))}))};t.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.open=false;this.stzhClose.emit({component:"stzh-overlay"});return[2]}))}))};t.prototype.getSiblings=function(){var t=this;if(!this.parentElement){return[]}return Array.from(this.parentElement.children).filter((function(e){return e!==t.element}))};t.prototype.disableSiblings=function(){this.getSiblings().forEach((function(t){t.setAttribute("aria-hidden","true")}))};t.prototype.enableSiblings=function(){this.getSiblings().forEach((function(t){t.removeAttribute("aria-hidden")}))};t.prototype.dialogShown=function(){document.body.classList.add(c);this.disableSiblings();if(this.trap){this.trap.activate()}};t.prototype.dialogHidden=function(){document.body.classList.remove(c);this.enableSiblings();if(this.trap){this.trap.deactivate()}};t.prototype.connectedCallback=function(){if(!this.stay&&this.element.parentElement!==document.body){document.body.appendChild(this.element)}this.parentElement=this.element.parentElement};t.prototype.componentDidRender=function(){this.open?this.dialogShown():this.dialogHidden()};t.prototype.componentDidUpdate=function(){this.trap.updateContainerElements(this.element)};t.prototype.componentDidLoad=function(){this.trap=a(this.element,Object.assign({fallbackFocus:this.dialogElement},s()));if(this.open){this.dialogShown()}};t.prototype.disconnectedCallback=function(){this.dialogHidden()};t.prototype.render=function(){var t=this;var e={"stzh-overlay":true,"stzh-overlay--is-open":this.open};return o(i,null,o("div",{class:e},o("div",{class:"stzh-overlay__backdrop"}),o("div",{class:"stzh-overlay__content"},o("div",{class:"stzh-overlay__content-inner",ref:function(e){return t.dialogElement=e},tabindex:"-1",role:"dialog","aria-label":this.a11yLabel||null,"aria-hidden":this.open?"false":"true"},o("slot",null)))))};Object.defineProperty(t.prototype,"element",{get:function(){return r(this)},enumerable:false,configurable:true});return t}());h.style=l}}}));
+//# sourceMappingURL=p-8f6c5346.system.entry.js.map

package/dist/stzh-components/{p-3184a123.system.entry.js.map → p-8f6c5346.system.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stzhOverlayCss","CLASS_BODY_OPEN","StzhOverlay","exports","class_1","prototype","show","this","open","stzhOpen","emit","component","hide","stzhClose","getSiblings","_this","parentElement","Array","from","children","filter","child","element","disableSiblings","forEach","sibling","setAttribute","enableSiblings","removeAttribute","dialogShown","document","body","classList","add","trap","activate","dialogHidden","remove","deactivate","connectedCallback","stay","appendChild","componentDidRender","componentDidUpdate","updateContainerElements","componentDidLoad","createFocusTrap","Object","assign","fallbackFocus","dialogElement","createBaseFocusTrapOptions","disconnectedCallback","render","classes","h","Host","class","ref","el","tabindex","role","a11yLabel"],"sources":["src/components/stzh-overlay/stzh-overlay.scss?tag=stzh-overlay&encapsulation=scoped","src/components/stzh-overlay/stzh-overlay.tsx"],"sourcesContent":[":host {\n  --backdrop-opacity: 0.8;\n}\n\n.stzh-overlay {\n  display: none;\n  z-index: $zIndexOverlay;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  justify-content: stretch;\n  align-items: stretch;\n\n  &__backdrop {\n    z-index: 1;\n    background-color: $colorWhite;\n    opacity: var(--backdrop-opacity);\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  &__content {\n    z-index: 2;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    position: relative;\n    flex-grow: 1;\n    overflow: auto;\n  }\n\n  &__content-inner {\n    // center content vertically\n    margin-top: auto;\n    margin-bottom: auto;\n    outline: none;\n  }\n\n  &--is-open {\n    display: flex;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  Element\n} from \"@stencil/core\";\n\nimport {\n  StzhOverlayOpenEvent,\n  StzhOverlayCloseEvent\n} from \"../../index\";\n\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { createFocusTrap, FocusTrap } from 'focus-trap';\n\nconst CLASS_BODY_OPEN = \"stzh-overlay-open\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-overlay\",\n  styleUrl: \"stzh-overlay.scss\",\n  scoped: true\n})\nexport class StzhOverlay {\n  /** Whether overlay is open */\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  /** Accessible label for dialog */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string = \"\";\n\n  /** Dialog open event */\n  @Event() stzhOpen: EventEmitter<StzhOverlayOpenEvent>;\n\n  /** Dialog close event */\n  @Event() stzhClose: EventEmitter<StzhOverlayCloseEvent>;\n\n  @Element() element: HTMLStzhOverlayElement;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-overlay\"\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-overlay\"\n    });\n  }\n\n  private trap: FocusTrap;\n  private parentElement: HTMLElement;\n  private dialogElement: HTMLDivElement;\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    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\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\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  disconnectedCallback() {\n    this.dialogHidden();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-overlay\": true,\n      \"stzh-overlay--is-open\": this.open\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-overlay__backdrop\"></div>\n          <div class=\"stzh-overlay__content\">\n            <div\n              class=\"stzh-overlay__content-inner\"\n              ref={(el) => (this.dialogElement = el as HTMLDivElement)}\n              tabindex=\"-1\"\n              role=\"dialog\"\n              aria-label={this.a11yLabel}\n              aria-hidden={this.open ? \"false\" : \"true\"}\n            >\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"4sDAAA,IAAMA,EAAiB,i7CCoBvB,IAAMC,EAAkB,oB,IAUXC,EAAWC,EAAA,0B,0GAEmB,M,UAGjB,K,eAG+B,E,CAWjDC,EAAAC,UAAAC,KAAN,W,qFACEC,KAAKC,KAAO,KACZD,KAAKE,SAASC,KAAK,CACjBC,UAAW,iB,iBAKTP,EAAAC,UAAAO,KAAN,W,qFACEL,KAAKC,KAAO,MACZD,KAAKM,UAAUH,KAAK,CAClBC,UAAW,iB,iBAQPP,EAAAC,UAAAS,YAAA,eAAAC,EAAAR,KACN,IAAKA,KAAKS,cAAe,CACvB,MAAO,E,CAGT,OAAOC,MAAMC,KAAKX,KAAKS,cAAcG,UAAUC,QAC7C,SAACC,GAAU,OAAAA,IAAUN,EAAKO,OAAf,G,EAIPlB,EAAAC,UAAAkB,gBAAA,WACNhB,KAAKO,cAAcU,SAAQ,SAACC,GAC1BA,EAAQC,aAAa,cAAe,O,KAIhCtB,EAAAC,UAAAsB,eAAA,WACNpB,KAAKO,cAAcU,SAAQ,SAACC,GAC1BA,EAAQG,gBAAgB,c,KAIpBxB,EAAAC,UAAAwB,YAAA,WACNC,SAASC,KAAKC,UAAUC,IAAIhC,GAC5BM,KAAKgB,kBAEL,GAAIhB,KAAK2B,KAAM,CACb3B,KAAK2B,KAAKC,U,GAIN/B,EAAAC,UAAA+B,aAAA,WACNN,SAASC,KAAKC,UAAUK,OAAOpC,GAC/BM,KAAKoB,iBAEL,GAAIpB,KAAK2B,KAAM,CACb3B,KAAK2B,KAAKI,Y,GAIdlC,EAAAC,UAAAkC,kBAAA,WACE,IAAKhC,KAAKiC,MAAQjC,KAAKe,QAAQN,gBAAkBc,SAASC,KAAM,CAC9DD,SAASC,KAAKU,YAAYlC,KAAKe,Q,CAGjCf,KAAKS,cAAgBT,KAAKe,QAAQN,a,EAGpCZ,EAAAC,UAAAqC,mBAAA,WACEnC,KAAKC,KAAOD,KAAKsB,cAAgBtB,KAAK6B,c,EAGxChC,EAAAC,UAAAsC,mBAAA,WACEpC,KAAK2B,KAAKU,wBAAwBrC,KAAKe,Q,EAGzClB,EAAAC,UAAAwC,iBAAA,WACEtC,KAAK2B,KAAOY,EAAgBvC,KAAKe,QAAOyB,OAAAC,OAAA,CACtCC,cAAe1C,KAAK2C,eACjBC,MAGL,GAAI5C,KAAKC,KAAM,CACbD,KAAKsB,a,GAITzB,EAAAC,UAAA+C,qBAAA,WACE7C,KAAK6B,c,EAGPhC,EAAAC,UAAAgD,OAAA,eAAAtC,EAAAR,KACE,IAAM+C,EAAU,CACd,eAAgB,KAChB,wBAAyB/C,KAAKC,MAGhC,OACE+C,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,GACVC,EAAA,OAAKE,MAAM,2BACXF,EAAA,OAAKE,MAAM,yBACTF,EAAA,OACEE,MAAM,8BACNC,IAAK,SAACC,GAAE,OAAM5C,EAAKmC,cAAgBS,CAA3B,EACRC,SAAS,KACTC,KAAK,SAAQ,aACDtD,KAAKuD,UAAS,cACbvD,KAAKC,KAAO,QAAU,QAEnC+C,EAAA,gB,4HAhIU,I"}
+{"version":3,"names":["stzhOverlayCss","CLASS_BODY_OPEN","StzhOverlay","exports","class_1","prototype","show","this","open","stzhOpen","emit","component","hide","stzhClose","getSiblings","_this","parentElement","Array","from","children","filter","child","element","disableSiblings","forEach","sibling","setAttribute","enableSiblings","removeAttribute","dialogShown","document","body","classList","add","trap","activate","dialogHidden","remove","deactivate","connectedCallback","stay","appendChild","componentDidRender","componentDidUpdate","updateContainerElements","componentDidLoad","createFocusTrap","Object","assign","fallbackFocus","dialogElement","createBaseFocusTrapOptions","disconnectedCallback","render","classes","h","Host","class","ref","el","tabindex","role","a11yLabel"],"sources":["src/components/stzh-overlay/stzh-overlay.scss?tag=stzh-overlay&encapsulation=scoped","src/components/stzh-overlay/stzh-overlay.tsx"],"sourcesContent":[":host {\n  --backdrop-opacity: 0.8;\n}\n\n.stzh-overlay {\n  display: none;\n  z-index: $zIndexOverlay;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  justify-content: stretch;\n  align-items: stretch;\n\n  &__backdrop {\n    z-index: 1;\n    background-color: $colorWhite;\n    opacity: var(--backdrop-opacity);\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  &__content {\n    z-index: 2;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    position: relative;\n    flex-grow: 1;\n    overflow: auto;\n  }\n\n  &__content-inner {\n    // center content vertically\n    margin-top: auto;\n    margin-bottom: auto;\n    outline: none;\n  }\n\n  &--is-open {\n    display: flex;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  Element\n} from \"@stencil/core\";\n\nimport {\n  StzhOverlayOpenEvent,\n  StzhOverlayCloseEvent\n} from \"../../index\";\n\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { createFocusTrap, FocusTrap } from 'focus-trap';\n\nconst CLASS_BODY_OPEN = \"stzh-overlay-open\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-overlay\",\n  styleUrl: \"stzh-overlay.scss\",\n  scoped: true\n})\nexport class StzhOverlay {\n  /** Whether overlay is open */\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  /** Accessible label for dialog */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string = \"\";\n\n  /** Dialog open event */\n  @Event() stzhOpen: EventEmitter<StzhOverlayOpenEvent>;\n\n  /** Dialog close event */\n  @Event() stzhClose: EventEmitter<StzhOverlayCloseEvent>;\n\n  @Element() element: HTMLStzhOverlayElement;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-overlay\"\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-overlay\"\n    });\n  }\n\n  private trap: FocusTrap;\n  private parentElement: HTMLElement;\n  private dialogElement: HTMLDivElement;\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    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\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\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  disconnectedCallback() {\n    this.dialogHidden();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-overlay\": true,\n      \"stzh-overlay--is-open\": this.open\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-overlay__backdrop\"></div>\n          <div class=\"stzh-overlay__content\">\n            <div\n              class=\"stzh-overlay__content-inner\"\n              ref={(el) => (this.dialogElement = el as HTMLDivElement)}\n              tabindex=\"-1\"\n              role=\"dialog\"\n              aria-label={this.a11yLabel || null}\n              aria-hidden={this.open ? \"false\" : \"true\"}\n            >\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"4sDAAA,IAAMA,EAAiB,i7CCoBvB,IAAMC,EAAkB,oB,IAUXC,EAAWC,EAAA,0B,0GAEmB,M,UAGjB,K,eAG+B,E,CAWjDC,EAAAC,UAAAC,KAAN,W,qFACEC,KAAKC,KAAO,KACZD,KAAKE,SAASC,KAAK,CACjBC,UAAW,iB,iBAKTP,EAAAC,UAAAO,KAAN,W,qFACEL,KAAKC,KAAO,MACZD,KAAKM,UAAUH,KAAK,CAClBC,UAAW,iB,iBAQPP,EAAAC,UAAAS,YAAA,eAAAC,EAAAR,KACN,IAAKA,KAAKS,cAAe,CACvB,MAAO,E,CAGT,OAAOC,MAAMC,KAAKX,KAAKS,cAAcG,UAAUC,QAC7C,SAACC,GAAU,OAAAA,IAAUN,EAAKO,OAAf,G,EAIPlB,EAAAC,UAAAkB,gBAAA,WACNhB,KAAKO,cAAcU,SAAQ,SAACC,GAC1BA,EAAQC,aAAa,cAAe,O,KAIhCtB,EAAAC,UAAAsB,eAAA,WACNpB,KAAKO,cAAcU,SAAQ,SAACC,GAC1BA,EAAQG,gBAAgB,c,KAIpBxB,EAAAC,UAAAwB,YAAA,WACNC,SAASC,KAAKC,UAAUC,IAAIhC,GAC5BM,KAAKgB,kBAEL,GAAIhB,KAAK2B,KAAM,CACb3B,KAAK2B,KAAKC,U,GAIN/B,EAAAC,UAAA+B,aAAA,WACNN,SAASC,KAAKC,UAAUK,OAAOpC,GAC/BM,KAAKoB,iBAEL,GAAIpB,KAAK2B,KAAM,CACb3B,KAAK2B,KAAKI,Y,GAIdlC,EAAAC,UAAAkC,kBAAA,WACE,IAAKhC,KAAKiC,MAAQjC,KAAKe,QAAQN,gBAAkBc,SAASC,KAAM,CAC9DD,SAASC,KAAKU,YAAYlC,KAAKe,Q,CAGjCf,KAAKS,cAAgBT,KAAKe,QAAQN,a,EAGpCZ,EAAAC,UAAAqC,mBAAA,WACEnC,KAAKC,KAAOD,KAAKsB,cAAgBtB,KAAK6B,c,EAGxChC,EAAAC,UAAAsC,mBAAA,WACEpC,KAAK2B,KAAKU,wBAAwBrC,KAAKe,Q,EAGzClB,EAAAC,UAAAwC,iBAAA,WACEtC,KAAK2B,KAAOY,EAAgBvC,KAAKe,QAAOyB,OAAAC,OAAA,CACtCC,cAAe1C,KAAK2C,eACjBC,MAGL,GAAI5C,KAAKC,KAAM,CACbD,KAAKsB,a,GAITzB,EAAAC,UAAA+C,qBAAA,WACE7C,KAAK6B,c,EAGPhC,EAAAC,UAAAgD,OAAA,eAAAtC,EAAAR,KACE,IAAM+C,EAAU,CACd,eAAgB,KAChB,wBAAyB/C,KAAKC,MAGhC,OACE+C,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,GACVC,EAAA,OAAKE,MAAM,2BACXF,EAAA,OAAKE,MAAM,yBACTF,EAAA,OACEE,MAAM,8BACNC,IAAK,SAACC,GAAE,OAAM5C,EAAKmC,cAAgBS,CAA3B,EACRC,SAAS,KACTC,KAAK,SAAQ,aACDtD,KAAKuD,WAAa,KAAI,cACrBvD,KAAKC,KAAO,QAAU,QAEnC+C,EAAA,gB,4HAhIU,I"}

package/dist/stzh-components/{p-45572515.entry.js → p-916f8386.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as s,h as i,a as e,g as n}from"./p-9e02896c.js";import{i as a}from"./p-5c697491.js";import{w as h}from"./p-df2bb358.js";import{s as o,a as r,b as c}from"./p-5011f10c.js";const d=".sc-stzh-details-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-details-h{display:none}.sc-stzh-details-h *.sc-stzh-details,.sc-stzh-details-h *.sc-stzh-details::before,.sc-stzh-details-h *.sc-stzh-details::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-details-h{display:contents;--content-padding:0;--content-background:transparent;--content-grid-column:inherit;--content-border-bottom:none}.stzh-details.sc-stzh-details,.stzh-details__trigger.sc-stzh-details{display:contents}.stzh-details__content.sc-stzh-details{overflow:hidden;background-color:var(--content-background);grid-column:var(--content-grid-column);border-bottom:var(--content-border-bottom)}.stzh-details__content-inner.sc-stzh-details{padding:var(--content-padding)}";const l={keyframes:[{height:"0",opacity:"0"},{height:"auto",opacity:"1"}],options:{duration:300,easing:"linear"}};const f={keyframes:[{height:"auto",opacity:"1"},{height:"0",opacity:"0"}],options:{duration:300,easing:"linear"}};let z=0;const p=class{constructor(i){t(this,i);this.stzhOpen=s(this,"stzhOpen",7);this.stzhOpened=s(this,"stzhOpened",7);this.stzhClose=s(this,"stzhClose",7);this.stzhClosed=s(this,"stzhClosed",7);this.toggledByMethod=false;this.onClickTrigger=()=>{this.toggle()};this.open=false}async openWatcher(t){if(!this.triggerElement){return}if(this.triggerElement.firstElementChild){const s=a(this.triggerElement.firstElementChild);this.triggerElement.firstElementChild.setAttribute(s?"a11y-expanded":"aria-expanded",t?"true":"false")}if(t){if(this.toggledByMethod){this.stzhOpen.emit({component:"stzh-accordion-item"})}await o(this.bodyElement);this.bodyElement.hidden=false;await r(this.bodyElement,c(l.keyframes,this.bodyElement.scrollHeight),l.options);this.bodyElement.style.height="auto";this.bodyElement.style.overflow="visible";if(this.toggledByMethod){this.stzhOpened.emit({component:"stzh-accordion-item"})}}else{if(this.toggledByMethod){this.stzhClose.emit({component:"stzh-accordion-item"})}await o(this.bodyElement);this.bodyElement.style.overflow="hidden";await r(this.bodyElement,c(f.keyframes,this.bodyElement.scrollHeight),f.options);this.bodyElement.hidden=true;this.bodyElement.style.height="0px";if(this.toggledByMethod){this.stzhClosed.emit({component:"stzh-accordion-item"})}}this.toggledByMethod=false}async show(){if(this.open){return}this.toggledByMethod=true;this.open=true;return h(this.element,"stzhOpened")}async hide(){if(!this.open){return}this.toggledByMethod=true;this.open=false;return h(this.element,"stzhClosed")}async toggle(){if(this.open){return await this.hide()}else{return await this.show()}}componentWillLoad(){this.detailsId=`stzh-details-${z++}`}componentDidLoad(){this.bodyElement.hidden=!this.open;this.bodyElement.style.height=this.open?"auto":"0px";this.bodyElement.style.overflow=this.open?"visible":"hidden";if(this.triggerElement.firstElementChild){const t=a(this.triggerElement.firstElementChild);this.triggerElement.firstElementChild.setAttribute(t?"a11y-controls":"aria-controls",`${this.detailsId}-content`);this.triggerElement.firstElementChild.setAttribute(t?"a11y-expanded":"aria-expanded",this.open?"true":"false")}}connectedCallback(){var t;let s=(t=this.triggerElement)===null||t===void 0?void 0:t.firstElementChild;if(!s){const t=Array.from(this.element.children).find((t=>!t.hasAttribute("slot")));s=t}if(s){s.addEventListener("click",this.onClickTrigger)}}disconnectedCallback(){if(this.triggerElement&&this.triggerElement.firstElementChild){this.triggerElement.firstElementChild.removeEventListener("click",this.onClickTrigger)}}render(){const t={"stzh-details":true,"stzh-details--is-open":this.open};return i(e,null,i("div",{class:t},i("div",{ref:t=>this.triggerElement=t,class:"stzh-details__trigger"},i("slot",null)),i("div",{id:`${this.detailsId}-content`,ref:t=>this.bodyElement=t,class:"stzh-details__content","aria-labelledby":`${this.detailsId}-header`},i("div",{class:"stzh-details__content-inner"},i("slot",{name:"content"})))))}get element(){return n(this)}static get watchers(){return{open:["openWatcher"]}}};p.style=d;export{p as stzh_details};
-//# sourceMappingURL=p-45572515.entry.js.map
+import{r as t,c as s,h as i,a as e,g as n}from"./p-9e02896c.js";import{i as a}from"./p-fc339100.js";import{w as h}from"./p-df2bb358.js";import{s as o,a as r,b as c}from"./p-5011f10c.js";const d=".sc-stzh-details-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-details-h{display:none}.sc-stzh-details-h *.sc-stzh-details,.sc-stzh-details-h *.sc-stzh-details::before,.sc-stzh-details-h *.sc-stzh-details::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-details-h{display:contents;--content-padding:0;--content-background:transparent;--content-grid-column:inherit;--content-border-bottom:none}.stzh-details.sc-stzh-details,.stzh-details__trigger.sc-stzh-details{display:contents}.stzh-details__content.sc-stzh-details{overflow:hidden;background-color:var(--content-background);grid-column:var(--content-grid-column);border-bottom:var(--content-border-bottom)}.stzh-details__content-inner.sc-stzh-details{padding:var(--content-padding)}";const l={keyframes:[{height:"0",opacity:"0"},{height:"auto",opacity:"1"}],options:{duration:300,easing:"linear"}};const f={keyframes:[{height:"auto",opacity:"1"},{height:"0",opacity:"0"}],options:{duration:300,easing:"linear"}};let z=0;const p=class{constructor(i){t(this,i);this.stzhOpen=s(this,"stzhOpen",7);this.stzhOpened=s(this,"stzhOpened",7);this.stzhClose=s(this,"stzhClose",7);this.stzhClosed=s(this,"stzhClosed",7);this.toggledByMethod=false;this.onClickTrigger=()=>{this.toggle()};this.open=false}async openWatcher(t){if(!this.triggerElement){return}if(this.triggerElement.firstElementChild){const s=a(this.triggerElement.firstElementChild);this.triggerElement.firstElementChild.setAttribute(s?"a11y-expanded":"aria-expanded",t?"true":"false")}if(t){if(this.toggledByMethod){this.stzhOpen.emit({component:"stzh-accordion-item"})}await o(this.bodyElement);this.bodyElement.hidden=false;await r(this.bodyElement,c(l.keyframes,this.bodyElement.scrollHeight),l.options);this.bodyElement.style.height="auto";this.bodyElement.style.overflow="visible";if(this.toggledByMethod){this.stzhOpened.emit({component:"stzh-accordion-item"})}}else{if(this.toggledByMethod){this.stzhClose.emit({component:"stzh-accordion-item"})}await o(this.bodyElement);this.bodyElement.style.overflow="hidden";await r(this.bodyElement,c(f.keyframes,this.bodyElement.scrollHeight),f.options);this.bodyElement.hidden=true;this.bodyElement.style.height="0px";if(this.toggledByMethod){this.stzhClosed.emit({component:"stzh-accordion-item"})}}this.toggledByMethod=false}async show(){if(this.open){return}this.toggledByMethod=true;this.open=true;return h(this.element,"stzhOpened")}async hide(){if(!this.open){return}this.toggledByMethod=true;this.open=false;return h(this.element,"stzhClosed")}async toggle(){if(this.open){return await this.hide()}else{return await this.show()}}componentWillLoad(){this.detailsId=`stzh-details-${z++}`}componentDidLoad(){this.bodyElement.hidden=!this.open;this.bodyElement.style.height=this.open?"auto":"0px";this.bodyElement.style.overflow=this.open?"visible":"hidden";if(this.triggerElement.firstElementChild){const t=a(this.triggerElement.firstElementChild);this.triggerElement.firstElementChild.setAttribute(t?"a11y-controls":"aria-controls",`${this.detailsId}-content`);this.triggerElement.firstElementChild.setAttribute(t?"a11y-expanded":"aria-expanded",this.open?"true":"false")}}connectedCallback(){var t;let s=(t=this.triggerElement)===null||t===void 0?void 0:t.firstElementChild;if(!s){const t=Array.from(this.element.children).find((t=>!t.hasAttribute("slot")));s=t}if(s){s.addEventListener("click",this.onClickTrigger)}}disconnectedCallback(){if(this.triggerElement&&this.triggerElement.firstElementChild){this.triggerElement.firstElementChild.removeEventListener("click",this.onClickTrigger)}}render(){const t={"stzh-details":true,"stzh-details--is-open":this.open};return i(e,null,i("div",{class:t},i("div",{ref:t=>this.triggerElement=t,class:"stzh-details__trigger"},i("slot",null)),i("div",{id:`${this.detailsId}-content`,ref:t=>this.bodyElement=t,class:"stzh-details__content","aria-labelledby":`${this.detailsId}-header`},i("div",{class:"stzh-details__content-inner"},i("slot",{name:"content"})))))}get element(){return n(this)}static get watchers(){return{open:["openWatcher"]}}};p.style=d;export{p as stzh_details};
+//# sourceMappingURL=p-916f8386.entry.js.map