@oiz/stzh-components 4.12.2 → 4.13.0-beta1

package/dist/components/{p-BaU8F8yT.js.map → p-DI3R5qMv.js.map}

@@ -1 +1 @@
-{"file":"p-BaU8F8yT.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-datepicker/stzh-datepicker.scss?tag=stzh-datepicker&encapsulation=scoped","src/components/stzh-datepicker/stzh-datepicker.tsx"],"sourcesContent":[":host {\n  --calendar-width: #{$calendarWidth};\n\n  width: 100%;\n  position: relative;\n\n  &[inline]:not([inline=\"false\"]) {\n    width: var(--calendar-width);\n  }\n}\n\n.stzh-datepicker {\n  &__popover {\n    --width: auto;\n  }\n\n  &__calendar {\n    margin-left: auto;\n    margin-right: auto;\n\n    &.is-inline {\n      width: 100%;\n      margin-left: 0px;\n      margin-right: 0px;\n    }\n  }\n\n  &__actions {\n    display: flex;\n    width: var(--calendar-width);\n    margin-left: auto;\n    margin-right: auto;\n\n    &.is-inline {\n      width: 100%;\n      margin-left: 0px;\n      margin-right: 0px;\n    }\n\n    &:not(:empty) {\n      padding-left: space(\"small\");\n      padding-right: space(\"small\");\n    }\n  }\n\n  /* Has action */\n\n  &--has-action &__popover {\n    --content-padding: 0 0 #{space(\"small\")} 0;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Method,\n  Watch,\n  Fragment,\n  State,\n  Listen,\n} from \"@stencil/core\";\n\nimport { StzhCalendarChangeEvent, StzhDatepickerChangeEvent } from \"../../index\";\n\nimport { StzhCalendarDateDisabledPredicate } from \"../../index\";\n\nimport { printISODate } from \"../../utils/date-utils\";\nimport { StzhLocaleAdapter } from \"../../index\";\n\nimport { StzhDatepickerLocalizedText } from \"./stzh-datepicker.localization\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot action - Slot for action below calendar (stzh-link element)\n */\n@Component({\n  tag: \"stzh-datepicker\",\n  styleUrl: \"stzh-datepicker.scss\",\n  scoped: true,\n})\nexport class StzhDatepicker {\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @Prop() calendarMin: string = \"\";\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @Prop() calendarMax: string = \"\";\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   */\n  @Prop() calendarIsDateDisabled: StzhCalendarDateDisabledPredicate = () => false;\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of the hidden date picker input. If a date can be parsed (via picker always), the value is in ISO format. Otherwise the value equals the manual input.  */\n  @Prop({ mutable: true }) value: string = \"\";\n  @State() calendarValue: string = \"\";\n  @State() inputValue: string = \"\";\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string = \"\";\n\n  /** Label for input field and popover */\n  @Prop() label: string = \"\";\n\n  /** Whether label is visually hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Show calendar inline */\n  @Prop({ reflect: true }) inline: boolean = false;\n\n  /**\n   * Date adapter visible date shown to the user, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  /**\n   * Date adapter for internal date passed to backend, for custom parsing/formatting.\n   * Can be `\"iso\"` (default, date in ISO format) / `\"legacy\"` (date in `d.m.Y` format)\n   * or `StzhLocaleAdapter` (must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.)\n   */\n  @Prop() internalDateAdapter: \"iso\" | \"legacy\" | StzhLocaleAdapter = \"iso\";\n  private _internalDateAdapter: StzhLocaleAdapter;\n\n  /**  Translation strings. */\n  @Prop() localization: StzhDatepickerLocalizedText;\n\n  @State() buttonLabel: string;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"localization\")\n  createDateFormatters() {\n    if (this.localization) {\n      this.dateFormatLong = new Intl.DateTimeFormat(this.localization.$locale, {\n        day: \"numeric\",\n        month: \"long\",\n        year: \"numeric\",\n      });\n    }\n  }\n\n  /** Update calendar and input when value prop has changed */\n  @Watch(\"value\")\n  valueWatcher(newValue: string) {\n    if (!this._internalDateAdapter) {\n      return;\n    }\n\n    const date = this._internalDateAdapter.parse(newValue, \"dateInput\");\n\n    this.calendarValue = printISODate(date);\n    this.inputValue = this.dateAdapter.format(date, \"dateInput\");\n\n    this.updateButtonAccessibleLabel();\n  }\n\n  @Watch(\"dateAdapter\")\n  dateAdapterWatcher(newValue: StzhLocaleAdapter) {\n    if (!newValue) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals,\n      );\n    }\n  }\n\n  @Watch(\"internalDateAdapter\")\n  internalDateAdapterWatcher(newValue: \"iso\" | \"legacy\" | StzhLocaleAdapter) {\n    if (newValue === \"iso\" || !newValue) {\n      this._internalDateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formatsIso,\n        this.localization.$globals,\n      );\n    } else if (newValue === \"legacy\") {\n      this._internalDateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formatsLegacy,\n        this.localization.$globals,\n      );\n    } else {\n      this._internalDateAdapter = newValue;\n    }\n  }\n\n  /** Set value by a JS Date object */\n  @Method()\n  async setDate(date: Date) {\n    this.value = this._internalDateAdapter.format(date, \"dateInput\");\n  }\n\n  /** Return internal popover element */\n  @Method()\n  async getPopover(): Promise<HTMLStzhPopoverElement> {\n    return this.popoverElement;\n  }\n\n  /** Datepicker change event */\n  @Event() stzhChange: EventEmitter<StzhDatepickerChangeEvent>;\n\n  @Element() element: HTMLStzhDatepickerElement;\n\n  /**\n   * To format dates exclusively for the benefit of screen readers.\n   *\n   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n   * better performance when formatting large number of dates. See:\n   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n   */\n  private dateFormatLong: Intl.DateTimeFormat;\n\n  private input: HTMLStzhInputElement;\n  private popoverElement: HTMLStzhPopoverElement;\n  // private calendar: HTMLStzhCalendarElement;\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n  };\n\n  private onRootFocus = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  private onInputChanged = () => {\n    const parsedDate = this.dateAdapter.parse(this.input.value, \"dateInput\");\n\n    if (this.input.value === \"\" || parsedDate) {\n      const formattedDate = this._internalDateAdapter.format(parsedDate, \"dateInput\");\n\n      if (this.value !== formattedDate) {\n        this.value = formattedDate;\n      } else {\n        this.valueWatcher(formattedDate);\n      }\n\n      this.stzhChange.emit({\n        component: \"stzh-datepicker\",\n        value: this.value,\n        valueAsDate: parsedDate,\n      });\n    }\n  };\n\n  private onCalendarChange = (event: CustomEvent<StzhCalendarChangeEvent>) => {\n    if (event.detail.component !== \"stzh-calendar\") {\n      // Do not emit stzhChange event from year/month dropdowns\n      event.stopPropagation();\n      return;\n    }\n\n    this.value = event.detail.valueAsDate && this._internalDateAdapter.format(event.detail.valueAsDate, \"dateInput\");\n\n    this.stzhChange.emit({\n      component: \"stzh-datepicker\",\n      value: this.value,\n      valueAsDate: event.detail.valueAsDate,\n    });\n\n    if (this.popoverElement) {\n      this.popoverElement.hide();\n    }\n  };\n\n  private updateButtonAccessibleLabel() {\n    if (!this.localization) {\n      return;\n    }\n\n    try {\n      const valueAsDate = this._internalDateAdapter.parse(this.value, \"dateInput\");\n      this.buttonLabel = `${this.label}, ${this.localization.buttonLabel}, ${this.localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)}`;\n    } catch (err) {\n      this.buttonLabel = `${this.label}, ${this.localization.buttonLabel}`;\n    }\n  }\n\n  connectedCallback() {\n    this.createDateFormatters();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datepicker\");\n    }\n\n    this.dateAdapterWatcher(this.dateAdapter);\n    this.internalDateAdapterWatcher(this.internalDateAdapter);\n    this.valueWatcher(this.value);\n    this.defaultValue = this.defaultValue || this.value;\n  }\n\n  render() {\n    const actionUsed = hasSlot(this.element, \"action\");\n\n    const classes = {\n      \"stzh-datepicker\": true,\n      \"stzh-datepicker--inline\": this.inline,\n      \"stzh-datepicker--has-action\": actionUsed,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <input type=\"hidden\" name={this.name} value={this.value} defaultValue={this.defaultValue} />\n\n          {this.inline && (\n            <Fragment>\n              <stzh-calendar\n                // ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n                value={this.calendarValue}\n                class=\"stzh-datepicker__calendar is-inline\"\n                isDateDisabled={this.calendarIsDateDisabled}\n                min={this.calendarMin}\n                max={this.calendarMax}\n                onStzhChange={this.onCalendarChange}\n              ></stzh-calendar>\n              <div class=\"stzh-datepicker__actions\">\n                <slot name=\"action\"></slot>\n              </div>\n            </Fragment>\n          )}\n\n          {!this.inline && (\n            <stzh-input\n              value={this.inputValue}\n              label={this.label}\n              labelHidden={this.labelHidden}\n              ref={el => (this.input = el as HTMLStzhInputElement)}\n              noAutocomplete\n              onStzhChanged={this.onInputChanged}\n              readonly={this.readonly}\n              disabled={this.disabled}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              error={this.error}\n              invalid={this.invalid}\n              required={this.required}\n              hideOptional={this.hideOptional}\n              size={this.size}\n            >\n              <stzh-popover\n                ref={el => (this.popoverElement = el as HTMLStzhPopoverElement)}\n                class=\"stzh-datepicker__popover\"\n                slot=\"button-right\"\n                placement=\"bottom-end\"\n                strategy=\"fixed\"\n                label={this.label}\n              >\n                <stzh-button\n                  icon-only\n                  icon=\"calendar\"\n                  size={this.size}\n                  disabled={this.disabled}\n                  a11yLabel={this.buttonLabel}\n                ></stzh-button>\n                <div slot=\"content\">\n                  <stzh-calendar\n                    // ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n                    value={this.calendarValue}\n                    class=\"stzh-datepicker__calendar is-popover\"\n                    isDateDisabled={this.calendarIsDateDisabled}\n                    min={this.calendarMin}\n                    max={this.calendarMax}\n                    onStzhChange={this.onCalendarChange}\n                  ></stzh-calendar>\n                  <div class=\"stzh-datepicker__actions\">\n                    <slot name=\"action\"></slot>\n                  </div>\n                </div>\n              </stzh-popover>\n            </stzh-input>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DI3R5qMv.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-datepicker/stzh-datepicker.scss?tag=stzh-datepicker&encapsulation=scoped","src/components/stzh-datepicker/stzh-datepicker.tsx"],"sourcesContent":[":host {\n  --calendar-width: #{$calendarWidth};\n\n  width: 100%;\n  position: relative;\n\n  &[inline]:not([inline=\"false\"]) {\n    width: var(--calendar-width);\n  }\n}\n\n.stzh-datepicker {\n  &__popover {\n    --width: auto;\n  }\n\n  &__calendar {\n    margin-left: auto;\n    margin-right: auto;\n\n    &.is-inline {\n      width: 100%;\n      margin-left: 0px;\n      margin-right: 0px;\n    }\n  }\n\n  &__actions {\n    display: flex;\n    width: var(--calendar-width);\n    margin-left: auto;\n    margin-right: auto;\n\n    &.is-inline {\n      width: 100%;\n      margin-left: 0px;\n      margin-right: 0px;\n    }\n\n    &:not(:empty) {\n      padding-left: space(\"small\");\n      padding-right: space(\"small\");\n    }\n  }\n\n  /* Has action */\n\n  &--has-action &__popover {\n    --content-padding: 0 0 #{space(\"small\")} 0;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Method,\n  Watch,\n  Fragment,\n  State,\n  Listen,\n} from \"@stencil/core\";\n\nimport { StzhCalendarChangeEvent, StzhDatepickerChangeEvent } from \"../../index\";\n\nimport { StzhCalendarDateDisabledPredicate } from \"../../index\";\n\nimport { printISODate } from \"../../utils/date-utils\";\nimport { StzhLocaleAdapter } from \"../../index\";\n\nimport { StzhDatepickerLocalizedText } from \"./stzh-datepicker.localization\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot action - Slot for action below calendar (stzh-link element)\n */\n@Component({\n  tag: \"stzh-datepicker\",\n  styleUrl: \"stzh-datepicker.scss\",\n  scoped: true,\n})\nexport class StzhDatepicker {\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @Prop() calendarMin: string = \"\";\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @Prop() calendarMax: string = \"\";\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   */\n  @Prop() calendarIsDateDisabled: StzhCalendarDateDisabledPredicate = () => false;\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of the hidden date picker input. If a date can be parsed (via picker always), the value is in ISO format. Otherwise the value equals the manual input.  */\n  @Prop({ mutable: true }) value: string = \"\";\n  @State() calendarValue: string = \"\";\n  @State() inputValue: string = \"\";\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string = \"\";\n\n  /** Label for input field and popover */\n  @Prop() label: string = \"\";\n\n  /** Whether label is visually hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Show calendar inline */\n  @Prop({ reflect: true }) inline: boolean = false;\n\n  /**\n   * Date adapter visible date shown to the user, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  /**\n   * Date adapter for internal date passed to backend, for custom parsing/formatting.\n   * Can be `\"iso\"` (default, date in ISO format) / `\"legacy\"` (date in `d.m.Y` format)\n   * or `StzhLocaleAdapter` (must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.)\n   */\n  @Prop() internalDateAdapter: \"iso\" | \"legacy\" | StzhLocaleAdapter = \"iso\";\n  private _internalDateAdapter: StzhLocaleAdapter;\n\n  /**  Translation strings. */\n  @Prop() localization: StzhDatepickerLocalizedText;\n\n  @State() buttonLabel: string;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"localization\")\n  createDateFormatters() {\n    if (this.localization) {\n      this.dateFormatLong = new Intl.DateTimeFormat(this.localization.$locale, {\n        day: \"numeric\",\n        month: \"long\",\n        year: \"numeric\",\n      });\n    }\n  }\n\n  /** Update calendar and input when value prop has changed */\n  @Watch(\"value\")\n  valueWatcher(newValue: string) {\n    if (!this._internalDateAdapter) {\n      return;\n    }\n\n    const date = this._internalDateAdapter.parse(newValue, \"dateInput\");\n\n    this.calendarValue = printISODate(date);\n    this.inputValue = this.dateAdapter.format(date, \"dateInput\");\n\n    this.updateButtonAccessibleLabel();\n  }\n\n  @Watch(\"dateAdapter\")\n  dateAdapterWatcher(newValue: StzhLocaleAdapter) {\n    if (!newValue) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals,\n      );\n    }\n  }\n\n  @Watch(\"internalDateAdapter\")\n  internalDateAdapterWatcher(newValue: \"iso\" | \"legacy\" | StzhLocaleAdapter) {\n    if (newValue === \"iso\" || !newValue) {\n      this._internalDateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formatsIso,\n        this.localization.$globals,\n      );\n    } else if (newValue === \"legacy\") {\n      this._internalDateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formatsLegacy,\n        this.localization.$globals,\n      );\n    } else {\n      this._internalDateAdapter = newValue;\n    }\n  }\n\n  /** Set value by a JS Date object */\n  @Method()\n  async setDate(date: Date) {\n    this.value = this._internalDateAdapter.format(date, \"dateInput\");\n  }\n\n  /** Return internal popover element */\n  @Method()\n  async getPopover(): Promise<HTMLStzhPopoverElement> {\n    return this.popoverElement;\n  }\n\n  /** Datepicker change event */\n  @Event() stzhChange: EventEmitter<StzhDatepickerChangeEvent>;\n\n  @Element() element: HTMLStzhDatepickerElement;\n\n  /**\n   * To format dates exclusively for the benefit of screen readers.\n   *\n   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n   * better performance when formatting large number of dates. See:\n   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n   */\n  private dateFormatLong: Intl.DateTimeFormat;\n\n  private input: HTMLStzhInputElement;\n  private popoverElement: HTMLStzhPopoverElement;\n  // private calendar: HTMLStzhCalendarElement;\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n  };\n\n  private onRootFocus = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  private onInputChanged = () => {\n    const parsedDate = this.dateAdapter.parse(this.input.value, \"dateInput\");\n\n    if (this.input.value === \"\" || parsedDate) {\n      const formattedDate = this._internalDateAdapter.format(parsedDate, \"dateInput\");\n\n      if (this.value !== formattedDate) {\n        this.value = formattedDate;\n      } else {\n        this.valueWatcher(formattedDate);\n      }\n\n      this.stzhChange.emit({\n        component: \"stzh-datepicker\",\n        value: this.value,\n        valueAsDate: parsedDate,\n      });\n    }\n  };\n\n  private onCalendarChange = (event: CustomEvent<StzhCalendarChangeEvent>) => {\n    if (event.detail.component !== \"stzh-calendar\") {\n      // Do not emit stzhChange event from year/month dropdowns\n      event.stopPropagation();\n      return;\n    }\n\n    this.value = event.detail.valueAsDate && this._internalDateAdapter.format(event.detail.valueAsDate, \"dateInput\");\n\n    this.stzhChange.emit({\n      component: \"stzh-datepicker\",\n      value: this.value,\n      valueAsDate: event.detail.valueAsDate,\n    });\n\n    if (this.popoverElement) {\n      this.popoverElement.hide();\n    }\n  };\n\n  private updateButtonAccessibleLabel() {\n    if (!this.localization) {\n      return;\n    }\n\n    try {\n      const valueAsDate = this._internalDateAdapter.parse(this.value, \"dateInput\");\n      this.buttonLabel = `${this.label}, ${this.localization.buttonLabel}, ${this.localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)}`;\n    } catch (err) {\n      this.buttonLabel = `${this.label}, ${this.localization.buttonLabel}`;\n    }\n  }\n\n  connectedCallback() {\n    this.createDateFormatters();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datepicker\");\n    }\n\n    this.dateAdapterWatcher(this.dateAdapter);\n    this.internalDateAdapterWatcher(this.internalDateAdapter);\n    this.valueWatcher(this.value);\n    this.defaultValue = this.defaultValue || this.value;\n  }\n\n  render() {\n    const actionUsed = hasSlot(this.element, \"action\");\n\n    const classes = {\n      \"stzh-datepicker\": true,\n      \"stzh-datepicker--inline\": this.inline,\n      \"stzh-datepicker--has-action\": actionUsed,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <input type=\"hidden\" name={this.name} value={this.value} defaultValue={this.defaultValue} />\n\n          {this.inline && (\n            <Fragment>\n              <stzh-calendar\n                // ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n                value={this.calendarValue}\n                class=\"stzh-datepicker__calendar is-inline\"\n                isDateDisabled={this.calendarIsDateDisabled}\n                min={this.calendarMin}\n                max={this.calendarMax}\n                onStzhChange={this.onCalendarChange}\n              ></stzh-calendar>\n              <div class=\"stzh-datepicker__actions\">\n                <slot name=\"action\"></slot>\n              </div>\n            </Fragment>\n          )}\n\n          {!this.inline && (\n            <stzh-input\n              value={this.inputValue}\n              label={this.label}\n              labelHidden={this.labelHidden}\n              ref={el => (this.input = el as HTMLStzhInputElement)}\n              noAutocomplete\n              onStzhChanged={this.onInputChanged}\n              readonly={this.readonly}\n              disabled={this.disabled}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              error={this.error}\n              invalid={this.invalid}\n              required={this.required}\n              hideOptional={this.hideOptional}\n              size={this.size}\n            >\n              <stzh-popover\n                ref={el => (this.popoverElement = el as HTMLStzhPopoverElement)}\n                class=\"stzh-datepicker__popover\"\n                slot=\"button-right\"\n                placement=\"bottom-end\"\n                strategy=\"fixed\"\n                label={this.label}\n              >\n                <stzh-button\n                  icon-only\n                  icon=\"calendar\"\n                  size={this.size}\n                  disabled={this.disabled}\n                  a11yLabel={this.buttonLabel}\n                ></stzh-button>\n                <div slot=\"content\">\n                  <stzh-calendar\n                    // ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n                    value={this.calendarValue}\n                    class=\"stzh-datepicker__calendar is-popover\"\n                    isDateDisabled={this.calendarIsDateDisabled}\n                    min={this.calendarMin}\n                    max={this.calendarMax}\n                    onStzhChange={this.onCalendarChange}\n                  ></stzh-calendar>\n                  <div class=\"stzh-datepicker__actions\">\n                    <slot name=\"action\"></slot>\n                  </div>\n                </div>\n              </stzh-popover>\n            </stzh-input>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-AIPoMvau.js → p-DK163sow.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-BBg6OWDc.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-DqjRJcEM.js';
 
 const stzhRatioCss = () => `:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--background-color:var(--stzh-ratio-background-color);--ratio:16 /
     9;--max-height:inherit;--overflow:inherit}:host ::slotted(*){position:absolute;width:100%;height:100%;inset:0;object-fit:cover}:host ::slotted(.stzh-card-searchresult__image-placeholder){display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--placeholder-image-color)}:host([fit=contain]) ::slotted(*){object-fit:contain}:host([portrait]:not([portrait=false])){--ratio:9 /
@@ -30,7 +30,7 @@ const StzhRatio = /*@__PURE__*/ proxyCustomElement(class StzhRatio extends H {
         const classes = {
             "stzh-ratio": true,
         };
-        return (h(Host, { key: 'f0370e4bb53568bb83ec04c90655f236b632fd12' }, h("div", { key: '5a5f4b85b92674cda20685c62aa33578977f19ac', class: classes }, h("slot", { key: '423ad2c60178a174a2f154672c92c9ed652c9b37', name: "image" }), h("slot", { key: '7ee39b1115548d630f6c20a06557ebf8587325a2' }))));
+        return (h(Host, { key: 'f0c67239e76dd8eefe54d6fb4ca4ffc36de0e549' }, h("div", { key: '3a783be1629632126fdb694e8da2bbcb3e1df4cf', class: classes }, h("slot", { key: 'b72625e73a1cbf33626d5bb86a59df6037c26bef', name: "image" }), h("slot", { key: '046c5cab09d0d317597a8a3cf48bb4a055f26714' }))));
     }
     get element() { return this; }
     static get style() { return stzhRatioCss(); }
@@ -58,6 +58,6 @@ function defineCustomElement() {
 }
 
 export { StzhRatio as S, defineCustomElement as d };
-//# sourceMappingURL=p-AIPoMvau.js.map
+//# sourceMappingURL=p-DK163sow.js.map
 
-//# sourceMappingURL=p-AIPoMvau.js.map
+//# sourceMappingURL=p-DK163sow.js.map

package/dist/components/{p-AIPoMvau.js.map → p-DK163sow.js.map}

@@ -1 +1 @@
-{"file":"p-AIPoMvau.js","mappings":";;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC;AAC5B;AACA,0pMAA0pM,CAAC;;MCU9oM,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAO2B,QAAA,IAAK,CAAA,KAAA,GAAiB,MAAM;;AAE5B,QAAA,IAAU,CAAA,UAAA,GAA6B,SAAS;;AAEhD,QAAA,IAAW,CAAA,WAAA,GAA6B,SAAS;;AAEjD,QAAA,IAAU,CAAA,UAAA,GAA6B,SAAS;;AAEhD,QAAA,IAAU,CAAA,UAAA,GAA6B,SAAS;;AAGhD,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAGzB,QAAA,IAAG,CAAA,GAAA,GAAwB,OAAO;AAkB5D;IAdC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,YAAY,EAAE,IAAI;SACnB;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,EAC1B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-ratio/stzh-ratio.scss?tag=stzh-ratio&encapsulation=shadow","src/components/stzh-ratio/stzh-ratio.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\n\n/**\n * @prop --ratio: Ratio (e.g. 16 / 9)\n * @prop --background-color: Background color of ratio area\n * @prop --max-height: Max height of the ratio, useful when viewport is huge\n * @prop --overflow: In combination with max height you might wanna hide overflow\n *\n * @prop --stzh-ratio-background-color: **Global**: Background color of ratios\n */\n\n:host {\n  --background-color: #{$ratioBackgroundColor};\n  --ratio: #{list.nth(map.get($ratios, $ratioDefault), 1)} /\n    #{list.nth(map.get($ratios, $ratioDefault), 2)};\n  --max-height: inherit;\n  --overflow: inherit;\n\n  ::slotted(*) {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    inset: 0;\n    object-fit: cover;\n  }\n\n  ::slotted(.stzh-card-searchresult__image-placeholder) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    color: var(--placeholder-image-color);\n  }\n}\n\n:host([fit=\"contain\"]) ::slotted(*) {\n  object-fit: contain;\n}\n\n/* Ratio variants */\n\n:host([portrait]:not([portrait=\"false\"])) {\n  --ratio: #{list.nth(map.get($ratios, $ratioDefault), 2)} /\n    #{list.nth(map.get($ratios, $ratioDefault), 1)};\n}\n\n@mixin ratioProps($breakpoint: null) {\n  @each $ratio, $value in $ratios {\n    $firstNr: list.nth($value, 1);\n    $secondNr: list.nth($value, 2);\n\n    @if $breakpoint {\n      :host([ratio-#{$breakpoint}=\"#{$ratio}\"]) {\n        @include mq($from: $breakpoint) {\n          --ratio: #{$firstNr} / #{$secondNr};\n        }\n      }\n\n      :host(\n        [ratio-#{$breakpoint}=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])\n      ) {\n        @include mq($from: $breakpoint) {\n          --ratio: #{$secondNr} / #{$firstNr};\n        }\n      }\n    } @else {\n      :host([ratio=\"#{$ratio}\"]) {\n        --ratio: #{$firstNr} / #{$secondNr};\n      }\n\n      :host([ratio=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])) {\n        --ratio: #{$secondNr} / #{$firstNr};\n      }\n    }\n  }\n}\n\n@include ratioProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include ratioProps($breakpoint);\n}\n\n.stzh-ratio {\n  position: relative;\n  width: 100%;\n  aspect-ratio: var(--stzh-ratio, var(--ratio));\n  background: var(--background-color);\n  max-height: var(--max-height);\n  overflow: var(--overflow);\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for e.g. image or video\n */\n@Component({\n  tag: \"stzh-ratio\",\n  styleUrl: \"stzh-ratio.scss\",\n  shadow: true,\n})\nexport class StzhRatio {\n  /** Aspect ratio */\n  @Prop({ reflect: true }) ratio: Layout.Ratio = \"16:9\";\n  /** Aspect ratio above small breakpoint */\n  @Prop({ reflect: true }) ratioSmall: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above medium breakpoint */\n  @Prop({ reflect: true }) ratioMedium: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above large breakpoint */\n  @Prop({ reflect: true }) ratioLarge: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above ultra breakpoint */\n  @Prop({ reflect: true }) ratioUltra: Layout.Ratio | \"inherit\" = \"inherit\";\n\n  /** Whether aspect ratio is in portrait mode */\n  @Prop({ reflect: true }) portrait: boolean = false;\n\n  /** Fit mode */\n  @Prop({ reflect: true }) fit: \"cover\" | \"contain\" = \"cover\";\n\n  @Element() element: HTMLStzhRatioElement;\n\n  render() {\n    const classes = {\n      \"stzh-ratio\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot name=\"image\"></slot>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DK163sow.js","mappings":";;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC;AAC5B;AACA,0pMAA0pM,CAAC;;MCU9oM,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAO2B,QAAA,IAAK,CAAA,KAAA,GAAiB,MAAM;;AAE5B,QAAA,IAAU,CAAA,UAAA,GAA6B,SAAS;;AAEhD,QAAA,IAAW,CAAA,WAAA,GAA6B,SAAS;;AAEjD,QAAA,IAAU,CAAA,UAAA,GAA6B,SAAS;;AAEhD,QAAA,IAAU,CAAA,UAAA,GAA6B,SAAS;;AAGhD,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAGzB,QAAA,IAAG,CAAA,GAAA,GAAwB,OAAO;AAkB5D;IAdC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,YAAY,EAAE,IAAI;SACnB;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,EAC1B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-ratio/stzh-ratio.scss?tag=stzh-ratio&encapsulation=shadow","src/components/stzh-ratio/stzh-ratio.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\n\n/**\n * @prop --ratio: Ratio (e.g. 16 / 9)\n * @prop --background-color: Background color of ratio area\n * @prop --max-height: Max height of the ratio, useful when viewport is huge\n * @prop --overflow: In combination with max height you might wanna hide overflow\n *\n * @prop --stzh-ratio-background-color: **Global**: Background color of ratios\n */\n\n:host {\n  --background-color: #{$ratioBackgroundColor};\n  --ratio: #{list.nth(map.get($ratios, $ratioDefault), 1)} /\n    #{list.nth(map.get($ratios, $ratioDefault), 2)};\n  --max-height: inherit;\n  --overflow: inherit;\n\n  ::slotted(*) {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    inset: 0;\n    object-fit: cover;\n  }\n\n  ::slotted(.stzh-card-searchresult__image-placeholder) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    color: var(--placeholder-image-color);\n  }\n}\n\n:host([fit=\"contain\"]) ::slotted(*) {\n  object-fit: contain;\n}\n\n/* Ratio variants */\n\n:host([portrait]:not([portrait=\"false\"])) {\n  --ratio: #{list.nth(map.get($ratios, $ratioDefault), 2)} /\n    #{list.nth(map.get($ratios, $ratioDefault), 1)};\n}\n\n@mixin ratioProps($breakpoint: null) {\n  @each $ratio, $value in $ratios {\n    $firstNr: list.nth($value, 1);\n    $secondNr: list.nth($value, 2);\n\n    @if $breakpoint {\n      :host([ratio-#{$breakpoint}=\"#{$ratio}\"]) {\n        @include mq($from: $breakpoint) {\n          --ratio: #{$firstNr} / #{$secondNr};\n        }\n      }\n\n      :host(\n        [ratio-#{$breakpoint}=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])\n      ) {\n        @include mq($from: $breakpoint) {\n          --ratio: #{$secondNr} / #{$firstNr};\n        }\n      }\n    } @else {\n      :host([ratio=\"#{$ratio}\"]) {\n        --ratio: #{$firstNr} / #{$secondNr};\n      }\n\n      :host([ratio=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])) {\n        --ratio: #{$secondNr} / #{$firstNr};\n      }\n    }\n  }\n}\n\n@include ratioProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include ratioProps($breakpoint);\n}\n\n.stzh-ratio {\n  position: relative;\n  width: 100%;\n  aspect-ratio: var(--stzh-ratio, var(--ratio));\n  background: var(--background-color);\n  max-height: var(--max-height);\n  overflow: var(--overflow);\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for e.g. image or video\n */\n@Component({\n  tag: \"stzh-ratio\",\n  styleUrl: \"stzh-ratio.scss\",\n  shadow: true,\n})\nexport class StzhRatio {\n  /** Aspect ratio */\n  @Prop({ reflect: true }) ratio: Layout.Ratio = \"16:9\";\n  /** Aspect ratio above small breakpoint */\n  @Prop({ reflect: true }) ratioSmall: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above medium breakpoint */\n  @Prop({ reflect: true }) ratioMedium: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above large breakpoint */\n  @Prop({ reflect: true }) ratioLarge: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above ultra breakpoint */\n  @Prop({ reflect: true }) ratioUltra: Layout.Ratio | \"inherit\" = \"inherit\";\n\n  /** Whether aspect ratio is in portrait mode */\n  @Prop({ reflect: true }) portrait: boolean = false;\n\n  /** Fit mode */\n  @Prop({ reflect: true }) fit: \"cover\" | \"contain\" = \"cover\";\n\n  @Element() element: HTMLStzhRatioElement;\n\n  render() {\n    const classes = {\n      \"stzh-ratio\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot name=\"image\"></slot>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-DOnc5uKa.js → p-DYbJOAOh.js}

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-BBg6OWDc.js';
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-DqjRJcEM.js';
 import { h as hasSlot } from './p-DBHUqFOB.js';
-import { d as defineCustomElement$2 } from './p-DEfzwFSm.js';
-import { d as defineCustomElement$1 } from './p-CRo_30JG.js';
+import { d as defineCustomElement$2 } from './p-Dn7rMHvA.js';
+import { d as defineCustomElement$1 } from './p-mPSUVIkD.js';
 
 const stzhMenuItemCss = () => `.sc-stzh-menu-item-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-menu-item-h,[stzh-hidden].sc-stzh-menu-item-h{display:none}.sc-stzh-menu-item-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-menu-item-h *.sc-stzh-menu-item,.sc-stzh-menu-item-h *.sc-stzh-menu-item::before,.sc-stzh-menu-item-h *.sc-stzh-menu-item::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-menu-item-h .has-focus.sc-stzh-menu-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-menu-item-h .stzh-fylingfocus-focused.sc-stzh-menu-item{outline-style:none !important}.sc-stzh-menu-item-h .stzh-fylingfocus-focused.sc-stzh-menu-item::-moz-focus-inner{border:0 !important}.sc-stzh-menu-item-h{--height:var(--stzh-menu-item-height);--color:var(--stzh-color-black);--background-color:transparent;--icon-size:var(--stzh-icon-size-small);--padding-top:var(--stzh-space-xsmall);--padding-bottom:var(--stzh-space-xsmall);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--hover-color:var(--stzh-popover-item-hover-color, var(--stzh-color-black));--hover-background-color:var(--stzh-popover-item-hover-bg, var(--stzh-color-grey20))}@media (forced-colors: active){.sc-stzh-menu-item-h:where(:has(button)){--color:ButtonText;--hover-color:Highlight;--hover-background-color:transparent}}[size=large].sc-stzh-menu-item-h{--icon-size:var(--stzh-icon-size);--height:var(--stzh-menu-large-item-height);--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge)}[variant=secondary].sc-stzh-menu-item-h{--color:var(--stzh-color-primary70);--hover-color:var(--stzh-color-primary70);--hover-background-color:var(--stzh-color-secondary30)}@media (forced-colors: active){[variant=secondary].sc-stzh-menu-item-h:where(:has(button)){--color:ButtonText;--hover-color:Highlight;--hover-background-color:transparent}}[active].sc-stzh-menu-item-h:not([active=false]){--color:var(--stzh-color-primary70);--hover-color:var(--stzh-color-primary70);--hover-background-color:var(--stzh-color-grey20)}@media (forced-colors: active){[active].sc-stzh-menu-item-h:not([active=false]){--color:SelectedItemText;--background-color:SelectedItem;--hover-color:SelectedItemText;--hover-background-color:SelectedItem}}[disabled].sc-stzh-menu-item-h:not([disabled=false]){--color:var(--stzh-color-grey70);--background-color:var(--stzh-color-grey10);--hover-color:var(--stzh-color-grey70);--hover-background-color:var(--stzh-color-grey10)}@media (forced-colors: active){[disabled].sc-stzh-menu-item-h:not([disabled=false]){--color:GrayText;--background-color:Gray;--hover-color:GrayText;--hover-background-color:Gray}}.stzh-menu-item.sc-stzh-menu-item{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);font-family:inherit;display:flex;gap:var(--stzh-space-small);align-items:center;justify-content:stretch;appearance:none;-webkit-text-decoration-line:none;text-decoration-line:none;border:none;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);color:var(--color);background-color:var(--background-color);width:100%;height:var(--height);line-height:var(--height);transition-duration:var(--stzh-base-transition-animation-speed);transition-property:color, background-color, border-color;cursor:pointer}@media (forced-colors: active){.stzh-menu-item.sc-stzh-menu-item{transition:none}}.stzh-menu-item.sc-stzh-menu-item:hover{color:var(--hover-color);background-color:var(--hover-background-color)}.stzh-menu-item__icon-wrapper.sc-stzh-menu-item{--stzh-icon-size:var(--icon-size);position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:1em}.stzh-menu-item__badge.sc-stzh-menu-item{position:absolute;z-index:1;top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-menu-item__text-wrapper.sc-stzh-menu-item{display:flex;gap:var(--stzh-space-xsmall)}.stzh-menu-item__counter.sc-stzh-menu-item{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-menu-item__text.sc-stzh-menu-item{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (forced-colors: active){.stzh-menu-item__text.sc-stzh-menu-item{forced-color-adjust:preserve-parent-color}}.stzh-menu-item--size-large.sc-stzh-menu-item{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);gap:var(--stzh-space-medium)}.stzh-menu-item--is-disabled.sc-stzh-menu-item{cursor:not-allowed}`;
 
@@ -96,7 +96,7 @@ const StzhMenuItem = /*@__PURE__*/ proxyCustomElement(class StzhMenuItem extends
             [`stzh-menu-item--size-${this.size}`]: !!this.size,
             [`stzh-menu-item--${this.variant}`]: !!this.variant,
         };
-        return (h(Host, { key: 'ebbfc5d801e36a9c99bc95dba332ab5703e270d7', role: "menuitem", tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ? (h("a", { ref: el => (this.menuItem = el), href: this.disabled ? null : this.href, target: this.target, class: classes, "aria-label": this.a11yLabel || null, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))) : (h("button", { ref: el => (this.menuItem = el), class: classes, type: "button", disabled: this.disabled, "aria-label": this.a11yLabel || null, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed)))));
+        return (h(Host, { key: '5b75caecdf88ceef333409eb0699b461d37daf2e', role: "menuitem", tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ? (h("a", { ref: el => (this.menuItem = el), href: this.disabled ? null : this.href, target: this.target, class: classes, "aria-label": this.a11yLabel || null, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))) : (h("button", { ref: el => (this.menuItem = el), class: classes, type: "button", disabled: this.disabled, "aria-label": this.a11yLabel || null, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed)))));
     }
     get element() { return this; }
     static get style() { return stzhMenuItemCss(); }
@@ -141,6 +141,6 @@ function defineCustomElement() {
 }
 
 export { StzhMenuItem as S, defineCustomElement as d };
-//# sourceMappingURL=p-DOnc5uKa.js.map
+//# sourceMappingURL=p-DYbJOAOh.js.map
 
-//# sourceMappingURL=p-DOnc5uKa.js.map
+//# sourceMappingURL=p-DYbJOAOh.js.map

package/dist/components/{p-DOnc5uKa.js.map → p-DYbJOAOh.js.map}

@@ -1 +1 @@
-{"file":"p-DOnc5uKa.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-menu-item/stzh-menu-item.scss?tag=stzh-menu-item&encapsulation=scoped","src/components/stzh-menu-item/stzh-menu-item.tsx"],"sourcesContent":["/**\n * @prop --height: Height of item\n * @prop --icon-size: Size of icon next to item\n * @prop --color: Color of item\n * @prop --background-color: Background color of item\n * @prop --hover-color: Hover color of item\n * @prop --hover-background-color: Hover background color of item\n *\n * @prop --stzh-menu-item-height: **Global**: Height of items\n */\n\n:host {\n  --height: var(--stzh-menu-item-height);\n  --color: #{$colorBlack};\n  --background-color: transparent;\n  --icon-size: #{iconSize(\"small\")};\n  --padding-top: #{space(\"xsmall\")};\n  --padding-bottom: #{space(\"xsmall\")};\n  --padding-left: #{space(\"large\")};\n  --padding-right: #{space(\"large\")};\n\n  --hover-color: var(--stzh-popover-item-hover-color, #{$colorBlack});\n  --hover-background-color: var(--stzh-popover-item-hover-bg, #{$colorGrey20});\n\n  @media (forced-colors: active) {\n    &:where(:has(button)) {\n      --color: ButtonText;\n      --hover-color: Highlight;\n      --hover-background-color: transparent;\n    }\n  }\n\n  &[size=\"large\"] {\n    --icon-size: #{iconSize()};\n    --height: var(--stzh-menu-large-item-height);\n    --padding-left: #{space(\"xlarge\")};\n    --padding-right: #{space(\"xlarge\")};\n  }\n\n  &[variant=\"secondary\"] {\n    --color: #{$colorPrimary70};\n\n    --hover-color: #{$colorPrimary70};\n    --hover-background-color: #{$colorSecondary30};\n\n    @media (forced-colors: active) {\n      &:where(:has(button)) {\n        --color: ButtonText;\n        --hover-color: Highlight;\n        --hover-background-color: transparent;\n      }\n    }\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: #{$colorPrimary70};\n    --hover-color: #{$colorPrimary70};\n    --hover-background-color: #{$colorGrey20};\n\n    @media (forced-colors: active) {\n      --color: SelectedItemText;\n      --background-color: SelectedItem;\n      --hover-color: SelectedItemText;\n      --hover-background-color: SelectedItem;\n    }\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorGrey70};\n    --background-color: #{$colorGrey10};\n    --hover-color: #{$colorGrey70};\n    --hover-background-color: #{$colorGrey10};\n\n    @media (forced-colors: active) {\n      --color: GrayText;\n      --background-color: Gray;\n      --hover-color: GrayText;\n      --hover-background-color: Gray;\n    }\n  }\n}\n\n.stzh-menu-item {\n  @include fontSize(\"micro\");\n  font-family: inherit;\n  display: flex;\n  gap: space(\"small\");\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  text-decoration-line: none;\n  border: none;\n  padding-top: var(--padding-top);\n  padding-bottom: var(--padding-bottom);\n  padding-left: var(--padding-left);\n  padding-right: var(--padding-right);\n  color: var(--color);\n  background-color: var(--background-color);\n  width: 100%;\n  height: var(--height);\n  line-height: var(--height);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  cursor: pointer;\n\n  @media (forced-colors: active) {\n    transition: none;\n  }\n\n  &:hover {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: 1em;\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: calc(#{space(\"xsmall\")} * -1);\n    right: calc(#{space(\"xsmall\")} * -1);\n  }\n\n  &__text-wrapper {\n    display: flex;\n    gap: space(\"xsmall\");\n  }\n\n  &__counter {\n    @include font;\n  }\n\n  &__text {\n    @include truncate;\n\n    @media (forced-colors: active) {\n      forced-color-adjust: preserve-parent-color;\n    }\n  }\n\n  /* Large variant */\n\n  &--size-large {\n    @include fontSize(\"milli\");\n    gap: space(\"medium\");\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Host, h, Prop, Element, Fragment, Event, EventEmitter } from \"@stencil/core\";\n\nimport {\n  StzhMenuItemFocusEvent,\n  StzhMenuItemBlurEvent,\n  StzhMenuItemClickEvent,\n  StzhBadgeType,\n  StzhMenuSize,\n  StzhMenuVariant,\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for any content\n * @slot icon - Slot for `stzh-icon` element\n */\n@Component({\n  tag: \"stzh-menu-item\",\n  styleUrl: \"stzh-menu-item.scss\",\n  scoped: true,\n})\nexport class StzhMenuItem {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhMenuVariant = \"default\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: StzhMenuSize = \"default\";\n\n  /** Counter */\n  @Prop() counter: number;\n\n  /** Badge (only displayed if `icon` property or icon slot is used) */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Whether the button is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether the button is active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** `href` if the button should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhMenuItemElement;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhMenuItemFocusEvent>;\n\n  /** Blur event */\n  @Event() stzhBlur: EventEmitter<StzhMenuItemBlurEvent>;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhMenuItemClickEvent>;\n\n  private menuItem: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLDivElement;\n\n  private focusedByInput: boolean = false;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.menuItem.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.menuItem?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        {iconUsed && (\n          <div class=\"stzh-menu-item__icon-wrapper\">\n            {this.icon ? (\n              <stzh-icon class=\"stzh-menu-item__icon\" name={this.icon}></stzh-icon>\n            ) : (\n              <slot name=\"icon\"></slot>\n            )}\n            {(this.badge || this.badgeEmpty) && (\n              <stzh-badge class=\"stzh-menu-item__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n            )}\n          </div>\n        )}\n        <div class=\"stzh-menu-item__text-wrapper\">\n          <div ref={el => (this.text = el as HTMLDivElement)} class=\"stzh-menu-item__text\">\n            {this.label ? this.label : <slot></slot>}\n          </div>\n          {this.counter !== undefined && this.counter > 0 && (\n            <div class=\"stzh-menu-item__counter\">({this.counter})</div>\n          )}\n        </div>\n      </Fragment>\n    );\n  }\n\n  render() {\n    const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-menu-item\": true,\n      \"stzh-menu-item--has-icon\": iconUsed,\n      \"stzh-menu-item--has-badge\": !!this.badge,\n      \"stzh-menu-item--is-disabled\": this.disabled,\n      \"stzh-menu-item--is-active\": this.active,\n      [`stzh-menu-item--size-${this.size}`]: !!this.size,\n      [`stzh-menu-item--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host role=\"menuitem\" tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ? (\n          <a\n            ref={el => (this.menuItem = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n        ) : (\n          <button\n            ref={el => (this.menuItem = el as HTMLButtonElement)}\n            class={classes}\n            type=\"button\"\n            disabled={this.disabled}\n            aria-label={this.a11yLabel || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DYbJOAOh.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-menu-item/stzh-menu-item.scss?tag=stzh-menu-item&encapsulation=scoped","src/components/stzh-menu-item/stzh-menu-item.tsx"],"sourcesContent":["/**\n * @prop --height: Height of item\n * @prop --icon-size: Size of icon next to item\n * @prop --color: Color of item\n * @prop --background-color: Background color of item\n * @prop --hover-color: Hover color of item\n * @prop --hover-background-color: Hover background color of item\n *\n * @prop --stzh-menu-item-height: **Global**: Height of items\n */\n\n:host {\n  --height: var(--stzh-menu-item-height);\n  --color: #{$colorBlack};\n  --background-color: transparent;\n  --icon-size: #{iconSize(\"small\")};\n  --padding-top: #{space(\"xsmall\")};\n  --padding-bottom: #{space(\"xsmall\")};\n  --padding-left: #{space(\"large\")};\n  --padding-right: #{space(\"large\")};\n\n  --hover-color: var(--stzh-popover-item-hover-color, #{$colorBlack});\n  --hover-background-color: var(--stzh-popover-item-hover-bg, #{$colorGrey20});\n\n  @media (forced-colors: active) {\n    &:where(:has(button)) {\n      --color: ButtonText;\n      --hover-color: Highlight;\n      --hover-background-color: transparent;\n    }\n  }\n\n  &[size=\"large\"] {\n    --icon-size: #{iconSize()};\n    --height: var(--stzh-menu-large-item-height);\n    --padding-left: #{space(\"xlarge\")};\n    --padding-right: #{space(\"xlarge\")};\n  }\n\n  &[variant=\"secondary\"] {\n    --color: #{$colorPrimary70};\n\n    --hover-color: #{$colorPrimary70};\n    --hover-background-color: #{$colorSecondary30};\n\n    @media (forced-colors: active) {\n      &:where(:has(button)) {\n        --color: ButtonText;\n        --hover-color: Highlight;\n        --hover-background-color: transparent;\n      }\n    }\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: #{$colorPrimary70};\n    --hover-color: #{$colorPrimary70};\n    --hover-background-color: #{$colorGrey20};\n\n    @media (forced-colors: active) {\n      --color: SelectedItemText;\n      --background-color: SelectedItem;\n      --hover-color: SelectedItemText;\n      --hover-background-color: SelectedItem;\n    }\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorGrey70};\n    --background-color: #{$colorGrey10};\n    --hover-color: #{$colorGrey70};\n    --hover-background-color: #{$colorGrey10};\n\n    @media (forced-colors: active) {\n      --color: GrayText;\n      --background-color: Gray;\n      --hover-color: GrayText;\n      --hover-background-color: Gray;\n    }\n  }\n}\n\n.stzh-menu-item {\n  @include fontSize(\"micro\");\n  font-family: inherit;\n  display: flex;\n  gap: space(\"small\");\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  text-decoration-line: none;\n  border: none;\n  padding-top: var(--padding-top);\n  padding-bottom: var(--padding-bottom);\n  padding-left: var(--padding-left);\n  padding-right: var(--padding-right);\n  color: var(--color);\n  background-color: var(--background-color);\n  width: 100%;\n  height: var(--height);\n  line-height: var(--height);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  cursor: pointer;\n\n  @media (forced-colors: active) {\n    transition: none;\n  }\n\n  &:hover {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: 1em;\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: calc(#{space(\"xsmall\")} * -1);\n    right: calc(#{space(\"xsmall\")} * -1);\n  }\n\n  &__text-wrapper {\n    display: flex;\n    gap: space(\"xsmall\");\n  }\n\n  &__counter {\n    @include font;\n  }\n\n  &__text {\n    @include truncate;\n\n    @media (forced-colors: active) {\n      forced-color-adjust: preserve-parent-color;\n    }\n  }\n\n  /* Large variant */\n\n  &--size-large {\n    @include fontSize(\"milli\");\n    gap: space(\"medium\");\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Host, h, Prop, Element, Fragment, Event, EventEmitter } from \"@stencil/core\";\n\nimport {\n  StzhMenuItemFocusEvent,\n  StzhMenuItemBlurEvent,\n  StzhMenuItemClickEvent,\n  StzhBadgeType,\n  StzhMenuSize,\n  StzhMenuVariant,\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for any content\n * @slot icon - Slot for `stzh-icon` element\n */\n@Component({\n  tag: \"stzh-menu-item\",\n  styleUrl: \"stzh-menu-item.scss\",\n  scoped: true,\n})\nexport class StzhMenuItem {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhMenuVariant = \"default\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: StzhMenuSize = \"default\";\n\n  /** Counter */\n  @Prop() counter: number;\n\n  /** Badge (only displayed if `icon` property or icon slot is used) */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Whether the button is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether the button is active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** `href` if the button should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhMenuItemElement;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhMenuItemFocusEvent>;\n\n  /** Blur event */\n  @Event() stzhBlur: EventEmitter<StzhMenuItemBlurEvent>;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhMenuItemClickEvent>;\n\n  private menuItem: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLDivElement;\n\n  private focusedByInput: boolean = false;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.menuItem.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.menuItem?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        {iconUsed && (\n          <div class=\"stzh-menu-item__icon-wrapper\">\n            {this.icon ? (\n              <stzh-icon class=\"stzh-menu-item__icon\" name={this.icon}></stzh-icon>\n            ) : (\n              <slot name=\"icon\"></slot>\n            )}\n            {(this.badge || this.badgeEmpty) && (\n              <stzh-badge class=\"stzh-menu-item__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n            )}\n          </div>\n        )}\n        <div class=\"stzh-menu-item__text-wrapper\">\n          <div ref={el => (this.text = el as HTMLDivElement)} class=\"stzh-menu-item__text\">\n            {this.label ? this.label : <slot></slot>}\n          </div>\n          {this.counter !== undefined && this.counter > 0 && (\n            <div class=\"stzh-menu-item__counter\">({this.counter})</div>\n          )}\n        </div>\n      </Fragment>\n    );\n  }\n\n  render() {\n    const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-menu-item\": true,\n      \"stzh-menu-item--has-icon\": iconUsed,\n      \"stzh-menu-item--has-badge\": !!this.badge,\n      \"stzh-menu-item--is-disabled\": this.disabled,\n      \"stzh-menu-item--is-active\": this.active,\n      [`stzh-menu-item--size-${this.size}`]: !!this.size,\n      [`stzh-menu-item--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host role=\"menuitem\" tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ? (\n          <a\n            ref={el => (this.menuItem = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n        ) : (\n          <button\n            ref={el => (this.menuItem = el as HTMLButtonElement)}\n            class={classes}\n            type=\"button\"\n            disabled={this.disabled}\n            aria-label={this.a11yLabel || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CUfKtr7R.js → p-D_9Bm_mQ.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-BBg6OWDc.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-DqjRJcEM.js';
 
 var Checkmark = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g clip-path="url(#a)"><path fill="currentColor" d="m10 15.172 9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs></svg>`;
 
@@ -16,7 +16,7 @@ const StzhListItem = /*@__PURE__*/ proxyCustomElement(class StzhListItem extends
         const classes = {
             "stzh-list-item": true,
         };
-        return (h(Host, { key: 'd02bdd8ef1fbc47649b3c2de0bee24c9dd84cbe7' }, h("div", { key: '30aa183a5e6ec9ac22701bc67723dbedd4cd10b2', class: classes, role: "listitem" }, h("div", { key: '724d71b78f5d49720fe31e17bd5d5225867df1ca', class: "stzh-list-item__checkmark-icon", innerHTML: Checkmark }), h("div", { key: '1decc4fe2bfd89e1eb6f030f15af4af4dd32ec66', class: "stzh-list-item__text" }, h("slot", { key: '2c6a43159a65e52bff21e51e6ab689ef8ea9d153' })))));
+        return (h(Host, { key: '2c79f84788f5018ff37f253303393bd8bfacbaa8' }, h("div", { key: '8a3e2c7c8b320a325edb00a5a3cb9b97328e8af0', class: classes, role: "listitem" }, h("div", { key: '532af0aadca647938e43a2d14bf2fc9d00be0061', class: "stzh-list-item__checkmark-icon", innerHTML: Checkmark }), h("div", { key: 'f15313752797391c81e860e189211fe8d48cd088', class: "stzh-list-item__text" }, h("slot", { key: 'a7baac8f56323fd34c343939cc1e821cf6a32a67' })))));
     }
     get element() { return this; }
     static get style() { return stzhListItemCss(); }
@@ -36,6 +36,6 @@ function defineCustomElement() {
 }
 
 export { StzhListItem as S, defineCustomElement as d };
-//# sourceMappingURL=p-CUfKtr7R.js.map
+//# sourceMappingURL=p-D_9Bm_mQ.js.map
 
-//# sourceMappingURL=p-CUfKtr7R.js.map
+//# sourceMappingURL=p-D_9Bm_mQ.js.map

package/dist/components/{p-CUfKtr7R.js.map → p-D_9Bm_mQ.js.map}

@@ -1 +1 @@
-{"file":"p-CUfKtr7R.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,qvCAAqvC,CAAC;;MCYxwC,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;;;IAGvB,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,gBAAgB,EAAE,IAAI;SACvB;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,UAAU,EAAA,EAClC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gCAAgC,EAAC,SAAS,EAAE,SAAS,EAAQ,CAAA,EAExE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-list-item/stzh-list-item.scss?tag=stzh-list-item&encapsulation=shadow","src/components/stzh-list-item/stzh-list-item.tsx"],"sourcesContent":[":host {\n  --icon-checklist-visibility: hidden;\n\n  &::before {\n    display: inline-block;\n    position: absolute;\n    left: 0;\n    top: 0;\n  }\n}\n\n.stzh-list-item {\n  &__checkmark-icon {\n    visibility: var(--icon-checklist-visibility);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    top: 1px;\n    left: 0;\n\n    svg {\n      width: 1.5em;\n      height: 1.5em;\n      display: block;\n    }\n  }\n}\n","import { Component, Host, h, Element } from \"@stencil/core\";\n\nimport Checkmark from \"./assets/checkmark.svg\";\n\n/**\n * @slot - Slot for text\n */\n@Component({\n  tag: \"stzh-list-item\",\n  styleUrl: \"stzh-list-item.scss\",\n  shadow: true,\n})\nexport class StzhListItem {\n  @Element() element: HTMLStzhListItemElement;\n\n  render() {\n    const classes = {\n      \"stzh-list-item\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes} role=\"listitem\">\n          <div class=\"stzh-list-item__checkmark-icon\" innerHTML={Checkmark}></div>\n\n          <div class=\"stzh-list-item__text\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-D_9Bm_mQ.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,qvCAAqvC,CAAC;;MCYxwC,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;;;IAGvB,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,gBAAgB,EAAE,IAAI;SACvB;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,UAAU,EAAA,EAClC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gCAAgC,EAAC,SAAS,EAAE,SAAS,EAAQ,CAAA,EAExE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-list-item/stzh-list-item.scss?tag=stzh-list-item&encapsulation=shadow","src/components/stzh-list-item/stzh-list-item.tsx"],"sourcesContent":[":host {\n  --icon-checklist-visibility: hidden;\n\n  &::before {\n    display: inline-block;\n    position: absolute;\n    left: 0;\n    top: 0;\n  }\n}\n\n.stzh-list-item {\n  &__checkmark-icon {\n    visibility: var(--icon-checklist-visibility);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    top: 1px;\n    left: 0;\n\n    svg {\n      width: 1.5em;\n      height: 1.5em;\n      display: block;\n    }\n  }\n}\n","import { Component, Host, h, Element } from \"@stencil/core\";\n\nimport Checkmark from \"./assets/checkmark.svg\";\n\n/**\n * @slot - Slot for text\n */\n@Component({\n  tag: \"stzh-list-item\",\n  styleUrl: \"stzh-list-item.scss\",\n  shadow: true,\n})\nexport class StzhListItem {\n  @Element() element: HTMLStzhListItemElement;\n\n  render() {\n    const classes = {\n      \"stzh-list-item\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes} role=\"listitem\">\n          <div class=\"stzh-list-item__checkmark-icon\" innerHTML={Checkmark}></div>\n\n          <div class=\"stzh-list-item__text\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-D4c33pwr.js → p-DgLT1h5X.js}

@@ -1,14 +1,14 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-BBg6OWDc.js';
-import { S as StzhInputDescription } from './p-BmG3hFM8.js';
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-DqjRJcEM.js';
+import { S as StzhInputDescription } from './p-CbIALTef.js';
 import { h as hasSlot } from './p-DBHUqFOB.js';
-import { d as defineCustomElement$8 } from './p-DEfzwFSm.js';
-import { d as defineCustomElement$7 } from './p-CPdCE2fo.js';
-import { d as defineCustomElement$6 } from './p-BiFb4c_S.js';
-import { d as defineCustomElement$5 } from './p-BTNpLREK.js';
-import { d as defineCustomElement$4 } from './p-CRo_30JG.js';
-import { d as defineCustomElement$3 } from './p-DrLVNdlm.js';
-import { d as defineCustomElement$2 } from './p-DT0ux3Yn.js';
-import { d as defineCustomElement$1 } from './p-4Vt8Vqot.js';
+import { d as defineCustomElement$8 } from './p-Dn7rMHvA.js';
+import { d as defineCustomElement$7 } from './p-BAn4Ipj9.js';
+import { d as defineCustomElement$6 } from './p-DvCfh0K2.js';
+import { d as defineCustomElement$5 } from './p-BDyLmXTF.js';
+import { d as defineCustomElement$4 } from './p-mPSUVIkD.js';
+import { d as defineCustomElement$3 } from './p-CxqE2nhG.js';
+import { d as defineCustomElement$2 } from './p-Bi0j3C9E.js';
+import { d as defineCustomElement$1 } from './p-CIG3atcV.js';
 
 const stzhChipselectCss = () => `.sc-stzh-chipselect-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-chipselect-h,[stzh-hidden].sc-stzh-chipselect-h{display:none}.sc-stzh-chipselect-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chipselect-h *.sc-stzh-chipselect,.sc-stzh-chipselect-h *.sc-stzh-chipselect::before,.sc-stzh-chipselect-h *.sc-stzh-chipselect::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-chipselect-h .has-focus.sc-stzh-chipselect{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-chipselect-h .stzh-fylingfocus-focused.sc-stzh-chipselect{outline-style:none !important}.sc-stzh-chipselect-h .stzh-fylingfocus-focused.sc-stzh-chipselect::-moz-focus-inner{border:0 !important}.sc-stzh-chipselect-h{width:100%}[disabled].sc-stzh-chipselect-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}[active].sc-stzh-chipselect-h:not([active=false]){--background-color:var(
     --stzh-chip-active-background-color,
@@ -269,12 +269,12 @@ const StzhChipselect = /*@__PURE__*/ proxyCustomElement(class StzhChipselect ext
             "stzh-chipselect--is-required": this.required,
             "stzh-chipselect--has-label-hidden": this.labelHidden,
         };
-        return (h(Host, { key: '6d2c378e763f9846d5bcef6fbdf00f24956046a5', "is-invalid": this.invalid || errorUsed }, h("div", { key: '8c6db8e943fa6c1d9728f895fea83f6e95dd30db', class: classes }, !this.useDropdownOnMobile &&
-            (this.multiple ? (h(Fragment, null, this._value.map(value => (h("input", { type: "hidden", name: this.name, value: value }))))) : (h("input", { type: "hidden", name: this.name, value: this.value }))), !this.useDropdownOnMobile && labelWrapperUsed && (h("div", { key: '939cf90d05cc4a7677287d41992366a9024a1258', class: "stzh-chipselect__label-wrapper" }, h("label", { key: '3e6d0006b9f8b6a5aa696969150aac1342ef6717', class: "stzh-chipselect__label", htmlFor: this.id }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: '8072a604dc9304930a2d8b88083a4c3d9ad1e625', class: "stzh-chipselect__marker" }, h("span", { key: 'd5fd00632be1a47cc07ca936133ca1d4d79fc6ab', class: "stzh-chipselect__marker-symbol", "aria-hidden": "true" }, this.required
+        return (h(Host, { key: '05ab7504d218a6292c49e110130200f0554cdd0a', "is-invalid": this.invalid || errorUsed }, h("div", { key: '9d1ca4121ccf5b0cca470b825a3013eb28678788', class: classes }, !this.useDropdownOnMobile &&
+            (this.multiple ? (h(Fragment, null, this._value.map(value => (h("input", { type: "hidden", name: this.name, value: value }))))) : (h("input", { type: "hidden", name: this.name, value: this.value }))), !this.useDropdownOnMobile && labelWrapperUsed && (h("div", { key: 'd8d8a5a86faf5ada89e69412de983bd4879b0c58', class: "stzh-chipselect__label-wrapper" }, h("label", { key: '25511e529d9bebfe0f2297f679716caca3bdc95b', class: "stzh-chipselect__label", htmlFor: this.id }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: '5225daf3a443d28a5da915fb262b288381763c49', class: "stzh-chipselect__marker" }, h("span", { key: 'd0da978f5e09c1f7fa94e02f890989d4b9cd69d9', class: "stzh-chipselect__marker-symbol", "aria-hidden": "true" }, this.required
             ? this.localization.$globals.requiredFieldMarker
-            : this.localization.$globals.optionalFieldMarker), h("span", { key: 'f501bb9f1e8c132f639ed72ca195eb1a669c167c', class: "stzh-chipselect__marker-text" }, this.required
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: 'c1bf469c695d35d21969ae80848c3135f46c32d4', class: "stzh-chipselect__marker-text" }, this.required
             ? this.localization.$globals.requiredFieldText
-            : this.localization.$globals.optionalFieldText)))), descriptionLongUsed && (h(StzhInputDescription, { key: '9ff27d167b8cbac6770de6c0bfbb9121a329c9ef', classPrefix: "stzh-chipselect", id: `${this.id}-description-long`, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel, showError: false, showDescriptionText: false })))), this._data.length > 0 && (h(Fragment, { key: '130d007cfa576382f900029823900bbc16f5b8b2' }, !this.useDropdownOnMobile ? (h(Fragment, null, h("div", { id: this.id, class: "stzh-chipselect__chips", role: "listbox", tabindex: "0", "aria-multiselectable": this.multiple ? "true" : "false", "aria-activedescendant": activeId, "aria-describedby": `${this.id}-description ${this.a11yDescribedby}`, onKeyDown: this.handleKeydown }, this._data.map((data, index) => (h("stzh-chip", { role: "option", class: {
+            : this.localization.$globals.optionalFieldText)))), descriptionLongUsed && (h(StzhInputDescription, { key: '37a97e0660c0a5da100332e96246ba8fb6a29a4d', classPrefix: "stzh-chipselect", id: `${this.id}-description-long`, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel, showError: false, showDescriptionText: false })))), this._data.length > 0 && (h(Fragment, { key: '5d1b7d2738ae981aba22b1c6d46a002598f16e4a' }, !this.useDropdownOnMobile ? (h(Fragment, null, h("div", { id: this.id, class: "stzh-chipselect__chips", role: "listbox", tabindex: "0", "aria-multiselectable": this.multiple ? "true" : "false", "aria-activedescendant": activeId, "aria-describedby": `${this.id}-description ${this.a11yDescribedby}`, onKeyDown: this.handleKeydown }, this._data.map((data, index) => (h("stzh-chip", { role: "option", class: {
                 "stzh-chipselect__chip": true,
                 "is-focused": this.activeFocusOptionIndex === index,
             }, label: data.label, counter: data.counter, icon: data.icon, variant: data.variant || "filter", inverted: data.inverted, size: data.size || "small", disabled: this.disabled || data.disabled, active: this._value.includes(data.value) ||
@@ -287,7 +287,7 @@ const StzhChipselect = /*@__PURE__*/ proxyCustomElement(class StzhChipselect ext
                     this.multiple &&
                     (this._value.length === 0 || (this._value.length === 1 && this._value[0] === "")))
                 ? "true"
-                : "false", id: `${this.id}-option-${index}`, a11yTabindex: "-1", onClick: () => this.handleChipClick(data, index) })))))) : (h("stzh-dropdown", { class: "stzh-chipselect__dropdown", name: this.name, multiple: this.multiple, disabled: this.disabled, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, required: this.required, invalid: this.invalid, items: this.multiple ? this._value : this._value.length > 0 ? [this._value[0]] : [], label: this.label, labelHidden: this.labelHidden, options: this._dataDropdown, hideOptional: this.hideOptional, onStzhChange: this.handleDropdownChange })))), !this.useDropdownOnMobile && (errorUsed || descriptionUsed) && (h(StzhInputDescription, { key: '74c035663687909bf314c14223de6b16893fd9f7', classPrefix: "stzh-chipselect", id: `${this.id}-description`, error: this._error, description: this.description, descriptionLongUsed: false })))));
+                : "false", id: `${this.id}-option-${index}`, a11yTabindex: "-1", onClick: () => this.handleChipClick(data, index) })))))) : (h("stzh-dropdown", { class: "stzh-chipselect__dropdown", name: this.name, multiple: this.multiple, disabled: this.disabled, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, required: this.required, invalid: this.invalid, items: this.multiple ? this._value : this._value.length > 0 ? [this._value[0]] : [], label: this.label, labelHidden: this.labelHidden, options: this._dataDropdown, hideOptional: this.hideOptional, onStzhChange: this.handleDropdownChange })))), !this.useDropdownOnMobile && (errorUsed || descriptionUsed) && (h(StzhInputDescription, { key: '4614585a3e7594fda4fc34e3d75961750e44e8e3', classPrefix: "stzh-chipselect", id: `${this.id}-description`, error: this._error, description: this.description, descriptionLongUsed: false })))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -377,6 +377,6 @@ function defineCustomElement() {
 }
 
 export { StzhChipselect as S, defineCustomElement as d };
-//# sourceMappingURL=p-D4c33pwr.js.map
+//# sourceMappingURL=p-DgLT1h5X.js.map
 
-//# sourceMappingURL=p-D4c33pwr.js.map
+//# sourceMappingURL=p-DgLT1h5X.js.map

package/dist/components/{p-D4c33pwr.js.map → p-DgLT1h5X.js.map}

@@ -1 +1 @@
-{"file":"p-D4c33pwr.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-chipselect/stzh-chipselect.scss?tag=stzh-chipselect&encapsulation=scoped","src/components/stzh-chipselect/stzh-chipselect.tsx"],"sourcesContent":[":host {\n  width: 100%;\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --background-color: var(\n      --stzh-chip-active-background-color,\n      #{$colorPrimary70}\n    );\n  }\n\n  &[active].is-focused {\n    --background-color: var(\n      --stzh-chip-active-background-color,\n      #{$colorPrimary70}\n    );\n  }\n}\n\n:host([dropdown-on-mobile]) .stzh-chipselect__dropdown {\n  display: block;\n  width: 100%;\n}\n\n.stzh-chipselect {\n  @include input-description;\n  width: 100%;\n\n  &__label-wrapper {\n    display: flex;\n    align-items: center;\n    gap: space(\"xsmall\");\n    margin-bottom: space(\"xsmall\");\n    width: 100%;\n    min-width: 0;\n    min-height: 22px;\n  }\n\n  &__label {\n    @include font(\"heavy\");\n    @include fontSize(\"micro\");\n    @include truncate;\n    color: $headingColor;\n    display: block;\n    min-width: 0;\n    flex: 0 1 auto;\n    max-width: 100%;\n    margin-bottom: 0;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__label-wrapper > &__description-wrapper {\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: center;\n    margin: 0;\n  }\n\n  &__label-wrapper &__error,\n  &__label-wrapper &__description-text {\n    display: none;\n  }\n\n  &__label-wrapper &__description,\n  &__label-wrapper &__description-long {\n    display: inline-flex;\n    align-items: center;\n    margin: 0;\n  }\n\n  &__label-wrapper &__description-long-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    line-height: 1;\n  }\n\n  &__label-wrapper stzh-popover &__description-long-icon {\n    --size: var(--stzh-icon-size-small);\n    display: block;\n    line-height: 0;\n    color: $colorPrimary70;\n  }\n\n  &__marker {\n    @include fontSize(\"nano\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  &__chips {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    border-radius: $buttonBorderRadius;\n    gap: space(\"medium\");\n\n    &:focus-within {\n      .is-focused[active] {\n        --background-color: #{$colorPrimary90};\n\n        @media (forced-colors: active) {\n          --background-color: Canvas;\n        }\n      }\n    }\n  }\n\n  &__chip {\n    &.is-focused:not([active]) {\n      --background-color: #{$colorSecondary40};\n\n      @media (forced-colors: active) {\n        --background-color: Highlight;\n      }\n    }\n  }\n\n  &__dropdown {\n    display: block;\n    width: 100%;\n    --popover-width: max-content;\n    --popover-min-width: 100%;\n    --popover-max-width: calc(100vw - 2rem);\n  }\n\n  &__description-wrapper {\n    margin-top: space(\"xsmall\");\n  }\n\n  /* Hidden label */\n\n  &--has-label-hidden &__label {\n    @include visuallyhidden;\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__chips,\n  &--is-disabled &__label {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Host, h, Element, Prop, Watch, Event, EventEmitter, State, Fragment, Listen } from \"@stencil/core\";\n\nimport { StzhChipselectItem, StzhChipselectChangeEvent, StzhDropdownChangeEvent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\nimport { StzhLocaleComponent } from \"../../index\";\nimport { hasSlot } from \"../../utils/utils\";\n\nlet chipselectCounter = 0;\n\n/**\n * @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-chipselect\",\n  styleUrl: \"stzh-chipselect.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  /** Whether label is hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Multiple */\n  @Prop({ mutable: true }) multiple: boolean = false;\n\n  /** Value */\n  @Prop({ mutable: true }) value: string | string[] = \"\";\n  private _value: string[] = [];\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string | 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  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative)\n   */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Whether all chips are disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Whether chips are shown as dropdown on mobile devices */\n  @Prop({ reflect: true }) dropdownOnMobile: 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 = -1;\n  @State() isMobile: boolean = false;\n\n  @Element() element: HTMLStzhChipselectElement;\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhChipselectChangeEvent>;\n\n  private id: string;\n  private renderPromiseResolve: (value?: unknown) => void;\n  private mediaQuery?: MediaQueryList;\n\n  private skipNextValueRender = false;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"value\")\n  valueWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        const parsedValue = JSON.parse(newValue);\n\n        if (Array.isArray(parsedValue)) {\n          this._value = parsedValue;\n        } else {\n          this._value = [newValue];\n        }\n      } catch (ex) {\n        this._value = [newValue];\n      }\n    } else if (Array.isArray(newValue)) {\n      this._value = newValue;\n    } else {\n      this._value = [];\n    }\n  }\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._data.map(dataEntry => {\n      if (typeof dataEntry.value !== \"string\") {\n        throw new TypeError(\n          `${dataEntry.value} is not a string. The data prop only accepts arrays (or stringified arrays), where the value property is a string. Consult the StzhChipselectItem type definition for more information.`,\n        );\n      }\n    });\n\n    this._dataDropdown = this._data.map(data => {\n      return {\n        text: data.counter ? `${data.label} (${data.counter})` : data.label,\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\n  componentShouldUpdate(_newValue: any, _oldValue: any, propName: string) {\n    if (propName === \"value\" && this.useDropdownOnMobile && this.skipNextValueRender) {\n      this.skipNextValueRender = false;\n      return false;\n    }\n\n    return true;\n  }\n\n  private waitForNextRender() {\n    return new Promise(resolve => (this.renderPromiseResolve = resolve));\n  }\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n  };\n\n  private handleMediaQueryChange = (event: MediaQueryListEvent) => {\n    this.isMobile = event.matches;\n  };\n\n  private get useDropdownOnMobile() {\n    return this.isMobile && this.dropdownOnMobile;\n  }\n\n  private handleChipClick = async (data: StzhChipselectItem, index: number) => {\n    if (this.multiple) {\n      if (data.value === \"\" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === \"\")) {\n        this.value = [];\n      } else if (data.value !== \"\") {\n        this.value = this._value.includes(data.value)\n          ? this._value.filter(value => value !== data.value)\n          : [...this._value, data.value];\n      }\n    } else {\n      this.value = data.value;\n    }\n\n    this.activeFocusOptionIndex = index;\n\n    await this.waitForNextRender();\n\n    this.stzhChange.emit({\n      component: \"stzh-chipselect\",\n      value: this.multiple ? this._value : this._value[0],\n    });\n  };\n\n  private handleDropdownChange = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    const newValue = event.detail.value;\n    const value = Array.isArray(newValue) ? String(newValue) : [String(newValue)];\n\n    this.skipNextValueRender = true;\n\n    this.value = this.multiple ? value : value.length > 0 ? value[0] : \"\";\n\n    this.stzhChange.emit({\n      component: \"stzh-chipselect\",\n      value: this.multiple ? value : value[0],\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\n      if (activeOptionIndex < 0) {\n        return;\n      }\n\n      if (this.multiple) {\n        if (\n          this._data[activeOptionIndex].value === \"\" &&\n          this._value.length > 0 &&\n          !(this._value.length === 1 && this._value[0] === \"\")\n        ) {\n          this.value = [];\n        } else if (this._data[activeOptionIndex].value !== \"\") {\n          this.value = this._value.includes(this._data[activeOptionIndex].value)\n            ? this._value.filter(value => value !== this._data[activeOptionIndex].value)\n            : [...this._value, this._data[activeOptionIndex].value];\n        }\n      } else {\n        this.value = this._data[activeOptionIndex].value;\n      }\n\n      this.stzhChange.emit({\n        component: \"stzh-chipselect\",\n        value: this.value,\n      });\n    }\n\n    if (newActiveIndex !== null) {\n      this.activeFocusOptionIndex = newActiveIndex;\n    }\n  };\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-chipselect-${chipselectCounter++}`;\n\n    this.dataWatcher(this.data);\n    this.errorWatcher(this.error);\n    this.valueWatcher(this.value);\n\n    if (this.defaultValue === undefined || this.defaultValue === null) {\n      this.defaultValue = this.value;\n    }\n\n    if (typeof window !== \"undefined\") {\n      this.mediaQuery = window.matchMedia(\"(max-width: 767px)\");\n      this.isMobile = this.mediaQuery.matches;\n    }\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"chipselect\");\n    }\n  }\n\n  componentDidLoad() {\n    if (this.mediaQuery) {\n      this.mediaQuery.addEventListener(\"change\", this.handleMediaQueryChange);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.mediaQuery) {\n      this.mediaQuery.removeEventListener(\"change\", this.handleMediaQueryChange);\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, \"error\") || this._error?.length > 0;\n\n    const labelWrapperUsed = !this.labelHidden && (!!this.label || hasSlot(this.element) || descriptionLongUsed);\n\n    const hasActive = this.activeFocusOptionIndex >= 0;\n    const activeId = hasActive ? `${this.id}-option-${this.activeFocusOptionIndex}` : undefined;\n\n    const classes = {\n      \"stzh-chipselect\": true,\n      \"stzh-chipselect--has-description\": descriptionUsed,\n      \"stzh-chipselect--has-description-long\": descriptionLongUsed,\n      \"stzh-chipselect--has-error\": errorUsed,\n      \"stzh-chipselect--is-invalid\": this.invalid || errorUsed,\n      \"stzh-chipselect--is-disabled\": this.disabled,\n      \"stzh-chipselect--is-required\": this.required,\n      \"stzh-chipselect--has-label-hidden\": this.labelHidden,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed}>\n        <div class={classes}>\n          {!this.useDropdownOnMobile &&\n            (this.multiple ? (\n              <Fragment>\n                {this._value.map(value => (\n                  <input type=\"hidden\" name={this.name} value={value} />\n                ))}\n              </Fragment>\n            ) : (\n              <input type=\"hidden\" name={this.name} value={this.value} />\n            ))}\n\n          {!this.useDropdownOnMobile && labelWrapperUsed && (\n            <div class=\"stzh-chipselect__label-wrapper\">\n              <label class=\"stzh-chipselect__label\" htmlFor={this.id}>\n                {this.label ? this.label : <slot></slot>}\n\n                {!this.hideOptional && (\n                  <span class=\"stzh-chipselect__marker\">\n                    <span class=\"stzh-chipselect__marker-symbol\" aria-hidden=\"true\">\n                      {this.required\n                        ? this.localization.$globals.requiredFieldMarker\n                        : this.localization.$globals.optionalFieldMarker}\n                    </span>\n                    <span class=\"stzh-chipselect__marker-text\">\n                      {this.required\n                        ? this.localization.$globals.requiredFieldText\n                        : this.localization.$globals.optionalFieldText}\n                    </span>\n                  </span>\n                )}\n              </label>\n\n              {descriptionLongUsed && (\n                <StzhInputDescription\n                  classPrefix=\"stzh-chipselect\"\n                  id={`${this.id}-description-long`}\n                  descriptionLong={this.descriptionLong}\n                  descriptionLongTitle={this.descriptionLongTitle}\n                  descriptionLongUsed={descriptionLongUsed}\n                  moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n                  showError={false}\n                  showDescriptionText={false}\n                />\n              )}\n            </div>\n          )}\n\n          {this._data.length > 0 && (\n            <Fragment>\n              {!this.useDropdownOnMobile ? (\n                <Fragment>\n                  <div\n                    id={this.id}\n                    class=\"stzh-chipselect__chips\"\n                    role=\"listbox\"\n                    tabindex=\"0\"\n                    aria-multiselectable={this.multiple ? \"true\" : \"false\"}\n                    aria-activedescendant={activeId}\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-chipselect__chip\": true,\n                          \"is-focused\": this.activeFocusOptionIndex === index,\n                        }}\n                        label={data.label}\n                        counter={data.counter}\n                        icon={data.icon}\n                        variant={data.variant || \"filter\"}\n                        inverted={data.inverted}\n                        size={data.size || \"small\"}\n                        disabled={this.disabled || data.disabled}\n                        active={\n                          this._value.includes(data.value) ||\n                          (!this.multiple && !data.value && (this._value.length === 0 || this._value[0] === \"\")) ||\n                          (!data.value &&\n                            this.multiple &&\n                            (this._value.length === 0 || (this._value.length === 1 && this._value[0] === \"\")))\n                        }\n                        aria-selected={\n                          this._value.includes(data.value) ||\n                          (!this.multiple && !data.value && (this._value.length === 0 || this._value[0] === \"\")) ||\n                          (!data.value &&\n                            this.multiple &&\n                            (this._value.length === 0 || (this._value.length === 1 && this._value[0] === \"\")))\n                            ? \"true\"\n                            : \"false\"\n                        }\n                        id={`${this.id}-option-${index}`}\n                        a11yTabindex=\"-1\"\n                        onClick={() => this.handleChipClick(data, index)}\n                      ></stzh-chip>\n                    ))}\n                  </div>\n                </Fragment>\n              ) : (\n                <stzh-dropdown\n                  class=\"stzh-chipselect__dropdown\"\n                  name={this.name}\n                  multiple={this.multiple}\n                  disabled={this.disabled}\n                  error={this._error}\n                  description={this.description}\n                  descriptionLong={this.descriptionLong}\n                  descriptionLongTitle={this.descriptionLongTitle}\n                  required={this.required}\n                  invalid={this.invalid}\n                  items={this.multiple ? this._value : this._value.length > 0 ? [this._value[0]] : []}\n                  label={this.label}\n                  labelHidden={this.labelHidden}\n                  options={this._dataDropdown}\n                  hideOptional={this.hideOptional}\n                  onStzhChange={this.handleDropdownChange}\n                ></stzh-dropdown>\n              )}\n            </Fragment>\n          )}\n          {!this.useDropdownOnMobile && (errorUsed || descriptionUsed) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-chipselect\"\n              id={`${this.id}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLongUsed={false}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DgLT1h5X.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-chipselect/stzh-chipselect.scss?tag=stzh-chipselect&encapsulation=scoped","src/components/stzh-chipselect/stzh-chipselect.tsx"],"sourcesContent":[":host {\n  width: 100%;\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --background-color: var(\n      --stzh-chip-active-background-color,\n      #{$colorPrimary70}\n    );\n  }\n\n  &[active].is-focused {\n    --background-color: var(\n      --stzh-chip-active-background-color,\n      #{$colorPrimary70}\n    );\n  }\n}\n\n:host([dropdown-on-mobile]) .stzh-chipselect__dropdown {\n  display: block;\n  width: 100%;\n}\n\n.stzh-chipselect {\n  @include input-description;\n  width: 100%;\n\n  &__label-wrapper {\n    display: flex;\n    align-items: center;\n    gap: space(\"xsmall\");\n    margin-bottom: space(\"xsmall\");\n    width: 100%;\n    min-width: 0;\n    min-height: 22px;\n  }\n\n  &__label {\n    @include font(\"heavy\");\n    @include fontSize(\"micro\");\n    @include truncate;\n    color: $headingColor;\n    display: block;\n    min-width: 0;\n    flex: 0 1 auto;\n    max-width: 100%;\n    margin-bottom: 0;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__label-wrapper > &__description-wrapper {\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: center;\n    margin: 0;\n  }\n\n  &__label-wrapper &__error,\n  &__label-wrapper &__description-text {\n    display: none;\n  }\n\n  &__label-wrapper &__description,\n  &__label-wrapper &__description-long {\n    display: inline-flex;\n    align-items: center;\n    margin: 0;\n  }\n\n  &__label-wrapper &__description-long-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    line-height: 1;\n  }\n\n  &__label-wrapper stzh-popover &__description-long-icon {\n    --size: var(--stzh-icon-size-small);\n    display: block;\n    line-height: 0;\n    color: $colorPrimary70;\n  }\n\n  &__marker {\n    @include fontSize(\"nano\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  &__chips {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    border-radius: $buttonBorderRadius;\n    gap: space(\"medium\");\n\n    &:focus-within {\n      .is-focused[active] {\n        --background-color: #{$colorPrimary90};\n\n        @media (forced-colors: active) {\n          --background-color: Canvas;\n        }\n      }\n    }\n  }\n\n  &__chip {\n    &.is-focused:not([active]) {\n      --background-color: #{$colorSecondary40};\n\n      @media (forced-colors: active) {\n        --background-color: Highlight;\n      }\n    }\n  }\n\n  &__dropdown {\n    display: block;\n    width: 100%;\n    --popover-width: max-content;\n    --popover-min-width: 100%;\n    --popover-max-width: calc(100vw - 2rem);\n  }\n\n  &__description-wrapper {\n    margin-top: space(\"xsmall\");\n  }\n\n  /* Hidden label */\n\n  &--has-label-hidden &__label {\n    @include visuallyhidden;\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__chips,\n  &--is-disabled &__label {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Host, h, Element, Prop, Watch, Event, EventEmitter, State, Fragment, Listen } from \"@stencil/core\";\n\nimport { StzhChipselectItem, StzhChipselectChangeEvent, StzhDropdownChangeEvent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\nimport { StzhLocaleComponent } from \"../../index\";\nimport { hasSlot } from \"../../utils/utils\";\n\nlet chipselectCounter = 0;\n\n/**\n * @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-chipselect\",\n  styleUrl: \"stzh-chipselect.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  /** Whether label is hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Multiple */\n  @Prop({ mutable: true }) multiple: boolean = false;\n\n  /** Value */\n  @Prop({ mutable: true }) value: string | string[] = \"\";\n  private _value: string[] = [];\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string | 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  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative)\n   */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Whether all chips are disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Whether chips are shown as dropdown on mobile devices */\n  @Prop({ reflect: true }) dropdownOnMobile: 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 = -1;\n  @State() isMobile: boolean = false;\n\n  @Element() element: HTMLStzhChipselectElement;\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhChipselectChangeEvent>;\n\n  private id: string;\n  private renderPromiseResolve: (value?: unknown) => void;\n  private mediaQuery?: MediaQueryList;\n\n  private skipNextValueRender = false;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"value\")\n  valueWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        const parsedValue = JSON.parse(newValue);\n\n        if (Array.isArray(parsedValue)) {\n          this._value = parsedValue;\n        } else {\n          this._value = [newValue];\n        }\n      } catch (ex) {\n        this._value = [newValue];\n      }\n    } else if (Array.isArray(newValue)) {\n      this._value = newValue;\n    } else {\n      this._value = [];\n    }\n  }\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._data.map(dataEntry => {\n      if (typeof dataEntry.value !== \"string\") {\n        throw new TypeError(\n          `${dataEntry.value} is not a string. The data prop only accepts arrays (or stringified arrays), where the value property is a string. Consult the StzhChipselectItem type definition for more information.`,\n        );\n      }\n    });\n\n    this._dataDropdown = this._data.map(data => {\n      return {\n        text: data.counter ? `${data.label} (${data.counter})` : data.label,\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\n  componentShouldUpdate(_newValue: any, _oldValue: any, propName: string) {\n    if (propName === \"value\" && this.useDropdownOnMobile && this.skipNextValueRender) {\n      this.skipNextValueRender = false;\n      return false;\n    }\n\n    return true;\n  }\n\n  private waitForNextRender() {\n    return new Promise(resolve => (this.renderPromiseResolve = resolve));\n  }\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n  };\n\n  private handleMediaQueryChange = (event: MediaQueryListEvent) => {\n    this.isMobile = event.matches;\n  };\n\n  private get useDropdownOnMobile() {\n    return this.isMobile && this.dropdownOnMobile;\n  }\n\n  private handleChipClick = async (data: StzhChipselectItem, index: number) => {\n    if (this.multiple) {\n      if (data.value === \"\" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === \"\")) {\n        this.value = [];\n      } else if (data.value !== \"\") {\n        this.value = this._value.includes(data.value)\n          ? this._value.filter(value => value !== data.value)\n          : [...this._value, data.value];\n      }\n    } else {\n      this.value = data.value;\n    }\n\n    this.activeFocusOptionIndex = index;\n\n    await this.waitForNextRender();\n\n    this.stzhChange.emit({\n      component: \"stzh-chipselect\",\n      value: this.multiple ? this._value : this._value[0],\n    });\n  };\n\n  private handleDropdownChange = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    const newValue = event.detail.value;\n    const value = Array.isArray(newValue) ? String(newValue) : [String(newValue)];\n\n    this.skipNextValueRender = true;\n\n    this.value = this.multiple ? value : value.length > 0 ? value[0] : \"\";\n\n    this.stzhChange.emit({\n      component: \"stzh-chipselect\",\n      value: this.multiple ? value : value[0],\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\n      if (activeOptionIndex < 0) {\n        return;\n      }\n\n      if (this.multiple) {\n        if (\n          this._data[activeOptionIndex].value === \"\" &&\n          this._value.length > 0 &&\n          !(this._value.length === 1 && this._value[0] === \"\")\n        ) {\n          this.value = [];\n        } else if (this._data[activeOptionIndex].value !== \"\") {\n          this.value = this._value.includes(this._data[activeOptionIndex].value)\n            ? this._value.filter(value => value !== this._data[activeOptionIndex].value)\n            : [...this._value, this._data[activeOptionIndex].value];\n        }\n      } else {\n        this.value = this._data[activeOptionIndex].value;\n      }\n\n      this.stzhChange.emit({\n        component: \"stzh-chipselect\",\n        value: this.value,\n      });\n    }\n\n    if (newActiveIndex !== null) {\n      this.activeFocusOptionIndex = newActiveIndex;\n    }\n  };\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-chipselect-${chipselectCounter++}`;\n\n    this.dataWatcher(this.data);\n    this.errorWatcher(this.error);\n    this.valueWatcher(this.value);\n\n    if (this.defaultValue === undefined || this.defaultValue === null) {\n      this.defaultValue = this.value;\n    }\n\n    if (typeof window !== \"undefined\") {\n      this.mediaQuery = window.matchMedia(\"(max-width: 767px)\");\n      this.isMobile = this.mediaQuery.matches;\n    }\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"chipselect\");\n    }\n  }\n\n  componentDidLoad() {\n    if (this.mediaQuery) {\n      this.mediaQuery.addEventListener(\"change\", this.handleMediaQueryChange);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.mediaQuery) {\n      this.mediaQuery.removeEventListener(\"change\", this.handleMediaQueryChange);\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, \"error\") || this._error?.length > 0;\n\n    const labelWrapperUsed = !this.labelHidden && (!!this.label || hasSlot(this.element) || descriptionLongUsed);\n\n    const hasActive = this.activeFocusOptionIndex >= 0;\n    const activeId = hasActive ? `${this.id}-option-${this.activeFocusOptionIndex}` : undefined;\n\n    const classes = {\n      \"stzh-chipselect\": true,\n      \"stzh-chipselect--has-description\": descriptionUsed,\n      \"stzh-chipselect--has-description-long\": descriptionLongUsed,\n      \"stzh-chipselect--has-error\": errorUsed,\n      \"stzh-chipselect--is-invalid\": this.invalid || errorUsed,\n      \"stzh-chipselect--is-disabled\": this.disabled,\n      \"stzh-chipselect--is-required\": this.required,\n      \"stzh-chipselect--has-label-hidden\": this.labelHidden,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed}>\n        <div class={classes}>\n          {!this.useDropdownOnMobile &&\n            (this.multiple ? (\n              <Fragment>\n                {this._value.map(value => (\n                  <input type=\"hidden\" name={this.name} value={value} />\n                ))}\n              </Fragment>\n            ) : (\n              <input type=\"hidden\" name={this.name} value={this.value} />\n            ))}\n\n          {!this.useDropdownOnMobile && labelWrapperUsed && (\n            <div class=\"stzh-chipselect__label-wrapper\">\n              <label class=\"stzh-chipselect__label\" htmlFor={this.id}>\n                {this.label ? this.label : <slot></slot>}\n\n                {!this.hideOptional && (\n                  <span class=\"stzh-chipselect__marker\">\n                    <span class=\"stzh-chipselect__marker-symbol\" aria-hidden=\"true\">\n                      {this.required\n                        ? this.localization.$globals.requiredFieldMarker\n                        : this.localization.$globals.optionalFieldMarker}\n                    </span>\n                    <span class=\"stzh-chipselect__marker-text\">\n                      {this.required\n                        ? this.localization.$globals.requiredFieldText\n                        : this.localization.$globals.optionalFieldText}\n                    </span>\n                  </span>\n                )}\n              </label>\n\n              {descriptionLongUsed && (\n                <StzhInputDescription\n                  classPrefix=\"stzh-chipselect\"\n                  id={`${this.id}-description-long`}\n                  descriptionLong={this.descriptionLong}\n                  descriptionLongTitle={this.descriptionLongTitle}\n                  descriptionLongUsed={descriptionLongUsed}\n                  moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n                  showError={false}\n                  showDescriptionText={false}\n                />\n              )}\n            </div>\n          )}\n\n          {this._data.length > 0 && (\n            <Fragment>\n              {!this.useDropdownOnMobile ? (\n                <Fragment>\n                  <div\n                    id={this.id}\n                    class=\"stzh-chipselect__chips\"\n                    role=\"listbox\"\n                    tabindex=\"0\"\n                    aria-multiselectable={this.multiple ? \"true\" : \"false\"}\n                    aria-activedescendant={activeId}\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-chipselect__chip\": true,\n                          \"is-focused\": this.activeFocusOptionIndex === index,\n                        }}\n                        label={data.label}\n                        counter={data.counter}\n                        icon={data.icon}\n                        variant={data.variant || \"filter\"}\n                        inverted={data.inverted}\n                        size={data.size || \"small\"}\n                        disabled={this.disabled || data.disabled}\n                        active={\n                          this._value.includes(data.value) ||\n                          (!this.multiple && !data.value && (this._value.length === 0 || this._value[0] === \"\")) ||\n                          (!data.value &&\n                            this.multiple &&\n                            (this._value.length === 0 || (this._value.length === 1 && this._value[0] === \"\")))\n                        }\n                        aria-selected={\n                          this._value.includes(data.value) ||\n                          (!this.multiple && !data.value && (this._value.length === 0 || this._value[0] === \"\")) ||\n                          (!data.value &&\n                            this.multiple &&\n                            (this._value.length === 0 || (this._value.length === 1 && this._value[0] === \"\")))\n                            ? \"true\"\n                            : \"false\"\n                        }\n                        id={`${this.id}-option-${index}`}\n                        a11yTabindex=\"-1\"\n                        onClick={() => this.handleChipClick(data, index)}\n                      ></stzh-chip>\n                    ))}\n                  </div>\n                </Fragment>\n              ) : (\n                <stzh-dropdown\n                  class=\"stzh-chipselect__dropdown\"\n                  name={this.name}\n                  multiple={this.multiple}\n                  disabled={this.disabled}\n                  error={this._error}\n                  description={this.description}\n                  descriptionLong={this.descriptionLong}\n                  descriptionLongTitle={this.descriptionLongTitle}\n                  required={this.required}\n                  invalid={this.invalid}\n                  items={this.multiple ? this._value : this._value.length > 0 ? [this._value[0]] : []}\n                  label={this.label}\n                  labelHidden={this.labelHidden}\n                  options={this._dataDropdown}\n                  hideOptional={this.hideOptional}\n                  onStzhChange={this.handleDropdownChange}\n                ></stzh-dropdown>\n              )}\n            </Fragment>\n          )}\n          {!this.useDropdownOnMobile && (errorUsed || descriptionUsed) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-chipselect\"\n              id={`${this.id}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLongUsed={false}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}