@oiz/stzh-components 3.0.0 → 3.1.0

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

@@ -1 +1 @@
-{"file":"stzh-input.entry.js","mappings":"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","names":[],"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"],"version":3}
+{"file":"stzh-input.entry.js","mappings":"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","names":[],"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  --text-selection-background-color: #{$colorSecondary30};\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  @include input-description;\n\n  ::selection {\n    background: var(--text-selection-background-color);\n  }\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 { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\n\nimport { StzhInputBlurEvent, StzhInputChangedEvent, StzhInputChangeEvent, StzhInputFocusEvent } 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\" =\n    \"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 = [\"text\", \"search\", \"password\", \"email\", \"url\", \"tel\", \"number\", \"hidden\"];\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\":\n        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                </span>\n                <span class=\"stzh-input__marker-text\">\n                  {this.required\n                    ? this.localization.$globals.requiredFieldText\n                    : this.localization.$globals.optionalFieldText}\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              (!this.clearable || this.disabled || this.readonly || !this.filled) &&\n              (this.type === \"search\" || this.type === \"password\") ? (\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              ) : this.filled ? (\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          {(this._error?.length > 0 || this.description) && (\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          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/stzh-monthyearpicker.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-monthyearpicker.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-monthyearpicker/stzh-monthyearpicker.scss?tag=stzh-monthyearpicker&encapsulation=scoped","src/components/stzh-monthyearpicker/stzh-monthyearpicker.tsx"],"sourcesContent":[":host {\n  width: 100%;\n  --separator-height: #{$formInputHeight};\n\n  &[size=\"small\"] {\n    --separator-height: #{$formInputHeightSmall};\n  }\n}\n\n.stzh-monthyearpicker {\n  &__wrapper {\n    display: flex;\n    align-items: flex-start;\n  }\n\n  &__separator {\n    @include fontSize('milli');\n    margin-left: space('medium');\n    margin-right: space('medium');\n    height: var(--separator-height);\n    display: flex;\n    align-items: center;\n    align-self: flex-end;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Watch,\n  Listen,\n} from \"@stencil/core\";\n\nimport {\n  StzhDropdownOption,\n  StzhDropdownChangeEvent,\n  StzhMonthyearpickerChangeEvent,\n} from \"../../index\";\n\nimport { StzhMonthyearpickerLocalizedText } from \"./stzh-monthyearpicker.localization\";\n\n@Component({\n  tag: \"stzh-monthyearpicker\",\n  styleUrl: \"stzh-monthyearpicker.scss\",\n  scoped: true\n})\nexport class StzhMonthyearpicker {\n  /** Initial open state of month dropdown */\n  @Prop() monthOpen: boolean = false;\n\n  /** Initial open state of year dropdown */\n  @Prop() yearOpen: boolean = false;\n\n  /** Set which months to show (overwrites months from min/max) */\n  @Prop() months: number[] | string;\n  private _months: number[];\n\n  /** Set which years to show (overwrites years from min/max) */\n  @Prop() years: number[] | string;\n  private _years: number[];\n\n  /** Sort direction */\n  @Prop({ mutable: true }) yearSortDirection: \"asc\" | \"desc\" = \"asc\";\n\n  /**\n   * Minimum month and year allowed to be picked in `YYYY-MM` format.\n   * This setting can be used alone or together with the `max` property.\n   */\n  @Prop() min: string;\n\n  /**\n   * Maximum month and year allowed to be picked in `YYYY-MM` format.\n   * This setting can be used alone or together with the `min` property.\n   */\n  @Prop() max: string;\n\n  /**\n   * Minimum year (will be overwritten if `min` is used).\n   * This setting can be used alone or together with the `maxYear` property.\n   */\n  @Prop() minYear: number;\n\n  /**\n   * Maximum year (will be overwritten if `max` is used).\n   * This setting can be used alone or together with the `minYear` property.\n   */\n  @Prop() maxYear: number;\n\n  /** Picker format. */\n  @Prop({ reflect: true }) format: \"default\" | \"creditcard\" = \"default\";\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of hidden input (current selected year and month YYYY-MM). */\n  @Prop({ mutable: true, reflect: true }) value: string = \"0000-00\";\n\n  /** Popover placement for the dropdown (if applicable) */\n  @Prop({ reflect: true }) popoverPlacement:  \"bottom\" | \"bottom-end\" | \"bottom-center\" | \"top\" | \"top-end\" | \"top-center\" = \"bottom\";\n\n  /** Month dropdown label */\n  @Prop() monthLabel: string = \"\";\n\n  /** Year dropdown label */\n  @Prop() yearLabel: string = \"\";\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  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form ot hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Description message for month */\n  @Prop() descriptionMonth: string;\n\n  /** Description message for year */\n  @Prop() descriptionYear: string;\n\n  /** Long description message appearing in a popover for month */\n  @Prop() descriptionLongMonth: string;\n\n  /** Long description message appearing in a popover for year */\n  @Prop() descriptionLongYear: string;\n\n  /** One or multiple error message for month */\n  @Prop() errorMonth: string | string[];\n\n  /** One or multiple error message for year */\n  @Prop() errorYear: string | string[];\n\n  /** Invalid status for month */\n  @Prop({ reflect: true }) invalidMonth: boolean = false;\n\n  /** Invalid status for year */\n  @Prop({ reflect: true }) invalidYear: boolean = false;\n\n  /** Id of the element which describes the month dropdown */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedbyMonth: string = \"\";\n\n  /** Id of the element which describes the year dropdown */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedbyYear: string = \"\";\n\n  /**  Translation strings. */\n  @Prop() localization: StzhMonthyearpickerLocalizedText;\n\n  /** Monthyearpicker change event */\n  @Event() stzhChange: EventEmitter<StzhMonthyearpickerChangeEvent>;\n\n  @Element() element: HTMLStzhMonthyearpickerElement;\n\n  @Watch(\"months\")\n  monthsWatcher(newValue: number[] | string) {\n    if (typeof newValue === \"string\") {\n      this._months = JSON.parse(newValue);\n    } else {\n      this._months = newValue;\n    }\n\n    this.updateMonthOptions();\n  }\n\n  @Watch(\"years\")\n  yearsWatcher(newValue: number[] | string) {\n    if (typeof newValue === \"string\") {\n      this._years = JSON.parse(newValue);\n    } else {\n      this._years = newValue;\n    }\n\n    this.updateYearOptions();\n  }\n\n  @Watch(\"value\")\n  @Watch(\"min\")\n  @Watch(\"max\")\n  minMaxWatcher() {\n    this.updateMonthOptions();\n    this.updateYearOptions();\n  }\n\n  @Listen(\"stzhChange\", { capture: true })\n  onDropdownChange(event: CustomEvent<StzhDropdownChangeEvent>) {\n    if (event.detail.component === \"stzh-dropdown\") {\n      if ((event.target as HTMLStzhDropdownElement).name === `${this.name}-year`) {\n        this.onYearsDropdownChange(event);\n      } else {\n        this.onMonthsDropdownChange(event);\n      }\n      // stop propagating dropdown change event otherwise angular control value accessor won't work\n      event.stopPropagation();\n    }\n  }\n\n  private monthsDropdown: HTMLStzhDropdownElement;\n  private dropdownMonthOptions: StzhDropdownOption[];\n  private dropdownYearOptions: StzhDropdownOption[];\n\n  private onRootFocus = () => {\n    if (this.monthsDropdown) {\n      this.monthsDropdown.focus();\n    }\n  }\n\n  private onMonthsDropdownChange = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    const year = this.value.split(\"-\")[0] || \"0000\";\n    const month = event.detail.value || \"00\";\n    this.onChange(year, month);\n  }\n\n  private onYearsDropdownChange = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    const year = event.detail.value || \"0000\";\n    const month = this.value.split(\"-\")[1] || \"00\";\n    this.onChange(year, month);\n  }\n\n  private onChange(year, month) {\n    this.value = `${year}-${month}`;\n    this.stzhChange.emit({\n      component: \"stzh-monthyearpicker\",\n      value: this.value,\n      valueMonth: month,\n      valueYear: year\n    });\n  }\n\n  private updateMonthOptions() {\n    const options = [];\n    let months = [];\n\n    if (this._months) {\n      months = this._months;\n    } else {\n      const currentYear = Number(this.value.split(\"-\")[0] || \"0000\");\n\n      let minMonth = 1;\n      let maxMonth = 12;\n\n      if (this.min) {\n        const minDate = new Date(this.min);\n\n        if (currentYear === minDate.getFullYear()) {\n          minMonth = minDate.getMonth() + 1;\n        }\n      }\n\n      if (this.max) {\n        const maxDate = new Date(this.max);\n\n        if (currentYear === maxDate.getFullYear()) {\n          maxMonth = maxDate.getMonth() + 1;\n        }\n      }\n\n      for (let i = minMonth; i <= maxMonth; i++) {\n        months.push(i);\n      }\n    }\n\n    months.forEach((month) => {\n      const paddedMonth = (\"00\" + month).slice(-2);\n      const monthName = this.localization.$globals.monthNames[month - 1];\n\n      options.push({\n        text: this.format === \"creditcard\"\n          ? `${paddedMonth} (${monthName})`\n          : monthName,\n        value: paddedMonth\n      });\n    });\n\n    this.dropdownMonthOptions = options;\n  }\n\n  private initializeYears(): void {\n    if (Array.isArray(this.years)) {\n      this._years = this.years.map(Number); \n    } else if (typeof this.years === \"string\") {\n      // If \"years\" is a string, split in numbers\n      this._years = this.years\n        .split(\",\")\n        .map((year) => parseInt(year.trim(), 10))\n        .filter((year) => !isNaN(year)); \n        // Delete non valid values\n    }\n  }\n\n  private updateYearOptions(): void {\n    const options: StzhDropdownOption[] = [];\n    let years: number[] = [];\n\n    if (this._years && this._years.length > 0) {\n      years = this._years;\n    } else {\n      const currentMonth = Number(this.value.split(\"-\")[1] || \"00\");\n\n      const yearNow = new Date().getFullYear();\n      let minYear = this.minYear || (yearNow - 10);\n      let maxYear = this.maxYear || (yearNow + 10);\n\n      if (this.min) {\n        const minDate = new Date(this.min);\n        if (currentMonth && currentMonth < minDate.getMonth() + 1) {\n          minYear = minDate.getFullYear() + 1;\n        } else {\n          minYear = minDate.getFullYear();\n        }\n      }\n\n      if (this.max) {\n        const maxDate = new Date(this.max);\n        if (currentMonth && currentMonth > maxDate.getMonth() + 1) {\n          maxYear = maxDate.getFullYear() - 1;\n        } else {\n          maxYear = maxDate.getFullYear();\n        }\n      }\n\n      for (let i = minYear; i <= maxYear; i++) {\n        years.push(i);\n      }\n    }\n\n    years.sort((a, b) => (this.yearSortDirection === \"asc\" ? a - b : b - a));\n\n    years.forEach((year) => {\n      options.push({ text: `${year}`, value: `${year}` });\n    });\n\n    this.dropdownYearOptions = options;\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"monthyearpicker\");\n    }\n\n    this.initializeYears();\n    this.monthsWatcher(this.months);\n    this.yearsWatcher(this.years);\n\n  }\n\n  render() {\n    const classes = {\n      \"stzh-monthyearpicker\": true\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <input type=\"hidden\" name={this.name} value={this.value} />\n\n          <div class=\"stzh-monthyearpicker__wrapper\">\n            <stzh-dropdown\n              open={this.monthOpen}\n              name={`${this.name}-month`}\n              class=\"stzh-monthyearpicker__months-dropdown\"\n              label={this.monthLabel || this.localization.monthLabel}\n              ref={(el) => (this.monthsDropdown = el as HTMLStzhDropdownElement)}\n              options={this.dropdownMonthOptions}\n              items={[this.value.split(\"-\")[1]]}\n              required={this.required}\n              disabled={this.disabled}\n              size={this.size}\n              hideOptional={this.hideOptional}\n              popoverPlacement={this.popoverPlacement}\n              description={this.descriptionMonth}\n              descriptionLong={this.descriptionLongMonth}\n              error={this.errorMonth}\n              a11yDescribedby={this.a11yDescribedbyMonth}\n              invalid={this.invalidMonth}\n            ></stzh-dropdown>\n\n            <div class=\"stzh-monthyearpicker__separator\">/</div>\n\n            <stzh-dropdown\n              open={this.yearOpen}\n              name={`${this.name}-year`}\n              class=\"stzh-monthyearpicker__years-dropdown\"\n              label={this.yearLabel || this.localization.yearLabel}\n              options={this.dropdownYearOptions}\n              items={[this.value.split(\"-\")[0]]}\n              required={this.required}\n              disabled={this.disabled}\n              size={this.size}\n              hideOptional={this.hideOptional}\n              popoverPlacement={this.popoverPlacement}\n              description={this.descriptionYear}\n              descriptionLong={this.descriptionLongYear}\n              error={this.errorYear}\n              a11yDescribedby={this.a11yDescribedbyYear}\n              invalid={this.invalidYear}\n            ></stzh-dropdown>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-monthyearpicker.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-monthyearpicker/stzh-monthyearpicker.scss?tag=stzh-monthyearpicker&encapsulation=scoped","src/components/stzh-monthyearpicker/stzh-monthyearpicker.tsx"],"sourcesContent":[":host {\n  width: 100%;\n  --separator-height: #{$formInputHeight};\n\n  &[size=\"small\"] {\n    --separator-height: #{$formInputHeightSmall};\n  }\n}\n\n.stzh-monthyearpicker {\n  &__wrapper {\n    display: flex;\n    align-items: flex-start;\n  }\n\n  &__separator {\n    @include fontSize('milli');\n    margin-left: space('medium');\n    margin-right: space('medium');\n    height: var(--separator-height);\n    display: flex;\n    align-items: center;\n    align-self: flex-end;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Watch,\n  Listen,\n} from \"@stencil/core\";\n\nimport {\n  StzhDropdownOption,\n  StzhDropdownChangeEvent,\n  StzhMonthyearpickerChangeEvent,\n} from \"../../index\";\n\nimport { StzhMonthyearpickerLocalizedText } from \"./stzh-monthyearpicker.localization\";\n\n@Component({\n  tag: \"stzh-monthyearpicker\",\n  styleUrl: \"stzh-monthyearpicker.scss\",\n  scoped: true\n})\nexport class StzhMonthyearpicker {\n  /** Initial open state of month dropdown */\n  @Prop() monthOpen: boolean = false;\n\n  /** Initial open state of year dropdown */\n  @Prop() yearOpen: boolean = false;\n\n  /** Set which months to show (overwrites months from min/max) */\n  @Prop() months: number[] | string;\n  private _months: number[];\n\n  /** Set which years to show (overwrites years from min/max) */\n  @Prop() years: number[] | string;\n  private _years: number[];\n\n  /** Sort direction */\n  @Prop({ mutable: true }) yearSortDirection: \"asc\" | \"desc\" = \"asc\";\n\n  /**\n   * Minimum month and year allowed to be picked in `YYYY-MM` format.\n   * This setting can be used alone or together with the `max` property.\n   */\n  @Prop() min: string;\n\n  /**\n   * Maximum month and year allowed to be picked in `YYYY-MM` format.\n   * This setting can be used alone or together with the `min` property.\n   */\n  @Prop() max: string;\n\n  /**\n   * Minimum year (will be overwritten if `min` is used).\n   * This setting can be used alone or together with the `maxYear` property.\n   */\n  @Prop() minYear: number;\n\n  /**\n   * Maximum year (will be overwritten if `max` is used).\n   * This setting can be used alone or together with the `minYear` property.\n   */\n  @Prop() maxYear: number;\n\n  /** Picker format. */\n  @Prop({ reflect: true }) format: \"default\" | \"creditcard\" = \"default\";\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of hidden input (current selected year and month YYYY-MM). */\n  @Prop({ mutable: true, reflect: true }) value: string = \"0000-00\";\n\n  /** Popover placement for the dropdown (if applicable) */\n  @Prop({ reflect: true }) popoverPlacement:  \"bottom\" | \"bottom-end\" | \"bottom-center\" | \"top\" | \"top-end\" | \"top-center\" = \"bottom\";\n\n  /** Month dropdown label */\n  @Prop() monthLabel: string = \"\";\n\n  /** Year dropdown label */\n  @Prop() yearLabel: string = \"\";\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  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Description message for month */\n  @Prop() descriptionMonth: string;\n\n  /** Description message for year */\n  @Prop() descriptionYear: string;\n\n  /** Long description message appearing in a popover for month */\n  @Prop() descriptionLongMonth: string;\n\n  /** Long description message appearing in a popover for year */\n  @Prop() descriptionLongYear: string;\n\n  /** One or multiple error message for month */\n  @Prop() errorMonth: string | string[];\n\n  /** One or multiple error message for year */\n  @Prop() errorYear: string | string[];\n\n  /** Invalid status for month */\n  @Prop({ reflect: true }) invalidMonth: boolean = false;\n\n  /** Invalid status for year */\n  @Prop({ reflect: true }) invalidYear: boolean = false;\n\n  /** Id of the element which describes the month dropdown */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedbyMonth: string = \"\";\n\n  /** Id of the element which describes the year dropdown */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedbyYear: string = \"\";\n\n  /**  Translation strings. */\n  @Prop() localization: StzhMonthyearpickerLocalizedText;\n\n  /** Monthyearpicker change event */\n  @Event() stzhChange: EventEmitter<StzhMonthyearpickerChangeEvent>;\n\n  @Element() element: HTMLStzhMonthyearpickerElement;\n\n  @Watch(\"months\")\n  monthsWatcher(newValue: number[] | string) {\n    if (typeof newValue === \"string\") {\n      this._months = JSON.parse(newValue);\n    } else {\n      this._months = newValue;\n    }\n\n    this.updateMonthOptions();\n  }\n\n  @Watch(\"years\")\n  yearsWatcher(newValue: number[] | string) {\n    if (typeof newValue === \"string\") {\n      this._years = JSON.parse(newValue);\n    } else {\n      this._years = newValue;\n    }\n\n    this.updateYearOptions();\n  }\n\n  @Watch(\"value\")\n  @Watch(\"min\")\n  @Watch(\"max\")\n  minMaxWatcher() {\n    this.updateMonthOptions();\n    this.updateYearOptions();\n  }\n\n  @Listen(\"stzhChange\", { capture: true })\n  onDropdownChange(event: CustomEvent<StzhDropdownChangeEvent>) {\n    if (event.detail.component === \"stzh-dropdown\") {\n      if ((event.target as HTMLStzhDropdownElement).name === `${this.name}-year`) {\n        this.onYearsDropdownChange(event);\n      } else {\n        this.onMonthsDropdownChange(event);\n      }\n      // stop propagating dropdown change event otherwise angular control value accessor won't work\n      event.stopPropagation();\n    }\n  }\n\n  private monthsDropdown: HTMLStzhDropdownElement;\n  private dropdownMonthOptions: StzhDropdownOption[];\n  private dropdownYearOptions: StzhDropdownOption[];\n\n  private onRootFocus = () => {\n    if (this.monthsDropdown) {\n      this.monthsDropdown.focus();\n    }\n  }\n\n  private onMonthsDropdownChange = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    const year = this.value.split(\"-\")[0] || \"0000\";\n    const month = event.detail.value || \"00\";\n    this.onChange(year, month);\n  }\n\n  private onYearsDropdownChange = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    const year = event.detail.value || \"0000\";\n    const month = this.value.split(\"-\")[1] || \"00\";\n    this.onChange(year, month);\n  }\n\n  private onChange(year, month) {\n    this.value = `${year}-${month}`;\n    this.stzhChange.emit({\n      component: \"stzh-monthyearpicker\",\n      value: this.value,\n      valueMonth: month,\n      valueYear: year\n    });\n  }\n\n  private updateMonthOptions() {\n    const options = [];\n    let months = [];\n\n    if (this._months) {\n      months = this._months;\n    } else {\n      const currentYear = Number(this.value.split(\"-\")[0] || \"0000\");\n\n      let minMonth = 1;\n      let maxMonth = 12;\n\n      if (this.min) {\n        const minDate = new Date(this.min);\n\n        if (currentYear === minDate.getFullYear()) {\n          minMonth = minDate.getMonth() + 1;\n        }\n      }\n\n      if (this.max) {\n        const maxDate = new Date(this.max);\n\n        if (currentYear === maxDate.getFullYear()) {\n          maxMonth = maxDate.getMonth() + 1;\n        }\n      }\n\n      for (let i = minMonth; i <= maxMonth; i++) {\n        months.push(i);\n      }\n    }\n\n    months.forEach((month) => {\n      const paddedMonth = (\"00\" + month).slice(-2);\n      const monthName = this.localization.$globals.monthNames[month - 1];\n\n      options.push({\n        text: this.format === \"creditcard\"\n          ? `${paddedMonth} (${monthName})`\n          : monthName,\n        value: paddedMonth\n      });\n    });\n\n    this.dropdownMonthOptions = options;\n  }\n\n  private initializeYears(): void {\n    if (Array.isArray(this.years)) {\n      this._years = this.years.map(Number);\n    } else if (typeof this.years === \"string\") {\n      // If \"years\" is a string, split in numbers\n      this._years = this.years\n        .split(\",\")\n        .map((year) => parseInt(year.trim(), 10))\n        .filter((year) => !isNaN(year));\n        // Delete non valid values\n    }\n  }\n\n  private updateYearOptions(): void {\n    const options: StzhDropdownOption[] = [];\n    let years: number[] = [];\n\n    if (this._years && this._years.length > 0) {\n      years = this._years;\n    } else {\n      const currentMonth = Number(this.value.split(\"-\")[1] || \"00\");\n\n      const yearNow = new Date().getFullYear();\n      let minYear = this.minYear || (yearNow - 10);\n      let maxYear = this.maxYear || (yearNow + 10);\n\n      if (this.min) {\n        const minDate = new Date(this.min);\n        if (currentMonth && currentMonth < minDate.getMonth() + 1) {\n          minYear = minDate.getFullYear() + 1;\n        } else {\n          minYear = minDate.getFullYear();\n        }\n      }\n\n      if (this.max) {\n        const maxDate = new Date(this.max);\n        if (currentMonth && currentMonth > maxDate.getMonth() + 1) {\n          maxYear = maxDate.getFullYear() - 1;\n        } else {\n          maxYear = maxDate.getFullYear();\n        }\n      }\n\n      for (let i = minYear; i <= maxYear; i++) {\n        years.push(i);\n      }\n    }\n\n    years.sort((a, b) => (this.yearSortDirection === \"asc\" ? a - b : b - a));\n\n    years.forEach((year) => {\n      options.push({ text: `${year}`, value: `${year}` });\n    });\n\n    this.dropdownYearOptions = options;\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"monthyearpicker\");\n    }\n\n    this.initializeYears();\n    this.monthsWatcher(this.months);\n    this.yearsWatcher(this.years);\n\n  }\n\n  render() {\n    const classes = {\n      \"stzh-monthyearpicker\": true\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <input type=\"hidden\" name={this.name} value={this.value} />\n\n          <div class=\"stzh-monthyearpicker__wrapper\">\n            <stzh-dropdown\n              open={this.monthOpen}\n              name={`${this.name}-month`}\n              class=\"stzh-monthyearpicker__months-dropdown\"\n              label={this.monthLabel || this.localization.monthLabel}\n              ref={(el) => (this.monthsDropdown = el as HTMLStzhDropdownElement)}\n              options={this.dropdownMonthOptions}\n              items={[this.value.split(\"-\")[1]]}\n              required={this.required}\n              disabled={this.disabled}\n              size={this.size}\n              hideOptional={this.hideOptional}\n              popoverPlacement={this.popoverPlacement}\n              description={this.descriptionMonth}\n              descriptionLong={this.descriptionLongMonth}\n              error={this.errorMonth}\n              a11yDescribedby={this.a11yDescribedbyMonth}\n              invalid={this.invalidMonth}\n            ></stzh-dropdown>\n\n            <div class=\"stzh-monthyearpicker__separator\">/</div>\n\n            <stzh-dropdown\n              open={this.yearOpen}\n              name={`${this.name}-year`}\n              class=\"stzh-monthyearpicker__years-dropdown\"\n              label={this.yearLabel || this.localization.yearLabel}\n              options={this.dropdownYearOptions}\n              items={[this.value.split(\"-\")[0]]}\n              required={this.required}\n              disabled={this.disabled}\n              size={this.size}\n              hideOptional={this.hideOptional}\n              popoverPlacement={this.popoverPlacement}\n              description={this.descriptionYear}\n              descriptionLong={this.descriptionLongYear}\n              error={this.errorYear}\n              a11yDescribedby={this.a11yDescribedbyYear}\n              invalid={this.invalidYear}\n            ></stzh-dropdown>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/stzh-pagetitle-home.entry.js

@@ -0,0 +1,72 @@
+import { r as registerInstance, h, a as Host, g as getElement } from './index-e3050b18.js';
+import { s as setPropsIfNull, h as hasSlot } from './utils-54aead01.js';
+import { m as media, a as addMediaChangeListener, r as removeMediaChangeListener } from './media-utils-d80f83d2.js';
+import './string-utils-e252977e.js';
+
+const stzhPagetitleHomeCss = ".sc-stzh-pagetitle-home-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-home-h{display:none}.sc-stzh-pagetitle-home-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagetitle-home-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagetitle-home-h *.sc-stzh-pagetitle-home,.sc-stzh-pagetitle-home-h *.sc-stzh-pagetitle-home::before,.sc-stzh-pagetitle-home-h *.sc-stzh-pagetitle-home::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-home-h .has-focus.sc-stzh-pagetitle-home{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pagetitle-home-h .stzh-fylingfocus-focused.sc-stzh-pagetitle-home{outline-style:none !important}.sc-stzh-pagetitle-home-h .stzh-fylingfocus-focused.sc-stzh-pagetitle-home::-moz-focus-inner{border:0 !important}.sc-stzh-pagetitle-home-h .sc-stzh-pagetitle-home-s>[slot=image]{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.sc-stzh-pagetitle-home-h .sc-stzh-pagetitle-home-s>[slot=heading]{--color:var(--stzh-pagetitle-home-heading-color, var(--stzh-color-secondary50))}.sc-stzh-pagetitle-home-h .sc-stzh-pagetitle-home-s>[slot=subheading]{--color:var(--stzh-pagetitle-home-heading-color, var(--stzh-heading-color))}.sc-stzh-pagetitle-home-h .sc-stzh-pagetitle-home-s>[slot=readspeaker] *{--color:var(--stzh-pagetitle-home-subheading-color, var(--stzh-heading-color));--hover-color:var(--stzh-pagetitle-home-subheading-color, var(--stzh-heading-color))}.sc-stzh-pagetitle-home-h[has-image] .sc-stzh-pagetitle-home-s>[slot=readspeaker] *{--color:var(--stzh-pagetitle-home-subheading-color, var(--stzh-color-white));--hover-color:var(--stzh-pagetitle-home-subheading-color, var(--stzh-color-white))}.sc-stzh-pagetitle-home-h[has-image] .sc-stzh-pagetitle-home-s>[slot=heading]{--color:var(--stzh-pagetitle-home-heading-color, var(--stzh-color-lemonyellow50))}.sc-stzh-pagetitle-home-h[has-image] .sc-stzh-pagetitle-home-s>[slot=subheading]{--color:var(--stzh-pagetitle-home-subheading-color, var(--stzh-color-white))}.stzh-pagetitle-home.sc-stzh-pagetitle-home{position:relative;padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-pagetitle-home.sc-stzh-pagetitle-home{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle-home.sc-stzh-pagetitle-home{padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-pagetitle-home__container.sc-stzh-pagetitle-home{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-pagetitle-home__container.sc-stzh-pagetitle-home{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-pagetitle-home__container.sc-stzh-pagetitle-home{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-pagetitle-home__container.sc-stzh-pagetitle-home{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-pagetitle-home__container.sc-stzh-pagetitle-home{margin-left:auto;margin-right:auto;max-width:84.25rem}}.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-xxlarge);-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-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-bottom:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-pagetitle-home__text.sc-stzh-pagetitle-home{grid-template-columns:repeat(12, minmax(0, 1fr))}}.stzh-pagetitle-home__image-wrapper.sc-stzh-pagetitle-home{position:relative}.stzh-pagetitle-home__image-inner-wrapper.sc-stzh-pagetitle-home{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-home__image-inner-wrapper.sc-stzh-pagetitle-home{margin-left:calc(2rem / -1);margin-right:calc(2rem / -1)}}@media screen and (min-width: 900px){.stzh-pagetitle-home__image-inner-wrapper.sc-stzh-pagetitle-home{margin-left:0;margin-right:0;width:calc(100% + 2.5rem)}}@media screen and (min-width: 1260px){.stzh-pagetitle-home__image-inner-wrapper.sc-stzh-pagetitle-home{width:calc(100% + 4rem)}}@media screen and (min-width: 1600px){.stzh-pagetitle-home__image-inner-wrapper.sc-stzh-pagetitle-home{width:calc(100% + ((100rem - 84.25rem) / 2))}}.stzh-pagetitle-home__image-gradient.sc-stzh-pagetitle-home{position:absolute;background:linear-gradient(1.21deg, rgba(0, 0, 0, 0) 31.71%, rgba(0, 0, 0, 0.5) 83.84%);top:0;right:0;bottom:0;left:0;z-index:1}@media screen and (min-width: 600px){.stzh-pagetitle-home__image-gradient.sc-stzh-pagetitle-home{background:linear-gradient(270deg, rgba(0, 0, 0, 0) 31.21%, rgba(0, 0, 0, 0.5) 91.45%)}}.stzh-pagetitle-home__meta.sc-stzh-pagetitle-home{display:flex;flex-direction:column-reverse;row-gap:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pagetitle-home__meta.sc-stzh-pagetitle-home{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pagetitle-home__meta.sc-stzh-pagetitle-home{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle-home__meta.sc-stzh-pagetitle-home{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle-home__meta.sc-stzh-pagetitle-home{flex-direction:row}}@media screen and (min-width: 600px) and (max-width: 899px){.stzh-pagetitle-home__readspeaker.sc-stzh-pagetitle-home{--stzh-readspeaker-dropdown-position:relative;--stzh-readspeaker-dropdown-top:auto}}.stzh-pagetitle-home__subheading.sc-stzh-pagetitle-home{--stzh-base-lead-color:var(--stzh-heading-color)}.stzh-pagetitle-home__heading.sc-stzh-pagetitle-home:not(:empty)+.stzh-pagetitle-home__subheading.sc-stzh-pagetitle-home:not(:empty){margin-top:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-pagetitle-home__heading.sc-stzh-pagetitle-home:not(:empty)+.stzh-pagetitle-home__subheading.sc-stzh-pagetitle-home:not(:empty){margin-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-pagetitle-home__heading.sc-stzh-pagetitle-home:not(:empty)+.stzh-pagetitle-home__subheading.sc-stzh-pagetitle-home:not(:empty){margin-top:var(--stzh-space-medium)}}.stzh-pagetitle-home__heading.sc-stzh-pagetitle-home,.stzh-pagetitle-home__subheading.sc-stzh-pagetitle-home,.stzh-pagetitle-home__meta.sc-stzh-pagetitle-home{grid-column:1/span 4}@media screen and (min-width: 900px){.stzh-pagetitle-home__heading.sc-stzh-pagetitle-home,.stzh-pagetitle-home__subheading.sc-stzh-pagetitle-home,.stzh-pagetitle-home__meta.sc-stzh-pagetitle-home{grid-column:1/span 10}}.stzh-pagetitle-home--has-no-image.sc-stzh-pagetitle-home .stzh-pagetitle-home__ratio.sc-stzh-pagetitle-home{display:none}.stzh-pagetitle-home--has-no-image.sc-stzh-pagetitle-home .stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pagetitle-home--has-no-image.sc-stzh-pagetitle-home .stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pagetitle-home--has-no-image.sc-stzh-pagetitle-home .stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle-home--has-no-image.sc-stzh-pagetitle-home .stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-xxlarge)}}.stzh-pagetitle-home--has-image.sc-stzh-pagetitle-home{padding-bottom:0}.stzh-pagetitle-home--has-image.sc-stzh-pagetitle-home .stzh-pagetitle-home__container.sc-stzh-pagetitle-home{position:absolute;top:0;right:0;left:0;z-index:1}.stzh-pagetitle-home--has-image.sc-stzh-pagetitle-home .stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-pagetitle-home--has-image.sc-stzh-pagetitle-home .stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle-home--has-image.sc-stzh-pagetitle-home .stzh-pagetitle-home__text.sc-stzh-pagetitle-home{padding-top:var(--stzh-space-xxxxlarge)}}";
+
+const StzhPagetitleHome = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.mediaChangeHandler = () => {
+      this.isSmall = media("small").matches;
+    };
+    this.init = () => {
+      const heading = this.element.querySelector('stzh-heading[slot="heading"], [slot="heading"] stzh-heading');
+      const subheading = this.element.querySelector('stzh-text[slot="subheading"], [slot="subheading"] stzh-text');
+      const readspeakerButton = this.element.querySelector('[slot="readspeaker"] stzh-button');
+      if (heading) {
+        setPropsIfNull(heading, {
+          curve: "h1home",
+          level: "1",
+        });
+      }
+      if (readspeakerButton) {
+        setPropsIfNull(readspeakerButton, {
+          variant: "tertiary-plain",
+          noPaddingLeft: true,
+          noPaddingRight: true,
+          size: "small",
+          sizeMedium: "tiny",
+          buttonAccesskey: "L",
+        });
+      }
+      if (subheading) {
+        setPropsIfNull(subheading, {
+          curve: "hero",
+          lead: true,
+        });
+      }
+    };
+    this.isSmall = undefined;
+  }
+  componentDidRender() { }
+  connectedCallback() {
+    console.log("1234");
+    this.init();
+    this.mediaChangeHandler();
+    addMediaChangeListener(this.mediaChangeHandler);
+  }
+  disconnectedCallback() {
+    removeMediaChangeListener(this.mediaChangeHandler);
+  }
+  render() {
+    const imageSlotUsed = hasSlot(this.element, "image");
+    const subheadingSlotUsed = hasSlot(this.element, "subheading");
+    const readspeakerSlotUsed = hasSlot(this.element, "readspeaker");
+    const classes = {
+      "stzh-pagetitle-home": true,
+      "stzh-pagetitle-home--has-image": imageSlotUsed,
+      "stzh-pagetitle-home--has-no-image": !imageSlotUsed,
+      "stzh-pagetitle-home--has-subheading": subheadingSlotUsed,
+      "stzh-pagetitle-home--has-meta": readspeakerSlotUsed,
+    };
+    return (h(Host, { "has-image": imageSlotUsed }, h("div", { class: classes }, h("div", { class: "stzh-pagetitle-home__image-wrapper" }, h("stzh-ratio", { ratio: "4:3", portrait: !this.isSmall, ratioSmall: "16:9", ratioMedium: "2:1", ratioLarge: "21:9", class: "stzh-pagetitle-home__ratio" }), h("div", { class: "stzh-pagetitle-home__image-gradient" }), h("div", { class: "stzh-pagetitle-home__image-inner-wrapper" }, h("slot", { name: "image" }))), h("div", { class: "stzh-pagetitle-home__container" }, h("div", { class: "stzh-pagetitle-home__wrapper" }, h("div", { class: "stzh-pagetitle-home__text" }, h("div", { class: "stzh-pagetitle-home__meta" }, h("div", { class: "stzh-pagetitle-home__readspeaker" }, h("slot", { name: "readspeaker" }))), h("div", { class: "stzh-pagetitle-home__heading" }, h("slot", { name: "heading" })), h("div", { class: "stzh-pagetitle-home__subheading" }, h("slot", { name: "subheading" }))))))));
+  }
+  get element() { return getElement(this); }
+};
+StzhPagetitleHome.style = stzhPagetitleHomeCss;
+
+export { StzhPagetitleHome as stzh_pagetitle_home };
+
+//# sourceMappingURL=stzh-pagetitle-home.entry.js.map

