@oiz/stzh-components 4.6.0-beta1 → 4.6.0-beta2

package/dist/components/{p-12bdcf8a.js → p-cdbd62e3.js}

@@ -1,13 +1,13 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-8f01554b.js';
-import { a as printISODate, d as defineCustomElement$6 } from './p-902ed395.js';
+import { a as printISODate, d as defineCustomElement$6 } from './p-ffbf0fbb.js';
 import { h as hasSlot } from './p-289f5de2.js';
-import { d as defineCustomElement$8 } from './p-dd1c0c0c.js';
-import { d as defineCustomElement$7 } from './p-4a78990f.js';
-import { d as defineCustomElement$5 } from './p-3f3349b1.js';
-import { d as defineCustomElement$4 } from './p-7c4e756c.js';
-import { d as defineCustomElement$3 } from './p-da83a0ad.js';
-import { d as defineCustomElement$2 } from './p-963d59bf.js';
-import { d as defineCustomElement$1 } from './p-63c4d8c4.js';
+import { d as defineCustomElement$8 } from './p-42e86bbd.js';
+import { d as defineCustomElement$7 } from './p-b84d0233.js';
+import { d as defineCustomElement$5 } from './p-3de13c90.js';
+import { d as defineCustomElement$4 } from './p-a2659715.js';
+import { d as defineCustomElement$3 } from './p-f625c800.js';
+import { d as defineCustomElement$2 } from './p-7121e1bf.js';
+import { d as defineCustomElement$1 } from './p-ace11500.js';
 
 const stzhDatepickerCss = ".sc-stzh-datepicker-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-datepicker-h,[stzh-hidden].sc-stzh-datepicker-h{display:none}.sc-stzh-datepicker-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datepicker-h *.sc-stzh-datepicker,.sc-stzh-datepicker-h *.sc-stzh-datepicker::before,.sc-stzh-datepicker-h *.sc-stzh-datepicker::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-datepicker-h .has-focus.sc-stzh-datepicker{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datepicker-h .stzh-fylingfocus-focused.sc-stzh-datepicker{outline-style:none !important}.sc-stzh-datepicker-h .stzh-fylingfocus-focused.sc-stzh-datepicker::-moz-focus-inner{border:0 !important}.sc-stzh-datepicker-h{--calendar-width:var(--stzh-calendar-width);width:100%;position:relative}[inline].sc-stzh-datepicker-h:not([inline=false]){width:var(--calendar-width)}.stzh-datepicker__popover.sc-stzh-datepicker{--width:auto}.stzh-datepicker__calendar.sc-stzh-datepicker{margin-left:auto;margin-right:auto}.stzh-datepicker__calendar.is-inline.sc-stzh-datepicker{width:100%;margin-left:0px;margin-right:0px}.stzh-datepicker__actions.sc-stzh-datepicker{display:flex;width:var(--calendar-width);margin-left:auto;margin-right:auto}.stzh-datepicker__actions.is-inline.sc-stzh-datepicker{width:100%;margin-left:0px;margin-right:0px}.stzh-datepicker__actions.sc-stzh-datepicker:not(:empty){padding-left:var(--stzh-space-small);padding-right:var(--stzh-space-small)}.stzh-datepicker--has-action.sc-stzh-datepicker .stzh-datepicker__popover.sc-stzh-datepicker{--content-padding:0 0 var(--stzh-space-small) 0}";
 const StzhDatepickerStyle0 = stzhDatepickerCss;
@@ -165,11 +165,11 @@ const StzhDatepicker = /*@__PURE__*/ proxyCustomElement(class StzhDatepicker ext
             "stzh-datepicker--inline": this.inline,
             "stzh-datepicker--has-action": actionUsed,
         };
