@oiz/stzh-components 2.6.0-beta → 2.7.0-alpha

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

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

package/dist/stzh-components/p-e8545386.system.entry.js

@@ -0,0 +1,2 @@
+var __awaiter=this&&this.__awaiter||function(t,e,i,n){function r(t){return t instanceof i?t:new i((function(e){e(t)}))}return new(i||(i=Promise))((function(i,s){function o(t){try{c(n.next(t))}catch(t){s(t)}}function a(t){try{c(n["throw"](t))}catch(t){s(t)}}function c(t){t.done?i(t.value):r(t.value).then(o,a)}c((n=n.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var i={label:0,sent:function(){if(s[0]&1)throw s[1];return s[1]},trys:[],ops:[]},n,r,s,o;return o={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function a(t){return function(e){return c([t,e])}}function c(a){if(n)throw new TypeError("Generator is already executing.");while(o&&(o=0,a[0]&&(i=0)),i)try{if(n=1,r&&(s=a[0]&2?r["return"]:a[0]?r["throw"]||((s=r["return"])&&s.call(r),0):r.next)&&!(s=s.call(r,a[1])).done)return s;if(r=0,s)a=[a[0]&2,s.value];switch(a[0]){case 0:case 1:s=a;break;case 4:i.label++;return{value:a[1],done:false};case 5:i.label++;r=a[1];a=[0];continue;case 7:a=i.ops.pop();i.trys.pop();continue;default:if(!(s=i.trys,s=s.length>0&&s[s.length-1])&&(a[0]===6||a[0]===2)){i=0;continue}if(a[0]===3&&(!s||a[1]>s[0]&&a[1]<s[3])){i.label=a[1];break}if(a[0]===6&&i.label<s[1]){i.label=s[1];s=a;break}if(s&&i.label<s[2]){i.label=s[2];i.ops.push(a);break}if(s[2])i.ops.pop();i.trys.pop();continue}a=e.call(t,i)}catch(t){a=[6,t];r=0}finally{n=s=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./p-7b184ebb.system.js","./p-a408bfba.system.js"],(function(t){"use strict";var e,i,n,r,s,o;return{setters:[function(t){e=t.r;i=t.c;n=t.h;r=t.a;s=t.g},function(t){o=t.f}],execute:function(){var a=".sc-stzh-timepicker-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-timepicker-h{display:none}.sc-stzh-timepicker-h *.sc-stzh-timepicker,.sc-stzh-timepicker-h *.sc-stzh-timepicker::before,.sc-stzh-timepicker-h *.sc-stzh-timepicker::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-timepicker-h{width:100%}.stzh-timepicker__dropdown.sc-stzh-timepicker{--icon-angle-size:var(--stzh-icon-size-small);--active-icon-angle-transform:rotate(0deg) translateY(-50%)}";var c=t("stzh_timepicker",function(){function t(t){var n=this;e(this,t);this.stzhChange=i(this,"stzhChange",7);this.onRootFocus=function(){if(n.input){n.input.setFocus()}};this.onDropdownChange=function(t){n.value=t.detail.value;n.stzhChange.emit({component:"stzh-timepicker",value:n.value})};this.min=0;this.max=1439;this.step=15;this.name="";this.value="";this.popoverPlacement="bottom";this.label="";this.readonly=false;this.disabled=false;this.description=undefined;this.descriptionLong=undefined;this.error=undefined;this.invalid=false;this.required=false;this.showMarker=false;this.size="default";this.a11yDescribedby="";this.localization=undefined}t.prototype.minMaxWatcher=function(){this.updateDropdownOptions()};t.prototype.updateDropdownOptions=function(){var t=[];for(var e=this.min;e<=this.max;e=e+this.step){var i=Math.floor(e/60);var n=e%60;var r=("00"+i).slice(-2);var s=("00"+n).slice(-2);var o="".concat(r,".").concat(s);t.push({text:o,value:o})}this._dropdownOptions=t};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:this.minMaxWatcher();if(!!this.localization)return[3,2];t=this;return[4,o(this.element,"timepicker")];case 1:t.localization=e.sent();e.label=2;case 2:return[2]}}))}))};t.prototype.render=function(){var t=this;var e={"stzh-timepicker":true};return n(r,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},n("div",{class:e},n("stzh-dropdown",{class:"stzh-timepicker__dropdown",iconAngle:"clock",label:this.label,ref:function(e){return t.input=e},onStzhChange:this.onDropdownChange,options:this._dropdownOptions,items:[this.value],required:this.required,disabled:this.disabled,description:this.description,descriptionLong:this.descriptionLong,error:this.error,popoverPlacement:this.popoverPlacement,a11yDescribedby:this.a11yDescribedby,name:this.name,size:this.size,invalid:this.invalid,showMarker:this.showMarker})))};Object.defineProperty(t.prototype,"element",{get:function(){return s(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{min:["minMaxWatcher"],max:["minMaxWatcher"]}},enumerable:false,configurable:true});return t}());c.style=a}}}));
+//# sourceMappingURL=p-e8545386.system.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["stzhTimepickerCss","StzhTimepicker","exports","this","onRootFocus","_this","input","setFocus","onDropdownChange","event","value","detail","stzhChange","emit","component","class_1","prototype","minMaxWatcher","updateDropdownOptions","options","i","min","max","step","hours","Math","floor","minutes","paddedHours","slice","paddedMinutes","time","concat","push","text","_dropdownOptions","componentWillLoad","localization","_a","fetchTranslations","element","_b","sent","render","classes","h","Host","tabindex","disabled","onFocus","class","iconAngle","label","ref","el","onStzhChange","items","required","description","descriptionLong","error","popoverPlacement","a11yDescribedby","name","size","invalid","showMarker"],"sources":["src/components/stzh-timepicker/stzh-timepicker.scss?tag=stzh-timepicker&encapsulation=scoped","src/components/stzh-timepicker/stzh-timepicker.tsx"],"sourcesContent":[":host {\n  width: 100%;\n}\n\n.stzh-timepicker {\n  &__dropdown {\n    --icon-angle-size: #{iconSize('small')};\n    --active-icon-angle-transform: rotate(0deg) translateY(-50%);\n  }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  StzhDropdownOption,\n  StzhDropdownChangeEvent,\n  StzhTimepickerChangeEvent\n} from \"../../index\";\n\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { StzhTimepickerLocalizedText } from \"./stzh-timepicker.localization\";\n\n/**\n */\n@Component({\n  tag: \"stzh-timepicker\",\n  styleUrl: \"stzh-timepicker.scss\",\n  scoped: true\n})\nexport class StzhTimepicker {\n  /**\n   * Minimum time allowed to be picked in minutes. Can not be lower than 0.\n   * This setting can be used alone or together with the max property.\n   */\n  @Prop() min: number = 0\n\n  /**\n   * Maximum time allowed to be picked in minutes. Can not be higher than 1440 (24h * 60).\n   * This setting can be used alone or together with the min property.\n   */\n  @Prop() max: number = 1439;\n\n  /** Time added for each step in minutes. */\n  @Prop() step: number = 15;\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of hidden date picker input (current selected date in ISO format). */\n  @Prop({ mutable: true }) value: string = \"\";\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  /** Label for dropdown */\n  @Prop() label: 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  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Id of the element which describes the input */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = '';\n\n  /**  Translation strings. */\n  @Prop() localization: StzhTimepickerLocalizedText;\n\n  /** Timepicker change event */\n  @Event() stzhChange: EventEmitter<StzhTimepickerChangeEvent>;\n\n  @Element() element: HTMLStzhTimepickerElement;\n\n  @Watch(\"min\")\n  @Watch(\"max\")\n  minMaxWatcher() {\n    this.updateDropdownOptions();\n  }\n\n  private input: HTMLStzhDropdownElement;\n  private _dropdownOptions: StzhDropdownOption[];\n\n  private onRootFocus = () => {\n    if (this.input) {\n      this.input.setFocus();\n    }\n  }\n\n  private onDropdownChange = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    this.value = event.detail.value;\n\n    this.stzhChange.emit({\n      component: \"stzh-timepicker\",\n      value: this.value\n    });\n  }\n\n  private updateDropdownOptions(): void {\n    const options = [];\n\n    for (let i = this.min; i <= this.max; i = i + this.step) {\n      let hours: number = Math.floor(i / 60);\n      let minutes: number = i % 60;\n\n      let paddedHours: string = ('00' + hours).slice(-2);\n      let paddedMinutes: string = ('00' + minutes).slice(-2);\n      let time = `${paddedHours}.${paddedMinutes}`;\n\n      options.push({ text: time, value: time });\n    }\n\n    this._dropdownOptions = options;\n  }\n\n  async componentWillLoad() {\n    this.minMaxWatcher();\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"timepicker\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-timepicker\": true\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <stzh-dropdown\n            class=\"stzh-timepicker__dropdown\"\n            iconAngle={\"clock\"}\n            label={this.label}\n            ref={(el) => (this.input = el as HTMLStzhDropdownElement)}\n            onStzhChange={this.onDropdownChange}\n            options={this._dropdownOptions}\n            items={[this.value]}\n            required={this.required}\n            disabled={this.disabled}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            error={this.error}\n            popoverPlacement={this.popoverPlacement}\n            a11yDescribedby={this.a11yDescribedby}\n            name={this.name}\n            size={this.size}\n            invalid={this.invalid}\n            showMarker={this.showMarker}\n          ></stzh-dropdown>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"8pDAAA,IAAMA,EAAoB,4wB,IC2BbC,EAAcC,EAAA,6B,0EA2EjBC,KAAAC,YAAc,WACpB,GAAIC,EAAKC,MAAO,CACdD,EAAKC,MAAMC,U,GAIPJ,KAAAK,iBAAmB,SAACC,GAC1BJ,EAAKK,MAAQD,EAAME,OAAOD,MAE1BL,EAAKO,WAAWC,KAAK,CACnBC,UAAW,kBACXJ,MAAOL,EAAKK,O,WAjFM,E,SAMA,K,UAGC,G,UAGiB,G,WAGC,G,sBAGkF,S,WAGnG,G,cAGqB,M,cAGA,M,4FAYD,M,cAGC,M,gBAGE,M,UAGM,U,qBAGc,G,4BAYnEK,EAAAC,UAAAC,cAAA,WACEd,KAAKe,uB,EAqBCH,EAAAC,UAAAE,sBAAA,WACN,IAAMC,EAAU,GAEhB,IAAK,IAAIC,EAAIjB,KAAKkB,IAAKD,GAAKjB,KAAKmB,IAAKF,EAAIA,EAAIjB,KAAKoB,KAAM,CACvD,IAAIC,EAAgBC,KAAKC,MAAMN,EAAI,IACnC,IAAIO,EAAkBP,EAAI,GAE1B,IAAIQ,GAAuB,KAAOJ,GAAOK,OAAO,GAChD,IAAIC,GAAyB,KAAOH,GAASE,OAAO,GACpD,IAAIE,EAAO,GAAAC,OAAGJ,EAAW,KAAAI,OAAIF,GAE7BX,EAAQc,KAAK,CAAEC,KAAMH,EAAMrB,MAAOqB,G,CAGpC5B,KAAKgC,iBAAmBhB,C,EAGpBJ,EAAAC,UAAAoB,kBAAN,W,kHACEjC,KAAKc,gB,KAEAd,KAAKkC,aAAN,YACFC,EAAAnC,KAAoB,SAAMoC,EAAkBpC,KAAKqC,QAAS,e,OAA1DF,EAAKD,aAAeI,EAAAC,O,mCAIxB3B,EAAAC,UAAA2B,OAAA,eAAAtC,EAAAF,KACE,IAAMyC,EAAU,CACd,kBAAmB,MAGrB,OACEC,EAACC,EAAI,CAACC,SAAU5C,KAAK6C,SAAW,KAAO,KAAMC,QAAS9C,KAAKC,aACzDyC,EAAA,OAAKK,MAAON,GACVC,EAAA,iBACEK,MAAM,4BACNC,UAAW,QACXC,MAAOjD,KAAKiD,MACZC,IAAK,SAACC,GAAE,OAAMjD,EAAKC,MAAQgD,CAAnB,EACRC,aAAcpD,KAAKK,iBACnBW,QAAShB,KAAKgC,iBACdqB,MAAO,CAACrD,KAAKO,OACb+C,SAAUtD,KAAKsD,SACfT,SAAU7C,KAAK6C,SACfU,YAAavD,KAAKuD,YAClBC,gBAAiBxD,KAAKwD,gBACtBC,MAAOzD,KAAKyD,MACZC,iBAAkB1D,KAAK0D,iBACvBC,gBAAiB3D,KAAK2D,gBACtBC,KAAM5D,KAAK4D,KACXC,KAAM7D,KAAK6D,KACXC,QAAS9D,KAAK8D,QACdC,WAAY/D,KAAK+D,c,yQA7IF,I"}

package/dist/stzh-components/p-eaa65f52.system.js.map

@@ -1 +1 @@
-{"version":3,"names":["VBZ","BASE_TYPE_GLOBAL","CHANNEL_TICKER","CHANNEL_INFO_URL_FILTER","DISTURBANCE_GLOBAL","DISTURBANCE_INFORMATION","DISTURBANCE_CONSTRUCTION","DISTURBANCE_NORMAL","DISTURBANCE_EVENT","DISTURBANCE_BUS","exports"],"sources":["src/index.ts"],"sourcesContent":["// ---\n// Global window types\n// ---\n\nimport {\n  StzhLocaleFormats\n} from './utils/translation-utils';\n\nexport type WindowStzhComponents = {\n  version: string\n  locale: string\n  pathMedia: string\n  pathTranslations: string\n  cacheTranslations: boolean\n  formats: StzhLocaleFormats\n  labels: \"flyout\" | \"fixed\"\n}\n\ndeclare global {\n  interface Window {\n    stzhComponents: WindowStzhComponents\n    Dropzone: any\n    // readspeaker lib APIs\n    ReadSpeaker: any\n    rspkr: any\n    proj4: any\n  }\n}\n\n// ---\n// Event Types\n// ---\n\n/* Sortable */\n\nexport type StzhSortableUpdateEvent = {\n  component: \"stzh-sortable\"\n  data: string[]\n  item: HTMLElement\n  newIndex: number\n  oldIndex: number\n}\n\nexport type StzhSortableDisableEvent = {\n  component: \"stzh-sortable\"\n  disabled: boolean\n}\n\n/* Olmap */\n\nexport type OlmapLayer = {\n  title?: string,\n  thumbnailUrl: string,\n  options: {\n    url: string,\n    layer: string,\n    matrixSet: string,\n    origin: number[],\n    extent: number[]\n  }\n}\n\nexport type StzhOlmapInitializedEvent = {\n  component: \"stzh-olmap\"\n}\n\nexport type StzhOlmapPostRenderEvent = {\n  component: \"stzh-olmap\"\n}\n\nexport type StzhOlmapMoveStartEvent = {\n  component: \"stzh-olmap\"\n}\n\nexport type StzhOlmapMoveEndEvent = {\n  component: \"stzh-olmap\"\n}\n\n/* Sticky */\n\nexport type StzhStickyStuckTopEvent = {\n  component: \"stzh-sticky\"\n  sticky: boolean\n}\n\nexport type StzhStickyStuckBottomEvent = {\n  component: \"stzh-sticky\"\n  sticky: boolean\n}\n\n/* Anchornav */\n\nexport type StzhAnchornavItem = {\n  label: string\n  href?: string\n  icon?: string\n}\n\nexport type StzhAnchornavItemClickEvent = {\n  component: \"stzh-anchornav\"\n  item: StzhAnchornavItem\n  originalEvent: MouseEvent\n}\n\n/* Actionset */\n\nexport type StzhActionsetItem = {\n  id: string\n  label?: string\n  icon?: string\n  iconPosition?: \"left\" | \"right\"\n  iconOnly?: boolean\n  badge?: string\n  badgeEmpty?: boolean\n  badgeType?: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\"\n  variant?:  \"default\" | \"secondary\" | \"input\" | \"tertiary\"\n  size?: \"default\" | \"small\" | \"tiny\"\n  badgePosition?: \"icon\" | \"button\"\n  tooltipContent?: string\n}\n\nexport type StzhActionsetItemClickEvent = {\n  component: \"stzh-actionset\"\n  action: StzhActionsetItem\n  originalEvent: MouseEvent\n}\n\n/* Audio */\n\nexport type StzhAudioPlayEvent = {\n  component: \"stzh-audio\"\n}\n\nexport type StzhAudioPlayingEvent = {\n  component: \"stzh-audio\"\n}\n\nexport type StzhAudioPauseEvent = {\n  component: \"stzh-audio\"\n}\n\nexport type StzhAudioReplayEvent = {\n  component: \"stzh-audio\"\n}\n\nexport type StzhAudioEndEvent = {\n  component: \"stzh-audio\"\n}\n\nexport type StzhAudioEndedEvent = {\n  component: \"stzh-audio\"\n}\n\nexport type StzhAudioErrorEvent = {\n  component: \"stzh-audio\"\n  originalEvent: ErrorEvent\n}\n\n/* Share */\n\nexport type ShareService = \"facebook\" | \"twitter\" | \"linkedin\" | \"xing\" | \"mail\";\n\n/* Card */\n\nexport type StzhCardHeaderAction = {\n  id: string\n  label?: string\n  icon?: string\n  badge?: string\n  badgeEmpty?: boolean\n  badgeType?: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\"\n  onlyCollapseText?: boolean\n}\n\nexport type StzhCardSubtitleClickEvent = {\n  component: \"stzh-card\"\n}\n\nexport type StzhCardCollapseEvent = {\n  component: \"stzh-card\"\n  collapsed: boolean\n}\n\nexport type StzhCardClickEvent = {\n  component: \"stzh-card\"\n  originalEvent: MouseEvent\n}\n\nexport type StzhCardStarClickEvent = {\n  component: \"stzh-card\"\n  starred: boolean\n}\n\nexport type StzhCardHeaderActionClickEvent = {\n  component: \"stzh-card\"\n  action: StzhCardHeaderAction\n}\n\n/* Microsite Teaserlist */\n\nexport type StzhMicrositeTeaserlistTag = {\n  id: string\n  name: string\n}\n\nexport type StzhMicrositeTeaserlistItem = {\n  title?: string\n  description?: string\n  image?: string\n  link: string\n  tags: string[]\n  teaserid: string\n}\n\n/* Card List */\n\nexport type StzhCardListCollapseAllEvent = {\n  component: \"stzh-card-list\"\n  allCollapsed: boolean\n}\n\n/* Calendar */\n\nexport type StzhCalendarChangeEvent = {\n  component: \"stzh-calendar\"\n  valueAsDate: Date\n  value: string\n}\n\n/* Datepicker */\n\nexport type StzhDatepickerChangeEvent = {\n  component: \"stzh-datepicker\"\n  value: string,\n  valueAsDate: Date\n}\n\n/* Appointments */\n\nexport type StzhAppointmentsChangeEvent = {\n  component: \"stzh-appointments\"\n  value: string\n}\n\n/* Checkbox */\n\nexport type StzhCheckboxChangeEvent = {\n  component: \"stzh-checkbox\"\n  originalEvent: InputEvent\n  value: string\n  checked: boolean\n}\n\nexport type StzhCheckboxFocusEvent = {\n  component: \"stzh-checkbox\"\n  originalEvent: FocusEvent\n}\n\nexport type StzhCheckboxBlurEvent = {\n  component: \"stzh-checkbox\"\n  originalEvent: FocusEvent\n}\n\n/* Toggle */\n\nexport type StzhToggleChangeEvent = {\n  component: \"stzh-toggle\"\n  originalEvent: InputEvent\n  value: string\n  checked: boolean\n}\n\nexport type StzhToggleFocusEvent = {\n  component: \"stzh-toggle\"\n  originalEvent: FocusEvent\n}\n\nexport type StzhToggleBlurEvent = {\n  component: \"stzh-toggle\"\n  originalEvent: FocusEvent\n}\n\n/* Button */\n\nexport type StzhButtonFocusEvent = {\n  component: \"stzh-button\"\n  originalEvent: FocusEvent\n}\n\nexport type StzhButtonBlurEvent = {\n  component: \"stzh-button\"\n  originalEvent: FocusEvent\n}\n\nexport type StzhButtonChangeEvent = {\n  component: \"stzh-button\"\n  originalEvent: InputEvent\n  value: string\n  checked: boolean\n}\n\n/* Link */\n\nexport type StzhLinkFocusEvent = {\n  component: \"stzh-link\"\n  originalEvent: FocusEvent\n}\n\nexport type StzhLinkBlurEvent = {\n  component: \"stzh-link\"\n  originalEvent: FocusEvent\n}\n\n/* Menu Item */\n\nexport type StzhMenuItemFocusEvent = {\n  component: \"stzh-menu-item\"\n  originalEvent: FocusEvent\n}\n\nexport type StzhMenuItemBlurEvent = {\n  component: \"stzh-menu-item\"\n  originalEvent: FocusEvent\n}\n\n/* Carousel */\n\nexport type StzhCarouselSlideStartEvent = {\n  component: \"stzh-carousel\"\n  index: number\n}\n\nexport type StzhCarouselSlidePassedEvent = {\n  component: \"stzh-carousel\"\n  index: number\n}\n\nexport type StzhCarouselSlideEndEvent = {\n  component: \"stzh-carousel\"\n  index: number\n}\n\n/* Chip Select */\n\nexport type StzhChipSelectChangeEvent = {\n  component: \"stzh-chip-select\"\n  value: string\n}\n\n/* Datalist */\n\nexport type StzhDatalistItemEntry = {\n  value: string\n  leadingIcon?: string\n  label?: string\n  meta?: string\n  icon?: string\n  iconLabel?: string\n  iconTooltip?: string\n  href?: string\n  rel?: string\n  target?: string\n  items?: StzhDatalistItemEntry[]\n}\n\nexport type StzhDatalistDirectionChangeEvent = {\n  component: \"stzh-datalist\"\n  value: \"vertical\" | \"horizontal\"\n}\n\nexport type StzhDatalistHideBorderChangeEvent = {\n  component: \"stzh-datalist\"\n  value: boolean\n}\n\n/* Datalist Item */\n\nexport type StzhDatalistItemActionClickEvent = {\n  component: \"stzh-datalist-item\"\n  originalEvent: MouseEvent\n}\n\n/* Datamessagelist */\n\nexport type StzhDatamessagelistItemEntryMeta = {\n  label: string\n  value: string\n}\n\nexport type StzhDatamessagelistItemEntryAction = {\n  id: string | number\n  icon: string\n  label: string,\n  badge?: string\n}\n\nexport type StzhDatamessagelistItemEntryTag = {\n  icon: string\n  label: string\n  type: \"default\" | \"important\"\n}\n\nexport type StzhDatamessagelistItemEntryLoadingStatus = {\n  percent: number\n  label: string\n  type: \"default\" | \"success\" | \"warning\" | \"error\"\n}\n\nexport type StzhDatamessagelistItemClickEvent = {\n  component: \"stzh-datamessagelist-item\",\n  originalEvent: MouseEvent\n}\n\nexport type StzhDatamessagelistItemActionClickEvent = {\n  component: \"stzh-datamessagelist-item\",\n  action: StzhDatamessagelistItemEntryAction,\n  originalEvent: MouseEvent\n}\n\n/* Chip */\n\nexport type StzhChipSelectItem = {\n  label: string\n  value: string\n  disabled?: boolean\n  variant?: \"tag\" | \"filter\" | \"input\"\n  type?: \"default\" | \"secondary\"\n  counter?: string\n  icon?: string\n  size?: \"default\" | \"small\"\n}\n\nexport type StzhChipClickEvent = {\n  component: \"stzh-chip\",\n  originalEvent: MouseEvent\n}\n\nexport type StzhChipRemoveEvent = {\n  component: \"stzh-chip\",\n  originalEvent: MouseEvent\n}\n\nexport type StzhChipFocusEvent = {\n  component: \"stzh-chip\"\n  originalEvent: FocusEvent\n}\n\nexport type StzhChipBlurEvent = {\n  component: \"stzh-chip\"\n  originalEvent: FocusEvent\n}\n\n/* VBZ Major Ticker */\n\nexport type StzhVbzMajortickerDisturbance = {\n  id: string\n  head: string\n  text: string\n  startDate: Date\n  endDate: Date\n  altStart: string\n  altEnd: string\n  infoUrl?: VbzTickerInfoUrl\n};\n\nexport type StzhVbzMajortickerDisturbanceFetchedEvent = {\n  component: \"stzh-vbz-majorticker\"\n  disturbance: StzhVbzMajortickerDisturbance | null\n}\n\n/* VBZ Ticker */\n\nexport type VbzTickerInfoUrl = {\n  name: string\n  url: string\n};\n\nexport type VbzTickerDisturbance = {\n  id: string\n  head: string\n  startDate: Date\n  endDate: Date\n  altStart: string\n  altEnd: string\n  baseType?: string\n  infoUrl?: VbzTickerInfoUrl\n  category:\n    | typeof VBZ.DISTURBANCE_INFORMATION\n    | typeof VBZ.DISTURBANCE_CONSTRUCTION\n    | typeof VBZ.DISTURBANCE_NORMAL\n    | typeof VBZ.DISTURBANCE_EVENT\n    | typeof VBZ.DISTURBANCE_BUS\n};\n\nexport type VbzTickerLine = {\n  line: VBZ.Lines\n  name: string\n  disturbances: VbzTickerDisturbance[]\n  // whether normal or big disturbance for this line exist\n  alert: boolean\n  // 2 = Fernverkehr / 16 = Schiff / 32 = S-Bahn/Reg / 64 = Bus / 128 = Bergbahn / 256 = Nachtnetz / 512 = Tram\n  category: \"2\" | \"16\" | \"32\" | \"64\" | \"128\" | \"256\" | \"512\"\n};\n\n/* VBZ Line Chip */\n\nexport type StzhVbzLinechipLine = {\n  color: string\n  background: string\n  comment?: string\n}\n\nexport type StzhVbzLinechipFocusEvent = {\n  component: \"stzh-vbz-linechip\"\n  originalEvent: FocusEvent\n}\n\nexport type StzhVbzLinechipBlurEvent = {\n  component: \"stzh-vbz-linechip\"\n  originalEvent: FocusEvent\n}\n\n/* Clamp */\n\nexport type StzhClampClampEvent = {\n  component: \"stzh-clamp\"\n  clamped: boolean\n}\n\nexport type StzhClampExpandEvent = {\n  component: \"stzh-clamp\"\n  expanded: boolean\n}\n\n/* Dialog */\n\nexport type StzhDialogOpenEvent = {\n  component: \"stzh-dialog\"\n}\n\nexport type StzhDialogCloseEvent = {\n  component: \"stzh-dialog\"\n}\n\n/* Contact */\n\nexport type ContactNumber = {\n  type: \"tel\" | \"fax\"\n  label: string\n  number: string\n  analyticsId?: string\n}\n\nexport type StzhContactAvailabilityItem = {\n  weekday: string\n  hours: string[]\n}\n\n/* Overlay */\n\nexport type StzhOverlayOpenEvent = {\n  component: \"stzh-overlay\"\n}\n\nexport type StzhOverlayCloseEvent = {\n  component: \"stzh-overlay\"\n}\n\n/* Message */\n\nexport type StzhMessageOpenEvent = {\n  component: \"stzh-message\"\n}\n\nexport type StzhMessageCloseEvent = {\n  component: \"stzh-message\"\n}\n\n/* Ghettobox */\n\nexport type StzhGhettoboxOpenEvent = {\n  component: \"stzh-ghettobox\"\n}\n\nexport type StzhGhettoboxCloseEvent = {\n  component: \"stzh-ghettobox\"\n}\n\n/* Input */\n\nexport type StzhInputChangeEvent = {\n  component: \"stzh-input\"\n  originalEvent: InputEvent | MouseEvent\n  value: string\n}\n\nexport type StzhInputFocusEvent = {\n  component: \"stzh-input\"\n  originalEvent: FocusEvent\n}\n\nexport type StzhInputBlurEvent = {\n  component: \"stzh-input\"\n  originalEvent: FocusEvent\n}\n\n/* Popover */\n\nexport type StzhPopoverOpenEvent = {\n  component: \"stzh-popover\"\n}\n\nexport type StzhPopoverOpenedEvent = {\n  component: \"stzh-popover\"\n}\n\nexport type StzhPopoverCloseEvent = {\n  component: \"stzh-popover\"\n}\n\nexport type StzhPopoverClosedEvent = {\n  component: \"stzh-popover\"\n}\n\n/* Accordion */\n\nexport type StzhAccordionItemOpenEvent = {\n  component: \"stzh-accordion-item\"\n}\n\nexport type StzhAccordionItemOpenedEvent = {\n  component: \"stzh-accordion-item\"\n}\n\nexport type StzhAccordionItemCloseEvent = {\n  component: \"stzh-accordion-item\"\n}\n\nexport type StzhAccordionItemClosedEvent = {\n  component: \"stzh-accordion-item\"\n}\n\nexport type StzhAccordionItemFocusEvent = {\n  component: \"stzh-accordion-item\"\n  originalEvent: FocusEvent\n}\n\nexport type StzhAccordionItemBlurEvent = {\n  component: \"stzh-accordion-item\"\n  originalEvent: FocusEvent\n}\n\n/* Tooltip */\n\nexport type StzhTooltipOpenEvent = {\n  component: \"stzh-tooltip\"\n}\n\nexport type StzhTooltipOpenedEvent = {\n  component: \"stzh-tooltip\"\n}\n\nexport type StzhTooltipCloseEvent = {\n  component: \"stzh-tooltip\"\n}\n\nexport type StzhTooltipClosedEvent = {\n  component: \"stzh-tooltip\"\n}\n\n/* Radio */\n\nexport type StzhRadioChangeEvent = {\n  component: \"stzh-radio\"\n  originalEvent: InputEvent\n  value: string\n  checked: boolean\n}\n\nexport type StzhRadioFocusEvent = {\n  component: \"stzh-radio\"\n  originalEvent: FocusEvent\n}\n\nexport type StzhRadioBlurEvent = {\n  component: \"stzh-radio\"\n  originalEvent: FocusEvent\n}\n\n/* Langnav */\n\nexport type StzhLangnavChangeEvent = {\n  component: \"stzh-langnav\",\n  value: string\n}\n\n/* Dropdown */\n\nexport type StzhDropdownChangeEvent = {\n  component: \"stzh-dropdown\",\n  value: string\n}\n\nexport type StzhDropdownItemAddEvent = {\n  component: \"stzh-dropdown\",\n  value: string\n}\n\nexport type StzhDropdownItemRemoveEvent = {\n  component: \"stzh-dropdown\",\n  value: string\n}\n\nexport type StzhDropdownOptionAddEvent = {\n  component: \"stzh-dropdown\",\n  value: string\n}\n\nexport type StzhDropdownOptionRemoveEvent = {\n  component: \"stzh-dropdown\",\n  value: string\n}\n\nexport type StzhDropdownOpenEvent = {\n  component: \"stzh-dropdown\"\n}\n\nexport type StzhDropdowCloseEvent = {\n  component: \"stzh-dropdown\"\n}\n\nexport type StzhDropdownFocusEvent = {\n  component: \"stzh-dropdown\"\n  originalEvent: {\n    target: Element\n  }\n}\n\nexport type StzhDropdownBlurEvent = {\n  component: \"stzh-dropdown\"\n}\n\nexport type StzhDropdowInitEvent = {\n  component: \"stzh-dropdown\"\n}\n\n/** Progressbar */\n\nexport type StzhProgressbarDataItem = {\n  label: string\n  icon?: string\n  disabled?: boolean\n  analyticsId?: string\n}\n\n/* Progressbar Item */\n\nexport type StzhProgressbarItemClickEvent = {\n  component: \"stzh-progressbar-item\",\n  originalEvent: MouseEvent\n}\n\nexport type StzhProgressbarItemDottedClickEvent = {\n  component: \"stzh-progressbar-item\",\n  originalEvent: MouseEvent\n}\n\n/* Upload */\n\nexport type StzhUploadFilesItem = {\n  name: string\n  size: number\n  [key: string]: any\n}\n\nexport type StzhUploadFile = File & {\n  xhr: XMLHttpRequest,\n  status: string\n  upload: any\n  accepted: boolean\n  previewElement: HTMLElement\n}\n\nexport type StzhUploadFileAddedEvent = {\n  component: \"stzh-upload\",\n  file: StzhUploadFile\n}\n\nexport type StzhUploadFilesAddedEvent = {\n  component: \"stzh-upload\",\n  files: StzhUploadFile[]\n}\n\nexport type StzhUploadFileRemoveEvent = {\n  component: \"stzh-upload\",\n  file: StzhUploadFile\n}\n\nexport type StzhUploadFileRemovedEvent = {\n  component: \"stzh-upload\",\n  file: StzhUploadFile\n}\n\nexport type StzhUploadSendingEvent = {\n  component: \"stzh-upload\",\n  file: StzhUploadFile,\n  xhr: XMLHttpRequest,\n  formData: FormData\n}\n\nexport type StzhUploadSendingMultipleEvent = {\n  component: \"stzh-upload\",\n  files: StzhUploadFile[],\n  xhr: XMLHttpRequest,\n  formData: FormData\n}\n\nexport type StzhUploadProcessingEvent = {\n  component: \"stzh-upload\",\n  file: StzhUploadFile\n}\n\nexport type StzhUploadProcessingMultipleEvent = {\n  component: \"stzh-upload\",\n  files: StzhUploadFile[]\n}\n\nexport type StzhUploadProgressEvent = {\n  component: \"stzh-upload\",\n  file: StzhUploadFile,\n  progress: number,\n  bytesSent: number\n}\n\nexport type StzhUploadProgressTotalEvent = {\n  component: \"stzh-upload\",\n  totalUploadProgress: number,\n  totalBytes: number,\n  totalBytesSent: number\n}\n\nexport type StzhUploadErrorEvent = {\n  component: \"stzh-upload\",\n  file: StzhUploadFile,\n  message: string,\n  xhr: XMLHttpRequest\n}\n\nexport type StzhUploadErrorMultipleEvent = {\n  component: \"stzh-upload\",\n  files: StzhUploadFile[],\n  message: string,\n  xhr: XMLHttpRequest\n}\n\nexport type StzhUploadSuccessEvent = {\n  component: \"stzh-upload\",\n  file: StzhUploadFile,\n  responseText: string,\n  event: ProgressEvent\n}\n\nexport type StzhUploadSuccessMultipleEvent = {\n  component: \"stzh-upload\",\n  files: StzhUploadFile[],\n  responseText: string,\n  event: ProgressEvent\n}\n\nexport type StzhUploadCanceledEvent = {\n  component: \"stzh-upload\",\n  file: StzhUploadFile\n}\n\nexport type StzhUploadCanceledMultipleEvent = {\n  component: \"stzh-upload\",\n  files: StzhUploadFile[]\n}\n\nexport type StzhUploadCompleteEvent = {\n  component: \"stzh-upload\",\n  file: StzhUploadFile\n}\n\nexport type StzhUploadCompleteMultipleEvent = {\n  component: \"stzh-upload\",\n  files: StzhUploadFile[]\n}\n\n// Merged Types\n\nexport type StzhFocusEvent =\n  | StzhAccordionItemFocusEvent\n  | StzhButtonFocusEvent\n  | StzhCheckboxFocusEvent\n  | StzhChipFocusEvent\n  | StzhDropdownFocusEvent\n  | StzhInputFocusEvent\n  | StzhLinkFocusEvent\n  | StzhMenuItemFocusEvent\n  | StzhRadioFocusEvent\n  | StzhToggleFocusEvent\n  | StzhVbzLinechipFocusEvent\n\n// ---\n// Prop Types\n// ---\n\nexport type StzhCalendarDateDisabledPredicate = (date: Date) => boolean\n\nexport namespace Layout {\n  export type Justify =\n    | \"start\"\n    | \"end\"\n    | \"center\"\n    | \"between\"\n    | \"around\"\n    | \"evenly\";\n\n  export type Items =\n    | \"start\"\n    | \"end\"\n    | \"center\"\n    | \"baseline\"\n    | \"stretch\";\n\n  export type JustifySelf =\n    | \"auto\"\n    | Justify;\n\n  export type AlignSelf =\n    | \"auto\"\n    | Items;\n}\n\nexport namespace Space {\n  export type Sizes =\n    | \"xxxsmall\"\n    | \"xxsmall\"\n    | \"xsmall\"\n    | \"small\"\n    | \"medium\"\n    | \"large\"\n    | \"xlarge\"\n    | \"xxlarge\"\n    | \"xxxlarge\"\n    | \"xxxxlarge\"\n    | \"big\"\n    | \"xbig\"\n    | \"huge\"\n    | \"xhuge\"\n    | \"none\"\n    | \"inherit\";\n\n    export type Curves =\n    | \"tiny\"\n    | \"small\"\n    | \"regular\"\n    | \"medium\"\n    | \"large\"\n    | \"big\"\n    | \"huge\"\n    | \"none\";\n}\n\nexport namespace Font {\n  export type Fonts =\n    | \"light\"\n    | \"regular\"\n    | \"medium\"\n    | \"heavy\"\n    | \"default\";\n\n  export type Sizes =\n    | \"pico\"\n    | \"nano\"\n    | \"micro\"\n    | \"milli\"\n    | \"centi\"\n    | \"deci\"\n    | \"regular\"\n    | \"deca\"\n    | \"hecto\"\n    | \"kilo\"\n    | \"mega\"\n    | \"giga\"\n    | \"hero\"\n    | \"inherit\";\n\n  export type Curves =\n    | \"p1\"\n    | \"p2\"\n    | \"caption\"\n    | \"h4\"\n    | \"h3\"\n    | \"h2\"\n    | \"h1\"\n    | \"hero\"\n    | \"default\";\n}\n\nexport namespace VBZ {\n  export const BASE_TYPE_GLOBAL = \"GLOBAL\";\n\n  export const CHANNEL_TICKER = \"ticker\";\n  export const CHANNEL_INFO_URL_FILTER = \"stadt-zuerich.ch/vbz\";\n\n  export const DISTURBANCE_GLOBAL = \"__global__\";\n  export const DISTURBANCE_INFORMATION = \"0\";\n  export const DISTURBANCE_CONSTRUCTION = \"1\";\n  export const DISTURBANCE_NORMAL = \"2\";\n  export const DISTURBANCE_EVENT = \"4\";\n  export const DISTURBANCE_BUS = \"5\";\n\n  export type Lines =\n    | \"2\"\n    | \"3\"\n    | \"4\"\n    | \"5\"\n    | \"6\"\n    | \"7\"\n    | \"8\"\n    | \"9\"\n    | \"10\"\n    | \"11\"\n    | \"12\"\n    | \"13\"\n    | \"14\"\n    | \"15\"\n    | \"16\"\n    | \"17\"\n    | \"19\"\n    | \"20\"\n    | \"21\"\n    | \"23\"\n    | \"24\"\n    | \"25\"\n    | \"29\"\n    | \"31\"\n    | \"32\"\n    | \"33\"\n    | \"34\"\n    | \"35\"\n    | \"36\"\n    | \"37\"\n    | \"38\"\n    | \"39\"\n    | \"40\"\n    | \"45\"\n    | \"46\"\n    | \"54\"\n    | \"61\"\n    | \"62\"\n    | \"63\"\n    | \"64\"\n    | \"66\"\n    | \"67\"\n    | \"69\"\n    | \"70\"\n    | \"72\"\n    | \"73\"\n    | \"75\"\n    | \"76\"\n    | \"77\"\n    | \"78\"\n    | \"79\"\n    | \"80\"\n    | \"83\"\n    | \"89\"\n    | \"91\"\n    | \"94\"\n    | \"95\"\n    | \"99\"\n    | \"151\"\n    | \"152\"\n    | \"153\"\n    | \"156\"\n    | \"161\"\n    | \"162\"\n    | \"163\"\n    | \"165\"\n    | \"184\"\n    | \"185\"\n    | \"200\"\n    | \"201\"\n    | \"215\"\n    | \"220\"\n    | \"235\"\n    | \"236\"\n    | \"245\"\n    | \"301\"\n    | \"302\"\n    | \"303\"\n    | \"304\"\n    | \"305\"\n    | \"306\"\n    | \"307\"\n    | \"308\"\n    | \"309\"\n    | \"311\"\n    | \"314\"\n    | \"315\"\n    | \"317\"\n    | \"321\"\n    | \"323\"\n    | \"325\"\n    | \"350\"\n    | \"444\"\n    | \"445\"\n    | \"701\"\n    | \"702\"\n    | \"703\"\n    | \"704\"\n    | \"705\"\n    | \"720\"\n    | \"721\"\n    | \"725\"\n    | \"726\"\n    | \"727\"\n    | \"742\"\n    | \"743\"\n    | \"744\"\n    | \"745\"\n    | \"747\"\n    | \"748\"\n    | \"751\"\n    | \"752\"\n    | \"753\"\n    | \"754\"\n    | \"759\"\n    | \"760\"\n    | \"765\"\n    | \"768\"\n    | \"781\"\n    | \"786\"\n    | \"787\"\n    | \"910\"\n    | \"912\"\n    | \"916\"\n    | \"917\"\n    | \"918\"\n    | \"919\"\n    | \"E\"\n    | \"N\"\n    | \"N1\"\n    | \"N2\"\n    | \"N4\"\n    | \"N5\"\n    | \"N6\"\n    | \"N7\"\n    | \"N8\"\n    | \"N9\"\n    | \"N10\"\n    | \"N11\"\n    | \"N12\"\n    | \"N13\"\n    | \"N14\"\n    | \"N15\"\n    | \"N16\"\n    | \"N17\"\n    | \"N18\"\n    | \"N19\"\n    | \"N30\"\n    | \"N31\"\n    | \"N32\"\n    | \"N33\"\n    | \"N34\"\n    | \"N45\"\n    | \"N72\"\n    | \"N78\"\n    | \"SN1\"\n    | \"SN4\"\n    | \"SN5\"\n    | \"SN6\"\n    | \"SN7\"\n    | \"SN8\"\n    | \"SN9\"\n    | \"S2\"\n    | \"S3\"\n    | \"S4\"\n    | \"S5\"\n    | \"S6\"\n    | \"S7\"\n    | \"S8\"\n    | \"S9\"\n    | \"S10\"\n    | \"S11\"\n    | \"S14\"\n    | \"S15\"\n    | \"S16\"\n    | \"S18\"\n    | \"S19\"\n    | \"S20\"\n    | \"S21\"\n    | \"S23\"\n    | \"S24\"\n    | \"S25\"\n}\n\n// ---\n// Stencil component types\n// ---\n\nexport * from './components';\n"],"mappings":"2FAy+BiBA,GAAjB,SAAiBA,GACFA,EAAAC,iBAAmB,SAEnBD,EAAAE,eAAiB,SACjBF,EAAAG,wBAA0B,uBAE1BH,EAAAI,mBAAqB,aACrBJ,EAAAK,wBAA0B,IAC1BL,EAAAM,yBAA2B,IAC3BN,EAAAO,mBAAqB,IACrBP,EAAAQ,kBAAoB,IACpBR,EAAAS,gBAAkB,GAyLhC,EApMD,CAAiBT,MAAGU,EAAA,W"}
+{"version":3,"names":["VBZ","BASE_TYPE_GLOBAL","CHANNEL_TICKER","CHANNEL_INFO_URL_FILTER","DISTURBANCE_GLOBAL","DISTURBANCE_INFORMATION","DISTURBANCE_CONSTRUCTION","DISTURBANCE_NORMAL","DISTURBANCE_EVENT","DISTURBANCE_BUS","exports"],"sources":["src/index.ts"],"sourcesContent":["// ---\n// Global window types\n// ---\n\nimport {\n  StzhLocaleFormats\n} from './utils/translation-utils';\n\nexport type WindowStzhComponents = {\n  version: string\n  locale: string\n  pathMedia: string\n  pathTranslations: string\n  cacheTranslations: boolean\n  formats: StzhLocaleFormats\n  labels: \"flyout\" | \"fixed\"\n}\n\ndeclare global {\n  interface Window {\n    stzhComponents: WindowStzhComponents\n    Dropzone: any\n    // readspeaker lib APIs\n    ReadSpeaker: any\n    rspkr: any\n    proj4: any\n  }\n}\n\n// ---\n// Event Types\n// ---\n\n/* Sortable */\n\nexport type StzhSortableUpdateEvent = {\n  component: \"stzh-sortable\"\n  data: string[]\n  item: HTMLElement\n  newIndex: number\n  oldIndex: number\n}\n\nexport type StzhSortableDisableEvent = {\n  component: \"stzh-sortable\"\n  disabled: boolean\n}\n\n/* Olmap */\n\nexport type OlmapLayer = {\n  title?: string,\n  thumbnailUrl: string,\n  options: {\n    url: string,\n    layer: string,\n    matrixSet: string,\n    origin: number[],\n    extent: number[]\n  }\n}\n\nexport type StzhOlmapInitializedEvent = {\n  component: \"stzh-olmap\"\n}\n\nexport type StzhOlmapPostRenderEvent = {\n  component: \"stzh-olmap\"\n}\n\nexport type StzhOlmapMoveStartEvent = {\n  component: \"stzh-olmap\"\n}\n\nexport type StzhOlmapMoveEndEvent = {\n  component: \"stzh-olmap\"\n}\n\n/* Sticky */\n\nexport type StzhStickyStuckTopEvent = {\n  component: \"stzh-sticky\"\n  sticky: boolean\n}\n\nexport type StzhStickyStuckBottomEvent = {\n  component: \"stzh-sticky\"\n  sticky: boolean\n}\n\n/* Anchornav */\n\nexport type StzhAnchornavItem = {\n  label: string\n  href?: string\n  icon?: string\n}\n\nexport type StzhAnchornavItemClickEvent = {\n  component: \"stzh-anchornav\"\n  item: StzhAnchornavItem\n  originalEvent: MouseEvent\n}\n\n/* Actionset */\n\nexport type StzhActionsetItem = {\n  id: string\n  label?: string\n  icon?: string\n  iconPosition?: \"left\" | \"right\"\n  iconOnly?: boolean\n  badge?: string\n  badgeEmpty?: boolean\n  badgeType?: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\"\n  variant?:  \"default\" | \"secondary\" | \"input\" | \"tertiary\"\n  size?: \"default\" | \"small\" | \"tiny\"\n  badgePosition?: \"icon\" | \"button\"\n  tooltipContent?: string\n}\n\nexport type StzhActionsetItemClickEvent = {\n  component: \"stzh-actionset\"\n  action: StzhActionsetItem\n  originalEvent: MouseEvent\n}\n\n/* Audio */\n\nexport type StzhAudioPlayEvent = {\n  component: \"stzh-audio\"\n}\n\nexport type StzhAudioPlayingEvent = {\n  component: \"stzh-audio\"\n}\n\nexport type StzhAudioPauseEvent = {\n  component: \"stzh-audio\"\n}\n\nexport type StzhAudioReplayEvent = {\n  component: \"stzh-audio\"\n}\n\nexport type StzhAudioEndEvent = {\n  component: \"stzh-audio\"\n}\n\nexport type StzhAudioEndedEvent = {\n  component: \"stzh-audio\"\n}\n\nexport type StzhAudioErrorEvent = {\n  component: \"stzh-audio\"\n  originalEvent: ErrorEvent\n}\n\n/* Share */\n\nexport type ShareService = \"facebook\" | \"twitter\" | \"linkedin\" | \"xing\" | \"mail\";\n\n/* Card */\n\nexport type StzhCardHeaderAction = {\n  id: string\n  label?: string\n  icon?: string\n  badge?: string\n  badgeEmpty?: boolean\n  badgeType?: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\"\n  onlyCollapseText?: boolean\n}\n\nexport type StzhCardSubtitleClickEvent = {\n  component: \"stzh-card\"\n}\n\nexport type StzhCardCollapseEvent = {\n  component: \"stzh-card\"\n  collapsed: boolean\n}\n\nexport type StzhCardClickEvent = {\n  component: \"stzh-card\"\n  originalEvent: MouseEvent\n}\n\nexport type StzhCardStarClickEvent = {\n  component: \"stzh-card\"\n  starred: boolean\n}\n\nexport type StzhCardHeaderActionClickEvent = {\n  component: \"stzh-card\"\n  action: StzhCardHeaderAction\n}\n\n/* Microsite Teaserlist */\n\nexport type StzhMicrositeTeaserlistTag = {\n  id: string\n  name: string\n}\n\nexport type StzhMicrositeTeaserlistItem = {\n  title?: string\n  description?: string\n  image?: string\n  link: string\n  tags: string[]\n  teaserid: string\n}\n\n/* Card List */\n\nexport type StzhCardListCollapseAllEvent = {\n  component: \"stzh-card-list\"\n  allCollapsed: boolean\n}\n\n/* Calendar */\n\nexport type StzhCalendarChangeEvent = {\n  component: \"stzh-calendar\"\n  valueAsDate: Date\n  value: string\n}\n\n/* Datepicker */\n\nexport type StzhDatepickerChangeEvent = {\n  component: \"stzh-datepicker\"\n  value: string,\n  valueAsDate: Date\n}\n\n/* Timepicker */\n\nexport type StzhTimepickerChangeEvent = {\n  component: \"stzh-timepicker\"\n  value: string\n}\n\n/* Monthyearpicker */\n\nexport type StzhMonthyearpickerChangeEvent = {\n  component: \"stzh-monthyearpicker\"\n  value: string\n  valueMonth: string\n  valueYear: string\n}\n\n/* Amount */\n\nexport type StzhAmountChangeEvent = {\n  component: \"stzh-amount\"\n  value: string\n}\n\n/* Appointments */\n\nexport type StzhAppointmentsChangeEvent = {\n  component: \"stzh-appointments\"\n  value: string\n}\n\n/* Checkbox */\n\nexport type StzhCheckboxChangeEvent = {\n  component: \"stzh-checkbox\"\n  originalEvent: InputEvent\n  value: string\n  checked: boolean\n}\n\nexport type StzhCheckboxFocusEvent = {\n  component: \"stzh-checkbox\"\n  originalEvent: FocusEvent\n}\n\nexport type StzhCheckboxBlurEvent = {\n  component: \"stzh-checkbox\"\n  originalEvent: FocusEvent\n}\n\n/* Toggle */\n\nexport type StzhToggleChangeEvent = {\n  component: \"stzh-toggle\"\n  originalEvent: InputEvent\n  value: string\n  checked: boolean\n}\n\nexport type StzhToggleFocusEvent = {\n  component: \"stzh-toggle\"\n  originalEvent: FocusEvent\n}\n\nexport type StzhToggleBlurEvent = {\n  component: \"stzh-toggle\"\n  originalEvent: FocusEvent\n}\n\n/* Button */\n\nexport type StzhButtonFocusEvent = {\n  component: \"stzh-button\"\n  originalEvent: FocusEvent\n}\n\nexport type StzhButtonBlurEvent = {\n  component: \"stzh-button\"\n  originalEvent: FocusEvent\n}\n\nexport type StzhButtonChangeEvent = {\n  component: \"stzh-button\"\n  originalEvent: InputEvent\n  value: string\n  checked: boolean\n}\n\n/* Link */\n\nexport type StzhLinkFocusEvent = {\n  component: \"stzh-link\"\n  originalEvent: FocusEvent\n}\n\nexport type StzhLinkBlurEvent = {\n  component: \"stzh-link\"\n  originalEvent: FocusEvent\n}\n\n/* Menu Item */\n\nexport type StzhMenuItemFocusEvent = {\n  component: \"stzh-menu-item\"\n  originalEvent: FocusEvent\n}\n\nexport type StzhMenuItemBlurEvent = {\n  component: \"stzh-menu-item\"\n  originalEvent: FocusEvent\n}\n\n/* Carousel */\n\nexport type StzhCarouselSlideStartEvent = {\n  component: \"stzh-carousel\"\n  index: number\n}\n\nexport type StzhCarouselSlidePassedEvent = {\n  component: \"stzh-carousel\"\n  index: number\n}\n\nexport type StzhCarouselSlideEndEvent = {\n  component: \"stzh-carousel\"\n  index: number\n}\n\n/* Chip Select */\n\nexport type StzhChipSelectChangeEvent = {\n  component: \"stzh-chip-select\"\n  value: string\n}\n\n/* Datalist */\n\nexport type StzhDatalistItemEntry = {\n  value: string\n  leadingIcon?: string\n  label?: string\n  meta?: string\n  icon?: string\n  iconLabel?: string\n  iconTooltip?: string\n  href?: string\n  rel?: string\n  target?: string\n  items?: StzhDatalistItemEntry[]\n}\n\nexport type StzhDatalistDirectionChangeEvent = {\n  component: \"stzh-datalist\"\n  value: \"vertical\" | \"horizontal\"\n}\n\nexport type StzhDatalistHideBorderChangeEvent = {\n  component: \"stzh-datalist\"\n  value: boolean\n}\n\n/* Datalist Item */\n\nexport type StzhDatalistItemActionClickEvent = {\n  component: \"stzh-datalist-item\"\n  originalEvent: MouseEvent\n}\n\n/* Datamessagelist */\n\nexport type StzhDatamessagelistItemEntryMeta = {\n  label: string\n  value: string\n}\n\nexport type StzhDatamessagelistItemEntryAction = {\n  id: string | number\n  icon: string\n  label: string,\n  badge?: string\n}\n\nexport type StzhDatamessagelistItemEntryTag = {\n  icon: string\n  label: string\n  type: \"default\" | \"important\"\n}\n\nexport type StzhDatamessagelistItemEntryLoadingStatus = {\n  percent: number\n  label: string\n  type: \"default\" | \"success\" | \"warning\" | \"error\"\n}\n\nexport type StzhDatamessagelistItemClickEvent = {\n  component: \"stzh-datamessagelist-item\",\n  originalEvent: MouseEvent\n}\n\nexport type StzhDatamessagelistItemActionClickEvent = {\n  component: \"stzh-datamessagelist-item\",\n  action: StzhDatamessagelistItemEntryAction,\n  originalEvent: MouseEvent\n}\n\n/* Chip */\n\nexport type StzhChipSelectItem = {\n  label: string\n  value: string\n  disabled?: boolean\n  variant?: \"tag\" | \"filter\" | \"input\"\n  type?: \"default\" | \"secondary\"\n  counter?: string\n  icon?: string\n  size?: \"default\" | \"small\"\n}\n\nexport type StzhChipClickEvent = {\n  component: \"stzh-chip\",\n  originalEvent: MouseEvent\n}\n\nexport type StzhChipRemoveEvent = {\n  component: \"stzh-chip\",\n  originalEvent: MouseEvent\n}\n\nexport type StzhChipFocusEvent = {\n  component: \"stzh-chip\"\n  originalEvent: FocusEvent\n}\n\nexport type StzhChipBlurEvent = {\n  component: \"stzh-chip\"\n  originalEvent: FocusEvent\n}\n\n/* VBZ Major Ticker */\n\nexport type StzhVbzMajortickerDisturbance = {\n  id: string\n  head: string\n  text: string\n  startDate: Date\n  endDate: Date\n  altStart: string\n  altEnd: string\n  infoUrl?: VbzTickerInfoUrl\n};\n\nexport type StzhVbzMajortickerDisturbanceFetchedEvent = {\n  component: \"stzh-vbz-majorticker\"\n  disturbance: StzhVbzMajortickerDisturbance | null\n}\n\n/* VBZ Ticker */\n\nexport type VbzTickerInfoUrl = {\n  name: string\n  url: string\n};\n\nexport type VbzTickerDisturbance = {\n  id: string\n  head: string\n  startDate: Date\n  endDate: Date\n  altStart: string\n  altEnd: string\n  baseType?: string\n  infoUrl?: VbzTickerInfoUrl\n  category:\n    | typeof VBZ.DISTURBANCE_INFORMATION\n    | typeof VBZ.DISTURBANCE_CONSTRUCTION\n    | typeof VBZ.DISTURBANCE_NORMAL\n    | typeof VBZ.DISTURBANCE_EVENT\n    | typeof VBZ.DISTURBANCE_BUS\n};\n\nexport type VbzTickerLine = {\n  line: VBZ.Lines\n  name: string\n  disturbances: VbzTickerDisturbance[]\n  // whether normal or big disturbance for this line exist\n  alert: boolean\n  // 2 = Fernverkehr / 16 = Schiff / 32 = S-Bahn/Reg / 64 = Bus / 128 = Bergbahn / 256 = Nachtnetz / 512 = Tram\n  category: \"2\" | \"16\" | \"32\" | \"64\" | \"128\" | \"256\" | \"512\"\n};\n\n/* VBZ Line Chip */\n\nexport type StzhVbzLinechipLine = {\n  color: string\n  background: string\n  comment?: string\n}\n\nexport type StzhVbzLinechipFocusEvent = {\n  component: \"stzh-vbz-linechip\"\n  originalEvent: FocusEvent\n}\n\nexport type StzhVbzLinechipBlurEvent = {\n  component: \"stzh-vbz-linechip\"\n  originalEvent: FocusEvent\n}\n\n/* Clamp */\n\nexport type StzhClampClampEvent = {\n  component: \"stzh-clamp\"\n  clamped: boolean\n}\n\nexport type StzhClampExpandEvent = {\n  component: \"stzh-clamp\"\n  expanded: boolean\n}\n\n/* Dialog */\n\nexport type StzhDialogOpenEvent = {\n  component: \"stzh-dialog\"\n}\n\nexport type StzhDialogCloseEvent = {\n  component: \"stzh-dialog\"\n}\n\n/* Contact */\n\nexport type ContactNumber = {\n  type: \"tel\" | \"fax\"\n  label: string\n  number: string\n  analyticsId?: string\n}\n\nexport type StzhContactAvailabilityItem = {\n  weekday: string\n  hours: string[]\n}\n\n/* Overlay */\n\nexport type StzhOverlayOpenEvent = {\n  component: \"stzh-overlay\"\n}\n\nexport type StzhOverlayCloseEvent = {\n  component: \"stzh-overlay\"\n}\n\n/* Message */\n\nexport type StzhMessageOpenEvent = {\n  component: \"stzh-message\"\n}\n\nexport type StzhMessageCloseEvent = {\n  component: \"stzh-message\"\n}\n\n/* Ghettobox */\n\nexport type StzhGhettoboxOpenEvent = {\n  component: \"stzh-ghettobox\"\n}\n\nexport type StzhGhettoboxCloseEvent = {\n  component: \"stzh-ghettobox\"\n}\n\n/* Input */\n\nexport type StzhInputChangeEvent = {\n  component: \"stzh-input\"\n  originalEvent: InputEvent | MouseEvent\n  value: string\n}\n\nexport type StzhInputFocusEvent = {\n  component: \"stzh-input\"\n  originalEvent: FocusEvent\n}\n\nexport type StzhInputBlurEvent = {\n  component: \"stzh-input\"\n  originalEvent: FocusEvent\n}\n\n/* Popover */\n\nexport type StzhPopoverOpenEvent = {\n  component: \"stzh-popover\"\n}\n\nexport type StzhPopoverOpenedEvent = {\n  component: \"stzh-popover\"\n}\n\nexport type StzhPopoverCloseEvent = {\n  component: \"stzh-popover\"\n}\n\nexport type StzhPopoverClosedEvent = {\n  component: \"stzh-popover\"\n}\n\n/* Accordion */\n\nexport type StzhAccordionItemOpenEvent = {\n  component: \"stzh-accordion-item\"\n}\n\nexport type StzhAccordionItemOpenedEvent = {\n  component: \"stzh-accordion-item\"\n}\n\nexport type StzhAccordionItemCloseEvent = {\n  component: \"stzh-accordion-item\"\n}\n\nexport type StzhAccordionItemClosedEvent = {\n  component: \"stzh-accordion-item\"\n}\n\nexport type StzhAccordionItemFocusEvent = {\n  component: \"stzh-accordion-item\"\n  originalEvent: FocusEvent\n}\n\nexport type StzhAccordionItemBlurEvent = {\n  component: \"stzh-accordion-item\"\n  originalEvent: FocusEvent\n}\n\n/* Tooltip */\n\nexport type StzhTooltipOpenEvent = {\n  component: \"stzh-tooltip\"\n}\n\nexport type StzhTooltipOpenedEvent = {\n  component: \"stzh-tooltip\"\n}\n\nexport type StzhTooltipCloseEvent = {\n  component: \"stzh-tooltip\"\n}\n\nexport type StzhTooltipClosedEvent = {\n  component: \"stzh-tooltip\"\n}\n\n/* Radio */\n\nexport type StzhRadioChangeEvent = {\n  component: \"stzh-radio\"\n  originalEvent: InputEvent\n  value: string\n  checked: boolean\n}\n\nexport type StzhRadioFocusEvent = {\n  component: \"stzh-radio\"\n  originalEvent: FocusEvent\n}\n\nexport type StzhRadioBlurEvent = {\n  component: \"stzh-radio\"\n  originalEvent: FocusEvent\n}\n\n/* Langnav */\n\nexport type StzhLangnavChangeEvent = {\n  component: \"stzh-langnav\",\n  value: string\n}\n\n/* Dropdown */\n\nexport type StzhDropdownOption = {\n  text: string,\n  value: string\n}\n\nexport type StzhDropdownChangeEvent = {\n  component: \"stzh-dropdown\",\n  value: string\n}\n\nexport type StzhDropdownItemAddEvent = {\n  component: \"stzh-dropdown\",\n  value: string\n}\n\nexport type StzhDropdownItemRemoveEvent = {\n  component: \"stzh-dropdown\",\n  value: string\n}\n\nexport type StzhDropdownOptionAddEvent = {\n  component: \"stzh-dropdown\",\n  value: string\n}\n\nexport type StzhDropdownOptionRemoveEvent = {\n  component: \"stzh-dropdown\",\n  value: string\n}\n\nexport type StzhDropdownOpenEvent = {\n  component: \"stzh-dropdown\"\n}\n\nexport type StzhDropdowCloseEvent = {\n  component: \"stzh-dropdown\"\n}\n\nexport type StzhDropdownFocusEvent = {\n  component: \"stzh-dropdown\"\n  originalEvent: {\n    target: Element\n  }\n}\n\nexport type StzhDropdownBlurEvent = {\n  component: \"stzh-dropdown\"\n}\n\nexport type StzhDropdowInitEvent = {\n  component: \"stzh-dropdown\"\n}\n\n/** Progressbar */\n\nexport type StzhProgressbarDataItem = {\n  label: string\n  icon?: string\n  disabled?: boolean\n  analyticsId?: string\n}\n\n/* Progressbar Item */\n\nexport type StzhProgressbarItemClickEvent = {\n  component: \"stzh-progressbar-item\",\n  originalEvent: MouseEvent\n}\n\nexport type StzhProgressbarItemDottedClickEvent = {\n  component: \"stzh-progressbar-item\",\n  originalEvent: MouseEvent\n}\n\n/* Upload */\n\nexport type StzhUploadFilesItem = {\n  name: string\n  size: number\n  [key: string]: any\n}\n\nexport type StzhUploadFile = File & {\n  xhr: XMLHttpRequest,\n  status: string\n  upload: any\n  accepted: boolean\n  previewElement: HTMLElement\n}\n\nexport type StzhUploadFileAddedEvent = {\n  component: \"stzh-upload\",\n  file: StzhUploadFile\n}\n\nexport type StzhUploadFilesAddedEvent = {\n  component: \"stzh-upload\",\n  files: StzhUploadFile[]\n}\n\nexport type StzhUploadFileRemoveEvent = {\n  component: \"stzh-upload\",\n  file: StzhUploadFile\n}\n\nexport type StzhUploadFileRemovedEvent = {\n  component: \"stzh-upload\",\n  file: StzhUploadFile\n  force: boolean\n}\n\nexport type StzhUploadSendingEvent = {\n  component: \"stzh-upload\",\n  file: StzhUploadFile,\n  xhr: XMLHttpRequest,\n  formData: FormData\n}\n\nexport type StzhUploadSendingMultipleEvent = {\n  component: \"stzh-upload\",\n  files: StzhUploadFile[],\n  xhr: XMLHttpRequest,\n  formData: FormData\n}\n\nexport type StzhUploadProcessingEvent = {\n  component: \"stzh-upload\",\n  file: StzhUploadFile\n}\n\nexport type StzhUploadProcessingMultipleEvent = {\n  component: \"stzh-upload\",\n  files: StzhUploadFile[]\n}\n\nexport type StzhUploadProgressEvent = {\n  component: \"stzh-upload\",\n  file: StzhUploadFile,\n  progress: number,\n  bytesSent: number\n}\n\nexport type StzhUploadProgressTotalEvent = {\n  component: \"stzh-upload\",\n  totalUploadProgress: number,\n  totalBytes: number,\n  totalBytesSent: number\n}\n\nexport type StzhUploadErrorEvent = {\n  component: \"stzh-upload\",\n  file: StzhUploadFile,\n  message: string,\n  xhr: XMLHttpRequest\n}\n\nexport type StzhUploadErrorMultipleEvent = {\n  component: \"stzh-upload\",\n  files: StzhUploadFile[],\n  message: string,\n  xhr: XMLHttpRequest\n}\n\nexport type StzhUploadSuccessEvent = {\n  component: \"stzh-upload\",\n  file: StzhUploadFile,\n  responseText: string,\n  event: ProgressEvent\n}\n\nexport type StzhUploadSuccessMultipleEvent = {\n  component: \"stzh-upload\",\n  files: StzhUploadFile[],\n  responseText: string,\n  event: ProgressEvent\n}\n\nexport type StzhUploadCanceledEvent = {\n  component: \"stzh-upload\",\n  file: StzhUploadFile\n}\n\nexport type StzhUploadCanceledMultipleEvent = {\n  component: \"stzh-upload\",\n  files: StzhUploadFile[]\n}\n\nexport type StzhUploadCompleteEvent = {\n  component: \"stzh-upload\",\n  file: StzhUploadFile\n}\n\nexport type StzhUploadCompleteMultipleEvent = {\n  component: \"stzh-upload\",\n  files: StzhUploadFile[]\n}\n\n// Merged Types\n\nexport type StzhFocusEvent =\n  | StzhAccordionItemFocusEvent\n  | StzhButtonFocusEvent\n  | StzhCheckboxFocusEvent\n  | StzhChipFocusEvent\n  | StzhDropdownFocusEvent\n  | StzhInputFocusEvent\n  | StzhLinkFocusEvent\n  | StzhMenuItemFocusEvent\n  | StzhRadioFocusEvent\n  | StzhToggleFocusEvent\n  | StzhVbzLinechipFocusEvent\n\n// ---\n// Prop Types\n// ---\n\nexport type StzhCalendarDateDisabledPredicate = (date: Date) => boolean\n\nexport namespace Layout {\n  export type Justify =\n    | \"start\"\n    | \"end\"\n    | \"center\"\n    | \"between\"\n    | \"around\"\n    | \"evenly\";\n\n  export type Items =\n    | \"start\"\n    | \"end\"\n    | \"center\"\n    | \"baseline\"\n    | \"stretch\";\n\n  export type JustifySelf =\n    | \"auto\"\n    | Justify;\n\n  export type AlignSelf =\n    | \"auto\"\n    | Items;\n}\n\nexport namespace Space {\n  export type Sizes =\n    | \"xxxsmall\"\n    | \"xxsmall\"\n    | \"xsmall\"\n    | \"small\"\n    | \"medium\"\n    | \"large\"\n    | \"xlarge\"\n    | \"xxlarge\"\n    | \"xxxlarge\"\n    | \"xxxxlarge\"\n    | \"big\"\n    | \"xbig\"\n    | \"huge\"\n    | \"xhuge\"\n    | \"none\"\n    | \"inherit\";\n\n    export type Curves =\n    | \"tiny\"\n    | \"small\"\n    | \"regular\"\n    | \"medium\"\n    | \"large\"\n    | \"big\"\n    | \"huge\"\n    | \"none\";\n}\n\nexport namespace Font {\n  export type Fonts =\n    | \"light\"\n    | \"regular\"\n    | \"medium\"\n    | \"heavy\"\n    | \"default\";\n\n  export type Sizes =\n    | \"pico\"\n    | \"nano\"\n    | \"micro\"\n    | \"milli\"\n    | \"centi\"\n    | \"deci\"\n    | \"regular\"\n    | \"deca\"\n    | \"hecto\"\n    | \"kilo\"\n    | \"mega\"\n    | \"giga\"\n    | \"hero\"\n    | \"inherit\";\n\n  export type Curves =\n    | \"p1\"\n    | \"p2\"\n    | \"caption\"\n    | \"h4\"\n    | \"h3\"\n    | \"h2\"\n    | \"h1\"\n    | \"hero\"\n    | \"default\";\n}\n\nexport namespace VBZ {\n  export const BASE_TYPE_GLOBAL = \"GLOBAL\";\n\n  export const CHANNEL_TICKER = \"ticker\";\n  export const CHANNEL_INFO_URL_FILTER = \"stadt-zuerich.ch/vbz\";\n\n  export const DISTURBANCE_GLOBAL = \"__global__\";\n  export const DISTURBANCE_INFORMATION = \"0\";\n  export const DISTURBANCE_CONSTRUCTION = \"1\";\n  export const DISTURBANCE_NORMAL = \"2\";\n  export const DISTURBANCE_EVENT = \"4\";\n  export const DISTURBANCE_BUS = \"5\";\n\n  export type Lines =\n    | \"2\"\n    | \"3\"\n    | \"4\"\n    | \"5\"\n    | \"6\"\n    | \"7\"\n    | \"8\"\n    | \"9\"\n    | \"10\"\n    | \"11\"\n    | \"12\"\n    | \"13\"\n    | \"14\"\n    | \"15\"\n    | \"16\"\n    | \"17\"\n    | \"19\"\n    | \"20\"\n    | \"21\"\n    | \"23\"\n    | \"24\"\n    | \"25\"\n    | \"29\"\n    | \"31\"\n    | \"32\"\n    | \"33\"\n    | \"34\"\n    | \"35\"\n    | \"36\"\n    | \"37\"\n    | \"38\"\n    | \"39\"\n    | \"40\"\n    | \"45\"\n    | \"46\"\n    | \"54\"\n    | \"61\"\n    | \"62\"\n    | \"63\"\n    | \"64\"\n    | \"66\"\n    | \"67\"\n    | \"69\"\n    | \"70\"\n    | \"72\"\n    | \"73\"\n    | \"75\"\n    | \"76\"\n    | \"77\"\n    | \"78\"\n    | \"79\"\n    | \"80\"\n    | \"83\"\n    | \"89\"\n    | \"91\"\n    | \"94\"\n    | \"95\"\n    | \"99\"\n    | \"151\"\n    | \"152\"\n    | \"153\"\n    | \"156\"\n    | \"161\"\n    | \"162\"\n    | \"163\"\n    | \"165\"\n    | \"184\"\n    | \"185\"\n    | \"200\"\n    | \"201\"\n    | \"215\"\n    | \"220\"\n    | \"235\"\n    | \"236\"\n    | \"245\"\n    | \"301\"\n    | \"302\"\n    | \"303\"\n    | \"304\"\n    | \"305\"\n    | \"306\"\n    | \"307\"\n    | \"308\"\n    | \"309\"\n    | \"311\"\n    | \"314\"\n    | \"315\"\n    | \"317\"\n    | \"321\"\n    | \"323\"\n    | \"325\"\n    | \"350\"\n    | \"444\"\n    | \"445\"\n    | \"701\"\n    | \"702\"\n    | \"703\"\n    | \"704\"\n    | \"705\"\n    | \"720\"\n    | \"721\"\n    | \"725\"\n    | \"726\"\n    | \"727\"\n    | \"742\"\n    | \"743\"\n    | \"744\"\n    | \"745\"\n    | \"747\"\n    | \"748\"\n    | \"751\"\n    | \"752\"\n    | \"753\"\n    | \"754\"\n    | \"759\"\n    | \"760\"\n    | \"765\"\n    | \"768\"\n    | \"781\"\n    | \"786\"\n    | \"787\"\n    | \"910\"\n    | \"912\"\n    | \"916\"\n    | \"917\"\n    | \"918\"\n    | \"919\"\n    | \"E\"\n    | \"N\"\n    | \"N1\"\n    | \"N2\"\n    | \"N4\"\n    | \"N5\"\n    | \"N6\"\n    | \"N7\"\n    | \"N8\"\n    | \"N9\"\n    | \"N10\"\n    | \"N11\"\n    | \"N12\"\n    | \"N13\"\n    | \"N14\"\n    | \"N15\"\n    | \"N16\"\n    | \"N17\"\n    | \"N18\"\n    | \"N19\"\n    | \"N30\"\n    | \"N31\"\n    | \"N32\"\n    | \"N33\"\n    | \"N34\"\n    | \"N45\"\n    | \"N72\"\n    | \"N78\"\n    | \"SN1\"\n    | \"SN4\"\n    | \"SN5\"\n    | \"SN6\"\n    | \"SN7\"\n    | \"SN8\"\n    | \"SN9\"\n    | \"S2\"\n    | \"S3\"\n    | \"S4\"\n    | \"S5\"\n    | \"S6\"\n    | \"S7\"\n    | \"S8\"\n    | \"S9\"\n    | \"S10\"\n    | \"S11\"\n    | \"S14\"\n    | \"S15\"\n    | \"S16\"\n    | \"S18\"\n    | \"S19\"\n    | \"S20\"\n    | \"S21\"\n    | \"S23\"\n    | \"S24\"\n    | \"S25\"\n}\n\n// ---\n// Stencil component types\n// ---\n\nexport * from './components';\n"],"mappings":"2FAsgCiBA,GAAjB,SAAiBA,GACFA,EAAAC,iBAAmB,SAEnBD,EAAAE,eAAiB,SACjBF,EAAAG,wBAA0B,uBAE1BH,EAAAI,mBAAqB,aACrBJ,EAAAK,wBAA0B,IAC1BL,EAAAM,yBAA2B,IAC3BN,EAAAO,mBAAqB,IACrBP,EAAAQ,kBAAoB,IACpBR,EAAAS,gBAAkB,GAyLhC,EApMD,CAAiBT,MAAGU,EAAA,W"}

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

@@ -1 +1 @@
-{"version":3,"names":["stzhDatepickerCss","StzhDatepicker","exports","this","onRootFocus","_this","input","setFocus","onInputChange","parsedDate","dateAdapter","parse","value","isoDate","printISODate","calendar","stzhChange","emit","component","valueAsDate","onCalendarChange","event","detail","format","popover","hide","class_1","prototype","createDateFormatters","localization","dateFormatLong","Intl","DateTimeFormat","$locale","day","month","year","valueWatcher","newValue","date","parseISODate","updateButtonAccessibleLabel","setDate","getPopover","buttonLabel","concat","selectedDateMessage","err","connectedCallback","componentWillLoad","_a","fetchTranslations","element","_b","sent","createGlobalAdapter","$formats","$globals","componentDidLoad","render","classes","inline","h","Host","tabindex","disabled","onFocus","class","type","name","Fragment","ref","el","isDateDisabled","calendarIsDateDisabled","min","calendarMin","max","calendarMax","onStzhChange","label","noAutocomplete","readonly","description","descriptionLong","error","invalid","required","showMarker","size","slot","placement","variant","icon","a11yLabel","stzhRadioCss","radioCounter","StzhRadio","focusedByInput","onInput","checked","originalEvent","focusEvent","FocusEvent","view","window","bubbles","cancelable","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","class_2","focus","errorWatcher","_error","JSON","e","length","inputId","descriptionUsed","hasSlot","descriptionLongUsed","errorUsed","id","a11yDescribedby","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","StzhInputDescription","classPrefix","moreInfoButtonLabel","stzhRadiogroupCss","SELECTOR_RADIO","radiogroupCounter","StzhRadiogroup","_preventUpdateProperties","init","radios","Array","from","querySelectorAll","updateRadiosProperty","radiogroupId","watchValue","watchName","watchDisabled","watchInvalid","watchRequired","class_3","updateCheckedRadioByValue","preventUpdatePropertiesWatcher","onChange","prop","forEach","radio","indexOf","camelCase","checkedRadio","find","uncheckRadios","preventUpdateProperties","componentShouldUpdate","_newValue","_oldValue","componentDidRender","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","hideLegend","direction","legend"],"sources":["src/components/stzh-datepicker/stzh-datepicker.scss?tag=stzh-datepicker&encapsulation=scoped","src/components/stzh-datepicker/stzh-datepicker.tsx","src/components/stzh-radio/stzh-radio.scss?tag=stzh-radio&encapsulation=scoped","src/components/stzh-radio/stzh-radio.tsx","src/components/stzh-radiogroup/stzh-radiogroup.scss?tag=stzh-radiogroup&encapsulation=scoped","src/components/stzh-radiogroup/stzh-radiogroup.tsx"],"sourcesContent":[":host {\n  width: 100%;\n}\n\n.stzh-datepicker {\n  &__popover {\n    --padding: #{space('medium')};\n    --width: auto;\n  }\n\n  &__actions {\n    display: flex;\n    justify-content: flex-end;\n\n    &:not(:empty) {\n      margin-top: space('xsmall');\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Method,\n  Watch,\n  Fragment,\n  State\n} from \"@stencil/core\";\n\nimport {\n  StzhCalendarChangeEvent,\n  StzhDatepickerChangeEvent\n} from \"../../index\";\n\nimport { StzhCalendarDateDisabledPredicate } from \"../../index\";\n\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { printISODate, parseISODate } from \"../../utils/date-utils\"\nimport { StzhLocaleAdapter, createGlobalAdapter } from \"../../utils/date-adapter\"\n\nimport { StzhDatepickerLocalizedText } from \"./stzh-datepicker.localization\";\n\n/**\n * @slot - Slot to place input, calendar and popover element inside\n */\n@Component({\n  tag: \"stzh-datepicker\",\n  styleUrl: \"stzh-datepicker.scss\",\n  scoped: true\n})\nexport class StzhDatepicker {\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @Prop() calendarMin: string = \"\"\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @Prop() calendarMax: string = \"\"\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   */\n  @Prop() calendarIsDateDisabled: StzhCalendarDateDisabledPredicate = () => false\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of hidden date picker input (current selected date in ISO format). */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Label for input field and popover */\n  @Prop() label: 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  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show noting */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Show calendar inline */\n  @Prop() inline: boolean = false;\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  /**  Translation strings. */\n  @Prop() localization: StzhDatepickerLocalizedText;\n\n  @State() buttonLabel: string;\n\n  @Watch(\"localization\")\n  createDateFormatters() {\n    if (this.localization) {\n      this.dateFormatLong = new Intl.DateTimeFormat(this.localization.$locale, {\n        day: \"numeric\",\n        month: \"long\",\n        year: \"numeric\",\n      })\n    }\n  }\n\n  /** Update calendar and input when value prop has changed */\n  @Watch(\"value\")\n  valueWatcher(newValue: string) {\n    const date = parseISODate(newValue);\n\n    if (this.calendar) {\n      this.calendar.value = newValue;\n    }\n\n    if (this.input) {\n      this.input.value = this.dateAdapter.format(date, \"inputdate\");\n    }\n\n    this.updateButtonAccessibleLabel();\n  }\n\n  /** Set value by a JS Date object */\n  @Method()\n  async setDate(date: Date) {\n    this.value = printISODate(date);\n  }\n\n  /** Return internal popover element */\n  @Method()\n  async getPopover(): Promise<HTMLStzhPopoverElement> {\n    return this.popover;\n  }\n\n  /** Datepicker change event */\n  @Event() stzhChange: EventEmitter<StzhDatepickerChangeEvent>;\n\n  @Element() element: HTMLStzhDatepickerElement;\n\n  /**\n   * To format dates exclusively for the benefit of screen readers.\n   *\n   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n   * better performance when formatting large number of dates. See:\n   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n   */\n  private dateFormatLong: Intl.DateTimeFormat\n\n  private input: HTMLStzhInputElement;\n  private popover: HTMLStzhPopoverElement;\n  private calendar: HTMLStzhCalendarElement;\n\n  private onRootFocus = () => {\n    if (this.input) {\n      this.input.setFocus();\n    }\n  }\n\n  private onInputChange = () => {\n    const parsedDate = this.dateAdapter.parse(this.input.value, \"inputdate\")\n\n    if (this.input.value === \"\" || parsedDate) {\n      const isoDate = printISODate(parsedDate);\n\n      if (this.calendar) {\n        this.calendar.value = isoDate;\n      }\n\n      this.value = isoDate;\n      this.stzhChange.emit({\n        component: \"stzh-datepicker\",\n        value: this.value,\n        valueAsDate: parsedDate,\n      })\n    }\n  }\n\n  private onCalendarChange = (event: CustomEvent<StzhCalendarChangeEvent>) => {\n    this.value = event.detail.value;\n    this.stzhChange.emit({\n      component: \"stzh-datepicker\",\n      value: this.value,\n      valueAsDate: event.detail.valueAsDate,\n    });\n\n    if (this.input) {\n      this.input.value = event.detail.valueAsDate\n        && this.dateAdapter.format(event.detail.valueAsDate, \"inputdate\");\n    }\n\n    if (this.popover) {\n      this.popover.hide();\n    }\n  }\n\n  private updateButtonAccessibleLabel() {\n    if (!this.localization) {\n      return;\n    }\n\n    try {\n      const valueAsDate = parseISODate(this.value);\n      this.buttonLabel = `${this.localization.buttonLabel}, ${this.localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)}`;\n    } catch (err) {\n      this.buttonLabel = this.localization.buttonLabel;\n    }\n  }\n\n  connectedCallback() {\n    this.createDateFormatters();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"datepicker\");\n    }\n\n    if (!this.dateAdapter) {\n      this.dateAdapter = createGlobalAdapter(\n        this.localization.$formats,\n        this.localization.$globals\n      );\n    }\n  }\n\n  componentDidLoad() {\n    this.valueWatcher(this.value);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-datepicker\": true,\n      \"stzh-datepicker--inline\": this.inline\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n          />\n\n          {this.inline &&\n            <Fragment>\n              <stzh-calendar\n                ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n                isDateDisabled={this.calendarIsDateDisabled}\n                min={this.calendarMin}\n                max={this.calendarMax}\n                onStzhChange={this.onCalendarChange}\n              ></stzh-calendar>\n              <div class=\"stzh-datepicker__actions\">\n                <slot name=\"action\"></slot>\n              </div>\n            </Fragment>\n          }\n\n          {!this.inline &&\n            <stzh-input\n              label={this.label}\n              ref={(el) => (this.input = el as HTMLStzhInputElement)}\n              noAutocomplete\n              onStzhChange={this.onInputChange}\n              readonly={this.readonly}\n              disabled={this.disabled}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              error={this.error}\n              invalid={this.invalid}\n              required={this.required}\n              showMarker={this.showMarker}\n              size={this.size}\n            >\n              <stzh-popover\n                ref={(el) => (this.popover = el as HTMLStzhPopoverElement)}\n                class=\"stzh-datepicker__popover\"\n                slot=\"button-right\"\n                placement=\"bottom-end\"\n                label={this.label}\n              >\n                <stzh-button\n                  variant=\"input\"\n                  icon-only\n                  icon=\"calendar\"\n                  disabled={this.disabled}\n                  a11yLabel={this.buttonLabel}\n                >\n                </stzh-button>\n                <div slot=\"content\">\n                  <stzh-calendar\n                    ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n                    isDateDisabled={this.calendarIsDateDisabled}\n                    min={this.calendarMin}\n                    max={this.calendarMax}\n                    onStzhChange={this.onCalendarChange}\n                  >\n                  </stzh-calendar>\n                  <div class=\"stzh-datepicker__actions\">\n                    <slot name=\"action\"></slot>\n                  </div>\n                </div>\n              </stzh-popover>\n            </stzh-input>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  display: inline-block;\n\n  ::slotted(stzh-text) {\n    --color: inherit;\n  }\n}\n\n.stzh-radio {\n\t@include input-description;\n\n  &__field-wrapper {\n    @include fontSize('milli');\n    position: relative;\n    display: flex;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__mark {\n    @include radio__mark();\n  }\n\n  &__check {\n    @include radio__check();\n  }\n\n  &__label {\n    display: inline-block;\n    color: $baseColor;\n    transition: color $baseTransitionAnimationSpeed;\n    margin-left: space('small');\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker-symbol {\n    @include fontSize('micro');\n  }\n\n  /* Hover / Focus / Checked */\n\n  &:hover &__label,\n  &__input:checked:hover ~ &__label,\n  &__input:checked:hover ~ &__mark &__check,\n  &__input:checked:focus ~ &__mark &__check {\n    color: $colorPrimaryHover;\n  }\n\n  &__input:checked ~ &__label {\n    color: $colorPrimary;\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__mark,\n  &__input:checked:hover ~ &__mark,\n  &__input:checked:focus ~ &__mark {\n    border-color: $colorPrimaryHover;\n  }\n\n  &__input:focus ~ &__mark,\n  &__input:checked ~ &__mark {\n    border-color: $colorPrimary;\n  }\n\n  &__input:checked ~ &__mark &__check {\n    opacity: 1;\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label,\n  &--is-invalid &__input ~ &__mark &__check {\n    color: $colorError;\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    border-color: $colorError;\n  }\n\n  /* Disabled */\n\n\t&--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label,\n  &--is-disabled &__input ~ &__mark &__check {\n    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    border-color: $formDisabledBorderColor;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n}\n","import {\n  Host,\n  Component,\n  Prop,\n  Event,\n  Element,\n  EventEmitter,\n  Method,\n  h,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhRadioChangeEvent,\n  StzhRadioFocusEvent,\n  StzhRadioBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet radioCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-radio\",\n  styleUrl: \"stzh-radio.scss\",\n  scoped: true\n})\nexport class StzhRadio {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\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  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show noting */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id for element which describes the radio button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Focus input field */\n  @Method()\n  async setFocus() {\n    this.input.focus();\n  }\n\n  /** Input change event */\n  @Event() stzhChange: EventEmitter<StzhRadioChangeEvent>;\n\n  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhRadioFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhRadioBlurEvent>;\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n\n    this.invalid = this._error.length > 0;\n  }\n\n  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-radio\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked\n    });\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.setFocus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent('focus', {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-radio\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent('blur', {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-radio\",\n      originalEvent: event\n    });\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-radio-${radioCounter++}`;\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, 'radio');\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || !!this.error;\n\n    const classes = {\n      \"stzh-radio\": true,\n      \"stzh-radio--has-description\": descriptionUsed,\n      \"stzh-radio--has-description-long\": descriptionLongUsed,\n      \"stzh-radio--has-error\": errorUsed,\n      \"stzh-radio--is-required\": this.required,\n      \"stzh-radio--is-invalid\": this.invalid,\n      \"stzh-radio--is-disabled\": this.disabled\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-radio__field-wrapper\">\n            <input\n              class=\"stzh-radio__input\"\n              ref={(el) => (this.input = el as HTMLInputElement)}\n              type=\"radio\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-radio__mark\">\n              <div class=\"stzh-radio__check\"></div>\n            </div>\n            <div class=\"stzh-radio__label\">\n              {this.label ? this.label : <slot></slot>}\n              {this.showMarker &&\n                <span class=\"stzh-radio__marker\">\n                  <span class=\"stzh-radio__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-radio__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText\n                    }\n                  </span>\n                </span>\n              }\n            </div>\n          </label>\n          <StzhInputDescription\n            classPrefix=\"stzh-radio\"\n            id={`${this.inputId}-description`}\n            error={this._error}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            descriptionLongUsed={descriptionLongUsed}\n            moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n",":host([direction=\"vertical\"]) {\n  ::slotted(stzh-radio:not(:last-child)) {\n    margin-bottom: space('medium');\n  }\n}\n\n:host([direction=\"horizontal\"]) {\n  ::slotted(stzh-radio:not(:last-child)) {\n    margin-right: space('large');\n  }\n}\n\n.stzh-radiogroup {\n  @include input-description;\n  margin: 0;\n  padding: 0;\n  border: none;\n\n  &__fields {\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n  }\n\n  &__legend {\n    @include font('heavy');\n    @include fontSize('nano');\n    padding: 0;\n    margin-bottom: space('xsmall');\n  }\n\n  &--hide-legend &__legend {\n    @include visuallyhidden;\n  }\n\n  &--direction-horizontal &__fields {\n    flex-direction: row;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Element,\n  Watch,\n  h,\n  Listen\n} from \"@stencil/core\";\n\nimport { StzhRadioChangeEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nconst SELECTOR_RADIO = 'stzh-radio, stzh-button[type=radio], stzh-card';\n\nlet radiogroupCounter = 0;\n\n/**\n * @slot - Slot for `stzh-radio`, `stzh-button[type=\"radio\"]` or `stzh-card` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-radiogroup\",\n  styleUrl: \"stzh-radiogroup.scss\",\n  scoped: true\n})\nexport class StzhRadiogroup {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** The name of the input radio elements, will define the radio group. If you have more than one radio group on a page, every group needs to have its own unique name */\n  @Prop({ reflect: true }) name: string;\n\n  /** The legend */\n  @Prop() legend: string;\n\n  /** Hide legend to show only for screenreaders */\n  @Prop({ reflect: true }) hideLegend: boolean = false;\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show noting */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Select a radio by value */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Current checked radio element (readonly) */\n  @Prop() checkedRadio: HTMLStzhRadioElement | null = null;\n\n  /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker) */\n  @Prop() preventUpdateProperties: string[] | string = [];\n  private _preventUpdateProperties: string[] = [];\n\n  /** Host element */\n  @Element() element: HTMLElement;\n\n  @Watch(\"name\")\n  watchName(newValue: string) {\n    this.updateRadiosProperty(\"name\", newValue);\n  }\n\n  @Watch(\"disabled\")\n  watchDisabled(newValue: boolean) {\n    this.updateRadiosProperty(\"disabled\", newValue);\n  }\n\n  @Watch(\"invalid\")\n  watchInvalid(newValue: boolean) {\n    this.updateRadiosProperty(\"invalid\", newValue);\n  }\n\n  @Watch(\"required\")\n  watchRequired(newValue: boolean) {\n    this.updateRadiosProperty(\"required\", newValue);\n  }\n\n  @Watch(\"value\")\n  watchValue(newValue: string) {\n    this.updateCheckedRadioByValue(newValue);\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n\n    this.invalid = this._error.length > 0;\n  }\n\n  @Watch(\"preventUpdateProperties\")\n  preventUpdatePropertiesWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._preventUpdateProperties = JSON.parse(newValue);\n    } else {\n      this._preventUpdateProperties = newValue;\n    }\n  }\n\n  @Listen(\"stzhChange\")\n  onChange(event: CustomEvent<StzhRadioChangeEvent>) {\n    this.value = event.detail.value;\n  }\n\n  /** Radio elements */\n  private radios: HTMLStzhRadioElement[];\n  private radiogroupId: string;\n  private observer: MutationObserver;\n\n  private updateRadiosProperty(prop: string, value: any) {\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (prop === \"name\" || (this._preventUpdateProperties.indexOf(prop) === -1)) {\n        radio[camelCase(prop)] = value;\n      }\n    });\n  }\n\n  private updateCheckedRadioByValue(value: string) {\n    this.checkedRadio = this.radios.find(radio => radio.value === value);\n\n    if (this.checkedRadio) {\n      this.checkedRadio.checked = true;\n    }\n\n    this.uncheckRadios();\n  }\n\n  private uncheckRadios() {\n    // make sure that no other radios are checked than the current one or no one\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (!this.checkedRadio || radio !== this.checkedRadio) {\n        radio.checked = false;\n      }\n    });\n  }\n\n  private init = () => {\n    // update radios\n    this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n    this.updateRadiosProperty(\"show-marker\", false);\n    this.updateRadiosProperty(\"a11y-describedby\", `${this.radiogroupId}-description`);\n\n    this.watchValue(this.value);\n    this.watchName(this.name);\n    this.watchDisabled(this.disabled);\n    this.watchInvalid(this.invalid);\n    this.watchRequired(this.required);\n  }\n\n  async componentWillLoad() {\n    this.radiogroupId = `stzh-radiogroup-${radiogroupCounter++}`;\n    this.errorWatcher(this.error);\n    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, 'radiogroup');\n    }\n  }\n\n  componentShouldUpdate(_newValue, _oldValue, prop: string) {\n    return prop !== \"checkedRadio\";\n  }\n\n  componentDidRender() {\n    this.init();\n  }\n\n  connectedCallback() {\n    if (!this.value) {\n      this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n      // try to find a checkbox that might has checked set to true\n      const checkedRadio = this.radios.find(radio => radio.checked);\n\n      if (checkedRadio) {\n        this.value = checkedRadio.value;\n      }\n    }\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || !!this.error;\n\n    const classes = {\n      \"stzh-radiogroup\": true,\n      \"stzh-radiogroup--has-description\": descriptionUsed,\n      \"stzh-radiogroup--has-description-long\": descriptionLongUsed,\n      \"stzh-radiogroup--has-error\": errorUsed,\n      \"stzh-radiogroup--is-required\": this.required,\n      \"stzh-radiogroup--is-disabled\": this.disabled,\n      \"stzh-radiogroup--is-invalid\": this.invalid,\n      \"stzh-radiogroup--hide-legend\": this.hideLegend,\n      [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction\n    };\n\n    return (\n      <fieldset class={classes}>\n        {this.legend &&\n          <legend class=\"stzh-radiogroup__legend\">\n            {this.legend}\n            {this.showMarker &&\n              <span class=\"stzh-radiogroup__marker\">\n                <span class=\"stzh-radiogroup__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-radiogroup__marker-text\">\n                  {this.required\n                    ? this.localization.$globals.requiredFieldText\n                    : this.localization.$globals.optionalFieldText\n                  }\n                </span>\n              </span>\n            }\n          </legend>\n        }\n        <div class=\"stzh-radiogroup__fields\">\n          <slot></slot>\n        </div>\n        <StzhInputDescription\n          classPrefix=\"stzh-radiogroup\"\n          id={`${this.radiogroupId}-description`}\n          error={this._error}\n          description={this.description}\n          descriptionLong={this.descriptionLong}\n          descriptionLongUsed={descriptionLongUsed}\n          moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n        />\n      </fieldset>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["stzhDatepickerCss","StzhDatepicker","exports","this","onRootFocus","_this","input","setFocus","onInputChange","parsedDate","dateAdapter","parse","value","isoDate","printISODate","calendar","stzhChange","emit","component","valueAsDate","onCalendarChange","event","detail","format","popover","hide","class_1","prototype","createDateFormatters","localization","dateFormatLong","Intl","DateTimeFormat","$locale","day","month","year","valueWatcher","newValue","date","parseISODate","updateButtonAccessibleLabel","setDate","getPopover","buttonLabel","concat","selectedDateMessage","err","connectedCallback","componentWillLoad","_a","fetchTranslations","element","_b","sent","createGlobalAdapter","$formats","$globals","componentDidLoad","render","classes","inline","h","Host","tabindex","disabled","onFocus","class","type","name","Fragment","ref","el","isDateDisabled","calendarIsDateDisabled","min","calendarMin","max","calendarMax","onStzhChange","label","noAutocomplete","readonly","description","descriptionLong","error","invalid","required","showMarker","size","slot","placement","variant","icon","a11yLabel","stzhRadioCss","radioCounter","StzhRadio","focusedByInput","onInput","checked","originalEvent","focusEvent","FocusEvent","view","window","bubbles","cancelable","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","class_2","focus","errorWatcher","_error","JSON","e","length","inputId","descriptionUsed","hasSlot","descriptionLongUsed","errorUsed","id","a11yDescribedby","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","StzhInputDescription","classPrefix","moreInfoButtonLabel","stzhRadiogroupCss","SELECTOR_RADIO","radiogroupCounter","StzhRadiogroup","_preventUpdateProperties","init","radios","Array","from","querySelectorAll","updateRadiosProperty","radiogroupId","watchValue","watchName","watchDisabled","watchInvalid","watchRequired","class_3","updateCheckedRadioByValue","preventUpdatePropertiesWatcher","onChange","prop","forEach","radio","indexOf","camelCase","checkedRadio","find","uncheckRadios","preventUpdateProperties","componentShouldUpdate","_newValue","_oldValue","componentDidRender","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","hideLegend","direction","legend"],"sources":["src/components/stzh-datepicker/stzh-datepicker.scss?tag=stzh-datepicker&encapsulation=scoped","src/components/stzh-datepicker/stzh-datepicker.tsx","src/components/stzh-radio/stzh-radio.scss?tag=stzh-radio&encapsulation=scoped","src/components/stzh-radio/stzh-radio.tsx","src/components/stzh-radiogroup/stzh-radiogroup.scss?tag=stzh-radiogroup&encapsulation=scoped","src/components/stzh-radiogroup/stzh-radiogroup.tsx"],"sourcesContent":[":host {\n  width: 100%;\n}\n\n.stzh-datepicker {\n  &__popover {\n    --padding: #{space('medium')};\n    --width: auto;\n  }\n\n  &__actions {\n    display: flex;\n    justify-content: flex-end;\n\n    &:not(:empty) {\n      margin-top: space('xsmall');\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Method,\n  Watch,\n  Fragment,\n  State\n} from \"@stencil/core\";\n\nimport {\n  StzhCalendarChangeEvent,\n  StzhDatepickerChangeEvent\n} from \"../../index\";\n\nimport { StzhCalendarDateDisabledPredicate } from \"../../index\";\n\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { printISODate, parseISODate } from \"../../utils/date-utils\"\nimport { StzhLocaleAdapter, createGlobalAdapter } from \"../../utils/date-adapter\"\n\nimport { StzhDatepickerLocalizedText } from \"./stzh-datepicker.localization\";\n\n/**\n * @slot action - Slot for action below calendar (stzh-link element)\n */\n@Component({\n  tag: \"stzh-datepicker\",\n  styleUrl: \"stzh-datepicker.scss\",\n  scoped: true\n})\nexport class StzhDatepicker {\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @Prop() calendarMin: string = \"\"\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @Prop() calendarMax: string = \"\"\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   */\n  @Prop() calendarIsDateDisabled: StzhCalendarDateDisabledPredicate = () => false\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of hidden date picker input (current selected date in ISO format). */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Label for input field and popover */\n  @Prop() label: 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  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Show calendar inline */\n  @Prop() inline: boolean = false;\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  /**  Translation strings. */\n  @Prop() localization: StzhDatepickerLocalizedText;\n\n  @State() buttonLabel: string;\n\n  @Watch(\"localization\")\n  createDateFormatters() {\n    if (this.localization) {\n      this.dateFormatLong = new Intl.DateTimeFormat(this.localization.$locale, {\n        day: \"numeric\",\n        month: \"long\",\n        year: \"numeric\",\n      })\n    }\n  }\n\n  /** Update calendar and input when value prop has changed */\n  @Watch(\"value\")\n  valueWatcher(newValue: string) {\n    const date = parseISODate(newValue);\n\n    if (this.calendar) {\n      this.calendar.value = newValue;\n    }\n\n    if (this.input) {\n      this.input.value = this.dateAdapter.format(date, \"inputdate\");\n    }\n\n    this.updateButtonAccessibleLabel();\n  }\n\n  /** Set value by a JS Date object */\n  @Method()\n  async setDate(date: Date) {\n    this.value = printISODate(date);\n  }\n\n  /** Return internal popover element */\n  @Method()\n  async getPopover(): Promise<HTMLStzhPopoverElement> {\n    return this.popover;\n  }\n\n  /** Datepicker change event */\n  @Event() stzhChange: EventEmitter<StzhDatepickerChangeEvent>;\n\n  @Element() element: HTMLStzhDatepickerElement;\n\n  /**\n   * To format dates exclusively for the benefit of screen readers.\n   *\n   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n   * better performance when formatting large number of dates. See:\n   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n   */\n  private dateFormatLong: Intl.DateTimeFormat\n\n  private input: HTMLStzhInputElement;\n  private popover: HTMLStzhPopoverElement;\n  private calendar: HTMLStzhCalendarElement;\n\n  private onRootFocus = () => {\n    if (this.input) {\n      this.input.setFocus();\n    }\n  }\n\n  private onInputChange = () => {\n    const parsedDate = this.dateAdapter.parse(this.input.value, \"inputdate\")\n\n    if (this.input.value === \"\" || parsedDate) {\n      const isoDate = printISODate(parsedDate);\n\n      if (this.calendar) {\n        this.calendar.value = isoDate;\n      }\n\n      this.value = isoDate;\n      this.stzhChange.emit({\n        component: \"stzh-datepicker\",\n        value: this.value,\n        valueAsDate: parsedDate,\n      })\n    }\n  }\n\n  private onCalendarChange = (event: CustomEvent<StzhCalendarChangeEvent>) => {\n    this.value = event.detail.value;\n    this.stzhChange.emit({\n      component: \"stzh-datepicker\",\n      value: this.value,\n      valueAsDate: event.detail.valueAsDate,\n    });\n\n    if (this.input) {\n      this.input.value = event.detail.valueAsDate\n        && this.dateAdapter.format(event.detail.valueAsDate, \"inputdate\");\n    }\n\n    if (this.popover) {\n      this.popover.hide();\n    }\n  }\n\n  private updateButtonAccessibleLabel() {\n    if (!this.localization) {\n      return;\n    }\n\n    try {\n      const valueAsDate = parseISODate(this.value);\n      this.buttonLabel = `${this.localization.buttonLabel}, ${this.localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)}`;\n    } catch (err) {\n      this.buttonLabel = this.localization.buttonLabel;\n    }\n  }\n\n  connectedCallback() {\n    this.createDateFormatters();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"datepicker\");\n    }\n\n    if (!this.dateAdapter) {\n      this.dateAdapter = createGlobalAdapter(\n        this.localization.$formats,\n        this.localization.$globals\n      );\n    }\n  }\n\n  componentDidLoad() {\n    this.valueWatcher(this.value);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-datepicker\": true,\n      \"stzh-datepicker--inline\": this.inline\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n          />\n\n          {this.inline &&\n            <Fragment>\n              <stzh-calendar\n                ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n                isDateDisabled={this.calendarIsDateDisabled}\n                min={this.calendarMin}\n                max={this.calendarMax}\n                onStzhChange={this.onCalendarChange}\n              ></stzh-calendar>\n              <div class=\"stzh-datepicker__actions\">\n                <slot name=\"action\"></slot>\n              </div>\n            </Fragment>\n          }\n\n          {!this.inline &&\n            <stzh-input\n              label={this.label}\n              ref={(el) => (this.input = el as HTMLStzhInputElement)}\n              noAutocomplete\n              onStzhChange={this.onInputChange}\n              readonly={this.readonly}\n              disabled={this.disabled}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              error={this.error}\n              invalid={this.invalid}\n              required={this.required}\n              showMarker={this.showMarker}\n              size={this.size}\n            >\n              <stzh-popover\n                ref={(el) => (this.popover = el as HTMLStzhPopoverElement)}\n                class=\"stzh-datepicker__popover\"\n                slot=\"button-right\"\n                placement=\"bottom-end\"\n                label={this.label}\n              >\n                <stzh-button\n                  variant=\"input\"\n                  icon-only\n                  icon=\"calendar\"\n                  disabled={this.disabled}\n                  a11yLabel={this.buttonLabel}\n                >\n                </stzh-button>\n                <div slot=\"content\">\n                  <stzh-calendar\n                    ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n                    isDateDisabled={this.calendarIsDateDisabled}\n                    min={this.calendarMin}\n                    max={this.calendarMax}\n                    onStzhChange={this.onCalendarChange}\n                  >\n                  </stzh-calendar>\n                  <div class=\"stzh-datepicker__actions\">\n                    <slot name=\"action\"></slot>\n                  </div>\n                </div>\n              </stzh-popover>\n            </stzh-input>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  display: inline-block;\n\n  ::slotted(stzh-text) {\n    --color: inherit;\n  }\n}\n\n.stzh-radio {\n\t@include input-description;\n\n  &__field-wrapper {\n    @include fontSize('milli');\n    position: relative;\n    display: flex;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__mark {\n    @include radio__mark();\n  }\n\n  &__check {\n    @include radio__check();\n  }\n\n  &__label {\n    display: inline-block;\n    color: $baseColor;\n    transition: color $baseTransitionAnimationSpeed;\n    margin-left: space('small');\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker-symbol {\n    @include fontSize('micro');\n  }\n\n  /* Hover / Focus / Checked */\n\n  &:hover &__label,\n  &__input:checked:hover ~ &__label,\n  &__input:checked:hover ~ &__mark &__check,\n  &__input:checked:focus ~ &__mark &__check {\n    color: $colorPrimaryHover;\n  }\n\n  &__input:checked ~ &__label {\n    color: $colorPrimary;\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__mark,\n  &__input:checked:hover ~ &__mark,\n  &__input:checked:focus ~ &__mark {\n    border-color: $colorPrimaryHover;\n  }\n\n  &__input:focus ~ &__mark,\n  &__input:checked ~ &__mark {\n    border-color: $colorPrimary;\n  }\n\n  &__input:checked ~ &__mark &__check {\n    opacity: 1;\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label,\n  &--is-invalid &__input ~ &__mark &__check {\n    color: $colorError;\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    border-color: $colorError;\n  }\n\n  /* Disabled */\n\n\t&--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label,\n  &--is-disabled &__input ~ &__mark &__check {\n    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    border-color: $formDisabledBorderColor;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n}\n","import {\n  Host,\n  Component,\n  Prop,\n  Event,\n  Element,\n  EventEmitter,\n  Method,\n  h,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhRadioChangeEvent,\n  StzhRadioFocusEvent,\n  StzhRadioBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet radioCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-radio\",\n  styleUrl: \"stzh-radio.scss\",\n  scoped: true\n})\nexport class StzhRadio {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\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  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id for element which describes the radio button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Focus input field */\n  @Method()\n  async setFocus() {\n    this.input.focus();\n  }\n\n  /** Input change event */\n  @Event() stzhChange: EventEmitter<StzhRadioChangeEvent>;\n\n  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhRadioFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhRadioBlurEvent>;\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n\n    this.invalid = this._error.length > 0;\n  }\n\n  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-radio\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked\n    });\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.setFocus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent('focus', {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-radio\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent('blur', {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-radio\",\n      originalEvent: event\n    });\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-radio-${radioCounter++}`;\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, 'radio');\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || !!this.error;\n\n    const classes = {\n      \"stzh-radio\": true,\n      \"stzh-radio--has-description\": descriptionUsed,\n      \"stzh-radio--has-description-long\": descriptionLongUsed,\n      \"stzh-radio--has-error\": errorUsed,\n      \"stzh-radio--is-required\": this.required,\n      \"stzh-radio--is-invalid\": this.invalid,\n      \"stzh-radio--is-disabled\": this.disabled\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-radio__field-wrapper\">\n            <input\n              class=\"stzh-radio__input\"\n              ref={(el) => (this.input = el as HTMLInputElement)}\n              type=\"radio\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-radio__mark\">\n              <div class=\"stzh-radio__check\"></div>\n            </div>\n            <div class=\"stzh-radio__label\">\n              {this.label ? this.label : <slot></slot>}\n              {this.showMarker &&\n                <span class=\"stzh-radio__marker\">\n                  <span class=\"stzh-radio__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-radio__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText\n                    }\n                  </span>\n                </span>\n              }\n            </div>\n          </label>\n          <StzhInputDescription\n            classPrefix=\"stzh-radio\"\n            id={`${this.inputId}-description`}\n            error={this._error}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            descriptionLongUsed={descriptionLongUsed}\n            moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n",":host([direction=\"vertical\"]) {\n  ::slotted(stzh-radio:not(:last-child)) {\n    margin-bottom: space('medium');\n  }\n}\n\n:host([direction=\"horizontal\"]) {\n  ::slotted(stzh-radio:not(:last-child)) {\n    margin-right: space('large');\n  }\n}\n\n.stzh-radiogroup {\n  @include input-description;\n  margin: 0;\n  padding: 0;\n  border: none;\n\n  &__fields {\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n  }\n\n  &__legend {\n    @include font('heavy');\n    @include fontSize('nano');\n    padding: 0;\n    margin-bottom: space('xsmall');\n  }\n\n  &--hide-legend &__legend {\n    @include visuallyhidden;\n  }\n\n  &--direction-horizontal &__fields {\n    flex-direction: row;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Element,\n  Watch,\n  h,\n  Listen\n} from \"@stencil/core\";\n\nimport { StzhRadioChangeEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nconst SELECTOR_RADIO = 'stzh-radio, stzh-button[type=radio], stzh-card';\n\nlet radiogroupCounter = 0;\n\n/**\n * @slot - Slot for `stzh-radio`, `stzh-button[type=\"radio\"]` or `stzh-card` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-radiogroup\",\n  styleUrl: \"stzh-radiogroup.scss\",\n  scoped: true\n})\nexport class StzhRadiogroup {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** The name of the input radio elements, will define the radio group. If you have more than one radio group on a page, every group needs to have its own unique name */\n  @Prop({ reflect: true }) name: string;\n\n  /** The legend */\n  @Prop() legend: string;\n\n  /** Hide legend to show only for screenreaders */\n  @Prop({ reflect: true }) hideLegend: boolean = false;\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Select a radio by value */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Current checked radio element (readonly) */\n  @Prop() checkedRadio: HTMLStzhRadioElement | null = null;\n\n  /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker) */\n  @Prop() preventUpdateProperties: string[] | string = [];\n  private _preventUpdateProperties: string[] = [];\n\n  /** Host element */\n  @Element() element: HTMLElement;\n\n  @Watch(\"name\")\n  watchName(newValue: string) {\n    this.updateRadiosProperty(\"name\", newValue);\n  }\n\n  @Watch(\"disabled\")\n  watchDisabled(newValue: boolean) {\n    this.updateRadiosProperty(\"disabled\", newValue);\n  }\n\n  @Watch(\"invalid\")\n  watchInvalid(newValue: boolean) {\n    this.updateRadiosProperty(\"invalid\", newValue);\n  }\n\n  @Watch(\"required\")\n  watchRequired(newValue: boolean) {\n    this.updateRadiosProperty(\"required\", newValue);\n  }\n\n  @Watch(\"value\")\n  watchValue(newValue: string) {\n    this.updateCheckedRadioByValue(newValue);\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n\n    this.invalid = this._error.length > 0;\n  }\n\n  @Watch(\"preventUpdateProperties\")\n  preventUpdatePropertiesWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._preventUpdateProperties = JSON.parse(newValue);\n    } else {\n      this._preventUpdateProperties = newValue;\n    }\n  }\n\n  @Listen(\"stzhChange\")\n  onChange(event: CustomEvent<StzhRadioChangeEvent>) {\n    this.value = event.detail.value;\n  }\n\n  /** Radio elements */\n  private radios: HTMLStzhRadioElement[];\n  private radiogroupId: string;\n  private observer: MutationObserver;\n\n  private updateRadiosProperty(prop: string, value: any) {\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (prop === \"name\" || (this._preventUpdateProperties.indexOf(prop) === -1)) {\n        radio[camelCase(prop)] = value;\n      }\n    });\n  }\n\n  private updateCheckedRadioByValue(value: string) {\n    this.checkedRadio = this.radios.find(radio => radio.value === value);\n\n    if (this.checkedRadio) {\n      this.checkedRadio.checked = true;\n    }\n\n    this.uncheckRadios();\n  }\n\n  private uncheckRadios() {\n    // make sure that no other radios are checked than the current one or no one\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (!this.checkedRadio || radio !== this.checkedRadio) {\n        radio.checked = false;\n      }\n    });\n  }\n\n  private init = () => {\n    // update radios\n    this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n    this.updateRadiosProperty(\"show-marker\", false);\n    this.updateRadiosProperty(\"a11y-describedby\", `${this.radiogroupId}-description`);\n\n    this.watchValue(this.value);\n    this.watchName(this.name);\n    this.watchDisabled(this.disabled);\n    this.watchInvalid(this.invalid);\n    this.watchRequired(this.required);\n  }\n\n  async componentWillLoad() {\n    this.radiogroupId = `stzh-radiogroup-${radiogroupCounter++}`;\n    this.errorWatcher(this.error);\n    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, 'radiogroup');\n    }\n  }\n\n  componentShouldUpdate(_newValue, _oldValue, prop: string) {\n    return prop !== \"checkedRadio\";\n  }\n\n  componentDidRender() {\n    this.init();\n  }\n\n  connectedCallback() {\n    if (!this.value) {\n      this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n      // try to find a checkbox that might has checked set to true\n      const checkedRadio = this.radios.find(radio => radio.checked);\n\n      if (checkedRadio) {\n        this.value = checkedRadio.value;\n      }\n    }\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || !!this.error;\n\n    const classes = {\n      \"stzh-radiogroup\": true,\n      \"stzh-radiogroup--has-description\": descriptionUsed,\n      \"stzh-radiogroup--has-description-long\": descriptionLongUsed,\n      \"stzh-radiogroup--has-error\": errorUsed,\n      \"stzh-radiogroup--is-required\": this.required,\n      \"stzh-radiogroup--is-disabled\": this.disabled,\n      \"stzh-radiogroup--is-invalid\": this.invalid,\n      \"stzh-radiogroup--hide-legend\": this.hideLegend,\n      [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction\n    };\n\n    return (\n      <fieldset class={classes}>\n        {this.legend &&\n          <legend class=\"stzh-radiogroup__legend\">\n            {this.legend}\n            {this.showMarker &&\n              <span class=\"stzh-radiogroup__marker\">\n                <span class=\"stzh-radiogroup__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-radiogroup__marker-text\">\n                  {this.required\n                    ? this.localization.$globals.requiredFieldText\n                    : this.localization.$globals.optionalFieldText\n                  }\n                </span>\n              </span>\n            }\n          </legend>\n        }\n        <div class=\"stzh-radiogroup__fields\">\n          <slot></slot>\n        </div>\n        <StzhInputDescription\n          classPrefix=\"stzh-radiogroup\"\n          id={`${this.radiogroupId}-description`}\n          error={this._error}\n          description={this.description}\n          descriptionLong={this.descriptionLong}\n          descriptionLongUsed={descriptionLongUsed}\n          moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n        />\n      </fieldset>\n    );\n  }\n}\n"],"mappings":"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"}