package/dist/esm/stzh-pagetitle-home.entry.js.map

@@ -0,0 +1 @@
+{"file":"stzh-pagetitle-home.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-pagetitle-home/stzh-pagetitle-home.scss?tag=stzh-pagetitle-home&encapsulation=scoped","src/components/stzh-pagetitle-home/stzh-pagetitle-home.tsx"],"sourcesContent":["/**\n   * @prop --stzh-pagetitle-home-heading-color: Color of the heading\n   * @prop --stzh-pagetitle-home-subheading-color: Color of the subheading and readspeaker slot\n */\n\n:host {\n  ::slotted([slot=\"image\"]) {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  ::slotted([slot=\"heading\"]) {\n    --color: var(--stzh-pagetitle-home-heading-color, #{$colorSecondary50});\n  }\n\n  ::slotted([slot=\"subheading\"]) {\n    --color: var(--stzh-pagetitle-home-heading-color, #{$headingColor});\n  }\n\n  ::slotted([slot=\"readspeaker\"]) * {\n    --color: var(--stzh-pagetitle-home-subheading-color, #{$headingColor});\n    --hover-color: var(--stzh-pagetitle-home-subheading-color, #{$headingColor});\n  }\n\n  &[has-image] ::slotted([slot=\"readspeaker\"]) * {\n    --color: var(--stzh-pagetitle-home-subheading-color, #{$colorWhite});\n    --hover-color: var(--stzh-pagetitle-home-subheading-color, #{$colorWhite});\n  }\n\n  &[has-image] ::slotted([slot=\"heading\"]) {\n    --color: var(--stzh-pagetitle-home-heading-color, #{$colorLemonyellow50});\n  }\n\n  &[has-image] ::slotted([slot=\"subheading\"]) {\n    --color: var(--stzh-pagetitle-home-subheading-color, #{$colorWhite});\n  }\n}\n\n.stzh-pagetitle-home {\n  position: relative;\n  @include spaceCurve('padding-bottom', 'large');\n\n  &__container {\n    @include container;\n  }\n\n  &__text {\n    @include spaceCurve('padding-top', 'big');\n    @include spaceCurve('padding-bottom', 'big');\n    @include grid;\n  }\n\n\n  &__image-wrapper {\n    position: relative;\n  }\n\n  &__image-inner-wrapper {\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  &__image-gradient {\n    position: absolute;\n    background: linear-gradient(1.21deg, rgba(0, 0, 0, 0) 31.71%, rgba(0, 0, 0, 0.5) 83.84%);\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 1;\n\n    @include mq($from: small) {\n      background: linear-gradient(270deg, rgba(0, 0, 0, 0) 31.21%, rgba(0, 0, 0, 0.5) 91.45%);\n    }\n  }\n\n  &__meta {\n    display: flex;\n    flex-direction: column-reverse;\n    row-gap: space('xsmall');\n    @include spaceCurve('margin-bottom', 'regular');\n\n    @include mq($from: medium) {\n      flex-direction: row;\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  &__subheading {\n    --stzh-base-lead-color: #{$headingColor};\n  }\n\n  &__heading:not(:empty) + &__subheading:not(:empty) {\n    @include spaceCurve('margin-top', 'tiny');\n  }\n\n  &__heading,\n  &__subheading,\n  &__meta {\n    grid-column: 1 / span 4;\n\n    @include mq($from: medium) {\n      grid-column: 1 / span 10;\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 spaceCurve('padding-top', 'regular');\n  }\n\n  /* Has image variant */\n\n  &--has-image {\n    padding-bottom: 0;\n  }\n\n  &--has-image &__container {\n    position: absolute;\n    top: 0;\n    right: 0;\n    left: 0;\n    z-index: 1;\n  }\n\n  &--has-image &__text {\n    @include spaceCurve('padding-top', 'large');\n  }\n}\n","import { Component, Element, h, Host, State } from \"@stencil/core\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { addMediaChangeListener, media, removeMediaChangeListener } 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 subheading - Slot for `stzh-text` element\n * @slot readspeaker - Slot for `stzh-readspeaker` element\n */\n@Component({\n  tag: \"stzh-pagetitle-home\",\n  styleUrl: \"stzh-pagetitle-home.scss\",\n  scoped: true,\n})\nexport class StzhPagetitleHome {\n  @Element() element: HTMLStzhPagetitleHomeElement;\n\n  @State() isSmall: boolean;\n\n  private mediaChangeHandler = () => {\n    this.isSmall = media(\"small\").matches;\n  };\n\n  private init = () => {\n    const heading = this.element.querySelector('stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading');\n    const subheading = this.element.querySelector('stzh-text[slot=\"subheading\"], [slot=\"subheading\"] stzh-text');\n    const readspeakerButton = this.element.querySelector('[slot=\"readspeaker\"] stzh-button');\n\n    if (heading) {\n      setPropsIfNull(heading, {\n        curve: \"h1home\",\n        level: \"1\",\n      } as HTMLStzhHeadingElement);\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    if (subheading) {\n      setPropsIfNull(subheading, {\n        curve: \"hero\",\n        lead: true,\n      } as HTMLStzhTextElement);\n    }\n  };\n\n  componentDidRender() {}\n\n  connectedCallback() {\n    console.log(\"1234\");\n    this.init();\n    this.mediaChangeHandler();\n    addMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  render() {\n    const imageSlotUsed = hasSlot(this.element, \"image\");\n    const subheadingSlotUsed = hasSlot(this.element, \"subheading\");\n    const readspeakerSlotUsed = hasSlot(this.element, \"readspeaker\");\n\n    const classes = {\n      \"stzh-pagetitle-home\": true,\n      \"stzh-pagetitle-home--has-image\": imageSlotUsed,\n      \"stzh-pagetitle-home--has-no-image\": !imageSlotUsed,\n      \"stzh-pagetitle-home--has-subheading\": subheadingSlotUsed,\n      \"stzh-pagetitle-home--has-meta\": readspeakerSlotUsed,\n    };\n\n    return (\n      <Host has-image={imageSlotUsed}>\n        <div class={classes}>\n          <div class=\"stzh-pagetitle-home__image-wrapper\">\n            <stzh-ratio\n              ratio={\"4:3\"}\n              portrait={!this.isSmall}\n              ratioSmall={\"16:9\"}\n              ratioMedium={\"2:1\"}\n              ratioLarge={\"21:9\"}\n              class=\"stzh-pagetitle-home__ratio\"\n            ></stzh-ratio>\n            <div class=\"stzh-pagetitle-home__image-gradient\"></div>\n            <div class=\"stzh-pagetitle-home__image-inner-wrapper\">\n              <slot name=\"image\"></slot>\n            </div>\n          </div>\n          <div class=\"stzh-pagetitle-home__container\">\n            <div class=\"stzh-pagetitle-home__wrapper\">\n              <div class=\"stzh-pagetitle-home__text\">\n                <div class=\"stzh-pagetitle-home__meta\">\n                  <div class=\"stzh-pagetitle-home__readspeaker\">\n                    <slot name=\"readspeaker\"></slot>\n                  </div>\n                </div>\n\n                <div class=\"stzh-pagetitle-home__heading\">\n                  <slot name=\"heading\"></slot>\n                </div>\n\n                <div class=\"stzh-pagetitle-home__subheading\">\n                  <slot name=\"subheading\"></slot>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/stzh-pagetitle.entry.js

@@ -3,7 +3,7 @@ import { s as setPropsIfNull, h as hasSlot } from './utils-54aead01.js';
 import { m as media } from './media-utils-d80f83d2.js';
 import './string-utils-e252977e.js';
 
-const stzhPagetitleCss = ".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 stzhPagetitleCss = ".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)}}.stzh-pagetitle--hyphens.sc-stzh-pagetitle .stzh-pagetitle__heading.sc-stzh-pagetitle{-webkit-hyphens:auto;hyphens:auto}";
 
 const StzhPagetitle = class {
   constructor(hostRef) {
@@ -34,24 +34,24 @@ const StzhPagetitle = class {
       if (heading) {
         setPropsIfNull(heading, {
           curve: "hero",
-          level: "1"
+          level: "1",
         });
       }
       if (disturber) {
         setPropsIfNull(disturber, {
-          initialOpenAnimation: true
+          initialOpenAnimation: true,
         });
       }
       if (show) {
         setPropsIfNull(show, {
-          mikro: true
+          mikro: true,
         });
       }
       if (tag) {
         setPropsIfNull(tag, {
           type: "secondary",
           size: "large",
-          nonInteractive: true
+          nonInteractive: true,
         });
       }
       if (readspeakerButton) {
@@ -61,16 +61,17 @@ const StzhPagetitle = class {
           noPaddingRight: true,
           size: "small",
           sizeMedium: "tiny",
-          buttonAccesskey: "L"
+          buttonAccesskey: "L",
         });
       }
-      leads.forEach((lead) => {
+      leads.forEach(lead => {
         setPropsIfNull(lead, {
-          lead: true
+          lead: true,
         });
       });
     };
     this.background = "default";
+    this.hyphensEnabled = false;
     this.dateline = undefined;
   }
   handleResize() {
@@ -105,7 +106,7 @@ const StzhPagetitle = class {
     this.observer = new MutationObserver(this.init);
     this.observer.observe(this.element, {
       childList: true,
-      subtree: true
+      subtree: true,
     });
   }
   disconnectedCallback() {
@@ -113,10 +114,10 @@ const StzhPagetitle = class {
     (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   render() {
-    const imageSlotUsed = hasSlot(this.element, 'image');
-    const leadSlotUsed = hasSlot(this.element, 'lead');
-    const tagSlotUsed = hasSlot(this.element, 'tag');
-    const readspeakerSlotUsed = hasSlot(this.element, 'readspeaker');
+    const imageSlotUsed = hasSlot(this.element, "image");
+    const leadSlotUsed = hasSlot(this.element, "lead");
+    const tagSlotUsed = hasSlot(this.element, "tag");
+    const readspeakerSlotUsed = hasSlot(this.element, "readspeaker");
     const classes = {
       "stzh-pagetitle": true,
       "stzh-pagetitle--has-image": imageSlotUsed,
@@ -124,10 +125,10 @@ const StzhPagetitle = class {
       "stzh-pagetitle--has-lead": leadSlotUsed,
       "stzh-pagetitle--has-tag": tagSlotUsed,
       "stzh-pagetitle--has-meta": tagSlotUsed || readspeakerSlotUsed,
+      "stzh-pagetitle--hyphens": this.hyphensEnabled,
       [`stzh-pagetitle--background-${this.background}`]: !!this.background,
     };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-pagetitle__container" }, h("div", { class: "stzh-pagetitle__wrapper" }, h("div", { class: "stzh-pagetitle__text" }, h("div", { class: "stzh-pagetitle__meta" }, h("div", { class: "stzh-pagetitle__tag" }, h("slot", { name: "tag" })), h("div", { class: "stzh-pagetitle__readspeaker" }, h("slot", { name: "readspeaker" }))), this.dateline &&
-      h("div", { class: "stzh-pagetitle__dateline" }, this.dateline), h("div", { class: "stzh-pagetitle__heading" }, h("slot", { name: "heading" })), h("div", { class: "stzh-pagetitle__lead" }, h("slot", { name: "lead" }))), h("div", { class: "stzh-pagetitle__image-wrapper" }, h("stzh-ratio", { ratio: "16:9", ratioSmall: "3:2", ratioMedium: "16:9", class: "stzh-pagetitle__ratio" }), h("div", { class: "stzh-pagetitle__image-inner-wrapper" }, h("slot", { name: "image" }))), h("div", { class: "stzh-pagetitle__disturber", ref: (el) => (this.disturberElement = el) }, h("slot", { name: "disturber" })))))));
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-pagetitle__container" }, h("div", { class: "stzh-pagetitle__wrapper" }, h("div", { class: "stzh-pagetitle__text" }, h("div", { class: "stzh-pagetitle__meta" }, h("div", { class: "stzh-pagetitle__tag" }, h("slot", { name: "tag" })), h("div", { class: "stzh-pagetitle__readspeaker" }, h("slot", { name: "readspeaker" }))), this.dateline && h("div", { class: "stzh-pagetitle__dateline" }, this.dateline), h("div", { class: "stzh-pagetitle__heading" }, h("slot", { name: "heading" })), h("div", { class: "stzh-pagetitle__lead" }, h("slot", { name: "lead" }))), h("div", { class: "stzh-pagetitle__image-wrapper" }, h("stzh-ratio", { ratio: "16:9", ratioSmall: "3:2", ratioMedium: "16:9", class: "stzh-pagetitle__ratio" }), h("div", { class: "stzh-pagetitle__image-inner-wrapper" }, h("slot", { name: "image" }))), h("div", { class: "stzh-pagetitle__disturber", ref: el => (this.disturberElement = el) }, h("slot", { name: "disturber" })))))));
   }
   get element() { return getElement(this); }
 };