@oiz/stzh-components 2.7.0 → 2.8.0-alpha

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-67fd55c9.js';
 import { f as fetchTranslations } from './translation-utils-2623783f.js';
 
-const stzhAmountCss = ":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 stzhAmountCss = ":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-xsmall)}.stzh-amount stzh-input.stzh-amount__stepper-input{--text-align:center;width:100%}";
 
 const DROPDOWN_ITEM_PLUS_OPTION_VALUE = "stzh-amount__dropdown-plus-option";
 let amountCounter = 0;
@@ -73,6 +73,7 @@ const StzhAmount = class {
     this.disabled = false;
     this.popoverPlacement = "bottom";
     this.label = "";
+    this.labelHidden = false;
     this.invalid = false;
     this.required = false;
     this.clearable = false;
@@ -124,10 +125,10 @@ const StzhAmount = class {
       "stzh-amount__dropdown": true,
       [`stzh-amount--popover-placement-${this.popoverPlacement}`]: !!this.popoverPlacement,
     };
-    return (h("div", { class: classes }, h("stzh-dropdown", { ref: (el) => (this.input = el), options: this._dropdownOptions, items: [this.value], label: this.label, required: this.required, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, invalid: this.invalid, popoverPlacement: this.popoverPlacement, a11yDescribedby: this.a11yDescribedby, name: this.name, size: this.size, showMarker: this.showMarker, onStzhChange: this.onDropdownChange })));
+    return (h("div", { class: classes }, h("stzh-dropdown", { ref: (el) => (this.input = el), options: this._dropdownOptions, items: [this.value], label: this.label, labelHidden: this.labelHidden, required: this.required, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, invalid: this.invalid, popoverPlacement: this.popoverPlacement, a11yDescribedby: this.a11yDescribedby, name: this.name, size: this.size, showMarker: this.showMarker, onStzhChange: this.onDropdownChange })));
   }
   renderInputStepper() {
-    return (h("div", { class: "stzh-amount__stepper" }, h("div", { class: "stzh-amount__stepper-wrapper" }, h("stzh-input", { ref: (el) => (this.input = el), class: "stzh-amount__stepper-input", value: this.value, type: "number", label: this.label, min: this.minValue, max: this.maxValue, error: this.error, invalid: this.invalid, 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 }), h("stzh-buttongroup", null, h("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, a11yDisabled: Number(this.value) <= this.minValue || this.disabled, disabled: this.disabled }), h("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, a11yDisabled: Number(this.value) >= this.maxValue || this.disabled, disabled: this.disabled })))));
+    return (h("div", { class: "stzh-amount__stepper" }, h("div", { class: "stzh-amount__stepper-wrapper" }, h("stzh-input", { ref: (el) => (this.input = el), class: "stzh-amount__stepper-input", value: this.value, type: "number", label: this.label, labelHidden: this.labelHidden, min: this.minValue, max: this.maxValue, error: this.error, invalid: this.invalid, 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 }), h("stzh-buttongroup", null, h("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, a11yDisabled: Number(this.value) <= this.minValue || this.disabled, disabled: this.disabled }), h("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, a11yDisabled: Number(this.value) >= this.maxValue || this.disabled, disabled: this.disabled })))));
   }
   render() {
     const classes = {

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

@@ -1 +1 @@
-{"file":"stzh-amount.entry.js","mappings":"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","names":[],"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  StzhDropdownOption,\n  StzhAmountChangeEvent,\n  StzhDropdownChangeEvent,\n  StzhInputChangeEvent,\n} from \"../../index\";\n\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: StzhDropdownOption[];\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\n  /** Id of the element which describes the input */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = '';\n\n  /**  Translation strings. */\n  @Prop() localization: StzhAmountLocalizedText;\n\n  @Watch(\"minValueDropdown\")\n  @Watch(\"maxValueDropdown\")\n  minMaxValueDropdownWatcher() {\n    this.setDropdownOptions();\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  private input: HTMLStzhInputElement | HTMLStzhDropdownElement;\n\n  private onRootFocus = () => {\n    if (this.input) {\n      this.input.setFocus();\n    }\n  }\n\n  /** Fill the dropdown with options according to maxValueDropdown & minValueDropdown. */\n  private setDropdownOptions() {\n    if (!this._showDropdown) {\n      return;\n    }\n\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 = options;\n  }\n\n  /** Handling dropdown changes (switch to input stepper if the plus option is selected in the dropdown). */\n  private onDropdownChange = (event: CustomEvent<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;\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    if (Number(this.value) <= this.minValue) {\n      return;\n    }\n\n    this.value = (Number(this.value) - this.step).toString();\n    this.value = this.roundToStep(Number(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    if (Number(this.value) >= this.maxValue) {\n      return;\n    }\n\n    this.value = (Number(this.value) + this.step).toString();\n    this.value = this.roundToStep(Number(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 onStepperInputChange = (event: CustomEvent<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    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          ref={(el) => (this.input = el as HTMLStzhDropdownElement)}\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          invalid={this.invalid}\n          popoverPlacement={this.popoverPlacement}\n          a11yDescribedby={this.a11yDescribedby}\n          name={this.name}\n          size={this.size}\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-input\n            ref={(el) => (this.input = el as HTMLStzhInputElement)}\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            error={this.error}\n            invalid={this.invalid}\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-buttongroup>\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              a11yDisabled={Number(this.value) <= this.minValue || this.disabled}\n              disabled={this.disabled}\n            ></stzh-button>\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              a11yDisabled={Number(this.value) >= this.maxValue || this.disabled}\n              disabled={this.disabled}\n            ></stzh-button>\n          </stzh-buttongroup>\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      \"stzh-amount--is-disabled\": !!this.disabled\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes} id={this.amountId}>\n          {\n            this._showDropdown ?\n            this.renderDropdown()\n            :\n            this.renderInputStepper()\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-amount.entry.js","mappings":"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","names":[],"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('xsmall');\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  StzhDropdownOption,\n  StzhAmountChangeEvent,\n  StzhDropdownChangeEvent,\n  StzhInputChangeEvent,\n} from \"../../index\";\n\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: StzhDropdownOption[];\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  /** Whether label is hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** 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\n  /** Id of the element which describes the input */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = '';\n\n  /**  Translation strings. */\n  @Prop() localization: StzhAmountLocalizedText;\n\n  @Watch(\"minValueDropdown\")\n  @Watch(\"maxValueDropdown\")\n  minMaxValueDropdownWatcher() {\n    this.setDropdownOptions();\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  private input: HTMLStzhInputElement | HTMLStzhDropdownElement;\n\n  private onRootFocus = () => {\n    if (this.input) {\n      this.input.setFocus();\n    }\n  }\n\n  /** Fill the dropdown with options according to maxValueDropdown & minValueDropdown. */\n  private setDropdownOptions() {\n    if (!this._showDropdown) {\n      return;\n    }\n\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 = options;\n  }\n\n  /** Handling dropdown changes (switch to input stepper if the plus option is selected in the dropdown). */\n  private onDropdownChange = (event: CustomEvent<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;\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    if (Number(this.value) <= this.minValue) {\n      return;\n    }\n\n    this.value = (Number(this.value) - this.step).toString();\n    this.value = this.roundToStep(Number(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    if (Number(this.value) >= this.maxValue) {\n      return;\n    }\n\n    this.value = (Number(this.value) + this.step).toString();\n    this.value = this.roundToStep(Number(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 onStepperInputChange = (event: CustomEvent<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    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          ref={(el) => (this.input = el as HTMLStzhDropdownElement)}\n          options={this._dropdownOptions}\n          items={[this.value]}\n          label={this.label}\n          labelHidden={this.labelHidden}\n          required={this.required}\n          disabled={this.disabled}\n          description={this.description}\n          descriptionLong={this.descriptionLong}\n          error={this.error}\n          invalid={this.invalid}\n          popoverPlacement={this.popoverPlacement}\n          a11yDescribedby={this.a11yDescribedby}\n          name={this.name}\n          size={this.size}\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-input\n            ref={(el) => (this.input = el as HTMLStzhInputElement)}\n            class=\"stzh-amount__stepper-input\"\n            value={this.value}\n            type=\"number\"\n            label={this.label}\n            labelHidden={this.labelHidden}\n            min={this.minValue}\n            max={this.maxValue}\n            error={this.error}\n            invalid={this.invalid}\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-buttongroup>\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              a11yDisabled={Number(this.value) <= this.minValue || this.disabled}\n              disabled={this.disabled}\n            ></stzh-button>\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              a11yDisabled={Number(this.value) >= this.maxValue || this.disabled}\n              disabled={this.disabled}\n            ></stzh-button>\n          </stzh-buttongroup>\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      \"stzh-amount--is-disabled\": !!this.disabled\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes} id={this.amountId}>\n          {\n            this._showDropdown ?\n            this.renderDropdown()\n            :\n            this.renderInputStepper()\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, a as Host, g as getElement } from './index-67fd55c9.js';
-import { s as setPropsIfNull } from './utils-51148d9a.js';
+import { s as setPropsIfNull } from './utils-8f264f12.js';
 
 const stzhAppnavCss = ".sc-stzh-appnav-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-appnav-h{display:none}.sc-stzh-appnav-h *.sc-stzh-appnav,.sc-stzh-appnav-h *.sc-stzh-appnav::before,.sc-stzh-appnav-h *.sc-stzh-appnav::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-appnav-h{width:100%}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link{--text-decoration-line:none;--hover-text-decoration-line:none;letter-spacing:0.01em}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__inner{-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__inner{-ms-flex-direction:row;flex-direction:row}}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link.stzh-link--has-icon .stzh-link__icon-wrapper+.stzh-link__text:not(:empty){margin-left:0}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link.stzh-link--has-icon .stzh-link__icon-wrapper+.stzh-link__text:not(:empty){margin-left:var(--stzh-space-xsmall)}}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link.stzh-link--badge-position-icon.stzh-link--has-icon.stzh-link--has-badge .stzh-link__icon-wrapper+.stzh-link__text:not(:empty){margin-left:0}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link.stzh-link--badge-position-icon.stzh-link--has-icon.stzh-link--has-badge .stzh-link__icon-wrapper+.stzh-link__text:not(:empty){margin-left:var(--stzh-space-small)}}@media screen and (max-width: 599px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__icon-wrapper{height:auto}}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>*:not(:last-child){margin-right:var(--stzh-space-xlarge)}}.stzh-appnav.sc-stzh-appnav{display:-ms-flexbox;display:flex;background-color:var(--stzh-color-white);height:4rem;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:center}@media screen and (min-width: 600px){.stzh-appnav.sc-stzh-appnav{height:3rem;text-align:left}}.stzh-appnav__items.sc-stzh-appnav{display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 600px){.stzh-appnav__items.sc-stzh-appnav{-ms-flex-positive:0;flex-grow:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}}.stzh-appnav__title.sc-stzh-appnav{font-family:var(--stzh-font-family-light);font-weight:var(--stzh-font-weight-light);font-style:normal;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);color:var(--stzh-base-color);-webkit-text-decoration-line:none;text-decoration-line:none;white-space:nowrap;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-small);display:none}@media screen and (min-width: 800px){.stzh-appnav__title.sc-stzh-appnav{display:-ms-flexbox;display:flex}}.stzh-appnav__title.sc-stzh-appnav:hover{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-appnav__title.sc-stzh-appnav:hover .stzh-appnav__status.sc-stzh-appnav{border-color:rgba(7, 2, 80, 0.4)}.stzh-appnav__status.sc-stzh-appnav{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);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;height:0.875rem;min-width:0.625rem;font-size:0.625rem;line-height:1.4;border-radius:0.875rem;padding:0.0625rem 0.375rem;border:0.0625rem solid rgba(115, 115, 115, 0.25);color:inherit;-webkit-transform:translateY(calc(var(--stzh-space-xsmall) * -1));transform:translateY(calc(var(--stzh-space-xsmall) * -1));margin-left:var(--stzh-space-xxsmall);-webkit-transition:border-color var(--stzh-base-transition-animation-speed);transition:border-color var(--stzh-base-transition-animation-speed)}";
 

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h as h$2, a as Host, g as getElement } from './index-67fd55c9.js';
-import { h as hasSlot } from './utils-51148d9a.js';
+import { h as hasSlot } from './utils-8f264f12.js';
 import { f as fetchTranslations } from './translation-utils-2623783f.js';
 
 /**

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, a as Host, c as createEvent, F as Fragment, g as getElement } from './index-67fd55c9.js';
-import { h as hasSlot } from './utils-51148d9a.js';
+import { h as hasSlot } from './utils-8f264f12.js';
 import { f as fetchTranslations } from './translation-utils-2623783f.js';
 
 const stzhBadgeCss = ".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}";

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, a as Host, g as getElement } from './index-67fd55c9.js';
 
-const stzhButtongroupCss = ".sc-stzh-buttongroup-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-buttongroup-h{display:none}.sc-stzh-buttongroup-h *.sc-stzh-buttongroup,.sc-stzh-buttongroup-h *.sc-stzh-buttongroup::before,.sc-stzh-buttongroup-h *.sc-stzh-buttongroup::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-buttongroup-h .sc-stzh-buttongroup-s>stzh-button:first-child{--border-radius:var(--stzh-button-border-radius) 0px 0px var(--stzh-button-border-radius);--border-width:0.0625rem 0px 0.0625rem 0.0625rem}.sc-stzh-buttongroup-h .sc-stzh-buttongroup-s>stzh-button:last-child{--border-radius:0px var(--stzh-button-border-radius) var(--stzh-button-border-radius) 0px;--border-width:0.0625rem 0.0625rem 0.0625rem 0px}.sc-stzh-buttongroup-h .sc-stzh-buttongroup-s>stzh-button:first-child:last-child{--border-width:0.0625rem;--border-radius:var(--stzh-button-border-radius)}.sc-stzh-buttongroup-h .sc-stzh-buttongroup-s>stzh-button:first-child+stzh-button:last-child{--border-width:0.0625rem}.sc-stzh-buttongroup-h .sc-stzh-buttongroup-s>stzh-button:not(:first-child):not(:last-child){--border-radius:0px}.stzh-buttongroup.sc-stzh-buttongroup{display:-ms-flexbox;display:flex}";
+const stzhButtongroupCss = ".sc-stzh-buttongroup-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-buttongroup-h{display:none}.sc-stzh-buttongroup-h *.sc-stzh-buttongroup,.sc-stzh-buttongroup-h *.sc-stzh-buttongroup::before,.sc-stzh-buttongroup-h *.sc-stzh-buttongroup::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-buttongroup-h .sc-stzh-buttongroup-s>stzh-button{z-index:1;margin-right:-0.0625rem}.sc-stzh-buttongroup-h .sc-stzh-buttongroup-s>stzh-button[a11y-disabled]:not([a11y-disabled=false]){z-index:0}.sc-stzh-buttongroup-h .sc-stzh-buttongroup-s>stzh-button:first-child{--border-radius:var(--stzh-button-border-radius) 0px 0px var(--stzh-button-border-radius)}.sc-stzh-buttongroup-h .sc-stzh-buttongroup-s>stzh-button:last-child{--border-radius:0px var(--stzh-button-border-radius) var(--stzh-button-border-radius) 0px;margin-right:0}.sc-stzh-buttongroup-h .sc-stzh-buttongroup-s>stzh-button:first-child:last-child{--border-radius:var(--stzh-button-border-radius);margin:0}.sc-stzh-buttongroup-h .sc-stzh-buttongroup-s>stzh-button:not(:first-child):not(:last-child){--border-radius:0px}.stzh-buttongroup.sc-stzh-buttongroup{position:relative;z-index:auto;display:-ms-flexbox;display:flex}";
 
 const StzhButtongroup = class {
   constructor(hostRef) {

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

@@ -1 +1 @@
-{"file":"stzh-buttongroup.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,o8CAAo8C;;MCel9C,eAAe;;;;EAG1B,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,kBAAkB,EAAE,IAAI;KACzB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,eAAa,CACT,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/stzh-buttongroup/stzh-buttongroup.scss?tag=stzh-buttongroup&encapsulation=scoped","./src/components/stzh-buttongroup/stzh-buttongroup.tsx"],"sourcesContent":[":host {\n  ::slotted(stzh-button) {\n    &:first-child {\n      --border-radius: #{$buttonBorderRadius 0px 0px $buttonBorderRadius};\n      --border-width: 1px 0px 1px 1px;\n    }\n\n    &:last-child {\n      --border-radius: #{0px $buttonBorderRadius $buttonBorderRadius 0px};\n      --border-width: 1px 1px 1px 0px;\n    }\n\n    // only one button\n    &:first-child:last-child {\n      --border-width: 1px;\n      --border-radius: #{$buttonBorderRadius};\n    }\n\n    // when only two buttons\n    &:first-child + stzh-button:last-child {\n      --border-width: 1px;\n    }\n\n    // buttons in the middle\n    &:not(:first-child):not(:last-child) {\n      --border-radius: 0px;\n    }\n  }\n}\n\n.stzh-buttongroup {\n  display: flex;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for buttons\n */\n@Component({\n  tag: \"stzh-buttongroup\",\n  styleUrl: \"stzh-buttongroup.scss\",\n  scoped: true\n})\nexport class StzhButtongroup {\n  @Element() element: HTMLStzhButtongroupElement;\n\n  render() {\n    const classes = {\n      \"stzh-buttongroup\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-buttongroup.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,o9CAAo9C;;MCel+C,eAAe;;;;EAG1B,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,kBAAkB,EAAE,IAAI;KACzB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,eAAa,CACT,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/stzh-buttongroup/stzh-buttongroup.scss?tag=stzh-buttongroup&encapsulation=scoped","./src/components/stzh-buttongroup/stzh-buttongroup.tsx"],"sourcesContent":[":host {\n  ::slotted(stzh-button) {\n    z-index: 1;\n    margin-right: -1px;\n\n    &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n      z-index: 0;\n    }\n\n    &:first-child {\n      --border-radius: #{$buttonBorderRadius 0px 0px $buttonBorderRadius};\n      // --border-width: 1px 0px 1px 1px;\n    }\n\n    &:last-child {\n      --border-radius: #{0px $buttonBorderRadius $buttonBorderRadius 0px};\n      // --border-width: 1px 1px 1px 0px;\n      margin-right: 0;\n    }\n\n    // only one button\n    &:first-child:last-child {\n      // --border-width: 1px;\n      --border-radius: #{$buttonBorderRadius};\n      margin: 0;\n    }\n\n    // when only two buttons\n    &:first-child + stzh-button:last-child {\n      // --border-width: 1px;\n    }\n\n    // buttons in the middle\n    &:not(:first-child):not(:last-child) {\n      --border-radius: 0px;\n    }\n  }\n}\n\n.stzh-buttongroup {\n  position: relative;\n  z-index: auto;\n  display: flex;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for buttons\n */\n@Component({\n  tag: \"stzh-buttongroup\",\n  styleUrl: \"stzh-buttongroup.scss\",\n  scoped: true\n})\nexport class StzhButtongroup {\n  @Element() element: HTMLStzhButtongroupElement;\n\n  render() {\n    const classes = {\n      \"stzh-buttongroup\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-67fd55c9.js';
-import { i as isStzhElement } from './utils-51148d9a.js';
+import { i as isStzhElement } from './utils-8f264f12.js';
 import { f as fetchTranslations } from './translation-utils-2623783f.js';
 import { a as addMediaChangeListener, r as removeMediaChangeListener, m as media } from './media-utils-9b041ceb.js';
 

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, a as Host } from './index-67fd55c9.js';
 
-const stzhCellCss = ":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)}:host{--cell-width:100%;max-width:100%;width:var(--cell-width);-ms-flex-preferred-size:var(--cell-width);flex-basis:var(--cell-width);-ms-flex-negative:0;flex-shrink:0}:host::after{content:\"\";display:table;clear:both}:host([justify-self=start]){justify-self:flex-start}:host([justify-self=end]){justify-self:flex-end}:host([justify-self=center]){justify-self:center}:host([justify-self=between]){justify-self:space-between}:host([justify-self=around]){justify-self:space-around}:host([justify-self=evenly]){justify-self:space-evenly}:host([align-self=start]){-ms-flex-item-align:start;align-self:flex-start}:host([align-self=end]){-ms-flex-item-align:end;align-self:flex-end}:host([align-self=center]){-ms-flex-item-align:center;align-self:center}:host([align-self=baseline]){-ms-flex-item-align:baseline;align-self:baseline}:host([align-self=stretch]){-ms-flex-item-align:stretch;align-self:stretch}:host([span=\"1\"]){--cell-width:8.3333333333%}:host([span=\"2\"]){--cell-width:16.6666666667%}:host([span=\"3\"]){--cell-width:25%}:host([span=\"4\"]){--cell-width:33.3333333333%}:host([span=\"5\"]){--cell-width:41.6666666667%}:host([span=\"6\"]){--cell-width:50%}:host([span=\"7\"]){--cell-width:58.3333333333%}:host([span=\"8\"]){--cell-width:66.6666666667%}:host([span=\"9\"]){--cell-width:75%}:host([span=\"10\"]){--cell-width:83.3333333333%}:host([span=\"11\"]){--cell-width:91.6666666667%}:host([span=\"12\"]){--cell-width:100%}@media screen and (min-width: 600px){:host([span-small=\"1\"]){--cell-width:8.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"2\"]){--cell-width:16.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"3\"]){--cell-width:25%}}@media screen and (min-width: 600px){:host([span-small=\"4\"]){--cell-width:33.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"5\"]){--cell-width:41.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"6\"]){--cell-width:50%}}@media screen and (min-width: 600px){:host([span-small=\"7\"]){--cell-width:58.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"8\"]){--cell-width:66.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"9\"]){--cell-width:75%}}@media screen and (min-width: 600px){:host([span-small=\"10\"]){--cell-width:83.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"11\"]){--cell-width:91.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"12\"]){--cell-width:100%}}@media screen and (min-width: 800px){:host([span-smallheader=\"1\"]){--cell-width:8.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"2\"]){--cell-width:16.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"3\"]){--cell-width:25%}}@media screen and (min-width: 800px){:host([span-smallheader=\"4\"]){--cell-width:33.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"5\"]){--cell-width:41.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"6\"]){--cell-width:50%}}@media screen and (min-width: 800px){:host([span-smallheader=\"7\"]){--cell-width:58.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"8\"]){--cell-width:66.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"9\"]){--cell-width:75%}}@media screen and (min-width: 800px){:host([span-smallheader=\"10\"]){--cell-width:83.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"11\"]){--cell-width:91.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"12\"]){--cell-width:100%}}@media screen and (min-width: 1024px){:host([span-medium=\"1\"]){--cell-width:8.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"2\"]){--cell-width:16.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"3\"]){--cell-width:25%}}@media screen and (min-width: 1024px){:host([span-medium=\"4\"]){--cell-width:33.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"5\"]){--cell-width:41.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"6\"]){--cell-width:50%}}@media screen and (min-width: 1024px){:host([span-medium=\"7\"]){--cell-width:58.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"8\"]){--cell-width:66.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"9\"]){--cell-width:75%}}@media screen and (min-width: 1024px){:host([span-medium=\"10\"]){--cell-width:83.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"11\"]){--cell-width:91.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"12\"]){--cell-width:100%}}@media screen and (min-width: 1260px){:host([span-large=\"1\"]){--cell-width:8.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"2\"]){--cell-width:16.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"3\"]){--cell-width:25%}}@media screen and (min-width: 1260px){:host([span-large=\"4\"]){--cell-width:33.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"5\"]){--cell-width:41.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"6\"]){--cell-width:50%}}@media screen and (min-width: 1260px){:host([span-large=\"7\"]){--cell-width:58.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"8\"]){--cell-width:66.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"9\"]){--cell-width:75%}}@media screen and (min-width: 1260px){:host([span-large=\"10\"]){--cell-width:83.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"11\"]){--cell-width:91.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"12\"]){--cell-width:100%}}@media screen and (min-width: 1440px){:host([span-ultra=\"1\"]){--cell-width:8.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"2\"]){--cell-width:16.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"3\"]){--cell-width:25%}}@media screen and (min-width: 1440px){:host([span-ultra=\"4\"]){--cell-width:33.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"5\"]){--cell-width:41.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"6\"]){--cell-width:50%}}@media screen and (min-width: 1440px){:host([span-ultra=\"7\"]){--cell-width:58.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"8\"]){--cell-width:66.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"9\"]){--cell-width:75%}}@media screen and (min-width: 1440px){:host([span-ultra=\"10\"]){--cell-width:83.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"11\"]){--cell-width:91.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"12\"]){--cell-width:100%}}.stzh-cell{height:100%;padding-left:calc(var(--stzh-grid-gutter) / 2);padding-right:calc(var(--stzh-grid-gutter) / 2)}@media screen and (min-width: 600px){.stzh-cell{padding-left:calc(var(--stzh-grid-gutter-small) / 2);padding-right:calc(var(--stzh-grid-gutter-small) / 2)}}@media screen and (min-width: 1024px){.stzh-cell{padding-left:calc(var(--stzh-grid-gutter-medium) / 2);padding-right:calc(var(--stzh-grid-gutter-medium) / 2)}}";
+const stzhCellCss = ":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)}:host{--cell-width:100%;max-width:100%;width:var(--cell-width);-ms-flex-preferred-size:var(--cell-width);flex-basis:var(--cell-width);-ms-flex-negative:0;flex-shrink:0}:host([justify-self=start]){justify-self:flex-start}:host([justify-self=end]){justify-self:flex-end}:host([justify-self=center]){justify-self:center}:host([justify-self=between]){justify-self:space-between}:host([justify-self=around]){justify-self:space-around}:host([justify-self=evenly]){justify-self:space-evenly}:host([align-self=start]){-ms-flex-item-align:start;align-self:flex-start}:host([align-self=end]){-ms-flex-item-align:end;align-self:flex-end}:host([align-self=center]){-ms-flex-item-align:center;align-self:center}:host([align-self=baseline]){-ms-flex-item-align:baseline;align-self:baseline}:host([align-self=stretch]){-ms-flex-item-align:stretch;align-self:stretch}:host([span=\"1\"]){--cell-width:8.3333333333%}:host([span=\"2\"]){--cell-width:16.6666666667%}:host([span=\"3\"]){--cell-width:25%}:host([span=\"4\"]){--cell-width:33.3333333333%}:host([span=\"5\"]){--cell-width:41.6666666667%}:host([span=\"6\"]){--cell-width:50%}:host([span=\"7\"]){--cell-width:58.3333333333%}:host([span=\"8\"]){--cell-width:66.6666666667%}:host([span=\"9\"]){--cell-width:75%}:host([span=\"10\"]){--cell-width:83.3333333333%}:host([span=\"11\"]){--cell-width:91.6666666667%}:host([span=\"12\"]){--cell-width:100%}@media screen and (min-width: 600px){:host([span-small=\"1\"]){--cell-width:8.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"2\"]){--cell-width:16.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"3\"]){--cell-width:25%}}@media screen and (min-width: 600px){:host([span-small=\"4\"]){--cell-width:33.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"5\"]){--cell-width:41.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"6\"]){--cell-width:50%}}@media screen and (min-width: 600px){:host([span-small=\"7\"]){--cell-width:58.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"8\"]){--cell-width:66.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"9\"]){--cell-width:75%}}@media screen and (min-width: 600px){:host([span-small=\"10\"]){--cell-width:83.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"11\"]){--cell-width:91.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"12\"]){--cell-width:100%}}@media screen and (min-width: 800px){:host([span-smallheader=\"1\"]){--cell-width:8.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"2\"]){--cell-width:16.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"3\"]){--cell-width:25%}}@media screen and (min-width: 800px){:host([span-smallheader=\"4\"]){--cell-width:33.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"5\"]){--cell-width:41.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"6\"]){--cell-width:50%}}@media screen and (min-width: 800px){:host([span-smallheader=\"7\"]){--cell-width:58.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"8\"]){--cell-width:66.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"9\"]){--cell-width:75%}}@media screen and (min-width: 800px){:host([span-smallheader=\"10\"]){--cell-width:83.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"11\"]){--cell-width:91.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"12\"]){--cell-width:100%}}@media screen and (min-width: 1024px){:host([span-medium=\"1\"]){--cell-width:8.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"2\"]){--cell-width:16.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"3\"]){--cell-width:25%}}@media screen and (min-width: 1024px){:host([span-medium=\"4\"]){--cell-width:33.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"5\"]){--cell-width:41.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"6\"]){--cell-width:50%}}@media screen and (min-width: 1024px){:host([span-medium=\"7\"]){--cell-width:58.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"8\"]){--cell-width:66.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"9\"]){--cell-width:75%}}@media screen and (min-width: 1024px){:host([span-medium=\"10\"]){--cell-width:83.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"11\"]){--cell-width:91.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"12\"]){--cell-width:100%}}@media screen and (min-width: 1260px){:host([span-large=\"1\"]){--cell-width:8.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"2\"]){--cell-width:16.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"3\"]){--cell-width:25%}}@media screen and (min-width: 1260px){:host([span-large=\"4\"]){--cell-width:33.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"5\"]){--cell-width:41.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"6\"]){--cell-width:50%}}@media screen and (min-width: 1260px){:host([span-large=\"7\"]){--cell-width:58.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"8\"]){--cell-width:66.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"9\"]){--cell-width:75%}}@media screen and (min-width: 1260px){:host([span-large=\"10\"]){--cell-width:83.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"11\"]){--cell-width:91.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"12\"]){--cell-width:100%}}@media screen and (min-width: 1440px){:host([span-ultra=\"1\"]){--cell-width:8.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"2\"]){--cell-width:16.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"3\"]){--cell-width:25%}}@media screen and (min-width: 1440px){:host([span-ultra=\"4\"]){--cell-width:33.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"5\"]){--cell-width:41.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"6\"]){--cell-width:50%}}@media screen and (min-width: 1440px){:host([span-ultra=\"7\"]){--cell-width:58.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"8\"]){--cell-width:66.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"9\"]){--cell-width:75%}}@media screen and (min-width: 1440px){:host([span-ultra=\"10\"]){--cell-width:83.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"11\"]){--cell-width:91.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"12\"]){--cell-width:100%}}.stzh-cell{height:100%;padding-left:calc(var(--stzh-grid-gutter) / 2);padding-right:calc(var(--stzh-grid-gutter) / 2)}@media screen and (min-width: 600px){.stzh-cell{padding-left:calc(var(--stzh-grid-gutter-small) / 2);padding-right:calc(var(--stzh-grid-gutter-small) / 2)}}@media screen and (min-width: 1024px){.stzh-cell{padding-left:calc(var(--stzh-grid-gutter-medium) / 2);padding-right:calc(var(--stzh-grid-gutter-medium) / 2)}}";
 
 const StzhCell = class {
   constructor(hostRef) {

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

@@ -1 +1 @@
-{"file":"stzh-cell.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,klPAAklP;;MCiBzlP,QAAQ;;;gBAEI,EAAE;qBAEG,CAAC;sBAEA,CAAC;qBAEF,CAAC;qBAED,CAAC;uBAG8B,MAAM;qBAGV,MAAM;;EAE7D,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,WAAW,EAAE,IAAI;OAClB,IAED,eAAa,CACT,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/stzh-cell/stzh-cell.scss?tag=stzh-cell&encapsulation=shadow","./src/components/stzh-cell/stzh-cell.tsx"],"sourcesContent":[":host {\n  @include clearfix;\n\n  // couldn't use cell-span and calcuate the with with css calc\n  // since IE was calculating the width wrongly with certain viewport widths\n  // so calculating it with sass and using the width directly\n  --cell-width: 100%;\n\n  max-width: 100%;\n  width: var(--cell-width);\n  flex-basis: var(--cell-width);\n  flex-shrink: 0;\n}\n\n/* Justify self variants */\n\n:host([justify-self=\"start\"]) {\n  justify-self: flex-start;\n}\n\n:host([justify-self=\"end\"]) {\n  justify-self: flex-end;\n}\n\n:host([justify-self=\"center\"]) {\n  justify-self: center;\n}\n\n:host([justify-self=\"between\"]) {\n  justify-self: space-between;\n}\n\n:host([justify-self=\"around\"]) {\n  justify-self: space-around;\n}\n\n:host([justify-self=\"evenly\"]) {\n  justify-self: space-evenly;\n}\n\n/* Align self variants */\n\n:host([align-self=\"start\"]) {\n  align-self: flex-start;\n}\n\n:host([align-self=\"end\"]) {\n  align-self: flex-end;\n}\n\n:host([align-self=\"center\"]) {\n  align-self: center;\n}\n\n:host([align-self=\"baseline\"]) {\n  align-self: baseline;\n}\n\n:host([align-self=\"stretch\"]) {\n  align-self: stretch;\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"]) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{100% / ($gridCells / $i)};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"]) {\n        --cell-width: #{100% / ($gridCells / $i)};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-cell {\n  height: 100%;\n  padding-left: calc(#{$gridGutter} / 2);\n  padding-right: calc(#{$gridGutter} / 2);\n\n  @include mq($from: small) {\n    padding-left: calc(#{$gridGutterSmall} / 2);\n    padding-right: calc(#{$gridGutterSmall} / 2);\n  }\n\n  @include mq($from: medium) {\n    padding-left: calc(#{$gridGutterMedium} / 2);\n    padding-right: calc(#{$gridGutterMedium} / 2);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-cell\",\n  styleUrl: \"stzh-cell.scss\",\n  shadow: true\n})\nexport class StzhCell {\n  /** Default span of each cell */\n  @Prop() span: number = 12;\n  /** Default span of each cell above small breakpoint */\n  @Prop() spanSmall: number = 0;\n  /** Default span of each cell above medium breakpoint */\n  @Prop() spanMedium: number = 0;\n  /** Default span of each cell above large breakpoint */\n  @Prop() spanLarge: number = 0;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop() spanUltra: number = 0;\n\n  /** Controlling how cells are positioned along a container's main axis */\n  @Prop({ reflect: true }) justifySelf: Layout.JustifySelf = \"auto\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) alignSelf: Layout.AlignSelf = \"auto\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-cell\": true\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-cell.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,+hPAA+hP;;MCiBtiP,QAAQ;;;gBAEI,EAAE;qBAEG,CAAC;sBAEA,CAAC;qBAEF,CAAC;qBAED,CAAC;uBAG8B,MAAM;qBAGV,MAAM;;EAE7D,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,WAAW,EAAE,IAAI;OAClB,IAED,eAAa,CACT,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/stzh-cell/stzh-cell.scss?tag=stzh-cell&encapsulation=shadow","./src/components/stzh-cell/stzh-cell.tsx"],"sourcesContent":[":host {\n  // couldn't use cell-span and calcuate the with with css calc\n  // since IE was calculating the width wrongly with certain viewport widths\n  // so calculating it with sass and using the width directly\n  --cell-width: 100%;\n\n  max-width: 100%;\n  width: var(--cell-width);\n  flex-basis: var(--cell-width);\n  flex-shrink: 0;\n}\n\n/* Justify self variants */\n\n:host([justify-self=\"start\"]) {\n  justify-self: flex-start;\n}\n\n:host([justify-self=\"end\"]) {\n  justify-self: flex-end;\n}\n\n:host([justify-self=\"center\"]) {\n  justify-self: center;\n}\n\n:host([justify-self=\"between\"]) {\n  justify-self: space-between;\n}\n\n:host([justify-self=\"around\"]) {\n  justify-self: space-around;\n}\n\n:host([justify-self=\"evenly\"]) {\n  justify-self: space-evenly;\n}\n\n/* Align self variants */\n\n:host([align-self=\"start\"]) {\n  align-self: flex-start;\n}\n\n:host([align-self=\"end\"]) {\n  align-self: flex-end;\n}\n\n:host([align-self=\"center\"]) {\n  align-self: center;\n}\n\n:host([align-self=\"baseline\"]) {\n  align-self: baseline;\n}\n\n:host([align-self=\"stretch\"]) {\n  align-self: stretch;\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"]) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{100% / ($gridCells / $i)};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"]) {\n        --cell-width: #{100% / ($gridCells / $i)};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-cell {\n  height: 100%;\n  padding-left: calc(#{$gridGutter} / 2);\n  padding-right: calc(#{$gridGutter} / 2);\n\n  @include mq($from: small) {\n    padding-left: calc(#{$gridGutterSmall} / 2);\n    padding-right: calc(#{$gridGutterSmall} / 2);\n  }\n\n  @include mq($from: medium) {\n    padding-left: calc(#{$gridGutterMedium} / 2);\n    padding-right: calc(#{$gridGutterMedium} / 2);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-cell\",\n  styleUrl: \"stzh-cell.scss\",\n  shadow: true\n})\nexport class StzhCell {\n  /** Default span of each cell */\n  @Prop() span: number = 12;\n  /** Default span of each cell above small breakpoint */\n  @Prop() spanSmall: number = 0;\n  /** Default span of each cell above medium breakpoint */\n  @Prop() spanMedium: number = 0;\n  /** Default span of each cell above large breakpoint */\n  @Prop() spanLarge: number = 0;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop() spanUltra: number = 0;\n\n  /** Controlling how cells are positioned along a container's main axis */\n  @Prop({ reflect: true }) justifySelf: Layout.JustifySelf = \"auto\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) alignSelf: Layout.AlignSelf = \"auto\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-cell\": true\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-67fd55c9.js';
-import { h as hasSlot } from './utils-51148d9a.js';
+import { h as hasSlot } from './utils-8f264f12.js';
 import { f as fetchTranslations } from './translation-utils-2623783f.js';
 import { S as StzhInputDescription } from './stzh-input-description-cceaa066.js';
 

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, g as getElement } from './index-67fd55c9.js';
-import { h as hasSlot } from './utils-51148d9a.js';
-import { c as camelCase } from './string-utils-f98ee4e8.js';
+import { h as hasSlot } from './utils-8f264f12.js';
+import { c as camelCase } from './string-utils-3ffa8d6b.js';
 import { f as fetchTranslations } from './translation-utils-2623783f.js';
 import { S as StzhInputDescription } from './stzh-input-description-cceaa066.js';
 

package/dist/esm/stzh-chip-select.entry.js

@@ -0,0 +1,145 @@
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-67fd55c9.js';
+import { S as StzhInputDescription } from './stzh-input-description-cceaa066.js';
+import { f as fetchTranslations } from './translation-utils-2623783f.js';
+
+const stzhChipSelectCss = ".sc-stzh-chip-select-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-chip-select-h{display:none}.sc-stzh-chip-select-h *.sc-stzh-chip-select,.sc-stzh-chip-select-h *.sc-stzh-chip-select::before,.sc-stzh-chip-select-h *.sc-stzh-chip-select::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-chip-select__marker-symbol.sc-stzh-chip-select{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-chip-select__marker-text.sc-stzh-chip-select{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-chip-select__description-wrapper.sc-stzh-chip-select{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-chip-select__error.sc-stzh-chip-select,.stzh-chip-select__description.sc-stzh-chip-select{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-chip-select__error.sc-stzh-chip-select{color:var(--stzh-color-error)}.stzh-chip-select__error-list.sc-stzh-chip-select{list-style:none;margin:0;padding:0}.stzh-chip-select__description.sc-stzh-chip-select{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-chip-select__description-long.sc-stzh-chip-select{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-chip-select__description-long-popover.sc-stzh-chip-select{--width:auto;--max-width:27.3125rem}.stzh-chip-select__description-long-popover[open].sc-stzh-chip-select:not([open=false]) .stzh-chip-select__description-long-button.sc-stzh-chip-select{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-chip-select__description-long-button.sc-stzh-chip-select{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-chip-select__description-long-button.sc-stzh-chip-select:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-chip-select.sc-stzh-chip-select stzh-icon.stzh-chip-select__description-long-icon.sc-stzh-chip-select{--size:var(--stzh-icon-size-xsmall)}.stzh-chip-select--has-error.sc-stzh-chip-select .stzh-chip-select__error.sc-stzh-chip-select,.stzh-chip-select--has-description.sc-stzh-chip-select .stzh-chip-select__description.sc-stzh-chip-select{margin-top:var(--stzh-space-xxsmall)}.stzh-chip-select__chips.sc-stzh-chip-select{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:calc(var(--stzh-space-small) / -2) calc(var(--stzh-space-xsmall) / -2);border-radius:var(--stzh-button-border-radius)}@media screen and (max-width: 1023px){.stzh-chip-select__chips.sc-stzh-chip-select{display:none}}.stzh-chip-select__chip.sc-stzh-chip-select{margin:calc(var(--stzh-space-small) / 2) calc(var(--stzh-space-xsmall) / 2)}.stzh-chip-select__chip.is-focused.sc-stzh-chip-select,.stzh-chip-select__chip.is-focused[active].sc-stzh-chip-select:not([active=false]){--border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-chip-select__chip.is-focused[active].sc-stzh-chip-select:not([active=false]){--background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}@media screen and (min-width: 1024px){.stzh-chip-select__dropdown.sc-stzh-chip-select{display:none}}@media screen and (max-width: 1023px){.stzh-chip-select__description-wrapper.sc-stzh-chip-select{display:none}}.stzh-chip-select--has-error.sc-stzh-chip-select .stzh-chip-select__error.sc-stzh-chip-select,.stzh-chip-select--has-description.sc-stzh-chip-select .stzh-chip-select__description.sc-stzh-chip-select{margin-top:var(--stzh-space-xsmall)}";
+
+let chipSelectCounter = 0;
+const StzhChipSelect = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.stzhChange = createEvent(this, "stzhChange", 7);
+    this._data = [];
+    this._dataDropdown = [];
+    this.handleChipClick = (data, index) => {
+      this.value = data.value;
+      this.activeFocusOptionIndex = index;
+      this.stzhChange.emit({
+        component: "stzh-chip-select",
+        value: this.value
+      });
+    };
+    this.handleDropdownChange = (event) => {
+      this.value = event.detail.value;
+      this.activeFocusOptionIndex = this._data.findIndex(data => {
+        return data.value === this.value;
+      });
+      this.stzhChange.emit({
+        component: "stzh-chip-select",
+        value: this.value
+      });
+    };
+    this.handleKeydown = (event) => {
+      let newActiveIndex = null;
+      const activeOptionIndex = this.activeFocusOptionIndex;
+      if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+        event.preventDefault();
+        if (activeOptionIndex > 0) {
+          newActiveIndex = activeOptionIndex - 1;
+        }
+      }
+      else if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+        event.preventDefault();
+        if (activeOptionIndex < this._data.length - 1) {
+          newActiveIndex = activeOptionIndex + 1;
+        }
+      }
+      else if (event.key === " " || event.key === "Enter") {
+        event.preventDefault();
+        this.value = this._data[activeOptionIndex].value;
+        this.stzhChange.emit({
+          component: "stzh-chip-select",
+          value: this.value
+        });
+      }
+      if (newActiveIndex !== null) {
+        this.activeFocusOptionIndex = newActiveIndex;
+      }
+    };
+    this.localization = undefined;
+    this.data = [];
+    this.name = undefined;
+    this.label = "";
+    this.value = "";
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.invalid = false;
+    this.required = false;
+    this.disabled = false;
+    this.a11yDescribedby = "";
+    this.activeFocusOptionIndex = 0;
+  }
+  dataWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._data = JSON.parse(newValue);
+    }
+    else {
+      this._data = newValue;
+    }
+    this._dataDropdown = this._data.map((data) => {
+      return {
+        text: `${data.label} (${data.counter})`,
+        value: data.value
+      };
+    });
+  }
+  errorWatcher(newValue) {
+    if (typeof newValue === "string") {
+      try {
+        this._error = JSON.parse(newValue);
+      }
+      catch (e) {
+        if (newValue) {
+          this._error = [newValue];
+        }
+        else {
+          this._error = [];
+        }
+      }
+    }
+    else if (newValue) {
+      this._error = newValue;
+    }
+    else {
+      this._error = [];
+    }
+    this.invalid = this._error.length > 0;
+  }
+  async componentWillLoad() {
+    this.id = `stzh-chip-select-${chipSelectCounter++}`;
+    this.dataWatcher(this.data);
+    this.errorWatcher(this.error);
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "chip-select");
+    }
+  }
+  render() {
+    const descriptionUsed = !!this.description;
+    const descriptionLongUsed = !!this.descriptionLong;
+    const errorUsed = !!this.error;
+    const classes = {
+      "stzh-chip-select": true,
+      "stzh-chip-select--has-description": descriptionUsed,
+      "stzh-chip-select--has-description-long": descriptionLongUsed,
+      "stzh-chip-select--has-error": errorUsed,
+      "stzh-chip-select--is-invalid": this.invalid,
+      "stzh-chip-select--is-disabled": this.disabled,
+      "stzh-chip-select--is-required": this.required
+    };
+    return (h(Host, null, h("div", { class: classes }, h("input", { type: "hidden", name: this.name, value: this.value }), h("div", { class: "stzh-chip-select__chips", role: "listbox", tabindex: "0", "aria-multiselectable": "false", "aria-activedescendant": `${this.id}-option-${this.activeFocusOptionIndex}`, "aria-describedby": `${this.id}-description ${this.a11yDescribedby}`, onKeyDown: this.handleKeydown }, this._data.map((data, index) => (h("stzh-chip", { role: "option", class: {
+        "stzh-chip-select__chip": true,
+        "is-focused": this.activeFocusOptionIndex === index
+      }, label: data.label, counter: data.counter, icon: data.icon, type: data.type, variant: data.variant, size: data.size, disabled: this.disabled || data.disabled, active: this.value === data.value, "aria-selected": this.value === data.value ? "true" : "false", id: `${this.id}-option-${index}`, a11yTabindex: "-1", onClick: () => this.handleChipClick(data, index) })))), h(StzhInputDescription, { classPrefix: "stzh-chip-select", id: `${this.id}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }), h("stzh-dropdown", { class: "stzh-chip-select__dropdown", disabled: this.disabled, error: this._error, description: this.description, descriptionLong: this.descriptionLong, required: this.required, invalid: this.invalid, items: [this.value], label: this.label, options: this._dataDropdown, onStzhChange: this.handleDropdownChange }))));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "data": ["dataWatcher"],
+    "error": ["errorWatcher"]
+  }; }
+};
+StzhChipSelect.style = stzhChipSelectCss;
+
+export { StzhChipSelect as stzh_chip_select };
+
+//# sourceMappingURL=stzh-chip-select.entry.js.map

package/dist/esm/stzh-chip-select.entry.js.map

@@ -0,0 +1 @@
+{"file":"stzh-chip-select.entry.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,2zIAA2zI;;ACuBr1I,IAAI,iBAAiB,GAAG,CAAC,CAAC;MASb,cAAc;;;;IAMjB,UAAK,GAAyB,EAAE,CAAC;IACjC,kBAAa,GAAU,EAAE,CAAC;IA+E1B,oBAAe,GAAG,CAAC,IAAwB,EAAE,KAAa;MAChE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;MACxB,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC;MAEpC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,kBAAkB;QAC7B,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAA;KACH,CAAA;IAEO,yBAAoB,GAAG,CAAC,KAA2C;MACzE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;MAChC,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI;QACrD,OAAO,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;OAClC,CAAC,CAAC;MAEH,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,kBAAkB;QAC7B,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAA;KACH,CAAA;IAEO,kBAAa,GAAG,CAAC,KAAoB;MAC3C,IAAI,cAAc,GAAW,IAAI,CAAC;MAClC,MAAM,iBAAiB,GAAG,IAAI,CAAC,sBAAsB,CAAC;MAEtD,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;QACxD,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,iBAAiB,GAAG,CAAC,EAAE;UACzB,cAAc,GAAG,iBAAiB,GAAG,CAAC,CAAC;SACxC;OACF;WAAM,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE;QAClE,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;UAC7C,cAAc,GAAG,iBAAiB,GAAG,CAAC,CAAC;SACxC;OACF;WAAM,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;QACrD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,KAAK,CAAC;QAEjD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;UACnB,SAAS,EAAE,kBAAkB;UAC7B,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC;OACJ;MAED,IAAI,cAAc,KAAK,IAAI,EAAE;QAC3B,IAAI,CAAC,sBAAsB,GAAG,cAAc,CAAC;OAC9C;KACF,CAAA;;gBApI6C,EAAE;;iBAQxB,EAAE;iBAGF,EAAE;;;;mBAakB,KAAK;oBAGJ,KAAK;oBAGL,KAAK;2BAGiB,EAAE;kCAE3B,CAAC;;EAQ3C,WAAW,CAAC,QAAuC;IACjD,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KACnC;SAAM;MACL,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;KACvB;IAED,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI;MACvC,OAAO;QACL,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,GAAG;QACvC,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAA;KACF,CAAC,CAAC;GACJ;EAGD,YAAY,CAAC,QAA2B;IACtC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI;QACF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;OACpC;MAAC,OAAO,CAAC,EAAE;QACV,IAAI,QAAQ,EAAE;UACZ,IAAI,CAAC,MAAM,GAAG,CAAC,QAAQ,CAAC,CAAC;SAC1B;aAAM;UACL,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;SAClB;OACF;KACF;SAAM,IAAI,QAAQ,EAAE;MACnB,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;KACxB;SAAM;MACL,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;KAClB;IAED,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;GACvC;EAyDD,MAAM,iBAAiB;IACrB,IAAI,CAAC,EAAE,GAAG,oBAAoB,iBAAiB,EAAE,EAAE,CAAC;IAEpD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAE9B,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;KAC1E;GACF;EAED,MAAM;IACJ,MAAM,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;IAC3C,MAAM,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;IACnD,MAAM,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;IAE/B,MAAM,OAAO,GAAG;MACd,kBAAkB,EAAE,IAAI;MACxB,mCAAmC,EAAE,eAAe;MACpD,wCAAwC,EAAE,mBAAmB;MAC7D,6BAA6B,EAAE,SAAS;MACxC,8BAA8B,EAAE,IAAI,CAAC,OAAO;MAC5C,+BAA+B,EAAE,IAAI,CAAC,QAAQ;MAC9C,+BAA+B,EAAE,IAAI,CAAC,QAAQ;KAC/C,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,aAAO,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,EAE3D,WACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAC,SAAS,EACd,QAAQ,EAAC,GAAG,0BACS,OAAO,2BACL,GAAG,IAAI,CAAC,EAAE,WAAW,IAAI,CAAC,sBAAsB,EAAE,sBACvD,GAAG,IAAI,CAAC,EAAE,gBAAgB,IAAI,CAAC,eAAe,EAAE,EAClE,SAAS,EAAE,IAAI,CAAC,aAAa,IAE5B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAC1B,iBACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;QACL,wBAAwB,EAAE,IAAI;QAC9B,YAAY,EAAE,IAAI,CAAC,sBAAsB,KAAK,KAAK;OACpD,EACD,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,MAAM,EAAE,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,mBAClB,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,GAAG,MAAM,GAAG,OAAO,EAC3D,EAAE,EAAE,GAAG,IAAI,CAAC,EAAE,WAAW,KAAK,EAAE,EAChC,YAAY,EAAC,IAAI,EACjB,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,GACrC,CACd,CAAC,CACE,EAEN,EAAC,oBAAoB,IACnB,WAAW,EAAC,kBAAkB,EAC9B,EAAE,EAAE,GAAG,IAAI,CAAC,EAAE,cAAc,EAC5B,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,mBAAmB,EAAE,mBAAmB,EACxC,mBAAmB,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,mBAAmB,GACnE,EAEF,qBACE,KAAK,EAAC,4BAA4B,EAClC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,YAAY,EAAE,IAAI,CAAC,oBAAoB,GACxB,CACb,CACD,EACP;GACH;;;;;;;;;;;","names":[],"sources":["./src/components/stzh-chip-select/stzh-chip-select.scss?tag=stzh-chip-select&encapsulation=scoped","./src/components/stzh-chip-select/stzh-chip-select.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-chip-select {\n\t@include input-description;\n\n  &__chips {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    margin: calc(#{space('small')} / -2) calc(#{space('xsmall')} / -2);\n    border-radius: $buttonBorderRadius;\n\n    @include mq($to: medium) {\n      display: none;\n    }\n  }\n\n  &__chip {\n    margin: calc(#{space('small')} / 2) calc(#{space('xsmall')} / 2);\n\n    &.is-focused,\n    &.is-focused[active]:not([active=false]) {\n      --border-color: #{$colorPrimaryHover};\n    }\n\n    &.is-focused[active]:not([active=false]) {\n      --background-color: #{$colorPrimaryHover};\n    }\n  }\n\n  &__dropdown {\n    @include mq($from: medium) {\n      display: none;\n    }\n  }\n\n  &__description-wrapper {\n    @include mq($to: medium) {\n      display: none;\n    }\n  }\n\n  &--has-error &__error,\n  &--has-description &__description {\n    margin-top: space('xsmall');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  Event,\n  EventEmitter,\n  State\n} from \"@stencil/core\";\n\nimport {\n  StzhChipSelectItem,\n  StzhChipSelectChangeEvent,\n  StzhDropdownChangeEvent\n} from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\n// import { hasSlot } from \"../../utils/utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet chipSelectCounter = 0;\n\n/**\n */\n@Component({\n  tag: \"stzh-chip-select\",\n  styleUrl: \"stzh-chip-select.scss\",\n  scoped: true\n})\nexport class StzhChipSelect {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** The list of chips */\n  @Prop() data: string | StzhChipSelectItem[] = [];\n  private _data: StzhChipSelectItem[] = [];\n  private _dataDropdown: any[] = [];\n\n  /** The name of the input element */\n  @Prop({ reflect: true }) name: string;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Value */\n  @Prop() value: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Whether all chips are disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  @State() activeFocusOptionIndex: number = 0;\n\n  @Element() element: HTMLStzhChipSelectElement;\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhChipSelectChangeEvent>;\n\n  @Watch(\"data\")\n  dataWatcher(newValue: StzhChipSelectItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._data = JSON.parse(newValue);\n    } else {\n      this._data = newValue;\n    }\n\n    this._dataDropdown = this._data.map((data) => {\n      return {\n        text: `${data.label} (${data.counter})`,\n        value: data.value\n      }\n    });\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  private id: string;\n\n  private handleChipClick = (data: StzhChipSelectItem, index: number) => {\n    this.value = data.value;\n    this.activeFocusOptionIndex = index;\n\n    this.stzhChange.emit({\n      component: \"stzh-chip-select\",\n      value: this.value\n    })\n  }\n\n  private handleDropdownChange = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    this.value = event.detail.value;\n    this.activeFocusOptionIndex = this._data.findIndex(data => {\n      return data.value === this.value;\n    });\n\n    this.stzhChange.emit({\n      component: \"stzh-chip-select\",\n      value: this.value\n    })\n  }\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    let newActiveIndex: number = null;\n    const activeOptionIndex = this.activeFocusOptionIndex;\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n\n      if (activeOptionIndex > 0) {\n        newActiveIndex = activeOptionIndex - 1;\n      }\n    } else if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n\n      if (activeOptionIndex < this._data.length - 1) {\n        newActiveIndex = activeOptionIndex + 1;\n      }\n    } else if (event.key === \" \" || event.key === \"Enter\") {\n      event.preventDefault();\n      this.value = this._data[activeOptionIndex].value;\n\n      this.stzhChange.emit({\n        component: \"stzh-chip-select\",\n        value: this.value\n      });\n    }\n\n    if (newActiveIndex !== null) {\n      this.activeFocusOptionIndex = newActiveIndex;\n    }\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-chip-select-${chipSelectCounter++}`;\n\n    this.dataWatcher(this.data);\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"chip-select\");\n    }\n  }\n\n  render() {\n    const descriptionUsed = !!this.description;\n    const descriptionLongUsed = !!this.descriptionLong;\n    const errorUsed = !!this.error;\n\n    const classes = {\n      \"stzh-chip-select\": true,\n      \"stzh-chip-select--has-description\": descriptionUsed,\n      \"stzh-chip-select--has-description-long\": descriptionLongUsed,\n      \"stzh-chip-select--has-error\": errorUsed,\n      \"stzh-chip-select--is-invalid\": this.invalid,\n      \"stzh-chip-select--is-disabled\": this.disabled,\n      \"stzh-chip-select--is-required\": this.required\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <input type=\"hidden\" name={this.name} value={this.value} />\n\n          <div\n            class=\"stzh-chip-select__chips\"\n            role=\"listbox\"\n            tabindex=\"0\"\n            aria-multiselectable=\"false\"\n            aria-activedescendant={`${this.id}-option-${this.activeFocusOptionIndex}`}\n            aria-describedby={`${this.id}-description ${this.a11yDescribedby}`}\n            onKeyDown={this.handleKeydown}\n          >\n            {this._data.map((data, index) => (\n              <stzh-chip\n                role=\"option\"\n                class={{\n                  \"stzh-chip-select__chip\": true,\n                  \"is-focused\": this.activeFocusOptionIndex === index\n                }}\n                label={data.label}\n                counter={data.counter}\n                icon={data.icon}\n                type={data.type}\n                variant={data.variant}\n                size={data.size}\n                disabled={this.disabled || data.disabled}\n                active={this.value === data.value}\n                aria-selected={this.value === data.value ? \"true\" : \"false\"}\n                id={`${this.id}-option-${index}`}\n                a11yTabindex=\"-1\"\n                onClick={() => this.handleChipClick(data, index)}\n              ></stzh-chip>\n            ))}\n          </div>\n\n          <StzhInputDescription\n            classPrefix=\"stzh-chip-select\"\n            id={`${this.id}-description`}\n            error={this._error}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            descriptionLongUsed={descriptionLongUsed}\n            moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n          />\n\n          <stzh-dropdown\n            class=\"stzh-chip-select__dropdown\"\n            disabled={this.disabled}\n            error={this._error}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            required={this.required}\n            invalid={this.invalid}\n            items={[this.value]}\n            label={this.label}\n            options={this._dataDropdown}\n            onStzhChange={this.handleDropdownChange}\n          ></stzh-dropdown>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}