@oiz/stzh-components 2.7.0 → 2.8.0-beta

package/dist/esm-es5/stzh-input.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stzhInputCss","inputCounter","StzhInput","this","focusedByInput","onClearClick","event","_this","value","input","focus","stzhChange","emit","component","originalEvent","onInput","onRootFocus","setFocus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","class_1","prototype","valueWatcher","newValue","filled","errorWatcher","_error","JSON","parse","e","invalid","length","typeWatcher","types","multiline","includes","Error","concat","renderTextarea","h","class","ref","el","id","inputId","name","rows","disabled","readonly","minlength","maxlength","a11yDescribedby","required","renderInput","type","min","max","step","inputmode","autocomplete","noAutocomplete","undefined","componentWillLoad","error","localization","_b","fetchTranslations","_c","sent","render","buttonRightSlotUsed","hasSlot","descriptionUsed","description","descriptionLongUsed","descriptionLong","errorUsed","classes","clearable","showSpin","_a","stzhComponents","labels","size","Host","tabindex","htmlFor","label","showMarker","$globals","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","icon","variant","onClick","a11yLabel","clearButtonLabel","StzhInputDescription","classPrefix","moreInfoButtonLabel"],"sources":["src/components/stzh-input/stzh-input.scss?tag=stzh-input&encapsulation=scoped","src/components/stzh-input/stzh-input.tsx"],"sourcesContent":[":host {\n  --text-align: left;\n  width: 100%;\n}\n\n:host ::slotted([slot=\"button-right\"]),\n.stzh-input__button-right {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n\n:host ::slotted(stzh-button[slot=\"button-right\"][variant=\"input\"]),\n:host ::slotted([slot=\"button-right\"]) stzh-button[variant=\"input\"],\n.stzh-input__button-right[variant=\"input\"] {\n  --border-color: transparent;\n  --hover-border-color: transparent;\n}\n\n.stzh-input {\n\t@include input-description;\n\t@include fontSize('milli');\n\n  &__field-wrapper {\n    position: relative;\n    display: flex;\n  }\n\n  &__input {\n    @include font;\n    @include fontSize('milli');\n    border: 1px solid $formBorderColor;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n    border-radius: $formInputBorderRadius;\n    padding: space('xsmall') space('medium');\n    width: 100%;\n    color: $colorPrimary;\n    background: $colorWhite;\n    appearance: none;\n    text-align: var(--text-align);\n\n    @include placeholder {\n      color: $formInputPlaceholderColor;\n    }\n\n    &:hover,\n    &:focus {\n      color: $colorPrimaryHover;\n      border-color: $colorPrimaryHover;\n    }\n\n    // remove clear button for IE11\n    &::-ms-clear {\n      display: none;\n    }\n\n    // prevent ugly autofill background color in chrome\n    &:-webkit-autofill {\n      background-clip: text;\n    }\n\n    // show ellipsis for placeholders that are too long\n    &:placeholder-shown {\n      text-overflow: ellipsis;\n    }\n\n    // hide search clear icon on chrome\n    &[type=\"search\"]::-webkit-search-decoration,\n    &[type=\"search\"]::-webkit-search-cancel-button,\n    &[type=\"search\"]::-webkit-search-results-button,\n    &[type=\"search\"]::-webkit-search-results-decoration {\n      -webkit-appearance: none;\n    }\n\n    /* Normal inputs */\n\n    &--input {\n      height: $formInputHeight;\n    }\n\n    /* Textarea */\n\n    &--textarea {\n      min-height: $formInputHeight;\n      resize: vertical;\n    }\n  }\n\n  &__label {\n    @include font('heavy');\n    @include fontSize('nano');\n    @include truncate;\n    color: $formColor;\n    width: auto;\n    position: absolute;\n    top: calc(#{$formInputHeight} / 2);\n    // padding-left (medium) + border-left\n    left: calc(#{space('medium')} + 1px);\n    max-width: calc(100% - #{space('medium')} * 2);\n    transform: translateY(-50%);\n    transition: all $baseTransitionAnimationSpeed;\n    pointer-events: none;\n\n    &:empty {\n      display: none;\n    }\n\n    &::before {\n      content: '';\n      display: none;\n      background: $colorWhite;\n      position: absolute;\n      width: 100%;\n      z-index: -1;\n      left: 0;\n      top: 50%;\n      // prevent white line not fully overlaping border of input\n      margin-top: -0.5px;\n      height: 2px;\n    }\n  }\n\n  &__input:hover + &__label,\n  &__input:focus + &__label {\n    color: $colorPrimaryHover;\n  }\n\n  &__button-right {\n    display: none;\n\n    &[disabled]:not([disabled=\"false\"])[variant=\"input\"] {\n      --color: #{$formColor};\n      --background-color: transparent;\n      --border-color: transparent;\n\n      --hover-color: #{$colorPrimaryHover};\n      --hover-background-color: transparent;\n      --hover-border-color: transparent;\n    }\n  }\n\n  /* Clearable / Search input */\n\n  &--is-clearable#{&}--is-filled:not(#{&}--is-readonly):not(#{&}--is-disabled) &__button-right,\n  &--type-search &__button-right {\n    display: block;\n  }\n\n  &--type-search:not(#{&}--is-filled) &__button-right,\n  &--type-search#{&}--is-readonly &__button-right,\n  &--type-search#{&}--is-disabled &__button-right {\n    pointer-events: none;\n  }\n\n  /* Filled variant */\n\n  &--is-filled &__button-right {\n    &.is-search {\n      pointer-events: initial;\n    }\n  }\n\n  /* Styles for floating label */\n\n  &:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  &--has-fixed-label &__label,\n  &--is-filled &__label,\n  &--is-readonly &__label,\n  &--is-disabled &__label,\n  &--is-invalid &__label {\n    display: block;\n    top: 0;\n    // padding-left (input field medium) - padding-left\n    left: calc(#{space('medium')} - #{space('xxsmall')});\n    height: 20px; // dividable by two (so before element is always positioned correctly)\n    line-height: 20px;\n    padding: 0 space('xxsmall');\n    max-width: calc(100% - #{space('small')} * 2);\n    pointer-events: all;\n\n    &:not(:empty)::before {\n      display: block;\n    }\n  }\n\n  /* Button Right Variant */\n\n  &--has-button-right &__input {\n    // distance to icon + icon button width\n    padding-right: calc(#{space('xsmall')} + #{$formInputHeight});\n  }\n\n  &--has-button-right &__label {\n    // 100% - ((padding left of normal variant + border 1px) * 2) - icon button width\n    max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeight});\n  }\n\n  &--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  &--has-button-right#{&}--has-fixed-label &__label,\n  &--has-button-right#{&}--is-filled &__label,\n  &--has-button-right#{&}--is-readonly &__label,\n  &--has-button-right#{&}--is-disabled &__label,\n  &--has-button-right#{&}--is-invalid &__label {\n    // 100% - left distance to text + 1px border + padding label right side - icon button width\n    max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xxsmall')} - #{$formInputHeight});\n  }\n\n  /* Size variants */\n\n  &--size-small {\n    @include fontSize('micro');\n  }\n\n  &--size-small &__input {\n    @include fontSize('micro');\n\n    &--input {\n      height: $formInputHeightSmall;\n    }\n\n    &--textarea {\n      min-height: $formInputHeightSmall;\n    }\n  }\n\n  &--size-small &__label {\n    top: calc(#{$formInputHeightSmall} / 2);\n  }\n\n  &--size-small#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  &--size-small#{&}--has-fixed-label &__label,\n  &--size-small#{&}--is-filled &__label,\n  &--size-small#{&}--is-readonly &__label,\n  &--size-small#{&}--is-disabled &__label,\n  &--size-small#{&}--is-invalid &__label {\n    top: 0;\n  }\n\n  &--size-small#{&}--has-button-right &__input {\n    padding-right: calc(#{space('xxsmall')} + #{$formInputHeightSmall});\n  }\n\n  &--size-small#{&}--has-button-right &__label {\n    max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeightSmall});\n  }\n\n  &--size-small#{&}--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  &--size-small#{&}--has-button-right#{&}--has-fixed-label &__label,\n  &--size-small#{&}--has-button-right#{&}--is-filled &__label,\n  &--size-small#{&}--has-button-right#{&}--is-readonly &__label,\n  &--size-small#{&}--has-button-right#{&}--is-disabled &__label,\n  &--size-small#{&}--has-button-right#{&}--is-invalid &__label {\n    max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xsmall')} - #{$formInputHeightSmall});\n  }\n\n  /* Spin button */\n\n  &:not(#{&}--has-spin) &__input {\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n      appearance: none;\n      margin: 0;\n    }\n\n    &[type=number] {\n      appearance: textfield;\n    }\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input,\n  &--is-invalid &__label,\n  &--is-invalid &__input + &__label {\n    color: $colorError;\n  }\n\n  &--is-invalid &__input {\n    border-color: $colorError;\n\n    @include placeholder {\n      color: $colorError;\n    }\n  }\n\n  /* Readonly / Disabled */\n\n  &--is-readonly &__input,\n  &--is-readonly &__input + &__label,\n  &--is-disabled &__input,\n  &--is-disabled &__input + &__label {\n    color: $formDisabledColor;\n  }\n\n  &--is-readonly &__input,\n  &--is-disabled &__input {\n    color: $formDisabledColor;\n    border-color: $formDisabledBorderColor;\n    background-color: $formDisabledBackgroundColor;\n    cursor: not-allowed;\n\n    @include placeholder {\n      color: $formDisabledColor;\n    }\n\n    &:hover,\n    &:focus {\n      border-color: $formDisabledBorderColor;\n    }\n  }\n\n  &--is-readonly &__label,\n  &--is-disabled &__label {\n    cursor: not-allowed;\n\n    &::before {\n      background: transparent;\n    }\n  }\n\n  &--is-readonly &__button-right,\n  &--is-disabled &__button-right {\n    &[disabled]:not([disabled=\"false\"])[variant=\"input\"] {\n      --color: #{$formDisabledColor};\n      --hover-color: #{$formDisabledColor};\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n  Element,\n  h,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhInputChangeEvent,\n  StzhInputFocusEvent,\n  StzhInputBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"./stzh-input-description\";\n\nlet inputCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot error - Slot for error\n * @slot button-right - Slot for right button\n */\n@Component({\n  tag: \"stzh-input\",\n  styleUrl: \"stzh-input.scss\",\n  scoped: true\n})\nexport class StzhInput {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the input is a textarea or an input field */\n  @Prop() multiline: boolean = false;\n\n  /** Rows attribute if input element is textarea */\n  @Prop() rows: number;\n\n  /** If input field, this defines the type (if `search`, a search icon will be displayed) */\n  @Prop() type: \"text\" | \"search\" | \"password\" | \"email\" | \"url\" | \"tel\" | \"number\" = \"text\";\n\n  /** If input type is number, this will be the step size  */\n  @Prop() step: number = 1;\n\n  /** If input type is number, this will be the minimum step number  */\n  @Prop() min: number;\n\n  /** If input type is number, this will be the maximum step number  */\n  @Prop() max: number;\n\n  /** If input type is number and this property is true, this will show the spin buttons on hover/focus */\n  @Prop({ reflect: true }) showSpin: boolean = false;\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) */\n  @Prop({ reflect: true }) clearable: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Minimum of characters */\n  @Prop() minlength: number;\n\n  /** Maxlength of characters */\n  @Prop() maxlength: number;\n\n  /** The name of the input element */\n  @Prop({ reflect: true }) name: string;\n\n  /** The value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Specify inputmode.\n   * See [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values\n   */\n  @Prop() inputmode: string;\n\n  /**\n   * Specify what the user agent has to provide as automated assistance.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values\n   */\n  @Prop() autocomplete: string = \"on\";\n\n  /** Whether autocomplete should be turned off  */\n  @Prop() noAutocomplete: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Whether the input is filled or not */\n  @State() filled: boolean;\n\n  @Element() element: HTMLStzhInputElement;\n\n  /** Focus input field */\n  @Method()\n  async setFocus() {\n    this.input.focus();\n  }\n\n  /** Input change event */\n  @Event() stzhChange: EventEmitter<StzhInputChangeEvent>;\n\n  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhInputFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhInputBlurEvent>;\n\n  @Watch(\"value\")\n  valueWatcher(newValue: string) {\n    this.filled = newValue !== \"\";\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n\n    this.invalid = this._error.length > 0;\n  }\n\n  @Watch(\"type\")\n  typeWatcher(newValue: string) {\n    const types = [\n      \"text\", \"search\", \"password\", \"email\", \"url\", \"tel\", \"number\"\n    ];\n\n    if (!this.multiline && !types.includes(newValue)) {\n      throw new Error(`Type ${newValue} not supported`);\n    }\n  }\n\n  private input: HTMLInputElement | HTMLTextAreaElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private onClearClick = (event: MouseEvent) => {\n    this.value = \"\";\n    this.input.focus();\n\n    this.stzhChange.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value\n    });\n  }\n\n  private onInput = (event: InputEvent) => {\n    this.value = this.input.value;\n\n    this.stzhChange.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value\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-input\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    // fixes weird bug where autofill selection doesn't get removed\n    this.input.value = this.input.value;\n\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-input\",\n      originalEvent: event\n    });\n  }\n\n  private renderTextarea(): HTMLTextAreaElement {\n    return (\n      <textarea\n        class=\"stzh-input__input stzh-input__input--textarea\"\n        ref={(el) => (this.input = el as HTMLTextAreaElement)}\n        id={this.inputId}\n        name={this.name}\n        value={this.value}\n        rows={this.rows}\n        disabled={this.disabled}\n        readonly={this.readonly}\n        minlength={this.minlength}\n        maxlength={this.maxlength}\n        aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n        aria-required={this.required ? \"true\" : \"false\"}\n        aria-invalid={this.invalid ? \"true\" : \"false\"}\n        onInput={this.onInput}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n      ></textarea>\n    );\n  }\n\n  private renderInput(): HTMLInputElement {\n    return (\n      <input\n        class=\"stzh-input__input stzh-input__input--input\"\n        ref={(el) => (this.input = el as HTMLInputElement)}\n        id={this.inputId}\n        type={this.type}\n        name={this.name}\n        value={this.value}\n        min={this.min}\n        max={this.max}\n        step={this.step}\n        inputmode={this.inputmode}\n        disabled={this.disabled}\n        readonly={this.readonly}\n        minlength={this.minlength}\n        maxlength={this.maxlength}\n        autocomplete={this.noAutocomplete ? \"off\" : this.autocomplete}\n        aria-autocomplete={this.noAutocomplete ? \"none\" : undefined}\n        aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n        aria-required={this.required ? \"true\" : \"false\"}\n        aria-invalid={this.invalid ? \"true\" : \"false\"}\n        onInput={this.onInput}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n      />\n    );\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-input-${inputCounter++}`;\n    this.typeWatcher(this.type);\n    this.valueWatcher(this.value);\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"input\");\n    }\n  }\n\n  render() {\n    const buttonRightSlotUsed = hasSlot(this.element, 'button-right');\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || !!this.error;\n    const classes = {\n      \"stzh-input\": true,\n      \"stzh-input--has-button-right\": buttonRightSlotUsed\n        || this.type === \"search\"\n        || (this.clearable && this.filled && !this.readonly && !this.disabled),\n      \"stzh-input--has-description\": descriptionUsed,\n      \"stzh-input--has-description-long\": descriptionLongUsed,\n      \"stzh-input--has-error\": errorUsed,\n      \"stzh-input--has-spin\": this.showSpin,\n      \"stzh-input--is-invalid\": this.invalid,\n      \"stzh-input--is-disabled\": this.disabled,\n      \"stzh-input--is-readonly\": this.readonly,\n      \"stzh-input--is-required\": this.required,\n      \"stzh-input--is-filled\": this.filled,\n      \"stzh-input--is-clearable\": this.clearable,\n      \"stzh-input--has-fixed-label\": window?.stzhComponents?.labels === \"fixed\",\n      [`stzh-input--size-${this.size}`]: !!this.size,\n      [`stzh-input--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <div class=\"stzh-input__field-wrapper\">\n            {this.multiline ? this.renderTextarea() : this.renderInput()}\n            <label class=\"stzh-input__label\" htmlFor={this.inputId}>\n              {this.label ? this.label : <slot></slot>}\n              {this.showMarker &&\n                <span class=\"stzh-input__marker\">\n                  <span class=\"stzh-input__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker\n                    }\n                  </span>\n                  <span class=\"stzh-input__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText\n                    }\n                  </span>\n                </span>\n              }\n            </label>\n            {this.clearable || this.type === \"search\"\n              ?\n              <stzh-button\n                class=\"stzh-input__button-right\"\n                icon={this.disabled || this.readonly || !this.filled ? \"search\" : \"close-circle\"}\n                icon-only\n                variant=\"input\"\n                onClick={this.onClearClick}\n                disabled={this.disabled || this.readonly || !this.filled}\n                a11yLabel={this.localization.$globals.clearButtonLabel}\n                aria-controls={this.inputId}\n              ></stzh-button>\n              :\n              <slot name=\"button-right\"></slot>\n            }\n          </div>\n          <StzhInputDescription\n            classPrefix=\"stzh-input\"\n            id={`${this.inputId}-description`}\n            error={this._error}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            descriptionLongUsed={descriptionLongUsed}\n            moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["stzhInputCss","inputCounter","StzhInput","this","focusedByInput","onClearClick","event","_this","value","input","focus","stzhChange","emit","component","originalEvent","onInput","onRootFocus","setFocus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","class_1","prototype","valueWatcher","newValue","filled","errorWatcher","_error","JSON","parse","e","invalid","length","typeWatcher","types","multiline","includes","Error","concat","renderTextarea","h","class","ref","el","id","inputId","name","rows","disabled","readonly","minlength","maxlength","a11yDescribedby","required","renderInput","type","min","max","step","inputmode","autocomplete","noAutocomplete","undefined","componentWillLoad","error","localization","_b","fetchTranslations","_c","sent","render","buttonRightSlotUsed","hasSlot","descriptionUsed","description","descriptionLongUsed","descriptionLong","errorUsed","classes","clearable","showSpin","_a","stzhComponents","labels","labelHidden","size","Host","tabindex","htmlFor","label","showMarker","$globals","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","icon","variant","onClick","a11yLabel","clearButtonLabel","StzhInputDescription","classPrefix","moreInfoButtonLabel"],"sources":["src/components/stzh-input/stzh-input.scss?tag=stzh-input&encapsulation=scoped","src/components/stzh-input/stzh-input.tsx"],"sourcesContent":[":host {\n  --text-align: left;\n  --input-width: 100%;\n  --padding: #{space('xsmall')} #{space('medium')};\n  width: 100%;\n}\n\n:host ::slotted([slot=\"button-right\"]),\n.stzh-input__button-right {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n\n:host ::slotted(stzh-button[slot=\"button-right\"][variant=\"input\"]),\n:host ::slotted([slot=\"button-right\"]) stzh-button[variant=\"input\"],\n.stzh-input__button-right[variant=\"input\"] {\n  --border-color: transparent;\n  --hover-border-color: transparent;\n}\n\n.stzh-input {\n\t@include input-description;\n\t@include fontSize('milli');\n\n  &__field-wrapper {\n    position: relative;\n    display: flex;\n    width: var(--input-width);\n  }\n\n  &__input {\n    @include font;\n    @include fontSize('milli');\n    border: 1px solid $formBorderColor;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n    border-radius: $formInputBorderRadius;\n    padding: var(--padding);\n    width: 100%;\n    color: $colorPrimary;\n    background: $colorWhite;\n    appearance: none;\n    text-align: var(--text-align);\n\n    @include placeholder {\n      color: $formInputPlaceholderColor;\n    }\n\n    &:hover,\n    &:focus {\n      color: $colorPrimaryHover;\n      border-color: $colorPrimaryHover;\n    }\n\n    // remove clear button for IE11\n    &::-ms-clear {\n      display: none;\n    }\n\n    // prevent ugly autofill background color in chrome\n    &:-webkit-autofill {\n      background-clip: text;\n    }\n\n    // show ellipsis for placeholders that are too long\n    &:placeholder-shown {\n      text-overflow: ellipsis;\n    }\n\n    // hide search clear icon on chrome\n    &[type=\"search\"]::-webkit-search-decoration,\n    &[type=\"search\"]::-webkit-search-cancel-button,\n    &[type=\"search\"]::-webkit-search-results-button,\n    &[type=\"search\"]::-webkit-search-results-decoration {\n      -webkit-appearance: none;\n    }\n\n    /* Normal inputs */\n\n    &--input {\n      height: $formInputHeight;\n    }\n\n    /* Textarea */\n\n    &--textarea {\n      min-height: $formInputHeight;\n      resize: vertical;\n    }\n  }\n\n  &__label {\n    @include font('heavy');\n    @include fontSize('nano');\n    @include truncate;\n    color: $formColor;\n    width: auto;\n    position: absolute;\n    top: calc(#{$formInputHeight} / 2);\n    // padding-left (medium) + border-left\n    left: calc(#{space('medium')} + 1px);\n    max-width: calc(100% - #{space('medium')} * 2);\n    transform: translateY(-50%);\n    transition: all $baseTransitionAnimationSpeed;\n    pointer-events: none;\n\n    &:empty {\n      display: none;\n    }\n\n    &::before {\n      content: '';\n      display: none;\n      background: $colorWhite;\n      position: absolute;\n      width: 100%;\n      z-index: -1;\n      left: 0;\n      top: 50%;\n      // prevent white line not fully overlaping border of input\n      margin-top: -0.5px;\n      height: 2px;\n    }\n  }\n\n  &__input:hover + &__label,\n  &__input:focus + &__label {\n    color: $colorPrimaryHover;\n  }\n\n  &__button-right {\n    display: none;\n\n    &[disabled]:not([disabled=\"false\"])[variant=\"input\"] {\n      --color: #{$formColor};\n      --background-color: transparent;\n      --border-color: transparent;\n\n      --hover-color: #{$colorPrimaryHover};\n      --hover-background-color: transparent;\n      --hover-border-color: transparent;\n    }\n  }\n\n  /* Clearable / Search input */\n\n  &--is-clearable#{&}--is-filled:not(#{&}--is-readonly):not(#{&}--is-disabled) &__button-right,\n  &--type-search &__button-right {\n    display: block;\n  }\n\n  &--type-search:not(#{&}--is-filled) &__button-right,\n  &--type-search#{&}--is-readonly &__button-right,\n  &--type-search#{&}--is-disabled &__button-right {\n    pointer-events: none;\n  }\n\n  /* Filled variant */\n\n  &--is-filled &__button-right {\n    &.is-search {\n      pointer-events: initial;\n    }\n  }\n\n  /* Styles for floating label */\n\n  &:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  &--has-fixed-label &__label,\n  &--is-filled &__label,\n  &--is-readonly &__label,\n  &--is-disabled &__label,\n  &--is-invalid &__label {\n    display: block;\n    top: 0;\n    // padding-left (input field medium) - padding-left\n    left: calc(#{space('medium')} - #{space('xxsmall')});\n    height: 20px; // dividable by two (so before element is always positioned correctly)\n    line-height: 20px;\n    padding: 0 space('xxsmall');\n    max-width: calc(100% - #{space('small')} * 2);\n    pointer-events: all;\n\n    &:not(:empty)::before {\n      display: block;\n    }\n  }\n\n  /* Button Right Variant */\n\n  &--has-button-right &__input {\n    // distance to icon + icon button width\n    padding-right: calc(#{space('xsmall')} + #{$formInputHeight});\n  }\n\n  &--has-button-right &__label {\n    // 100% - ((padding left of normal variant + border 1px) * 2) - icon button width\n    max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeight});\n  }\n\n  &--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  &--has-button-right#{&}--has-fixed-label &__label,\n  &--has-button-right#{&}--is-filled &__label,\n  &--has-button-right#{&}--is-readonly &__label,\n  &--has-button-right#{&}--is-disabled &__label,\n  &--has-button-right#{&}--is-invalid &__label {\n    // 100% - left distance to text + 1px border + padding label right side - icon button width\n    max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xxsmall')} - #{$formInputHeight});\n  }\n\n  /* Size variants */\n\n  &--size-small {\n    @include fontSize('micro');\n  }\n\n  &--size-small &__input {\n    @include fontSize('micro');\n\n    &--input {\n      height: $formInputHeightSmall;\n    }\n\n    &--textarea {\n      min-height: $formInputHeightSmall;\n    }\n  }\n\n  &--size-small &__label {\n    top: calc(#{$formInputHeightSmall} / 2);\n  }\n\n  &--size-small#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  &--size-small#{&}--has-fixed-label &__label,\n  &--size-small#{&}--is-filled &__label,\n  &--size-small#{&}--is-readonly &__label,\n  &--size-small#{&}--is-disabled &__label,\n  &--size-small#{&}--is-invalid &__label {\n    top: 0;\n  }\n\n  &--size-small#{&}--has-button-right &__input {\n    padding-right: calc(#{space('xxsmall')} + #{$formInputHeightSmall});\n  }\n\n  &--size-small#{&}--has-button-right &__label {\n    max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeightSmall});\n  }\n\n  &--size-small#{&}--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  &--size-small#{&}--has-button-right#{&}--has-fixed-label &__label,\n  &--size-small#{&}--has-button-right#{&}--is-filled &__label,\n  &--size-small#{&}--has-button-right#{&}--is-readonly &__label,\n  &--size-small#{&}--has-button-right#{&}--is-disabled &__label,\n  &--size-small#{&}--has-button-right#{&}--is-invalid &__label {\n    max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xsmall')} - #{$formInputHeightSmall});\n  }\n\n  /* Spin button */\n\n  &:not(#{&}--has-spin) &__input {\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n      appearance: none;\n      margin: 0;\n    }\n\n    &[type=number] {\n      appearance: textfield;\n    }\n  }\n\n  /* Hidden label */\n  &--has-label-hidden &__label {\n    @include visuallyhidden;\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input,\n  &--is-invalid &__label,\n  &--is-invalid &__input + &__label {\n    color: $colorError;\n  }\n\n  &--is-invalid &__input {\n    border-color: $colorError;\n\n    @include placeholder {\n      color: $colorError;\n    }\n  }\n\n  /* Readonly / Disabled */\n\n  &--is-readonly &__input,\n  &--is-readonly &__input + &__label,\n  &--is-disabled &__input,\n  &--is-disabled &__input + &__label {\n    color: $formDisabledColor;\n  }\n\n  &--is-readonly &__input,\n  &--is-disabled &__input {\n    color: $formDisabledColor;\n    border-color: $formDisabledBorderColor;\n    background-color: $formDisabledBackgroundColor;\n    cursor: not-allowed;\n\n    @include placeholder {\n      color: $formDisabledColor;\n    }\n\n    &:hover,\n    &:focus {\n      border-color: $formDisabledBorderColor;\n    }\n  }\n\n  &--is-readonly &__label,\n  &--is-disabled &__label {\n    cursor: not-allowed;\n\n    &::before {\n      background: transparent;\n    }\n  }\n\n  &--is-readonly &__button-right,\n  &--is-disabled &__button-right {\n    &[disabled]:not([disabled=\"false\"])[variant=\"input\"] {\n      --color: #{$formDisabledColor};\n      --hover-color: #{$formDisabledColor};\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n  Element,\n  h,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhInputChangeEvent,\n  StzhInputFocusEvent,\n  StzhInputBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"./stzh-input-description\";\n\nlet inputCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot error - Slot for error\n * @slot button-right - Slot for right button\n */\n@Component({\n  tag: \"stzh-input\",\n  styleUrl: \"stzh-input.scss\",\n  scoped: true\n})\nexport class StzhInput {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the input is a textarea or an input field */\n  @Prop() multiline: boolean = false;\n\n  /** Rows attribute if input element is textarea */\n  @Prop() rows: number;\n\n  /** If input field, this defines the type (if `search`, a search icon will be displayed) */\n  @Prop() type: \"text\" | \"search\" | \"password\" | \"email\" | \"url\" | \"tel\" | \"number\" = \"text\";\n\n  /** If input type is number, this will be the step size  */\n  @Prop() step: number = 1;\n\n  /** If input type is number, this will be the minimum step number  */\n  @Prop() min: number;\n\n  /** If input type is number, this will be the maximum step number  */\n  @Prop() max: number;\n\n  /** If input type is number and this property is true, this will show the spin buttons on hover/focus */\n  @Prop({ reflect: true }) showSpin: boolean = false;\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) */\n  @Prop({ reflect: true }) clearable: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Minimum of characters */\n  @Prop() minlength: number;\n\n  /** Maxlength of characters */\n  @Prop() maxlength: number;\n\n  /** The name of the input element */\n  @Prop({ reflect: true }) name: string;\n\n  /** The value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Specify inputmode.\n   * See [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values\n   */\n  @Prop() inputmode: string;\n\n  /**\n   * Specify what the user agent has to provide as automated assistance.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values\n   */\n  @Prop() autocomplete: string = \"on\";\n\n  /** Whether autocomplete should be turned off  */\n  @Prop() noAutocomplete: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Whether label should be visually hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Whether the input is filled or not */\n  @State() filled: boolean;\n\n  @Element() element: HTMLStzhInputElement;\n\n  /** Focus input field */\n  @Method()\n  async setFocus() {\n    this.input.focus();\n  }\n\n  /** Input change event */\n  @Event() stzhChange: EventEmitter<StzhInputChangeEvent>;\n\n  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhInputFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhInputBlurEvent>;\n\n  @Watch(\"value\")\n  valueWatcher(newValue: string) {\n    this.filled = newValue !== \"\";\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n\n    this.invalid = this._error.length > 0;\n  }\n\n  @Watch(\"type\")\n  typeWatcher(newValue: string) {\n    const types = [\n      \"text\", \"search\", \"password\", \"email\", \"url\", \"tel\", \"number\"\n    ];\n\n    if (!this.multiline && !types.includes(newValue)) {\n      throw new Error(`Type ${newValue} not supported`);\n    }\n  }\n\n  private input: HTMLInputElement | HTMLTextAreaElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private onClearClick = (event: MouseEvent) => {\n    this.value = \"\";\n    this.input.focus();\n\n    this.stzhChange.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value\n    });\n  }\n\n  private onInput = (event: InputEvent) => {\n    this.value = this.input.value;\n\n    this.stzhChange.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value\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-input\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    // fixes weird bug where autofill selection doesn't get removed\n    this.input.value = this.input.value;\n\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-input\",\n      originalEvent: event\n    });\n  }\n\n  private renderTextarea(): HTMLTextAreaElement {\n    return (\n      <textarea\n        class=\"stzh-input__input stzh-input__input--textarea\"\n        ref={(el) => (this.input = el as HTMLTextAreaElement)}\n        id={this.inputId}\n        name={this.name}\n        value={this.value}\n        rows={this.rows}\n        disabled={this.disabled}\n        readonly={this.readonly}\n        minlength={this.minlength}\n        maxlength={this.maxlength}\n        aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n        aria-required={this.required ? \"true\" : \"false\"}\n        aria-invalid={this.invalid ? \"true\" : \"false\"}\n        onInput={this.onInput}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n      ></textarea>\n    );\n  }\n\n  private renderInput(): HTMLInputElement {\n    return (\n      <input\n        class=\"stzh-input__input stzh-input__input--input\"\n        ref={(el) => (this.input = el as HTMLInputElement)}\n        id={this.inputId}\n        type={this.type}\n        name={this.name}\n        value={this.value}\n        min={this.min}\n        max={this.max}\n        step={this.step}\n        inputmode={this.inputmode}\n        disabled={this.disabled}\n        readonly={this.readonly}\n        minlength={this.minlength}\n        maxlength={this.maxlength}\n        autocomplete={this.noAutocomplete ? \"off\" : this.autocomplete}\n        aria-autocomplete={this.noAutocomplete ? \"none\" : undefined}\n        aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n        aria-required={this.required ? \"true\" : \"false\"}\n        aria-invalid={this.invalid ? \"true\" : \"false\"}\n        onInput={this.onInput}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n      />\n    );\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-input-${inputCounter++}`;\n    this.typeWatcher(this.type);\n    this.valueWatcher(this.value);\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"input\");\n    }\n  }\n\n  render() {\n    const buttonRightSlotUsed = hasSlot(this.element, 'button-right');\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || !!this.error;\n    const classes = {\n      \"stzh-input\": true,\n      \"stzh-input--has-button-right\": buttonRightSlotUsed\n        || this.type === \"search\"\n        || (this.clearable && this.filled && !this.readonly && !this.disabled),\n      \"stzh-input--has-description\": descriptionUsed,\n      \"stzh-input--has-description-long\": descriptionLongUsed,\n      \"stzh-input--has-error\": errorUsed,\n      \"stzh-input--has-spin\": this.showSpin,\n      \"stzh-input--is-invalid\": this.invalid,\n      \"stzh-input--is-disabled\": this.disabled,\n      \"stzh-input--is-readonly\": this.readonly,\n      \"stzh-input--is-required\": this.required,\n      \"stzh-input--is-filled\": this.filled,\n      \"stzh-input--is-clearable\": this.clearable,\n      \"stzh-input--has-fixed-label\": window?.stzhComponents?.labels === \"fixed\",\n      \"stzh-input--has-label-hidden\": this.labelHidden,\n      [`stzh-input--size-${this.size}`]: !!this.size,\n      [`stzh-input--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <div class=\"stzh-input__field-wrapper\">\n            {this.multiline ? this.renderTextarea() : this.renderInput()}\n            <label class=\"stzh-input__label\" htmlFor={this.inputId}>\n              {this.label ? this.label : <slot></slot>}\n              {this.showMarker &&\n                <span class=\"stzh-input__marker\">\n                  <span class=\"stzh-input__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker\n                    }\n                  </span>\n                  <span class=\"stzh-input__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText\n                    }\n                  </span>\n                </span>\n              }\n            </label>\n            {this.clearable || this.type === \"search\"\n              ?\n              <stzh-button\n                class=\"stzh-input__button-right\"\n                icon={this.disabled || this.readonly || !this.filled ? \"search\" : \"close-circle\"}\n                icon-only\n                variant=\"input\"\n                onClick={this.onClearClick}\n                disabled={this.disabled || this.readonly || !this.filled}\n                a11yLabel={this.localization.$globals.clearButtonLabel}\n                aria-controls={this.inputId}\n              ></stzh-button>\n              :\n              <slot name=\"button-right\"></slot>\n            }\n          </div>\n          <StzhInputDescription\n            classPrefix=\"stzh-input\"\n            id={`${this.inputId}-description`}\n            error={this._error}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            descriptionLongUsed={descriptionLongUsed}\n            moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/esm-es5/stzh-link.entry.js

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(t,i,e,n){function s(t){return t instanceof e?t:new e((function(i){i(t)}))}return new(e||(e=Promise))((function(e,l){function a(t){try{r(n.next(t))}catch(t){l(t)}}function o(t){try{r(n["throw"](t))}catch(t){l(t)}}function r(t){t.done?e(t.value):s(t.value).then(a,o)}r((n=n.apply(t,i||[])).next())}))};var __generator=this&&this.__generator||function(t,i){var e={label:0,sent:function(){if(l[0]&1)throw l[1];return l[1]},trys:[],ops:[]},n,s,l,a;return a={next:o(0),throw:o(1),return:o(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function o(t){return function(i){return r([t,i])}}function r(o){if(n)throw new TypeError("Generator is already executing.");while(a&&(a=0,o[0]&&(e=0)),e)try{if(n=1,s&&(l=o[0]&2?s["return"]:o[0]?s["throw"]||((l=s["return"])&&l.call(s),0):s.next)&&!(l=l.call(s,o[1])).done)return l;if(s=0,l)o=[o[0]&2,l.value];switch(o[0]){case 0:case 1:l=o;break;case 4:e.label++;return{value:o[1],done:false};case 5:e.label++;s=o[1];o=[0];continue;case 7:o=e.ops.pop();e.trys.pop();continue;default:if(!(l=e.trys,l=l.length>0&&l[l.length-1])&&(o[0]===6||o[0]===2)){e=0;continue}if(o[0]===3&&(!l||o[1]>l[0]&&o[1]<l[3])){e.label=o[1];break}if(o[0]===6&&e.label<l[1]){e.label=l[1];l=o;break}if(l&&e.label<l[2]){e.label=l[2];e.ops.push(o);break}if(l[2])e.ops.pop();e.trys.pop();continue}o=i.call(t,e)}catch(t){o=[6,t];s=0}finally{n=l=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,F as Fragment,a as Host,g as getElement}from"./index-67fd55c9.js";import{h as hasSlot}from"./utils-51148d9a.js";import{f as fetchTranslations}from"./translation-utils-2623783f.js";var stzhLinkCss='@charset "UTF-8";.sc-stzh-link-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-link-h{display:none}.sc-stzh-link-h *.sc-stzh-link,.sc-stzh-link-h *.sc-stzh-link::before,.sc-stzh-link-h *.sc-stzh-link::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-link-h{--color:var(--stzh-link-color);--text-decoration-line:underline;--icon-size:var(--stzh-icon-size-medium);--icon-wrapper-height:var(--stzh-link-icon-wrapper-height);--hover-color:var(--stzh-link-hover-color);--hover-text-decoration-line:underline;color:var(--color);display:inline-block}.sc-stzh-link-h .sc-stzh-link-s>stzh-text{--color:initial}[fullwidth].sc-stzh-link-h:not([fullwidth=false]){width:100%;display:block}[size=small].sc-stzh-link-h{--icon-size:var(--stzh-icon-size-small)}[variant=secondary].sc-stzh-link-h{--color:var(--stzh-base-color)}[active].sc-stzh-link-h:not([active=false]){--color:var(--hover-color)}[disabled].sc-stzh-link-h:not([disabled=false]){--color:var(--stzh-color-grey25);--hover-color:var(--stzh-color-grey25)}.sc-stzh-link-h .sc-stzh-link-s>stzh-icon,.stzh-link__icon.sc-stzh-link{--size:var(--icon-size)}.stzh-link.sc-stzh-link{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:inherit;position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:stretch;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;color:var(--color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);cursor:pointer;width:100%;-webkit-text-decoration-line:none;text-decoration-line:none;background-color:transparent;padding:0;border-radius:var(--stzh-button-border-radius);text-align:left}@media screen and (min-width: 1024px){.stzh-link.sc-stzh-link{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-link.sc-stzh-link:hover{color:var(--hover-color)}.stzh-link.sc-stzh-link:hover .stzh-link__text.sc-stzh-link{-webkit-text-decoration-line:var(--hover-text-decoration-line);text-decoration-line:var(--hover-text-decoration-line)}.stzh-link__vhidden.sc-stzh-link{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-link__inner.sc-stzh-link{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}.stzh-link__icon-wrapper.sc-stzh-link{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;width:auto;height:var(--icon-wrapper-height)}.stzh-link__text.sc-stzh-link{-webkit-text-decoration-line:var(--text-decoration-line);text-decoration-line:var(--text-decoration-line)}.stzh-link__icon-wrapper.sc-stzh-link:not(:empty)+.stzh-link__text.sc-stzh-link:not(:empty),.stzh-link__text.sc-stzh-link:not(:empty)+.stzh-link__icon-wrapper.sc-stzh-link:not(:empty){margin-left:var(--stzh-space-xxsmall)}.stzh-link__badge.sc-stzh-link{position:absolute;z-index:1;top:0;right:0}.stzh-link--has-icon-only.sc-stzh-link .stzh-link__text.sc-stzh-link{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-link--badge-position-link.sc-stzh-link .stzh-link__icon-wrapper.sc-stzh-link{position:static}.stzh-link__badge.sc-stzh-link,.stzh-link--badge-position-link.sc-stzh-link .stzh-link__badge.sc-stzh-link{top:calc(var(--stzh-space-xxsmall) * -1);right:calc(var(--stzh-space-large) * -1)}.stzh-link--badge-position-icon.stzh-link--has-icon.sc-stzh-link .stzh-link__icon-wrapper.sc-stzh-link{position:relative}.stzh-link--badge-position-icon.stzh-link--has-icon.sc-stzh-link .stzh-link__badge.sc-stzh-link{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-link--badge-position-icon.stzh-link--has-icon.stzh-link--has-badge.sc-stzh-link .stzh-link__icon-wrapper.sc-stzh-link+.stzh-link__text.sc-stzh-link:not(:empty){margin-left:var(--stzh-space-small)}.stzh-link--size-small.sc-stzh-link{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-link--size-inherit.sc-stzh-link{font-size:inherit;line-height:inherit;letter-spacing:inherit}.stzh-link--align-left.sc-stzh-link .stzh-link__inner.sc-stzh-link{-ms-flex-pack:start;justify-content:flex-start}.stzh-link--align-right.sc-stzh-link .stzh-link__inner.sc-stzh-link{-ms-flex-pack:end;justify-content:flex-end}.stzh-link--align-center.sc-stzh-link .stzh-link__inner.sc-stzh-link{-ms-flex-pack:center;justify-content:center}.stzh-link--align-space-between.sc-stzh-link .stzh-link__inner.sc-stzh-link{-ms-flex-pack:justify;justify-content:space-between}.stzh-link--is-disabled.sc-stzh-link{cursor:not-allowed}';var StzhLink=function(){function t(t){var i=this;registerInstance(this,t);this.stzhFocus=createEvent(this,"stzhFocus",7);this.stzhBlur=createEvent(this,"stzhBlur",7);this.focusedByInput=false;this.onRootFocus=function(){if(!i.focusedByInput){i.setFocus()}i.focusedByInput=false};this.onFocus=function(t){i.focusedByInput=true;var e=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});i.element.dispatchEvent(e);i.stzhFocus.emit({component:"stzh-link",originalEvent:t})};this.onBlur=function(t){var e=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});i.element.dispatchEvent(e);i.stzhBlur.emit({component:"stzh-link",originalEvent:t})};this.localization=undefined;this.icon="";this.iconPosition="left";this.size="default";this.href="";this.rel=undefined;this.target="";this.download=undefined;this.type="button";this.variant="default";this.fullwidth=false;this.textAlign="default";this.badge="";this.badgeType="default";this.badgeEmpty=false;this.badgePosition="icon";this.disabled=false;this.active=false;this.iconOnly=false;this.label="";this.linkAccesskey=undefined;this.a11yLabel=undefined;this.a11yDescribedby="";this.a11yExpanded=undefined;this.a11yDisabled=undefined;this.a11yControls=undefined;this.a11yTabindex=undefined;this.analyticsId=undefined}t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.link.focus();return[2]}))}))};t.prototype.renderIcon=function(){return h("div",{class:"stzh-link__icon-wrapper"},this.icon?h("stzh-icon",{class:"stzh-link__icon",name:this.icon}):h("slot",{name:"icon"}),(this.badge||this.badgeEmpty)&&h("stzh-badge",{class:"stzh-link__badge",label:this.badge,type:this.badgeType}))};t.prototype.renderContent=function(){var t=this;return h("div",{class:"stzh-link__text"},this.rel&&this.rel.includes("external")&&h("div",{class:"stzh-link__vhidden"},this.localization.$globals.externalLinkLabel),this.download&&h("div",{class:"stzh-link__vhidden"},this.localization.$globals.downloadLinkLabel),h("div",{ref:function(i){return t.text=i}},this.label?this.label:h("slot",null)))};t.prototype.renderInner=function(t){return h(Fragment,null,h("div",{class:"stzh-link__inner"},this.iconPosition==="left"&&this.renderIcon(),this.renderContent(),this.iconPosition==="right"&&this.renderIcon()),(this.badge||this.badgeEmpty)&&!t&&h("stzh-badge",{class:"stzh-link__badge",label:this.badge,type:this.badgeType}))};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(i){switch(i.label){case 0:if(!!this.localization)return[3,2];t=this;return[4,fetchTranslations(this.element,"link")];case 1:t.localization=i.sent();i.label=2;case 2:return[2]}}))}))};t.prototype.componentDidRender=function(){var t=this;requestAnimationFrame((function(){t.link.setAttribute("s-object-id",t.analyticsId||t.text.innerText)}))};t.prototype.render=function(){var t;var i=this;var e=hasSlot(this.element,"icon")||!!this.icon;var n=(t={"stzh-link":true,"stzh-link--has-icon":e,"stzh-link--has-icon-only":this.iconOnly,"stzh-link--has-badge":!!this.badge,"stzh-link--is-fullwidth":this.fullwidth,"stzh-link--is-disabled":this.disabled,"stzh-link--is-active":this.active},t["stzh-link--badge-position-".concat(this.badgePosition)]=!!this.badgePosition,t["stzh-link--align-".concat(this.textAlign)]=!!this.textAlign,t["stzh-link--size-".concat(this.size)]=!!this.size,t["stzh-link--".concat(this.variant)]=!!this.variant,t);return h(Host,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},this.href?h("a",{ref:function(t){return i.link=t},href:this.disabled?null:this.href,download:this.download,rel:this.rel,target:this.target,class:n,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,"aria-label":this.a11yLabel,"aria-describedby":this.a11yDescribedby,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner(e)):h("button",{ref:function(t){return i.link=t},class:n,type:this.type,disabled:this.disabled,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,"aria-label":this.a11yLabel,"aria-describedby":this.a11yDescribedby,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner(e)))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();StzhLink.style=stzhLinkCss;export{StzhLink as stzh_link};
+var __awaiter=this&&this.__awaiter||function(t,i,e,n){function s(t){return t instanceof e?t:new e((function(i){i(t)}))}return new(e||(e=Promise))((function(e,l){function a(t){try{r(n.next(t))}catch(t){l(t)}}function o(t){try{r(n["throw"](t))}catch(t){l(t)}}function r(t){t.done?e(t.value):s(t.value).then(a,o)}r((n=n.apply(t,i||[])).next())}))};var __generator=this&&this.__generator||function(t,i){var e={label:0,sent:function(){if(l[0]&1)throw l[1];return l[1]},trys:[],ops:[]},n,s,l,a;return a={next:o(0),throw:o(1),return:o(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function o(t){return function(i){return r([t,i])}}function r(o){if(n)throw new TypeError("Generator is already executing.");while(a&&(a=0,o[0]&&(e=0)),e)try{if(n=1,s&&(l=o[0]&2?s["return"]:o[0]?s["throw"]||((l=s["return"])&&l.call(s),0):s.next)&&!(l=l.call(s,o[1])).done)return l;if(s=0,l)o=[o[0]&2,l.value];switch(o[0]){case 0:case 1:l=o;break;case 4:e.label++;return{value:o[1],done:false};case 5:e.label++;s=o[1];o=[0];continue;case 7:o=e.ops.pop();e.trys.pop();continue;default:if(!(l=e.trys,l=l.length>0&&l[l.length-1])&&(o[0]===6||o[0]===2)){e=0;continue}if(o[0]===3&&(!l||o[1]>l[0]&&o[1]<l[3])){e.label=o[1];break}if(o[0]===6&&e.label<l[1]){e.label=l[1];l=o;break}if(l&&e.label<l[2]){e.label=l[2];e.ops.push(o);break}if(l[2])e.ops.pop();e.trys.pop();continue}o=i.call(t,e)}catch(t){o=[6,t];s=0}finally{n=l=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,F as Fragment,a as Host,g as getElement}from"./index-67fd55c9.js";import{h as hasSlot}from"./utils-8f264f12.js";import{f as fetchTranslations}from"./translation-utils-2623783f.js";var stzhLinkCss='@charset "UTF-8";.sc-stzh-link-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-link-h{display:none}.sc-stzh-link-h *.sc-stzh-link,.sc-stzh-link-h *.sc-stzh-link::before,.sc-stzh-link-h *.sc-stzh-link::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-link-h{--color:var(--stzh-link-color);--text-decoration-line:underline;--icon-size:var(--stzh-icon-size-medium);--icon-wrapper-height:var(--stzh-link-icon-wrapper-height);--hover-color:var(--stzh-link-hover-color);--hover-text-decoration-line:underline;color:var(--color);display:inline-block}.sc-stzh-link-h .sc-stzh-link-s>stzh-text{--color:initial}[fullwidth].sc-stzh-link-h:not([fullwidth=false]){width:100%;display:block}[size=small].sc-stzh-link-h{--icon-size:var(--stzh-icon-size-small)}[variant=secondary].sc-stzh-link-h{--color:var(--stzh-base-color)}[active].sc-stzh-link-h:not([active=false]){--color:var(--hover-color)}[disabled].sc-stzh-link-h:not([disabled=false]){--color:var(--stzh-color-grey25);--hover-color:var(--stzh-color-grey25)}.sc-stzh-link-h .sc-stzh-link-s>stzh-icon,.stzh-link__icon.sc-stzh-link{--size:var(--icon-size)}.stzh-link.sc-stzh-link{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:inherit;position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:stretch;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;color:var(--color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);cursor:pointer;width:100%;-webkit-text-decoration-line:none;text-decoration-line:none;background-color:transparent;padding:0;border-radius:var(--stzh-button-border-radius);text-align:left}@media screen and (min-width: 1024px){.stzh-link.sc-stzh-link{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-link.sc-stzh-link:hover{color:var(--hover-color)}.stzh-link.sc-stzh-link:hover .stzh-link__text.sc-stzh-link{-webkit-text-decoration-line:var(--hover-text-decoration-line);text-decoration-line:var(--hover-text-decoration-line)}.stzh-link__vhidden.sc-stzh-link{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-link__inner.sc-stzh-link{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}.stzh-link__icon-wrapper.sc-stzh-link{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;width:auto;height:var(--icon-wrapper-height)}.stzh-link__text.sc-stzh-link{-webkit-text-decoration-line:var(--text-decoration-line);text-decoration-line:var(--text-decoration-line)}.stzh-link__icon-wrapper.sc-stzh-link:not(:empty)+.stzh-link__text.sc-stzh-link:not(:empty),.stzh-link__text.sc-stzh-link:not(:empty)+.stzh-link__icon-wrapper.sc-stzh-link:not(:empty){margin-left:var(--stzh-space-xxsmall)}.stzh-link__badge.sc-stzh-link{position:absolute;z-index:1;top:0;right:0}.stzh-link--has-icon-only.sc-stzh-link .stzh-link__text.sc-stzh-link{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-link--badge-position-link.sc-stzh-link .stzh-link__icon-wrapper.sc-stzh-link{position:static}.stzh-link__badge.sc-stzh-link,.stzh-link--badge-position-link.sc-stzh-link .stzh-link__badge.sc-stzh-link{top:calc(var(--stzh-space-xxsmall) * -1);right:calc(var(--stzh-space-large) * -1)}.stzh-link--badge-position-icon.stzh-link--has-icon.sc-stzh-link .stzh-link__icon-wrapper.sc-stzh-link{position:relative}.stzh-link--badge-position-icon.stzh-link--has-icon.sc-stzh-link .stzh-link__badge.sc-stzh-link{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-link--badge-position-icon.stzh-link--has-icon.stzh-link--has-badge.sc-stzh-link .stzh-link__icon-wrapper.sc-stzh-link+.stzh-link__text.sc-stzh-link:not(:empty){margin-left:var(--stzh-space-small)}.stzh-link--size-small.sc-stzh-link{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-link--size-inherit.sc-stzh-link{font-size:inherit;line-height:inherit;letter-spacing:inherit}.stzh-link--align-left.sc-stzh-link .stzh-link__inner.sc-stzh-link{-ms-flex-pack:start;justify-content:flex-start}.stzh-link--align-right.sc-stzh-link .stzh-link__inner.sc-stzh-link{-ms-flex-pack:end;justify-content:flex-end}.stzh-link--align-center.sc-stzh-link .stzh-link__inner.sc-stzh-link{-ms-flex-pack:center;justify-content:center}.stzh-link--align-space-between.sc-stzh-link .stzh-link__inner.sc-stzh-link{-ms-flex-pack:justify;justify-content:space-between}.stzh-link--is-disabled.sc-stzh-link{cursor:not-allowed}';var StzhLink=function(){function t(t){var i=this;registerInstance(this,t);this.stzhFocus=createEvent(this,"stzhFocus",7);this.stzhBlur=createEvent(this,"stzhBlur",7);this.focusedByInput=false;this.onRootFocus=function(){if(!i.focusedByInput){i.setFocus()}i.focusedByInput=false};this.onFocus=function(t){i.focusedByInput=true;var e=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});i.element.dispatchEvent(e);i.stzhFocus.emit({component:"stzh-link",originalEvent:t})};this.onBlur=function(t){var e=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});i.element.dispatchEvent(e);i.stzhBlur.emit({component:"stzh-link",originalEvent:t})};this.localization=undefined;this.icon="";this.iconPosition="left";this.size="default";this.href="";this.rel=undefined;this.target="";this.download=undefined;this.type="button";this.variant="default";this.fullwidth=false;this.textAlign="default";this.badge="";this.badgeType="default";this.badgeEmpty=false;this.badgePosition="icon";this.disabled=false;this.active=false;this.iconOnly=false;this.label="";this.linkAccesskey=undefined;this.a11yLabel=undefined;this.a11yDescribedby="";this.a11yExpanded=undefined;this.a11yDisabled=undefined;this.a11yControls=undefined;this.a11yTabindex=undefined;this.analyticsId=undefined}t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.link.focus();return[2]}))}))};t.prototype.renderIcon=function(){return h("div",{class:"stzh-link__icon-wrapper"},this.icon?h("stzh-icon",{class:"stzh-link__icon",name:this.icon}):h("slot",{name:"icon"}),(this.badge||this.badgeEmpty)&&h("stzh-badge",{class:"stzh-link__badge",label:this.badge,type:this.badgeType}))};t.prototype.renderContent=function(){var t=this;return h("div",{class:"stzh-link__text"},this.rel&&this.rel.includes("external")&&h("div",{class:"stzh-link__vhidden"},this.localization.$globals.externalLinkLabel),this.download&&h("div",{class:"stzh-link__vhidden"},this.localization.$globals.downloadLinkLabel),h("div",{ref:function(i){return t.text=i}},this.label?this.label:h("slot",null)))};t.prototype.renderInner=function(t){return h(Fragment,null,h("div",{class:"stzh-link__inner"},this.iconPosition==="left"&&this.renderIcon(),this.renderContent(),this.iconPosition==="right"&&this.renderIcon()),(this.badge||this.badgeEmpty)&&!t&&h("stzh-badge",{class:"stzh-link__badge",label:this.badge,type:this.badgeType}))};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(i){switch(i.label){case 0:if(!!this.localization)return[3,2];t=this;return[4,fetchTranslations(this.element,"link")];case 1:t.localization=i.sent();i.label=2;case 2:return[2]}}))}))};t.prototype.componentDidRender=function(){var t=this;requestAnimationFrame((function(){t.link.setAttribute("s-object-id",t.analyticsId||t.text.innerText)}))};t.prototype.render=function(){var t;var i=this;var e=hasSlot(this.element,"icon")||!!this.icon;var n=(t={"stzh-link":true,"stzh-link--has-icon":e,"stzh-link--has-icon-only":this.iconOnly,"stzh-link--has-badge":!!this.badge,"stzh-link--is-fullwidth":this.fullwidth,"stzh-link--is-disabled":this.disabled,"stzh-link--is-active":this.active},t["stzh-link--badge-position-".concat(this.badgePosition)]=!!this.badgePosition,t["stzh-link--align-".concat(this.textAlign)]=!!this.textAlign,t["stzh-link--size-".concat(this.size)]=!!this.size,t["stzh-link--".concat(this.variant)]=!!this.variant,t);return h(Host,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},this.href?h("a",{ref:function(t){return i.link=t},href:this.disabled?null:this.href,download:this.download,rel:this.rel,target:this.target,class:n,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls||null,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner(e)):h("button",{ref:function(t){return i.link=t},class:n,type:this.type,disabled:this.disabled,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls||null,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner(e)))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();StzhLink.style=stzhLinkCss;export{StzhLink as stzh_link};
 //# sourceMappingURL=stzh-link.entry.js.map

package/dist/esm-es5/stzh-link.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stzhLinkCss","StzhLink","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","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":[":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 { fetchTranslations, 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 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}\n            aria-describedby={this.a11yDescribedby}\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}\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}\n            aria-describedby={this.a11yDescribedby}\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}\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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"}
+{"version":3,"names":["stzhLinkCss","StzhLink","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","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":[":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 { fetchTranslations, 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 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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"}

package/dist/esm-es5/stzh-menu_2.entry.js

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

package/dist/esm-es5/stzh-menu_2.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stzhMenuCss","StzhMenu","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_1","menuItem","focus","componentDidRender","requestAnimationFrame","setAttribute","analyticsId","text","innerText","renderInner","iconUsed","Fragment","icon","name","badge","badgeEmpty","label","type","badgeType","ref","el","hasSlot","classes","disabled","active","tabindex","href","target","a11yLabel"],"sources":["src/components/stzh-menu/stzh-menu.scss?tag=stzh-menu&encapsulation=scoped","src/components/stzh-menu/stzh-menu.tsx","src/components/stzh-menu-item/stzh-menu-item.scss?tag=stzh-menu-item&encapsulation=scoped","src/components/stzh-menu-item/stzh-menu-item.tsx"],"sourcesContent":[":host {\n  ::slotted(stzh-hr) {\n    margin-top: space('xsmall');\n    margin-bottom: space('xsmall');\n  }\n}\n\n.stzh-menu {\n  display: flex;\n  flex-direction: column;\n}\n","import {\n  Component,\n  Host,\n  h,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for `stzh-menu-item` elements\n */\n@Component({\n  tag: \"stzh-menu\",\n  styleUrl: \"stzh-menu.scss\",\n  scoped: true\n})\nexport class StzhMenu {\n  render() {\n    return (\n      <Host role=\"menu\">\n        <div class=\"stzh-menu\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --height: #{$menuItemHeight};\n  --color: #{$colorGrey70};\n  --background-color: transparent;\n  --icon-size: #{iconSize('small')};\n\n  --hover-color: #{$colorGrey70};\n  --hover-background-color: #{$colorGrey5};\n\n  &[active]:not([active=\"false\"]) {\n    --color: #{$colorPrimary};\n    --hover-color: #{$colorPrimaryHover};\n    --hover-background-color: #{$colorPrimary8};\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorWhite};\n    --background-color: #{$colorGrey13};\n\n    --hover-color: #{$colorWhite};\n    --hover-background-color: #{$colorGrey13};\n  }\n}\n\n:host ::slotted(stzh-icon),\n.stzh-menu-item__icon {\n  --size: var(--icon-size);\n}\n\n.stzh-menu-item {\n  @include fontSize('micro');\n  font-family: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  text-decoration-line: none;\n  border: none;\n  padding: space('xsmall') space('medium');\n  padding-left: space('large');\n  color: var(--color);\n  background-color: var(--background-color);\n  width: 100%;\n  height: var(--height);\n  line-height: var(--height);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  cursor: pointer;\n\n  &:hover {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  &__icon-wrapper {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: 1em;\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('xsmall')} * -1);\n  }\n\n  &__icon-wrapper + &__text:not(:empty) {\n    margin-left: space('xsmall');\n  }\n\n  &__text {\n    @include truncate;\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Method,\n  Element,\n  Fragment,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhMenuItemFocusEvent,\n  StzhMenuItemBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for any content\n * @slot icon - Slot for `stzh-icon` element\n */\n@Component({\n  tag: \"stzh-menu-item\",\n  styleUrl: \"stzh-menu-item.scss\",\n  scoped: true\n})\nexport class StzhMenuItem {\n  /** Badge (only displayed if `icon` property or icon slot is used) */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Whether the button is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether the button is active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** `href` if the button should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhMenuItemElement;\n\n  /** Focus menu item */\n  @Method()\n  async setFocus() {\n    this.menuItem.focus();\n  }\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhMenuItemFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhMenuItemBlurEvent>;\n\n  private menuItem: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLDivElement;\n\n  private focusedByInput: boolean = false;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.setFocus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event\n    });\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.menuItem.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        {iconUsed &&\n          <div class=\"stzh-menu-item__icon-wrapper\">\n            {this.icon ?\n              <stzh-icon class=\"stzh-menu-item__icon\" name={this.icon}></stzh-icon>\n              :\n              <slot name=\"icon\"></slot>\n            }\n            {(this.badge || this.badgeEmpty) &&\n              <stzh-badge class=\"stzh-menu-item__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n            }\n          </div>\n        }\n        <div\n          ref={(el) => (this.text = el as HTMLDivElement)}\n          class=\"stzh-menu-item__text\"\n        >\n          {this.label ? this.label : <slot></slot>}\n        </div>\n      </Fragment>\n    );\n  }\n\n  render() {\n    const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-menu-item\": true,\n      \"stzh-menu-item--has-icon\": iconUsed,\n      \"stzh-menu-item--has-badge\": !!this.badge,\n      \"stzh-menu-item--is-disabled\": this.disabled,\n      \"stzh-menu-item--is-active\": this.active\n    };\n\n    return (\n      <Host role=\"menuitem\" tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ?\n          <a\n            ref={(el) => (this.menuItem = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n        :\n          <button\n            ref={(el) => (this.menuItem = el as HTMLButtonElement)}\n            class={classes}\n            type=\"button\"\n            disabled={this.disabled}\n            aria-label={this.a11yLabel}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </button>\n        }\n      </Host>\n    );\n  }\n}\n"],"mappings":"8mDAAA,IAAMA,YAAc,+vB,ICcPC,SAAQ,W,uCACnBA,EAAAC,UAAAC,OAAA,WACE,OACEC,EAACC,KAAI,CAACC,KAAK,QACTF,EAAA,OAAKG,MAAM,aACTH,EAAA,c,WALW,G,2BCdrB,IAAMI,gBAAkB,kjG,IC4BXC,aAAY,W,8IAuDfC,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,SAAQ,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,QAAQ3C,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,KAAI,CAACC,KAAK,WAAWmD,SAAU/C,KAAK6C,SAAW,KAAO,KAAMxC,QAASL,KAAKE,aACxEF,KAAKgD,KACJtD,EAAA,KACE+C,IAAK,SAACC,GAAE,OAAMvC,EAAKoB,SAAWmB,CAAtB,EACRM,KAAMhD,KAAK6C,SAAW,KAAO7C,KAAKgD,KAClCC,OAAQjD,KAAKiD,OACbpD,MAAO+C,EAAO,aACF5C,KAAKkD,UACjB7C,QAASL,KAAKK,QACdc,OAAQnB,KAAKmB,QAEZnB,KAAK+B,YAAYC,IAGpBtC,EAAA,UACE+C,IAAK,SAACC,GAAE,OAAMvC,EAAKoB,SAAWmB,CAAtB,EACR7C,MAAO+C,EACPL,KAAK,SACLM,SAAU7C,KAAK6C,SAAQ,aACX7C,KAAKkD,UACjB7C,QAASL,KAAKK,QACdc,OAAQnB,KAAKmB,QAEZnB,KAAK+B,YAAYC,I,qIAhKL,G"}
+{"version":3,"names":["stzhMenuCss","StzhMenu","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_1","menuItem","focus","componentDidRender","requestAnimationFrame","setAttribute","analyticsId","text","innerText","renderInner","iconUsed","Fragment","icon","name","badge","badgeEmpty","label","type","badgeType","ref","el","hasSlot","classes","disabled","active","tabindex","href","target","a11yLabel"],"sources":["src/components/stzh-menu/stzh-menu.scss?tag=stzh-menu&encapsulation=scoped","src/components/stzh-menu/stzh-menu.tsx","src/components/stzh-menu-item/stzh-menu-item.scss?tag=stzh-menu-item&encapsulation=scoped","src/components/stzh-menu-item/stzh-menu-item.tsx"],"sourcesContent":[":host {\n  ::slotted(stzh-hr) {\n    margin-top: space('xsmall');\n    margin-bottom: space('xsmall');\n  }\n}\n\n.stzh-menu {\n  display: flex;\n  flex-direction: column;\n}\n","import {\n  Component,\n  Host,\n  h,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for `stzh-menu-item` elements\n */\n@Component({\n  tag: \"stzh-menu\",\n  styleUrl: \"stzh-menu.scss\",\n  scoped: true\n})\nexport class StzhMenu {\n  render() {\n    return (\n      <Host role=\"menu\">\n        <div class=\"stzh-menu\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --height: #{$menuItemHeight};\n  --color: #{$colorGrey70};\n  --background-color: transparent;\n  --icon-size: #{iconSize('small')};\n\n  --hover-color: #{$colorGrey70};\n  --hover-background-color: #{$colorGrey5};\n\n  &[active]:not([active=\"false\"]) {\n    --color: #{$colorPrimary};\n    --hover-color: #{$colorPrimaryHover};\n    --hover-background-color: #{$colorPrimary8};\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorWhite};\n    --background-color: #{$colorGrey13};\n\n    --hover-color: #{$colorWhite};\n    --hover-background-color: #{$colorGrey13};\n  }\n}\n\n:host ::slotted(stzh-icon),\n.stzh-menu-item__icon {\n  --size: var(--icon-size);\n}\n\n.stzh-menu-item {\n  @include fontSize('micro');\n  font-family: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  text-decoration-line: none;\n  border: none;\n  padding: space('xsmall') space('medium');\n  padding-left: space('large');\n  color: var(--color);\n  background-color: var(--background-color);\n  width: 100%;\n  height: var(--height);\n  line-height: var(--height);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  cursor: pointer;\n\n  &:hover {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  &__icon-wrapper {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: 1em;\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('xsmall')} * -1);\n  }\n\n  &__icon-wrapper + &__text:not(:empty) {\n    margin-left: space('xsmall');\n  }\n\n  &__text {\n    @include truncate;\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Method,\n  Element,\n  Fragment,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhMenuItemFocusEvent,\n  StzhMenuItemBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for any content\n * @slot icon - Slot for `stzh-icon` element\n */\n@Component({\n  tag: \"stzh-menu-item\",\n  styleUrl: \"stzh-menu-item.scss\",\n  scoped: true\n})\nexport class StzhMenuItem {\n  /** Badge (only displayed if `icon` property or icon slot is used) */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Whether the button is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether the button is active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** `href` if the button should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhMenuItemElement;\n\n  /** Focus menu item */\n  @Method()\n  async setFocus() {\n    this.menuItem.focus();\n  }\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhMenuItemFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhMenuItemBlurEvent>;\n\n  private menuItem: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLDivElement;\n\n  private focusedByInput: boolean = false;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.setFocus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event\n    });\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.menuItem.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        {iconUsed &&\n          <div class=\"stzh-menu-item__icon-wrapper\">\n            {this.icon ?\n              <stzh-icon class=\"stzh-menu-item__icon\" name={this.icon}></stzh-icon>\n              :\n              <slot name=\"icon\"></slot>\n            }\n            {(this.badge || this.badgeEmpty) &&\n              <stzh-badge class=\"stzh-menu-item__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n            }\n          </div>\n        }\n        <div\n          ref={(el) => (this.text = el as HTMLDivElement)}\n          class=\"stzh-menu-item__text\"\n        >\n          {this.label ? this.label : <slot></slot>}\n        </div>\n      </Fragment>\n    );\n  }\n\n  render() {\n    const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-menu-item\": true,\n      \"stzh-menu-item--has-icon\": iconUsed,\n      \"stzh-menu-item--has-badge\": !!this.badge,\n      \"stzh-menu-item--is-disabled\": this.disabled,\n      \"stzh-menu-item--is-active\": this.active\n    };\n\n    return (\n      <Host role=\"menuitem\" tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ?\n          <a\n            ref={(el) => (this.menuItem = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n        :\n          <button\n            ref={(el) => (this.menuItem = el as HTMLButtonElement)}\n            class={classes}\n            type=\"button\"\n            disabled={this.disabled}\n            aria-label={this.a11yLabel || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </button>\n        }\n      </Host>\n    );\n  }\n}\n"],"mappings":"8mDAAA,IAAMA,YAAc,+vB,ICcPC,SAAQ,W,uCACnBA,EAAAC,UAAAC,OAAA,WACE,OACEC,EAACC,KAAI,CAACC,KAAK,QACTF,EAAA,OAAKG,MAAM,aACTH,EAAA,c,WALW,G,2BCdrB,IAAMI,gBAAkB,kjG,IC4BXC,aAAY,W,8IAuDfC,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,SAAQ,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,QAAQ3C,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,KAAI,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,qIAhKL,G"}

package/dist/esm-es5/stzh-overlay.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}}};import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-67fd55c9.js";import{c as createBaseFocusTrapOptions}from"./overlay-utils-33021971.js";import{c as createFocusTrap}from"./focus-trap.esm-601d164c.js";var stzhOverlayCss=".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 CLASS_BODY_OPEN="stzh-overlay-open";var StzhOverlay=function(){function t(t){registerInstance(this,t);this.stzhOpen=createEvent(this,"stzhOpen",7);this.stzhClose=createEvent(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(CLASS_BODY_OPEN);this.disableSiblings();if(this.trap){this.trap.activate()}};t.prototype.dialogHidden=function(){document.body.classList.remove(CLASS_BODY_OPEN);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=createFocusTrap(this.element,Object.assign({fallbackFocus:this.dialogElement},createBaseFocusTrapOptions()));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 h(Host,null,h("div",{class:e},h("div",{class:"stzh-overlay__backdrop"}),h("div",{class:"stzh-overlay__content"},h("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"},h("slot",null)))))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();StzhOverlay.style=stzhOverlayCss;export{StzhOverlay as stzh_overlay};
+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}}};import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-67fd55c9.js";import{c as createBaseFocusTrapOptions}from"./overlay-utils-33021971.js";import{c as createFocusTrap}from"./focus-trap.esm-601d164c.js";var stzhOverlayCss=".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 CLASS_BODY_OPEN="stzh-overlay-open";var StzhOverlay=function(){function t(t){registerInstance(this,t);this.stzhOpen=createEvent(this,"stzhOpen",7);this.stzhClose=createEvent(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(CLASS_BODY_OPEN);this.disableSiblings();if(this.trap){this.trap.activate()}};t.prototype.dialogHidden=function(){document.body.classList.remove(CLASS_BODY_OPEN);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=createFocusTrap(this.element,Object.assign({fallbackFocus:this.dialogElement},createBaseFocusTrapOptions()));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 h(Host,null,h("div",{class:e},h("div",{class:"stzh-overlay__backdrop"}),h("div",{class:"stzh-overlay__content"},h("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"},h("slot",null)))))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();StzhOverlay.style=stzhOverlayCss;export{StzhOverlay as stzh_overlay};
 //# sourceMappingURL=stzh-overlay.entry.js.map

package/dist/esm-es5/stzh-overlay.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stzhOverlayCss","CLASS_BODY_OPEN","StzhOverlay","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":"0rDAAA,IAAMA,eAAiB,i7CCoBvB,IAAMC,gBAAkB,oB,IAUXC,YAAW,W,6IAEmB,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,IAAI/B,iBAC5BK,KAAKgB,kBAEL,GAAIhB,KAAK2B,KAAM,CACb3B,KAAK2B,KAAKC,U,GAIN/B,EAAAC,UAAA+B,aAAA,WACNN,SAASC,KAAKC,UAAUK,OAAOnC,iBAC/BK,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,gBAAgBvC,KAAKe,QAAOyB,OAAAC,OAAA,CACtCC,cAAe1C,KAAK2C,eACjBC,+BAGL,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,KAAI,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,qIAhIU,G"}
+{"version":3,"names":["stzhOverlayCss","CLASS_BODY_OPEN","StzhOverlay","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":"0rDAAA,IAAMA,eAAiB,i7CCoBvB,IAAMC,gBAAkB,oB,IAUXC,YAAW,W,6IAEmB,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,IAAI/B,iBAC5BK,KAAKgB,kBAEL,GAAIhB,KAAK2B,KAAM,CACb3B,KAAK2B,KAAKC,U,GAIN/B,EAAAC,UAAA+B,aAAA,WACNN,SAASC,KAAKC,UAAUK,OAAOnC,iBAC/BK,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,gBAAgBvC,KAAKe,QAAOyB,OAAAC,OAAA,CACtCC,cAAe1C,KAAK2C,eACjBC,+BAGL,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,KAAI,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,qIAhIU,G"}

package/dist/esm-es5/stzh-pagebottom.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,h,a as Host,g as getElement}from"./index-67fd55c9.js";import{h as hasSlot}from"./utils-51148d9a.js";var stzhPagebottomCss=".sc-stzh-pagebottom-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-pagebottom-h{display:none}.sc-stzh-pagebottom-h *.sc-stzh-pagebottom,.sc-stzh-pagebottom-h *.sc-stzh-pagebottom::before,.sc-stzh-pagebottom-h *.sc-stzh-pagebottom::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-pagebottom-h .sc-stzh-pagebottom-s>[slot=logo]{height:2.375rem}.stzh-pagebottom.sc-stzh-pagebottom{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 600px){.stzh-pagebottom.sc-stzh-pagebottom{-ms-flex-direction:row;flex-direction:row}}.stzh-pagebottom__share-title.sc-stzh-pagebottom{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));margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-pagebottom__share-title.sc-stzh-pagebottom{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))}}@media screen and (min-width: 600px){.stzh-pagebottom__logo.sc-stzh-pagebottom{margin-left:auto}}.stzh-pagebottom__logo-link.sc-stzh-pagebottom:not(:empty){display:block;margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 600px){.stzh-pagebottom__logo-link.sc-stzh-pagebottom:not(:empty){margin-top:0;margin-left:var(--stzh-space-xlarge)}}.stzh-pagebottom--has-border.sc-stzh-pagebottom{padding-top:var(--stzh-space-xlarge);border-top:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 1024px){.stzh-pagebottom--has-border.sc-stzh-pagebottom{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pagebottom--has-border.sc-stzh-pagebottom{padding-top:var(--stzh-space-xxxlarge)}}";var StzhPagebottom=function(){function t(t){registerInstance(this,t);this.shareTitle="";this.shareUrl=undefined;this.shareServices=undefined;this.shareDisabled=false;this.logoHref="https://www.stadt-zuerich.ch";this.logoAnalyticsId=undefined;this.withBorder=false}t.prototype.render=function(){var t=hasSlot(this.element,"logo");var e={"stzh-pagebottom":true,"stzh-pagebottom--has-border":this.withBorder};return h(Host,null,h("div",{class:e},!this.shareDisabled&&h("div",{class:"stzh-pagebottom__share-wrapper"},this.shareTitle&&h("div",{class:"stzh-pagebottom__share-title"},this.shareTitle),h("stzh-share",{url:this.shareUrl,services:this.shareServices})),t&&h("div",{class:"stzh-pagebottom__logo"},h("a",{href:this.logoHref,class:"stzh-pagebottom__logo-link","s-object-id":this.logoAnalyticsId||"Footer Logo"},h("slot",{name:"logo"})))))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();StzhPagebottom.style=stzhPagebottomCss;export{StzhPagebottom as stzh_pagebottom};
+import{r as registerInstance,h,a as Host,g as getElement}from"./index-67fd55c9.js";import{h as hasSlot}from"./utils-8f264f12.js";var stzhPagebottomCss=".sc-stzh-pagebottom-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-pagebottom-h{display:none}.sc-stzh-pagebottom-h *.sc-stzh-pagebottom,.sc-stzh-pagebottom-h *.sc-stzh-pagebottom::before,.sc-stzh-pagebottom-h *.sc-stzh-pagebottom::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-pagebottom-h .sc-stzh-pagebottom-s>[slot=logo]{height:2.375rem}.stzh-pagebottom.sc-stzh-pagebottom{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 600px){.stzh-pagebottom.sc-stzh-pagebottom{-ms-flex-direction:row;flex-direction:row}}.stzh-pagebottom__share-title.sc-stzh-pagebottom{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));margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-pagebottom__share-title.sc-stzh-pagebottom{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))}}@media screen and (min-width: 600px){.stzh-pagebottom__logo.sc-stzh-pagebottom{margin-left:auto}}.stzh-pagebottom__logo-link.sc-stzh-pagebottom:not(:empty){display:block;margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 600px){.stzh-pagebottom__logo-link.sc-stzh-pagebottom:not(:empty){margin-top:0;margin-left:var(--stzh-space-xlarge)}}.stzh-pagebottom--has-border.sc-stzh-pagebottom{padding-top:var(--stzh-space-xlarge);border-top:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 1024px){.stzh-pagebottom--has-border.sc-stzh-pagebottom{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pagebottom--has-border.sc-stzh-pagebottom{padding-top:var(--stzh-space-xxxlarge)}}";var StzhPagebottom=function(){function t(t){registerInstance(this,t);this.shareTitle="";this.shareUrl=undefined;this.shareServices=undefined;this.shareDisabled=false;this.logoHref="https://www.stadt-zuerich.ch";this.logoAnalyticsId=undefined;this.withBorder=false}t.prototype.render=function(){var t=hasSlot(this.element,"logo");var e={"stzh-pagebottom":true,"stzh-pagebottom--has-border":this.withBorder};return h(Host,null,h("div",{class:e},!this.shareDisabled&&h("div",{class:"stzh-pagebottom__share-wrapper"},this.shareTitle&&h("div",{class:"stzh-pagebottom__share-title"},this.shareTitle),h("stzh-share",{url:this.shareUrl,services:this.shareServices})),t&&h("div",{class:"stzh-pagebottom__logo"},h("a",{href:this.logoHref,class:"stzh-pagebottom__logo-link","s-object-id":this.logoAnalyticsId||"Footer Logo"},h("slot",{name:"logo"})))))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();StzhPagebottom.style=stzhPagebottomCss;export{StzhPagebottom as stzh_pagebottom};
 //# sourceMappingURL=stzh-pagebottom.entry.js.map