@oiz/stzh-components 3.0.0 → 3.1.0

package/dist/stzh-components/p-f5809e5f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhInputCss","inputCounter","StzhInput","this","focusedByInput","onClearClick","async","event","value","input","focus","waitForNextRender","stzhChange","emit","component","originalEvent","stzhChanged","handleReset","defaultValue","onInput","onChange","onRootFocus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","resetListener","target","contains","requestAnimationFrame","valueWatcher","newValue","filled","errorWatcher","_error","JSON","parse","e","typeWatcher","types","multiline","includes","Error","Promise","resolve","renderPromiseResolve","renderTextarea","h","class","ref","el","id","inputId","name","rows","disabled","readonly","minlength","maxlength","a11yDescribedby","required","invalid","renderInput","type","min","max","step","inputmode","autocomplete","noAutocomplete","undefined","componentDidRender","componentWillLoad","error","localization","stzhComponents","utils","fetchTranslations","render","buttonRightSlotUsed","hasSlot","descriptionUsed","description","descriptionLongUsed","descriptionLong","errorUsed","_a","length","classes","clearable","showSpin","labelHidden","size","Host","tabindex","htmlFor","label","hideOptional","$globals","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","icon","iconOnly","onClick","a11yLabel","clearButtonLabel","StzhInputDescription","classPrefix","descriptionLongTitle","moreInfoButtonLabel"],"sources":["src/components/stzh-input/stzh-input.scss?tag=stzh-input&encapsulation=scoped","src/components/stzh-input/stzh-input.tsx"],"sourcesContent":["/**\n * @prop --text-align: Text align of field\n * @prop --input-width: Width of of field\n * @prop --padding-top: Padding top of field\n * @prop --padding-bottom: Padding bottom of field\n * @prop --padding-left: Padding left of field\n * @prop --padding-right: Padding right of field\n *\n * @prop --stzh-form-input-height: **Global**: Height of fields & buttons\n * @prop --stzh-form-input-small-height: **Global**: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: **Global**: Height of fields & buttons when tiny variant is used\n */\n\n:host {\n  --text-align: left;\n  --color: #{$formColor};\n  --border-color: #{$formBorderColor};\n  --border-radius: #{$formInputBorderRadius};\n  --background-color: #{$formBackgroundColor};\n  --padding-top: #{space('xsmall')};\n  --padding-bottom: #{space('xsmall')};\n  --padding-left: #{space('medium')};\n  --padding-right: #{space('medium')};\n  --height: #{$formInputHeight};\n  --input-width: 100%;\n  --label-color: #{$formLabelColor};\n  --placeholder-color: #{$formInputPlaceholderColor};\n  --button-right-color: #{$colorGrey80};\n\n  --hover-color: #{$formHoverColor};\n  --hover-border-color: #{$formHoverBorderColor};\n  --hover-background-color: #{$formHoverBackgroundColor};\n  --hover-button-right-color: #{$colorPrimary70};\n\n  --focus-color: #{$formFocusColor};\n  --focus-border-color: #{$formFocusBorderColor};\n  --focus-background-color: #{$formFocusBackgroundColor};\n  --focus-button-right-color: #{$colorPrimary70};\n\n  &[type=\"hidden\"] {\n    position: absolute;\n    top: -9999px;\n    left: -9999px;\n    visibility: hidden;\n  }\n\n  width: 100%;\n\n  &[size=\"small\"] {\n    --height: #{$formInputHeightSmall};\n  }\n\n  /* Filled */\n\n  &[is-filled]:not([is-filled=\"false\"]) {\n    --button-right-color: #{$colorPrimary70};\n    --hover-button-right-color: #{$colorPrimary70};\n    --focus-button-right-color: #{$formFocusColor};\n  }\n\n  /* Invalid */\n\n  &[is-invalid] {\n    --color: #{$colorError60};\n    --border-color: #{$colorError60};\n    --background-color: #{$colorWhite};\n    --label-color: #{$colorError60};\n    --placeholder-color: #{$colorError60};\n    --button-right-color: #{$colorError60};\n\n    --hover-color: #{$colorError60};\n    --hover-border-color: #{$colorError60};\n    --hover-background-color: #{$colorWhite};\n    --hover-button-right-color: #{$colorError60};\n\n    --focus-color: #{$colorError60};\n    --focus-border-color: #{$colorError60};\n    --focus-background-color: #{$colorWhite};\n    --focus-button-right-color: #{$colorError60};\n  }\n\n  &[readonly]:not([readonly=\"false\"]),\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$formDisabledColor};\n    --border-color: #{$formDisabledBorderColor};\n    --background-color: #{$formDisabledBackgroundColor};\n    --label-color: #{$formDisabledColor};\n    --placeholder-color: #{$formDisabledColor};\n    --description-color: #{$formDisabledColor};\n    --button-right-color: #{$colorGrey70};\n\n    --hover-color: #{$formDisabledColor};\n    --hover-border-color: #{$formDisabledBorderColor};\n    --hover-background-color: #{$formDisabledBackgroundColor};\n    --hover-button-right-color: #{$colorGrey70};\n\n    --focus-color: #{$formDisabledColor};\n    --focus-border-color: #{$formDisabledBorderColor};\n    --focus-background-color: #{$formDisabledBackgroundColor};\n    --focus-button-right-color: #{$colorGrey70};\n  }\n\n  /* Internal (Hover / Focus) */\n\n  &:is(:has(.stzh-input__input:hover)) {\n    --button-right-color: var(--hover-button-right-color);\n  }\n\n  &:is(:has(.stzh-input__input:focus)) {\n    --button-right-color: var(--focus-button-right-color);\n  }\n}\n\n:host ::slotted([slot=\"button-right\"]),\n.stzh-input__button-right {\n  position: absolute;\n  top: 0px;\n  right: 0px;\n}\n\n:host ::slotted(stzh-popover[slot=\"button-right\"]),\n:host ::slotted([slot=\"button-right\"]) stzh-popover {\n  display: block;\n}\n\n:host ::slotted(stzh-button[slot=\"button-right\"]),\n:host ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button,\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button[disabled]:not([disabled=\"false\"]),\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger stzh-button,\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger stzh-button[disabled]:not([disabled=\"false\"]),\n.stzh-input__button-right,\n.stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n  --color: var(--button-right-color);\n  --background-color: transparent;\n  --border-color: transparent;\n\n  --hover-color: var(--button-right-color);\n  --hover-background-color: transparent;\n  --hover-border-color: transparent;\n}\n\n// :host ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n// :host ::slotted([slot=\"button-right\"]) stzh-button[disabled]:not([disabled=\"false\"]),\n// .stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n//   --hover-color: #{$colorGrey80};\n// }\n\n:host ::slotted(stzh-button[slot=\"button-right\"][size=\"default\"][icon-only]:not([icon-only=\"false\"])),\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n.stzh-input__button-right[size=\"default\"][icon-only]:not([icon-only=\"false\"]) {\n  --icon-size: #{iconSize('medium')};\n}\n\n.stzh-input {\n\t@include input-description;\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: 2px solid var(--border-color);\n    transition-property: color, border-color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n    border-radius: var(--border-radius);\n    padding-top: var(--padding-top);\n    padding-bottom: var(--padding-bottom);\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n    margin: 0;\n    width: 100%;\n    color: var(--color);\n    background-color: var(--background-color);\n    appearance: none;\n    text-align: var(--text-align);\n\n    @include placeholder {\n      color: var(--placeholder-color);\n    }\n\n    &:hover {\n      color: var(--hover-color);\n      border-color: var(--hover-border-color);\n      background-color: var(--hover-background-color);\n    }\n\n    &:focus {\n      color: var(--focus-color);\n      border-color: var(--focus-border-color);\n      background-color: var(--focus-background-color);\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: var(--height);\n    }\n\n    /* Textarea */\n\n    &--textarea {\n      min-height: var(--height);\n      resize: vertical;\n    }\n  }\n\n  &__label {\n    @include font('heavy');\n    @include fontSize('micro');\n    @include truncate;\n    display: block;\n    color: var(--label-color);\n    width: auto;\n    max-width: 100%;\n    margin-bottom: space('xxxsmall');\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  &__marker {\n    @include fontSize('nano');\n    margin-left: calc(-0.25em + #{space('xsmall')});\n  }\n\n  /* Clearable / Search input / Password  */\n\n  &--type-password#{&}--is-not-clearable &__button-right,\n  &--type-password#{&}--is-not-filled &__button-right,\n  &--type-password#{&}--is-readonly &__button-right,\n  &--type-password#{&}--is-disabled &__button-right,\n  &--type-search#{&}--is-not-clearable &__button-right,\n  &--type-search#{&}--is-not-filled &__button-right,\n  &--type-search#{&}--is-readonly &__button-right,\n  &--type-search#{&}--is-disabled &__button-right {\n    pointer-events: none;\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: var(--height);\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 &__input {\n    @include fontSize('micro');\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 &__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\n  &--has-label-hidden &__label {\n    @include visuallyhidden;\n  }\n\n  /* Readonly / Disabled */\n\n  &--is-readonly &__input,\n  &--is-disabled &__input,\n  &--is-readonly &__label,\n  &--is-disabled &__label {\n    cursor: not-allowed;\n  }\n\n  // &--is-readonly &__label,\n  // &--is-disabled &__label {\n  //   &::before {\n  //     background: transparent;\n  //   }\n  // }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  Event,\n  EventEmitter,\n  State,\n  Element,\n  h,\n  Watch,\n  Listen,\n} from \"@stencil/core\";\n\nimport {\n  StzhInputChangeEvent,\n  StzhInputChangedEvent,\n  StzhInputFocusEvent,\n  StzhInputBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { 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 description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\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({ reflect: true }) type: \"text\" | \"search\" | \"password\" | \"email\" | \"url\" | \"tel\" | \"number\" | \"hidden\" = \"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  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: 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  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: 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  /** Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: 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  /** Input change event */\n  @Event() stzhChange: EventEmitter<StzhInputChangeEvent>;\n\n  /** Input changed event */\n  @Event() stzhChanged: EventEmitter<StzhInputChangedEvent>;\n\n  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhInputFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhInputBlurEvent>;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\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\n  @Watch(\"type\")\n  typeWatcher(newValue: string) {\n    const types = [\n      \"text\", \"search\", \"password\", \"email\", \"url\", \"tel\", \"number\", \"hidden\"\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  private renderPromiseResolve: (value?: unknown) => void;\n\n  private waitForNextRender() {\n    return new Promise(resolve => this.renderPromiseResolve = resolve);\n  }\n\n  private onClearClick = async (event: MouseEvent) => {\n    this.value = \"\";\n    this.input.focus();\n\n    await this.waitForNextRender();\n\n    this.stzhChange.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value\n    });\n\n    this.stzhChanged.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value\n    });\n  }\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n    // we also update value, since render doesn't get executed sometimes\n    this.input.value = this.defaultValue;\n\n    // TODO: check if we need own reset event or trigger the change event\n    // (custom browser behaviour doesn't send change event, when reset is executed)\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 onChange = (event: InputEvent) => {\n    this.value = this.input.value;\n\n    this.stzhChanged.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value\n    });\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.input.focus();\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        onChange={this.onChange}\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        defaultValue={this.defaultValue}\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        onChange={this.onChange}\n        onInput={this.onInput}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n      />\n    );\n  }\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\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    this.defaultValue = this.defaultValue || this.value;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.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?.length > 0;\n\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 || errorUsed,\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-not-filled\": !this.filled,\n      \"stzh-input--is-clearable\": this.clearable,\n      \"stzh-input--is-not-clearable\": !this.clearable,\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\n        is-invalid={this.invalid || errorUsed}\n        tabindex={this.disabled ? null : \"-1\"}\n        onFocus={this.onRootFocus}\n        is-filled={this.filled}\n      >\n        <div class={classes}>\n          <label class=\"stzh-input__label\" htmlFor={this.inputId}>\n            {this.label ? this.label : <slot></slot>}\n            {!this.hideOptional &&\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          <div class=\"stzh-input__field-wrapper\">\n            {this.multiline ? this.renderTextarea() : this.renderInput()}\n            {(this.clearable || this.type === \"search\" || this.type === \"password\")\n              ?\n              ((!this.clearable || this.disabled || this.readonly || !this.filled)\n                && (this.type === \"search\" || this.type === \"password\")\n                ?\n                <stzh-button\n                  class=\"stzh-input__button-right\"\n                  icon={this.type === \"search\" ? \"search\" : \"view\"}\n                  size={this.size}\n                  iconOnly={true}\n                  disabled={true}\n                ></stzh-button>\n                :\n                this.filled\n                  ?\n                  <stzh-button\n                    class=\"stzh-input__button-right\"\n                    icon=\"close\"\n                    size={this.size}\n                    iconOnly={true}\n                    onClick={this.onClearClick}\n                    a11yLabel={this.localization.$globals.clearButtonLabel}\n                    aria-controls={this.inputId}\n                  ></stzh-button>\n                  :\n                  <slot name=\"button-right\"></slot>\n              )\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            descriptionLongTitle={this.descriptionLongTitle}\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/stzh-components/p-f692c5d0.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as e,a,g as s}from"./p-c7bfac7a.js";import{s as i,h as r}from"./p-7e304ea3.js";import{m as h}from"./p-10e2901a.js";import"./p-9b063923.js";const l=".sc-stzh-pagetitle-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-pagetitle-h{display:none}.sc-stzh-pagetitle-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagetitle-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagetitle-h *.sc-stzh-pagetitle,.sc-stzh-pagetitle-h *.sc-stzh-pagetitle::before,.sc-stzh-pagetitle-h *.sc-stzh-pagetitle::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-pagetitle-h .has-focus.sc-stzh-pagetitle{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pagetitle-h .stzh-fylingfocus-focused.sc-stzh-pagetitle{outline-style:none !important}.sc-stzh-pagetitle-h .stzh-fylingfocus-focused.sc-stzh-pagetitle::-moz-focus-inner{border:0 !important}.sc-stzh-pagetitle-h{--background-color:var(--stzh-pagetitle-background-color);--image-background-color:var(--stzh-ratio-background-color)}.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=image]{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}[background=default].sc-stzh-pagetitle-h{--stzh-readspeaker-background-color:var(--background-color);--stzh-readspeaker-audio-track-progress-background-color:var(--stzh-color-white)}[background=transparent].sc-stzh-pagetitle-h{--background-color:transparent}.stzh-pagetitle.sc-stzh-pagetitle{background-color:var(--background-color)}.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:auto;margin-right:auto;max-width:84.25rem}}.stzh-pagetitle__wrapper.sc-stzh-pagetitle{position:relative;display:grid}.stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-xxlarge);display:flex;flex-direction:column;justify-content:center}@media screen and (min-width: 600px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xbig)}}.stzh-pagetitle__image-wrapper.sc-stzh-pagetitle{position:relative}.stzh-pagetitle__ratio.sc-stzh-pagetitle{--background-color:var(--image-background-color)}.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{background-color:var(--image-background-color);position:absolute;inset:0;height:100%;margin-left:calc(1.25rem / -1);margin-right:calc(1.25rem / -1)}@media screen and (min-width: 600px){.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{margin-left:calc(2rem / -1);margin-right:calc(2rem / -1)}}@media screen and (min-width: 900px){.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{margin-left:0;margin-right:0;width:calc(100% + 2.5rem)}}@media screen and (min-width: 1260px){.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{width:calc(100% + 4rem)}}@media screen and (min-width: 1600px){.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{width:calc(100% + ((100rem - 84.25rem) / 2))}}.stzh-pagetitle__meta.sc-stzh-pagetitle{display:flex;flex-direction:column-reverse;row-gap:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-pagetitle__meta.sc-stzh-pagetitle{flex-direction:row}}.stzh-pagetitle__tag.sc-stzh-pagetitle:not(:empty){margin-right:auto}@media screen and (min-width: 600px) and (max-width: 899px){.stzh-pagetitle__readspeaker.sc-stzh-pagetitle{--stzh-readspeaker-dropdown-position:relative;--stzh-readspeaker-dropdown-top:auto}}.stzh-pagetitle__dateline.sc-stzh-pagetitle{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);margin-top:var(--stzh-space-medium);color:var(--stzh-color-primary70);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-pagetitle__dateline.sc-stzh-pagetitle{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pagetitle__dateline.sc-stzh-pagetitle{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle__dateline.sc-stzh-pagetitle{margin-top:var(--stzh-space-xxlarge)}}.stzh-pagetitle__lead.sc-stzh-pagetitle{--stzh-base-lead-color:var(--stzh-heading-color)}.stzh-pagetitle__heading.sc-stzh-pagetitle:not(:empty)+.stzh-pagetitle__lead.sc-stzh-pagetitle:not(:empty){margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-pagetitle__heading.sc-stzh-pagetitle:not(:empty)+.stzh-pagetitle__lead.sc-stzh-pagetitle:not(:empty){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle__heading.sc-stzh-pagetitle:not(:empty)+.stzh-pagetitle__lead.sc-stzh-pagetitle:not(:empty){margin-top:var(--stzh-space-xxxlarge)}}.stzh-pagetitle__disturber.sc-stzh-pagetitle{z-index:var(--stzh-z-index-sticky);position:fixed;left:0;right:0;bottom:0}@media screen and (min-width: 900px){.stzh-pagetitle__disturber.sc-stzh-pagetitle{z-index:initial;position:absolute;width:calc(((100% - 7 * var(--stzh-grid-gutter-medium)) / 8 * 3) + 2 * var(--stzh-grid-gutter-medium));left:auto;bottom:calc((var(--stzh-space-big) - var(--stzh-space-xlarge)) / -1)}}@media screen and (min-width: 1260px){.stzh-pagetitle__disturber.sc-stzh-pagetitle{width:calc(((100% - 11 * var(--stzh-grid-gutter-large)) / 12 * 4) + 3 * var(--stzh-grid-gutter-large));bottom:calc(var(--stzh-space-huge) / -1)}}@media screen and (min-width: 1600px){.stzh-pagetitle__disturber.sc-stzh-pagetitle{width:calc(((100% - 11 * var(--stzh-grid-gutter-ultra)) / 12 * 4) + 3 * var(--stzh-grid-gutter-ultra))}}.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__ratio.sc-stzh-pagetitle{display:none}.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr))}@media screen and (min-width: 600px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{grid-template-columns:repeat(12, minmax(0, 1fr))}}.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__meta.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__dateline.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__heading.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__lead.sc-stzh-pagetitle{grid-column:1/span 4}@media screen and (min-width: 900px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__meta.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__dateline.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__heading.sc-stzh-pagetitle{grid-column:1/span 8}}@media screen and (min-width: 900px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__lead.sc-stzh-pagetitle{grid-column:1/span 6}}@media screen and (min-width: 1260px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__lead.sc-stzh-pagetitle{grid-column:1/span 7}}@media screen and (min-width: 900px){.stzh-pagetitle--has-image.sc-stzh-pagetitle .stzh-pagetitle__wrapper.sc-stzh-pagetitle{grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--stzh-space-xxlarge)}}.stzh-pagetitle--has-meta.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pagetitle--has-meta.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pagetitle--has-meta.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle--has-meta.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle--has-tag.sc-stzh-pagetitle .stzh-pagetitle__readspeaker.sc-stzh-pagetitle{--stzh-readspeaker-dropdown-left:auto;--stzh-readspeaker-dropdown-right:0px;--stzh-readspeaker-dropdown-settings-left:auto;--stzh-readspeaker-dropdown-settings-right:0px}}.stzh-pagetitle--background-default.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{--stzh-selection-background-color:var(--stzh-color-white)}.stzh-pagetitle--background-transparent.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-pagetitle--background-transparent.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle--background-transparent.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxxxlarge)}}";const g=class{constructor(e){t(this,e);this.isDisturberOpen=false;this.update=()=>{var t;if(!this.disturberElement){return}const e=h("medium").matches;const a=((t=this.disturberElement)===null||t===void 0?void 0:t.offsetHeight)||0;const s=a&&this.isDisturberOpen;const i=s&&!e;document.documentElement.style.setProperty("--stzh-pagetitle-disturber-height",s?`${a}px`:"0px");document.documentElement.style.setProperty("--stzh-pagetitle-disturber-stuck-height",i?`${a}px`:"0px");document.documentElement.style.setProperty("--stzh-pagetitle-disturber-is-stuck",i?"1":"0");document.documentElement.style.setProperty("--stzh-pagetitle-disturber-is-not-stuck",i?"0":"1")};this.init=()=>{const t=this.element.querySelector('stzh-heading[slot="heading"], [slot="heading"] stzh-heading');const e=this.element.querySelector('stzh-disturber[slot="disturber"], [slot="disturber"] stzh-disturber');const a=this.element.querySelectorAll('stzh-text[slot="lead"], [slot="lead"] stzh-text');const s=this.element.querySelector('stzh-show[slot="disturber"], [slot="disturber"] stzh-show');const r=this.element.querySelector('[slot="readspeaker"] stzh-button');const h=this.element.querySelector('stzh-tag[slot="tag"], [slot="tag"] stzh-tag');if(t){i(t,{curve:"hero",level:"1"})}if(e){i(e,{initialOpenAnimation:true})}if(s){i(s,{mikro:true})}if(h){i(h,{type:"secondary",size:"large",nonInteractive:true})}if(r){i(r,{variant:"tertiary-plain",noPaddingLeft:true,noPaddingRight:true,size:"small",sizeMedium:"tiny",buttonAccesskey:"L"})}a.forEach((t=>{i(t,{lead:true})}))};this.background="default";this.dateline=undefined}handleResize(){if(this.debounceResize){window.cancelAnimationFrame(this.debounceResize)}this.debounceResize=requestAnimationFrame(this.update)}handleStzhOpen(t){if(t.detail.component==="stzh-disturber"){this.isDisturberOpen=true;requestAnimationFrame((()=>{requestAnimationFrame(this.update)}))}}handleStzhClose(t){if(t.detail.component==="stzh-disturber"){this.isDisturberOpen=false;requestAnimationFrame((()=>{requestAnimationFrame(this.update)}))}}componentDidRender(){requestAnimationFrame((()=>{requestAnimationFrame(this.update)}))}connectedCallback(){this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){var t;(t=this.observer)===null||t===void 0?void 0:t.disconnect()}render(){const t=r(this.element,"image");const s=r(this.element,"lead");const i=r(this.element,"tag");const h=r(this.element,"readspeaker");const l={"stzh-pagetitle":true,"stzh-pagetitle--has-image":t,"stzh-pagetitle--has-no-image":!t,"stzh-pagetitle--has-lead":s,"stzh-pagetitle--has-tag":i,"stzh-pagetitle--has-meta":i||h,[`stzh-pagetitle--background-${this.background}`]:!!this.background};return e(a,null,e("div",{class:l},e("div",{class:"stzh-pagetitle__container"},e("div",{class:"stzh-pagetitle__wrapper"},e("div",{class:"stzh-pagetitle__text"},e("div",{class:"stzh-pagetitle__meta"},e("div",{class:"stzh-pagetitle__tag"},e("slot",{name:"tag"})),e("div",{class:"stzh-pagetitle__readspeaker"},e("slot",{name:"readspeaker"}))),this.dateline&&e("div",{class:"stzh-pagetitle__dateline"},this.dateline),e("div",{class:"stzh-pagetitle__heading"},e("slot",{name:"heading"})),e("div",{class:"stzh-pagetitle__lead"},e("slot",{name:"lead"}))),e("div",{class:"stzh-pagetitle__image-wrapper"},e("stzh-ratio",{ratio:"16:9",ratioSmall:"3:2",ratioMedium:"16:9",class:"stzh-pagetitle__ratio"}),e("div",{class:"stzh-pagetitle__image-inner-wrapper"},e("slot",{name:"image"}))),e("div",{class:"stzh-pagetitle__disturber",ref:t=>this.disturberElement=t},e("slot",{name:"disturber"}))))))}get element(){return s(this)}};g.style=l;export{g as stzh_pagetitle};
-//# sourceMappingURL=p-f692c5d0.entry.js.map

package/dist/stzh-components/p-f692c5d0.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhPagetitleCss","StzhPagetitle","this","isDisturberOpen","update","disturberElement","isMedium","media","matches","disturberHeight","_a","offsetHeight","hasDisturber","isStuck","document","documentElement","style","setProperty","init","heading","element","querySelector","disturber","leads","querySelectorAll","show","readspeakerButton","tag","setPropsIfNull","curve","level","initialOpenAnimation","mikro","type","size","nonInteractive","variant","noPaddingLeft","noPaddingRight","sizeMedium","buttonAccesskey","forEach","lead","handleResize","debounceResize","window","cancelAnimationFrame","requestAnimationFrame","handleStzhOpen","event","detail","component","handleStzhClose","componentDidRender","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","imageSlotUsed","hasSlot","leadSlotUsed","tagSlotUsed","readspeakerSlotUsed","classes","background","h","Host","class","name","dateline","ratio","ratioSmall","ratioMedium","ref","el"],"sources":["src/components/stzh-pagetitle/stzh-pagetitle.scss?tag=stzh-pagetitle&encapsulation=scoped","src/components/stzh-pagetitle/stzh-pagetitle.tsx"],"sourcesContent":["/**\n * @prop --background-color: Background color\n * @prop --image-background-color: Background color of image\n *\n * @prop --stzh-pagetitle-disturber-height: Global: Disturber height\n * @prop --stzh-pagetitle-disturber-stuck-height: Global: Disturber height when sticky (below medium breakpoint)\n * @prop --stzh-pagetitle-disturber-is-stuck: **Global**: Whether disturber is currently sticky (readonly variable on `<html>`)\n * @prop --stzh-pagetitle-disturber-is-not-stuck: **Global**: Whether disturber is currently not sticky (readonly variable on `<html>`)\n */\n\n:host {\n  --background-color: #{$pagetitleBackgroundColor};\n  --image-background-color: #{$ratioBackgroundColor};\n\n  ::slotted([slot=\"image\"]) {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  &[background=\"default\"] {\n    --stzh-readspeaker-background-color: var(--background-color);\n    --stzh-readspeaker-audio-track-progress-background-color: #{$colorWhite};\n  }\n\n  &[background=\"transparent\"] {\n    --background-color: transparent;\n  }\n}\n\n.stzh-pagetitle {\n  background-color: var(--background-color);\n\n  &__container {\n    @include container;\n  }\n\n  &__wrapper {\n    position: relative;\n    display: grid;\n  }\n\n  &__text {\n    @include spaceCurve('padding-top', 'big');\n    @include spaceCurve('padding-bottom', 'big');\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &__image-wrapper {\n    position: relative;\n  }\n\n  &__ratio {\n    --background-color: var(--image-background-color);\n  }\n\n  &__image-inner-wrapper {\n    background-color: var(--image-background-color);\n    position: absolute;\n    inset: 0;\n    height: 100%;\n    margin-left: calc(#{$containerMargin} / -1);\n    margin-right: calc(#{$containerMargin} / -1);\n\n    @include mq($from: small) {\n      margin-left: calc(#{$containerMarginSmall} / -1);\n      margin-right: calc(#{$containerMarginSmall} / -1);\n    }\n\n    @include mq($from: medium) {\n      margin-left: 0;\n      margin-right: 0;\n      width: calc(100% + #{$containerMarginMedium});\n    }\n\n    @include mq($from: large) {\n      width: calc(100% + #{$containerMarginLarge});\n    }\n\n    @include mq($from: ultra) {\n      width: calc(100% + ((#{map-get($breakpoints, 'ultra')} - #{$containerMaxWidth}) / 2));\n    }\n  }\n\n  &__meta {\n    display: flex;\n    flex-direction: column-reverse;\n    row-gap: space('xsmall');\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  &__tag {\n    &:not(:empty) {\n      margin-right: auto;\n    }\n  }\n\n  &__readspeaker {\n    @include mq($from: small, $to: medium) {\n      --stzh-readspeaker-dropdown-position: relative;\n      --stzh-readspeaker-dropdown-top: auto;\n    }\n  }\n\n  &__dateline {\n    @include fontSize('milli');\n    @include spaceCurve('margin-top', 'regular');\n    color: $colorPrimary70;\n    margin-bottom: space('xsmall');\n  }\n\n  &__lead {\n    --stzh-base-lead-color: #{$headingColor};\n  }\n\n  &__heading:not(:empty) + &__lead:not(:empty) {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  &__disturber {\n    z-index: $zIndexSticky;\n    position: fixed;\n    left: 0;\n    right: 0;\n    bottom: 0;\n\n    @include mq($from: medium) {\n      z-index: initial;\n      position: absolute;\n      width: calc(((100% - 7 * #{$gridGutterMedium}) / 8 * 3) + 2 * #{$gridGutterMedium});\n      left: auto;\n      bottom: calc((#{spaceCurveValue('huge', 'medium')} - #{spaceCurveValue('regular', 'medium')}) / -1);\n    }\n\n    @include mq($from: large) {\n      width: calc(((100% - 11 * #{$gridGutterLarge}) / 12 * 4) + 3 * #{$gridGutterLarge});\n      bottom: calc(#{spaceCurveValue('huge', 'large')} / -1);\n    }\n\n    @include mq($from: ultra) {\n      width: calc(((100% - 11 * #{$gridGutterUltra}) / 12 * 4) + 3 * #{$gridGutterUltra});\n    }\n  }\n\n  /* Has no image variant */\n\n  &--has-no-image &__ratio {\n    display: none;\n  }\n\n  &--has-no-image &__text {\n    @include grid;\n  }\n\n  &--has-no-image &__meta,\n  &--has-no-image &__dateline,\n  &--has-no-image &__heading,\n  &--has-no-image &__lead {\n    grid-column: 1 / span 4;\n  }\n\n  &--has-no-image &__meta,\n  &--has-no-image &__dateline,\n  &--has-no-image &__heading {\n    @include mq($from: medium) {\n      grid-column: 1 / span 8;\n    }\n  }\n\n  &--has-no-image &__lead {\n    @include mq($from: medium) {\n      grid-column: 1 / span 6;\n    }\n\n    @include mq($from: large) {\n      grid-column: 1 / span 7;\n    }\n  }\n\n  /* Has image variant */\n\n  &--has-image &__wrapper {\n    @include mq($from: medium) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      gap: space('xxlarge');\n    }\n  }\n\n  /* Has meta */\n\n  &--has-meta &__text {\n    @include spaceCurve('padding-top', 'regular');\n  }\n\n  /* Has tag */\n\n  &--has-tag &__readspeaker {\n    @include mq($from: medium) {\n      --stzh-readspeaker-dropdown-left: auto;\n      --stzh-readspeaker-dropdown-right: 0px;\n\n      --stzh-readspeaker-dropdown-settings-left: auto;\n      --stzh-readspeaker-dropdown-settings-right: 0px;\n    }\n  }\n\n  /* Default background */\n\n  &--background-default &__text {\n    --stzh-selection-background-color: #{$colorWhite};\n  }\n\n  /* Transparent background */\n\n  &--background-transparent &__text {\n    @include spaceCurve('padding-bottom', 'large');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Listen,\n} from \"@stencil/core\";\n\nimport {\n  StzhDisturberOpenEvent,\n  StzhDisturberCloseEvent\n} from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\n\n/**\n * @slot heading - Slot for `stzh-heading` element\n * @slot image - Slot for `stzh-figure` or `img` element\n * @slot lead - Slot for `stzh-text` element\n * @slot tag - Slot for `stzh-tag` element\n * @slot readspeaker - Slot for `stzh-readspeaker` element\n */\n@Component({\n  tag: \"stzh-pagetitle\",\n  styleUrl: \"stzh-pagetitle.scss\",\n  scoped: true\n})\nexport class StzhPagetitle {\n  @Element() element: HTMLStzhPagetitleElement;\n\n  /** Background color */\n  @Prop({ reflect: true }) background: \"default\" | \"transparent\" = \"default\";\n\n  /** Dateline */\n  @Prop() dateline: string;\n\n  @Listen(\"resize\", { target: \"window\" })\n  handleResize() {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.update);\n  }\n\n  @Listen(\"stzhOpen\")\n  handleStzhOpen(event: CustomEvent<StzhDisturberOpenEvent>) {\n    if (event.detail.component === \"stzh-disturber\") {\n      this.isDisturberOpen = true;\n      requestAnimationFrame(() => {\n        requestAnimationFrame(this.update);\n      });\n    }\n  }\n\n  @Listen(\"stzhClose\")\n  handleStzhClose(event: CustomEvent<StzhDisturberCloseEvent>) {\n    if (event.detail.component === \"stzh-disturber\") {\n      this.isDisturberOpen = false;\n      requestAnimationFrame(() => {\n        requestAnimationFrame(this.update);\n      });\n    }\n  }\n\n  private observer: MutationObserver;\n  private debounceResize: number;\n  private disturberElement: HTMLDivElement;\n  private isDisturberOpen: boolean = false;\n\n  private update = () => {\n    if (!this.disturberElement) {\n      return;\n    }\n\n    const isMedium = media(\"medium\").matches;\n    const disturberHeight = this.disturberElement?.offsetHeight || 0;\n    const hasDisturber = disturberHeight && this.isDisturberOpen;\n    const isStuck = hasDisturber && !isMedium;\n\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-height\", hasDisturber ? `${disturberHeight}px` : \"0px\");\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-stuck-height\", isStuck ? `${disturberHeight}px` : \"0px\");\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-is-stuck\", isStuck ? \"1\" : \"0\");\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-is-not-stuck\", isStuck ? \"0\" : \"1\");\n\n    // document.documentElement.classList.toggle(\"stzh-pagetitle-disturber-is-stuck\", isStuck);\n  }\n\n  private init = () => {\n    const heading = this.element.querySelector('stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading');\n    const disturber = this.element.querySelector('stzh-disturber[slot=\"disturber\"], [slot=\"disturber\"] stzh-disturber');\n    const leads = this.element.querySelectorAll('stzh-text[slot=\"lead\"], [slot=\"lead\"] stzh-text');\n    const show = this.element.querySelector('stzh-show[slot=\"disturber\"], [slot=\"disturber\"] stzh-show');\n    const readspeakerButton = this.element.querySelector('[slot=\"readspeaker\"] stzh-button');\n    const tag = this.element.querySelector('stzh-tag[slot=\"tag\"], [slot=\"tag\"] stzh-tag');\n\n    if (heading) {\n      setPropsIfNull(heading, {\n        curve: \"hero\",\n        level: \"1\"\n      } as HTMLStzhHeadingElement);\n    }\n\n    if (disturber) {\n      setPropsIfNull(disturber, {\n        initialOpenAnimation: true\n      } as HTMLStzhDisturberElement);\n    }\n\n    if (show) {\n      setPropsIfNull(show, {\n        mikro: true\n      } as HTMLStzhShowElement);\n    }\n\n    if (tag) {\n      setPropsIfNull(tag, {\n        type: \"secondary\",\n        size: \"large\",\n        nonInteractive: true\n      } as HTMLStzhTagElement);\n    }\n\n    if (readspeakerButton) {\n      setPropsIfNull(readspeakerButton, {\n        variant: \"tertiary-plain\",\n        noPaddingLeft: true,\n        noPaddingRight: true,\n        size: \"small\",\n        sizeMedium: \"tiny\",\n        buttonAccesskey: \"L\"\n      } as HTMLStzhButtonElement);\n    }\n\n    leads.forEach((lead) => {\n      setPropsIfNull(lead, {\n        lead: true\n      } as HTMLStzhTextElement)\n    });\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      requestAnimationFrame(this.update);\n    });\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n  }\n\n  render() {\n    const imageSlotUsed = hasSlot(this.element, 'image');\n    const leadSlotUsed = hasSlot(this.element, 'lead');\n    const tagSlotUsed = hasSlot(this.element, 'tag');\n    const readspeakerSlotUsed = hasSlot(this.element, 'readspeaker');\n\n    const classes = {\n      \"stzh-pagetitle\": true,\n      \"stzh-pagetitle--has-image\": imageSlotUsed,\n      \"stzh-pagetitle--has-no-image\": !imageSlotUsed,\n      \"stzh-pagetitle--has-lead\": leadSlotUsed,\n      \"stzh-pagetitle--has-tag\": tagSlotUsed,\n      \"stzh-pagetitle--has-meta\": tagSlotUsed || readspeakerSlotUsed,\n      [`stzh-pagetitle--background-${this.background}`]: !!this.background,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-pagetitle__container\">\n            <div class=\"stzh-pagetitle__wrapper\">\n              <div class=\"stzh-pagetitle__text\">\n\n                <div class=\"stzh-pagetitle__meta\">\n                  <div class=\"stzh-pagetitle__tag\">\n                    <slot name=\"tag\"></slot>\n                  </div>\n\n                  <div class=\"stzh-pagetitle__readspeaker\">\n                    <slot name=\"readspeaker\"></slot>\n                  </div>\n                </div>\n\n                {this.dateline &&\n                  <div class=\"stzh-pagetitle__dateline\">\n                    {this.dateline}\n                  </div>\n                }\n\n                <div class=\"stzh-pagetitle__heading\">\n                  <slot name=\"heading\"></slot>\n                </div>\n\n                <div class=\"stzh-pagetitle__lead\">\n                  <slot name=\"lead\"></slot>\n                </div>\n\n              </div>\n\n              <div class=\"stzh-pagetitle__image-wrapper\">\n                <stzh-ratio\n                  ratio={\"16:9\"}\n                  ratioSmall={\"3:2\"}\n                  ratioMedium={\"16:9\"}\n                  class=\"stzh-pagetitle__ratio\"\n                ></stzh-ratio>\n                <div class=\"stzh-pagetitle__image-inner-wrapper\">\n                  <slot name=\"image\"></slot>\n                </div>\n              </div>\n\n              <div\n                class=\"stzh-pagetitle__disturber\"\n                ref={(el) => (this.disturberElement = el as HTMLDivElement)}\n              >\n                <slot name=\"disturber\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-f7979f2a.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as e,a as n,g as s}from"./p-c7bfac7a.js";const o='.sc-stzh-content-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-content-h{display:none}.sc-stzh-content-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-content-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-content-h *.sc-stzh-content,.sc-stzh-content-h *.sc-stzh-content::before,.sc-stzh-content-h *.sc-stzh-content::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-content-h .has-focus.sc-stzh-content{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-content-h .stzh-fylingfocus-focused.sc-stzh-content{outline-style:none !important}.sc-stzh-content-h .stzh-fylingfocus-focused.sc-stzh-content::-moz-focus-inner{border:0 !important}.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, "content content content content")}@media screen and (min-width: 900px){.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, "content content content content content content content content")}}@media screen and (min-width: 1260px){.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, "aside-left aside-left content content content content content content content content aside-right aside-right")}}@media screen and (min-width: 1260px){[variant=shifted].sc-stzh-content-h{--grid-template-areas:var(--stzh-content-shifted-grid-template-areas, var(--stzh-content-grid-template-areas, "aside-left aside-left content content content content content content content content content aside-right"))}}@media screen and (min-width: 1260px){[variant=full].sc-stzh-content-h{--grid-template-areas:var(--stzh-content-full-grid-template-areas, var(--stzh-content-grid-template-areas, "content content content content content content content content content content content content"))}}.sc-stzh-content-h .sc-stzh-content-s>*{grid-area:content}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>*{--stzh-cta-small-grid-template-areas:"cta cta cta ."}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>*{--stzh-cta-grid-template-areas:"cta cta cta cta cta . . .";--stzh-cta-small-grid-template-areas:"cta cta cta cta . . . ."}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>*{--stzh-text-display:grid;--stzh-text-grid-template-areas:"text text text .";--stzh-richtext-display:grid;--stzh-richtext-grid-template-areas:"text text text ."}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>*{--stzh-text-grid-template-areas:"text text text text text text . .";--stzh-richtext-grid-template-areas:"text text text text text text . ."}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>*{--stzh-datalist-grid-template-areas:"list list list .";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-small) - 2 * var(--stzh-grid-gutter-small)) / 3 * 4) + 3 * var(--stzh-grid-gutter-small) + var(--stzh-grid-gutter-small))}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>*{--stzh-datalist-grid-template-areas:"list list list list list . . .";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-medium) - 4 * var(--stzh-grid-gutter-medium)) / 5 * 8) + 7 * var(--stzh-grid-gutter-medium) + var(--stzh-grid-gutter-medium))}}@media screen and (min-width: 1260px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>*{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-large) - 4 * var(--stzh-grid-gutter-large)) / 5 * 8) + 7 * var(--stzh-grid-gutter-large) + var(--stzh-grid-gutter-large))}}@media screen and (min-width: 1600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>*{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-ultra) - 4 * var(--stzh-grid-gutter-ultra)) / 5 * 8) + 7 * var(--stzh-grid-gutter-ultra) + var(--stzh-grid-gutter-ultra))}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-eventdata{--stzh-text-display:block;--stzh-richtext-display:block}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-overlay{--stzh-cta-small-grid-template-areas:"cta cta cta cta"}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-overlay{--stzh-cta-grid-template-areas:"cta cta cta cta cta cta cta cta";--stzh-cta-small-grid-template-areas:"cta cta cta cta cta cta cta cta"}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-overlay{--stzh-text-display:block;--stzh-richtext-display:block}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-grid-template-areas:"list list list list";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-small) - 2 * var(--stzh-grid-gutter-small)) / 4 * 4) + 3 * var(--stzh-grid-gutter-small) + var(--stzh-grid-gutter-small))}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-grid-template-areas:"list list list list list list list list";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-medium) - 4 * var(--stzh-grid-gutter-medium)) / 8 * 8) + 7 * var(--stzh-grid-gutter-medium) + var(--stzh-grid-gutter-medium))}}@media screen and (min-width: 1260px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-large) - 4 * var(--stzh-grid-gutter-large)) / 8 * 8) + 7 * var(--stzh-grid-gutter-large) + var(--stzh-grid-gutter-large))}}@media screen and (min-width: 1600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-ultra) - 4 * var(--stzh-grid-gutter-ultra)) / 8 * 8) + 7 * var(--stzh-grid-gutter-ultra) + var(--stzh-grid-gutter-ultra))}}.stzh-content.sc-stzh-content{--stzh-content-grid-template-areas:"content content content content content content content content content content content content";--stzh-content-shifted-grid-template-areas:"content content content content content content content content content content content content";--stzh-content-full-grid-template-areas:"content content content content content content content content content content content content";-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas)}@media screen and (min-width: 600px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-content.sc-stzh-content{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-content.sc-stzh-content{grid-template-columns:repeat(12, minmax(0, 1fr))}}';const a=class{constructor(e){t(this,e);this.variant="default";this.preventElementLayout=false}render(){const t={"stzh-content":true,[`stzh-content--${this.variant}`]:!!this.variant};return e(n,null,e("div",{class:t},e("slot",null)))}get element(){return s(this)}};a.style=o;export{a as stzh_content};
-//# sourceMappingURL=p-f7979f2a.entry.js.map

package/dist/stzh-components/p-faec0661.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhProgressbarCss","StzhProgressbar","this","setCurrentSteps","media","matches","stepsUltra","currentSteps","stepsLarge","stepsMedium","stepsSmall","steps","getItemData","_data","map","step","index","Object","assign","getItemAttributes","stepsWatcher","dataWatcher","newValue","JSON","parse","lastItemIndex","length","maxStepIndex","withinLastFewSteps","itemIndex","item","first","last","current","passed","dotted","hide","substract","componentWillLoad","data","localization","window","stzhComponents","utils","fetchTranslations","element","connectedCallback","addMediaChangeListener","disconnectedCallback","removeMediaChangeListener","render","classes","h","Host","style","toString","class","role","label","icon","disabled"],"sources":["src/components/stzh-progressbar/stzh-progressbar.scss?tag=stzh-progressbar&encapsulation=scoped","src/components/stzh-progressbar/stzh-progressbar.tsx"],"sourcesContent":[":host {\n  min-width: calc(var(--steps) * #{$progressbarItemDottedSize} * 2);\n\n  @include mq($from: small) {\n    min-width: calc(var(--steps) * #{$progressbarItemDottedSizeSmallUp} * 2);\n  }\n}\n\n.stzh-progressbar {\n  position: relative;\n\toverflow: hidden;\n\n  &__items {\n    display: flex;\n    flex-wrap: nowrap;\n  }\n\n  &__item {\n    /* flex the bullets to always have the same size */\n\t\tflex-grow: 1;\n\t\tflex-shrink: 1;\n\t\tflex-basis: 0;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Watch,\n  Method\n} from \"@stencil/core\";\n\nimport {\n  StzhProgressbarDataItem\n} from '../../index';\n\nimport { addMediaChangeListener, removeMediaChangeListener, media } from \"../../utils/media-utils\";\nimport { StzhProgressbarLocalizedText } from \"./stzh-progressbar.localization\"\n\n/**\n * @slot - Slot for any text content\n */\n@Component({\n  tag: \"stzh-progressbar\",\n  styleUrl: \"stzh-progressbar.scss\",\n  scoped: true\n})\nexport class StzhProgressbar {\n  /** Translation strings */\n  @Prop() localization: StzhProgressbarLocalizedText;\n\n  /**\n   * Step data (JSON array with objects that have `label` attribute and optional:\n   * - `disabled`, if step should be disabled\n   * - `icon`, if icon instead of step number should be displayed):\n   * - `analyticsId`, for Adobe Analytics, rendered as `s-object-id` (default is `label`)\n   *\n   * ```\n   * {\n   *   \"label\": \"Step Label\"\n   *   \"icon\": \"clock\",\n   *   \"disabled\": true\n   * }\n   * ```\n   */\n  @Prop() data: StzhProgressbarDataItem[] | string = [];\n  private _data: StzhProgressbarDataItem[];\n\n  /** Index of the item that be active */\n  @Prop() index: number = 0;\n\n  /** Number of steps to show below small breakpoint */\n  @Prop() steps: number = 5;\n\n  /** Number of steps to show above small breakpoint */\n  @Prop() stepsSmall: number = 6;\n\n  /** Number of steps to show above medium breakpoint */\n  @Prop() stepsMedium: number = 0;\n\n    /** Number of steps to show above large breakpoint */\n  @Prop() stepsLarge: number = 0;\n\n  /** Number of steps to show above ultra breakpoint */\n  @Prop() stepsUltra: number = 0;\n\n  @State() currentSteps: number;\n\n  @Element() element: HTMLStzhProgressbarElement;\n\n  /**\n   * Return infos about rendered progressbar items.\n   * Array of objects including: hide (whether step is hidden)\n   * / passed (whether step has been passed)\n   * / current (whether step is currently active)\n   * / dotted (whether step has dotted style active)\n   * / first|last (whether step is first or last)\n   * / label\n   */\n  @Method()\n  async getItemData() {\n    return this._data.map((step, index) => {\n      return {\n        ...step,\n        ...this.getItemAttributes(index)\n      }\n    });\n  }\n\n  @Watch(\"steps\")\n  @Watch(\"stepsSmall\")\n  @Watch(\"stepsMedium\")\n  @Watch(\"stepsLarge\")\n  @Watch(\"stepsUltra\")\n  stepsWatcher() {\n    this.setCurrentSteps();\n  }\n\n  @Watch(\"data\")\n  dataWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._data = JSON.parse(newValue);\n    }\n    else {\n      this._data = newValue;\n    }\n\n    this.lastItemIndex = this._data.length - 1;\n    this.maxStepIndex = this.currentSteps - 1;\n    this.withinLastFewSteps = this.index >= this._data.length - this.maxStepIndex;\n  }\n\n  private lastItemIndex: number;\n  private maxStepIndex: number;\n  private withinLastFewSteps: boolean;\n\n  private getItemAttributes(itemIndex: number): any {\n    const item = {} as HTMLStzhProgressbarItemElement;\n\n    item.step = itemIndex + 1;\n    item.first = itemIndex === 0;\n    item.last = itemIndex === this.lastItemIndex;\n    item.current = itemIndex === this.index;\n    item.passed = itemIndex < this.index;\n\n    // hide overflowings if more items than max steps in DOM\n    if (this._data.length > this.currentSteps) {\n      // add dots to last item if current index is below the last few items\n      if (itemIndex === this.lastItemIndex && !this.withinLastFewSteps) {\n        item.dotted = true;\n      }\n\n      if (this.index < 2) {\n        // hide overflowing items on the right\n        item.hide = itemIndex > this.maxStepIndex - 1 && itemIndex < this.lastItemIndex;\n      } else {\n        // add dots to first item if current item is third or above\n        if (itemIndex === 0) {\n          item.dotted = true;\n        }\n\n        let substract = this.index;\n\n        // if is within the last elements, calculate how much previous\n        // should be shown to stay on 5 visible elements\n        if (this.withinLastFewSteps) {\n          substract = this._data.length - this.maxStepIndex;\n        }\n\n        // hide overflowing items on left and right side\n        item.hide = itemIndex > 0 && itemIndex < substract\n          || itemIndex > this.index + (this.currentSteps - 3) && itemIndex < this.lastItemIndex;\n      }\n    }\n\n    return item;\n  }\n\n  private setCurrentSteps = () => {\n    if (media(\"ultra\").matches && this.stepsUltra) {\n      this.currentSteps = this.stepsUltra;\n    } else if (media(\"large\").matches && this.stepsLarge) {\n      this.currentSteps = this.stepsLarge;\n    } else if (media(\"medium\").matches && this.stepsMedium) {\n      this.currentSteps = this.stepsMedium;\n    } else if (media(\"small\").matches && this.stepsSmall) {\n      this.currentSteps = this.stepsSmall;\n    } else {\n      this.currentSteps = this.steps;\n    }\n  }\n\n  async componentWillLoad() {\n    this.dataWatcher(this.data);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"progressbar\");\n    }\n  }\n\n  connectedCallback() {\n    this.setCurrentSteps();\n    addMediaChangeListener(this.setCurrentSteps);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.setCurrentSteps);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-progressbar\": true,\n      [`stzh-progressbar--index-${this.index}`]: !!this.index\n    };\n\n    return (\n      <Host\n        style={{\n          '--steps': this.currentSteps ? this.currentSteps.toString() : null,\n        }}\n      >\n        <div class={classes}>\n          <div\n            class=\"stzh-progressbar__items\"\n            role=\"list\"\n            aria-label={this.localization.label}\n          >\n            {this._data.map((step, index) =>\n              <stzh-progressbar-item\n                {...this.getItemAttributes(index)}\n                icon={step.icon}\n                disabled={step.disabled}\n                label={step.label}\n                class=\"stzh-progressbar__item\"\n              ></stzh-progressbar-item>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}