@oiz/stzh-components 2.6.0-aalpha → 2.6.0

package/dist/stzh-components/p-3aa5623c.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stzhCheckboxgroupCss","checkboxgroupCounter","StzhCheckboxgroup","this","_value","_preventUpdateProperties","init","checkboxes","Array","from","element","querySelectorAll","updateCheckboxesProperty","checkboxgroupId","watchValue","value","watchName","name","watchDisabled","disabled","watchInvalid","invalid","watchShowMarker","showMarker","newValue","JSON","parse","updateCheckedCheckboxByValue","errorWatcher","_error","e","length","preventUpdatePropertiesWatcher","onChange","event","detail","checked","push","filter","prop","forEach","checkbox","indexOf","camelCase","checkedCheckbox","async","error","preventUpdateProperties","localization","fetchTranslations","componentShouldUpdate","_newValue","_oldValue","componentDidRender","connectedCallback","map","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","descriptionUsed","hasSlot","description","descriptionLongUsed","descriptionLong","errorUsed","classes","hideLegend","direction","h","class","legend","StzhInputDescription","classPrefix","id","moreInfoButtonLabel","$globals"],"sources":["./src/components/stzh-checkboxgroup/stzh-checkboxgroup.scss?tag=stzh-checkboxgroup&encapsulation=scoped","./src/components/stzh-checkboxgroup/stzh-checkboxgroup.tsx"],"sourcesContent":[":host([direction=\"vertical\"]) {\n  ::slotted(stzh-checkbox:not(:last-child)) {\n    margin-bottom: space('medium');\n  }\n}\n\n:host([direction=\"horizontal\"]) {\n  ::slotted(stzh-checkbox:not(:last-child)) {\n    margin-right: space('large');\n  }\n}\n\n.stzh-checkboxgroup {\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 { hasSlot } from \"../../utils/utils\";\n\nimport { StzhCheckboxChangeEvent } from \"../../index\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet checkboxgroupCounter = 0;\n\n/**\n * @slot - Slot for `stzh-checkbox` 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-checkboxgroup\",\n  styleUrl: \"stzh-checkboxgroup.scss\",\n  scoped: true\n})\nexport class StzhCheckboxgroup {\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 checkbox elements */\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  /** 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 checkbox by value */\n  @Prop({ mutable: true }) value: string[] | string = \"\";\n  private _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 checkbox elements (readonly) */\n  @Prop() checkedCheckbox: HTMLStzhCheckboxElement[] | null = null;\n\n  /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid) */\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.updateCheckboxesProperty(\"name\", newValue);\n  }\n\n  @Watch(\"disabled\")\n  watchDisabled(newValue: boolean) {\n    this.updateCheckboxesProperty(\"disabled\", newValue);\n  }\n\n  @Watch(\"invalid\")\n  watchInvalid(newValue: boolean) {\n    this.updateCheckboxesProperty(\"invalid\", newValue);\n  }\n\n  @Watch(\"showMarker\")\n  watchShowMarker(newValue: boolean) {\n    this.updateCheckboxesProperty(\"showMarker\", newValue)\n  }\n\n  @Watch(\"value\")\n  watchValue(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._value = JSON.parse(newValue);\n    } else {\n      this._value = newValue;\n    }\n\n    this.updateCheckedCheckboxByValue(this._value);\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<StzhCheckboxChangeEvent>) {\n    if (event.detail.checked) {\n      this._value.push(event.detail.value);\n    } else {\n      this._value = this._value.filter(value => value !== event.detail.value);\n    }\n\n    this.value = this._value;\n  }\n\n  /** Checkbox elements */\n  private checkboxes: HTMLStzhCheckboxElement[];\n  private checkboxgroupId: string;\n  private observer: MutationObserver;\n\n  private updateCheckboxesProperty(prop: string, value: any) {\n    this.checkboxes.forEach((checkbox: HTMLStzhCheckboxElement) => {\n      if (prop === \"name\" || (this._preventUpdateProperties.indexOf(prop) === -1)) {\n        checkbox[camelCase(prop)] = value;\n      }\n    });\n  }\n\n  private updateCheckedCheckboxByValue(value: string[]) {\n    this.checkedCheckbox = this.checkboxes.filter(checkbox => value.indexOf(checkbox.value) > -1);\n    this.checkboxes.forEach(checkbox => checkbox.checked = value.indexOf(checkbox.value) > -1);\n  }\n\n  private init = () => {\n    this.checkboxes = Array.from(this.element.querySelectorAll(\"stzh-checkbox\"));\n    this.updateCheckboxesProperty(\"a11y-describedby\", `${this.checkboxgroupId}-description`);\n\n    this.watchValue(this.value);\n    this.watchName(this.name);\n    this.watchDisabled(this.disabled);\n    this.watchInvalid(this.invalid);\n    this.watchShowMarker(this.showMarker);\n  }\n\n  async componentWillLoad() {\n    this.checkboxgroupId = `stzh-checkboxgroup-${checkboxgroupCounter++}`;\n    this.errorWatcher(this.error);\n    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, 'checkboxgroup');\n    }\n  }\n\n  componentShouldUpdate(_newValue, _oldValue, prop: string) {\n    return prop !== \"checkedCheckbox\";\n  }\n\n  componentDidRender() {\n    this.init();\n  }\n\n  connectedCallback() {\n    if (!this.value.length) {\n      this.checkboxes = Array.from(this.element.querySelectorAll(\"stzh-checkbox\"));\n\n      // try to find checkboxes that might have checked set to true\n      this.value = this.checkboxes\n        .filter(checkbox => checkbox.checked)\n        .map(checkbox => checkbox.value);\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-checkboxgroup\": true,\n      \"stzh-checkboxgroup--has-description\": descriptionUsed,\n      \"stzh-checkboxgroup--has-description-long\": descriptionLongUsed,\n      \"stzh-checkboxgroup--has-error\": errorUsed,\n      \"stzh-checkboxgroup--is-disabled\": this.disabled,\n      \"stzh-checkboxgroup--is-invalid\": this.invalid,\n      \"stzh-checkboxgroup--hide-legend\": this.hideLegend,\n      [`stzh-checkboxgroup--direction-${this.direction}`]: !!this.direction\n    };\n\n    return (\n      <fieldset class={classes}>\n        {this.legend &&\n          <legend class=\"stzh-checkboxgroup__legend\">\n            {this.legend}\n          </legend>\n        }\n        <div class=\"stzh-checkboxgroup__fields\">\n          <slot></slot>\n        </div>\n        <StzhInputDescription\n          classPrefix=\"stzh-checkboxgroup\"\n          id={`${this.checkboxgroupId}-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":["stzhCheckboxgroupCss","checkboxgroupCounter","StzhCheckboxgroup","this","_value","_preventUpdateProperties","init","checkboxes","Array","from","element","querySelectorAll","updateCheckboxesProperty","checkboxgroupId","watchValue","value","watchName","name","watchDisabled","disabled","watchInvalid","invalid","watchShowMarker","showMarker","newValue","JSON","parse","updateCheckedCheckboxByValue","errorWatcher","_error","e","length","preventUpdatePropertiesWatcher","onChange","event","detail","checked","push","filter","prop","forEach","checkbox","indexOf","camelCase","checkedCheckbox","async","error","preventUpdateProperties","localization","fetchTranslations","componentShouldUpdate","_newValue","_oldValue","componentDidRender","connectedCallback","map","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","descriptionUsed","hasSlot","description","descriptionLongUsed","descriptionLong","errorUsed","classes","hideLegend","direction","h","class","legend","StzhInputDescription","classPrefix","id","moreInfoButtonLabel","$globals"],"sources":["./src/components/stzh-checkboxgroup/stzh-checkboxgroup.scss?tag=stzh-checkboxgroup&encapsulation=scoped","./src/components/stzh-checkboxgroup/stzh-checkboxgroup.tsx"],"sourcesContent":[":host([direction=\"vertical\"]) {\n  ::slotted(stzh-checkbox:not(:last-child)) {\n    margin-bottom: space('medium');\n  }\n}\n\n:host([direction=\"horizontal\"]) {\n  ::slotted(stzh-checkbox:not(:last-child)) {\n    margin-right: space('large');\n  }\n}\n\n.stzh-checkboxgroup {\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 { hasSlot } from \"../../utils/utils\";\n\nimport { StzhCheckboxChangeEvent } from \"../../index\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet checkboxgroupCounter = 0;\n\n/**\n * @slot - Slot for `stzh-checkbox` 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-checkboxgroup\",\n  styleUrl: \"stzh-checkboxgroup.scss\",\n  scoped: true\n})\nexport class StzhCheckboxgroup {\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 checkbox elements */\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  /** 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 checkbox by value */\n  @Prop({ mutable: true }) value: string[] | string = \"\";\n  private _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 checkbox elements (readonly) */\n  @Prop() checkedCheckbox: HTMLStzhCheckboxElement[] | null = null;\n\n  /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid) */\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.updateCheckboxesProperty(\"name\", newValue);\n  }\n\n  @Watch(\"disabled\")\n  watchDisabled(newValue: boolean) {\n    this.updateCheckboxesProperty(\"disabled\", newValue);\n  }\n\n  @Watch(\"invalid\")\n  watchInvalid(newValue: boolean) {\n    this.updateCheckboxesProperty(\"invalid\", newValue);\n  }\n\n  @Watch(\"showMarker\")\n  watchShowMarker(newValue: boolean) {\n    this.updateCheckboxesProperty(\"showMarker\", newValue)\n  }\n\n  @Watch(\"value\")\n  watchValue(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._value = JSON.parse(newValue);\n    } else {\n      this._value = newValue;\n    }\n\n    this.updateCheckedCheckboxByValue(this._value);\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<StzhCheckboxChangeEvent>) {\n    if (event.detail.checked) {\n      this._value.push(event.detail.value);\n    } else {\n      this._value = this._value.filter(value => value !== event.detail.value);\n    }\n\n    this.value = this._value;\n  }\n\n  /** Checkbox elements */\n  private checkboxes: HTMLStzhCheckboxElement[];\n  private checkboxgroupId: string;\n  private observer: MutationObserver;\n\n  private updateCheckboxesProperty(prop: string, value: any) {\n    this.checkboxes.forEach((checkbox: HTMLStzhCheckboxElement) => {\n      if (prop === \"name\" || (this._preventUpdateProperties.indexOf(prop) === -1)) {\n        checkbox[camelCase(prop)] = value;\n      }\n    });\n  }\n\n  private updateCheckedCheckboxByValue(value: string[]) {\n    this.checkedCheckbox = this.checkboxes.filter(checkbox => value.indexOf(checkbox.value) > -1);\n    this.checkboxes.forEach(checkbox => checkbox.checked = value.indexOf(checkbox.value) > -1);\n  }\n\n  private init = () => {\n    this.checkboxes = Array.from(this.element.querySelectorAll(\"stzh-checkbox\"));\n    this.updateCheckboxesProperty(\"a11y-describedby\", `${this.checkboxgroupId}-description`);\n\n    this.watchValue(this.value);\n    this.watchName(this.name);\n    this.watchDisabled(this.disabled);\n    this.watchInvalid(this.invalid);\n    this.watchShowMarker(this.showMarker);\n  }\n\n  async componentWillLoad() {\n    this.checkboxgroupId = `stzh-checkboxgroup-${checkboxgroupCounter++}`;\n    this.errorWatcher(this.error);\n    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, 'checkboxgroup');\n    }\n  }\n\n  componentShouldUpdate(_newValue, _oldValue, prop: string) {\n    return prop !== \"checkedCheckbox\";\n  }\n\n  componentDidRender() {\n    this.init();\n  }\n\n  connectedCallback() {\n    if (!this.value.length) {\n      this.checkboxes = Array.from(this.element.querySelectorAll(\"stzh-checkbox\"));\n\n      // try to find checkboxes that might have checked set to true\n      this.value = this.checkboxes\n        .filter(checkbox => checkbox.checked)\n        .map(checkbox => checkbox.value);\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-checkboxgroup\": true,\n      \"stzh-checkboxgroup--has-description\": descriptionUsed,\n      \"stzh-checkboxgroup--has-description-long\": descriptionLongUsed,\n      \"stzh-checkboxgroup--has-error\": errorUsed,\n      \"stzh-checkboxgroup--is-disabled\": this.disabled,\n      \"stzh-checkboxgroup--is-invalid\": this.invalid,\n      \"stzh-checkboxgroup--hide-legend\": this.hideLegend,\n      [`stzh-checkboxgroup--direction-${this.direction}`]: !!this.direction\n    };\n\n    return (\n      <fieldset class={classes}>\n        {this.legend &&\n          <legend class=\"stzh-checkboxgroup__legend\">\n            {this.legend}\n          </legend>\n        }\n        <div class=\"stzh-checkboxgroup__fields\">\n          <slot></slot>\n        </div>\n        <StzhInputDescription\n          classPrefix=\"stzh-checkboxgroup\"\n          id={`${this.checkboxgroupId}-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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"}

package/dist/stzh-components/p-3cb43903.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stzhToggleCss","toggleCounter","StzhToggle","this","focusedByInput","onInput","event","checked","input","stzhChange","emit","component","originalEvent","value","onRootFocus","setFocus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","async","focus","errorWatcher","newValue","_error","JSON","parse","e","invalid","length","inputId","error","localization","fetchTranslations","render","descriptionUsed","hasSlot","description","descriptionLongUsed","descriptionLong","errorUsed","classes","required","disabled","labelPosition","h","Host","tabindex","class","ref","el","type","id","name","a11yDescribedby","label","showMarker","$globals","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","StzhInputDescription","classPrefix","moreInfoButtonLabel"],"sources":["./src/components/stzh-toggle/stzh-toggle.scss?tag=stzh-toggle&encapsulation=scoped","./src/components/stzh-toggle/stzh-toggle.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  ::slotted(stzh-text) {\n    --color: inherit;\n  }\n}\n\n.stzh-toggle {\n  @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    position: relative;\n    background-color: $colorBlack8;\n    width: 44px;\n    height: 16px;\n    flex-shrink: 0;\n    border-radius: 12px;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    transition: background-color $baseTransitionAnimationSpeed;\n    margin-top: 4px;\n  }\n\n  &__check {\n    position: absolute;\n    border: 2px solid $baseColor;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    background-color: $colorWhite;\n    top: 50%;\n    left: 0;\n    transform: translate(0, -50%);\n    transition-property: border-color, background-color, transform;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__label {\n    display: inline-block;\n    color: $baseColor;\n    transition: color $baseTransitionAnimationSpeed;\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  /* Hover / Focus / Checked */\n\n  &__input:checked ~ &__mark {\n    background-color: $colorPrimary48;\n  }\n\n  &__input:checked ~ &__mark &__check {\n    border-color: $colorPrimary;\n    background-color: $colorPrimary;\n    transform: translate(100%, -50%);\n  }\n\n  &:hover &__label,\n  &__input:checked:hover ~ &__label {\n    color: $colorPrimaryHover;\n  }\n\n  &__input:checked ~ &__label {\n    color: $colorPrimary;\n  }\n\n  &:hover &__mark &__check,\n  &__input:focus:hover ~ &__mark &__check,\n  &__input:checked:hover ~ &__mark &__check,\n  &__input:checked:focus ~ &__mark &__check {\n    border-color: $colorPrimaryHover;\n  }\n\n\n  &__input:checked:hover ~ &__mark &__check,\n  &__input:checked:focus ~ &__mark &__check {\n    background-color: $colorPrimaryHover;\n  }\n\n  /* Label right */\n\n  &--has-label-right &__label {\n    margin-left: space('xsmall');\n  }\n\n  /* Label left */\n\n  &--has-label-left &__field-wrapper {\n    flex-direction: row-reverse;\n  }\n\n  &--has-label-left &__label {\n    margin-right: space('xsmall');\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label {\n    color: $colorError;\n  }\n\n  &--is-invalid &__input ~ &__mark &__check {\n    border-color: $colorError;\n  }\n\n  &--is-invalid &__input:checked ~ &__mark {\n    background-color: $colorBlack8;\n  }\n\n  &--is-invalid &__input:checked ~ &__mark &__check {\n    background-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    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__mark &__check {\n    border-color: $colorGrey13;\n  }\n\n  &--is-disabled &__input:checked ~ &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n\n  &--is-disabled &__input:checked ~ &__mark &__check {\n    background-color: $colorGrey25;\n    border-color: $colorGrey25;\n  }\n}\n","import {\n  Host,\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n  h,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhToggleChangeEvent,\n  StzhToggleFocusEvent,\n  StzhToggleBlurEvent\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 toggleCounter = 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-toggle\",\n  styleUrl: \"stzh-toggle.scss\",\n  scoped: true\n})\nexport class StzhToggle {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the toggle is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** 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  /** Position of label */\n  @Prop({ reflect: true }) labelPosition: \"right\" | \"left\" = \"right\";\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 input (this will be overwritten if description prop or slot is used) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Focus input field */\n  @Method()\n  async setFocus() {\n    this.input.focus();\n  }\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhToggleChangeEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhToggleFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhToggleBlurEvent>;\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-toggle\",\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-toggle\",\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-toggle\",\n      originalEvent: event\n    });\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-toggle-${toggleCounter++}`;\n\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, 'toggle');\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-toggle\": true,\n      \"stzh-toggle--has-error\": errorUsed,\n      \"stzh-toggle--is-required\": this.required,\n      \"stzh-toggle--is-invalid\": this.invalid,\n      \"stzh-toggle--is-disabled\": this.disabled,\n      \"stzh-toggle--has-description\": descriptionUsed,\n      \"stzh-toggle--has-description-long\": descriptionLongUsed,\n      [`stzh-toggle--has-label-${this.labelPosition}`]: !!this.labelPosition\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-toggle__field-wrapper\">\n            <input\n              class=\"stzh-toggle__input\"\n              ref={(el) => (this.input = el as HTMLInputElement)}\n              type=\"checkbox\"\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-toggle__mark\">\n              <div class=\"stzh-toggle__check\"></div>\n            </div>\n            <div class=\"stzh-toggle__label\">\n              {this.label ? this.label : <slot></slot>}\n              {this.showMarker &&\n                <span class=\"stzh-toggle__marker\">\n                  <span class=\"stzh-toggle__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-toggle__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-toggle\"\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":["stzhToggleCss","toggleCounter","StzhToggle","this","focusedByInput","onInput","event","checked","input","stzhChange","emit","component","originalEvent","value","onRootFocus","setFocus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","async","focus","errorWatcher","newValue","_error","JSON","parse","e","invalid","length","inputId","error","localization","fetchTranslations","render","descriptionUsed","hasSlot","description","descriptionLongUsed","descriptionLong","errorUsed","classes","required","disabled","labelPosition","h","Host","tabindex","class","ref","el","type","id","name","a11yDescribedby","label","showMarker","$globals","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","StzhInputDescription","classPrefix","moreInfoButtonLabel"],"sources":["./src/components/stzh-toggle/stzh-toggle.scss?tag=stzh-toggle&encapsulation=scoped","./src/components/stzh-toggle/stzh-toggle.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  ::slotted(stzh-text) {\n    --color: inherit;\n  }\n}\n\n.stzh-toggle {\n  @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    position: relative;\n    background-color: $colorBlack8;\n    width: 44px;\n    height: 16px;\n    flex-shrink: 0;\n    border-radius: 12px;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    transition: background-color $baseTransitionAnimationSpeed;\n    margin-top: 4px;\n  }\n\n  &__check {\n    position: absolute;\n    border: 2px solid $baseColor;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    background-color: $colorWhite;\n    top: 50%;\n    left: 0;\n    transform: translate(0, -50%);\n    transition-property: border-color, background-color, transform;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__label {\n    display: inline-block;\n    color: $baseColor;\n    transition: color $baseTransitionAnimationSpeed;\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  /* Hover / Focus / Checked */\n\n  &__input:checked ~ &__mark {\n    background-color: $colorPrimary48;\n  }\n\n  &__input:checked ~ &__mark &__check {\n    border-color: $colorPrimary;\n    background-color: $colorPrimary;\n    transform: translate(100%, -50%);\n  }\n\n  &:hover &__label,\n  &__input:checked:hover ~ &__label {\n    color: $colorPrimaryHover;\n  }\n\n  &__input:checked ~ &__label {\n    color: $colorPrimary;\n  }\n\n  &:hover &__mark &__check,\n  &__input:focus:hover ~ &__mark &__check,\n  &__input:checked:hover ~ &__mark &__check,\n  &__input:checked:focus ~ &__mark &__check {\n    border-color: $colorPrimaryHover;\n  }\n\n\n  &__input:checked:hover ~ &__mark &__check,\n  &__input:checked:focus ~ &__mark &__check {\n    background-color: $colorPrimaryHover;\n  }\n\n  /* Label right */\n\n  &--has-label-right &__label {\n    margin-left: space('xsmall');\n  }\n\n  /* Label left */\n\n  &--has-label-left &__field-wrapper {\n    flex-direction: row-reverse;\n  }\n\n  &--has-label-left &__label {\n    margin-right: space('xsmall');\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label {\n    color: $colorError;\n  }\n\n  &--is-invalid &__input ~ &__mark &__check {\n    border-color: $colorError;\n  }\n\n  &--is-invalid &__input:checked ~ &__mark {\n    background-color: $colorBlack8;\n  }\n\n  &--is-invalid &__input:checked ~ &__mark &__check {\n    background-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    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__mark &__check {\n    border-color: $colorGrey13;\n  }\n\n  &--is-disabled &__input:checked ~ &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n\n  &--is-disabled &__input:checked ~ &__mark &__check {\n    background-color: $colorGrey25;\n    border-color: $colorGrey25;\n  }\n}\n","import {\n  Host,\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n  h,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhToggleChangeEvent,\n  StzhToggleFocusEvent,\n  StzhToggleBlurEvent\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 toggleCounter = 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-toggle\",\n  styleUrl: \"stzh-toggle.scss\",\n  scoped: true\n})\nexport class StzhToggle {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the toggle is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** 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  /** Position of label */\n  @Prop({ reflect: true }) labelPosition: \"right\" | \"left\" = \"right\";\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 input (this will be overwritten if description prop or slot is used) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Focus input field */\n  @Method()\n  async setFocus() {\n    this.input.focus();\n  }\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhToggleChangeEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhToggleFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhToggleBlurEvent>;\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-toggle\",\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-toggle\",\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-toggle\",\n      originalEvent: event\n    });\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-toggle-${toggleCounter++}`;\n\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, 'toggle');\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-toggle\": true,\n      \"stzh-toggle--has-error\": errorUsed,\n      \"stzh-toggle--is-required\": this.required,\n      \"stzh-toggle--is-invalid\": this.invalid,\n      \"stzh-toggle--is-disabled\": this.disabled,\n      \"stzh-toggle--has-description\": descriptionUsed,\n      \"stzh-toggle--has-description-long\": descriptionLongUsed,\n      [`stzh-toggle--has-label-${this.labelPosition}`]: !!this.labelPosition\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-toggle__field-wrapper\">\n            <input\n              class=\"stzh-toggle__input\"\n              ref={(el) => (this.input = el as HTMLInputElement)}\n              type=\"checkbox\"\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-toggle__mark\">\n              <div class=\"stzh-toggle__check\"></div>\n            </div>\n            <div class=\"stzh-toggle__label\">\n              {this.label ? this.label : <slot></slot>}\n              {this.showMarker &&\n                <span class=\"stzh-toggle__marker\">\n                  <span class=\"stzh-toggle__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-toggle__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-toggle\"\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-3d056a49.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e,a as s,g as a}from"./p-9e02896c.js";import{s as i}from"./p-5c697491.js";const r=':host{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}:host[hidden]{display:none}:host *,:host *::before,:host *::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)}stzh-table{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;--max-height:var(--stzh-table-max-height);--min-width:var(--stzh-table-min-width);--cell-padding:var(--stzh-table-cell-padding);--input-width:var(--stzh-table-input-width)}stzh-table[hidden]{display:none}stzh-table *,stzh-table *::before,stzh-table *::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)}stzh-table[disable-min-width]:not([disable-min-width=false]){--min-width:none}.stzh-table{}.stzh-table__header{border-bottom:0.0625rem solid var(--stzh-base-border-color);padding-bottom:var(--stzh-space-small);margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-table__header{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-table__header{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.stzh-table__header{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-table__header{margin-bottom:var(--stzh-space-xlarge)}}.stzh-table__sub-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.stzh-table__heading{margin-bottom:var(--stzh-space-small)}.stzh-table__header .stzh-table__search{-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 600px){.stzh-table__header .stzh-table__search{width:var(--stzh-table-input-width);-ms-flex-positive:0;flex-grow:0}}.stzh-table__action-button{-ms-flex-negative:0;flex-shrink:0}.stzh-table__action-button:not(:empty){margin-left:var(--stzh-space-medium)}.stzh-table__outer-wrapper{position:relative}.stzh-table__outer-wrapper::before,.stzh-table__outer-wrapper::after{z-index:4;background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.16)), to(rgba(0, 0, 0, 0)));background:linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);content:"";pointer-events:none;position:absolute;top:0;height:100%;width:0.375rem;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed);opacity:0}.stzh-table__outer-wrapper::before{left:0}.stzh-table__outer-wrapper::after{right:0;-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.stzh-table__wrapper{overflow-x:auto;max-height:var(--max-height)}.stzh-table__sort-button{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;font-size:inherit;line-height:inherit;color:inherit;padding:var(--cell-padding)}.stzh-table__sort-button:hover,.stzh-table__sort-button:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-table stzh-icon.stzh-table__sort-icon{display:none}.stzh-table table{width:100%;border-spacing:0;min-width:var(--min-width)}.stzh-table thead{position:-webkit-sticky;position:sticky;top:0;z-index:3}.stzh-table tr:hover td,.stzh-table tr:hover th{background-color:var(--stzh-color-grey5)}.stzh-table td,.stzh-table th{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);text-align:left;border:none;vertical-align:top;border:none;border-bottom:0.0625rem solid var(--stzh-base-border-color);background-color:var(--stzh-color-white);-webkit-transition:background-color var(--stzh-base-transition-animation-speed);transition:background-color var(--stzh-base-transition-animation-speed);padding:var(--cell-padding);}.stzh-table td a,.stzh-table th a{color:var(--stzh-link-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius)}.stzh-table td a:hover,.stzh-table td a:focus,.stzh-table th a:hover,.stzh-table th a:focus{color:var(--stzh-link-hover-color)}.stzh-table td b,.stzh-table td strong,.stzh-table th b,.stzh-table th strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal}.stzh-table td i,.stzh-table td em,.stzh-table th i,.stzh-table th em{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-table td.align-left,.stzh-table th.align-left{text-align:left}.stzh-table td.align-right,.stzh-table th.align-right{text-align:right}.stzh-table td.align-center,.stzh-table th.align-center{text-align:center}.stzh-table td.valign-auto,.stzh-table th.valign-auto{vertical-align:auto}.stzh-table td.valign-middle,.stzh-table th.valign-middle{vertical-align:middle}.stzh-table td.valign-bottom,.stzh-table th.valign-bottom{vertical-align:bottom}.stzh-table td.nowrap,.stzh-table th.nowrap{white-space:nowrap}.stzh-table td.is-sticky-left,.stzh-table td.is-sticky-right,.stzh-table th.is-sticky-left,.stzh-table th.is-sticky-right{position:-webkit-sticky;position:sticky;z-index:1}.stzh-table td.has-sticked,.stzh-table th.has-sticked{z-index:2}.stzh-table td.is-sticky-left,.stzh-table th.is-sticky-left{left:0}.stzh-table td.is-sticky-right,.stzh-table th.is-sticky-right{right:0}.stzh-table td.is-sticky-left::after,.stzh-table td.is-sticky-right::after,.stzh-table th.is-sticky-left::after,.stzh-table th.is-sticky-right::after{background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.16)), to(rgba(0, 0, 0, 0)));background:linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);content:"";pointer-events:none;position:absolute;top:0;height:100%;width:0.375rem;-webkit-transform:translate(100%);transform:translate(100%);opacity:0;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-table td.is-sticky-left::after,.stzh-table th.is-sticky-left::after{right:0}.stzh-table td.is-sticky-right::after,.stzh-table th.is-sticky-right::after{left:0;-webkit-transform:rotate(-180deg) translate(100%);transform:rotate(-180deg) translate(100%)}.stzh-table td.has-sticked.is-sticky-left::after,.stzh-table td.has-sticked.is-sticky-right::after,.stzh-table th.has-sticked.is-sticky-left::after,.stzh-table th.has-sticked.is-sticky-right::after{opacity:1}.stzh-table th{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-table th.is-sortable{padding:0}td.has-sorted .stzh-table__sort-icon,th.has-sorted .stzh-table__sort-icon{display:-ms-inline-flexbox;display:inline-flex}td.has-sorted-desc .stzh-table__sort-icon,th.has-sorted-desc .stzh-table__sort-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.stzh-table.has-scroll-left-shadow .stzh-table__outer-wrapper::before,.stzh-table.has-scroll-right-shadow .stzh-table__outer-wrapper::after{opacity:1}';const h="has-sticked";const o="is-sticky-left";const n="is-sticky-right";const l=class{constructor(e){t(this,e);this.updateCellClasses=()=>{if(!this.tableWrapper){return}const t=Array.from(this.tableWrapper.querySelectorAll("tr"));t.forEach((t=>{const e=Array.from(t.children);e.forEach(((t,e)=>{t.classList.remove(o);t.classList.remove(n);if(e===this.fixedLeft){t.classList.add(o)}if(e===this.fixedRight){t.classList.add(n)}}))}))};this.updateScrollStates=()=>{if(!this.tableWrapper){return}const t=this.tableWrapper.scrollLeft;const e=this.tableWrapper.scrollWidth;const s=this.tableWrapper.clientWidth;this.isScrollable=e>s;this.hasScrollLeft=t>0;this.hasScrollRight=t<e-s;const a=Array.from(this.tableWrapper.querySelectorAll("tr"));const i=a[0];if(!i){return}this.cellsStickyLeft=[];this.cellsStickyRight=[];const r=Array.from(i.children);r.forEach(((e,a)=>{const i=e.offsetLeft;const r=i+e.offsetWidth;if(this.hasScrollLeft&&a===this.fixedLeft&&Math.ceil(t)>=i){this.cellsStickyLeft.push(a)}if(this.hasScrollRight&&a===this.fixedRight&&Math.ceil(t)+s<=r){this.cellsStickyRight.push(a)}}));a.forEach((t=>{const e=Array.from(t.children);e.forEach(((t,e)=>{if(this.cellsStickyLeft.indexOf(e)>-1||this.cellsStickyRight.indexOf(e)>-1){t.classList.add(h)}else{t.classList.remove(h)}}))}))};this.init=()=>{const t=this.element.querySelector('stzh-input[slot="search"], [slot="search"] stzh-input');if(t){i(t,{size:"small"})}this.updateCellClasses();this.updateScrollStates()};this.handleResize=()=>{if(this.debounceResize){window.cancelAnimationFrame(this.debounceResize)}this.debounceResize=requestAnimationFrame(this.updateScrollStates)};this.handleScroll=()=>{if(this.debounceScroll){window.cancelAnimationFrame(this.debounceScroll)}this.debounceScroll=requestAnimationFrame(this.updateScrollStates)};this.fixedLeft=null;this.fixedRight=null;this.disableMinWidth=false;this.hasScrollLeft=false;this.hasScrollRight=false;this.isScrollable=false;this.cellsStickyLeft=[];this.cellsStickyRight=[]}fixedCellWatcher(){this.updateCellClasses();this.updateScrollStates()}connectedCallback(){this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true});this.resizeObserver=new ResizeObserver(this.handleResize);this.resizeObserver.observe(this.element)}disconnectedCallback(){if(this.observer){this.observer.disconnect()}if(this.resizeObserver){this.resizeObserver.disconnect()}}render(){const t={"stzh-table":true,"is-scrollable":this.isScrollable,"has-scroll-left":this.hasScrollLeft,"has-scroll-right":this.hasScrollRight,"has-scroll-left-shadow":this.hasScrollLeft&&this.cellsStickyLeft.length===0,"has-scroll-right-shadow":this.hasScrollRight&&this.cellsStickyRight.length===0};return e(s,null,e("div",{class:t},e("div",{class:"stzh-table__header"},e("div",{class:"stzh-table__heading"},e("slot",{name:"heading"})),e("div",{class:"stzh-table__sub-header"},e("div",{class:"stzh-table__search"},e("slot",{name:"search"})),e("div",{class:"stzh-table__action-button"},e("slot",{name:"action-button"})))),e("div",{class:"stzh-table__outer-wrapper"},e("div",{ref:t=>this.tableWrapper=t,class:"stzh-table__wrapper",onScroll:this.handleScroll},e("slot",null)))))}get element(){return a(this)}static get watchers(){return{fixedLeft:["fixedCellWatcher"],fixedRight:["fixedCellWatcher"]}}};l.style=r;export{l as stzh_table};
+//# sourceMappingURL=p-3d056a49.entry.js.map

package/dist/stzh-components/{p-a8cd5621.entry.js.map → p-3d056a49.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stzhTableCss","CLASS_HAS_STICKED","CLASS_IS_STICKY_LEFT","CLASS_IS_STICKY_RIGHT","StzhTable","this","updateCellClasses","tableWrapper","rows","Array","from","querySelectorAll","forEach","row","cells","children","cell","index","classList","remove","fixedLeft","add","fixedRight","updateScrollStates","wrapperScrollLeft","scrollLeft","wrapperScrollWidth","scrollWidth","wrapperClientWidth","clientWidth","isScrollable","hasScrollLeft","hasScrollRight","firstRow","cellsStickyLeft","cellsStickyRight","offsetLeft","offsetRight","offsetWidth","Math","ceil","push","indexOf","init","searchInput","element","querySelector","setPropsIfNull","size","handleResize","debounceResize","window","cancelAnimationFrame","requestAnimationFrame","handleScroll","debounceScroll","fixedCellWatcher","connectedCallback","observer","MutationObserver","observe","childList","subtree","resizeObserver","ResizeObserver","disconnectedCallback","disconnect","render","classes","length","h","Host","class","name","ref","el","onScroll"],"sources":["./src/components/stzh-table/stzh-table.scss?tag=stzh-table","./src/components/stzh-table/stzh-table.tsx"],"sourcesContent":["stzh-table {\n  @include host;\n  @include table-host();\n}\n\n.stzh-table {\n  @include table(\"table\");\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Watch\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\nconst CLASS_HAS_STICKED = \"has-sticked\";\nconst CLASS_IS_STICKY_LEFT = \"is-sticky-left\";\nconst CLASS_IS_STICKY_RIGHT = \"is-sticky-right\";\n\n/**\n * @slot - Slot for table element\n * @slot heading - Slot for `stzh-heading`\n * @slot search - Slot for search `stzh-input` element\n *\n * @prop --max-height: Maximum height of table\n * @prop --min-width: Minium width of table\n * @prop --cell-padding: Cells padding\n */\n@Component({\n  tag: \"stzh-table\",\n  styleUrl: \"stzh-table.scss\"\n})\nexport class StzhTable {\n  /** Columns that should be sticky on the left side (column indexes separated by comma) */\n  @Prop() fixedLeft: number = null;\n\n  /** Columns that should be sticky on the right side (column indexes separated by comma) */\n  @Prop() fixedRight: number = null;\n\n  /**\n   * Whether to disable min-width of the table.\n   *\n   * If `false`, the default `min-width` is `700px`\n   * If `true`, the `min-width` is `none`, so the table will try to squeeze down content as much as possible.\n   *\n   * You can also overwrite the min-width via CSS with the custom property `--min-width`.\n   */\n  @Prop({ reflect: true }) disableMinWidth: boolean = false;\n\n  @State() hasScrollLeft: boolean = false;\n  @State() hasScrollRight: boolean = false;\n  @State() isScrollable: boolean = false;\n  @State() cellsStickyLeft: number[] = [];\n  @State() cellsStickyRight: number[] = [];\n\n  @Element() element: HTMLStzhTableElement;\n\n  @Watch(\"fixedLeft\")\n  @Watch(\"fixedRight\")\n  fixedCellWatcher() {\n    this.updateCellClasses();\n    this.updateScrollStates();\n  }\n\n  private tableWrapper: HTMLDivElement;\n  private observer: MutationObserver;\n  private debounceScroll: number;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n\n  private updateCellClasses = () => {\n    if (!this.tableWrapper) {\n      return;\n    }\n\n    const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n    rows.forEach((row: HTMLTableRowElement) => {\n      const cells = Array.from(row.children);\n      cells.forEach((cell: HTMLTableCellElement, index) => {\n        cell.classList.remove(CLASS_IS_STICKY_LEFT);\n        cell.classList.remove(CLASS_IS_STICKY_RIGHT);\n\n        if (index === this.fixedLeft) {\n          cell.classList.add(CLASS_IS_STICKY_LEFT);\n        }\n\n        if (index === this.fixedRight) {\n          cell.classList.add(CLASS_IS_STICKY_RIGHT);\n        }\n      });\n    });\n  }\n\n  private updateScrollStates = () => {\n    if (!this.tableWrapper) {\n      return;\n    }\n\n    const wrapperScrollLeft = this.tableWrapper.scrollLeft;\n    const wrapperScrollWidth = this.tableWrapper.scrollWidth;\n    const wrapperClientWidth = this.tableWrapper.clientWidth;\n\n    this.isScrollable = wrapperScrollWidth > wrapperClientWidth;\n    this.hasScrollLeft = wrapperScrollLeft > 0;\n    this.hasScrollRight = wrapperScrollLeft < wrapperScrollWidth - wrapperClientWidth;\n\n    const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n    const firstRow = rows[0];\n\n    if (!firstRow) {\n      return;\n    }\n\n    this.cellsStickyLeft = [];\n    this.cellsStickyRight = [];\n    const cells: Element[] = Array.from(firstRow.children);\n\n    cells.forEach((cell: HTMLTableCellElement, index: number) => {\n      const offsetLeft = cell.offsetLeft;\n      const offsetRight = offsetLeft + cell.offsetWidth;\n\n      if (\n        this.hasScrollLeft\n        && index === this.fixedLeft\n        && Math.ceil(wrapperScrollLeft) >= offsetLeft\n      ) {\n        this.cellsStickyLeft.push(index);\n      }\n\n      if (\n        this.hasScrollRight\n        && index === this.fixedRight\n        && Math.ceil(wrapperScrollLeft) + wrapperClientWidth <= offsetRight\n      ) {\n        this.cellsStickyRight.push(index);\n      }\n    });\n\n    rows.forEach((row: HTMLTableRowElement) => {\n      const cells = Array.from(row.children);\n      cells.forEach((cell: HTMLTableCellElement, index: number) => {\n        if (\n          this.cellsStickyLeft.indexOf(index) > -1\n          || this.cellsStickyRight.indexOf(index) > -1\n        ) {\n          cell.classList.add(CLASS_HAS_STICKED);\n        } else {\n          cell.classList.remove(CLASS_HAS_STICKED);\n        }\n      });\n    });\n  }\n\n  private init = () => {\n    const searchInput = this.element.querySelector(\n      'stzh-input[slot=\"search\"], [slot=\"search\"] stzh-input'\n    );\n\n    if (searchInput) {\n      setPropsIfNull(searchInput, {\n        size: \"small\"\n      } as HTMLStzhInputElement)\n    }\n\n    this.updateCellClasses();\n    this.updateScrollStates();\n  }\n\n  handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateScrollStates);\n  }\n\n  private handleScroll = () => {\n    if (this.debounceScroll) {\n      window.cancelAnimationFrame(this.debounceScroll);\n    }\n\n    this.debounceScroll = requestAnimationFrame(this.updateScrollStates);\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-table\": true,\n      \"is-scrollable\": this.isScrollable,\n      \"has-scroll-left\": this.hasScrollLeft,\n      \"has-scroll-right\": this.hasScrollRight,\n      \"has-scroll-left-shadow\": this.hasScrollLeft && this.cellsStickyLeft.length === 0,\n      \"has-scroll-right-shadow\": this.hasScrollRight && this.cellsStickyRight.length === 0\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-table__header\">\n            <div class=\"stzh-table__heading\">\n              <slot name=\"heading\"></slot>\n            </div>\n            <div class=\"stzh-table__search\">\n              <slot name=\"search\"></slot>\n            </div>\n          </div>\n          <div class=\"stzh-table__outer-wrapper\">\n            <div\n              ref={(el) => (this.tableWrapper = el as HTMLDivElement)}\n              class=\"stzh-table__wrapper\"\n              onScroll={this.handleScroll}\n            >\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAe,w+OCYrB,MAAMC,EAAoB,cAC1B,MAAMC,EAAuB,iBAC7B,MAAMC,EAAwB,kB,MAejBC,EAAS,M,yBAuCZC,KAAAC,kBAAoB,KAC1B,IAAKD,KAAKE,aAAc,CACtB,M,CAGF,MAAMC,EAA8BC,MAAMC,KAAKL,KAAKE,aAAaI,iBAAiB,OAClFH,EAAKI,SAASC,IACZ,MAAMC,EAAQL,MAAMC,KAAKG,EAAIE,UAC7BD,EAAMF,SAAQ,CAACI,EAA4BC,KACzCD,EAAKE,UAAUC,OAAOjB,GACtBc,EAAKE,UAAUC,OAAOhB,GAEtB,GAAIc,IAAUZ,KAAKe,UAAW,CAC5BJ,EAAKE,UAAUG,IAAInB,E,CAGrB,GAAIe,IAAUZ,KAAKiB,WAAY,CAC7BN,EAAKE,UAAUG,IAAIlB,E,IAErB,GACF,EAGIE,KAAAkB,mBAAqB,KAC3B,IAAKlB,KAAKE,aAAc,CACtB,M,CAGF,MAAMiB,EAAoBnB,KAAKE,aAAakB,WAC5C,MAAMC,EAAqBrB,KAAKE,aAAaoB,YAC7C,MAAMC,EAAqBvB,KAAKE,aAAasB,YAE7CxB,KAAKyB,aAAeJ,EAAqBE,EACzCvB,KAAK0B,cAAgBP,EAAoB,EACzCnB,KAAK2B,eAAiBR,EAAoBE,EAAqBE,EAE/D,MAAMpB,EAA8BC,MAAMC,KAAKL,KAAKE,aAAaI,iBAAiB,OAClF,MAAMsB,EAAWzB,EAAK,GAEtB,IAAKyB,EAAU,CACb,M,CAGF5B,KAAK6B,gBAAkB,GACvB7B,KAAK8B,iBAAmB,GACxB,MAAMrB,EAAmBL,MAAMC,KAAKuB,EAASlB,UAE7CD,EAAMF,SAAQ,CAACI,EAA4BC,KACzC,MAAMmB,EAAapB,EAAKoB,WACxB,MAAMC,EAAcD,EAAapB,EAAKsB,YAEtC,GACEjC,KAAK0B,eACFd,IAAUZ,KAAKe,WACfmB,KAAKC,KAAKhB,IAAsBY,EACnC,CACA/B,KAAK6B,gBAAgBO,KAAKxB,E,CAG5B,GACEZ,KAAK2B,gBACFf,IAAUZ,KAAKiB,YACfiB,KAAKC,KAAKhB,GAAqBI,GAAsBS,EACxD,CACAhC,KAAK8B,iBAAiBM,KAAKxB,E,KAI/BT,EAAKI,SAASC,IACZ,MAAMC,EAAQL,MAAMC,KAAKG,EAAIE,UAC7BD,EAAMF,SAAQ,CAACI,EAA4BC,KACzC,GACEZ,KAAK6B,gBAAgBQ,QAAQzB,IAAU,GACpCZ,KAAK8B,iBAAiBO,QAAQzB,IAAU,EAC3C,CACAD,EAAKE,UAAUG,IAAIpB,E,KACd,CACLe,EAAKE,UAAUC,OAAOlB,E,IAExB,GACF,EAGII,KAAAsC,KAAO,KACb,MAAMC,EAAcvC,KAAKwC,QAAQC,cAC/B,yDAGF,GAAIF,EAAa,CACfG,EAAeH,EAAa,CAC1BI,KAAM,S,CAIV3C,KAAKC,oBACLD,KAAKkB,oBAAoB,EAG3BlB,KAAA4C,aAAe,KACb,GAAI5C,KAAK6C,eAAgB,CACvBC,OAAOC,qBAAqB/C,KAAK6C,e,CAGnC7C,KAAK6C,eAAiBG,sBAAsBhD,KAAKkB,mBAAmB,EAG9DlB,KAAAiD,aAAe,KACrB,GAAIjD,KAAKkD,eAAgB,CACvBJ,OAAOC,qBAAqB/C,KAAKkD,e,CAGnClD,KAAKkD,eAAiBF,sBAAsBhD,KAAKkB,mBAAmB,E,eApJ1C,K,gBAGC,K,qBAUuB,M,mBAElB,M,oBACC,M,kBACF,M,qBACI,G,sBACC,E,CAMtCiC,mBACEnD,KAAKC,oBACLD,KAAKkB,oB,CA4HPkC,oBACEpD,KAAKsC,OAELtC,KAAKqD,SAAW,IAAIC,iBAAiBtD,KAAKsC,MAC1CtC,KAAKqD,SAASE,QAAQvD,KAAKwC,QAAS,CAClCgB,UAAW,KACXC,QAAS,OAGXzD,KAAK0D,eAAiB,IAAIC,eAAe3D,KAAK4C,cAC9C5C,KAAK0D,eAAeH,QAAQvD,KAAKwC,Q,CAGnCoB,uBACE,GAAI5D,KAAKqD,SAAU,CACjBrD,KAAKqD,SAASQ,Y,CAGhB,GAAI7D,KAAK0D,eAAgB,CACvB1D,KAAK0D,eAAeG,Y,EAIxBC,SACE,MAAMC,EAAU,CACd,aAAc,KACd,gBAAiB/D,KAAKyB,aACtB,kBAAmBzB,KAAK0B,cACxB,mBAAoB1B,KAAK2B,eACzB,yBAA0B3B,KAAK0B,eAAiB1B,KAAK6B,gBAAgBmC,SAAW,EAChF,0BAA2BhE,KAAK2B,gBAAkB3B,KAAK8B,iBAAiBkC,SAAW,GAGrF,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOJ,GACVE,EAAA,OAAKE,MAAM,sBACTF,EAAA,OAAKE,MAAM,uBACTF,EAAA,QAAMG,KAAK,aAEbH,EAAA,OAAKE,MAAM,sBACTF,EAAA,QAAMG,KAAK,aAGfH,EAAA,OAAKE,MAAM,6BACTF,EAAA,OACEI,IAAMC,GAAQtE,KAAKE,aAAeoE,EAClCH,MAAM,sBACNI,SAAUvE,KAAKiD,cAEfgB,EAAA,gB"}
+{"version":3,"names":["stzhTableCss","CLASS_HAS_STICKED","CLASS_IS_STICKY_LEFT","CLASS_IS_STICKY_RIGHT","StzhTable","this","updateCellClasses","tableWrapper","rows","Array","from","querySelectorAll","forEach","row","cells","children","cell","index","classList","remove","fixedLeft","add","fixedRight","updateScrollStates","wrapperScrollLeft","scrollLeft","wrapperScrollWidth","scrollWidth","wrapperClientWidth","clientWidth","isScrollable","hasScrollLeft","hasScrollRight","firstRow","cellsStickyLeft","cellsStickyRight","offsetLeft","offsetRight","offsetWidth","Math","ceil","push","indexOf","init","searchInput","element","querySelector","setPropsIfNull","size","handleResize","debounceResize","window","cancelAnimationFrame","requestAnimationFrame","handleScroll","debounceScroll","fixedCellWatcher","connectedCallback","observer","MutationObserver","observe","childList","subtree","resizeObserver","ResizeObserver","disconnectedCallback","disconnect","render","classes","length","h","Host","class","name","ref","el","onScroll"],"sources":["./src/components/stzh-table/stzh-table.scss?tag=stzh-table","./src/components/stzh-table/stzh-table.tsx"],"sourcesContent":["stzh-table {\n  @include host;\n  @include table-host();\n}\n\n.stzh-table {\n  @include table(\"table\");\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Watch\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\nconst CLASS_HAS_STICKED = \"has-sticked\";\nconst CLASS_IS_STICKY_LEFT = \"is-sticky-left\";\nconst CLASS_IS_STICKY_RIGHT = \"is-sticky-right\";\n\n/**\n * @slot - Slot for table element\n * @slot heading - Slot for `stzh-heading`\n * @slot search - Slot for search `stzh-input` element\n * @slot action-button - Slot for action `stzh-button` element\n *\n * @prop --max-height: Maximum height of table\n * @prop --min-width: Minium width of table\n * @prop --cell-padding: Cells padding\n */\n@Component({\n  tag: \"stzh-table\",\n  styleUrl: \"stzh-table.scss\"\n})\nexport class StzhTable {\n  /** Columns that should be sticky on the left side (column indexes separated by comma) */\n  @Prop() fixedLeft: number = null;\n\n  /** Columns that should be sticky on the right side (column indexes separated by comma) */\n  @Prop() fixedRight: number = null;\n\n  /**\n   * Whether to disable min-width of the table.\n   *\n   * If `false`, the default `min-width` is `700px`\n   * If `true`, the `min-width` is `none`, so the table will try to squeeze down content as much as possible.\n   *\n   * You can also overwrite the min-width via CSS with the custom property `--min-width`.\n   */\n  @Prop({ reflect: true }) disableMinWidth: boolean = false;\n\n  @State() hasScrollLeft: boolean = false;\n  @State() hasScrollRight: boolean = false;\n  @State() isScrollable: boolean = false;\n  @State() cellsStickyLeft: number[] = [];\n  @State() cellsStickyRight: number[] = [];\n\n  @Element() element: HTMLStzhTableElement;\n\n  @Watch(\"fixedLeft\")\n  @Watch(\"fixedRight\")\n  fixedCellWatcher() {\n    this.updateCellClasses();\n    this.updateScrollStates();\n  }\n\n  private tableWrapper: HTMLDivElement;\n  private observer: MutationObserver;\n  private debounceScroll: number;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n\n  private updateCellClasses = () => {\n    if (!this.tableWrapper) {\n      return;\n    }\n\n    const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n    rows.forEach((row: HTMLTableRowElement) => {\n      const cells = Array.from(row.children);\n      cells.forEach((cell: HTMLTableCellElement, index) => {\n        cell.classList.remove(CLASS_IS_STICKY_LEFT);\n        cell.classList.remove(CLASS_IS_STICKY_RIGHT);\n\n        if (index === this.fixedLeft) {\n          cell.classList.add(CLASS_IS_STICKY_LEFT);\n        }\n\n        if (index === this.fixedRight) {\n          cell.classList.add(CLASS_IS_STICKY_RIGHT);\n        }\n      });\n    });\n  }\n\n  private updateScrollStates = () => {\n    if (!this.tableWrapper) {\n      return;\n    }\n\n    const wrapperScrollLeft = this.tableWrapper.scrollLeft;\n    const wrapperScrollWidth = this.tableWrapper.scrollWidth;\n    const wrapperClientWidth = this.tableWrapper.clientWidth;\n\n    this.isScrollable = wrapperScrollWidth > wrapperClientWidth;\n    this.hasScrollLeft = wrapperScrollLeft > 0;\n    this.hasScrollRight = wrapperScrollLeft < wrapperScrollWidth - wrapperClientWidth;\n\n    const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n    const firstRow = rows[0];\n\n    if (!firstRow) {\n      return;\n    }\n\n    this.cellsStickyLeft = [];\n    this.cellsStickyRight = [];\n    const cells: Element[] = Array.from(firstRow.children);\n\n    cells.forEach((cell: HTMLTableCellElement, index: number) => {\n      const offsetLeft = cell.offsetLeft;\n      const offsetRight = offsetLeft + cell.offsetWidth;\n\n      if (\n        this.hasScrollLeft\n        && index === this.fixedLeft\n        && Math.ceil(wrapperScrollLeft) >= offsetLeft\n      ) {\n        this.cellsStickyLeft.push(index);\n      }\n\n      if (\n        this.hasScrollRight\n        && index === this.fixedRight\n        && Math.ceil(wrapperScrollLeft) + wrapperClientWidth <= offsetRight\n      ) {\n        this.cellsStickyRight.push(index);\n      }\n    });\n\n    rows.forEach((row: HTMLTableRowElement) => {\n      const cells = Array.from(row.children);\n      cells.forEach((cell: HTMLTableCellElement, index: number) => {\n        if (\n          this.cellsStickyLeft.indexOf(index) > -1\n          || this.cellsStickyRight.indexOf(index) > -1\n        ) {\n          cell.classList.add(CLASS_HAS_STICKED);\n        } else {\n          cell.classList.remove(CLASS_HAS_STICKED);\n        }\n      });\n    });\n  }\n\n  private init = () => {\n    const searchInput = this.element.querySelector(\n      'stzh-input[slot=\"search\"], [slot=\"search\"] stzh-input'\n    );\n\n    if (searchInput) {\n      setPropsIfNull(searchInput, {\n        size: \"small\"\n      } as HTMLStzhInputElement)\n    }\n\n    this.updateCellClasses();\n    this.updateScrollStates();\n  }\n\n  handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateScrollStates);\n  }\n\n  private handleScroll = () => {\n    if (this.debounceScroll) {\n      window.cancelAnimationFrame(this.debounceScroll);\n    }\n\n    this.debounceScroll = requestAnimationFrame(this.updateScrollStates);\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-table\": true,\n      \"is-scrollable\": this.isScrollable,\n      \"has-scroll-left\": this.hasScrollLeft,\n      \"has-scroll-right\": this.hasScrollRight,\n      \"has-scroll-left-shadow\": this.hasScrollLeft && this.cellsStickyLeft.length === 0,\n      \"has-scroll-right-shadow\": this.hasScrollRight && this.cellsStickyRight.length === 0\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-table__header\">\n            <div class=\"stzh-table__heading\">\n              <slot name=\"heading\"></slot>\n            </div>            \n            <div class=\"stzh-table__sub-header\">\n              <div class=\"stzh-table__search\">\n                <slot name=\"search\"></slot>\n              </div>\n              <div class=\"stzh-table__action-button\">\n                <slot name=\"action-button\"></slot>\n              </div>\n            </div>\n          </div>\n          <div class=\"stzh-table__outer-wrapper\">\n            <div\n              ref={(el) => (this.tableWrapper = el as HTMLDivElement)}\n              class=\"stzh-table__wrapper\"\n              onScroll={this.handleScroll}\n            >\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-3e10addb.system.js

@@ -0,0 +1,2 @@
+System.register(["./p-7b184ebb.system.js","./p-61b66e55.system.js"],(function(e,a){"use strict";var t,i,s,l,o,n;return{setters:[function(a){t=a.d;i=a.N;s=a.p;l=a.H;o=a.b;e("setNonce",a.s)},function(e){n=e.g}],execute:function(){var e=function(){{r(l.prototype)}var e=Array.from(t.querySelectorAll("script")).find((function(e){return new RegExp("/".concat(i,"(\\.esm)?\\.js($|\\?|#)")).test(e.src)||e.getAttribute("data-stencil-namespace")===i}));var o=a.meta.url;var n=(e||{})["data-opts"]||{};if(o!==""){n.resourcesUrl=new URL(".",o).href}return s(n)};var r=function(e){var a=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return a.call(this,e)}var t=a.call(this,false);var i=this.childNodes;if(e){for(var s=0;s<i.length;s++){if(i[s].nodeType!==2){t.appendChild(i[s].cloneNode(true))}}}return t}};e().then((function(e){n();return o(JSON.parse('[["p-b308baf5.system",[[2,"stzh-microsite-teaserlist",{"localization":[16],"api":[1],"tags":[1],"stepItems":[2,"step-items"],"showItems":[32],"activeFilter":[32]}]]],["p-8eb26b9d.system",[[2,"stzh-appointments",{"localization":[16],"sortBy":[1025,"sort-by"],"appointments":[1],"currentDate":[1025,"current-date"],"value":[1025],"name":[513],"showItems":[1026,"show-items"],"stepItems":[2,"step-items"],"calendarTitle":[1,"calendar-title"],"appointmentsTitle":[1,"appointments-title"],"dateAdapter":[16]}]]],["p-99d38c05.system",[[2,"stzh-datamessagelist-item",{"localization":[16],"heading":[1],"unread":[4],"href":[1],"rel":[1],"target":[1],"description":[1],"icon":[1],"loadingStatus":[1,"loading-status"],"meta":[1],"actions":[1],"tags":[1],"analyticsId":[1,"analytics-id"],"external":[32]}]]],["p-4cd7c872.system",[[6,"stzh-contact",{"type":[1],"heading":[1],"mainHeading":[1,"main-heading"],"name":[1],"street":[1],"streetInfo":[1,"street-info"],"postalCode":[1,"postal-code"],"location":[1],"numbers":[1],"poBoxHeading":[1,"po-box-heading"],"poboxTitle":[1,"pobox-title"],"poboxPostalCode":[1,"pobox-postal-code"],"poboxLocation":[1,"pobox-location"],"availabilityTitle":[1,"availability-title"],"availability":[1],"withBorder":[4,"with-border"]}]]],["p-f5ca7ce2.system",[[0,"stzh-sitemap",{"items":[1]}]]],["p-67b11b03.system",[[0,"stzh-amount",{"minValue":[2,"min-value"],"maxValue":[2,"max-value"],"minValueDropdown":[2,"min-value-dropdown"],"maxValueDropdown":[2,"max-value-dropdown"],"value":[1025],"step":[2],"name":[513],"size":[513],"disabled":[516],"popoverPlacement":[513,"popover-placement"],"label":[1],"invalid":[516],"required":[516],"clearable":[516],"showMarker":[516,"show-marker"],"description":[1],"descriptionLong":[1,"description-long"],"error":[1025],"a11yDescribedby":[1,"a11y-describedby"],"localization":[16]}]]],["p-80d581ac.system",[[4,"stzh-datatable",{"localization":[16],"label":[1],"sortBy":[1025,"sort-by"],"sortDirection":[1025,"sort-direction"],"tokenize":[1],"idField":[1,"id-field"],"disableMinWidth":[516,"disable-min-width"],"rows":[1],"columns":[1],"query":[32],"hasScrollLeft":[32],"hasScrollRight":[32],"isScrollable":[32],"cellsStickyLeft":[32],"cellsStickyRight":[32],"toggleSort":[64]}]]],["p-5d9a62d0.system",[[2,"stzh-saptcha",{"localization":[16],"numbers":[1],"value":[1],"name":[513],"error":[1],"invalid":[516],"disabled":[516]}]]],["p-29ed53a9.system",[[2,"stzh-vbz-majorticker",{"api":[1],"data":[8],"moreInfoLink":[1,"more-info-link"],"dateAdapter":[16],"localization":[16],"ghettoboxCloseTimeKey":[1,"ghettobox-close-time-key"],"ghettoboxShown":[32],"getGhettoboxShown":[64],"getDisturbance":[64]}]]],["p-d40cc52e.system",[[6,"stzh-vbz-ticker",{"api":[1],"data":[8],"moreInfoLink":[1,"more-info-link"],"dateAdapter":[16],"localization":[16]}]]],["p-6f0ddca1.system",[[2,"stzh-anchornav",{"columns":[514],"columnsSmall":[514,"columns-small"],"columnsMedium":[514,"columns-medium"],"columnsLarge":[514,"columns-large"],"columnsUltra":[514,"columns-ultra"],"items":[1],"withBorder":[516,"with-border"]}]]],["p-05b9e4c2.system",[[6,"stzh-audio",{"localization":[16],"src":[1],"preload":[1],"transcript":[1],"transcriptShown":[1028,"transcript-shown"],"downloadAnalyticsId":[1,"download-analytics-id"],"transcriptAnalyticsId":[1,"transcript-analytics-id"],"play":[64],"pause":[64]}]]],["p-6d097e82.system",[[4,"stzh-upload",{"existingFiles":[1,"existing-files"],"label":[1],"description":[1],"button":[1],"url":[1],"method":[1],"withCredentials":[4,"with-credentials"],"disabled":[516],"invalid":[516],"downloadDisabled":[4,"download-disabled"],"error":[1],"acceptedFiles":[1,"accepted-files"],"autoProcessQueue":[4,"auto-process-queue"],"maxFiles":[2,"max-files"],"maxFilesize":[2,"max-filesize"],"parallelUploads":[2,"parallel-uploads"],"uploadMultiple":[4,"upload-multiple"],"chunking":[4],"forceChunking":[4,"force-chunking"],"chunkSize":[2,"chunk-size"],"parallelChunkUploads":[4,"parallel-chunk-uploads"],"retryChunks":[4,"retry-chunks"],"retryChunksLimit":[2,"retry-chunks-limit"],"filesizeBase":[2,"filesize-base"],"headers":[16],"defaultHeaders":[4,"default-headers"],"accept":[16],"chunksUploaded":[16],"hiddenInputContainer":[1,"hidden-input-container"],"localization":[16],"processQueue":[64],"removeFile":[64],"removeAllFiles":[64]}]]],["p-799548c4.system",[[4,"stzh-footer",{"localization":[16],"copyright":[1],"variant":[1],"mainUrl":[1,"main-url"],"withBorder":[4,"with-border"]}]]],["p-491ca637.system",[[2,"stzh-langnav",{"languageActive":[1,"language-active"],"languages":[1],"popoverPlacement":[513,"popover-placement"],"preventUrlchange":[4,"prevent-urlchange"]}]]],["p-b7c02c9c.system",[[6,"stzh-message",{"label":[1],"description":[1],"closeKey":[1,"close-key"],"type":[513],"hideClose":[4,"hide-close"],"localization":[16],"open":[32],"show":[64],"hide":[64]}]]],["p-b792ea2e.system",[[6,"stzh-pagebottom",{"shareTitle":[1,"share-title"],"shareUrl":[1,"share-url"],"shareServices":[1,"share-services"],"shareDisabled":[4,"share-disabled"],"logoHref":[1,"logo-href"],"logoAnalyticsId":[1,"logo-analytics-id"],"withBorder":[4,"with-border"]}]]],["p-416316c5.system",[[6,"stzh-accordion-item",{"open":[1540],"disabled":[516],"heading":[1],"subtitle":[1],"description":[1],"icon":[1],"badge":[1],"badgeEmpty":[516,"badge-empty"],"badgeType":[513,"badge-type"],"headingLevel":[513,"heading-level"],"analyticsId":[1,"analytics-id"],"show":[64],"hide":[64],"toggle":[64],"setFocus":[64]}]]],["p-39a4904e.system",[[6,"stzh-checkbox",{"localization":[16],"disabled":[516],"name":[513],"value":[1025],"invalid":[516],"required":[516],"checked":[1540],"label":[1],"description":[1],"descriptionLong":[1,"description-long"],"showMarker":[516,"show-marker"],"error":[1],"a11yDescribedby":[1,"a11y-describedby"],"setFocus":[64]}]]],["p-b05c240b.system",[[6,"stzh-checkboxgroup",{"localization":[16],"disabled":[516],"name":[513],"legend":[1],"hideLegend":[516,"hide-legend"],"invalid":[516],"showMarker":[516,"show-marker"],"value":[1025],"direction":[513],"description":[1],"descriptionLong":[1,"description-long"],"error":[1],"checkedCheckbox":[16],"preventUpdateProperties":[1,"prevent-update-properties"]},[[0,"stzhChange","onChange"]]]]],["p-edef74c8.system",[[6,"stzh-dialog",{"localization":[16],"closeOnEscapeKey":[4,"close-on-escape-key"],"closeOnBackdropClick":[4,"close-on-backdrop-click"],"open":[1028],"stay":[4],"size":[513],"hideClose":[4,"hide-close"],"heading":[1],"a11yRole":[1,"a11y-role"],"a11yLabel":[1,"a11y-label"],"closeAnalyticsId":[1,"close-analytics-id"],"show":[64],"hide":[64]},[[6,"click","handleOutsideClick"],[4,"keydown","handleKeydown"],[4,"click","handleOpenTriggerClick"]]]]],["p-3b84bbd0.system",[[2,"stzh-progressbar",{"localization":[16],"data":[1],"index":[2],"steps":[2],"stepsSmall":[2,"steps-small"],"stepsMedium":[2,"steps-medium"],"stepsLarge":[2,"steps-large"],"stepsUltra":[2,"steps-ultra"],"currentSteps":[32]}]]],["p-b8ad5f47.system",[[6,"stzh-toggle",{"localization":[16],"disabled":[516],"name":[513],"value":[1025],"invalid":[516],"required":[516],"showMarker":[516,"show-marker"],"checked":[1540],"label":[1],"labelPosition":[513,"label-position"],"description":[1],"descriptionLong":[1,"description-long"],"error":[1],"a11yDescribedby":[1,"a11y-describedby"],"setFocus":[64]}]]],["p-4a087a45.system",[[6,"stzh-fieldset",{"legend":[1],"hideLegend":[4,"hide-legend"],"legendLevel":[1,"legend-level"],"legendCurve":[1,"legend-curve"]}]]],["p-3b491ab1.system",[[0,"stzh-olmap",{"localization":[16],"hostname":[1],"scaleControl":[4,"scale-control"],"layerControl":[4,"layer-control"],"printControl":[4,"print-control"],"locationControl":[4,"location-control"],"layer":[1025],"zoom":[2],"zoomLocation":[2,"zoom-location"],"center":[16],"centerMarker":[4,"center-marker"],"resolutions":[16],"layers":[1],"getMap":[64],"addIconMarker":[64],"removeIconMarker":[64],"setIconMarkerActive":[64],"setIconMarkerInactive":[64],"enableLocationTracking":[64],"disableLocationTracking":[64],"getDistance":[64]},[[8,"load","handleLoad"],[8,"deviceorientation","handleLoad"],[8,"pageshow","handleLoad"]]]]],["p-1a34e8ef.system",[[6,"stzh-accordion",{"collapsible":[4],"multiselectable":[4],"setItemFocus":[64]},[[0,"stzhOpen","openListener"]]]]],["p-94a5e295.system",[[6,"stzh-actions",{"variant":[513],"withBorder":[516,"with-border"]}]]],["p-8cb7e2da.system",[[6,"stzh-appnav",{"appTitle":[1,"app-title"],"appStatus":[1,"app-status"],"appHref":[1,"app-href"],"appAnalyticsId":[1,"app-analytics-id"]}]]],["p-0515de95.system",[[6,"stzh-buttongroup"]]],["p-cc1a6af1.system",[[6,"stzh-carousel",{"localization":[16],"variant":[513],"disabled":[516],"slides":[2],"slidesSmall":[2,"slides-small"],"slidesMedium":[2,"slides-medium"],"slidesLarge":[2,"slides-large"],"slidesUltra":[2,"slides-ultra"],"slide":[2],"autoplay":[1028],"tabThrough":[4,"tab-through"],"preventMouseDrag":[32],"scrollTimeout":[32],"autoplayTimeout":[32],"distanceQuickSwipe":[32],"distancePreventClick":[32],"autoplayRunning":[32],"autoplayDisabledByMotionMedia":[32],"autoplayDisabledByMouse":[32],"autoplayDisabledByFocus":[32],"dragging":[32],"scrolling":[32],"ariaLive":[32],"currentSlides":[32],"currentSwipeSlides":[32],"slideElements":[32],"previousElements":[32],"nextElements":[32],"navigationTextElements":[32],"slideTo":[64],"slideToPrevious":[64],"slideToNext":[64]}]]],["p-ab199fd7.system",[[1,"stzh-cell",{"span":[2],"spanSmall":[2,"span-small"],"spanMedium":[2,"span-medium"],"spanLarge":[2,"span-large"],"spanUltra":[2,"span-ultra"],"justifySelf":[513,"justify-self"],"alignSelf":[513,"align-self"]}]]],["p-b4e0f005.system",[[0,"stzh-chart",{"chartId":[1,"chart-id"],"create":[16]}]]],["p-53b84310.system",[[6,"stzh-container"]]],["p-a003aa96.system",[[6,"stzh-cspace"]]],["p-8597b51d.system",[[6,"stzh-datamessagelist"]]],["p-a8c92707.system",[[6,"stzh-details",{"open":[1540],"show":[64],"hide":[64],"toggle":[64]}]]],["p-f599025e.system",[[6,"stzh-figure",{"caption":[1],"copyright":[1],"fullwidth":[516]}]]],["p-9dd6b3fb.system",[[2,"stzh-flyingfocus",{"style":[32],"position":[32],"enabled":[32],"visible":[32],"helper":[32],"moving":[32],"reposition":[64]},[[4,"keydown","handleKeydown"],[5,"mousedown","handleMousedown"],[6,"focus","handleFocus"],[6,"stzhFocus","handleFocus"],[6,"blur","handleBlur"],[7,"scroll","handleScrollResize"],[11,"resize","handleScrollResize"]]]]],["p-eca073df.system",[[6,"stzh-header",{"href":[1],"metabarStay":[4,"metabar-stay"],"stickyDisabled":[4,"sticky-disabled"],"preventAppnavPlaceholder":[4,"prevent-appnav-placeholder"],"logoAnalyticsId":[1,"logo-analytics-id"],"hideLogo":[32],"paddingTop":[32],"metabarTransform":[32],"sticky":[32],"stickyClosing":[32],"stickyMetabar":[32],"stickyMetabarEnd":[32],"updatePosition":[64]},[[9,"scroll","scrollListener"]]]]],["p-9ceea800.system",[[2,"stzh-hr"]]],["p-4468e033.system",[[1,"stzh-hspace",{"curve":[1],"size":[1],"sizeSmall":[1,"size-small"],"sizeMedium":[1,"size-medium"],"sizeLarge":[1,"size-large"],"sizeUltra":[1,"size-ultra"],"justify":[1],"items":[1],"around":[516],"border":[513]}]]],["p-280ba295.system",[[0,"stzh-icon-sprite"]]],["p-0f328a2d.system",[[6,"stzh-invert"]]],["p-a60d8720.system",[[1,"stzh-list",{"variant":[513]}]]],["p-6c2e46b0.system",[[1,"stzh-list-item"]]],["p-3e2ad06c.system",[[2,"stzh-loadingbar",{"percent":[2],"hidePercent":[4,"hide-percent"],"label":[1]}]]],["p-30947846.system",[[6,"stzh-metanav"]]],["p-3184a123.system",[[6,"stzh-overlay",{"open":[1028],"stay":[4],"a11yLabel":[1,"a11y-label"],"show":[64],"hide":[64]}]]],["p-d2ad8853.system",[[6,"stzh-page-skiplinks"]]],["p-7605ae9a.system",[[6,"stzh-pagetitle"]]],["p-8d695d3e.system",[[6,"stzh-pagetitle-hero",{"heading":[1],"leadAuthor":[1,"lead-author"],"subtitle":[1]}]]],["p-50f73d19.system",[[6,"stzh-ratio",{"ratio":[513],"portrait":[516],"fit":[513]}]]],["p-b82351f0.system",[[4,"stzh-readspeaker",{"href":[1],"eventId":[1,"event-id"]},[[8,"DOMContentLoaded","addClickEvents"],[8,"load","addClickEvents"]]]]],["p-df9460ae.system",[[1,"stzh-row",{"span":[2],"spanSmall":[2,"span-small"],"spanMedium":[2,"span-medium"],"spanLarge":[2,"span-large"],"spanUltra":[2,"span-ultra"],"justify":[513],"items":[513],"content":[513]}]]],["p-b295cbcc.system",[[6,"stzh-section",{"variant":[1]}]]],["p-8b47fe72.system",[[1,"stzh-show",{"mikro":[4],"small":[4],"medium":[4],"large":[4],"ultra":[4],"hideFromDate":[1,"hide-from-date"]}]]],["p-479a02fb.system",[[0,"stzh-skin-portal-mitwirken"]]],["p-c9808e2a.system",[[0,"stzh-skin-storybook-preview"]]],["p-22065780.system",[[6,"stzh-skiplink",{"label":[1],"href":[1],"linkAccesskey":[1,"link-accesskey"],"linkTitle":[1,"link-title"],"analyticsId":[1,"analytics-id"],"focused":[32]},[[0,"focusin","focusinHandler"],[0,"focusout","focusoutHandler"]]]]],["p-343694cb.system",[[1,"stzh-space",{"curve":[1],"size":[1],"sizeSmall":[1,"size-small"],"sizeMedium":[1,"size-medium"],"sizeLarge":[1,"size-large"],"sizeUltra":[1,"size-ultra"],"justify":[1],"items":[1],"around":[516],"border":[513]}]]],["p-767f064e.system",[[6,"stzh-sticky",{"disableStickyTop":[516,"disable-sticky-top"],"disableStickyBottom":[516,"disable-sticky-bottom"],"breakout":[516],"isStuckTop":[32],"isStuckBottom":[32]}]]],["p-a2bdc528.system",[[4,"stzh-table",{"fixedLeft":[2,"fixed-left"],"fixedRight":[2,"fixed-right"],"disableMinWidth":[516,"disable-min-width"],"hasScrollLeft":[32],"hasScrollRight":[32],"isScrollable":[32],"cellsStickyLeft":[32],"cellsStickyRight":[32]}]]],["p-87b4549c.system",[[1,"stzh-textandimage",{"floating":[516],"fullwidth":[516],"size":[513]}]]],["p-efd18e84.system",[[6,"stzh-visuallyhidden"]]],["p-57ba4050.system",[[1,"stzh-vspace",{"curve":[1],"size":[1],"sizeSmall":[1,"size-small"],"sizeMedium":[1,"size-medium"],"sizeLarge":[1,"size-large"],"sizeUltra":[1,"size-ultra"],"justify":[1],"items":[1],"around":[516],"border":[513]}]]],["p-2615433f.system",[[6,"stzh-button",{"localization":[16],"badge":[1],"badgeType":[513,"badge-type"],"badgePosition":[513,"badge-position"],"badgeEmpty":[516,"badge-empty"],"fullwidth":[516],"rounded":[516],"floating":[516],"size":[513],"textAlign":[513,"text-align"],"variant":[513],"icon":[1],"iconPosition":[513,"icon-position"],"checked":[1540],"name":[513],"value":[1025],"href":[1],"rel":[1],"target":[1],"download":[1],"type":[1],"disabled":[516],"active":[516],"label":[1],"effect":[1],"iconOnly":[516,"icon-only"],"linkAccesskey":[1,"link-accesskey"],"a11yLabel":[1,"a11y-label"],"a11yDescribedby":[1,"a11y-describedby"],"a11yExpanded":[516,"a11y-expanded"],"a11yDisabled":[516,"a11y-disabled"],"a11yControls":[1,"a11y-controls"],"a11yTabindex":[1,"a11y-tabindex"],"analyticsId":[1,"analytics-id"],"setFocus":[64]}],[2,"stzh-badge",{"label":[1],"type":[513]}],[2,"stzh-icon",{"name":[1],"a11yTitle":[1,"a11y-title"]}]]],["p-d3f7e7e2.system",[[2,"stzh-share",{"localization":[16],"url":[1],"services":[1]}]]],["p-6f1e35fb.system",[[6,"stzh-progressbar-item",{"label":[513],"disabled":[516],"first":[516],"last":[516],"passed":[516],"current":[516],"hide":[516],"dotted":[516],"step":[514],"icon":[513],"analyticsId":[1,"analytics-id"]}]]],["p-60393e50.system",[[2,"stzh-vbz-linechip",{"line":[1],"active":[516],"alert":[516],"global":[516],"disabled":[516],"analyticsId":[1,"analytics-id"],"setFocus":[64]}]]],["p-96106660.system",[[6,"stzh-loader",{"size":[1],"label":[1],"hideLabel":[4,"hide-label"]}]]],["p-09191103.system",[[2,"stzh-actionset",{"localization":[16],"variant":[513],"popoverButtonVariant":[513,"popover-button-variant"],"popoverButtonSize":[513,"popover-button-size"],"popoverPlacement":[513,"popover-placement"],"actions":[1],"actionsCollapsed":[32],"dynamicActions":[32],"isSmall":[32],"isMedium":[32]}]]],["p-2f3add2f.system",[[6,"stzh-ghettobox",{"hiddenTitle":[1,"hidden-title"],"mainTitle":[1,"main-title"],"description":[1],"hideClose":[4,"hide-close"],"publishDate":[1,"publish-date"],"closeTimeKey":[1,"close-time-key"],"localization":[16],"open":[32],"show":[64],"hide":[64]}],[6,"stzh-richtext",{"localization":[16],"externalLinkSelector":[1,"external-link-selector"],"externalLinkIcon":[1,"external-link-icon"]}]]],["p-a1e2b7ce.system",[[2,"stzh-calendar",{"value":[1025],"min":[1],"max":[1],"firstDayOfWeek":[2,"first-day-of-week"],"localization":[16],"isDateDisabled":[16],"prevMonthAnalyticsId":[1,"prev-month-analytics-id"],"nextMonthAnalyticsId":[1,"next-month-analytics-id"],"activeFocus":[32],"focusedDay":[32],"setFocusedDay":[64],"setDate":[64]}]]],["p-0e6889d6.system",[[6,"stzh-sortable",{"localization":[16],"disabled":[516],"dataIdAttribute":[1,"data-id-attribute"],"container":[16],"ghostClone":[16],"filterElements":[1,"filter-elements"],"toArray":[64],"sort":[64],"moveItem":[64]}]]],["p-9862fbcf.system",[[6,"stzh-text",{"font":[1],"curve":[513],"lead":[516],"size":[1],"sizeSmall":[1,"size-small"],"sizeMedium":[1,"size-medium"],"sizeLarge":[1,"size-large"],"sizeUltra":[1,"size-ultra"]}]]],["p-6fc33c55.system",[[6,"stzh-heading",{"level":[513],"curve":[513],"withBorder":[516,"with-border"]}]]],["p-517af258.system",[[6,"stzh-popover",{"open":[1540],"placement":[513],"variant":[513],"skidding":[2],"distance":[2],"label":[1],"strategy":[1],"localization":[16],"computedPlacement":[32],"show":[64],"hide":[64],"toggle":[64],"update":[64]},[[6,"click","handleOutsideClick"]]]]],["p-6bb83b30.system",[[4,"stzh-dropdown",{"options":[1],"optgroups":[1],"items":[1],"searchField":[1,"search-field"],"multiple":[516],"inline":[516],"maxOptions":[2,"max-options"],"searchConjunction":[1,"search-conjunction"],"allowEmptyOption":[4,"allow-empty-option"],"openOnFocus":[4,"open-on-focus"],"closeAfterSelect":[4,"close-after-select"],"load":[16],"minCharacters":[2,"min-characters"],"loadThrottle":[2,"load-throttle"],"preload":[8],"labelField":[1,"label-field"],"valueField":[1,"value-field"],"optgroupField":[1,"optgroup-field"],"optgroupLabelField":[1,"optgroup-label-field"],"optgroupValueField":[1,"optgroup-value-field"],"lockOptgroupOrder":[4,"lock-optgroup-order"],"name":[513],"open":[4],"isOpen":[516,"is-open"],"variant":[513],"size":[513],"disabled":[516],"popoverPlacement":[513,"popover-placement"],"label":[1],"icon":[1],"noSearch":[4,"no-search"],"noBackspaceDelete":[4,"no-backspace-delete"],"invalid":[516],"required":[516],"showMarker":[516,"show-marker"],"description":[1],"descriptionLong":[1,"description-long"],"error":[1],"localization":[16],"a11yDescribedby":[1,"a11y-describedby"],"getValue":[64],"setValue":[64],"setFocus":[64],"resetLoadedSearches":[64],"getLoadedSearches":[64],"getItems":[64],"loadItems":[64],"show":[64],"hide":[64]}]]],["p-f5c99792.system",[[6,"stzh-chip",{"label":[1],"icon":[1],"href":[1],"target":[1],"nonInteractive":[516,"non-interactive"],"removable":[516],"variant":[513],"size":[513],"type":[513],"counter":[1],"removeLabel":[1,"remove-label"],"active":[516],"disabled":[516],"a11yTabindex":[1,"a11y-tabindex"],"a11yLabel":[1,"a11y-label"],"a11yDescribedby":[1,"a11y-describedby"],"analyticsId":[1,"analytics-id"],"removeAnalyticsId":[1,"remove-analytics-id"],"setFocus":[64]}],[4,"stzh-clamp",{"localization":[16],"lines":[2],"linesSmall":[2,"lines-small"],"linesMedium":[2,"lines-medium"],"linesLarge":[2,"lines-large"],"linesUltra":[2,"lines-ultra"],"showExpandLink":[4,"show-expand-link"],"expanded":[1540],"clamped":[1540],"update":[64]}]]],["p-ebcc510d.system",[[6,"stzh-card",{"localization":[16],"collapsed":[1540],"starred":[1540],"starrable":[516],"selectable":[516],"checked":[516],"name":[513],"href":[513],"target":[1],"value":[1025],"disabled":[516],"withArrow":[516,"with-arrow"],"heading":[1],"subtitle":[1],"headerActions":[1,"header-actions"],"footerActions":[1,"footer-actions"],"subtitleInteractive":[4,"subtitle-interactive"],"sortableDisabled":[516,"sortable-disabled"],"collapsible":[516],"hideHeaderBorder":[516,"hide-header-border"],"hideFooterBorder":[516,"hide-footer-border"],"hideElevation":[516,"hide-elevation"],"hideMovementActions":[4,"hide-movement-actions"],"analyticsId":[1,"analytics-id"]}],[6,"stzh-chip-select",{"localization":[16],"data":[1],"name":[513],"label":[1],"value":[1],"description":[1],"descriptionLong":[1,"description-long"],"error":[1],"invalid":[516],"required":[516],"disabled":[516],"a11yDescribedby":[1,"a11y-describedby"],"activeFocusOptionIndex":[32]}],[6,"stzh-card-list",{"localization":[16],"layout":[513],"description":[1],"showToggleLink":[516,"show-toggle-link"],"sortableEnabled":[4,"sortable-enabled"],"sortableDataIdAttribute":[1,"sortable-data-id-attribute"],"allCollapsed":[32]},[[0,"stzhCollapse","collapseListener"]]]]],["p-5d8ad1f4.system",[[6,"stzh-input",{"localization":[16],"multiline":[4],"rows":[2],"type":[1],"step":[2],"min":[2],"max":[2],"showSpin":[516,"show-spin"],"readonly":[516],"disabled":[516],"clearable":[516],"showMarker":[516,"show-marker"],"minlength":[2],"maxlength":[2],"name":[513],"value":[1025],"description":[1],"descriptionLong":[1,"description-long"],"error":[1],"invalid":[516],"required":[516],"inputmode":[1],"autocomplete":[1],"noAutocomplete":[4,"no-autocomplete"],"label":[1],"size":[513],"a11yDescribedby":[1,"a11y-describedby"],"filled":[32],"setFocus":[64]}]]],["p-f2d74491.system",[[6,"stzh-datepicker",{"calendarMin":[1,"calendar-min"],"calendarMax":[1,"calendar-max"],"calendarIsDateDisabled":[16],"name":[513],"value":[1025],"label":[1],"readonly":[516],"disabled":[516],"description":[1],"descriptionLong":[1,"description-long"],"error":[1],"invalid":[516],"required":[516],"showMarker":[516,"show-marker"],"size":[513],"inline":[4],"dateAdapter":[16],"localization":[16],"buttonLabel":[32],"setDate":[64],"getPopover":[64]}],[6,"stzh-radio",{"localization":[16],"disabled":[516],"name":[513],"value":[1025],"invalid":[516],"required":[516],"showMarker":[516,"show-marker"],"checked":[1540],"label":[1],"description":[1],"descriptionLong":[1,"description-long"],"error":[1],"a11yDescribedby":[1,"a11y-describedby"],"setFocus":[64]}],[6,"stzh-radiogroup",{"localization":[16],"disabled":[516],"name":[513],"legend":[1],"hideLegend":[516,"hide-legend"],"invalid":[516],"required":[516],"showMarker":[516,"show-marker"],"value":[1025],"direction":[513],"description":[1],"descriptionLong":[1,"description-long"],"error":[1],"checkedRadio":[8,"checked-radio"],"preventUpdateProperties":[1,"prevent-update-properties"]},[[0,"stzhChange","onChange"]]]]],["p-fda1c56c.system",[[2,"stzh-status",{"percent":[2],"withLoadingbar":[516,"with-loadingbar"],"label":[1],"type":[513]}]]],["p-a2c076b8.system",[[6,"stzh-datalist",{"direction":[513],"directionSmall":[513,"direction-small"],"directionMedium":[513,"direction-medium"],"directionLarge":[513,"direction-large"],"directionUltra":[513,"direction-ultra"],"hideBorder":[516,"hide-border"],"disableLabelMinWidth":[516,"disable-label-min-width"],"currentDirection":[513,"current-direction"],"items":[1]}],[6,"stzh-datalist-item",{"localization":[16],"direction":[513],"href":[513],"rel":[1],"target":[1],"download":[1],"leadingIcon":[1,"leading-icon"],"icon":[1],"iconLabel":[1,"icon-label"],"iconTooltip":[1,"icon-tooltip"],"label":[1],"value":[1],"meta":[1],"statusLabel":[1,"status-label"],"statusType":[1,"status-type"],"hideBorder":[516,"hide-border"],"a11yExpanded":[516,"a11y-expanded"],"a11yControls":[1,"a11y-controls"],"external":[32]}]]],["p-c2a06b4d.system",[[6,"stzh-menu-item",{"badge":[1],"badgeType":[513,"badge-type"],"badgeEmpty":[516,"badge-empty"],"disabled":[516],"active":[516],"icon":[1],"label":[1],"href":[1],"target":[1],"a11yLabel":[1,"a11y-label"],"analyticsId":[1,"analytics-id"],"setFocus":[64]}],[6,"stzh-menu"]]],["p-9f4f3882.system",[[6,"stzh-link",{"localization":[16],"icon":[1],"iconPosition":[513,"icon-position"],"size":[513],"href":[1],"rel":[1],"target":[1],"download":[1],"type":[1],"variant":[513],"fullwidth":[516],"textAlign":[513,"text-align"],"badge":[1],"badgeType":[513,"badge-type"],"badgeEmpty":[516,"badge-empty"],"badgePosition":[513,"badge-position"],"disabled":[516],"active":[516],"iconOnly":[516,"icon-only"],"label":[1],"linkAccesskey":[1,"link-accesskey"],"a11yLabel":[1,"a11y-label"],"a11yDescribedby":[1,"a11y-describedby"],"a11yExpanded":[516,"a11y-expanded"],"a11yDisabled":[516,"a11y-disabled"],"a11yControls":[1,"a11y-controls"],"a11yTabindex":[1,"a11y-tabindex"],"analyticsId":[1,"analytics-id"],"setFocus":[64]}]]],["p-f23f2408.system",[[6,"stzh-tooltip",{"open":[1028],"label":[1],"content":[1],"placement":[1],"strategy":[1],"skidding":[2],"distance":[2],"interactive":[4],"trigger":[1],"localization":[16],"computedPlacement":[32],"show":[64],"hide":[64],"toggle":[64],"update":[64]},[[6,"click","handleDocumentClick"]]]]]]'),e)}))}}}));
+//# sourceMappingURL=p-3e10addb.system.js.map

package/dist/stzh-components/{p-4b07ade3.system.js.map → p-3e10addb.system.js.map}

@@ -1 +1 @@
-{"version":3,"names":["patchBrowser","patchCloneNodeFix","H","prototype","scriptElm","Array","from","doc","querySelectorAll","find","s","RegExp","concat","NAMESPACE","test","src","getAttribute","importMeta","module","meta","url","opts","resourcesUrl","URL","href","promiseResolve","HTMLElementPrototype","nativeCloneNodeFn","cloneNode","deep","this","nodeName","call","clonedNode","srcChildNodes","childNodes","i","length","nodeType","appendChild","then","options","globalScripts","bootstrapLazy","JSON","parse"],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.3.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n    var _a, _b, _c;\n    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n        // simply stub the implementations out.\n        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n        // @ts-ignore\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = \n    // TODO(STENCIL-661): Remove code related to the dynamic import shim\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            var _a;\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                // Apply CSP nonce to the script tag if it exists\n                const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n                if (nonce != null) {\n                    script.setAttribute('nonce', nonce);\n                }\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"oOAmBA,IAAMA,EAAe,WAWO,CAEpBC,EAAkBC,EAAEC,U,CAcxB,IAAMC,EAIAC,MAAMC,KAAKC,EAAIC,iBAAiB,WAAWC,MAAK,SAACC,GAAM,WAAIC,OAAO,IAAAC,OAAKC,EAAS,4BAA2BC,KAAKJ,EAAEK,MAChHL,EAAEM,aAAa,4BAA8BH,CADQ,IAG7D,IAAMI,EAAaC,EAAAC,KAAAC,IACnB,IAAMC,GAA+BjB,GAAa,IAAI,cAAgB,GAiBtE,GAAuBa,IAAe,GAAI,CACtCI,EAAKC,aAAe,IAAIC,IAAI,IAAKN,GAAYO,I,CAiBjD,OAAOC,EAAeJ,EAC1B,EA6CA,IAAMpB,EAAoB,SAACyB,GACvB,IAAMC,EAAoBD,EAAqBE,UAC/CF,EAAqBE,UAAY,SAAUC,GACvC,GAAIC,KAAKC,WAAa,WAAY,CAC9B,OAAOJ,EAAkBK,KAAKF,KAAMD,E,CAExC,IAAMI,EAAaN,EAAkBK,KAAKF,KAAM,OAChD,IAAMI,EAAgBJ,KAAKK,WAC3B,GAAIN,EAAM,CACN,IAAK,IAAIO,EAAI,EAAGA,EAAIF,EAAcG,OAAQD,IAAK,CAE3C,GAAIF,EAAcE,GAAGE,WAAa,EAAG,CACjCL,EAAWM,YAAYL,EAAcE,GAAGR,UAAU,M,GAI9D,OAAOK,CACf,CACA,ECrJAjC,IAAewC,MAAK,SAAAC,GAClBC,IACA,OAAOC,EAAcC,KAAAC,MAAA,m+vBAAuCJ,EAC9D,G"}
+{"version":3,"names":["patchBrowser","patchCloneNodeFix","H","prototype","scriptElm","Array","from","doc","querySelectorAll","find","s","RegExp","concat","NAMESPACE","test","src","getAttribute","importMeta","module","meta","url","opts","resourcesUrl","URL","href","promiseResolve","HTMLElementPrototype","nativeCloneNodeFn","cloneNode","deep","this","nodeName","call","clonedNode","srcChildNodes","childNodes","i","length","nodeType","appendChild","then","options","globalScripts","bootstrapLazy","JSON","parse"],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.3.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n    var _a, _b, _c;\n    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n        // simply stub the implementations out.\n        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n        // @ts-ignore\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = \n    // TODO(STENCIL-661): Remove code related to the dynamic import shim\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            var _a;\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                // Apply CSP nonce to the script tag if it exists\n                const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n                if (nonce != null) {\n                    script.setAttribute('nonce', nonce);\n                }\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"oOAmBA,IAAMA,EAAe,WAWO,CAEpBC,EAAkBC,EAAEC,U,CAcxB,IAAMC,EAIAC,MAAMC,KAAKC,EAAIC,iBAAiB,WAAWC,MAAK,SAACC,GAAM,WAAIC,OAAO,IAAAC,OAAKC,EAAS,4BAA2BC,KAAKJ,EAAEK,MAChHL,EAAEM,aAAa,4BAA8BH,CADQ,IAG7D,IAAMI,EAAaC,EAAAC,KAAAC,IACnB,IAAMC,GAA+BjB,GAAa,IAAI,cAAgB,GAiBtE,GAAuBa,IAAe,GAAI,CACtCI,EAAKC,aAAe,IAAIC,IAAI,IAAKN,GAAYO,I,CAiBjD,OAAOC,EAAeJ,EAC1B,EA6CA,IAAMpB,EAAoB,SAACyB,GACvB,IAAMC,EAAoBD,EAAqBE,UAC/CF,EAAqBE,UAAY,SAAUC,GACvC,GAAIC,KAAKC,WAAa,WAAY,CAC9B,OAAOJ,EAAkBK,KAAKF,KAAMD,E,CAExC,IAAMI,EAAaN,EAAkBK,KAAKF,KAAM,OAChD,IAAMI,EAAgBJ,KAAKK,WAC3B,GAAIN,EAAM,CACN,IAAK,IAAIO,EAAI,EAAGA,EAAIF,EAAcG,OAAQD,IAAK,CAE3C,GAAIF,EAAcE,GAAGE,WAAa,EAAG,CACjCL,EAAWM,YAAYL,EAAcE,GAAGR,UAAU,M,GAI9D,OAAOK,CACf,CACA,ECrJAjC,IAAewC,MAAK,SAAAC,GAClBC,IACA,OAAOC,EAAcC,KAAAC,MAAA,yhwBAAuCJ,EAC9D,G"}

package/dist/stzh-components/p-49a0420a.entry.js

@@ -0,0 +1,2 @@
+import{r,h as o,a as t,g as e}from"./p-9e02896c.js";const s=".sc-stzh-invert-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-invert-h{display:none}.sc-stzh-invert-h *.sc-stzh-invert,.sc-stzh-invert-h *.sc-stzh-invert::before,.sc-stzh-invert-h *.sc-stzh-invert::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-invert-h{--stzh-flyingfocus-color:var(--stzh-base-invert-color);--stzh-base-color:var(--stzh-base-invert-color);--stzh-base-lead-color:var(--stzh-base-invert-color);--stzh-base-border-color:var(--stzh-base-invert-color);--stzh-heading-color:var(--stzh-base-invert-color);--stzh-link-color:var(--stzh-base-invert-color);--stzh-link-hover-color:var(--stzh-base-invert-color);background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.sc-stzh-invert-h .sc-stzh-invert-s stzh-container{background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.sc-stzh-invert-h .sc-stzh-invert-s stzh-button[variant=default]{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:var(--stzh-base-invert-color);--border-color:var(--stzh-base-invert-color);--hover-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--hover-background-color:var(--stzh-base-invert-color72);--hover-border-color:transparent}.sc-stzh-invert-h .sc-stzh-invert-s stzh-button[variant=secondary]{--color:var(--stzh-base-invert-color);--background-color:transparent;--border-color:var(--stzh-base-invert-color);--hover-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--hover-background-color:var(--stzh-base-invert-color72);--hover-border-color:transparent}.sc-stzh-invert-h .sc-stzh-invert-s stzh-button[variant=tertiary]{--color:var(--stzh-base-invert-color);--background-color:transparent;--hover-color:var(--stzh-base-invert-color);--hover-background-color:var(--stzh-base-invert-color16)}.sc-stzh-invert-h .sc-stzh-invert-s stzh-button[active]:not([active=false]){--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:var(--stzh-base-invert-color72);--border-color:transparent;--hover-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--hover-background-color:var(--stzh-base-invert-color72);--hover-border-color:transparent}.sc-stzh-invert-h .sc-stzh-invert-s stzh-button[disabled]:not([disabled=false]),.sc-stzh-invert-h .sc-stzh-invert-s stzh-button[a11y-disabled]:not([a11y-disabled=false]){--border-color:transparent;--background-color:var(--stzh-base-invert-color32);--hover-border-color:transparent;--hover-background-color:var(--stzh-base-invert-color32)}.sc-stzh-invert-h .sc-stzh-invert-s stzh-button[disabled]:not([disabled=false])[variant=secondary],.sc-stzh-invert-h .sc-stzh-invert-s stzh-button[disabled]:not([disabled=false])[variant=input],.sc-stzh-invert-h .sc-stzh-invert-s stzh-button[disabled]:not([disabled=false])[variant=tertiary],.sc-stzh-invert-h .sc-stzh-invert-s stzh-button[a11y-disabled]:not([a11y-disabled=false])[variant=secondary],.sc-stzh-invert-h .sc-stzh-invert-s stzh-button[a11y-disabled]:not([a11y-disabled=false])[variant=input],.sc-stzh-invert-h .sc-stzh-invert-s stzh-button[a11y-disabled]:not([a11y-disabled=false])[variant=tertiary]{--color:var(--stzh-base-invert-color32);--border-color:var(--stzh-base-invert-color32);--background-color:transparent;--hover-color:var(--stzh-base-invert-color32);--hover-border-color:var(--stzh-base-invert-color32);--hover-background-color:transparent}.sc-stzh-invert-h .sc-stzh-invert-s stzh-chip[variant=filter]{--color:var(--stzh-base-invert-color);--border-color:var(--stzh-base-invert-color);--remove-color:var(--stzh-base-invert-color);--background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--counter-color:var(--stzh-color-white56);--icon-color:var(--stzh-base-invert-color);--hover-color:var(--stzh-base-invert-color);--hover-border:0.0625rem solid transparent;--hover-background-color:var(--stzh-base-invert-color16);--hover-remove-color:var(--stzh-base-invert-color);--hover-remove-background-color:var(--stzh-base-invert-color16);--hover-counter-color:var(--stzh-base-invert-color);--hover-icon-color:var(--stzh-base-invert-color)}.sc-stzh-invert-h .sc-stzh-invert-s stzh-chip[variant=filter][non-interactive]:not([non-interactive=false]){--hover-color:var(--color);--hover-border-color:var(--border-color);--hover-background-color:var(--background-color);--hover-icon-color:var(--icon-color);--hover-counter-color:var(--counter-color)}.sc-stzh-invert-h .sc-stzh-invert-s stzh-chip[active]:not([active=false]){--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--border-color:transparent;--remove-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:var(--stzh-base-invert-color);--icon-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--counter-color:var(--stzh-color-primary60op);--hover-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--hover-border-color:transparent;--hover-background-color:var(--stzh-base-invert-color72);--hover-remove-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--hover-remove-background-color:var(--stzh-base-invert-color16);--hover-icon-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--hover-counter-color:var(--stzh-color-primary60op)}.sc-stzh-invert-h .sc-stzh-invert-s stzh-chip[disabled]:not([disabled=false]){--color:var(--stzh-base-invert-color32);--border-color:var(--stzh-base-invert-color32);--remove-color:var(--stzh-base-invert-color32);--background-color:transparent;--icon-color:var(--stzh-base-invert-color32);--counter-color:var(--stzh-base-invert-color16);--hover-color:var(--stzh-base-invert-color32);--hover-border-color:var(--stzh-base-invert-color32);--hover-background-color:transparent;--hover-remove-color:var(--stzh-base-invert-color32);--hover-remove-background-color:transparent;--hover-icon-color:var(--stzh-base-invert-color32);--hover-counter-color:var(--stzh-base-invert-color16)}.sc-stzh-invert-h .sc-stzh-invert-s stzh-richtext{--richtext-blockquote-color:var(--stzh-base-invert-color);--richtext-blockquote-line-color:var(--stzh-base-invert-color);--richtext-blockquote-footer-color:var(--stzh-base-invert-color)}";const a=class{constructor(o){r(this,o)}render(){const r={"stzh-invert":true};return o(t,null,o("div",{class:r},o("slot",null)))}get element(){return e(this)}};a.style=s;export{a as stzh_invert};
+//# sourceMappingURL=p-49a0420a.entry.js.map

package/dist/stzh-components/{p-8bbb27f2.entry.js.map → p-49a0420a.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stzhInvertCss","StzhInvert","render","classes","h","Host","class"],"sources":["./src/components/stzh-invert/stzh-invert.scss?tag=stzh-invert&encapsulation=scoped","./src/components/stzh-invert/stzh-invert.tsx"],"sourcesContent":[":host {\n  @include base-invert;\n  background-color: $colorPrimary;\n\n  ::slotted(*) {\n    stzh-container {\n      background-color: $colorPrimary;\n    }\n\n    stzh-button {\n      @include button-invert;\n    }\n\n    stzh-chip {\n      @include chip-invert;\n    }\n\n    stzh-richtext {\n      @include richtext-invert;\n    }\n  }\n}\n\n.stzh-invert {\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for any element that will be inverted.\n */\n@Component({\n  tag: \"stzh-invert\",\n  styleUrl: \"stzh-invert.scss\",\n  scoped: true\n})\nexport class StzhInvert {\n  @Element() element: HTMLStzhInvertElement;\n\n  render() {\n    const classes = {\n      \"stzh-invert\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oDAAA,MAAMA,EAAgB,63L,MCeTC,EAAU,M,yBAGrBC,SACE,MAAMC,EAAU,CACd,cAAe,MAGjB,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,GACVC,EAAA,c"}
+{"version":3,"names":["stzhInvertCss","StzhInvert","render","classes","h","Host","class"],"sources":["./src/components/stzh-invert/stzh-invert.scss?tag=stzh-invert&encapsulation=scoped","./src/components/stzh-invert/stzh-invert.tsx"],"sourcesContent":[":host {\n  @include base-invert;\n  background-color: $colorPrimary;\n\n  ::slotted(*) {\n    stzh-container {\n      background-color: $colorPrimary;\n    }\n\n    stzh-button {\n      @include button-invert;\n    }\n\n    stzh-chip {\n      @include chip-invert;\n    }\n\n    stzh-richtext {\n      @include richtext-invert;\n    }\n  }\n}\n\n.stzh-invert {\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for any element that will be inverted.\n */\n@Component({\n  tag: \"stzh-invert\",\n  styleUrl: \"stzh-invert.scss\",\n  scoped: true\n})\nexport class StzhInvert {\n  @Element() element: HTMLStzhInvertElement;\n\n  render() {\n    const classes = {\n      \"stzh-invert\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oDAAA,MAAMA,EAAgB,yxM,MCeTC,EAAU,M,yBAGrBC,SACE,MAAMC,EAAU,CACd,cAAe,MAGjB,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,GACVC,EAAA,c"}

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

@@ -1 +1 @@
-{"version":3,"names":["stzhInputCss","inputCounter","StzhInput","exports","this","focusedByInput","onClearClick","event","_this","value","input","focus","stzhChange","emit","component","originalEvent","onInput","onRootFocus","setFocus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","class_1","prototype","valueWatcher","newValue","filled","errorWatcher","_error","JSON","parse","e","invalid","length","typeWatcher","types","multiline","includes","Error","concat","renderTextarea","h","class","ref","el","id","inputId","name","rows","disabled","readonly","minlength","maxlength","a11yDescribedby","required","renderInput","type","min","max","step","inputmode","autocomplete","noAutocomplete","undefined","componentWillLoad","error","localization","_b","fetchTranslations","_c","sent","render","buttonRightSlotUsed","hasSlot","descriptionUsed","description","descriptionLongUsed","descriptionLong","errorUsed","classes","clearable","showSpin","_a","stzhComponents","labels","size","Host","tabindex","htmlFor","label","showMarker","$globals","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","icon","variant","onClick","a11yLabel","clearButtonLabel","StzhInputDescription","classPrefix","moreInfoButtonLabel"],"sources":["src/components/stzh-input/stzh-input.scss?tag=stzh-input&encapsulation=scoped","src/components/stzh-input/stzh-input.tsx"],"sourcesContent":[":host {\n  --text-align: left;\n  width: 100%;\n}\n\n:host ::slotted([slot=\"button-right\"]),\n.stzh-input__button-right {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n\n:host ::slotted(stzh-button[slot=\"button-right\"][variant=\"input\"]),\n:host ::slotted([slot=\"button-right\"]) stzh-button[variant=\"input\"],\n.stzh-input__button-right[variant=\"input\"] {\n  --border-color: transparent;\n  --hover-border-color: transparent;\n}\n\n.stzh-input {\n\t@include input-description;\n\t@include fontSize('milli');\n\n  &__field-wrapper {\n    position: relative;\n    display: flex;\n  }\n\n  &__input {\n    @include font;\n    @include fontSize('milli');\n    border: 1px solid $formBorderColor;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n    border-radius: $formInputBorderRadius;\n    padding: space('xsmall') space('medium');\n    width: 100%;\n    color: $colorPrimary;\n    background: $colorWhite;\n    appearance: none;\n    text-align: var(--text-align);\n\n    @include placeholder {\n      color: $formInputPlaceholderColor;\n    }\n\n    &:hover,\n    &:focus {\n      color: $colorPrimaryHover;\n      border-color: $colorPrimaryHover;\n    }\n\n    // remove clear button for IE11\n    &::-ms-clear {\n      display: none;\n    }\n\n    // prevent ugly autofill background color in chrome\n    &:-webkit-autofill {\n      background-clip: text;\n    }\n\n    // show ellipsis for placeholders that are too long\n    &:placeholder-shown {\n      text-overflow: ellipsis;\n    }\n\n    // hide search clear icon on chrome\n    &[type=\"search\"]::-webkit-search-decoration,\n    &[type=\"search\"]::-webkit-search-cancel-button,\n    &[type=\"search\"]::-webkit-search-results-button,\n    &[type=\"search\"]::-webkit-search-results-decoration {\n      -webkit-appearance: none;\n    }\n\n    /* Normal inputs */\n\n    &--input {\n      height: $formInputHeight;\n    }\n\n    /* Textarea */\n\n    &--textarea {\n      min-height: $formInputHeight;\n      resize: vertical;\n    }\n  }\n\n  &__label {\n    @include font('heavy');\n    @include fontSize('nano');\n    @include truncate;\n    color: $formColor;\n    width: auto;\n    position: absolute;\n    top: calc(#{$formInputHeight} / 2);\n    // padding-left (medium) + border-left\n    left: calc(#{space('medium')} + 1px);\n    max-width: calc(100% - #{space('medium')} * 2);\n    transform: translateY(-50%);\n    transition: all $baseTransitionAnimationSpeed;\n    pointer-events: none;\n\n    &:empty {\n      display: none;\n    }\n\n    &::before {\n      content: '';\n      display: none;\n      background: $colorWhite;\n      position: absolute;\n      width: 100%;\n      z-index: -1;\n      left: 0;\n      top: 50%;\n      // prevent white line not fully overlaping border of input\n      margin-top: -0.5px;\n      height: 2px;\n    }\n  }\n\n  &__input:hover + &__label,\n  &__input:focus + &__label {\n    color: $colorPrimaryHover;\n  }\n\n  &__button-right {\n    display: none;\n\n    &[disabled]:not([disabled=\"false\"])[variant=\"input\"] {\n      --color: #{$formColor};\n      --background-color: transparent;\n      --border-color: transparent;\n\n      --hover-color: #{$colorPrimaryHover};\n      --hover-background-color: transparent;\n      --hover-border-color: transparent;\n    }\n  }\n\n  /* Clearable / Search input */\n\n  &--is-clearable#{&}--is-filled:not(#{&}--is-readonly):not(#{&}--is-disabled) &__button-right,\n  &--type-search &__button-right {\n    display: block;\n  }\n\n  &--type-search:not(#{&}--is-filled) &__button-right,\n  &--type-search#{&}--is-readonly &__button-right,\n  &--type-search#{&}--is-disabled &__button-right {\n    pointer-events: none;\n  }\n\n  /* Filled variant */\n\n  &--is-filled &__button-right {\n    &.is-search {\n      pointer-events: initial;\n    }\n  }\n\n  /* Styles for floating label */\n\n  &:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  &--has-fixed-label &__label,\n  &--is-filled &__label,\n  &--is-readonly &__label,\n  &--is-disabled &__label,\n  &--is-invalid &__label {\n    display: block;\n    top: 0;\n    // padding-left (input field medium) - padding-left\n    left: calc(#{space('medium')} - #{space('xxsmall')});\n    height: 20px; // dividable by two (so before element is always positioned correctly)\n    line-height: 20px;\n    padding: 0 space('xxsmall');\n    max-width: calc(100% - #{space('small')} * 2);\n    pointer-events: all;\n\n    &:not(:empty)::before {\n      display: block;\n    }\n  }\n\n  /* Button Right Variant */\n\n  &--has-button-right &__input {\n    // distance to icon + icon button width\n    padding-right: calc(#{space('xsmall')} + #{$formInputHeight});\n  }\n\n  &--has-button-right &__label {\n    // 100% - ((padding left of normal variant + border 1px) * 2) - icon button width\n    max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeight});\n  }\n\n  &--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  &--has-button-right#{&}--has-fixed-label &__label,\n  &--has-button-right#{&}--is-filled &__label,\n  &--has-button-right#{&}--is-readonly &__label,\n  &--has-button-right#{&}--is-disabled &__label,\n  &--has-button-right#{&}--is-invalid &__label {\n    // 100% - left distance to text + 1px border + padding label right side - icon button width\n    max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xxsmall')} - #{$formInputHeight});\n  }\n\n  /* Size variants */\n\n  &--size-small {\n    @include fontSize('micro');\n  }\n\n  &--size-small &__input {\n    @include fontSize('micro');\n\n    &--input {\n      height: $formInputHeightSmall;\n    }\n\n    &--textarea {\n      min-height: $formInputHeightSmall;\n    }\n  }\n\n  &--size-small &__label {\n    top: calc(#{$formInputHeightSmall} / 2);\n  }\n\n  &--size-small#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  &--size-small#{&}--has-fixed-label &__label,\n  &--size-small#{&}--is-filled &__label,\n  &--size-small#{&}--is-readonly &__label,\n  &--size-small#{&}--is-disabled &__label,\n  &--size-small#{&}--is-invalid &__label {\n    top: 0;\n  }\n\n  &--size-small#{&}--has-button-right &__input {\n    padding-right: calc(#{space('xxsmall')} + #{$formInputHeightSmall});\n  }\n\n  &--size-small#{&}--has-button-right &__label {\n    max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeightSmall});\n  }\n\n  &--size-small#{&}--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  &--size-small#{&}--has-button-right#{&}--has-fixed-label &__label,\n  &--size-small#{&}--has-button-right#{&}--is-filled &__label,\n  &--size-small#{&}--has-button-right#{&}--is-readonly &__label,\n  &--size-small#{&}--has-button-right#{&}--is-disabled &__label,\n  &--size-small#{&}--has-button-right#{&}--is-invalid &__label {\n    max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xsmall')} - #{$formInputHeightSmall});\n  }\n\n  /* Spin button */\n\n  &:not(#{&}--has-spin) &__input {\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n      appearance: none;\n      margin: 0;\n    }\n\n    &[type=number] {\n      appearance: textfield;\n    }\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input,\n  &--is-invalid &__label,\n  &--is-invalid &__input + &__label {\n    color: $colorError;\n  }\n\n  &--is-invalid &__input {\n    border-color: $colorError;\n\n    @include placeholder {\n      color: $colorError;\n    }\n  }\n\n  /* Readonly / Disabled */\n\n  &--is-readonly &__input,\n  &--is-readonly &__input + &__label,\n  &--is-disabled &__input,\n  &--is-disabled &__input + &__label {\n    color: $formDisabledColor;\n  }\n\n  &--is-readonly &__input,\n  &--is-disabled &__input {\n    color: $formDisabledColor;\n    border-color: $formDisabledBorderColor;\n    background-color: $formDisabledBackgroundColor;\n    cursor: not-allowed;\n\n    @include placeholder {\n      color: $formDisabledColor;\n    }\n\n    &:hover,\n    &:focus {\n      border-color: $formDisabledBorderColor;\n    }\n  }\n\n  &--is-readonly &__label,\n  &--is-disabled &__label {\n    cursor: not-allowed;\n\n    &::before {\n      background: transparent;\n    }\n  }\n\n  &--is-readonly &__button-right,\n  &--is-disabled &__button-right {\n    &[disabled]:not([disabled=\"false\"])[variant=\"input\"] {\n      --color: #{$formDisabledColor};\n      --hover-color: #{$formDisabledColor};\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n  Element,\n  h,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhInputChangeEvent,\n  StzhInputFocusEvent,\n  StzhInputBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"./stzh-input-description\";\n\nlet inputCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot error - Slot for error\n * @slot button-right - Slot for right button\n */\n@Component({\n  tag: \"stzh-input\",\n  styleUrl: \"stzh-input.scss\",\n  scoped: true\n})\nexport class StzhInput {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the input is a textarea or an input field */\n  @Prop() multiline: boolean = false;\n\n  /** Rows attribute if input element is textarea */\n  @Prop() rows: number;\n\n  /** If input field, this defines the type (if `search`, a search icon will be displayed) */\n  @Prop() type: \"text\" | \"search\" | \"password\" | \"email\" | \"url\" | \"tel\" | \"number\" = \"text\";\n\n  /** If input type is number, this will be the step size  */\n  @Prop() step: number = 1;\n\n  /** If input type is number, this will be the minimum step number  */\n  @Prop() min: number;\n\n  /** If input type is number, this will be the maximum step number  */\n  @Prop() max: number;\n\n  /** If input type is number and this property is true, this will show the spin buttons on hover/focus */\n  @Prop({ reflect: true }) showSpin: boolean = false;\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) */\n  @Prop({ reflect: true }) clearable: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show 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":"0vDAAA,IAAMA,EAAe,+yhBCwBrB,IAAIC,EAAe,E,IAcNC,EAASC,EAAA,wB,kJAoJZC,KAAAC,eAA0B,MAE1BD,KAAAE,aAAe,SAACC,GACtBC,EAAKC,MAAQ,GACbD,EAAKE,MAAMC,QAEXH,EAAKI,WAAWC,KAAK,CACnBC,UAAW,aACXC,cAAeR,EACfE,MAAOD,EAAKC,O,EAIRL,KAAAY,QAAU,SAACT,GACjBC,EAAKC,MAAQD,EAAKE,MAAMD,MAExBD,EAAKI,WAAWC,KAAK,CACnBC,UAAW,aACXC,cAAeR,EACfE,MAAOD,EAAKC,O,EAIRL,KAAAa,YAAc,WACpB,IAAKT,EAAKH,eAAgB,CACxBG,EAAKU,U,CAGPV,EAAKH,eAAiB,K,EAGhBD,KAAAe,QAAU,SAACZ,GACjBC,EAAKH,eAAiB,KAEtB,IAAMe,EAAa,IAAIC,WAAW,QAAS,CACzCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdjB,EAAKkB,QAAQC,cAAcP,GAC3BZ,EAAKoB,UAAUf,KAAK,CAClBC,UAAW,aACXC,cAAeR,G,EAIXH,KAAAyB,OAAS,SAACtB,GAEhBC,EAAKE,MAAMD,MAAQD,EAAKE,MAAMD,MAE9B,IAAMqB,EAAY,IAAIT,WAAW,OAAQ,CACvCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdjB,EAAKkB,QAAQC,cAAcG,GAC3BtB,EAAKuB,SAASlB,KAAK,CACjBC,UAAW,aACXC,cAAeR,G,6CA3MU,M,8BAMuD,O,UAG7D,E,oDASsB,M,cAGA,M,cAGA,M,eAGC,M,gBAGC,M,iFAYN,G,4FAaG,M,cAGC,M,2CAYd,K,oBAGG,M,WAGV,G,UAG6B,U,qBAGc,G,sBAS7DyB,EAAAC,UAAAf,SAAN,W,qFACEd,KAAKM,MAAMC,Q,iBAabqB,EAAAC,UAAAC,aAAA,SAAaC,GACX/B,KAAKgC,OAASD,IAAa,E,EAI7BH,EAAAC,UAAAI,aAAA,SAAaF,GACX,UAAWA,IAAa,SAAU,CAChC,IACE/B,KAAKkC,OAASC,KAAKC,MAAML,E,CACzB,MAAOM,GACP,GAAIN,EAAU,CACZ/B,KAAKkC,OAAS,CAACH,E,KACV,CACL/B,KAAKkC,OAAS,E,QAGb,GAAIH,EAAU,CACnB/B,KAAKkC,OAASH,C,KACT,CACL/B,KAAKkC,OAAS,E,CAGhBlC,KAAKsC,QAAUtC,KAAKkC,OAAOK,OAAS,C,EAItCX,EAAAC,UAAAW,YAAA,SAAYT,GACV,IAAMU,EAAQ,CACZ,OAAQ,SAAU,WAAY,QAAS,MAAO,MAAO,UAGvD,IAAKzC,KAAK0C,YAAcD,EAAME,SAASZ,GAAW,CAChD,MAAM,IAAIa,MAAM,QAAAC,OAAQd,EAAQ,kB,GAsE5BH,EAAAC,UAAAiB,eAAA,eAAA1C,EAAAJ,KACN,OACE+C,EAAA,YACEC,MAAM,gDACNC,IAAK,SAACC,GAAE,OAAM9C,EAAKE,MAAQ4C,CAAnB,EACRC,GAAInD,KAAKoD,QACTC,KAAMrD,KAAKqD,KACXhD,MAAOL,KAAKK,MACZiD,KAAMtD,KAAKsD,KACXC,SAAUvD,KAAKuD,SACfC,SAAUxD,KAAKwD,SACfC,UAAWzD,KAAKyD,UAChBC,UAAW1D,KAAK0D,UAAS,mBACP,GAAAb,OAAG7C,KAAKoD,QAAO,iBAAAP,OAAgB7C,KAAK2D,iBAAiB,gBACxD3D,KAAK4D,SAAW,OAAS,QAAO,eACjC5D,KAAKsC,QAAU,OAAS,QACtC1B,QAASZ,KAAKY,QACdG,QAASf,KAAKe,QACdU,OAAQzB,KAAKyB,Q,EAKXG,EAAAC,UAAAgC,YAAA,eAAAzD,EAAAJ,KACN,OACE+C,EAAA,SACEC,MAAM,6CACNC,IAAK,SAACC,GAAE,OAAM9C,EAAKE,MAAQ4C,CAAnB,EACRC,GAAInD,KAAKoD,QACTU,KAAM9D,KAAK8D,KACXT,KAAMrD,KAAKqD,KACXhD,MAAOL,KAAKK,MACZ0D,IAAK/D,KAAK+D,IACVC,IAAKhE,KAAKgE,IACVC,KAAMjE,KAAKiE,KACXC,UAAWlE,KAAKkE,UAChBX,SAAUvD,KAAKuD,SACfC,SAAUxD,KAAKwD,SACfC,UAAWzD,KAAKyD,UAChBC,UAAW1D,KAAK0D,UAChBS,aAAcnE,KAAKoE,eAAiB,MAAQpE,KAAKmE,aAAY,oBAC1CnE,KAAKoE,eAAiB,OAASC,UAAS,mBACzC,GAAAxB,OAAG7C,KAAKoD,QAAO,iBAAAP,OAAgB7C,KAAK2D,iBAAiB,gBACxD3D,KAAK4D,SAAW,OAAS,QAAO,eACjC5D,KAAKsC,QAAU,OAAS,QACtC1B,QAASZ,KAAKY,QACdG,QAASf,KAAKe,QACdU,OAAQzB,KAAKyB,Q,EAKbG,EAAAC,UAAAyC,kBAAN,W,kHACEtE,KAAKoD,QAAU,cAAAP,OAAchD,KAC7BG,KAAKwC,YAAYxC,KAAK8D,MACtB9D,KAAK8B,aAAa9B,KAAKK,OACvBL,KAAKiC,aAAajC,KAAKuE,O,KAElBvE,KAAKwE,aAAN,YACFC,EAAAzE,KAAoB,SAAM0E,EAAkB1E,KAAKsB,QAAS,U,OAA1DmD,EAAKD,aAAeG,EAAAC,O,mCAIxBhD,EAAAC,UAAAgD,OAAA,W,YACE,IAAMC,EAAsBC,EAAQ/E,KAAKsB,QAAS,gBAClD,IAAM0D,EAAkBD,EAAQ/E,KAAKsB,QAAS,kBAAoBtB,KAAKiF,YACvE,IAAMC,EAAsBH,EAAQ/E,KAAKsB,QAAS,uBAAyBtB,KAAKmF,gBAChF,IAAMC,EAAYL,EAAQ/E,KAAKsB,QAAS,YAActB,KAAKuE,MAC3D,IAAMc,GAAOZ,EAAA,CACX,aAAc,KACd,+BAAgCK,GAC3B9E,KAAK8D,OAAS,UACb9D,KAAKsF,WAAatF,KAAKgC,SAAWhC,KAAKwD,WAAaxD,KAAKuD,SAC/D,8BAA+ByB,EAC/B,mCAAoCE,EACpC,wBAAyBE,EACzB,uBAAwBpF,KAAKuF,SAC7B,yBAA0BvF,KAAKsC,QAC/B,0BAA2BtC,KAAKuD,SAChC,0BAA2BvD,KAAKwD,SAChC,0BAA2BxD,KAAK4D,SAChC,wBAAyB5D,KAAKgC,OAC9B,2BAA4BhC,KAAKsF,UACjC,gCAA+BE,EAAArE,SAAM,MAANA,cAAM,SAANA,OAAQsE,kBAAc,MAAAD,SAAA,SAAAA,EAAEE,UAAW,SAClEjB,EAAC,oBAAA5B,OAAoB7C,KAAK2F,SAAW3F,KAAK2F,KAC1ClB,EAAC,oBAAA5B,OAAoB7C,KAAK8D,SAAW9D,KAAK8D,K,GAG5C,OACEf,EAAC6C,EAAI,CAACC,SAAU7F,KAAKuD,SAAW,KAAO,KAAMxC,QAASf,KAAKa,aACzDkC,EAAA,OAAKC,MAAOqC,GACVtC,EAAA,OAAKC,MAAM,6BACRhD,KAAK0C,UAAY1C,KAAK8C,iBAAmB9C,KAAK6D,cAC/Cd,EAAA,SAAOC,MAAM,oBAAoB8C,QAAS9F,KAAKoD,SAC5CpD,KAAK+F,MAAQ/F,KAAK+F,MAAQhD,EAAA,aAC1B/C,KAAKgG,YACJjD,EAAA,QAAMC,MAAM,sBACVD,EAAA,QAAMC,MAAM,4BAA2B,cAAa,QACjDhD,KAAK4D,SACF5D,KAAKwE,aAAayB,SAASC,oBAC3BlG,KAAKwE,aAAayB,SAASE,qBAGjCpD,EAAA,QAAMC,MAAM,2BACThD,KAAK4D,SACF5D,KAAKwE,aAAayB,SAASG,kBAC3BpG,KAAKwE,aAAayB,SAASI,qBAMtCrG,KAAKsF,WAAatF,KAAK8D,OAAS,SAE/Bf,EAAA,eACEC,MAAM,2BACNsD,KAAMtG,KAAKuD,UAAYvD,KAAKwD,WAAaxD,KAAKgC,OAAS,SAAW,eAAc,iBAEhFuE,QAAQ,QACRC,QAASxG,KAAKE,aACdqD,SAAUvD,KAAKuD,UAAYvD,KAAKwD,WAAaxD,KAAKgC,OAClDyE,UAAWzG,KAAKwE,aAAayB,SAASS,iBAAgB,gBACvC1G,KAAKoD,UAGtBL,EAAA,QAAMM,KAAK,kBAGfN,EAAC4D,EAAoB,CACnBC,YAAY,aACZzD,GAAI,GAAAN,OAAG7C,KAAKoD,QAAO,gBACnBmB,MAAOvE,KAAKkC,OACZ+C,YAAajF,KAAKiF,YAClBE,gBAAiBnF,KAAKmF,gBACtBD,oBAAqBA,EACrB2B,oBAAqB7G,KAAKwE,aAAayB,SAASY,uB,gSA3VtC,I"}
+{"version":3,"names":["stzhInputCss","inputCounter","StzhInput","exports","this","focusedByInput","onClearClick","event","_this","value","input","focus","stzhChange","emit","component","originalEvent","onInput","onRootFocus","setFocus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","class_1","prototype","valueWatcher","newValue","filled","errorWatcher","_error","JSON","parse","e","invalid","length","typeWatcher","types","multiline","includes","Error","concat","renderTextarea","h","class","ref","el","id","inputId","name","rows","disabled","readonly","minlength","maxlength","a11yDescribedby","required","renderInput","type","min","max","step","inputmode","autocomplete","noAutocomplete","undefined","componentWillLoad","error","localization","_b","fetchTranslations","_c","sent","render","buttonRightSlotUsed","hasSlot","descriptionUsed","description","descriptionLongUsed","descriptionLong","errorUsed","classes","clearable","showSpin","_a","stzhComponents","labels","size","Host","tabindex","htmlFor","label","showMarker","$globals","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","icon","variant","onClick","a11yLabel","clearButtonLabel","StzhInputDescription","classPrefix","moreInfoButtonLabel"],"sources":["src/components/stzh-input/stzh-input.scss?tag=stzh-input&encapsulation=scoped","src/components/stzh-input/stzh-input.tsx"],"sourcesContent":[":host {\n  --text-align: left;\n  width: 100%;\n}\n\n:host ::slotted([slot=\"button-right\"]),\n.stzh-input__button-right {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n\n:host ::slotted(stzh-button[slot=\"button-right\"][variant=\"input\"]),\n:host ::slotted([slot=\"button-right\"]) stzh-button[variant=\"input\"],\n.stzh-input__button-right[variant=\"input\"] {\n  --border-color: transparent;\n  --hover-border-color: transparent;\n}\n\n.stzh-input {\n\t@include input-description;\n\t@include fontSize('milli');\n\n  &__field-wrapper {\n    position: relative;\n    display: flex;\n  }\n\n  &__input {\n    @include font;\n    @include fontSize('milli');\n    border: 1px solid $formBorderColor;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n    border-radius: $formInputBorderRadius;\n    padding: space('xsmall') space('medium');\n    width: 100%;\n    color: $colorPrimary;\n    background: $colorWhite;\n    appearance: none;\n    text-align: var(--text-align);\n\n    @include placeholder {\n      color: $formInputPlaceholderColor;\n    }\n\n    &:hover,\n    &:focus {\n      color: $colorPrimaryHover;\n      border-color: $colorPrimaryHover;\n    }\n\n    // remove clear button for IE11\n    &::-ms-clear {\n      display: none;\n    }\n\n    // prevent ugly autofill background color in chrome\n    &:-webkit-autofill {\n      background-clip: text;\n    }\n\n    // show ellipsis for placeholders that are too long\n    &:placeholder-shown {\n      text-overflow: ellipsis;\n    }\n\n    // hide search clear icon on chrome\n    &[type=\"search\"]::-webkit-search-decoration,\n    &[type=\"search\"]::-webkit-search-cancel-button,\n    &[type=\"search\"]::-webkit-search-results-button,\n    &[type=\"search\"]::-webkit-search-results-decoration {\n      -webkit-appearance: none;\n    }\n\n    /* Normal inputs */\n\n    &--input {\n      height: $formInputHeight;\n    }\n\n    /* Textarea */\n\n    &--textarea {\n      min-height: $formInputHeight;\n      resize: vertical;\n    }\n  }\n\n  &__label {\n    @include font('heavy');\n    @include fontSize('nano');\n    @include truncate;\n    color: $formColor;\n    width: auto;\n    position: absolute;\n    top: calc(#{$formInputHeight} / 2);\n    // padding-left (medium) + border-left\n    left: calc(#{space('medium')} + 1px);\n    max-width: calc(100% - #{space('medium')} * 2);\n    transform: translateY(-50%);\n    transition: all $baseTransitionAnimationSpeed;\n    pointer-events: none;\n\n    &:empty {\n      display: none;\n    }\n\n    &::before {\n      content: '';\n      display: none;\n      background: $colorWhite;\n      position: absolute;\n      width: 100%;\n      z-index: -1;\n      left: 0;\n      top: 50%;\n      // prevent white line not fully overlaping border of input\n      margin-top: -0.5px;\n      height: 2px;\n    }\n  }\n\n  &__input:hover + &__label,\n  &__input:focus + &__label {\n    color: $colorPrimaryHover;\n  }\n\n  &__button-right {\n    display: none;\n\n    &[disabled]:not([disabled=\"false\"])[variant=\"input\"] {\n      --color: #{$formColor};\n      --background-color: transparent;\n      --border-color: transparent;\n\n      --hover-color: #{$colorPrimaryHover};\n      --hover-background-color: transparent;\n      --hover-border-color: transparent;\n    }\n  }\n\n  /* Clearable / Search input */\n\n  &--is-clearable#{&}--is-filled:not(#{&}--is-readonly):not(#{&}--is-disabled) &__button-right,\n  &--type-search &__button-right {\n    display: block;\n  }\n\n  &--type-search:not(#{&}--is-filled) &__button-right,\n  &--type-search#{&}--is-readonly &__button-right,\n  &--type-search#{&}--is-disabled &__button-right {\n    pointer-events: none;\n  }\n\n  /* Filled variant */\n\n  &--is-filled &__button-right {\n    &.is-search {\n      pointer-events: initial;\n    }\n  }\n\n  /* Styles for floating label */\n\n  &:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  &--has-fixed-label &__label,\n  &--is-filled &__label,\n  &--is-readonly &__label,\n  &--is-disabled &__label,\n  &--is-invalid &__label {\n    display: block;\n    top: 0;\n    // padding-left (input field medium) - padding-left\n    left: calc(#{space('medium')} - #{space('xxsmall')});\n    height: 20px; // dividable by two (so before element is always positioned correctly)\n    line-height: 20px;\n    padding: 0 space('xxsmall');\n    max-width: calc(100% - #{space('small')} * 2);\n    pointer-events: all;\n\n    &:not(:empty)::before {\n      display: block;\n    }\n  }\n\n  /* Button Right Variant */\n\n  &--has-button-right &__input {\n    // distance to icon + icon button width\n    padding-right: calc(#{space('xsmall')} + #{$formInputHeight});\n  }\n\n  &--has-button-right &__label {\n    // 100% - ((padding left of normal variant + border 1px) * 2) - icon button width\n    max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeight});\n  }\n\n  &--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  &--has-button-right#{&}--has-fixed-label &__label,\n  &--has-button-right#{&}--is-filled &__label,\n  &--has-button-right#{&}--is-readonly &__label,\n  &--has-button-right#{&}--is-disabled &__label,\n  &--has-button-right#{&}--is-invalid &__label {\n    // 100% - left distance to text + 1px border + padding label right side - icon button width\n    max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xxsmall')} - #{$formInputHeight});\n  }\n\n  /* Size variants */\n\n  &--size-small {\n    @include fontSize('micro');\n  }\n\n  &--size-small &__input {\n    @include fontSize('micro');\n\n    &--input {\n      height: $formInputHeightSmall;\n    }\n\n    &--textarea {\n      min-height: $formInputHeightSmall;\n    }\n  }\n\n  &--size-small &__label {\n    top: calc(#{$formInputHeightSmall} / 2);\n  }\n\n  &--size-small#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  &--size-small#{&}--has-fixed-label &__label,\n  &--size-small#{&}--is-filled &__label,\n  &--size-small#{&}--is-readonly &__label,\n  &--size-small#{&}--is-disabled &__label,\n  &--size-small#{&}--is-invalid &__label {\n    top: 0;\n  }\n\n  &--size-small#{&}--has-button-right &__input {\n    padding-right: calc(#{space('xxsmall')} + #{$formInputHeightSmall});\n  }\n\n  &--size-small#{&}--has-button-right &__label {\n    max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeightSmall});\n  }\n\n  &--size-small#{&}--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  &--size-small#{&}--has-button-right#{&}--has-fixed-label &__label,\n  &--size-small#{&}--has-button-right#{&}--is-filled &__label,\n  &--size-small#{&}--has-button-right#{&}--is-readonly &__label,\n  &--size-small#{&}--has-button-right#{&}--is-disabled &__label,\n  &--size-small#{&}--has-button-right#{&}--is-invalid &__label {\n    max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xsmall')} - #{$formInputHeightSmall});\n  }\n\n  /* Spin button */\n\n  &:not(#{&}--has-spin) &__input {\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n      appearance: none;\n      margin: 0;\n    }\n\n    &[type=number] {\n      appearance: textfield;\n    }\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input,\n  &--is-invalid &__label,\n  &--is-invalid &__input + &__label {\n    color: $colorError;\n  }\n\n  &--is-invalid &__input {\n    border-color: $colorError;\n\n    @include placeholder {\n      color: $colorError;\n    }\n  }\n\n  /* Readonly / Disabled */\n\n  &--is-readonly &__input,\n  &--is-readonly &__input + &__label,\n  &--is-disabled &__input,\n  &--is-disabled &__input + &__label {\n    color: $formDisabledColor;\n  }\n\n  &--is-readonly &__input,\n  &--is-disabled &__input {\n    color: $formDisabledColor;\n    border-color: $formDisabledBorderColor;\n    background-color: $formDisabledBackgroundColor;\n    cursor: not-allowed;\n\n    @include placeholder {\n      color: $formDisabledColor;\n    }\n\n    &:hover,\n    &:focus {\n      border-color: $formDisabledBorderColor;\n    }\n  }\n\n  &--is-readonly &__label,\n  &--is-disabled &__label {\n    cursor: not-allowed;\n\n    &::before {\n      background: transparent;\n    }\n  }\n\n  &--is-readonly &__button-right,\n  &--is-disabled &__button-right {\n    &[disabled]:not([disabled=\"false\"])[variant=\"input\"] {\n      --color: #{$formDisabledColor};\n      --hover-color: #{$formDisabledColor};\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n  Element,\n  h,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhInputChangeEvent,\n  StzhInputFocusEvent,\n  StzhInputBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"./stzh-input-description\";\n\nlet inputCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot error - Slot for error\n * @slot button-right - Slot for right button\n */\n@Component({\n  tag: \"stzh-input\",\n  styleUrl: \"stzh-input.scss\",\n  scoped: true\n})\nexport class StzhInput {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the input is a textarea or an input field */\n  @Prop() multiline: boolean = false;\n\n  /** Rows attribute if input element is textarea */\n  @Prop() rows: number;\n\n  /** If input field, this defines the type (if `search`, a search icon will be displayed) */\n  @Prop() type: \"text\" | \"search\" | \"password\" | \"email\" | \"url\" | \"tel\" | \"number\" = \"text\";\n\n  /** If input type is number, this will be the step size  */\n  @Prop() step: number = 1;\n\n  /** If input type is number, this will be the minimum step number  */\n  @Prop() min: number;\n\n  /** If input type is number, this will be the maximum step number  */\n  @Prop() max: number;\n\n  /** If input type is number and this property is true, this will show the spin buttons on hover/focus */\n  @Prop({ reflect: true }) showSpin: boolean = false;\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) */\n  @Prop({ reflect: true }) clearable: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Minimum of characters */\n  @Prop() minlength: number;\n\n  /** Maxlength of characters */\n  @Prop() maxlength: number;\n\n  /** The name of the input element */\n  @Prop({ reflect: true }) name: string;\n\n  /** The value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Specify inputmode.\n   * See [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values\n   */\n  @Prop() inputmode: string;\n\n  /**\n   * Specify what the user agent has to provide as automated assistance.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values\n   */\n  @Prop() autocomplete: string = \"on\";\n\n  /** Whether autocomplete should be turned off  */\n  @Prop() noAutocomplete: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Whether the input is filled or not */\n  @State() filled: boolean;\n\n  @Element() element: HTMLStzhInputElement;\n\n  /** Focus input field */\n  @Method()\n  async setFocus() {\n    this.input.focus();\n  }\n\n  /** Input change event */\n  @Event() stzhChange: EventEmitter<StzhInputChangeEvent>;\n\n  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhInputFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhInputBlurEvent>;\n\n  @Watch(\"value\")\n  valueWatcher(newValue: string) {\n    this.filled = newValue !== \"\";\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n\n    this.invalid = this._error.length > 0;\n  }\n\n  @Watch(\"type\")\n  typeWatcher(newValue: string) {\n    const types = [\n      \"text\", \"search\", \"password\", \"email\", \"url\", \"tel\", \"number\"\n    ];\n\n    if (!this.multiline && !types.includes(newValue)) {\n      throw new Error(`Type ${newValue} not supported`);\n    }\n  }\n\n  private input: HTMLInputElement | HTMLTextAreaElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private onClearClick = (event: MouseEvent) => {\n    this.value = \"\";\n    this.input.focus();\n\n    this.stzhChange.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value\n    });\n  }\n\n  private onInput = (event: InputEvent) => {\n    this.value = this.input.value;\n\n    this.stzhChange.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value\n    });\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.setFocus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent('focus', {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-input\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    // fixes weird bug where autofill selection doesn't get removed\n    this.input.value = this.input.value;\n\n    const blurEvent = new FocusEvent('blur', {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-input\",\n      originalEvent: event\n    });\n  }\n\n  private renderTextarea(): HTMLTextAreaElement {\n    return (\n      <textarea\n        class=\"stzh-input__input stzh-input__input--textarea\"\n        ref={(el) => (this.input = el as HTMLTextAreaElement)}\n        id={this.inputId}\n        name={this.name}\n        value={this.value}\n        rows={this.rows}\n        disabled={this.disabled}\n        readonly={this.readonly}\n        minlength={this.minlength}\n        maxlength={this.maxlength}\n        aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n        aria-required={this.required ? \"true\" : \"false\"}\n        aria-invalid={this.invalid ? \"true\" : \"false\"}\n        onInput={this.onInput}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n      ></textarea>\n    );\n  }\n\n  private renderInput(): HTMLInputElement {\n    return (\n      <input\n        class=\"stzh-input__input stzh-input__input--input\"\n        ref={(el) => (this.input = el as HTMLInputElement)}\n        id={this.inputId}\n        type={this.type}\n        name={this.name}\n        value={this.value}\n        min={this.min}\n        max={this.max}\n        step={this.step}\n        inputmode={this.inputmode}\n        disabled={this.disabled}\n        readonly={this.readonly}\n        minlength={this.minlength}\n        maxlength={this.maxlength}\n        autocomplete={this.noAutocomplete ? \"off\" : this.autocomplete}\n        aria-autocomplete={this.noAutocomplete ? \"none\" : undefined}\n        aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n        aria-required={this.required ? \"true\" : \"false\"}\n        aria-invalid={this.invalid ? \"true\" : \"false\"}\n        onInput={this.onInput}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n      />\n    );\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-input-${inputCounter++}`;\n    this.typeWatcher(this.type);\n    this.valueWatcher(this.value);\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"input\");\n    }\n  }\n\n  render() {\n    const buttonRightSlotUsed = hasSlot(this.element, 'button-right');\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || !!this.error;\n    const classes = {\n      \"stzh-input\": true,\n      \"stzh-input--has-button-right\": buttonRightSlotUsed\n        || this.type === \"search\"\n        || (this.clearable && this.filled && !this.readonly && !this.disabled),\n      \"stzh-input--has-description\": descriptionUsed,\n      \"stzh-input--has-description-long\": descriptionLongUsed,\n      \"stzh-input--has-error\": errorUsed,\n      \"stzh-input--has-spin\": this.showSpin,\n      \"stzh-input--is-invalid\": this.invalid,\n      \"stzh-input--is-disabled\": this.disabled,\n      \"stzh-input--is-readonly\": this.readonly,\n      \"stzh-input--is-required\": this.required,\n      \"stzh-input--is-filled\": this.filled,\n      \"stzh-input--is-clearable\": this.clearable,\n      \"stzh-input--has-fixed-label\": window?.stzhComponents?.labels === \"fixed\",\n      [`stzh-input--size-${this.size}`]: !!this.size,\n      [`stzh-input--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <div class=\"stzh-input__field-wrapper\">\n            {this.multiline ? this.renderTextarea() : this.renderInput()}\n            <label class=\"stzh-input__label\" htmlFor={this.inputId}>\n              {this.label ? this.label : <slot></slot>}\n              {this.showMarker &&\n                <span class=\"stzh-input__marker\">\n                  <span class=\"stzh-input__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker\n                    }\n                  </span>\n                  <span class=\"stzh-input__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText\n                    }\n                  </span>\n                </span>\n              }\n            </label>\n            {this.clearable || this.type === \"search\"\n              ?\n              <stzh-button\n                class=\"stzh-input__button-right\"\n                icon={this.disabled || this.readonly || !this.filled ? \"search\" : \"close-circle\"}\n                icon-only\n                variant=\"input\"\n                onClick={this.onClearClick}\n                disabled={this.disabled || this.readonly || !this.filled}\n                a11yLabel={this.localization.$globals.clearButtonLabel}\n                aria-controls={this.inputId}\n              ></stzh-button>\n              :\n              <slot name=\"button-right\"></slot>\n            }\n          </div>\n          <StzhInputDescription\n            classPrefix=\"stzh-input\"\n            id={`${this.inputId}-description`}\n            error={this._error}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            descriptionLongUsed={descriptionLongUsed}\n            moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}