@oiz/stzh-components 2.12.0-beta2 → 2.13.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oiz/stzh-components",
-  "version": "2.12.0-beta2",
+  "version": "2.13.0-beta1",
   "description": "STZH Web Components Library",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/stzh-components/p-0164f9d1.entry.js.map

@@ -1 +0,0 @@
-{"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","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","async","expanded","waitForNextRender","stzhExpand","innerHTML","textElement","Promise","resolve","renderPromiseResolve","componentWillLoad","localization","stzhComponents","utils","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: #{$baseBorderColor};\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-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  &[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-color: 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","/**\n * @prop --current-lines: Currently clamped lines number (can be used instead of `lines-{BREAKPOINT}` attributes)\n */\n\nstzh-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 { 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 expand link is shown */\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  private renderPromiseResolve: (value?: unknown) => void;\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 = async () => {\n    this.expanded = !this.expanded;\n    await this.waitForNextRender();\n\n    this.stzhExpand.emit({\n      component: \"stzh-clamp\",\n      expanded: this.expanded\n    });\n  }\n\n  waitForNextRender() {\n    return new Promise(resolve => this.renderPromiseResolve = resolve);\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.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    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n\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-0db27707.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhSkiplinkCss","StzhSkiplink","this","focusedByInput","onRootFocus","link","focus","onFocus","event","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","emit","component","originalEvent","onBlur","blurEvent","stzhBlur","focusinHandler","focused","focusoutHandler","componentDidRender","requestAnimationFrame","setAttribute","analyticsId","label","text","innerText","render","h","Host","tabindex","ref","el","class","href","accessKey","linkAccesskey","title","linkTitle"],"sources":["src/components/stzh-skiplink/stzh-skiplink.scss?tag=stzh-skiplink&encapsulation=scoped","src/components/stzh-skiplink/stzh-skiplink.tsx"],"sourcesContent":[":host(:not([focused])) {\n  // reset any margin or padding (e.g. from stzh-vspace/hspace components)\n  // so the host element won't take up any space when link inside is not focuseds\n  padding: 0 !important;\n  margin: 0 !important;\n}\n\n.stzh-skiplink {\n  @include visuallyhiddenFocusable;\n  display: inline-block;\n  right: 0;\n  top: 0;\n  white-space: nowrap;\n\tpadding: space('large') space('xxlarge');\n\tborder: solid 1px $colorGrey40;\n\tborder-radius: 2px;\n\tbackground: $colorWhite;\n  color: $colorPrimary;\n\ttransition: color $baseTransitionAnimationSpeed;\n  text-decoration-line: none;\n\n\t&:hover {\n\t\tcolor: $colorPrimaryHover;\n\t}\n}\n","import {\n  Component,\n  Host,\n  Listen,\n  h,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n} from \"@stencil/core\";\n\nimport {\n  StzhSkiplinkFocusEvent,\n  StzhSkiplinkBlurEvent,\n} from \"../../index\";\n\n/**\n * @slot - Slot for any text content\n */\n@Component({\n  tag: \"stzh-skiplink\",\n  styleUrl: \"stzh-skiplink.scss\",\n  scoped: true\n})\nexport class StzhSkiplink {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** href for linking to e.g. id of an element to skip to */\n  @Prop() href: string;\n\n  /** Access key of link (usually a number e.g. 1) */\n  @Prop() linkAccesskey: string;\n\n  /** Link title for description e.g. how to use skiplink with access key ([ALT + 1]) */\n  @Prop() linkTitle: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Whether the skiplink is currently focused */\n  @State() focused: boolean = false;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhSkiplinkFocusEvent>;\n\n  /** Blur event */\n  @Event() stzhBlur: EventEmitter<StzhSkiplinkBlurEvent>;\n\n  @Element() element: HTMLStzhSkiplinkElement;\n\n  @Listen('focusin')\n  focusinHandler() {\n    this.focused = true;\n  }\n\n  @Listen('focusout')\n  focusoutHandler() {\n    this.focused = false;\n  }\n\n  private link: HTMLAnchorElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.link.focus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    // dispatch native focus event\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n\n    // dispatch own focus event for updating flyingfocus position correctly\n    this.stzhFocus.emit({\n      component: \"stzh-skiplink\",\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\n    this.stzhBlur.emit({\n      component: \"stzh-skiplink\",\n      originalEvent: event\n    });\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.link.setAttribute(\"s-object-id\", this.analyticsId || this.label || this.text.innerText);\n    });\n  }\n\n  render() {\n    return (\n      <Host focused={this.focused} tabindex=\"-1\" onFocus={this.onRootFocus}>\n        <a\n          ref={(el) => (this.link = el as HTMLAnchorElement)}\n          class=\"stzh-skiplink\"\n          href={this.href}\n          accessKey={this.linkAccesskey}\n          title={this.linkTitle}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        >\n          <div ref={(el) => (this.text = el as HTMLDivElement)}>\n            {this.label ? this.label : <slot></slot>}\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAkB,+xD,MCyBXC,EAAY,M,iGA2CfC,KAAAC,eAA0B,MAE1BD,KAAAE,YAAc,KACpB,IAAKF,KAAKC,eAAgB,CACxBD,KAAKG,KAAKC,O,CAGZJ,KAAKC,eAAiB,KAAK,EAGrBD,KAAAK,QAAWC,IACjBN,KAAKC,eAAiB,KAGtB,MAAMM,EAAa,IAAIC,WAAW,QAAS,CACzCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdZ,KAAKa,QAAQC,cAAcP,GAG3BP,KAAKe,UAAUC,KAAK,CAClBC,UAAW,gBACXC,cAAeZ,GACf,EAGIN,KAAAmB,OAAUb,IAChB,MAAMc,EAAY,IAAIZ,WAAW,OAAQ,CACvCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdZ,KAAKa,QAAQC,cAAcM,GAE3BpB,KAAKqB,SAASL,KAAK,CACjBC,UAAW,gBACXC,cAAeZ,GACf,E,WAlFoB,G,kHAmBI,K,CAW5B,cAAAgB,GACEtB,KAAKuB,QAAU,I,CAIjB,eAAAC,GACExB,KAAKuB,QAAU,K,CAiDjB,kBAAAE,GACEC,uBAAsB,KACpB1B,KAAKG,KAAKwB,aAAa,cAAe3B,KAAK4B,aAAe5B,KAAK6B,OAAS7B,KAAK8B,KAAKC,UAAU,G,CAIhG,MAAAC,GACE,OACEC,EAACC,EAAI,CAACX,QAASvB,KAAKuB,QAASY,SAAS,KAAK9B,QAASL,KAAKE,aACvD+B,EAAA,KACEG,IAAMC,GAAQrC,KAAKG,KAAOkC,EAC1BC,MAAM,gBACNC,KAAMvC,KAAKuC,KACXC,UAAWxC,KAAKyC,cAChBC,MAAO1C,KAAK2C,UACZtC,QAASL,KAAKK,QACdc,OAAQnB,KAAKmB,QAEbc,EAAA,OAAKG,IAAMC,GAAQrC,KAAK8B,KAAOO,GAC5BrC,KAAK6B,MAAQ7B,KAAK6B,MAAQI,EAAA,e"}

