@oiz/stzh-components 2.6.0-aalpha → 2.6.0

package/dist/stzh-components/p-9b7d4e8d.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stzhCheckboxCss","checkboxCounter","StzhCheckbox","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","h","Host","tabindex","class","ref","el","type","id","name","a11yDescribedby","innerHTML","Check","label","showMarker","$globals","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","StzhInputDescription","classPrefix","moreInfoButtonLabel"],"sources":["./src/components/stzh-checkbox/stzh-checkbox.scss?tag=stzh-checkbox&encapsulation=scoped","./src/components/stzh-checkbox/stzh-checkbox.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  ::slotted(stzh-text) {\n    --color: inherit;\n  }\n}\n\n.stzh-checkbox {\n\t@include input-description;\n\n  &__field-wrapper {\n    @include fontSize('milli');\n    position: relative;\n    display: flex;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__mark {\n    border: 1px solid $formBorderColor;\n    background-color: $colorWhite;\n    width: 24px;\n    height: 24px;\n    flex-shrink: 0;\n    border-radius: $formInputBorderRadius;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    transition: border-color $baseTransitionAnimationSpeed;\n  }\n\n  &__check {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    opacity: 0;\n    color: $colorPrimary;\n  }\n\n  &__label {\n    display: inline-block;\n    color: $baseColor;\n    transition: color $baseTransitionAnimationSpeed;\n    margin-left: space('small');\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker-symbol {\n    @include fontSize('micro');\n  }\n\n  /* Hover / Focus / Checked */\n\n  &:hover &__label,\n  &__input:checked:hover ~ &__label,\n  &__input:checked:hover ~ &__mark &__check,\n  &__input:checked:focus ~ &__mark &__check {\n    color: $colorPrimaryHover;\n  }\n\n  &__input:checked ~ &__label {\n    color: $colorPrimary;\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__mark,\n  &__input:checked:hover ~ &__mark,\n  &__input:checked:focus ~ &__mark {\n    border-color: $colorPrimaryHover;\n  }\n\n  &__input:focus ~ &__mark,\n  &__input:checked ~ &__mark {\n    border-color: $colorPrimary;\n  }\n\n  &__input:checked ~ &__mark &__check {\n    opacity: 1;\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label,\n  &--is-invalid &__input ~ &__mark &__check {\n    color: $colorError;\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    border-color: $colorError;\n  }\n\n  /* Disabled */\n\n\t&--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label {\n    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__mark &__check {\n    color: $colorGrey70;\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    border-color: $formDisabledBorderColor;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n}\n","import {\n  Host,\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n  h,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhCheckboxChangeEvent,\n  StzhCheckboxFocusEvent,\n  StzhCheckboxBlurEvent\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\nimport Check from './assets/check.svg';\n\nlet checkboxCounter = 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-checkbox\",\n  styleUrl: \"stzh-checkbox.scss\",\n  scoped: true\n})\nexport class StzhCheckbox {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the checkbox 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  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** 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  /** 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<StzhCheckboxChangeEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhCheckboxFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhCheckboxBlurEvent>;\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-checkbox\",\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-checkbox\",\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-checkbox\",\n      originalEvent: event\n    });\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-checkbox-${checkboxCounter++}`;\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, 'checkbox');\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-checkbox\": true,\n      \"stzh-checkbox--has-description\": descriptionUsed,\n      \"stzh-checkbox--has-description-long\": descriptionLongUsed,\n      \"stzh-checkbox--has-error\": errorUsed,\n      \"stzh-checkbox--is-required\": this.required,\n      \"stzh-checkbox--is-invalid\": this.invalid,\n      \"stzh-checkbox--is-disabled\": this.disabled\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-checkbox__field-wrapper\">\n            <input\n              class=\"stzh-checkbox__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-checkbox__mark\">\n              <div class=\"stzh-checkbox__check\" innerHTML={Check} />\n            </div>\n            <div class=\"stzh-checkbox__label\">\n              {this.label ? this.label : <slot></slot>}\n              {this.showMarker &&\n                <span class=\"stzh-checkbox__marker\">\n                  <span class=\"stzh-checkbox__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-checkbox__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-checkbox\"\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":["stzhCheckboxCss","checkboxCounter","StzhCheckbox","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","h","Host","tabindex","class","ref","el","type","id","name","a11yDescribedby","innerHTML","Check","label","showMarker","$globals","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","StzhInputDescription","classPrefix","moreInfoButtonLabel"],"sources":["./src/components/stzh-checkbox/stzh-checkbox.scss?tag=stzh-checkbox&encapsulation=scoped","./src/components/stzh-checkbox/stzh-checkbox.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  ::slotted(stzh-text) {\n    --color: inherit;\n  }\n}\n\n.stzh-checkbox {\n\t@include input-description;\n\n  &__field-wrapper {\n    @include fontSize('milli');\n    position: relative;\n    display: flex;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__mark {\n    border: 1px solid $formBorderColor;\n    background-color: $colorWhite;\n    width: 24px;\n    height: 24px;\n    flex-shrink: 0;\n    border-radius: $formInputBorderRadius;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    transition: border-color $baseTransitionAnimationSpeed;\n  }\n\n  &__check {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    opacity: 0;\n    color: $colorPrimary;\n  }\n\n  &__label {\n    display: inline-block;\n    color: $baseColor;\n    transition: color $baseTransitionAnimationSpeed;\n    margin-left: space('small');\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker-symbol {\n    @include fontSize('micro');\n  }\n\n  /* Hover / Focus / Checked */\n\n  &:hover &__label,\n  &__input:checked:hover ~ &__label,\n  &__input:checked:hover ~ &__mark &__check,\n  &__input:checked:focus ~ &__mark &__check {\n    color: $colorPrimaryHover;\n  }\n\n  &__input:checked ~ &__label {\n    color: $colorPrimary;\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__mark,\n  &__input:checked:hover ~ &__mark,\n  &__input:checked:focus ~ &__mark {\n    border-color: $colorPrimaryHover;\n  }\n\n  &__input:focus ~ &__mark,\n  &__input:checked ~ &__mark {\n    border-color: $colorPrimary;\n  }\n\n  &__input:checked ~ &__mark &__check {\n    opacity: 1;\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label,\n  &--is-invalid &__input ~ &__mark &__check {\n    color: $colorError;\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    border-color: $colorError;\n  }\n\n  /* Disabled */\n\n\t&--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label {\n    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__mark &__check {\n    color: $colorGrey70;\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    border-color: $formDisabledBorderColor;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n}\n","import {\n  Host,\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n  h,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhCheckboxChangeEvent,\n  StzhCheckboxFocusEvent,\n  StzhCheckboxBlurEvent\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\nimport Check from './assets/check.svg';\n\nlet checkboxCounter = 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-checkbox\",\n  styleUrl: \"stzh-checkbox.scss\",\n  scoped: true\n})\nexport class StzhCheckbox {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the checkbox 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  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** 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  /** 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<StzhCheckboxChangeEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhCheckboxFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhCheckboxBlurEvent>;\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-checkbox\",\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-checkbox\",\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-checkbox\",\n      originalEvent: event\n    });\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-checkbox-${checkboxCounter++}`;\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, 'checkbox');\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-checkbox\": true,\n      \"stzh-checkbox--has-description\": descriptionUsed,\n      \"stzh-checkbox--has-description-long\": descriptionLongUsed,\n      \"stzh-checkbox--has-error\": errorUsed,\n      \"stzh-checkbox--is-required\": this.required,\n      \"stzh-checkbox--is-invalid\": this.invalid,\n      \"stzh-checkbox--is-disabled\": this.disabled\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-checkbox__field-wrapper\">\n            <input\n              class=\"stzh-checkbox__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-checkbox__mark\">\n              <div class=\"stzh-checkbox__check\" innerHTML={Check} />\n            </div>\n            <div class=\"stzh-checkbox__label\">\n              {this.label ? this.label : <slot></slot>}\n              {this.showMarker &&\n                <span class=\"stzh-checkbox__marker\">\n                  <span class=\"stzh-checkbox__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-checkbox__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-checkbox\"\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-9d46101e.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as s,a as o,c as e,F as r,g as n}from"./p-9e02896c.js";import{h as i}from"./p-5c697491.js";import{f as h}from"./p-25a09313.js";const a=".sc-stzh-badge-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-badge-h{display:none}.sc-stzh-badge-h *.sc-stzh-badge,.sc-stzh-badge-h *.sc-stzh-badge::before,.sc-stzh-badge-h *.sc-stzh-badge::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-badge-h{--color:var(--stzh-color-white);--background-color:var(--stzh-base-color);display:-ms-inline-flexbox;display:inline-flex}[type=success].sc-stzh-badge-h{--background-color:var(--stzh-color-truegreen)}[type=warning].sc-stzh-badge-h{--color:var(--stzh-color-grey87);--background-color:var(--stzh-color-warning)}[type=error].sc-stzh-badge-h{--background-color:var(--stzh-color-error)}[type=info].sc-stzh-badge-h{--background-color:var(--stzh-color-zueriblue)}.stzh-badge.sc-stzh-badge{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:normal;-webkit-box-sizing:content-box;box-sizing:content-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;min-width:0.625rem;font-size:0.625rem;line-height:1.4;-webkit-box-shadow:0 0 0 0.0625rem #fff;box-shadow:0 0 0 0.0625rem #fff;border-radius:0.875rem;padding:0.0625rem 0.375rem;background-color:var(--background-color);color:var(--color);text-transform:uppercase}.stzh-badge.sc-stzh-badge:empty{width:0.875rem;height:0.875rem;padding:0}";const c=class{constructor(s){t(this,s);this.label="";this.type="default"}render(){const t={"stzh-badge":true,[`stzh-badge--type-${this.type}`]:!!this.type};return s(o,null,s("div",{class:t},this.label))}};c.style=a;const l='@charset "UTF-8";.sc-stzh-button-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-button-h{display:none}.sc-stzh-button-h *.sc-stzh-button,.sc-stzh-button-h *.sc-stzh-button::before,.sc-stzh-button-h *.sc-stzh-button::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-button-h{--color:var(--stzh-color-white);--background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--border-width:0.0625rem;--border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--border-radius:var(--stzh-button-border-radius);--height:var(--stzh-form-input-height);--icon-size:var(--stzh-icon-size-small);--icon-text-margin:var(--stzh-space-small);--badge-icon-text-margin:calc(var(--icon-text-margin) + var(--stzh-space-xxsmall));--padding:calc(var(--stzh-space-xsmall) - 0.0625rem) var(--stzh-space-xlarge);--white-space:normal;--border-radius:var(--stzh-button-border-radius);--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--floating-position:sticky;--floating-float:right;--floating-bottom:var(--stzh-space-medium);--floating-right:var(--stzh-space-medium);display:inline-block}@media screen and (min-width: 600px){.sc-stzh-button-h{--floating-bottom:var(--stzh-space-xlarge);--floating-right:var(--stzh-space-xlarge)}}[fullwidth].sc-stzh-button-h:not([fullwidth=false]){width:100%;display:block}[rounded].sc-stzh-button-h:not([rounded=false]){--border-radius:var(--height)}[floating].sc-stzh-button-h:not([floating=false]){position:var(--floating-position);bottom:var(--floating-bottom);right:var(--floating-right);float:var(--floating-float)}[size=small].sc-stzh-button-h{--height:var(--stzh-form-input-small-height)}[size=tiny].sc-stzh-button-h{--height:var(--stzh-form-input-tiny-height);--icon-text-margin:var(--stzh-space-xsmall);--padding:calc(var(--stzh-space-xxsmall) - 0.0625rem) var(--stzh-space-medium)}[variant=secondary].sc-stzh-button-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:var(--stzh-color-white);--border-color:var(--stzh-color-primary60op)}[variant=input].sc-stzh-button-h{--color:var(--stzh-color-grey61);--background-color:transparent;--border-color:var(--stzh-color-grey61);--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:transparent;--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}[variant=tertiary].sc-stzh-button-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:transparent;--border-color:transparent;--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:var(--stzh-button-text-hover-background);--hover-border-color:transparent}[active].sc-stzh-button-h:not([active=false]){--color:var(--stzh-color-white);--background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}[disabled].sc-stzh-button-h:not([disabled=false]),[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false]){--border-color:var(--stzh-color-grey13);--background-color:var(--stzh-color-grey13);--hover-border-color:var(--stzh-color-grey13);--hover-background-color:var(--stzh-color-grey13)}[disabled].sc-stzh-button-h:not([disabled=false])[variant=secondary],[disabled].sc-stzh-button-h:not([disabled=false])[variant=input],[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=secondary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=input],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=tertiary]{--color:var(--stzh-color-grey25);--border-color:var(--stzh-color-grey13);--background-color:transparent;--hover-color:var(--stzh-color-grey25);--hover-border-color:var(--stzh-color-grey13);--hover-background-color:transparent}@-webkit-keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}60%{-webkit-transform:translateX(-0.25rem);transform:translateX(-0.25rem)}}@keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}60%{-webkit-transform:translateX(-0.25rem);transform:translateX(-0.25rem)}}.sc-stzh-button-h .sc-stzh-button-s>stzh-icon,.stzh-button__icon.sc-stzh-button{--size:var(--icon-size)}.stzh-button.sc-stzh-button{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);line-height:1.25;font-family:inherit;position:relative;z-index:0;overflow:visible;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:stretch;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--color);padding:var(--padding);background-color:var(--background-color);-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;border-style:solid;border-width:var(--border-width);border-color:var(--border-color);cursor:pointer;-webkit-text-decoration-line:none;text-decoration-line:none;width:100%;min-width:var(--height);min-height:var(--height);border-radius:var(--border-radius);text-align:left}.stzh-button.sc-stzh-button:hover{border-color:var(--hover-border-color);background-color:var(--hover-background-color);color:var(--hover-color)}.stzh-button__vhidden.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button__inner.sc-stzh-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}.stzh-button__icon-wrapper.sc-stzh-button{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;width:auto;height:1em}.stzh-button__text.sc-stzh-button{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;white-space:var(--white-space);text-align:center}.stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--icon-text-margin)}.stzh-button__badge.sc-stzh-button{position:absolute;z-index:1;top:0;right:0}.stzh-button__input.sc-stzh-button{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.stzh-button__mark.sc-stzh-button{border:0.0625rem solid var(--stzh-color-grey61);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;-ms-flex-negative:0;flex-shrink:0;border-radius:50%;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:border-color var(--stzh-base-transition-animation-speed);transition:border-color var(--stzh-base-transition-animation-speed);width:1.25rem;height:1.25rem;margin-right:var(--stzh-space-xsmall);border-color:currentColor}.stzh-button__mark.sc-stzh-button::before{content:""}.stzh-button__check.sc-stzh-button{background-color:currentColor;color:var(--stzh-color-primary, var(--stzh-color-zueriblue));width:0.5rem;height:0.5rem;border-radius:50%;opacity:0}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-button__check.sc-stzh-button{background-color:ButtonText}}.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-button.sc-stzh-button:hover .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:focus:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-button__input.sc-stzh-button:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{opacity:1}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-grey61)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:transparent}.stzh-button--is-disabled.sc-stzh-button .stzh-button__mark.sc-stzh-button{background-color:var(--stzh-color-black8)}.stzh-button--size-small.sc-stzh-button,.stzh-button--size-tiny.sc-stzh-button{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-button--is-floating.sc-stzh-button{-webkit-box-shadow:var(--stzh-box-shadow-overlay);box-shadow:var(--stzh-box-shadow-overlay)}.stzh-button--badge-position-button.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:static}.stzh-button__badge.sc-stzh-button,.stzh-button--badge-position-button.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:relative}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--badge-icon-text-margin)}.stzh-button--has-icon-only.sc-stzh-button{width:var(--height);height:var(--height);padding:0}.stzh-button--has-icon-only.sc-stzh-button .stzh-button__text.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button--effect-cta.sc-stzh-button:hover .stzh-button__icon-wrapper.sc-stzh-button{-webkit-animation:stzh-button-effect-cta 1s;animation:stzh-button-effect-cta 1s}.stzh-button--align-left.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:start;justify-content:flex-start}.stzh-button--align-right.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:end;justify-content:flex-end}.stzh-button--align-center.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:center;justify-content:center}.stzh-button--align-space-between.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:justify;justify-content:space-between}.stzh-button--is-disabled.sc-stzh-button{cursor:not-allowed}';const b=class{constructor(s){t(this,s);this.stzhFocus=e(this,"stzhFocus",7);this.stzhBlur=e(this,"stzhBlur",7);this.stzhChange=e(this,"stzhChange",7);this.focusedByInput=false;this.onInput=t=>{this.checked=this.input.checked;this.stzhChange.emit({component:"stzh-button",originalEvent:t,value:this.value,checked:this.checked})};this.onRootFocus=()=>{if(!this.focusedByInput){this.setFocus()}this.focusedByInput=false};this.onFocus=t=>{this.focusedByInput=true;const s=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhFocus.emit({component:"stzh-button",originalEvent:t})};this.onBlur=t=>{const s=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhBlur.emit({component:"stzh-button",originalEvent:t})};this.onClick=t=>{if(this.disabled){t.stopPropagation();t.preventDefault()}};this.localization=undefined;this.badge="";this.badgeType="default";this.badgePosition="button";this.badgeEmpty=false;this.fullwidth=false;this.rounded=false;this.floating=false;this.size="default";this.textAlign="default";this.variant="default";this.icon="";this.iconPosition="left";this.checked=false;this.name="";this.value="";this.href="";this.rel=undefined;this.target="";this.download=undefined;this.type="button";this.disabled=false;this.active=false;this.label="";this.effect="default";this.iconOnly=false;this.linkAccesskey=undefined;this.a11yLabel=undefined;this.a11yDescribedby="";this.a11yExpanded=undefined;this.a11yDisabled=undefined;this.a11yControls=undefined;this.a11yTabindex=undefined;this.analyticsId=undefined}async setFocus(){this.button.focus()}renderIcon(t){return s("div",{class:"stzh-button__icon-wrapper"},this.icon?s("stzh-icon",{class:"stzh-button__icon",name:this.icon}):s("slot",{name:"icon"}),(this.badge||this.badgeEmpty)&&this.badgePosition==="icon"&&t&&s("stzh-badge",{class:"stzh-button__badge",label:this.badge,type:this.badgeType}))}renderContent(){return s("div",{class:"stzh-button__text"},this.rel&&this.rel.includes("external")&&s("div",{class:"stzh-button__vhidden"},this.localization.$globals.externalLinkLabel),this.download&&s("div",{class:"stzh-button__vhidden"},this.localization.$globals.downloadLinkLabel),s("div",{ref:t=>this.text=t},this.label?this.label:s("slot",null)))}renderInner(t){return s(r,null,s("div",{class:"stzh-button__inner",onClick:this.onClick},this.type==="radio"&&s("div",{class:"stzh-button__mark"},s("div",{class:"stzh-button__check"})),this.iconPosition==="left"&&this.renderIcon(t),this.renderContent(),this.iconPosition==="right"&&this.renderIcon(t)),(this.badge||this.badgeEmpty)&&(this.badgePosition==="button"||!t)&&s("stzh-badge",{class:"stzh-button__badge",label:this.badge,type:this.badgeType,onClick:this.onClick}))}async componentWillLoad(){if(!this.localization){this.localization=await h(this.element,"button")}}componentDidRender(){requestAnimationFrame((()=>{this.button.setAttribute("s-object-id",this.analyticsId||this.text.innerText)}))}render(){const t=i(this.element,"icon")||!!this.icon;const e={"stzh-button":true,"stzh-button--has-icon":t,"stzh-button--has-icon-only":this.iconOnly,"stzh-button--has-badge":!!this.badge,"stzh-button--is-floating":this.floating,"stzh-button--is-rounded":this.rounded,"stzh-button--is-fullwidth":this.fullwidth,"stzh-button--is-disabled":this.disabled||this.a11yDisabled,"stzh-button--is-active":this.active,[`stzh-button--effect-${this.effect}`]:!!this.effect,[`stzh-button--badge-position-${this.badgePosition}`]:!!this.badgePosition,[`stzh-button--align-${this.textAlign}`]:!!this.textAlign,[`stzh-button--size-${this.size}`]:!!this.size,[`stzh-button--type-${this.type}`]:!!this.type,[`stzh-button--${this.variant}`]:!!this.variant};return s(o,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},this.href?s("a",{ref:t=>this.button=t,href:this.disabled?null:this.href,rel:this.rel,download:this.download,target:this.target,class:e,"aria-label":this.a11yLabel,"aria-describedby":this.a11yDescribedby,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},this.renderInner(t)):this.type==="radio"?s("label",{ref:t=>this.button=t,class:e,onClick:this.onClick},s("input",{ref:t=>this.input=t,type:"radio",class:"stzh-button__input",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,"aria-label":this.a11yLabel,"aria-describedby":this.a11yDescribedby,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick,onInput:this.onInput}),this.renderInner(t)):s("button",{ref:t=>this.button=t,class:e,type:this.type,disabled:this.disabled,"aria-label":this.a11yLabel,"aria-describedby":this.a11yDescribedby,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},this.renderInner(t)))}get element(){return n(this)}};b.style=l;const u=".sc-stzh-icon-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-icon-h{display:none}.sc-stzh-icon-h *.sc-stzh-icon,.sc-stzh-icon-h *.sc-stzh-icon::before,.sc-stzh-icon-h *.sc-stzh-icon::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-icon-h{--size:var(--stzh-icon-size-default);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:currentColor;vertical-align:text-top}.stzh-icon.sc-stzh-icon{width:var(--size);height:var(--size)}";let z=0;const d=class{constructor(s){t(this,s);this.name="";this.a11yTitle=""}componentWillLoad(){this.iconId=`stzh-icon-${z++}`}render(){return s(o,null,this.name&&s("svg",{class:"stzh-icon",role:this.a11yTitle?"img":"presentation","aria-hidden":this.a11yTitle?null:"true",focusable:this.a11yTitle?"true":"false","aria-labelledby":this.a11yTitle?`${this.iconId}-title`:null},this.a11yTitle&&s("title",{id:`${this.iconId}-title`},this.a11yTitle),s("use",{href:`#stzh-icon-${this.name}`})))}};d.style=u;export{c as stzh_badge,b as stzh_button,d as stzh_icon};
+//# sourceMappingURL=p-9d46101e.entry.js.map

package/dist/stzh-components/p-9d46101e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stzhBadgeCss","StzhBadge","render","classes","this","type","h","Host","class","label","stzhButtonCss","StzhButton","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","onClick","disabled","stopPropagation","preventDefault","async","button","focus","renderIcon","iconUsed","icon","name","badge","badgeEmpty","badgePosition","badgeType","renderContent","rel","includes","localization","$globals","externalLinkLabel","download","downloadLinkLabel","ref","el","text","renderInner","Fragment","iconPosition","fetchTranslations","componentDidRender","requestAnimationFrame","setAttribute","analyticsId","innerText","hasSlot","iconOnly","floating","rounded","fullwidth","a11yDisabled","active","effect","textAlign","size","variant","tabindex","href","target","a11yLabel","a11yDescribedby","a11yExpanded","a11yControls","accessKey","linkAccesskey","a11yTabindex","stzhIconCss","iconCounter","StzhIcon","componentWillLoad","iconId","role","a11yTitle","focusable","id"],"sources":["./src/components/stzh-badge/stzh-badge.scss?tag=stzh-badge&encapsulation=scoped","./src/components/stzh-badge/stzh-badge.tsx","./src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","./src/components/stzh-button/stzh-button.tsx","./src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=scoped","./src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":[":host {\n  --color: #{$colorWhite};\n  --background-color: #{$baseColor};\n  display: inline-flex;\n\n  &[type=\"success\"] {\n    --background-color: #{$colorTruegreen};\n  }\n\n  &[type=\"warning\"] {\n    --color: #{$colorGrey87};\n    --background-color: #{$colorWarning};\n  }\n\n  &[type=\"error\"] {\n    --background-color: #{$colorError};\n  }\n\n  &[type=\"info\"] {\n    --background-color: #{$colorZueriblue};\n  }\n}\n\n.stzh-badge {\n  @include badge;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot badge content\n */\n@Component({\n  tag: \"stzh-badge\",\n  styleUrl: \"stzh-badge.scss\",\n  scoped: true\n})\nexport class StzhBadge {\n  /** Text content of the badge */\n  @Prop() label: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n  render() {\n    const classes = {\n      \"stzh-badge\": true,\n      [`stzh-badge--type-${this.type}`]: !!this.type\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this.label}\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --color: #{$colorWhite};\n  --background-color: #{$colorPrimary};\n  --border-width: 1px;\n  --border-color: #{$colorPrimary};\n  --border-radius: #{$buttonBorderRadius};\n  --height: #{$formInputHeight};\n  --icon-size: #{iconSize('small')};\n  --icon-text-margin: #{space('small')};\n  --badge-icon-text-margin: calc(var(--icon-text-margin) + #{space('xxsmall')});\n  --padding: calc(#{space('xsmall')} - 1px) #{space('xlarge')};\n  --white-space: normal;\n  --border-radius: #{$buttonBorderRadius};\n\n  --hover-color: #{$colorWhite};\n  --hover-background-color: #{$colorPrimaryHover};\n  --hover-border-color: #{$colorPrimaryHover};\n\n  --floating-position: sticky;\n  --floating-float: right;\n  --floating-bottom: #{space('medium')};\n  --floating-right: #{space('medium')};\n\n  display: inline-block;\n\n  @include mq($from: small) {\n    --floating-bottom: #{space('xlarge')};\n    --floating-right: #{space('xlarge')};\n  }\n\n  &[fullwidth]:not([fullwidth=\"false\"]) {\n    width: 100%;\n    display: block;\n  }\n\n  &[rounded]:not([rounded=\"false\"]) {\n    --border-radius: var(--height);\n  }\n\n  &[floating]:not([floating=\"false\"]) {\n    position: var(--floating-position);\n    bottom: var(--floating-bottom);\n    right: var(--floating-right);\n    float: var(--floating-float);\n  }\n\n  &[size=\"small\"] {\n    --height: #{$formInputHeightSmall};\n  }\n\n  &[size=\"tiny\"] {\n    --height: #{$formInputHeightTiny};\n    --icon-text-margin: #{space('xsmall')};\n    --padding: calc(#{space('xxsmall')} - 1px) #{space('medium')};\n  }\n\n  &[variant=\"secondary\"] {\n    --color: #{$colorPrimary};\n    --background-color: #{$colorWhite};\n    --border-color: #{$colorPrimary60op};\n  }\n\n  &[variant=\"input\"] {\n    --color: #{$formColor};\n    --background-color: transparent;\n    --border-color: #{$formBorderColor};\n\n    --hover-color: #{$colorPrimaryHover};\n    --hover-background-color: transparent;\n    --hover-border-color: #{$colorPrimaryHover};\n  }\n\n  &[variant=\"tertiary\"] {\n    --color: #{$colorPrimary};\n    --background-color: transparent;\n    --border-color: transparent;\n\n    --hover-color: #{$colorPrimaryHover};\n    --hover-background-color: #{$buttonTextHoverBackground};\n    --hover-border-color: transparent;\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: #{$colorWhite};\n    --background-color: #{$colorPrimaryHover};\n    --border-color: #{$colorPrimaryHover};\n\n    --hover-color: #{$colorWhite};\n    --hover-background-color: #{$colorPrimaryHover};\n    --hover-border-color: #{$colorPrimaryHover};\n  }\n\n  &[disabled]:not([disabled=\"false\"]),\n  &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n    --border-color: #{$colorGrey13};\n    --background-color: #{$colorGrey13};\n\n    --hover-border-color: #{$colorGrey13};\n    --hover-background-color: #{$colorGrey13};\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"secondary\"],\n  &[disabled]:not([disabled=\"false\"])[variant=\"input\"],\n  &[disabled]:not([disabled=\"false\"])[variant=\"tertiary\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"secondary\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"input\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary\"] {\n    --color: #{$colorGrey25};\n    --border-color: #{$colorGrey13};\n    --background-color: transparent;\n\n    --hover-color: #{$colorGrey25};\n    --hover-border-color: #{$colorGrey13};\n    --hover-background-color: transparent;\n  }\n}\n\n@keyframes stzh-button-effect-cta {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n:host ::slotted(stzh-icon),\n.stzh-button__icon {\n  --size: var(--icon-size);\n}\n\n.stzh-button {\n  @include fontSize('milli');\n  line-height: 1.25;\n  font-family: inherit;\n  position: relative;\n  z-index: 0;\n  overflow: visible;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  color: var(--color);\n  padding: var(--padding);\n  background-color: var(--background-color);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  border-style: solid;\n  border-width: var(--border-width);\n  border-color: var(--border-color);\n  cursor: pointer;\n  text-decoration-line: none;\n  width: 100%;\n  min-width: var(--height);\n  min-height: var(--height);\n  border-radius: var(--border-radius);\n  text-align: left;\n\n  &:hover {\n    border-color: var(--hover-border-color);\n    background-color: var(--hover-background-color);\n    color: var(--hover-color);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-grow: 1;\n  }\n\n  &__icon-wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: 1em;\n  }\n\n  &__text {\n    @include wordWrap;\n    white-space: var(--white-space);\n    text-align: center;\n  }\n\n  &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: var(--icon-text-margin);\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    right: 0;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n  }\n\n  &__mark {\n    @include radio__mark();\n    width: 20px;\n    height: 20px;\n    margin-right: space('xsmall');\n    border-color: currentColor;\n  }\n\n  &__check {\n    @include radio__check();\n  }\n\n  /* Hover / Focus / Checked / Disabled of Radio Type */\n\n  &__input:checked:hover ~ &__inner &__mark &__check,\n  &__input:checked:focus ~ &__inner &__mark &__check {\n    color: $colorPrimaryHover;\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__inner &__mark,\n  &__input:checked:hover ~ &__inner &__mark,\n  &__input:checked:focus ~ &__inner &__mark {\n    border-color: $colorPrimaryHover;\n  }\n\n  &__input:focus ~ &__inner &__mark,\n  &__input:checked ~ &__inner &__mark {\n    border-color: $colorPrimary;\n  }\n\n  &__input:checked ~ &__inner &__mark &__check {\n    opacity: 1;\n  }\n\n  &--is-disabled &__input ~ &__inner &__mark &__check {\n    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__inner &__mark {\n    border-color: $formDisabledBorderColor;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n\n  /* Size variants */\n\n  &--size-small,\n  &--size-tiny {\n    @include fontSize('micro');\n  }\n\n  /* Floating */\n\n  &--is-floating {\n    box-shadow: $boxShadowOverlay;\n  }\n\n  /* Badge positioning variants */\n\n  &--badge-position-button &__icon-wrapper {\n    position: static;\n  }\n\n  &__badge,\n  &--badge-position-button &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('xsmall')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n    position: relative;\n  }\n\n  &--badge-position-icon#{&}--has-icon &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('small')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: var(--badge-icon-text-margin);\n  }\n\n  /* Variant if button only has icon */\n\n  &--has-icon-only {\n    width: var(--height);\n    height: var(--height);\n    padding: 0;\n  }\n\n  &--has-icon-only &__text {\n    @include visuallyhidden;\n  }\n\n  /* Effect */\n\n  &--effect-cta:hover &__icon-wrapper {\n\t\tanimation: stzh-button-effect-cta 1s;\n  }\n\n  /* Alignment variants */\n\n  &--align-left &__inner {\n    justify-content: flex-start;\n  }\n\n  &--align-right &__inner {\n    justify-content: flex-end;\n  }\n\n  &--align-center &__inner {\n    justify-content: center;\n  }\n\n  &--align-space-between &__inner {\n    justify-content: space-between;\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n}\n","import {\n  Component,\n  Host,\n  Method,\n  Fragment,\n  Element,\n  h,\n  Prop,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhButtonFocusEvent,\n  StzhButtonBlurEvent,\n  StzhButtonChangeEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot - Slot for label/text content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: \"stzh-button\",\n  styleUrl: \"stzh-button.scss\",\n  scoped: true\n})\nexport class StzhButton {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Display a badge aligned to button or icons */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n  /** Badge position */\n  @Prop({ reflect: true }) badgePosition: \"icon\" | \"button\" = \"button\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Whether the button is full width */\n  @Prop({ reflect: true }) fullwidth: boolean = false;\n\n  /** Whether the button is rounded */\n  @Prop({ reflect: true }) rounded: boolean = false;\n\n  /** Whether the button is floating */\n  @Prop({ reflect: true }) floating: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" | \"tiny\" = \"default\";\n\n  /** Text alignment */\n  @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n  /** Variant style */\n  @Prop({ reflect: true }) variant: \"default\" | \"secondary\" | \"input\" | \"tertiary\" = \"default\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Icon Position */\n  @Prop({ reflect: true }) iconPosition: \"left\" | \"right\" = \"left\";\n\n  /** Checked status (if type is radio) */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** The name of the input element (if type is radio) */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** The value of the input element (if type is radio) */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** `href` if the button should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** Type of the button */\n  @Prop() type: \"button\" | \"submit\" | \"reset\" | \"radio\" = \"button\";\n\n  /** Whether the button is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether the button is active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Effect/Animation used */\n  @Prop() effect: \"default\" | \"cta\" = \"default\";\n\n  /** Whether only an icon is used inside the button */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /** Access key of link (usually a number e.g. 1) */\n  @Prop() linkAccesskey: string;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria disabled of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhButtonElement;\n\n  /** Focus button */\n  @Method()\n  async setFocus() {\n    this.button.focus();\n  }\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n  /** Change event (only called if type is radio) */\n  @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n  private button: HTMLButtonElement | HTMLAnchorElement | HTMLLabelElement;\n  private input: HTMLInputElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-button\",\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-button\",\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-button\",\n      originalEvent: event\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.stopPropagation();\n      event.preventDefault();\n    }\n  }\n\n  private renderIcon(iconUsed: boolean): HTMLInputElement {\n    return (\n      <div class=\"stzh-button__icon-wrapper\">\n        {this.icon ?\n          <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>\n          :\n          <slot name=\"icon\"></slot>\n        }\n        {(this.badge || this.badgeEmpty) && this.badgePosition === \"icon\" && iconUsed &&\n          <stzh-badge class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        }\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    return (\n      <div class=\"stzh-button__text\">\n        {this.rel && this.rel.includes('external') && <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n        {this.download && <div class=\"stzh-button__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n        <div ref={(el) => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\n      </div>\n    );\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        <div\n          class=\"stzh-button__inner\"\n          onClick={this.onClick}\n        >\n          {this.type === \"radio\" &&\n            <div class=\"stzh-button__mark\">\n              <div class=\"stzh-button__check\"></div>\n            </div>\n          }\n          {this.iconPosition === \"left\" && this.renderIcon(iconUsed)}\n          {this.renderContent()}\n          {this.iconPosition === \"right\" && this.renderIcon(iconUsed)}\n        </div>\n        {(this.badge || this.badgeEmpty) && (this.badgePosition === \"button\" || !iconUsed) &&\n          <stzh-badge\n            class=\"stzh-button__badge\"\n            label={this.badge}\n            type={this.badgeType}\n            onClick={this.onClick}\n          ></stzh-badge>\n        }\n      </Fragment>\n    );\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"button\");\n    }\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.button.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-button\": true,\n      \"stzh-button--has-icon\": iconUsed,\n      \"stzh-button--has-icon-only\": this.iconOnly,\n      \"stzh-button--has-badge\": !!this.badge,\n      \"stzh-button--is-floating\": this.floating,\n      \"stzh-button--is-rounded\": this.rounded,\n      \"stzh-button--is-fullwidth\": this.fullwidth,\n      \"stzh-button--is-disabled\": this.disabled || this.a11yDisabled,\n      \"stzh-button--is-active\": this.active,\n      [`stzh-button--effect-${this.effect}`]: !!this.effect,\n      [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n      [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,\n      [`stzh-button--size-${this.size}`]: !!this.size,\n      [`stzh-button--type-${this.type}`]: !!this.type,\n      [`stzh-button--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ?\n          <a\n            ref={(el) => (this.button = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            rel={this.rel}\n            download={this.download}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel}\n            aria-describedby={this.a11yDescribedby}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n              ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n              ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls}\n            accessKey={this.linkAccesskey}\n            tabindex={this.a11yTabindex}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n          :\n          this.type === \"radio\" ?\n            <label\n              ref={(el) => (this.button = el as HTMLLabelElement)}\n              class={classes}\n              onClick={this.onClick}\n              >\n              <input\n                ref={(el) => (this.input = el as HTMLInputElement)}\n                type=\"radio\"\n                class=\"stzh-button__input\"\n                name={this.name}\n                value={this.value}\n                checked={this.checked}\n                disabled={this.disabled}\n                aria-label={this.a11yLabel}\n                aria-describedby={this.a11yDescribedby}\n                aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n                  ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n                aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n                  ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n                aria-controls={this.a11yControls}\n                accessKey={this.linkAccesskey}\n                tabindex={this.a11yTabindex}\n                onFocus={this.onFocus}\n                onBlur={this.onBlur}\n                onClick={this.onClick}\n                onInput={this.onInput}\n              />\n              {this.renderInner(iconUsed)}\n            </label>\n            :\n            <button\n              ref={(el) => (this.button = el as HTMLButtonElement)}\n              class={classes}\n              type={this.type}\n              disabled={this.disabled}\n              aria-label={this.a11yLabel}\n              aria-describedby={this.a11yDescribedby}\n              aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n                ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n              aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n                ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n              aria-controls={this.a11yControls}\n              accessKey={this.linkAccesskey}\n              tabindex={this.a11yTabindex}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n              onClick={this.onClick}\n            >\n              {this.renderInner(iconUsed)}\n            </button>\n        }\n      </Host>\n    );\n  }\n}\n",":host {\n  --size: #{iconSize()};\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  color: currentColor;\n  vertical-align: text-top;\n}\n\n.stzh-icon {\n  width: var(--size);\n  height: var(--size);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop\n} from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n@Component({\n  tag: \"stzh-icon\",\n  styleUrl: \"stzh-icon.scss\",\n  scoped: true\n})\nexport class StzhIcon {\n  /**\n   * Icon which should be displayed\n   * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n   */\n  @Prop() name: string = \"\";\n\n  /**\n   * Hidden icon title for screenreader\n   * (usually not needed when e.g. inside links or buttons that have text)\n  */\n  @Prop({ attribute: 'a11y-title' }) a11yTitle: string = \"\";\n\n  private iconId: string;\n\n  componentWillLoad() {\n    this.iconId = `stzh-icon-${iconCounter++}`;\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.name &&\n          <svg\n            class=\"stzh-icon\"\n            role={this.a11yTitle ? 'img' : 'presentation'}\n            aria-hidden={this.a11yTitle ? null : 'true'}\n            focusable={this.a11yTitle ? 'true' : 'false'}\n            aria-labelledby={this.a11yTitle ? `${this.iconId}-title` : null}\n          >\n            {this.a11yTitle &&\n              <title id={`${this.iconId}-title`}>\n                {this.a11yTitle}\n              </title>\n            }\n            <use href={`#stzh-icon-${this.name}`}></use>\n          </svg>\n        }\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+System.register(["./p-7b184ebb.system.js","./p-d4b7a303.system.js"],(function(t){"use strict";var e,a,s,i,r;return{setters:[function(t){e=t.r;a=t.h;s=t.a;i=t.g},function(t){r=t.s}],execute:function(){var l=':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}';var o="has-sticked";var n="is-sticky-left";var h="is-sticky-right";var c=t("stzh_table",function(){function t(t){var a=this;e(this,t);this.updateCellClasses=function(){if(!a.tableWrapper){return}var t=Array.from(a.tableWrapper.querySelectorAll("tr"));t.forEach((function(t){var e=Array.from(t.children);e.forEach((function(t,e){t.classList.remove(n);t.classList.remove(h);if(e===a.fixedLeft){t.classList.add(n)}if(e===a.fixedRight){t.classList.add(h)}}))}))};this.updateScrollStates=function(){if(!a.tableWrapper){return}var t=a.tableWrapper.scrollLeft;var e=a.tableWrapper.scrollWidth;var s=a.tableWrapper.clientWidth;a.isScrollable=e>s;a.hasScrollLeft=t>0;a.hasScrollRight=t<e-s;var i=Array.from(a.tableWrapper.querySelectorAll("tr"));var r=i[0];if(!r){return}a.cellsStickyLeft=[];a.cellsStickyRight=[];var l=Array.from(r.children);l.forEach((function(e,i){var r=e.offsetLeft;var l=r+e.offsetWidth;if(a.hasScrollLeft&&i===a.fixedLeft&&Math.ceil(t)>=r){a.cellsStickyLeft.push(i)}if(a.hasScrollRight&&i===a.fixedRight&&Math.ceil(t)+s<=l){a.cellsStickyRight.push(i)}}));i.forEach((function(t){var e=Array.from(t.children);e.forEach((function(t,e){if(a.cellsStickyLeft.indexOf(e)>-1||a.cellsStickyRight.indexOf(e)>-1){t.classList.add(o)}else{t.classList.remove(o)}}))}))};this.init=function(){var t=a.element.querySelector('stzh-input[slot="search"], [slot="search"] stzh-input');if(t){r(t,{size:"small"})}a.updateCellClasses();a.updateScrollStates()};this.handleResize=function(){if(a.debounceResize){window.cancelAnimationFrame(a.debounceResize)}a.debounceResize=requestAnimationFrame(a.updateScrollStates)};this.handleScroll=function(){if(a.debounceScroll){window.cancelAnimationFrame(a.debounceScroll)}a.debounceScroll=requestAnimationFrame(a.updateScrollStates)};this.fixedLeft=null;this.fixedRight=null;this.disableMinWidth=false;this.hasScrollLeft=false;this.hasScrollRight=false;this.isScrollable=false;this.cellsStickyLeft=[];this.cellsStickyRight=[]}t.prototype.fixedCellWatcher=function(){this.updateCellClasses();this.updateScrollStates()};t.prototype.connectedCallback=function(){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)};t.prototype.disconnectedCallback=function(){if(this.observer){this.observer.disconnect()}if(this.resizeObserver){this.resizeObserver.disconnect()}};t.prototype.render=function(){var t=this;var e={"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 a(s,null,a("div",{class:e},a("div",{class:"stzh-table__header"},a("div",{class:"stzh-table__heading"},a("slot",{name:"heading"})),a("div",{class:"stzh-table__sub-header"},a("div",{class:"stzh-table__search"},a("slot",{name:"search"})),a("div",{class:"stzh-table__action-button"},a("slot",{name:"action-button"})))),a("div",{class:"stzh-table__outer-wrapper"},a("div",{ref:function(e){return t.tableWrapper=e},class:"stzh-table__wrapper",onScroll:this.handleScroll},a("slot",null)))))};Object.defineProperty(t.prototype,"element",{get:function(){return i(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{fixedLeft:["fixedCellWatcher"],fixedRight:["fixedCellWatcher"]}},enumerable:false,configurable:true});return t}());c.style=l}}}));
+//# sourceMappingURL=p-a2bdc528.system.entry.js.map

package/dist/stzh-components/{p-7902eb77.system.entry.js.map → p-a2bdc528.system.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stzhTableCss","CLASS_HAS_STICKED","CLASS_IS_STICKY_LEFT","CLASS_IS_STICKY_RIGHT","StzhTable","exports","this","updateCellClasses","_this","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","class_1","prototype","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":"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"}
+{"version":3,"names":["stzhTableCss","CLASS_HAS_STICKED","CLASS_IS_STICKY_LEFT","CLASS_IS_STICKY_RIGHT","StzhTable","exports","this","updateCellClasses","_this","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","class_1","prototype","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-b05c240b.system.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stzhCheckboxgroupCss","checkboxgroupCounter","StzhCheckboxgroup","exports","this","_value","_preventUpdateProperties","init","_this","checkboxes","Array","from","element","querySelectorAll","updateCheckboxesProperty","concat","checkboxgroupId","watchValue","value","watchName","name","watchDisabled","disabled","watchInvalid","invalid","watchShowMarker","showMarker","class_1","prototype","newValue","JSON","parse","updateCheckedCheckboxByValue","errorWatcher","_error","e","length","preventUpdatePropertiesWatcher","onChange","event","detail","checked","push","filter","prop","forEach","checkbox","indexOf","camelCase","checkedCheckbox","componentWillLoad","error","preventUpdateProperties","localization","_a","fetchTranslations","_b","sent","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","exports","this","_value","_preventUpdateProperties","init","_this","checkboxes","Array","from","element","querySelectorAll","updateCheckboxesProperty","concat","checkboxgroupId","watchValue","value","watchName","name","watchDisabled","disabled","watchInvalid","invalid","watchShowMarker","showMarker","class_1","prototype","newValue","JSON","parse","updateCheckedCheckboxByValue","errorWatcher","_error","e","length","preventUpdatePropertiesWatcher","onChange","event","detail","checked","push","filter","prop","forEach","checkbox","indexOf","camelCase","checkedCheckbox","componentWillLoad","error","preventUpdateProperties","localization","_a","fetchTranslations","_b","sent","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-b8ad5f47.system.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stzhToggleCss","toggleCounter","StzhToggle","exports","this","focusedByInput","onInput","event","_this","checked","input","stzhChange","emit","component","originalEvent","value","onRootFocus","setFocus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","class_1","prototype","focus","errorWatcher","newValue","_error","JSON","parse","e","invalid","length","componentWillLoad","inputId","concat","error","localization","_a","fetchTranslations","_b","sent","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","exports","this","focusedByInput","onInput","event","_this","checked","input","stzhChange","emit","component","originalEvent","value","onRootFocus","setFocus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","class_1","prototype","focus","errorWatcher","newValue","_error","JSON","parse","e","invalid","length","componentWillLoad","inputId","concat","error","localization","_a","fetchTranslations","_b","sent","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-5e09547b.entry.js → p-bcd5b20e.entry.js}

@@ -1,2 +1,2 @@
-import{r as s,h as t,a as o,g as i}from"./p-9e02896c.js";import{s as a}from"./p-5c697491.js";const c=".sc-stzh-actions-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-actions-h{display:none}.sc-stzh-actions-h *.sc-stzh-actions,.sc-stzh-actions-h *.sc-stzh-actions::before,.sc-stzh-actions-h *.sc-stzh-actions::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-actions-h .sc-stzh-actions-s>[slot=primary],.sc-stzh-actions-h .sc-stzh-actions-s>[slot=secondary]{-ms-flex-positive:1;flex-grow:1;margin:var(--stzh-space-xxsmall)}.sc-stzh-actions-h[variant=cta] .sc-stzh-actions-s>[slot=primary],.sc-stzh-actions-h[variant=cta] .sc-stzh-actions-s>[slot=secondary]{-ms-flex-positive:0;flex-grow:0}.stzh-actions__actions.sc-stzh-actions{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:calc(var(--stzh-space-xxsmall) * -1)}@media screen and (min-width: 600px){.stzh-actions__actions.sc-stzh-actions{-ms-flex-direction:row;flex-direction:row}}.stzh-actions__primary-actions.sc-stzh-actions,.stzh-actions__secondary-actions.sc-stzh-actions{display:-ms-flexbox;display:flex}.stzh-actions--dialog.sc-stzh-actions .stzh-actions__actions.sc-stzh-actions{-ms-flex-pack:end;justify-content:flex-end}.stzh-actions--process.sc-stzh-actions .stzh-actions__actions.sc-stzh-actions{-ms-flex-pack:justify;justify-content:space-between}.stzh-actions--has-border.sc-stzh-actions{padding-top:var(--stzh-space-medium);border-top:0.0625rem solid var(--stzh-base-border-color)}";const n=class{constructor(t){s(this,t);this.init=()=>{const s=this.element.querySelectorAll('stzh-button[slot="secondary"], [slot="secondary"] stzh-button');const t=this.element.querySelectorAll("stzh-button");s.forEach((s=>{a(s,{variant:"secondary"})}));t.forEach((s=>{s.setAttribute("role","listitem")}))};this.variant="form";this.withBorder=false}connectedCallback(){this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}render(){const s={"stzh-actions":true,"stzh-actions--has-border":this.withBorder,[`stzh-actions--${this.variant}`]:!!this.variant};return t(o,null,t("div",{class:s},t("div",{class:"stzh-actions__actions",role:"list"},t("div",{class:"stzh-actions__secondary-actions"},t("slot",{name:"secondary"})),t("div",{class:"stzh-actions__primary-actions"},t("slot",{name:"primary"})))))}get element(){return i(this)}};n.style=c;export{n as stzh_actions};
-//# sourceMappingURL=p-5e09547b.entry.js.map
+import{r as s,h as t,a as o,g as i}from"./p-9e02896c.js";import{s as a}from"./p-5c697491.js";const c=".sc-stzh-actions-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-actions-h{display:none}.sc-stzh-actions-h *.sc-stzh-actions,.sc-stzh-actions-h *.sc-stzh-actions::before,.sc-stzh-actions-h *.sc-stzh-actions::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-actions-h .sc-stzh-actions-s>[slot=primary],.sc-stzh-actions-h .sc-stzh-actions-s>[slot=secondary]{-ms-flex-positive:1;flex-grow:1;margin:var(--stzh-space-xxsmall)}.sc-stzh-actions-h[variant=cta] .sc-stzh-actions-s>[slot=primary],.sc-stzh-actions-h[variant=cta] .sc-stzh-actions-s>[slot=secondary]{-ms-flex-positive:0;flex-grow:0}.stzh-actions__actions.sc-stzh-actions{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:calc(var(--stzh-space-xxsmall) * -1)}@media screen and (min-width: 600px){.stzh-actions__actions.sc-stzh-actions{-ms-flex-direction:row;flex-direction:row}}.stzh-actions__primary-actions.sc-stzh-actions,.stzh-actions__secondary-actions.sc-stzh-actions{display:-ms-flexbox;display:flex}.stzh-actions--dialog.sc-stzh-actions .stzh-actions__actions.sc-stzh-actions{-ms-flex-pack:end;justify-content:flex-end}.stzh-actions--process.sc-stzh-actions .stzh-actions__actions.sc-stzh-actions{-ms-flex-pack:justify;justify-content:space-between}.stzh-actions--has-border.sc-stzh-actions{padding-top:var(--stzh-space-medium);border-top:0.0625rem solid var(--stzh-base-border-color)}";const n=class{constructor(t){s(this,t);this.init=()=>{const s=this.element.querySelectorAll('stzh-button[slot="secondary"], [slot="secondary"] stzh-button');s.forEach((s=>{a(s,{variant:"secondary"})}))};this.variant="form";this.withBorder=false}connectedCallback(){this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}render(){const s={"stzh-actions":true,"stzh-actions--has-border":this.withBorder,[`stzh-actions--${this.variant}`]:!!this.variant};return t(o,null,t("div",{class:s},t("div",{class:"stzh-actions__actions",role:"group"},t("div",{class:"stzh-actions__secondary-actions"},t("slot",{name:"secondary"})),t("div",{class:"stzh-actions__primary-actions"},t("slot",{name:"primary"})))))}get element(){return i(this)}};n.style=c;export{n as stzh_actions};
+//# sourceMappingURL=p-bcd5b20e.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["stzhActionsCss","StzhActions","this","init","secondaryButtons","element","querySelectorAll","forEach","button","setPropsIfNull","variant","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","classes","withBorder","h","Host","class","role","name"],"sources":["./src/components/stzh-actions/stzh-actions.scss?tag=stzh-actions&encapsulation=scoped","./src/components/stzh-actions/stzh-actions.tsx"],"sourcesContent":[":host {\n  ::slotted([slot=\"primary\"]),\n  ::slotted([slot=\"secondary\"]) {\n    flex-grow: 1;\n    margin: space('xxsmall');\n  }\n\n  &[variant=\"cta\"] ::slotted([slot=\"primary\"]),\n  &[variant=\"cta\"] ::slotted([slot=\"secondary\"]) {\n    flex-grow: 0;\n  }\n}\n\n.stzh-actions {\n  &__actions {\n    display: flex;\n    flex-direction: column;\n    margin: calc(#{space('xxsmall')} * -1);\n\n    @include mq($from: small) {\n      flex-direction: row;\n    }\n  }\n\n  &__primary-actions,\n  &__secondary-actions {\n    display: flex;\n  }\n\n  &--dialog &__actions {\n    justify-content: flex-end;\n  }\n\n  &--process &__actions {\n    justify-content: space-between;\n  }\n\n  &--has-border {\n    padding-top: space('medium');\n    border-top: 1px solid $baseBorderColor;\n  }\n}\n","import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Element\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot primary - Slot for primary button\n * @slot secondary - Slot for secondary button\n */\n@Component({\n  tag: \"stzh-actions\",\n  styleUrl: \"stzh-actions.scss\",\n  scoped: true\n})\nexport class StzhActions {\n  /** Variant determining what position the action buttons are */\n  @Prop({ reflect: true }) variant: \"form\" | \"dialog\" | \"process\" | \"cta\" = \"form\";\n\n  /** With border separator */\n  @Prop({ reflect: true }) withBorder: boolean = false;\n\n  @Element() element: HTMLStzhActionsElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const secondaryButtons = this.element.querySelectorAll(\n      'stzh-button[slot=\"secondary\"], [slot=\"secondary\"] stzh-button'\n    );\n\n    secondaryButtons.forEach((button) => {\n      setPropsIfNull(button, {\n        variant: \"secondary\"\n      } as HTMLStzhButtonElement)\n    });\n\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-actions\": true,\n      \"stzh-actions--has-border\": this.withBorder,\n      [`stzh-actions--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-actions__actions\" role=\"group\">\n            <div class=\"stzh-actions__secondary-actions\">\n              <slot name=\"secondary\"></slot>\n            </div>\n            <div class=\"stzh-actions__primary-actions\">\n              <slot name=\"primary\"></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAiB,4qD,MCmBVC,EAAW,M,yBAWdC,KAAAC,KAAO,KACb,MAAMC,EAAmBF,KAAKG,QAAQC,iBACpC,iEAGFF,EAAiBG,SAASC,IACxBC,EAAeD,EAAQ,CACrBE,QAAS,aACgB,GAC3B,E,aAlBsE,O,gBAG3B,K,CAmB/CC,oBACET,KAAKC,OAELD,KAAKU,SAAW,IAAIC,iBAAiBX,KAAKC,MAC1CD,KAAKU,SAASE,QAAQZ,KAAKG,QAAS,CAClCU,UAAW,KACXC,QAAS,M,CAIbC,uBACE,GAAIf,KAAKU,SAAU,CACjBV,KAAKU,SAASM,Y,EAIlBC,SACE,MAAMC,EAAU,CACd,eAAgB,KAChB,2BAA4BlB,KAAKmB,WACjC,CAAC,iBAAiBnB,KAAKQ,aAAcR,KAAKQ,SAG5C,OACEY,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOJ,GACVE,EAAA,OAAKE,MAAM,wBAAwBC,KAAK,SACtCH,EAAA,OAAKE,MAAM,mCACTF,EAAA,QAAMI,KAAK,eAEbJ,EAAA,OAAKE,MAAM,iCACTF,EAAA,QAAMI,KAAK,e"}

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

@@ -0,0 +1,2 @@
+import{r as t,c as s,h as i,a as e,g as o}from"./p-9e02896c.js";import{f as h}from"./p-25a09313.js";const n=":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-amount__marker-symbol{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-amount__marker-text{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-amount__description-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-amount__error,.stzh-amount__description{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-amount__error{color:var(--stzh-color-error)}.stzh-amount__error-list{list-style:none;margin:0;padding:0}.stzh-amount__description{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-amount__description-long{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-amount__description-long-popover{--width:auto;--max-width:27.3125rem}.stzh-amount__description-long-popover[open]:not([open=false]) .stzh-amount__description-long-button{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-amount__description-long-button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-amount__description-long-button:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-amount stzh-icon.stzh-amount__description-long-icon{--size:var(--stzh-icon-size-xsmall)}.stzh-amount--has-error .stzh-amount__error,.stzh-amount--has-description .stzh-amount__description{margin-top:var(--stzh-space-xxsmall)}.stzh-amount__stepper-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;gap:var(--stzh-space-xxsmall)}.stzh-amount stzh-input.stzh-amount__stepper-input{--text-align:center;width:100%}";const r="stzh-amount__dropdown-plus-option";let a=0;const l=class{constructor(i){t(this,i);this.stzhChange=s(this,"stzhChange",7);this._showDropdown=!Number.isNaN(this.minValueDropdown)&&!Number.isNaN(this.maxValueDropdown)&&this.minValueDropdown<this.maxValueDropdown;this.onDropdownChange=t=>{if(t.detail.value===r){this._showDropdown=false;this.value=(this.maxValueDropdown+this.step).toString()}else{this.value=(+t.detail.value).toString()}this.stzhChange.emit({component:"stzh-amount",value:this.value})};this.onInputMinusStepClick=()=>{this.value=(+this.value-this.step).toString();this.value=this.roundToStep(+this.value).toString();this.stzhChange.emit({component:"stzh-amount",value:this.value})};this.onInputPlusStepClick=()=>{this.value=(+this.value+this.step).toString();this.value=this.roundToStep(+this.value).toString();this.stzhChange.emit({component:"stzh-amount",value:this.value})};this.onStepperInputChange=t=>{this.value=t.detail.value;this.stzhChange.emit({component:"stzh-amount",value:this.value})};this.minValue=-9007199254740991;this.maxValue=9007199254740991;this.minValueDropdown=null;this.maxValueDropdown=null;this.value="";this.step=1;this.name="";this.size="default";this.disabled=false;this.popoverPlacement="bottom";this.label="";this.invalid=false;this.required=false;this.clearable=false;this.showMarker=false;this.description=undefined;this.descriptionLong=undefined;this.error=undefined;this.a11yDescribedby="";this.localization=undefined}minValueDropdownWatcher(){this.setDropdownOptions()}maxValueDropdownWatcher(){this.setDropdownOptions()}errorWatcher(t){if(typeof t==="string"){try{this._error=JSON.parse(t)}catch(s){if(t){this._error=[t]}else{this._error=[]}}}else{this._error=t||[]}this.invalid=this._error.length>0}valueWatcher(t){if(!this._showDropdown){this.handleOutOfRangeValue(t)}}setDropdownOptions(){if(this._showDropdown){const t=[];for(let s=this.minValueDropdown;s<=this.maxValueDropdown;s++){t.push({text:s.toString(),value:s.toString()})}if(this.maxValue!=undefined&&this.maxValue>this.maxValueDropdown){t.push({text:`${this.maxValueDropdown.toString()}+`,value:r})}this._dropdownOptions=JSON.stringify(t)}}handleOutOfRangeValue(t){var s,i;if(!this.localization){return}let e=[];if(typeof this.error==="string"){e.push(this.error)}else if(this.error){e=[...this.error]}const o=(s=this.localization.amountTooGreatError)===null||s===void 0?void 0:s.replace(/{maxValue}/gi,this.maxValue.toString());const h=(i=this.localization.amountTooSmallError)===null||i===void 0?void 0:i.replace(/{minValue}/gi,this.minValue.toString());if(+t>this.maxValue){if(!e.includes(o)){e.push(o)}}else if(+t<this.minValue){if(!e.includes(h)){e.push(h)}}else{e=e.filter((t=>t!==o&&t!==h))}this.error=e.length>0?e:[]}roundToStep(t){const s=Math.max(0,-Math.floor(Math.log10(this.step)));const i=Math.pow(10,s);const e=Math.round(t/this.step)*this.step;return Number((e*i/i).toFixed(s))}async componentWillLoad(){this.errorWatcher(this.error);this.valueWatcher(this.value);if(!this.localization){this.localization=await h(this.element,"amount")}this.amountId=`stzh-amount-${a++}`;if(this._showDropdown){this.setDropdownOptions()}else{this.stepperInputId=`${this.amountId}-stepper-input`}}renderDropdown(){const t={"stzh-amount__dropdown":true,[`stzh-amount--popover-placement-${this.popoverPlacement}`]:!!this.popoverPlacement};return i("div",{class:t},i("stzh-dropdown",{options:this._dropdownOptions,items:[this.value],label:this.label,required:this.required,disabled:this.disabled,description:this.description,descriptionLong:this.descriptionLong,error:this.error,popoverPlacement:this.popoverPlacement,a11yDescribedby:this.a11yDescribedby,name:this.name,size:this.size,invalid:this.invalid,showMarker:this.showMarker,onStzhChange:this.onDropdownChange}))}renderInputStepper(){return i("div",{class:"stzh-amount__stepper"},i("div",{class:"stzh-amount__stepper-wrapper"},i("stzh-button",{class:"stzh-amount__stepper-minus",onClick:this.onInputMinusStepClick,variant:"secondary",icon:"minus",iconOnly:true,a11yControls:this.stepperInputId,a11yDescribedby:this.a11yDescribedby,a11yLabel:`${this.label} ${this.localization.stepperMinusLabel}, ${this.localization.selectedAmountMessage} ${this.value}`,size:this.size,disabled:+this.value<=+this.minValue||this.disabled,tabindex:this.disabled?null:"-1"}),i("stzh-input",{class:"stzh-amount__stepper-input",value:this.value,type:"number",label:this.label,min:this.minValue,max:this.maxValue,invalid:this.invalid,error:this._error,required:this.required,name:this.name,id:this.stepperInputId,size:this.size,step:this.step,showMarker:this.showMarker,description:this.description,descriptionLong:this.descriptionLong,clearable:this.clearable,disabled:this.disabled,a11yDescribedby:this.a11yDescribedby,onStzhChange:this.onStepperInputChange}),i("stzh-button",{class:"stzh-amount__stepper-plus",onClick:this.onInputPlusStepClick,variant:"secondary",icon:"plus",iconOnly:true,a11yControls:this.stepperInputId,a11yDescribedby:this.a11yDescribedby,a11yLabel:`${this.label} ${this.localization.stepperPlusLabel}, ${this.localization.selectedAmountMessage} ${this.value}`,size:this.size,disabled:+this.value>=+this.maxValue||this.disabled,tabindex:this.disabled?null:"-1"})))}render(){const t={"stzh-amount":true,"stzh-amount--has-description":!!this.description,"stzh-amount--has-description-long":!!this.descriptionLong,"stzh-amount--has-error":!!this.error,"stzh-amount--is-required":!!this.required};return i(e,null,i("div",{class:t,id:this.amountId},this._showDropdown?this.renderDropdown():this.renderInputStepper()))}get element(){return o(this)}static get watchers(){return{minValueDropdown:["minValueDropdownWatcher"],maxValueDropdown:["maxValueDropdownWatcher"],error:["errorWatcher"],value:["valueWatcher"]}}};l.style=n;export{l as stzh_amount};
+//# sourceMappingURL=p-c94f7331.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["stzhAmountCss","DROPDOWN_ITEM_PLUS_OPTION_VALUE","amountCounter","StzhAmount","this","_showDropdown","Number","isNaN","minValueDropdown","maxValueDropdown","onDropdownChange","event","detail","value","step","toString","stzhChange","emit","component","onInputMinusStepClick","roundToStep","onInputPlusStepClick","onStepperInputChange","minValueDropdownWatcher","setDropdownOptions","maxValueDropdownWatcher","errorWatcher","newValue","_error","JSON","parse","e","invalid","length","valueWatcher","handleOutOfRangeValue","options","i","push","text","maxValue","undefined","_dropdownOptions","stringify","localization","currentErrors","error","maxValueError","_a","amountTooGreatError","replace","minValueError","_b","amountTooSmallError","minValue","includes","filter","input","decimals","Math","max","floor","log10","factor","pow","rounded","round","toFixed","async","fetchTranslations","element","amountId","stepperInputId","renderDropdown","classes","popoverPlacement","h","class","items","label","required","disabled","description","descriptionLong","a11yDescribedby","name","size","showMarker","onStzhChange","renderInputStepper","onClick","variant","icon","iconOnly","a11yControls","a11yLabel","stepperMinusLabel","selectedAmountMessage","tabindex","type","min","id","clearable","stepperPlusLabel","render","Host"],"sources":["./src/components/stzh-amount/stzh-amount.scss?tag=stzh-amount","./src/components/stzh-amount/stzh-amount.tsx"],"sourcesContent":[".stzh-amount {\n  @include input-description;\n\n  &__stepper-wrapper {\n    display: flex;\n    align-items: flex-start;\n    gap: space('xxsmall');\n  }\n\n  stzh-input#{&}__stepper-input {\n    --text-align: center;\n    width: 100%;\n  }\n}\n","import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Watch,\n  Element,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhAmountChangeEvent,\n  StzhDropdownChangeEvent,\n  StzhDropdownCustomEvent,\n  StzhInputChangeEvent,\n  StzhInputCustomEvent,\n} from \"../../index\";\nimport { StzhAmountLocalizedText } from './stzh-amount.localization';\nimport {fetchTranslations} from '../../utils/translation-utils';\n\nconst DROPDOWN_ITEM_PLUS_OPTION_VALUE = \"stzh-amount__dropdown-plus-option\"\n\nlet amountCounter = 0;\n\n@Component({\n  tag: \"stzh-amount\",\n  styleUrl: \"stzh-amount.scss\"\n})\nexport class StzhAmount {\n  /** The lowest allowed amount (can be negative). */\n  @Prop() minValue: number = -9007199254740991;\n\n  /** The highest allowed amount. */\n  @Prop() maxValue: number = 9007199254740991;\n\n  /** The lowest amount as option in the dropdown. Needs to be set to initially display a dropdown. */\n  @Prop() minValueDropdown: number | null = null;\n\n  /** The highest amount as option in the dropdown. Needs to be set to initially display a dropdown. */\n  @Prop() maxValueDropdown: number | null = null;\n  private _showDropdown: boolean = !Number.isNaN(this.minValueDropdown) && !Number.isNaN(this.maxValueDropdown)\n    && this.minValueDropdown < this.maxValueDropdown;\n\n  private _dropdownOptions: string;\n\n  /** The initial value of the amount element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** The step the amount can be increased or decreased */\n  @Prop() step: number = 1;\n\n  /** Name of the element (hidden select element in case of dropdown) */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Whether the amount component is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Popover placement for the dropdown (if applicable) */\n  @Prop({ reflect: true }) popoverPlacement:  \"bottom\" | \"bottom-end\" | \"bottom-center\" | \"top\" | \"top-end\" | \"top-center\" = \"bottom\";\n\n  /** Label */\n  @Prop() label: 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  /** Whether clearable button is showing for the input field (does not apply to dropdown) */\n  @Prop({ reflect: true }) clearable: boolean = false;\n\n  /** Show text in label depending on whether field is optional/required */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Description placed below the amount */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message(s) */\n  @Prop({ mutable: true }) error: string | string[];\n  private _error: string[];\n\n  /** Id of the element which describes the input (this will be overwritten if description prop is used) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = '';\n\n  /**  Translation strings. */\n  @Prop() localization: StzhAmountLocalizedText;\n\n  @Watch(\"minValueDropdown\")\n  minValueDropdownWatcher() {\n    this.setDropdownOptions();\n  }\n\n  @Watch(\"maxValueDropdown\")\n  maxValueDropdownWatcher() {\n    this.setDropdownOptions();\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 {\n      this._error = newValue || [];\n    }\n\n    this.invalid = this._error.length > 0;\n  }\n\n  /** Update stepper button a11y-labels when value has changed */\n  @Watch(\"value\")\n  valueWatcher(newValue: string) {\n    if (!this._showDropdown) {\n      this.handleOutOfRangeValue(newValue);\n    }\n  }\n\n  /** Amount change event */\n  @Event() stzhChange: EventEmitter<StzhAmountChangeEvent>;\n\n  @Element() element: HTMLStzhAmountElement;\n\n  private amountId: string;\n  private stepperInputId: string;\n\n  /** Fill the dropdown with options according to maxValueDropdown & minValueDropdown. */\n  private setDropdownOptions(): void {\n    if (this._showDropdown) {\n      const options = [];\n\n      for (let i = this.minValueDropdown; i <= this.maxValueDropdown; i++) {\n        options.push({text: i.toString(), value: i.toString()});\n      }\n      if (this.maxValue != undefined && this.maxValue > this.maxValueDropdown) {\n        options.push({text: `${this.maxValueDropdown.toString()}+`, value: DROPDOWN_ITEM_PLUS_OPTION_VALUE})\n      }\n\n      this._dropdownOptions = JSON.stringify(options);\n    }\n  }\n\n  /** Handling dropdown changes (switch to input stepper if the plus option is selected in the dropdown). */\n  private onDropdownChange = (event: StzhDropdownCustomEvent<StzhDropdownChangeEvent>) => {\n    if (event.detail.value === DROPDOWN_ITEM_PLUS_OPTION_VALUE) {\n      this._showDropdown = false;\n      this.value = (this.maxValueDropdown + this.step).toString();\n    } else {\n      this.value = (+event.detail.value).toString();\n    }\n\n    this.stzhChange.emit({\n      component: \"stzh-amount\",\n      value: this.value\n    });\n  }\n\n  /** Handling the minus button. */\n  private onInputMinusStepClick = () => {\n    this.value = (+this.value - this.step).toString();\n    this.value = this.roundToStep(+this.value).toString();\n\n    this.stzhChange.emit({\n      component: \"stzh-amount\",\n      value: this.value\n    });\n  }\n\n  /** Handling the plus button. */\n  private onInputPlusStepClick = () => {\n    this.value = (+this.value + this.step).toString();\n    this.value = this.roundToStep(+this.value).toString();\n\n    this.stzhChange.emit({\n      component: \"stzh-amount\",\n      value: this.value\n    })\n  }\n\n  /** Handling manual value change of the stepper input. */\n  private handleOutOfRangeValue(newValue: string): void {\n    if (!this.localization) {\n      return;\n    }\n\n    let currentErrors: string[] = [];\n\n    if (typeof this.error === \"string\") {\n      currentErrors.push(this.error);\n    } else if (this.error) {\n      currentErrors = [...this.error];\n    }\n\n    const maxValueError = this.localization.amountTooGreatError?.replace(/{maxValue}/gi, this.maxValue.toString());\n    const minValueError = this.localization.amountTooSmallError?.replace(/{minValue}/gi, this.minValue.toString());\n\n    if (+newValue > this.maxValue) {\n      if (!currentErrors.includes(maxValueError)) {\n        currentErrors.push(maxValueError);\n      }\n    } else if (+newValue < this.minValue) {\n      if (!currentErrors.includes(minValueError)) {\n        currentErrors.push(minValueError);\n      }\n    } else {\n      currentErrors = currentErrors.filter(e => e !== maxValueError && e !== minValueError);\n    }\n\n    this.error = currentErrors.length > 0 ? currentErrors : [];\n  }\n\n  /** Handling manual value change of the stepper input. */\n  private onStepperInputChange = (event: StzhInputCustomEvent<StzhInputChangeEvent>) => {\n    this.value = event.detail.value;\n\n    this.stzhChange.emit({\n      component: \"stzh-amount\",\n      value: this.value\n    });\n  }\n\n  /** Making sure, that the value is rounded correctly according to the step  */\n  private roundToStep(input: number): number {\n    const decimals = Math.max(0, -Math.floor(Math.log10(this.step)));\n    const factor = Math.pow(10, decimals);\n    const rounded = Math.round(input / this.step) * this.step;\n    return Number((rounded * factor / factor).toFixed(decimals));\n  }\n\n  async componentWillLoad() {\n    this.errorWatcher(this.error);\n    this.valueWatcher(this.value);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"amount\");\n    }\n\n    this.amountId = `stzh-amount-${amountCounter++}`;\n\n    if (this._showDropdown) {\n      this.setDropdownOptions()\n    } else {\n      this.stepperInputId = `${this.amountId}-stepper-input`\n    }\n  }\n\n  private renderDropdown(): HTMLDivElement {\n    const classes = {\n      \"stzh-amount__dropdown\": true,\n      [`stzh-amount--popover-placement-${this.popoverPlacement}`]: !!this.popoverPlacement,\n    };\n    return (\n      <div class={classes}>\n        <stzh-dropdown\n          options={this._dropdownOptions}\n          items={[this.value]}\n          label={this.label}\n          required={this.required}\n          disabled={this.disabled}\n          description={this.description}\n          descriptionLong={this.descriptionLong}\n          error={this.error}\n          popoverPlacement={this.popoverPlacement}\n          a11yDescribedby={this.a11yDescribedby}\n          name={this.name}\n          size={this.size}\n          invalid={this.invalid}\n          showMarker={this.showMarker}\n          onStzhChange={this.onDropdownChange}\n        ></stzh-dropdown>\n      </div>\n    );\n  }\n\n  private renderInputStepper(): HTMLDivElement {\n    return (\n      <div class=\"stzh-amount__stepper\">\n        <div class=\"stzh-amount__stepper-wrapper\">\n          <stzh-button\n            class=\"stzh-amount__stepper-minus\"\n            onClick={this.onInputMinusStepClick}\n            variant=\"secondary\"\n            icon=\"minus\"\n            iconOnly={true}\n            a11yControls={this.stepperInputId}\n            a11yDescribedby={this.a11yDescribedby}\n            a11yLabel={`${this.label} ${this.localization.stepperMinusLabel}, ${this.localization.selectedAmountMessage} ${this.value}`}\n            size={this.size}\n            disabled={+this.value <= +this.minValue || this.disabled}\n            tabindex={this.disabled ? null : \"-1\"}\n          ></stzh-button>\n          <stzh-input\n            class=\"stzh-amount__stepper-input\"\n            value={this.value}\n            type=\"number\"\n            label={this.label}\n            min={this.minValue}\n            max={this.maxValue}\n            invalid={this.invalid}\n            error={this._error}\n            required={this.required}\n            name={this.name}\n            id={this.stepperInputId}\n            size={this.size}\n            step={this.step}\n            showMarker={this.showMarker}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            clearable={this.clearable}\n            disabled={this.disabled}\n            a11yDescribedby={this.a11yDescribedby}\n            onStzhChange={this.onStepperInputChange}\n          ></stzh-input>\n          <stzh-button\n            class=\"stzh-amount__stepper-plus\"\n            onClick={this.onInputPlusStepClick}\n            variant=\"secondary\"\n            icon=\"plus\"\n            iconOnly={true}\n            a11yControls={this.stepperInputId}\n            a11yDescribedby={this.a11yDescribedby}\n            a11yLabel={`${this.label} ${this.localization.stepperPlusLabel}, ${this.localization.selectedAmountMessage} ${this.value}`}\n            size={this.size}\n            disabled={+this.value >= +this.maxValue || this.disabled}\n            tabindex={this.disabled ? null : \"-1\"}\n          ></stzh-button>\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    const classes = {\n      \"stzh-amount\": true,\n      \"stzh-amount--has-description\": !!this.description,\n      \"stzh-amount--has-description-long\": !!this.descriptionLong,\n      \"stzh-amount--has-error\": !!this.error,\n      \"stzh-amount--is-required\": !!this.required,\n    };\n\n    return (\n      <Host>\n        <div\n          class={classes}\n          id={this.amountId}\n        >\n          {\n            this._showDropdown ?\n            this.renderDropdown()\n            :\n            this.renderInputStepper()\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}