-        return (h(Host, { key: '20e14b196ff9412583fe70d505cdcecfe087df6e', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '8b1bec87897482374e0c84c8b2c340a961fd6dbb', class: classes }, h("input", { key: '0f839dbf214dabd77b34ca69b66c6cf8b3a261b3', type: "hidden", name: this.name, value: this.value, defaultValue: this.defaultValue }), this.inline && (h(Fragment, { key: '07d261251daeb9fe72c14354525ad9ab4c918ee1' }, h("stzh-calendar", { key: 'b26dadb8d64e70ea7dcb43de197c3ee69163eb36',
+        return (h(Host, { key: '4ff21a8fcd972b2619acae49ee0f22d3d0de2147', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '8bc68db9617210bdaf0130c979e5db77bd271366', class: classes }, h("input", { key: '3a580a6831d811e4bc3c9739aec1748b8a3bcf90', type: "hidden", name: this.name, value: this.value, defaultValue: this.defaultValue }), this.inline && (h(Fragment, { key: 'a3f0746ac7bfd4a627f1fafd42c524df03681600' }, h("stzh-calendar", { key: '7514b26698908cfa19e0d965f0d838b471eef594',
             // ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}
-            value: this.calendarValue, class: "stzh-datepicker__calendar is-inline", isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), h("div", { key: 'f6775141a572717789a04e7c5c5ef2158e940f12', class: "stzh-datepicker__actions" }, h("slot", { key: '23c04230a3de93ddd303b4d7b57c1f56c74a888f', name: "action" })))), !this.inline && (h("stzh-input", { key: 'c041ccdda80067c51154afb36d0ecb2eb57e7119', value: this.inputValue, label: this.label, labelHidden: this.labelHidden, ref: el => (this.input = el), noAutocomplete: true, onStzhChanged: this.onInputChanged, readonly: this.readonly, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, invalid: this.invalid, required: this.required, hideOptional: this.hideOptional, size: this.size }, h("stzh-popover", { key: '59176c120b40c0292ed26420629b676ae937be83', ref: el => (this.popover = el), class: "stzh-datepicker__popover", slot: "button-right", placement: "bottom-end", strategy: "fixed", label: this.label }, h("stzh-button", { key: 'c081f5c3472077f23336352714c01dd409f1b281', "icon-only": true, icon: "calendar", size: this.size, disabled: this.disabled, a11yLabel: this.buttonLabel }), h("div", { key: 'fd06e8dff63bf5f71d4ae74341ddd40b9fc263e7', slot: "content" }, h("stzh-calendar", { key: '32f756a68d52df096225bd7924e0ad94536afdf7',
+            value: this.calendarValue, class: "stzh-datepicker__calendar is-inline", isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), h("div", { key: 'e893e6f4b8cdf52a16011dffe2a228baaf6eaa4b', class: "stzh-datepicker__actions" }, h("slot", { key: '190ffdaab1a41fbd6b31e63ed4b91b9cbf648fe4', name: "action" })))), !this.inline && (h("stzh-input", { key: '5b06696ac06ec03e8db3e771957b6309a9b77a4a', value: this.inputValue, label: this.label, labelHidden: this.labelHidden, ref: el => (this.input = el), noAutocomplete: true, onStzhChanged: this.onInputChanged, readonly: this.readonly, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, invalid: this.invalid, required: this.required, hideOptional: this.hideOptional, size: this.size }, h("stzh-popover", { key: '033bb37fd62713376ad0ee54381b4f2d0cabe9be', ref: el => (this.popover = el), class: "stzh-datepicker__popover", slot: "button-right", placement: "bottom-end", strategy: "fixed", label: this.label }, h("stzh-button", { key: 'e1f192ae423808b8ae971f96f091d447a47beb10', "icon-only": true, icon: "calendar", size: this.size, disabled: this.disabled, a11yLabel: this.buttonLabel }), h("div", { key: 'a8ab8497e4bc47f2295bc77945748e3669dec0c6', slot: "content" }, h("stzh-calendar", { key: '434c79f929e60d7007454550cb1d5cbff71fe743',
             // ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}
-            value: this.calendarValue, class: "stzh-datepicker__calendar is-popover", isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), h("div", { key: '935174bcc6cc0fe5faaca2c1f99dd5cdffd12b81', class: "stzh-datepicker__actions" }, h("slot", { key: 'd860bd2c030b5fa0d153228dfc2c463f7d148acf', name: "action" })))))))));
+            value: this.calendarValue, class: "stzh-datepicker__calendar is-popover", isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), h("div", { key: 'e11f352cb4f42017425498de2454a4e259eb0d9f', class: "stzh-datepicker__actions" }, h("slot", { key: '09e89c4faa8f7f7916fe1b4ee60e086a45cf787a', name: "action" })))))))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -268,4 +268,4 @@ function defineCustomElement() {
 
 export { StzhDatepicker as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-12bdcf8a.js.map
+//# sourceMappingURL=p-cdbd62e3.js.map

package/dist/components/{p-12bdcf8a.js.map → p-cdbd62e3.js.map}

@@ -1 +1 @@
-{"file":"p-12bdcf8a.js","mappings":"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","names":[],"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.popover;\n  }\n\n  /** Datepicker change event */\n  @Event() stzhChange: EventEmitter<StzhDatepickerChangeEvent>;\n\n  @Element() element: HTMLStzhDatepickerElement;\n\n  /**\n   * To format dates exclusively for the benefit of screen readers.\n   *\n   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n   * better performance when formatting large number of dates. See:\n   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n   */\n  private dateFormatLong: Intl.DateTimeFormat;\n\n  private input: HTMLStzhInputElement;\n  private popover: HTMLStzhPopoverElement;\n  // private calendar: HTMLStzhCalendarElement;\n\n  private 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.popover) {\n      this.popover.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.popover = 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-cdbd62e3.js","mappings":"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","names":[],"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.popover;\n  }\n\n  /** Datepicker change event */\n  @Event() stzhChange: EventEmitter<StzhDatepickerChangeEvent>;\n\n  @Element() element: HTMLStzhDatepickerElement;\n\n  /**\n   * To format dates exclusively for the benefit of screen readers.\n   *\n   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n   * better performance when formatting large number of dates. See:\n   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n   */\n  private dateFormatLong: Intl.DateTimeFormat;\n\n  private input: HTMLStzhInputElement;\n  private popover: HTMLStzhPopoverElement;\n  // private calendar: HTMLStzhCalendarElement;\n\n  private 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.popover) {\n      this.popover.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.popover = 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-c06cc6c5.js → p-ce788661.js}

@@ -15,7 +15,7 @@ const StzhListItem = /*@__PURE__*/ proxyCustomElement(class StzhListItem extends
         const classes = {
             "stzh-list-item": true,
         };
-        return (h(Host, { key: '7274775b769e0488ed26db096227606566f93206' }, h("div", { key: 'd27ca2b2ae89ea1e7bdbf71a6cb0a6dbc70fdc12', class: classes, role: "listitem" }, h("div", { key: '4d6cd83d53d0ed5ce2742b04e52572b193eda69f', class: "stzh-list-item__checkmark-icon", innerHTML: Checkmark }), h("div", { key: '19d277a13d49e00185eaa448b520da6a574d9c5f', class: "stzh-list-item__text" }, h("slot", { key: 'a9f44e32fac76b6b613e4ec473a6165ff0bc1b7d' })))));
+        return (h(Host, { key: 'cc8f75d5b03485807e0c75dc39ca49975abcb941' }, h("div", { key: '7067f74a66a901ff08e4b27bd18fb5943ea80446', class: classes, role: "listitem" }, h("div", { key: '41686c63c64c44c524ab48619eaf94cfe562466c', class: "stzh-list-item__checkmark-icon", innerHTML: Checkmark }), h("div", { key: '4bab6810ac9a64af5525ef40f0de200faa96c549', class: "stzh-list-item__text" }, h("slot", { key: '3d0690094c3356261e6b9dbe72f09b968a78f7bd' })))));
     }
     get element() { return this; }
     static get style() { return StzhListItemStyle0; }
@@ -36,4 +36,4 @@ function defineCustomElement() {
 
 export { StzhListItem as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-c06cc6c5.js.map
+//# sourceMappingURL=p-ce788661.js.map

package/dist/components/{p-c06cc6c5.js.map → p-ce788661.js.map}

@@ -1 +1 @@
-{"file":"p-c06cc6c5.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,ivCAAivC,CAAC;AAC1wC,2BAAe,eAAe;;MCWjB,YAAY;;;;;;IAGvB,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,gBAAgB,EAAE,IAAI;SACvB,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,UAAU,IAClC,4DAAK,KAAK,EAAC,gCAAgC,EAAC,SAAS,EAAE,SAAS,GAAQ,EAExE,4DAAK,KAAK,EAAC,sBAAsB,IAC/B,8DAAa,CACT,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;","names":[],"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-ce788661.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,ivCAAivC,CAAC;AAC1wC,2BAAe,eAAe;;MCWjB,YAAY;;;;;;IAGvB,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,gBAAgB,EAAE,IAAI;SACvB,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,UAAU,IAClC,4DAAK,KAAK,EAAC,gCAAgC,EAAC,SAAS,EAAE,SAAS,GAAQ,EAExE,4DAAK,KAAK,EAAC,sBAAsB,IAC/B,8DAAa,CACT,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;","names":[],"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-551fa57d.js → p-d0ecd5c0.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-8f01554b.js';
-import { d as defineCustomElement$1 } from './p-18196788.js';
+import { d as defineCustomElement$1 } from './p-700a2919.js';
 
 const stzhAccordionCss = ":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 .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{--stzh-section-padding-top:0px;--stzh-section-padding-bottom:0px;--stzh-section-margin-top:0px;--stzh-section-margin-bottom:0px;--margin-left:inherit;--margin-right:inherit}.stzh-accordion{display:grid;gap:var(--stzh-space-xsmall);margin-left:var(--margin-left);margin-right:var(--margin-left);}.stzh-accordion__heading{margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-accordion__heading{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-accordion__heading{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-accordion__heading{margin-bottom:var(--stzh-space-xlarge)}}.stzh-accordion--is-nested{margin-left:calc(var(--stzh-space-medium) * -1);margin-right:calc(var(--stzh-space-medium) * -1)}@media screen and (min-width: 600px){.stzh-accordion--is-nested{margin-left:calc(var(--stzh-space-large) * -1)}}@media screen and (min-width: 900px){.stzh-accordion--is-nested{margin-left:calc(var(--stzh-space-xlarge) * -1)}}@media screen and (min-width: 1260px){.stzh-accordion--is-nested{margin-left:calc(var(--stzh-space-xxlarge) * -1)}}@media screen and (min-width: 600px){.stzh-accordion--is-nested{margin-right:calc(var(--stzh-space-large) * -1)}}@media screen and (min-width: 900px){.stzh-accordion--is-nested{margin-right:calc(var(--stzh-space-xlarge) * -1)}}@media screen and (min-width: 1260px){.stzh-accordion--is-nested{margin-right:calc(var(--stzh-space-xxlarge) * -1)}}";
 const StzhAccordionStyle0 = stzhAccordionCss;
@@ -88,7 +88,7 @@ const StzhAccordion = /*@__PURE__*/ proxyCustomElement(class StzhAccordion exten
             "stzh-accordion": true,
             "stzh-accordion--is-nested": this.isNested,
         };
-        return (h(Host, { key: '2dde1e9bcf86097f0c3c00f1f407b07773da313c' }, h("div", { key: '411bdfb4672e6842c0f8d6e9e944af06d39be36f', class: classes }, this.heading && (h("div", { key: '6f9c89a59f2a25563039669fd573cd29e543f9e9', class: "stzh-accordion__heading" }, h("stzh-heading", { key: '28cf3aa9798077864bd36314da445f49b930ff38', level: "2" }, this.heading))), h("slot", { key: 'e74c3faa442732de660ff8b570eedeb8d4d0946c' }))));
+        return (h(Host, { key: '25878532d107b4951dcec78cdf9949e555b6c306' }, h("div", { key: '33311c8d0930112bc7c111b93ddb131625da4b29', class: classes }, this.heading && (h("div", { key: '69b78c5144b6bb2140b7cd1130e66e0607b01e81', class: "stzh-accordion__heading" }, h("stzh-heading", { key: '8f83e2fedf199a3bdfa0c311e9847878d458b2db', level: "2" }, this.heading))), h("slot", { key: 'ced5efd487d058f8676b2b293f5880938be9653e' }))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -126,4 +126,4 @@ function defineCustomElement() {
 
 export { StzhAccordion as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-551fa57d.js.map
+//# sourceMappingURL=p-d0ecd5c0.js.map

package/dist/components/{p-551fa57d.js.map → p-d0ecd5c0.js.map}

@@ -1 +1 @@
-{"file":"p-551fa57d.js","mappings":"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","names":[],"sources":["src/components/stzh-accordion/stzh-accordion.scss?tag=stzh-accordion&encapsulation=shadow","src/components/stzh-accordion/stzh-accordion.tsx"],"sourcesContent":[":host {\n  // disable section paddings and margins\n  --stzh-section-padding-top: 0px;\n  --stzh-section-padding-bottom: 0px;\n  --stzh-section-margin-top: 0px;\n  --stzh-section-margin-bottom: 0px;\n\n  --margin-left: inherit;\n  --margin-right: inherit;\n}\n\n.stzh-accordion {\n  display: grid;\n  gap: space(\"xsmall\");\n  margin-left: var(--margin-left);\n  margin-right: var(--margin-left);\n\n  &__heading {\n    @include spaceCurve(\"margin-bottom\", \"small\");\n  }\n\n  /* is nested within another accordion */\n\n  &--is-nested {\n    @include spaceCurve(\"margin-left\", \"regular\", true);\n    @include spaceCurve(\"margin-right\", \"regular\", true);\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport { StzhAccordionItemOpenEvent, StzhAccordionVariant, StzhAccordionVariantChangeEvent } from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-accordion-item` elements\n */\n@Component({\n  tag: \"stzh-accordion\",\n  styleUrl: \"stzh-accordion.scss\",\n  shadow: true,\n})\nexport class StzhAccordion {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhAccordionVariant = \"default\";\n\n  /** Heading */\n  @Prop({ reflect: true }) heading: string = \"\";\n\n  /** Whether folds are collapsible */\n  @Prop() collapsible: boolean = true;\n\n  /** Whether multiple folds can be opened at once */\n  @Prop() multiselectable: boolean = true;\n\n  @Element() element: HTMLStzhAccordionElement;\n\n  /** Variant change event */\n  @Event() stzhVariantChange: EventEmitter<StzhAccordionVariantChangeEvent>;\n\n  @State() isNested: boolean;\n\n  @Watch(\"variant\")\n  variantWatcher(newValue: StzhAccordionVariant) {\n    this.stzhVariantChange.emit({\n      component: \"stzh-accordion\",\n      value: newValue,\n    });\n  }\n\n  @Listen(\"stzhOpen\")\n  openListener(event: CustomEvent<StzhAccordionItemOpenEvent>) {\n    const accordionItemOpened = event.target as HTMLStzhAccordionItemElement;\n    const accordionOpened = accordionItemOpened.closest(\"stzh-accordion\");\n\n    if (\n      this.multiselectable ||\n      (event.detail && event.detail.component !== \"stzh-accordion-item\") ||\n      accordionOpened !== this.element\n    ) {\n      return;\n    }\n\n    const items: HTMLStzhAccordionItemElement[] = Array.from(accordionOpened.querySelectorAll(\"stzh-accordion-item\"));\n    items.forEach(item => {\n      if (item !== accordionItemOpened) {\n        item.hide();\n      }\n    });\n  }\n\n  /** Set focus to accordion item */\n  @Method()\n  async setItemFocus(accordionItem: HTMLStzhAccordionItemElement, action: string) {\n    const accordion = accordionItem.closest(\"stzh-accordion\");\n\n    if (accordion !== this.element) {\n      return;\n    }\n\n    const items = (\n      Array.from(accordion.querySelectorAll(\":scope > stzh-accordion-item\")) as HTMLStzhAccordionItemElement[]\n    ).filter(item => !item.disabled);\n\n    const currentIndex = items.indexOf(accordionItem);\n\n    if ((action === \"prev\" || action === \"next\") && currentIndex === null) {\n      action = action === \"prev\" ? \"last\" : \"first\";\n    }\n\n    if (action === \"prev\" && currentIndex === 0) {\n      action = \"last\";\n    }\n\n    if (action === \"next\" && currentIndex === items.length - 1) {\n      action = \"first\";\n    }\n\n    if (action === \"prev\") {\n      items[currentIndex - 1].focus();\n    } else if (action === \"next\") {\n      items[currentIndex + 1].focus();\n    } else if (action === \"last\") {\n      items[items.length - 1].focus();\n    } else if (action === \"first\") {\n      items[0].focus();\n    } else {\n      accordionItem.focus();\n    }\n  }\n\n  private checkIfNested() {\n    let parentElement = this.element.parentElement;\n\n    while (parentElement) {\n      if (parentElement.tagName.toLowerCase() === \"stzh-accordion\") {\n        this.isNested = true;\n        break;\n      }\n      parentElement = parentElement.parentElement;\n    }\n  }\n\n  componentDidLoad() {\n    this.checkIfNested();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-accordion\": true,\n      \"stzh-accordion--is-nested\": this.isNested,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this.heading && (\n            <div class=\"stzh-accordion__heading\">\n              <stzh-heading level=\"2\">{this.heading}</stzh-heading>\n            </div>\n          )}\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-d0ecd5c0.js","mappings":"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","names":[],"sources":["src/components/stzh-accordion/stzh-accordion.scss?tag=stzh-accordion&encapsulation=shadow","src/components/stzh-accordion/stzh-accordion.tsx"],"sourcesContent":[":host {\n  // disable section paddings and margins\n  --stzh-section-padding-top: 0px;\n  --stzh-section-padding-bottom: 0px;\n  --stzh-section-margin-top: 0px;\n  --stzh-section-margin-bottom: 0px;\n\n  --margin-left: inherit;\n  --margin-right: inherit;\n}\n\n.stzh-accordion {\n  display: grid;\n  gap: space(\"xsmall\");\n  margin-left: var(--margin-left);\n  margin-right: var(--margin-left);\n\n  &__heading {\n    @include spaceCurve(\"margin-bottom\", \"small\");\n  }\n\n  /* is nested within another accordion */\n\n  &--is-nested {\n    @include spaceCurve(\"margin-left\", \"regular\", true);\n    @include spaceCurve(\"margin-right\", \"regular\", true);\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport { StzhAccordionItemOpenEvent, StzhAccordionVariant, StzhAccordionVariantChangeEvent } from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-accordion-item` elements\n */\n@Component({\n  tag: \"stzh-accordion\",\n  styleUrl: \"stzh-accordion.scss\",\n  shadow: true,\n})\nexport class StzhAccordion {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhAccordionVariant = \"default\";\n\n  /** Heading */\n  @Prop({ reflect: true }) heading: string = \"\";\n\n  /** Whether folds are collapsible */\n  @Prop() collapsible: boolean = true;\n\n  /** Whether multiple folds can be opened at once */\n  @Prop() multiselectable: boolean = true;\n\n  @Element() element: HTMLStzhAccordionElement;\n\n  /** Variant change event */\n  @Event() stzhVariantChange: EventEmitter<StzhAccordionVariantChangeEvent>;\n\n  @State() isNested: boolean;\n\n  @Watch(\"variant\")\n  variantWatcher(newValue: StzhAccordionVariant) {\n    this.stzhVariantChange.emit({\n      component: \"stzh-accordion\",\n      value: newValue,\n    });\n  }\n\n  @Listen(\"stzhOpen\")\n  openListener(event: CustomEvent<StzhAccordionItemOpenEvent>) {\n    const accordionItemOpened = event.target as HTMLStzhAccordionItemElement;\n    const accordionOpened = accordionItemOpened.closest(\"stzh-accordion\");\n\n    if (\n      this.multiselectable ||\n      (event.detail && event.detail.component !== \"stzh-accordion-item\") ||\n      accordionOpened !== this.element\n    ) {\n      return;\n    }\n\n    const items: HTMLStzhAccordionItemElement[] = Array.from(accordionOpened.querySelectorAll(\"stzh-accordion-item\"));\n    items.forEach(item => {\n      if (item !== accordionItemOpened) {\n        item.hide();\n      }\n    });\n  }\n\n  /** Set focus to accordion item */\n  @Method()\n  async setItemFocus(accordionItem: HTMLStzhAccordionItemElement, action: string) {\n    const accordion = accordionItem.closest(\"stzh-accordion\");\n\n    if (accordion !== this.element) {\n      return;\n    }\n\n    const items = (\n      Array.from(accordion.querySelectorAll(\":scope > stzh-accordion-item\")) as HTMLStzhAccordionItemElement[]\n    ).filter(item => !item.disabled);\n\n    const currentIndex = items.indexOf(accordionItem);\n\n    if ((action === \"prev\" || action === \"next\") && currentIndex === null) {\n      action = action === \"prev\" ? \"last\" : \"first\";\n    }\n\n    if (action === \"prev\" && currentIndex === 0) {\n      action = \"last\";\n    }\n\n    if (action === \"next\" && currentIndex === items.length - 1) {\n      action = \"first\";\n    }\n\n    if (action === \"prev\") {\n      items[currentIndex - 1].focus();\n    } else if (action === \"next\") {\n      items[currentIndex + 1].focus();\n    } else if (action === \"last\") {\n      items[items.length - 1].focus();\n    } else if (action === \"first\") {\n      items[0].focus();\n    } else {\n      accordionItem.focus();\n    }\n  }\n\n  private checkIfNested() {\n    let parentElement = this.element.parentElement;\n\n    while (parentElement) {\n      if (parentElement.tagName.toLowerCase() === \"stzh-accordion\") {\n        this.isNested = true;\n        break;\n      }\n      parentElement = parentElement.parentElement;\n    }\n  }\n\n  componentDidLoad() {\n    this.checkIfNested();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-accordion\": true,\n      \"stzh-accordion--is-nested\": this.isNested,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this.heading && (\n            <div class=\"stzh-accordion__heading\">\n              <stzh-heading level=\"2\">{this.heading}</stzh-heading>\n            </div>\n          )}\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-1816eeeb.js → p-d1dcb448.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-8f01554b.js';
-import { d as defineCustomElement$4 } from './p-dd1c0c0c.js';
-import { d as defineCustomElement$3 } from './p-c5a240bd.js';
-import { d as defineCustomElement$2 } from './p-7c4e756c.js';
-import { d as defineCustomElement$1 } from './p-111f7e01.js';
+import { d as defineCustomElement$4 } from './p-42e86bbd.js';
+import { d as defineCustomElement$3 } from './p-a773eb1b.js';
+import { d as defineCustomElement$2 } from './p-a2659715.js';
+import { d as defineCustomElement$1 } from './p-10d1bf15.js';
 
 const stzhTagCss = ".sc-stzh-tag-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-tag-h,[stzh-hidden].sc-stzh-tag-h{display:none}.sc-stzh-tag-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-tag-h *.sc-stzh-tag,.sc-stzh-tag-h *.sc-stzh-tag::before,.sc-stzh-tag-h *.sc-stzh-tag::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-tag-h .has-focus.sc-stzh-tag{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-tag-h .stzh-fylingfocus-focused.sc-stzh-tag{outline-style:none !important}.sc-stzh-tag-h .stzh-fylingfocus-focused.sc-stzh-tag::-moz-focus-inner{border:0 !important}.sc-stzh-tag-h{--color:var(--stzh-tag-color, var(--stzh-color-secondary60));--height:1.5rem;--padding-top:0;--padding-bottom:0;--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--background-color:var(--stzh-tag-background-color, var(--stzh-color-grey20));--hover-color:var(--stzh-tag-hover-color, var(--stzh-color-secondary60));--hover-background-color:var(\n    --stzh-tag-hover-background-color,\n    var(--background-color)\n  );display:inline-flex}[size=large].sc-stzh-tag-h{--height:2rem}[size=default][type=secondary].sc-stzh-tag-h{--background-color:var(\n    --stzh-tag-secondary-background-color,\n    var(--stzh-color-secondary60)\n  )}[type=secondary].sc-stzh-tag-h{--color:var(--stzh-tag-secondary-color, var(--stzh-color-white));--background-color:var(\n    --stzh-tag-secondary-background-color,\n    var(--stzh-color-secondary60)\n  );--hover-color:var(--stzh-tag-secondary-hover-color, var(--stzh-color-white));--hover-background-color:var(\n    --stzh-tag-secondary-hover-background-color,\n    var(--background-color)\n  )}[non-interactive].sc-stzh-tag-h:not([non-interactive=false]){--hover-color:var(--color);--hover-background-color:var(--background-color)}[disabled].sc-stzh-tag-h:not([disabled=false]){--color:var(--stzh-tag-disabled-color, var(--stzh-color-grey70));--background-color:var(\n    --stzh-tag-disabled-background-color,\n    var(--stzh-color-grey20)\n  );--hover-color:var(--color);--hover-background-color:var(--background-color)}.stzh-tag.sc-stzh-tag{position:relative}.stzh-tag__button.sc-stzh-tag{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);font-family:inherit;height:var(--height);display:flex;flex-direction:row;align-items:center;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);color:var(--color);appearance:none;border:none;background-color:var(--background-color);transition-duration:var(--stzh-base-transition-animation-speed);transition-property:color, background-color;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-tag__button.is-button.sc-stzh-tag,.stzh-tag__button.is-link.sc-stzh-tag{cursor:pointer}.stzh-tag__label.sc-stzh-tag{text-align:left}.stzh-tag__button.sc-stzh-tag:hover{color:var(--hover-color);background-color:var(--hover-background-color)}.stzh-tag--size-large.sc-stzh-tag .stzh-tag__button.sc-stzh-tag{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);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)}.stzh-tag--is-disabled.sc-stzh-tag .stzh-tag__button.sc-stzh-tag{cursor:not-allowed}";
 const StzhTagStyle0 = stzhTagCss;
@@ -85,7 +85,7 @@ const StzhTag = /*@__PURE__*/ proxyCustomElement(class StzhTag extends H {
             [`stzh-tag--${this.type}`]: !!this.type,
         };
         const Tag = this.nonInteractive ? "div" : this.href ? "a" : "button";
-        return (h(Host, { key: '8aad47231d864ffd86a6c4cb9fcf97133fb35e92', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'f847abadf73486e73a24fb50b694c20679dba9d9', class: classes }, this.href ? (h(Tag, { ref: el => (this.tag = el), class: {
+        return (h(Host, { key: '7e49900fcacc8ad594ca1b62b47225af5bf73cde', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'ce01e82ddced2f93aeca018a5c746fc69d07a4f8', class: classes }, this.href ? (h(Tag, { ref: el => (this.tag = el), class: {
                 "stzh-tag__button": true,
                 "is-button": !this.nonInteractive && !this.href,
                 "is-link": !this.nonInteractive && !!this.href,
@@ -147,4 +147,4 @@ function defineCustomElement() {
 
 export { StzhTag as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-1816eeeb.js.map
+//# sourceMappingURL=p-d1dcb448.js.map

package/dist/components/{p-1816eeeb.js.map → p-d1dcb448.js.map}

@@ -1 +1 @@
-{"file":"p-1816eeeb.js","mappings":"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","names":[],"sources":["src/components/stzh-tag/stzh-tag.scss?tag=stzh-tag&encapsulation=scoped","src/components/stzh-tag/stzh-tag.tsx"],"sourcesContent":[":host {\n  --color: var(--stzh-tag-color, #{$colorSecondary60});\n  --height: 24px;\n  --padding-top: 0;\n  --padding-bottom: 0;\n  --padding-left: #{space(\"small\")};\n  --padding-right: #{space(\"small\")};\n  --background-color: var(--stzh-tag-background-color, #{$colorGrey20});\n\n  --hover-color: var(--stzh-tag-hover-color, #{$colorSecondary60});\n  --hover-background-color: var(\n    --stzh-tag-hover-background-color,\n    var(--background-color)\n  );\n\n  display: inline-flex;\n\n  &[size=\"large\"] {\n    --height: 32px;\n  }\n\n  &[size=\"default\"][type=\"secondary\"] {\n    --background-color: var(\n      --stzh-tag-secondary-background-color,\n      #{$colorSecondary60}\n    );\n  }\n\n  &[type=\"secondary\"] {\n    --color: var(--stzh-tag-secondary-color, #{$colorWhite});\n    --background-color: var(\n      --stzh-tag-secondary-background-color,\n      #{$colorSecondary60}\n    );\n    --hover-color: var(--stzh-tag-secondary-hover-color, #{$colorWhite});\n    --hover-background-color: var(\n      --stzh-tag-secondary-hover-background-color,\n      var(--background-color)\n    );\n  }\n\n  &[non-interactive]:not([non-interactive=\"false\"]) {\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: var(--stzh-tag-disabled-color, #{$colorGrey70});\n    --background-color: var(\n      --stzh-tag-disabled-background-color,\n      #{$colorGrey20}\n    );\n\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n  }\n}\n\n.stzh-tag {\n  position: relative;\n\n  &__button {\n    @include fontSize(\"nano\");\n    font-family: inherit;\n    height: var(--height);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\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    appearance: none;\n    border: none;\n    background-color: var(--background-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color;\n    text-decoration-line: none;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__label {\n    text-align: left;\n  }\n\n  &__button:hover {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  /* Size */\n\n  &--size-large &__button {\n    @include font(\"heavy\");\n    @include fontSize(\"milli\");\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, Fragment } from \"@stencil/core\";\n\nimport { StzhTagType, StzhTagSize, StzhTagClickEvent, StzhTagFocusEvent, StzhTagBlurEvent } from \"../../index\";\n\n/**\n * @slot - Slot for label\n */\n@Component({\n  tag: \"stzh-tag\",\n  styleUrl: \"stzh-tag.scss\",\n  scoped: true,\n})\nexport class StzhTag {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** `href` if the tag 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  /** Whether tag is not interactive */\n  @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhTagType = \"default\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: StzhTagSize = \"default\";\n\n  /** Disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the link/button */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: 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  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the remove button element.\n   * Default value will be taken from `removeLabel` prop.\n   */\n  @Prop() removeAnalyticsId: string;\n\n  @Element() element: HTMLStzhTagElement;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhTagClickEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhTagFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhTagBlurEvent>;\n\n  private tag: HTMLButtonElement | HTMLAnchorElement | HTMLDivElement;\n  private text: HTMLElement;\n  private focusedByInput: boolean = false;\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      if (!this.nonInteractive) {\n        this.tag?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n      }\n    });\n  }\n\n  private renderInner(): DocumentFragment {\n    return (\n      <Fragment>\n        <stzh-clamp lines={1} class=\"stzh-tag__label\" ref={el => (this.text = el as HTMLElement)}>\n          {this.label ? this.label : <slot></slot>}\n        </stzh-clamp>\n      </Fragment>\n    );\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.tag.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-tag\",\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-tag\",\n      originalEvent: event,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-tag\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  render() {\n    const classes = {\n      \"stzh-tag\": true,\n      \"stzh-tag--is-disabled\": this.disabled,\n      [`stzh-tag--size-${this.size}`]: !!this.size,\n      [`stzh-tag--${this.type}`]: !!this.type,\n    };\n\n    const Tag = this.nonInteractive ? \"div\" : this.href ? \"a\" : \"button\";\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {this.href ? (\n            <Tag\n              ref={el => (this.tag = el as HTMLAnchorElement)}\n              class={{\n                \"stzh-tag__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href,\n              }}\n              href={this.disabled ? null : this.href}\n              target={this.target}\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Tag>\n          ) : (\n            <Tag\n              ref={el => (this.tag = el as HTMLButtonElement | HTMLDivElement)}\n              class={{\n                \"stzh-tag__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href,\n              }}\n              disabled={this.disabled}\n              type=\"button\"\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Tag>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-d1dcb448.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,mzHAAmzH,CAAC;AACv0H,sBAAe,UAAU;;MCWZ,OAAO;;;;;;;QA0DV,mBAAc,GAAY,KAAK,CAAC;QAoBhC,gBAAW,GAAG;YACpB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;gBACxB,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC;aAClB;YAED,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;SAC7B,CAAC;QAEM,YAAO,GAAG,CAAC,KAAiB;YAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAE3B,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,EAAE;gBACzC,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE,KAAK;gBACd,UAAU,EAAE,KAAK;aAClB,CAAC,CAAC;YAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YACvC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,SAAS,EAAE,UAAU;gBACrB,aAAa,EAAE,KAAK;aACrB,CAAC,CAAC;SACJ,CAAC;QAEM,WAAM,GAAG,CAAC,KAAiB;YACjC,MAAM,SAAS,GAAG,IAAI,UAAU,CAAC,MAAM,EAAE;gBACvC,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE,KAAK;gBACd,UAAU,EAAE,KAAK;aAClB,CAAC,CAAC;YAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;YACtC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;gBACjB,SAAS,EAAE,UAAU;gBACrB,aAAa,EAAE,KAAK;aACrB,CAAC,CAAC;SACJ,CAAC;QAEM,YAAO,GAAG,CAAC,KAAiB;YAClC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,SAAS,EAAE,UAAU;gBACrB,aAAa,EAAE,KAAK;gBACpB,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,CAAC;SACJ,CAAC;qBAxHsB,EAAE;oBAGH,EAAE;sBAGA,EAAE;8BAGwB,KAAK;oBAGX,SAAS;oBAGT,SAAS;wBAGT,KAAK;;;+BASiB,EAAE;;;;IA+BrE,kBAAkB;QAChB,qBAAqB,CAAC;;YACpB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;gBACxB,MAAA,IAAI,CAAC,GAAG,0CAAE,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;aAChF;SACF,CAAC,CAAC;KACJ;IAEO,WAAW;QACjB,QACE,EAAC,QAAQ,QACP,kBAAY,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,iBAAiB,EAAC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,IAAI,GAAG,EAAiB,CAAC,IACrF,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,eAAa,CAC7B,CACJ,EACX;KACH;IAgDD,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,UAAU,EAAE,IAAI;YAChB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;YACtC,CAAC,kBAAkB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;YAC5C,CAAC,aAAa,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;SACxC,CAAC;QAEF,MAAM,GAAG,GAAG,IAAI,CAAC,cAAc,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAC;QAErE,QACE,EAAC,IAAI,qDAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,IACpE,4DAAK,KAAK,EAAE,OAAO,IAChB,IAAI,CAAC,IAAI,IACR,EAAC,GAAG,IACF,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,GAAG,GAAG,EAAuB,CAAC,EAC/C,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;gBACxB,WAAW,EAAE,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,IAAI;gBAC/C,SAAS,EAAE,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI;aAC/C,EACD,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EACtC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,YAAY,gBACf,IAAI,CAAC,SAAS,IAAI,IAAI,sBAChB,IAAI,CAAC,eAAe,IAAI,IAAI,EAC9C,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,IAElB,IAAI,CAAC,WAAW,EAAE,CACf,KAEN,EAAC,GAAG,IACF,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,GAAG,GAAG,EAAwC,CAAC,EAChE,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;gBACxB,WAAW,EAAE,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,IAAI;gBAC/C,SAAS,EAAE,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI;aAC/C,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,YAAY,gBACf,IAAI,CAAC,SAAS,IAAI,IAAI,sBAChB,IAAI,CAAC,eAAe,IAAI,IAAI,EAC9C,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,IAElB,IAAI,CAAC,WAAW,EAAE,CACf,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-tag/stzh-tag.scss?tag=stzh-tag&encapsulation=scoped","src/components/stzh-tag/stzh-tag.tsx"],"sourcesContent":[":host {\n  --color: var(--stzh-tag-color, #{$colorSecondary60});\n  --height: 24px;\n  --padding-top: 0;\n  --padding-bottom: 0;\n  --padding-left: #{space(\"small\")};\n  --padding-right: #{space(\"small\")};\n  --background-color: var(--stzh-tag-background-color, #{$colorGrey20});\n\n  --hover-color: var(--stzh-tag-hover-color, #{$colorSecondary60});\n  --hover-background-color: var(\n    --stzh-tag-hover-background-color,\n    var(--background-color)\n  );\n\n  display: inline-flex;\n\n  &[size=\"large\"] {\n    --height: 32px;\n  }\n\n  &[size=\"default\"][type=\"secondary\"] {\n    --background-color: var(\n      --stzh-tag-secondary-background-color,\n      #{$colorSecondary60}\n    );\n  }\n\n  &[type=\"secondary\"] {\n    --color: var(--stzh-tag-secondary-color, #{$colorWhite});\n    --background-color: var(\n      --stzh-tag-secondary-background-color,\n      #{$colorSecondary60}\n    );\n    --hover-color: var(--stzh-tag-secondary-hover-color, #{$colorWhite});\n    --hover-background-color: var(\n      --stzh-tag-secondary-hover-background-color,\n      var(--background-color)\n    );\n  }\n\n  &[non-interactive]:not([non-interactive=\"false\"]) {\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: var(--stzh-tag-disabled-color, #{$colorGrey70});\n    --background-color: var(\n      --stzh-tag-disabled-background-color,\n      #{$colorGrey20}\n    );\n\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n  }\n}\n\n.stzh-tag {\n  position: relative;\n\n  &__button {\n    @include fontSize(\"nano\");\n    font-family: inherit;\n    height: var(--height);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\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    appearance: none;\n    border: none;\n    background-color: var(--background-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color;\n    text-decoration-line: none;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__label {\n    text-align: left;\n  }\n\n  &__button:hover {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  /* Size */\n\n  &--size-large &__button {\n    @include font(\"heavy\");\n    @include fontSize(\"milli\");\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, Fragment } from \"@stencil/core\";\n\nimport { StzhTagType, StzhTagSize, StzhTagClickEvent, StzhTagFocusEvent, StzhTagBlurEvent } from \"../../index\";\n\n/**\n * @slot - Slot for label\n */\n@Component({\n  tag: \"stzh-tag\",\n  styleUrl: \"stzh-tag.scss\",\n  scoped: true,\n})\nexport class StzhTag {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** `href` if the tag 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  /** Whether tag is not interactive */\n  @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhTagType = \"default\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: StzhTagSize = \"default\";\n\n  /** Disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the link/button */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: 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  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the remove button element.\n   * Default value will be taken from `removeLabel` prop.\n   */\n  @Prop() removeAnalyticsId: string;\n\n  @Element() element: HTMLStzhTagElement;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhTagClickEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhTagFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhTagBlurEvent>;\n\n  private tag: HTMLButtonElement | HTMLAnchorElement | HTMLDivElement;\n  private text: HTMLElement;\n  private focusedByInput: boolean = false;\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      if (!this.nonInteractive) {\n        this.tag?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n      }\n    });\n  }\n\n  private renderInner(): DocumentFragment {\n    return (\n      <Fragment>\n        <stzh-clamp lines={1} class=\"stzh-tag__label\" ref={el => (this.text = el as HTMLElement)}>\n          {this.label ? this.label : <slot></slot>}\n        </stzh-clamp>\n      </Fragment>\n    );\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.tag.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-tag\",\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-tag\",\n      originalEvent: event,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-tag\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  render() {\n    const classes = {\n      \"stzh-tag\": true,\n      \"stzh-tag--is-disabled\": this.disabled,\n      [`stzh-tag--size-${this.size}`]: !!this.size,\n      [`stzh-tag--${this.type}`]: !!this.type,\n    };\n\n    const Tag = this.nonInteractive ? \"div\" : this.href ? \"a\" : \"button\";\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {this.href ? (\n            <Tag\n              ref={el => (this.tag = el as HTMLAnchorElement)}\n              class={{\n                \"stzh-tag__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href,\n              }}\n              href={this.disabled ? null : this.href}\n              target={this.target}\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Tag>\n          ) : (\n            <Tag\n              ref={el => (this.tag = el as HTMLButtonElement | HTMLDivElement)}\n              class={{\n                \"stzh-tag__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href,\n              }}\n              disabled={this.disabled}\n              type=\"button\"\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Tag>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-fdc914f5.js → p-ddb9cb15.js}

@@ -1,11 +1,11 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-8f01554b.js';
 import { a as addWordBreakToLinks } from './p-289f5de2.js';
-import { d as defineCustomElement$6 } from './p-dd1c0c0c.js';
-import { d as defineCustomElement$5 } from './p-4a78990f.js';
-import { d as defineCustomElement$4 } from './p-7c4e756c.js';
-import { d as defineCustomElement$3 } from './p-72101ea0.js';
-import { d as defineCustomElement$2 } from './p-63c4d8c4.js';
-import { d as defineCustomElement$1 } from './p-613937f1.js';
+import { d as defineCustomElement$6 } from './p-42e86bbd.js';
+import { d as defineCustomElement$5 } from './p-b84d0233.js';
+import { d as defineCustomElement$4 } from './p-a2659715.js';
+import { d as defineCustomElement$3 } from './p-85a0cd24.js';
+import { d as defineCustomElement$2 } from './p-ace11500.js';
+import { d as defineCustomElement$1 } from './p-95b36277.js';
 
 const stzhDatalistItemCss = ".sc-stzh-datalist-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-datalist-item-h,[stzh-hidden].sc-stzh-datalist-item-h{display:none}.sc-stzh-datalist-item-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datalist-item-h *.sc-stzh-datalist-item,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::before,.sc-stzh-datalist-item-h *.sc-stzh-datalist-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-datalist-item-h .has-focus.sc-stzh-datalist-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item{outline-style:none !important}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item::-moz-focus-inner{border:0 !important}.sc-stzh-datalist-item-h{--value-font-family:var(--stzh-font-family-medium);--value-font-weight:var(--stzh-font-weight-medium);--value-color:inherit;--action-display:flex;--leading-icon-color:var(--stzh-color-grey90);--nested-display:var(--stzh-datalist-item-nested-display, block);--wrapper-display:var(--stzh-datalist-item-wrapper-display, contents);--text-overflow:clip;--white-space:normal;--overflow:visible;--width:initial;--max-width:initial;display:contents}[href].sc-stzh-datalist-item-h:not([href=\"\"]),[a11y-expanded].sc-stzh-datalist-item-h,[a11y-controls].sc-stzh-datalist-item-h{--value-color:var(--stzh-link-color);--value-hover-color:var(--stzh-link-hover-color)}.value-truncate.sc-stzh-datalist-item-h{--text-overflow:ellipsis;--white-space:nowrap;--overflow:hidden;--max-width:100%}.stzh-datalist-item.sc-stzh-datalist-item{position:relative;-webkit-text-decoration-line:none;text-decoration-line:none;display:var(--wrapper-display);align-items:center}.stzh-datalist-item__nested.sc-stzh-datalist-item{display:contents}.stzh-datalist-item__nested-inner.sc-stzh-datalist-item{display:var(--nested-display);grid-column:var(--full-grid-column)}.stzh-datalist-item__vhidden.sc-stzh-datalist-item{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-datalist-item__wrapper.sc-stzh-datalist-item{flex-grow:1;display:grid}.stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item__action-list.sc-stzh-datalist-item{color:inherit;display:flex;text-align:left;appearance:none;font-family:inherit;background:transparent;border:none;padding:0;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__leading.is-button.sc-stzh-datalist-item,.stzh-datalist-item__leading.is-link.sc-stzh-datalist-item,.stzh-datalist-item__value.is-button.sc-stzh-datalist-item,.stzh-datalist-item__value.is-link.sc-stzh-datalist-item,.stzh-datalist-item__label.is-button.sc-stzh-datalist-item,.stzh-datalist-item__label.is-link.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-button.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-link.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-button.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-link.sc-stzh-datalist-item{cursor:pointer}.stzh-datalist-item__leading.sc-stzh-datalist-item{flex-shrink:0}.stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty){padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--leading-icon-color);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value-wrapper.sc-stzh-datalist-item{display:flex;align-items:center;gap:var(--stzh-space-xsmall);color:var(--value-color);transition:color var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value.sc-stzh-datalist-item{flex-grow:1;flex-direction:column;min-width:0}.stzh-datalist-item__value-text.sc-stzh-datalist-item{--color:initial;min-width:0;font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);font-family:var(--value-font-family);font-weight:var(--value-font-weight);width:auto}@media screen and (min-width: 900px){.stzh-datalist-item__value-text.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 900px){.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-datalist-item__meta.sc-stzh-datalist-item{justify-content:flex-end}.stzh-datalist-item__meta-text.sc-stzh-datalist-item{display:flex;gap:var(--stzh-space-xsmall);color:var(--stzh-color-grey70)}.stzh-datalist-item__label.sc-stzh-datalist-item{color:var(--stzh-color-grey90)}.stzh-datalist-item__action-list.sc-stzh-datalist-item{display:var(--action-display);justify-content:center;text-align:center}.stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-medium)}.stzh-datalist-item__action.is-non-interactive.sc-stzh-datalist-item{display:flex;justify-content:center;align-items:center;width:var(--stzh-form-input-small-height);height:var(--stzh-form-input-small-height)}.stzh-datalist-item__interactive.sc-stzh-datalist-item{position:absolute;top:0;left:0}.stzh-datalist-item__readspeaker.sc-stzh-datalist-item{width:-moz-fit-content;width:fit-content}.stzh-datalist-item--is-button.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-closed.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:inline-flex}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item .stzh-datalist-item__value-text.sc-stzh-datalist-item{-webkit-text-decoration-line:underline;text-decoration-line:underline}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value-wrapper.sc-stzh-datalist-item{color:var(--value-hover-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__wrapper.sc-stzh-datalist-item{flex-grow:inherit}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__wrapper.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{flex-direction:column;align-items:flex-start}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xxsmall);padding-bottom:var(--stzh-space-xxsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-bottom:var(--stzh-space-xxsmall);padding-top:calc(var(--stzh-space-xxsmall) + 0.75rem)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__readspeaker.sc-stzh-datalist-item{padding-bottom:var(--stzh-space-xxsmall);padding-top:var(--stzh-space-xxsmall);padding-left:var(--stzh-space-medium)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta-status.sc-stzh-datalist-item+.stzh-datalist-item__meta-text.sc-stzh-datalist-item{margin-left:var(--stzh-space-xsmall)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item{color:var(--stzh-color-grey70)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__value-text.sc-stzh-datalist-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)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-small)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty)+.stzh-datalist-item__value.sc-stzh-datalist-item{padding-left:var(--stzh-space-medium)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-medium)}.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--stzh-color-grey80)}.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:0;padding-bottom:0}@media screen and (min-width: 600px){.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-small)}}.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty)+.stzh-datalist-item__value.sc-stzh-datalist-item{padding-left:var(--stzh-space-medium)}@media screen and (max-width: 599px){.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty)+.stzh-datalist-item__value.sc-stzh-datalist-item{padding-left:0}}";
 const StzhDatalistItemStyle0 = stzhDatalistItemCss;
@@ -265,4 +265,4 @@ function defineCustomElement() {
 
 export { StzhDatalistItem as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-fdc914f5.js.map
+//# sourceMappingURL=p-ddb9cb15.js.map

package/dist/components/{p-fdc914f5.js.map → p-ddb9cb15.js.map}

@@ -1 +1 @@
-{"file":"p-fdc914f5.js","mappings":"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","names":[],"sources":["src/components/stzh-datalist-item/stzh-datalist-item.scss?tag=stzh-datalist-item&encapsulation=scoped","src/components/stzh-datalist-item/stzh-datalist-item.tsx"],"sourcesContent":[":host {\n  --value-font-family: var(--stzh-font-family-medium);\n  --value-font-weight: var(--stzh-font-weight-medium);\n  --value-color: inherit;\n  --action-display: flex;\n  --leading-icon-color: #{$colorGrey90};\n  --nested-display: var(--stzh-datalist-item-nested-display, block);\n  --wrapper-display: var(--stzh-datalist-item-wrapper-display, contents);\n\n  --text-overflow: clip;\n  --white-space: normal;\n  --overflow: visible;\n  --width: initial;\n  --max-width: initial;\n\n  display: contents;\n\n  &[href]:not([href=\"\"]),\n  &[a11y-expanded],\n  &[a11y-controls] {\n    --value-color: #{$linkColor};\n    --value-hover-color: #{$linkHoverColor};\n  }\n}\n\n:host(.value-truncate) {\n  --text-overflow: ellipsis;\n  --white-space: nowrap;\n  --overflow: hidden;\n  --max-width: 100%;\n}\n\n.stzh-datalist-item {\n  position: relative;\n  text-decoration-line: none;\n  display: var(--wrapper-display);\n  align-items: center;\n\n  &__nested {\n    display: contents;\n  }\n\n  &__nested-inner {\n    display: var(--nested-display);\n    grid-column: var(--full-grid-column);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__wrapper {\n    flex-grow: 1;\n    display: grid;\n  }\n\n  &__leading,\n  &__value,\n  &__label,\n  &__meta,\n  &__action-list {\n    color: inherit;\n    display: flex;\n    text-align: left;\n    appearance: none;\n    font-family: inherit;\n    background: transparent;\n    border: none;\n    padding: 0;\n    text-decoration-line: none;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__leading {\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      padding-right: space(\"xsmall\");\n    }\n  }\n\n  &__leading-icon-container {\n    color: var(--leading-icon-color);\n    transition-property: color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__value-wrapper {\n    display: flex;\n    align-items: center;\n    gap: space(\"xsmall\");\n    color: var(--value-color);\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  &__value {\n    flex-grow: 1;\n    flex-direction: column;\n    min-width: 0;\n  }\n\n  &__value-text {\n    --color: initial;\n    min-width: 0;\n\n    @include fontCurve(\"p1\");\n    font-family: var(--value-font-family);\n    font-weight: var(--value-font-weight);\n    width: auto;\n  }\n\n  &__label,\n  &__meta {\n    @include fontCurve(\"caption\");\n  }\n\n  &__meta {\n    justify-content: flex-end;\n  }\n\n  &__meta-text {\n    display: flex;\n    gap: space(\"xsmall\");\n    color: $colorGrey70;\n  }\n\n  &__label {\n    color: $colorGrey90;\n  }\n\n  &__action-list {\n    display: var(--action-display);\n    justify-content: center;\n    text-align: center;\n\n    &:not(:empty) {\n      padding-left: space(\"medium\");\n    }\n  }\n\n  &__action {\n    &.is-non-interactive {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: $formInputHeightSmall;\n      height: $formInputHeightSmall;\n    }\n  }\n\n  &__interactive {\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  &__readspeaker {\n    width: fit-content;\n  }\n\n  /* Button variant */\n\n  &--is-button &__icon.is-open {\n    display: none;\n  }\n\n  &--is-button#{&}--is-expanded &__icon {\n    &.is-closed {\n      display: none;\n    }\n\n    &.is-open {\n      display: inline-flex;\n    }\n  }\n\n  /* Interactive variant */\n\n  &--is-interactive &__value-text {\n    text-decoration-line: underline;\n  }\n\n  &--is-interactive:hover &__value-wrapper {\n    color: var(--value-hover-color);\n  }\n\n  /* Vertical Variant */\n\n  &--direction-vertical &__wrapper {\n    flex-grow: inherit;\n  }\n\n  &--direction-vertical &__leading,\n  &--direction-vertical &__wrapper,\n  &--direction-vertical &__action-list {\n    &:not(:empty) {\n      padding-top: space(\"xsmall\");\n      padding-bottom: space(\"xsmall\");\n    }\n  }\n\n  &--direction-vertical &__meta {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  /* Horizontal / Table Variant */\n\n  &--direction-horizontal &__leading,\n  &--direction-horizontal &__value,\n  &--direction-horizontal &__action-list {\n    &:not(:empty) {\n      padding-top: space(\"xxsmall\");\n      padding-bottom: space(\"xxsmall\");\n    }\n  }\n\n  &--direction-horizontal &__meta {\n    padding-bottom: space(\"xxsmall\");\n    padding-top: calc(#{space(\"xxsmall\")} + 12px);\n  }\n\n  &--direction-horizontal &__readspeaker {\n    padding-bottom: space(\"xxsmall\");\n    padding-top: space(\"xxsmall\");\n    padding-left: space(\"medium\");\n  }\n\n  &--direction-horizontal &__meta {\n    &:not(:empty) {\n      padding-left: space(\"xsmall\");\n    }\n  }\n\n  &--direction-horizontal &__meta-status + &__meta-text {\n    margin-left: space(\"xsmall\");\n  }\n\n  /** Table Variant */\n\n  &--table &__label,\n  &--table &__meta {\n    @include fontSize(\"nano\");\n  }\n\n  &--table &__label {\n    color: $colorGrey70;\n  }\n\n  &--table &__value-text {\n    @include fontSize(\"milli\");\n  }\n\n  &--table &__leading,\n  &--table &__value,\n  &--table &__label,\n  &--table &__meta,\n  &--table &__action-list {\n    &:not(:empty) {\n      padding-top: space(\"xsmall\");\n      padding-bottom: space(\"small\");\n    }\n  }\n\n  &--table &__label:not(:empty) + &__value {\n    padding-left: space(\"medium\");\n  }\n\n  &--table &__meta {\n    &:not(:empty) {\n      padding-left: space(\"medium\");\n    }\n  }\n\n  /** Big label */\n\n  &--table#{&}--big-label &__label {\n    @include font(\"heavy\");\n    @include fontSize(\"milli\");\n    color: $colorGrey80;\n  }\n\n  &--table#{&}--big-label &__leading,\n  &--table#{&}--big-label &__value,\n  &--table#{&}--big-label &__label,\n  &--table#{&}--big-label &__meta,\n  &--table#{&}--big-label &__action-list {\n    &:not(:empty) {\n      padding-top: 0;\n      padding-bottom: 0;\n\n      @include mq($from: small) {\n        padding-top: space(\"xsmall\");\n        padding-bottom: space(\"small\");\n      }\n    }\n  }\n\n  &--table#{&}--big-label &__label:not(:empty) + &__value {\n    padding-left: space(\"medium\");\n\n    @include mq($to: small) {\n      padding-left: 0;\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Host, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  StzhDatalistBigLabelChangeEvent,\n  StzhDatalistDirection,\n  StzhDatalistDirectionChangeEvent,\n  StzhDatalistItemActionClickEvent,\n  StzhDatalistItemClickEvent,\n  StzhDatalistVariant,\n  StzhDatalistVariantChangeEvent,\n  StzhStatusType,\n} from \"../../index\";\n\nimport { addWordBreakToLinks } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nlet datalistItemCounter = 0;\n\n/**\n * @slot - Slot for nested datalist\n * @slot value - Slot for value (or use value slot instead)\n * @slot readspeaker - Slot for readspeaker\n */\n@Component({\n  tag: \"stzh-datalist-item\",\n  styleUrl: \"stzh-datalist-item.scss\",\n  scoped: true,\n})\nexport class StzhDatalistItem {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Link */\n  @Prop({ reflect: true }) href: string;\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target (if href is used) */\n  @Prop() target: string;\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** Leading icon */\n  @Prop() leadingIcon: string;\n\n  /** Icon of action button (if href is used, will only be for presentation) */\n  @Prop() icon: string;\n\n  /** Icon position */\n  @Prop() iconPosition: \"left\" | \"right\" = \"right\";\n\n  /** Overwrite aria-label of action button (default aria label is `label` and `value`). */\n  @Prop() iconLabel: string;\n\n  /** Tooltip content of action button. Overwrites aria-label (set by default or `iconLabel`) of action button. */\n  @Prop() iconTooltip: string;\n\n  /** Href of action button */\n  @Prop() iconHref: string;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Value (or use value slot instead) */\n  @Prop() value: string = \"\";\n\n  /** Whether value should be truncate or not */\n  @Prop() valueTruncate: boolean = false;\n\n  /** Readspeaker label */\n  @Prop() readspeakerLabel: string = \"\";\n\n  /** Readspeaker link */\n  @Prop() readspeakerHref: string = \"\";\n\n  /** Meta */\n  @Prop({ reflect: true }) meta: string | string[] = \"\";\n  private _meta: string[] = [];\n\n  /** Status Label */\n  @Prop({ reflect: true }) statusLabel: string = \"\";\n\n  /** Status Type */\n  @Prop() statusType: StzhStatusType = \"default\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Whether the item has child items (only used internally by stzh-datalist). */\n  @Prop() hasNested: boolean = false;\n\n  /** Item action click event */\n  @Event() stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;\n\n  /** Item click event */\n  @Event() stzhClick: EventEmitter<StzhDatalistItemClickEvent>;\n\n  @Element() element: HTMLStzhDatalistItemElement;\n\n  @Watch(\"meta\")\n  metaWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._meta = JSON.parse(newValue);\n      } catch (ex) {\n        this._meta = newValue === \"\" ? [] : [newValue];\n      }\n    } else {\n      this._meta = newValue;\n    }\n  }\n\n  @Watch(\"rel\")\n  externalWatcher() {\n    this.external = this.rel && this.rel.includes(\"external\");\n  }\n\n  @Watch(\"href\")\n  hrefWatcher() {\n    this.isPhone = this.href && (this.href.startsWith(\"tel:\") || this.href.startsWith(\"fax:\"));\n  }\n\n  @State() direction: StzhDatalistDirection = \"vertical\";\n  @State() variant: StzhDatalistVariant = \"default\";\n  @State() bigLabel: boolean = false;\n\n  private external: boolean = false;\n  private isPhone: boolean = false;\n  private datalist: HTMLStzhDatalistElement;\n  private datalistItemId: string;\n\n  private onActionClick = (originalEvent: MouseEvent) => {\n    this.stzhItemActionClick.emit({\n      component: \"stzh-datalist-item\",\n      originalEvent,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-datalist-item\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  private handleDirectionChange = (event: CustomEvent<StzhDatalistDirectionChangeEvent>) => {\n    this.direction = event.detail.value;\n  };\n\n  private handleVariantChange = (event: CustomEvent<StzhDatalistVariantChangeEvent>) => {\n    this.variant = event.detail.value;\n  };\n\n  private handleBigLabelChange = (event: CustomEvent<StzhDatalistBigLabelChangeEvent>) => {\n    this.bigLabel = event.detail.value;\n  };\n\n  private addWordBreakToLinks() {\n    const links = Array.from(this.element?.getElementsByClassName(\"stzh-datalist-item__value-text\") || []);\n    addWordBreakToLinks(links as HTMLElement[]);\n  }\n\n  private renderInner(isButton: boolean, hasActionButton: boolean): DocumentFragment {\n    const Item = isButton ? \"button\" : this.href ? \"a\" : \"div\";\n\n    const Icon = () => (\n      <Fragment>\n        {(this.href || this.icon) && !hasActionButton && !isButton && (\n          <div class=\"stzh-datalist-item__label-icon\">\n            <stzh-icon\n              class=\"stzh-datalist-item__icon\"\n              name={this.icon ? this.icon : this.isPhone ? \"phone\" : this.external && \"external-link\"}\n            ></stzh-icon>\n          </div>\n        )}\n\n        {isButton && (\n          <div class=\"stzh-datalist-item__label-icon\">\n            <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n            <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n          </div>\n        )}\n      </Fragment>\n    );\n\n    return (\n      <Fragment>\n        {this.variant === \"table\" && (\n          <Item\n            aria-hidden={this.label ? null : \"true\"}\n            tabindex=\"-1\"\n            id={`${this.datalistItemId}-label`}\n            class={{\n              \"stzh-datalist-item__label\": true,\n              \"is-button\": isButton,\n              \"is-link\": !!this.href,\n            }}\n            href={this.href}\n            rel={this.rel}\n            target={this.target}\n            download={this.download}\n            onClick={this.onClick}\n          >\n            {this.label}\n          </Item>\n        )}\n\n        <Item\n          id={`${this.datalistItemId}-value`}\n          class={{\n            \"stzh-datalist-item__value\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href,\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n          // aria-labelledby={Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n          aria-labelledby={\n            Item !== \"div\"\n              ? `${this.variant === \"table\" ? `${this.datalistItemId}-label` : \"\"} ${this.datalistItemId}-value ${\n                  this.datalistItemId\n                }-meta`\n              : null\n          }\n          aria-controls={this.a11yControls || null}\n          aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n          onClick={this.onClick}\n        >\n          {this.variant === \"default\" && <div class=\"stzh-datalist-item__label\">{this.label}</div>}\n\n          {this.external && (\n            <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.externalLinkLabel}</div>\n          )}\n          {this.download && (\n            <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>\n          )}\n\n          <div class=\"stzh-datalist-item__value-wrapper\">\n            {this.iconPosition === \"left\" && <Icon></Icon>}\n            {this.value ? (\n              <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\" innerHTML={this.value}></stzh-text>\n            ) : (\n              <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\">\n                <slot name=\"value\"></slot>\n              </stzh-text>\n            )}\n            {this.iconPosition === \"right\" && <Icon></Icon>}\n          </div>\n        </Item>\n\n        <Item\n          aria-hidden={this.statusLabel || this._meta.length > 0 ? null : \"true\"}\n          tabindex=\"-1\"\n          id={`${this.datalistItemId}-meta`}\n          class={{\n            \"stzh-datalist-item__meta\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href,\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n          onClick={this.onClick}\n        >\n          {this.statusLabel && (\n            <stzh-status\n              class=\"stzh-datalist-item__meta-status\"\n              label={this.statusLabel}\n              type={this.statusType}\n            ></stzh-status>\n          )}\n          {this._meta.length > 0 && (\n            <span class=\"stzh-datalist-item__meta-text\">\n              {this._meta.map((meta, index) => (\n                <Fragment>\n                  <span class=\"stzh-datalist-item__meta-text-inner\">{meta}</span>\n                  {index + 1 !== this._meta.length && <span class=\"stzh-datalist-item__meta-separator\">|</span>}\n                </Fragment>\n              ))}\n            </span>\n          )}\n        </Item>\n\n        {this.readspeakerHref && this.readspeakerLabel && (\n          <stzh-button\n            class=\"stzh-datalist-item__readspeaker\"\n            variant=\"tertiary-plain\"\n            no-padding-left=\"true\"\n            no-padding-right=\"true\"\n            icon-position=\"right\"\n            icon=\"volume-medium\"\n            size=\"small\"\n            href={this.readspeakerHref}\n            target=\"_blank\"\n          >\n            {this.readspeakerLabel}\n          </stzh-button>\n        )}\n      </Fragment>\n    );\n  }\n\n  private renderLeadingIcon(isButton: boolean): HTMLElement {\n    const Item = isButton ? \"button\" : this.href ? \"a\" : \"div\";\n\n    return (\n      <Item\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        tabindex=\"-1\"\n        class={{\n          \"stzh-datalist-item__leading\": true,\n          \"is-button\": isButton,\n          \"is-link\": !!this.href,\n        }}\n        href={this.href}\n        rel={this.rel}\n        target={this.target}\n        download={this.download}\n        onClick={this.onClick}\n      >\n        {this.leadingIcon && (\n          <div class=\"stzh-datalist-item__leading-icon-container\">\n            <stzh-icon class=\"stzh-datalist-item__leading-icon\" name={this.leadingIcon}></stzh-icon>\n          </div>\n        )}\n      </Item>\n    );\n  }\n\n  async componentDidLoad() {\n    // execute connectedCallbck again, because sometimes has problem rendering\n    this.connectedCallback();\n    this.addWordBreakToLinks();\n  }\n\n  async componentWillLoad() {\n    this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;\n    this.metaWatcher(this.meta);\n    this.externalWatcher();\n    this.hrefWatcher();\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datalist-item\");\n    }\n  }\n\n  async connectedCallback() {\n    this.datalist = this.element.closest(\"stzh-datalist\");\n\n    if (this.datalist) {\n      this.variant = this.datalist.variant;\n      this.bigLabel = this.datalist.bigLabel;\n      this.direction = await this.datalist.getCurrentDirection();\n\n      this.datalist?.addEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist?.addEventListener(\"stzhVariantChange\", this.handleVariantChange);\n      this.datalist?.addEventListener(\"stzhBigLabelChange\", this.handleBigLabelChange);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.datalist) {\n      this.datalist?.removeEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist?.removeEventListener(\"stzhVariantChange\", this.handleVariantChange);\n      this.datalist?.removeEventListener(\"stzhBigLabelChange\", this.handleBigLabelChange);\n      this.datalist = null;\n    }\n  }\n\n  render() {\n    const isButton = typeof this.a11yExpanded !== \"undefined\" || typeof this.a11yControls !== \"undefined\";\n\n    const hasActionButton = !!((!this.href || this.iconHref || this.iconTooltip) && this.icon);\n\n    const classes = {\n      \"stzh-datalist-item\": true,\n      \"stzh-datalist-item--is-interactive\": !!this.href || isButton,\n      \"stzh-datalist-item--is-link\": !!this.href,\n      \"stzh-datalist-item--is-button\": isButton,\n      \"stzh-datalist-item--is-expanded\": this.a11yExpanded,\n      \"stzh-datalist-item--big-label\": this.bigLabel,\n      [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction && this.variant === \"default\",\n      [`stzh-datalist-item--${this.variant}`]: !!this.variant,\n    };\n\n    let ActionItem = isButton ? \"button\" : hasActionButton ? \"div\" : \"a\";\n\n    const ActionButton = () => {\n      return (\n        <stzh-button\n          class={{\n            \"stzh-datalist-item__action\": true,\n            \"is-button\": true,\n          }}\n          variant=\"tertiary\"\n          size=\"small\"\n          aria-label={this.iconLabel}\n          iconOnly={true}\n          href={this.iconHref}\n          icon={this.icon}\n          onClick={this.onActionClick}\n        ></stzh-button>\n      );\n    };\n\n    return (\n      <Host role=\"listitem\" class={{ \"value-truncate\": this.valueTruncate }}>\n        <div class={classes}>\n          {this.direction === \"horizontal\" || this.variant === \"table\" ? (\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              {this.renderInner(isButton, hasActionButton)}\n            </Fragment>\n          ) : (\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              <div class=\"stzh-datalist-item__wrapper\">{this.renderInner(isButton, hasActionButton)}</div>\n            </Fragment>\n          )}\n          <ActionItem\n            role={hasActionButton ? null : \"presentation\"}\n            aria-hidden={hasActionButton ? null : \"true\"}\n            tabindex=\"-1\"\n            class={{\n              \"stzh-datalist-item__action-list\": true,\n              \"is-button\": isButton,\n              \"is-link\": !!this.href && !this.iconHref,\n            }}\n            href={!this.iconHref ? this.href : null}\n            rel={!this.iconHref ? this.rel : null}\n            target={!this.iconHref ? this.target : null}\n            download={!this.iconHref ? this.download : null}\n          >\n            {hasActionButton &&\n              (this.iconTooltip ? (\n                <stzh-tooltip content={this.iconTooltip}>{ActionButton()}</stzh-tooltip>\n              ) : (\n                ActionButton()\n              ))}\n          </ActionItem>\n\n          <div class=\"stzh-datalist-item__spacer\"></div>\n        </div>\n        {this.hasNested && (\n          <div class=\"stzh-datalist-item__nested\">\n            <div class=\"stzh-datalist-item__nested-inner\">\n              <slot></slot>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-ddb9cb15.js","mappings":"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","names":[],"sources":["src/components/stzh-datalist-item/stzh-datalist-item.scss?tag=stzh-datalist-item&encapsulation=scoped","src/components/stzh-datalist-item/stzh-datalist-item.tsx"],"sourcesContent":[":host {\n  --value-font-family: var(--stzh-font-family-medium);\n  --value-font-weight: var(--stzh-font-weight-medium);\n  --value-color: inherit;\n  --action-display: flex;\n  --leading-icon-color: #{$colorGrey90};\n  --nested-display: var(--stzh-datalist-item-nested-display, block);\n  --wrapper-display: var(--stzh-datalist-item-wrapper-display, contents);\n\n  --text-overflow: clip;\n  --white-space: normal;\n  --overflow: visible;\n  --width: initial;\n  --max-width: initial;\n\n  display: contents;\n\n  &[href]:not([href=\"\"]),\n  &[a11y-expanded],\n  &[a11y-controls] {\n    --value-color: #{$linkColor};\n    --value-hover-color: #{$linkHoverColor};\n  }\n}\n\n:host(.value-truncate) {\n  --text-overflow: ellipsis;\n  --white-space: nowrap;\n  --overflow: hidden;\n  --max-width: 100%;\n}\n\n.stzh-datalist-item {\n  position: relative;\n  text-decoration-line: none;\n  display: var(--wrapper-display);\n  align-items: center;\n\n  &__nested {\n    display: contents;\n  }\n\n  &__nested-inner {\n    display: var(--nested-display);\n    grid-column: var(--full-grid-column);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__wrapper {\n    flex-grow: 1;\n    display: grid;\n  }\n\n  &__leading,\n  &__value,\n  &__label,\n  &__meta,\n  &__action-list {\n    color: inherit;\n    display: flex;\n    text-align: left;\n    appearance: none;\n    font-family: inherit;\n    background: transparent;\n    border: none;\n    padding: 0;\n    text-decoration-line: none;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__leading {\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      padding-right: space(\"xsmall\");\n    }\n  }\n\n  &__leading-icon-container {\n    color: var(--leading-icon-color);\n    transition-property: color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__value-wrapper {\n    display: flex;\n    align-items: center;\n    gap: space(\"xsmall\");\n    color: var(--value-color);\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  &__value {\n    flex-grow: 1;\n    flex-direction: column;\n    min-width: 0;\n  }\n\n  &__value-text {\n    --color: initial;\n    min-width: 0;\n\n    @include fontCurve(\"p1\");\n    font-family: var(--value-font-family);\n    font-weight: var(--value-font-weight);\n    width: auto;\n  }\n\n  &__label,\n  &__meta {\n    @include fontCurve(\"caption\");\n  }\n\n  &__meta {\n    justify-content: flex-end;\n  }\n\n  &__meta-text {\n    display: flex;\n    gap: space(\"xsmall\");\n    color: $colorGrey70;\n  }\n\n  &__label {\n    color: $colorGrey90;\n  }\n\n  &__action-list {\n    display: var(--action-display);\n    justify-content: center;\n    text-align: center;\n\n    &:not(:empty) {\n      padding-left: space(\"medium\");\n    }\n  }\n\n  &__action {\n    &.is-non-interactive {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: $formInputHeightSmall;\n      height: $formInputHeightSmall;\n    }\n  }\n\n  &__interactive {\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  &__readspeaker {\n    width: fit-content;\n  }\n\n  /* Button variant */\n\n  &--is-button &__icon.is-open {\n    display: none;\n  }\n\n  &--is-button#{&}--is-expanded &__icon {\n    &.is-closed {\n      display: none;\n    }\n\n    &.is-open {\n      display: inline-flex;\n    }\n  }\n\n  /* Interactive variant */\n\n  &--is-interactive &__value-text {\n    text-decoration-line: underline;\n  }\n\n  &--is-interactive:hover &__value-wrapper {\n    color: var(--value-hover-color);\n  }\n\n  /* Vertical Variant */\n\n  &--direction-vertical &__wrapper {\n    flex-grow: inherit;\n  }\n\n  &--direction-vertical &__leading,\n  &--direction-vertical &__wrapper,\n  &--direction-vertical &__action-list {\n    &:not(:empty) {\n      padding-top: space(\"xsmall\");\n      padding-bottom: space(\"xsmall\");\n    }\n  }\n\n  &--direction-vertical &__meta {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  /* Horizontal / Table Variant */\n\n  &--direction-horizontal &__leading,\n  &--direction-horizontal &__value,\n  &--direction-horizontal &__action-list {\n    &:not(:empty) {\n      padding-top: space(\"xxsmall\");\n      padding-bottom: space(\"xxsmall\");\n    }\n  }\n\n  &--direction-horizontal &__meta {\n    padding-bottom: space(\"xxsmall\");\n    padding-top: calc(#{space(\"xxsmall\")} + 12px);\n  }\n\n  &--direction-horizontal &__readspeaker {\n    padding-bottom: space(\"xxsmall\");\n    padding-top: space(\"xxsmall\");\n    padding-left: space(\"medium\");\n  }\n\n  &--direction-horizontal &__meta {\n    &:not(:empty) {\n      padding-left: space(\"xsmall\");\n    }\n  }\n\n  &--direction-horizontal &__meta-status + &__meta-text {\n    margin-left: space(\"xsmall\");\n  }\n\n  /** Table Variant */\n\n  &--table &__label,\n  &--table &__meta {\n    @include fontSize(\"nano\");\n  }\n\n  &--table &__label {\n    color: $colorGrey70;\n  }\n\n  &--table &__value-text {\n    @include fontSize(\"milli\");\n  }\n\n  &--table &__leading,\n  &--table &__value,\n  &--table &__label,\n  &--table &__meta,\n  &--table &__action-list {\n    &:not(:empty) {\n      padding-top: space(\"xsmall\");\n      padding-bottom: space(\"small\");\n    }\n  }\n\n  &--table &__label:not(:empty) + &__value {\n    padding-left: space(\"medium\");\n  }\n\n  &--table &__meta {\n    &:not(:empty) {\n      padding-left: space(\"medium\");\n    }\n  }\n\n  /** Big label */\n\n  &--table#{&}--big-label &__label {\n    @include font(\"heavy\");\n    @include fontSize(\"milli\");\n    color: $colorGrey80;\n  }\n\n  &--table#{&}--big-label &__leading,\n  &--table#{&}--big-label &__value,\n  &--table#{&}--big-label &__label,\n  &--table#{&}--big-label &__meta,\n  &--table#{&}--big-label &__action-list {\n    &:not(:empty) {\n      padding-top: 0;\n      padding-bottom: 0;\n\n      @include mq($from: small) {\n        padding-top: space(\"xsmall\");\n        padding-bottom: space(\"small\");\n      }\n    }\n  }\n\n  &--table#{&}--big-label &__label:not(:empty) + &__value {\n    padding-left: space(\"medium\");\n\n    @include mq($to: small) {\n      padding-left: 0;\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Host, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  StzhDatalistBigLabelChangeEvent,\n  StzhDatalistDirection,\n  StzhDatalistDirectionChangeEvent,\n  StzhDatalistItemActionClickEvent,\n  StzhDatalistItemClickEvent,\n  StzhDatalistVariant,\n  StzhDatalistVariantChangeEvent,\n  StzhStatusType,\n} from \"../../index\";\n\nimport { addWordBreakToLinks } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nlet datalistItemCounter = 0;\n\n/**\n * @slot - Slot for nested datalist\n * @slot value - Slot for value (or use value slot instead)\n * @slot readspeaker - Slot for readspeaker\n */\n@Component({\n  tag: \"stzh-datalist-item\",\n  styleUrl: \"stzh-datalist-item.scss\",\n  scoped: true,\n})\nexport class StzhDatalistItem {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Link */\n  @Prop({ reflect: true }) href: string;\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target (if href is used) */\n  @Prop() target: string;\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** Leading icon */\n  @Prop() leadingIcon: string;\n\n  /** Icon of action button (if href is used, will only be for presentation) */\n  @Prop() icon: string;\n\n  /** Icon position */\n  @Prop() iconPosition: \"left\" | \"right\" = \"right\";\n\n  /** Overwrite aria-label of action button (default aria label is `label` and `value`). */\n  @Prop() iconLabel: string;\n\n  /** Tooltip content of action button. Overwrites aria-label (set by default or `iconLabel`) of action button. */\n  @Prop() iconTooltip: string;\n\n  /** Href of action button */\n  @Prop() iconHref: string;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Value (or use value slot instead) */\n  @Prop() value: string = \"\";\n\n  /** Whether value should be truncate or not */\n  @Prop() valueTruncate: boolean = false;\n\n  /** Readspeaker label */\n  @Prop() readspeakerLabel: string = \"\";\n\n  /** Readspeaker link */\n  @Prop() readspeakerHref: string = \"\";\n\n  /** Meta */\n  @Prop({ reflect: true }) meta: string | string[] = \"\";\n  private _meta: string[] = [];\n\n  /** Status Label */\n  @Prop({ reflect: true }) statusLabel: string = \"\";\n\n  /** Status Type */\n  @Prop() statusType: StzhStatusType = \"default\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Whether the item has child items (only used internally by stzh-datalist). */\n  @Prop() hasNested: boolean = false;\n\n  /** Item action click event */\n  @Event() stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;\n\n  /** Item click event */\n  @Event() stzhClick: EventEmitter<StzhDatalistItemClickEvent>;\n\n  @Element() element: HTMLStzhDatalistItemElement;\n\n  @Watch(\"meta\")\n  metaWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._meta = JSON.parse(newValue);\n      } catch (ex) {\n        this._meta = newValue === \"\" ? [] : [newValue];\n      }\n    } else {\n      this._meta = newValue;\n    }\n  }\n\n  @Watch(\"rel\")\n  externalWatcher() {\n    this.external = this.rel && this.rel.includes(\"external\");\n  }\n\n  @Watch(\"href\")\n  hrefWatcher() {\n    this.isPhone = this.href && (this.href.startsWith(\"tel:\") || this.href.startsWith(\"fax:\"));\n  }\n\n  @State() direction: StzhDatalistDirection = \"vertical\";\n  @State() variant: StzhDatalistVariant = \"default\";\n  @State() bigLabel: boolean = false;\n\n  private external: boolean = false;\n  private isPhone: boolean = false;\n  private datalist: HTMLStzhDatalistElement;\n  private datalistItemId: string;\n\n  private onActionClick = (originalEvent: MouseEvent) => {\n    this.stzhItemActionClick.emit({\n      component: \"stzh-datalist-item\",\n      originalEvent,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-datalist-item\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  private handleDirectionChange = (event: CustomEvent<StzhDatalistDirectionChangeEvent>) => {\n    this.direction = event.detail.value;\n  };\n\n  private handleVariantChange = (event: CustomEvent<StzhDatalistVariantChangeEvent>) => {\n    this.variant = event.detail.value;\n  };\n\n  private handleBigLabelChange = (event: CustomEvent<StzhDatalistBigLabelChangeEvent>) => {\n    this.bigLabel = event.detail.value;\n  };\n\n  private addWordBreakToLinks() {\n    const links = Array.from(this.element?.getElementsByClassName(\"stzh-datalist-item__value-text\") || []);\n    addWordBreakToLinks(links as HTMLElement[]);\n  }\n\n  private renderInner(isButton: boolean, hasActionButton: boolean): DocumentFragment {\n    const Item = isButton ? \"button\" : this.href ? \"a\" : \"div\";\n\n    const Icon = () => (\n      <Fragment>\n        {(this.href || this.icon) && !hasActionButton && !isButton && (\n          <div class=\"stzh-datalist-item__label-icon\">\n            <stzh-icon\n              class=\"stzh-datalist-item__icon\"\n              name={this.icon ? this.icon : this.isPhone ? \"phone\" : this.external && \"external-link\"}\n            ></stzh-icon>\n          </div>\n        )}\n\n        {isButton && (\n          <div class=\"stzh-datalist-item__label-icon\">\n            <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n            <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n          </div>\n        )}\n      </Fragment>\n    );\n\n    return (\n      <Fragment>\n        {this.variant === \"table\" && (\n          <Item\n            aria-hidden={this.label ? null : \"true\"}\n            tabindex=\"-1\"\n            id={`${this.datalistItemId}-label`}\n            class={{\n              \"stzh-datalist-item__label\": true,\n              \"is-button\": isButton,\n              \"is-link\": !!this.href,\n            }}\n            href={this.href}\n            rel={this.rel}\n            target={this.target}\n            download={this.download}\n            onClick={this.onClick}\n          >\n            {this.label}\n          </Item>\n        )}\n\n        <Item\n          id={`${this.datalistItemId}-value`}\n          class={{\n            \"stzh-datalist-item__value\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href,\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n          // aria-labelledby={Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n          aria-labelledby={\n            Item !== \"div\"\n              ? `${this.variant === \"table\" ? `${this.datalistItemId}-label` : \"\"} ${this.datalistItemId}-value ${\n                  this.datalistItemId\n                }-meta`\n              : null\n          }\n          aria-controls={this.a11yControls || null}\n          aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n          onClick={this.onClick}\n        >\n          {this.variant === \"default\" && <div class=\"stzh-datalist-item__label\">{this.label}</div>}\n\n          {this.external && (\n            <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.externalLinkLabel}</div>\n          )}\n          {this.download && (\n            <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>\n          )}\n\n          <div class=\"stzh-datalist-item__value-wrapper\">\n            {this.iconPosition === \"left\" && <Icon></Icon>}\n            {this.value ? (\n              <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\" innerHTML={this.value}></stzh-text>\n            ) : (\n              <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\">\n                <slot name=\"value\"></slot>\n              </stzh-text>\n            )}\n            {this.iconPosition === \"right\" && <Icon></Icon>}\n          </div>\n        </Item>\n\n        <Item\n          aria-hidden={this.statusLabel || this._meta.length > 0 ? null : \"true\"}\n          tabindex=\"-1\"\n          id={`${this.datalistItemId}-meta`}\n          class={{\n            \"stzh-datalist-item__meta\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href,\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n          onClick={this.onClick}\n        >\n          {this.statusLabel && (\n            <stzh-status\n              class=\"stzh-datalist-item__meta-status\"\n              label={this.statusLabel}\n              type={this.statusType}\n            ></stzh-status>\n          )}\n          {this._meta.length > 0 && (\n            <span class=\"stzh-datalist-item__meta-text\">\n              {this._meta.map((meta, index) => (\n                <Fragment>\n                  <span class=\"stzh-datalist-item__meta-text-inner\">{meta}</span>\n                  {index + 1 !== this._meta.length && <span class=\"stzh-datalist-item__meta-separator\">|</span>}\n                </Fragment>\n              ))}\n            </span>\n          )}\n        </Item>\n\n        {this.readspeakerHref && this.readspeakerLabel && (\n          <stzh-button\n            class=\"stzh-datalist-item__readspeaker\"\n            variant=\"tertiary-plain\"\n            no-padding-left=\"true\"\n            no-padding-right=\"true\"\n            icon-position=\"right\"\n            icon=\"volume-medium\"\n            size=\"small\"\n            href={this.readspeakerHref}\n            target=\"_blank\"\n          >\n            {this.readspeakerLabel}\n          </stzh-button>\n        )}\n      </Fragment>\n    );\n  }\n\n  private renderLeadingIcon(isButton: boolean): HTMLElement {\n    const Item = isButton ? \"button\" : this.href ? \"a\" : \"div\";\n\n    return (\n      <Item\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        tabindex=\"-1\"\n        class={{\n          \"stzh-datalist-item__leading\": true,\n          \"is-button\": isButton,\n          \"is-link\": !!this.href,\n        }}\n        href={this.href}\n        rel={this.rel}\n        target={this.target}\n        download={this.download}\n        onClick={this.onClick}\n      >\n        {this.leadingIcon && (\n          <div class=\"stzh-datalist-item__leading-icon-container\">\n            <stzh-icon class=\"stzh-datalist-item__leading-icon\" name={this.leadingIcon}></stzh-icon>\n          </div>\n        )}\n      </Item>\n    );\n  }\n\n  async componentDidLoad() {\n    // execute connectedCallbck again, because sometimes has problem rendering\n    this.connectedCallback();\n    this.addWordBreakToLinks();\n  }\n\n  async componentWillLoad() {\n    this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;\n    this.metaWatcher(this.meta);\n    this.externalWatcher();\n    this.hrefWatcher();\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datalist-item\");\n    }\n  }\n\n  async connectedCallback() {\n    this.datalist = this.element.closest(\"stzh-datalist\");\n\n    if (this.datalist) {\n      this.variant = this.datalist.variant;\n      this.bigLabel = this.datalist.bigLabel;\n      this.direction = await this.datalist.getCurrentDirection();\n\n      this.datalist?.addEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist?.addEventListener(\"stzhVariantChange\", this.handleVariantChange);\n      this.datalist?.addEventListener(\"stzhBigLabelChange\", this.handleBigLabelChange);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.datalist) {\n      this.datalist?.removeEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist?.removeEventListener(\"stzhVariantChange\", this.handleVariantChange);\n      this.datalist?.removeEventListener(\"stzhBigLabelChange\", this.handleBigLabelChange);\n      this.datalist = null;\n    }\n  }\n\n  render() {\n    const isButton = typeof this.a11yExpanded !== \"undefined\" || typeof this.a11yControls !== \"undefined\";\n\n    const hasActionButton = !!((!this.href || this.iconHref || this.iconTooltip) && this.icon);\n\n    const classes = {\n      \"stzh-datalist-item\": true,\n      \"stzh-datalist-item--is-interactive\": !!this.href || isButton,\n      \"stzh-datalist-item--is-link\": !!this.href,\n      \"stzh-datalist-item--is-button\": isButton,\n      \"stzh-datalist-item--is-expanded\": this.a11yExpanded,\n      \"stzh-datalist-item--big-label\": this.bigLabel,\n      [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction && this.variant === \"default\",\n      [`stzh-datalist-item--${this.variant}`]: !!this.variant,\n    };\n\n    let ActionItem = isButton ? \"button\" : hasActionButton ? \"div\" : \"a\";\n\n    const ActionButton = () => {\n      return (\n        <stzh-button\n          class={{\n            \"stzh-datalist-item__action\": true,\n            \"is-button\": true,\n          }}\n          variant=\"tertiary\"\n          size=\"small\"\n          aria-label={this.iconLabel}\n          iconOnly={true}\n          href={this.iconHref}\n          icon={this.icon}\n          onClick={this.onActionClick}\n        ></stzh-button>\n      );\n    };\n\n    return (\n      <Host role=\"listitem\" class={{ \"value-truncate\": this.valueTruncate }}>\n        <div class={classes}>\n          {this.direction === \"horizontal\" || this.variant === \"table\" ? (\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              {this.renderInner(isButton, hasActionButton)}\n            </Fragment>\n          ) : (\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              <div class=\"stzh-datalist-item__wrapper\">{this.renderInner(isButton, hasActionButton)}</div>\n            </Fragment>\n          )}\n          <ActionItem\n            role={hasActionButton ? null : \"presentation\"}\n            aria-hidden={hasActionButton ? null : \"true\"}\n            tabindex=\"-1\"\n            class={{\n              \"stzh-datalist-item__action-list\": true,\n              \"is-button\": isButton,\n              \"is-link\": !!this.href && !this.iconHref,\n            }}\n            href={!this.iconHref ? this.href : null}\n            rel={!this.iconHref ? this.rel : null}\n            target={!this.iconHref ? this.target : null}\n            download={!this.iconHref ? this.download : null}\n          >\n            {hasActionButton &&\n              (this.iconTooltip ? (\n                <stzh-tooltip content={this.iconTooltip}>{ActionButton()}</stzh-tooltip>\n              ) : (\n                ActionButton()\n              ))}\n          </ActionItem>\n\n          <div class=\"stzh-datalist-item__spacer\"></div>\n        </div>\n        {this.hasNested && (\n          <div class=\"stzh-datalist-item__nested\">\n            <div class=\"stzh-datalist-item__nested-inner\">\n              <slot></slot>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}