package/dist/stzh-components/p-135d2e40.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhSkiplinkCss","StzhSkiplink","exports","this","focusedByInput","onRootFocus","_this","link","focus","onFocus","event","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","emit","component","originalEvent","onBlur","blurEvent","stzhBlur","class_1","prototype","focusinHandler","focused","focusoutHandler","componentDidRender","requestAnimationFrame","setAttribute","analyticsId","label","text","innerText","render","h","Host","tabindex","ref","el","class","href","accessKey","linkAccesskey","title","linkTitle"],"sources":["src/components/stzh-skiplink/stzh-skiplink.scss?tag=stzh-skiplink&encapsulation=scoped","src/components/stzh-skiplink/stzh-skiplink.tsx"],"sourcesContent":[":host(:not([focused])) {\n  // reset any margin or padding (e.g. from stzh-vspace/hspace components)\n  // so the host element won't take up any space when link inside is not focuseds\n  padding: 0 !important;\n  margin: 0 !important;\n}\n\n.stzh-skiplink {\n  @include visuallyhiddenFocusable;\n  display: inline-block;\n  right: 0;\n  top: 0;\n  white-space: nowrap;\n\tpadding: space('large') space('xxlarge');\n\tborder: solid 1px $colorGrey40;\n\tborder-radius: 2px;\n\tbackground: $colorWhite;\n  color: $colorPrimary;\n\ttransition: color $baseTransitionAnimationSpeed;\n  text-decoration-line: none;\n\n\t&:hover {\n\t\tcolor: $colorPrimaryHover;\n\t}\n}\n","import {\n  Component,\n  Host,\n  Listen,\n  h,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n} from \"@stencil/core\";\n\nimport {\n  StzhSkiplinkFocusEvent,\n  StzhSkiplinkBlurEvent,\n} from \"../../index\";\n\n/**\n * @slot - Slot for any text content\n */\n@Component({\n  tag: \"stzh-skiplink\",\n  styleUrl: \"stzh-skiplink.scss\",\n  scoped: true\n})\nexport class StzhSkiplink {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** href for linking to e.g. id of an element to skip to */\n  @Prop() href: string;\n\n  /** Access key of link (usually a number e.g. 1) */\n  @Prop() linkAccesskey: string;\n\n  /** Link title for description e.g. how to use skiplink with access key ([ALT + 1]) */\n  @Prop() linkTitle: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Whether the skiplink is currently focused */\n  @State() focused: boolean = false;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhSkiplinkFocusEvent>;\n\n  /** Blur event */\n  @Event() stzhBlur: EventEmitter<StzhSkiplinkBlurEvent>;\n\n  @Element() element: HTMLStzhSkiplinkElement;\n\n  @Listen('focusin')\n  focusinHandler() {\n    this.focused = true;\n  }\n\n  @Listen('focusout')\n  focusoutHandler() {\n    this.focused = false;\n  }\n\n  private link: HTMLAnchorElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.link.focus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    // dispatch native focus event\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n\n    // dispatch own focus event for updating flyingfocus position correctly\n    this.stzhFocus.emit({\n      component: \"stzh-skiplink\",\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\n    this.stzhBlur.emit({\n      component: \"stzh-skiplink\",\n      originalEvent: event\n    });\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.link.setAttribute(\"s-object-id\", this.analyticsId || this.label || this.text.innerText);\n    });\n  }\n\n  render() {\n    return (\n      <Host focused={this.focused} tabindex=\"-1\" onFocus={this.onRootFocus}>\n        <a\n          ref={(el) => (this.link = el as HTMLAnchorElement)}\n          class=\"stzh-skiplink\"\n          href={this.href}\n          accessKey={this.linkAccesskey}\n          title={this.linkTitle}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        >\n          <div ref={(el) => (this.text = el as HTMLDivElement)}>\n            {this.label ? this.label : <slot></slot>}\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kKAAA,IAAMA,EAAkB,+xD,ICyBXC,EAAYC,EAAA,2B,2GA2CfC,KAAAC,eAA0B,MAE1BD,KAAAE,YAAc,WACpB,IAAKC,EAAKF,eAAgB,CACxBE,EAAKC,KAAKC,O,CAGZF,EAAKF,eAAiB,K,EAGhBD,KAAAM,QAAU,SAACC,GACjBJ,EAAKF,eAAiB,KAGtB,IAAMO,EAAa,IAAIC,WAAW,QAAS,CACzCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdV,EAAKW,QAAQC,cAAcP,GAG3BL,EAAKa,UAAUC,KAAK,CAClBC,UAAW,gBACXC,cAAeZ,G,EAIXP,KAAAoB,OAAS,SAACb,GAChB,IAAMc,EAAY,IAAIZ,WAAW,OAAQ,CACvCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdV,EAAKW,QAAQC,cAAcM,GAE3BlB,EAAKmB,SAASL,KAAK,CACjBC,UAAW,gBACXC,cAAeZ,G,aAjFK,G,kHAmBI,K,CAW5BgB,EAAAC,UAAAC,eAAA,WACEzB,KAAK0B,QAAU,I,EAIjBH,EAAAC,UAAAG,gBAAA,WACE3B,KAAK0B,QAAU,K,EAiDjBH,EAAAC,UAAAI,mBAAA,eAAAzB,EAAAH,KACE6B,uBAAsB,WACpB1B,EAAKC,KAAK0B,aAAa,cAAe3B,EAAK4B,aAAe5B,EAAK6B,OAAS7B,EAAK8B,KAAKC,U,KAItFX,EAAAC,UAAAW,OAAA,eAAAhC,EAAAH,KACE,OACEoC,EAACC,EAAI,CAACX,QAAS1B,KAAK0B,QAASY,SAAS,KAAKhC,QAASN,KAAKE,aACvDkC,EAAA,KACEG,IAAK,SAACC,GAAE,OAAMrC,EAAKC,KAAOoC,CAAlB,EACRC,MAAM,gBACNC,KAAM1C,KAAK0C,KACXC,UAAW3C,KAAK4C,cAChBC,MAAO7C,KAAK8C,UACZxC,QAASN,KAAKM,QACdc,OAAQpB,KAAKoB,QAEbgB,EAAA,OAAKG,IAAK,SAACC,GAAE,OAAMrC,EAAK8B,KAAOO,CAAlB,GACVxC,KAAKgC,MAAQhC,KAAKgC,MAAQI,EAAA,e,4HA1Gd,I"}

package/dist/stzh-components/p-188dd49d.system.entry.js.map

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

package/dist/stzh-components/p-2d88c544.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhDatalistCss","StzhDatalist","exports","this","_items","resizeHandler","media","matches","_this","directionUltra","currentDirection","directionLarge","directionMedium","directionSmall","direction","class_1","prototype","hideBorderWatcher","newValue","stzhHideBorderChange","emit","component","value","directionWatcher","currentDirectionWatcher","stzhDirectionChange","itemsWatcher","JSON","parse","componentWillLoad","items","hideBorder","connectedCallback","addMediaChangeListener","disconnectedCallback","removeMediaChangeListener","render","classes","_a","concat","h","Host","class","role","map","item","Object","assign","length","stzhDatalistItemCss","datalistItemCounter","StzhDatalistItem","actionClick","originalEvent","stzhItemActionClick","handleDirectionChange","event","detail","handleHideBorderChange","class_2","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","window","stzhComponents","utils","fetchTranslations","_b","sent","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":["/**\n * @prop --item-label-min-width: Min width of label\n */\n\n: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) minmax(auto, 1fr) 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 { 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 window.stzhComponents.utils.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-3ab3a5a7.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhLinkCss","StzhLink","exports","this","focusedByInput","onRootFocus","_this","setFocus","onFocus","event","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","emit","component","originalEvent","onBlur","blurEvent","stzhBlur","class_1","prototype","link","focus","renderIcon","h","class","icon","name","badge","badgeEmpty","label","type","badgeType","renderContent","rel","includes","localization","$globals","externalLinkLabel","download","downloadLinkLabel","ref","el","text","renderInner","iconUsed","Fragment","iconPosition","componentWillLoad","_a","stzhComponents","utils","fetchTranslations","_b","sent","componentDidRender","requestAnimationFrame","setAttribute","analyticsId","innerText","render","hasSlot","classes","iconOnly","fullwidth","disabled","active","concat","badgePosition","textAlign","size","variant","Host","tabindex","href","target","accessKey","linkAccesskey","a11yTabindex","a11yLabel","a11yDescribedby","a11yDisabled","a11yExpanded","a11yControls"],"sources":["src/components/stzh-link/stzh-link.scss?tag=stzh-link&encapsulation=scoped","src/components/stzh-link/stzh-link.tsx"],"sourcesContent":["/**\n * @prop --color: Color of link\n * @prop --hover-color: Hover color of link\n * @prop --icon-size: Size of icon next to link\n * @prop --text-decoration: Text decoration of link\n * @prop --hover-text-decoration: Hover text decoration of link\n *\n * @prop --stzh-link-color: **Global**: Color of link\n * @prop --stzh-link-hover-color: **Global**: Hover color of link\n */\n\n:host {\n  --color: #{$linkColor};\n  --text-decoration-line: underline;\n  --icon-size: #{iconSize('medium')};\n  --icon-wrapper-height: #{$linkIconWrapperHeight};\n\n  --hover-color: #{$linkHoverColor};\n  --hover-text-decoration-line: underline;\n\n  color: var(--color);\n  display: inline-block;\n\n  ::slotted(stzh-text) {\n    --color: initial;\n  }\n\n  &[fullwidth]:not([fullwidth=\"false\"]) {\n    width: 100%;\n    display: block;\n  }\n\n  &[size=\"small\"] {\n    --icon-size: #{iconSize('small')};\n  }\n\n  &[variant=\"secondary\"] {\n    --color: #{$baseColor};\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: var(--hover-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorGrey25};\n    --hover-color: #{$colorGrey25};\n  }\n}\n\n:host ::slotted(stzh-icon),\n.stzh-link__icon {\n  --size: var(--icon-size);\n}\n\n.stzh-link {\n  @include fontCurve('p1');\n  font-family: inherit;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  border: none;\n  color: var(--color);\n  transition: color $baseTransitionAnimationSpeed;\n  cursor: pointer;\n  width: 100%;\n  text-decoration-line: none;\n  background-color: transparent;\n  padding: 0;\n  border-radius: $buttonBorderRadius;\n  text-align: left;\n\n  &:hover {\n    color: var(--hover-color);\n  }\n\n  &:hover &__text {\n    text-decoration-line: var(--hover-text-decoration-line);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-grow: 1;\n  }\n\n  &__icon-wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: var(--icon-wrapper-height);\n  }\n\n  &__text {\n    text-decoration-line: var(--text-decoration-line);\n  }\n\n  &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: space('xxsmall');\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    right: 0;\n  }\n\n  /* Variant if link only has icon */\n\n  &--has-icon-only &__text {\n    @include visuallyhidden;\n  }\n\n  /* Badge positioning variants */\n\n  &--badge-position-link &__icon-wrapper {\n    position: static;\n  }\n\n  &__badge,\n  &--badge-position-link &__badge {\n    top: calc(#{space('xxsmall')} * -1);\n    right: calc(#{space('large')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n    position: relative;\n  }\n\n  &--badge-position-icon#{&}--has-icon &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('small')} * -1);;\n  }\n\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper + &__text:not(:empty) {\n    margin-left: space('small');\n  }\n\n  /* Size variants */\n\n  &--size-small {\n    @include fontSize('micro');\n  }\n\n  &--size-inherit {\n    font-size: inherit;\n    line-height: inherit;\n    letter-spacing: inherit;\n  }\n\n  /* Alignment variants */\n\n  &--align-left &__inner {\n    justify-content: flex-start;\n  }\n\n  &--align-right &__inner {\n    justify-content: flex-end;\n  }\n\n  &--align-center &__inner {\n    justify-content: center;\n  }\n\n  &--align-space-between &__inner {\n    justify-content: space-between;\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n}\n","import {\n  Component,\n  Host,\n  Fragment,\n  Element,\n  h,\n  Prop,\n  Method,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhLinkFocusEvent,\n  StzhLinkBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot - Slot for text content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: \"stzh-link\",\n  styleUrl: \"stzh-link.scss\",\n  scoped: true\n})\nexport class StzhLink {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Icon Position */\n  @Prop({ reflect: true }) iconPosition: \"left\" | \"right\" = \"left\";\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" | \"inherit\" = \"default\";\n\n  /** href attribute of the link */\n  @Prop() href: string = \"\";\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string = \"\";\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** type of the button, if used as button (if no href used) */\n  @Prop() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n\n  /** Variant style */\n  @Prop({ reflect: true }) variant: \"default\" | \"secondary\" = \"default\";\n\n  /** Whether the link is full width */\n  @Prop({ reflect: true }) fullwidth: boolean = false;\n\n  /** Text alignment */\n  @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n  /** Badge text */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Badge position */\n  @Prop({ reflect: true }) badgePosition: \"icon\" | \"link\" = \"icon\";\n\n  /** Disabled status */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Active status */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Whether only an icon is used inside the link */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Access key of link (usually a number e.g. 1) */\n  @Prop() linkAccesskey: 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 button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria disabled of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhLinkElement;\n\n  /** Focus link */\n  @Method()\n  async setFocus() {\n    this.link.focus();\n  }\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhLinkFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhLinkBlurEvent>;\n\n  private link: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.setFocus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-link\",\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-link\",\n      originalEvent: event\n    });\n  }\n\n  private renderIcon(): HTMLInputElement {\n    return (\n      <div class=\"stzh-link__icon-wrapper\">\n        {this.icon ?\n          <stzh-icon class=\"stzh-link__icon\" name={this.icon}></stzh-icon>\n          :\n          <slot name=\"icon\"></slot>\n        }\n        {(this.badge || this.badgeEmpty) &&\n          <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        }\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    return (\n      <div class=\"stzh-link__text\">\n        {this.rel && this.rel.includes('external') && <div class=\"stzh-link__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n        {this.download && <div class=\"stzh-link__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n        <div ref={(el) => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\n      </div>\n    );\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        <div class=\"stzh-link__inner\">\n          {this.iconPosition === \"left\" && this.renderIcon()}\n          {this.renderContent()}\n          {this.iconPosition === \"right\" && this.renderIcon()}\n        </div>\n        {(this.badge || this.badgeEmpty) && !iconUsed &&\n          <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        }\n      </Fragment>\n    );\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"link\");\n    }\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.link.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const iconUsed = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-link\": true,\n      \"stzh-link--has-icon\": iconUsed,\n      \"stzh-link--has-icon-only\": this.iconOnly,\n      \"stzh-link--has-badge\": !!this.badge,\n      \"stzh-link--is-fullwidth\": this.fullwidth,\n      \"stzh-link--is-disabled\": this.disabled,\n      \"stzh-link--is-active\": this.active,\n      [`stzh-link--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n      [`stzh-link--align-${this.textAlign}`]: !!this.textAlign,\n      [`stzh-link--size-${this.size}`]: !!this.size,\n      [`stzh-link--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ?\n          <a\n            ref={(el) => (this.link = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            download={this.download}\n            rel={this.rel}\n            target={this.target}\n            class={classes}\n            accessKey={this.linkAccesskey}\n            tabindex={this.a11yTabindex}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n              ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n              ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n          :\n          <button\n            ref={(el) => (this.link = el as HTMLButtonElement)}\n            class={classes}\n            type={this.type}\n            disabled={this.disabled}\n            accessKey={this.linkAccesskey}\n            tabindex={this.a11yTabindex}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n              ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n              ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </button>\n        }\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}