@oiz/stzh-components 3.0.0-beta3 → 3.0.0-beta5

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

@@ -1,8 +1,10 @@
 import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-e3050b18.js';
 import { t as tc } from './translation-utils-ffb7823c.js';
 import { p as parseISODate, a as printISODate } from './date-utils-c0d90fa4.js';
+import { h as hasSlot } from './utils-54aead01.js';
+import './string-utils-e252977e.js';
 
-const stzhAppointmentsCss = ".sc-stzh-appointments-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-appointments-h{display:none}.sc-stzh-appointments-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-appointments-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-appointments-h *.sc-stzh-appointments,.sc-stzh-appointments-h *.sc-stzh-appointments::before,.sc-stzh-appointments-h *.sc-stzh-appointments::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-appointments-h .has-focus.sc-stzh-appointments{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-appointments-h .stzh-fylingfocus-focused.sc-stzh-appointments{outline-style:none !important}.sc-stzh-appointments-h .stzh-fylingfocus-focused.sc-stzh-appointments::-moz-focus-inner{border:0 !important}.stzh-appointments__wrapper.sc-stzh-appointments{display:flex;flex-direction:column}@media screen and (min-width: 900px){.stzh-appointments__wrapper.sc-stzh-appointments{flex-direction:row}}.stzh-appointments__calendar-wrapper.sc-stzh-appointments{display:flex;flex-direction:column}@media screen and (min-width: 900px){.stzh-appointments__calendar-wrapper.sc-stzh-appointments{margin-right:var(--stzh-space-large)}}.stzh-appointments__appointments-wrapper.sc-stzh-appointments{flex-grow:1;display:flex;flex-direction:column}.stzh-appointments__calendar-title-wrapper.sc-stzh-appointments,.stzh-appointments__appointments-title-wrapper.sc-stzh-appointments{display:flex;align-items:flex-start;flex-direction:column;margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-appointments__calendar-title-wrapper.sc-stzh-appointments,.stzh-appointments__appointments-title-wrapper.sc-stzh-appointments{flex-direction:row;align-items:center;justify-content:space-between;margin-bottom:var(--stzh-space-medium);height:var(--stzh-space-xxlarge)}}.stzh-appointments__calendar-title.sc-stzh-appointments,.stzh-appointments__appointments-title.sc-stzh-appointments{display:flex}.stzh-appointments__calendar-icon.sc-stzh-appointments,.stzh-appointments__appointments-icon.sc-stzh-appointments{margin-right:var(--stzh-space-xsmall);display:none}@media screen and (min-width: 900px){.stzh-appointments__calendar-icon.sc-stzh-appointments,.stzh-appointments__appointments-icon.sc-stzh-appointments{display:inline-flex}}.stzh-appointments__calendar-content-medium.sc-stzh-appointments,.stzh-appointments__appointments-content.sc-stzh-appointments{background-color:var(--stzh-color-white);border:0.125rem solid var(--stzh-color-grey70)}@media screen and (min-width: 900px){.stzh-appointments__calendar-content.sc-stzh-appointments{display:none}}.stzh-appointments__calendar-content-medium.sc-stzh-appointments{display:none;padding:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-appointments__calendar-content-medium.sc-stzh-appointments{display:block}}.stzh-appointments__appointments-content.sc-stzh-appointments{padding:var(--stzh-space-xlarge);flex-grow:1}.stzh-appointments__more-link.sc-stzh-appointments{margin-top:var(--stzh-space-medium)}.stzh-appointments--has-calendar.sc-stzh-appointments .stzh-appointments__appointments-wrapper.sc-stzh-appointments{margin-top:var(--stzh-space-large)}@media screen and (min-width: 900px){.stzh-appointments--has-calendar.sc-stzh-appointments .stzh-appointments__appointments-wrapper.sc-stzh-appointments{margin-top:0}}";
+const stzhAppointmentsCss = ".sc-stzh-appointments-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-appointments-h{display:none}.sc-stzh-appointments-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-appointments-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-appointments-h *.sc-stzh-appointments,.sc-stzh-appointments-h *.sc-stzh-appointments::before,.sc-stzh-appointments-h *.sc-stzh-appointments::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-appointments-h .has-focus.sc-stzh-appointments{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-appointments-h .stzh-fylingfocus-focused.sc-stzh-appointments{outline-style:none !important}.sc-stzh-appointments-h .stzh-fylingfocus-focused.sc-stzh-appointments::-moz-focus-inner{border:0 !important}.sc-stzh-appointments-h{--background-color:var(--stzh-color-secondary10)}.stzh-appointments__heading.sc-stzh-appointments:not(:empty){padding-bottom:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-appointments__heading.sc-stzh-appointments:not(:empty){padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-appointments__heading.sc-stzh-appointments:not(:empty){padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 600px){.stzh-appointments__heading.sc-stzh-appointments:not(:empty){margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-appointments__heading.sc-stzh-appointments:not(:empty){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-appointments__heading.sc-stzh-appointments:not(:empty){margin-bottom:var(--stzh-space-xlarge)}}.stzh-appointments__wrapper.sc-stzh-appointments{padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);display:flex;flex-direction:column;padding-left:var(--stzh-space-large);padding-right:var(--stzh-space-large);background-color:var(--background-color)}@media screen and (min-width: 600px){.stzh-appointments__wrapper.sc-stzh-appointments{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-appointments__wrapper.sc-stzh-appointments{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-appointments__wrapper.sc-stzh-appointments{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-appointments__wrapper.sc-stzh-appointments{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-appointments__wrapper.sc-stzh-appointments{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-appointments__wrapper.sc-stzh-appointments{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-appointments__wrapper.sc-stzh-appointments{flex-direction:row}}.stzh-appointments__calendar-wrapper.sc-stzh-appointments{display:flex;flex-direction:column}@media screen and (min-width: 900px){.stzh-appointments__calendar-wrapper.sc-stzh-appointments{margin-right:var(--stzh-space-xxlarge)}}.stzh-appointments__appointments-wrapper.sc-stzh-appointments{flex-grow:1;display:flex;flex-direction:column}.stzh-appointments__calendar-title-wrapper.sc-stzh-appointments,.stzh-appointments__appointments-title-wrapper.sc-stzh-appointments{margin-bottom:var(--stzh-space-small);display:flex;align-items:center;justify-content:space-between}@media screen and (min-width: 900px){.stzh-appointments__calendar-title-wrapper.sc-stzh-appointments,.stzh-appointments__appointments-title-wrapper.sc-stzh-appointments{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-appointments__calendar-title-wrapper.sc-stzh-appointments,.stzh-appointments__appointments-title-wrapper.sc-stzh-appointments{margin-bottom:var(--stzh-space-large)}}.stzh-appointments__calendar-title.sc-stzh-appointments,.stzh-appointments__appointments-title.sc-stzh-appointments{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-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--stzh-color-primary70);display:flex;align-items:center}.stzh-appointments__calendar-icon.sc-stzh-appointments,.stzh-appointments__appointments-icon.sc-stzh-appointments{--size:var(--stzh-icon-size-large);margin-right:var(--stzh-space-xsmall)}.stzh-appointments__calendar-content.sc-stzh-appointments,.stzh-appointments__calendar-content-medium.sc-stzh-appointments{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)}@media screen and (min-width: 900px){.stzh-appointments__calendar-content.sc-stzh-appointments{display:none}}.stzh-appointments__calendar-content-medium.sc-stzh-appointments{display:none;background-color:var(--stzh-color-white);padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-appointments__calendar-content-medium.sc-stzh-appointments{display:block}}.stzh-appointments__appointments-content.sc-stzh-appointments{flex-grow:1}.stzh-appointments__appointments-radiogroup.sc-stzh-appointments{margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}.stzh-appointments__more-link.sc-stzh-appointments{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);margin-top:var(--stzh-space-medium)}.stzh-appointments--has-calendar.sc-stzh-appointments .stzh-appointments__appointments-wrapper.sc-stzh-appointments{margin-top:var(--stzh-space-large)}@media screen and (min-width: 900px){.stzh-appointments--has-calendar.sc-stzh-appointments .stzh-appointments__appointments-wrapper.sc-stzh-appointments{margin-top:0}}";
 
 const StzhAppointments = class {
   constructor(hostRef) {
@@ -234,20 +236,21 @@ const StzhAppointments = class {
     }
   }
   render() {
+    const headingUsed = hasSlot(this.element, "heading");
     const classes = {
       "stzh-appointments": true,
       "stzh-appointments--has-calendar": this.showCalendar,
       "stzh-appointments--has-appointments-title": this.showAppointmentsTitle,
       "stzh-appointments--has-sort": this.showSort
     };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-appointments__wrapper" }, this.showCalendar &&
-      h("div", { class: "stzh-appointments__calendar-wrapper" }, h("div", { class: "stzh-appointments__calendar-title-wrapper" }, h("div", { class: "stzh-appointments__calendar-title" }, h("stzh-icon", { class: "stzh-appointments__calendar-icon", name: "calendar" }), h("stzh-text", { font: "heavy" }, this.calendarTitle || this.localization.calendarTitle))), h("div", { class: "stzh-appointments__calendar-content" }, h("stzh-datepicker", { "hide-optional": true, ref: (el) => (this.datepickerElement = el), onStzhChange: this.onDatepickerChange, label: this.localization.datepickerLabel, calendarIsDateDisabled: this.isDateDisabled, calendarMin: printISODate(this.earliestDate), calendarMax: printISODate(this.latestDate) }, h("stzh-link", { slot: "action", disabled: !this.nextDate, onClick: this.onNextActiveDateClick }, h("stzh-text", { size: "milli" }, this.localization.nextDayWithAppointments)))), h("div", { class: "stzh-appointments__calendar-content-medium" }, h("stzh-datepicker", { "hide-optional": true, ref: (el) => (this.datepickerElementMedium = el), onStzhChange: this.onDatepickerChange, inline: true, calendarIsDateDisabled: this.isDateDisabled, calendarMin: printISODate(this.earliestDate), calendarMax: printISODate(this.latestDate) }, this.nextDate &&
-        h("stzh-link", { slot: "action", onClick: this.onNextActiveDateClick }, h("stzh-text", { size: "milli" }, this.localization.nextDayWithAppointments))))), h("div", { class: "stzh-appointments__appointments-wrapper" }, this.showAppointmentsTitle &&
-      h("div", { class: "stzh-appointments__appointments-title-wrapper" }, h("div", { class: "stzh-appointments__appointments-title" }, h("stzh-icon", { class: "stzh-appointments__appointments-icon", name: "clock" }), h("stzh-text", { font: "heavy" }, this.appointmentsTitle || this.localization.appointmentsTitle)), this.showSort &&
-        h("div", { class: "stzh-appointments__sort" }, h("stzh-dropdown", { "hide-optional": true, inline: true, "no-search": true, class: "stzh-appointments__sort-dropdown", variant: "plain", size: "small", items: [this._sortBy], options: this.sortOptions, onStzhChange: this.onDropdownChange }))), h("div", { class: "stzh-appointments__appointments-content" }, h("stzh-radiogroup", { ref: (el) => this.inputElement = el, legend: this.localization.inputLegend, "hide-legend": true, name: this.name, value: this.value, preventUpdateProperties: ["disabled"] }, this.appointmentsShown.map((appointment) => h("stzh-radio", { onStzhChange: this.onRadioChange, value: appointment.value, disabled: typeof appointment.disabled !== "undefined" ? appointment.disabled : false }, h("stzh-text", { font: "heavy", size: "milli" }, !this.showCalendar && h("span", null, this.dateAdapter.format(appointment.start, "dateLong"), ",\u00A0"), this.dateAdapter.formatSpan(appointment.start, appointment.end, "time")), h("stzh-text", { size: "milli" }, appointment.caption)))), this.showMoreLink &&
-      h("stzh-link", { class: "stzh-appointments__more-link", onClick: this.onMoreClick }, h("stzh-text", { size: "milli" }, tc(this.localization.moreTextItems, this.moreItemsLeft > this.stepItems
+    return (h(Host, { "has-heading": headingUsed }, h("div", { class: classes }, h("div", { class: "stzh-appointments__heading" }, h("slot", { name: "heading" })), h("div", { class: "stzh-appointments__wrapper" }, this.showCalendar &&
+      h("div", { class: "stzh-appointments__calendar-wrapper" }, h("div", { class: "stzh-appointments__calendar-title-wrapper" }, h("div", { class: "stzh-appointments__calendar-title" }, h("stzh-icon", { class: "stzh-appointments__calendar-icon", name: "calendar" }), h("span", { class: "stzh-appointments__calendar-title-text" }, this.calendarTitle || this.localization.calendarTitle))), h("div", { class: "stzh-appointments__calendar-content" }, h("stzh-datepicker", { "hide-optional": true, ref: (el) => (this.datepickerElement = el), onStzhChange: this.onDatepickerChange, label: this.localization.datepickerLabel, calendarIsDateDisabled: this.isDateDisabled, calendarMin: printISODate(this.earliestDate), calendarMax: printISODate(this.latestDate) }, h("stzh-link", { slot: "action", size: "inherit", disabled: !this.nextDate, onClick: this.onNextActiveDateClick }, this.localization.nextDayWithAppointments))), h("div", { class: "stzh-appointments__calendar-content-medium" }, h("stzh-datepicker", { "hide-optional": true, ref: (el) => (this.datepickerElementMedium = el), onStzhChange: this.onDatepickerChange, inline: true, calendarIsDateDisabled: this.isDateDisabled, calendarMin: printISODate(this.earliestDate), calendarMax: printISODate(this.latestDate) }, this.nextDate &&
+        h("stzh-link", { slot: "action", size: "inherit", onClick: this.onNextActiveDateClick }, this.localization.nextDayWithAppointments)))), h("div", { class: "stzh-appointments__appointments-wrapper" }, this.showAppointmentsTitle &&
+      h("div", { class: "stzh-appointments__appointments-title-wrapper" }, h("div", { class: "stzh-appointments__appointments-title" }, h("stzh-icon", { class: "stzh-appointments__appointments-icon", name: "clock" }), h("span", { class: "stzh-appointments__appointments-title-text" }, this.appointmentsTitle || this.localization.appointmentsTitle)), this.showSort &&
+        h("div", { class: "stzh-appointments__sort" }, h("stzh-dropdown", { "hide-optional": true, inline: true, "no-search": true, class: "stzh-appointments__sort-dropdown", variant: "plain", size: "small", sizeMedium: "tiny", items: [this._sortBy], options: this.sortOptions, onStzhChange: this.onDropdownChange }))), h("div", { class: "stzh-appointments__appointments-content" }, h("stzh-radiogroup", { class: "stzh-appointments__appointments-radiogroup", ref: (el) => this.inputElement = el, legend: this.localization.inputLegend, "hide-legend": true, name: this.name, value: this.value, preventUpdateProperties: ["disabled"] }, this.appointmentsShown.map((appointment) => h("stzh-radio", { onStzhChange: this.onRadioChange, value: appointment.value, disabled: typeof appointment.disabled !== "undefined" ? appointment.disabled : false }, h("stzh-text", { font: "heavy", size: "centi" }, !this.showCalendar && h("span", null, this.dateAdapter.format(appointment.start, "dateLong"), ",\u00A0"), this.dateAdapter.formatSpan(appointment.start, appointment.end, "time")), h("stzh-text", { size: "milli" }, appointment.caption)))), this.showMoreLink &&
+      h("stzh-link", { class: "stzh-appointments__more-link", size: "inherit", onClick: this.onMoreClick }, tc(this.localization.moreTextItems, this.moreItemsLeft > this.stepItems
         ? this.stepItems
-        : this.moreItemsLeft)))))))));
+        : this.moreItemsLeft))))))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"stzh-appointments.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-appointments/stzh-appointments.scss?tag=stzh-appointments&encapsulation=scoped","src/components/stzh-appointments/stzh-appointments.tsx"],"sourcesContent":[".stzh-appointments {\n  &__wrapper {\n    display: flex;\n    flex-direction: column;\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  &__calendar-wrapper {\n    display: flex;\n    flex-direction: column;\n\n    @include mq($from: medium) {\n      margin-right: space('large');\n    }\n  }\n\n  &__appointments-wrapper {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  &__calendar-title-wrapper,\n  &__appointments-title-wrapper {\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n    margin-bottom: space('xsmall');\n\n    @include mq($from: medium) {\n      flex-direction: row;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: space('medium');\n      height: space('xxlarge');\n    }\n  }\n\n  &__calendar-title,\n  &__appointments-title {\n    display: flex;\n  }\n\n  &__calendar-icon,\n  &__appointments-icon {\n    margin-right: space('xsmall');\n    display: none;\n\n    @include mq($from: medium) {\n      display: inline-flex;\n    }\n  }\n\n  &__calendar-content-medium,\n  &__appointments-content {\n    background-color: $colorWhite;\n    border: 2px solid $formBorderColor;\n  }\n\n  &__calendar-content {\n    @include mq($from: medium) {\n      display: none;\n    }\n  }\n\n  &__calendar-content-medium {\n    display: none;\n    padding: space('medium');\n\n    @include mq($from: medium) {\n      display: block;\n    }\n  }\n\n  &__appointments-content {\n    padding: space('xlarge');\n    flex-grow: 1;\n  }\n\n  &__more-link {\n    margin-top: space('medium');\n  }\n\n  &--has-calendar &__appointments-wrapper {\n    margin-top: space('large');\n\n    @include mq($from: medium) {\n      margin-top: 0;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  Element,\n  Prop,\n  h,\n  Watch,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhAppointmentsChangeEvent,\n  StzhRadioChangeEvent,\n  StzhDatepickerChangeEvent,\n  StzhDropdownChangeEvent,\n} from \"../../index\";\n\nimport { tc } from \"../../utils/translation-utils\";\n\nimport { printISODate, parseISODate } from \"../../utils/date-utils\";\nimport { StzhLocaleAdapter } from \"../../utils/date-adapter\";\n\nimport { StzhAppointmentsLocalizedText } from \"./stzh-appointments.localization\"\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-appointments\",\n  styleUrl: \"stzh-appointments.scss\",\n  scoped: true\n})\nexport class StzhAppointments {\n  /** Translation strings */\n  @Prop() localization: StzhAppointmentsLocalizedText;\n\n  /** Sort by */\n  @Prop({ mutable: true }) sortBy: \"start\" | \"place\" = \"start\";\n  private _sortBy: \"start\" | \"place\";\n\n  /** Initial selected values */\n  @Prop() appointments: any[] | string = [];\n  private _appointments: any[];\n  private appointmentsShown: any[];\n\n  /** Current selected date (if undefined, earliest appointment date in list is taken or current selected one by value) */\n  @Prop({ mutable: true }) currentDate: Date | string;\n  private _currentDate: Date;\n\n  /* Selected appointment by value */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /* Name of radiogroup form element */\n  @Prop({ reflect: true }) name: string = \"appointment\";\n\n  /** Nr of items shown */\n  @Prop({ mutable: true }) showItems: number = 5;\n  private _initialShowItems: number;\n\n  /** Nr of items shown when more link is clicked */\n  @Prop() stepItems: number = 5;\n\n  /** Overwrite default calendar title */\n  @Prop() calendarTitle = \"\";\n\n  /** Overwrite default appointments title */\n  @Prop() appointmentsTitle = \"\";\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be an 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  @Element() element: HTMLStzhAppointmentsElement;\n\n  /** Appointments change event */\n  @Event() stzhChange: EventEmitter<StzhAppointmentsChangeEvent>;\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(\"currentDate\")\n  currentDateWatcher(newValue: Date | string) {\n    if (!newValue) {\n      this._currentDate = this.dateByValue || this.earliestDate;\n\n      if (!this.dateByValue) {\n        this.setValueToFirstAppointmentOfCurrentDate();\n      }\n    } else if (typeof newValue === \"string\") {\n      this._currentDate = parseISODate(newValue);\n      this.setValueToFirstAppointmentOfCurrentDate();\n    } else {\n      this._currentDate = newValue;\n      this.setValueToFirstAppointmentOfCurrentDate();\n    }\n  }\n\n  @Watch(\"sortBy\")\n  sortByWatcher() {\n    this.setValueToFirstAppointmentOfCurrentDate();\n  }\n\n  @Watch(\"value\")\n  valueWatcher() {\n    this.updateDateByValue();\n    // update current date if user has not choosen one\n    this.currentDateWatcher(this.currentDate);\n  }\n\n  @Watch(\"appointments\")\n  appointmentsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._appointments = JSON.parse(newValue);\n    } else {\n      this._appointments = newValue;\n    }\n\n    // convert start and end field to date\n    this._appointments = this._appointments.map(appointment => ({\n      ...appointment,\n      start: new Date(appointment.start),\n      end: new Date(appointment.end),\n    }))\n\n    if (this._appointments.length > 0) {\n      // sort with start field and find earliest and latest date\n      this._appointments.sort((a, b) => a['start'] > b['start'] ? 1 : -1);\n      this.earliestDate = this._appointments[0].start;\n      this.latestDate = this._appointments[this._appointments.length - 1].start;\n      this.updateDateByValue();\n    }\n\n    // determine whether all appointments are from the same day\n    if (this._appointments.length > 1) {\n      const firstDate = this._appointments[0].start;\n      this.allAppointsmentOnSameDay = this._appointments\n        .map(appointment => appointment.start)\n        .every(date => `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`\n          === `${firstDate.getFullYear()}-${firstDate.getMonth()}-${firstDate.getDate()}`);\n    }\n\n    // update flags\n    this.showCalendar = !this.allAppointsmentOnSameDay;\n    this.showAppointmentsTitle = this._appointments.length > 1;\n\n    // update current date if user has not choosen one\n    this.currentDateWatcher(this.currentDate);\n  }\n\n  private dateByValue: Date;\n  private earliestDate: Date;\n  private latestDate: Date;\n  private nextDate: Date;\n\n  private showMoreLink: boolean = false;\n  private moreItemsLeft: number = 0;\n  private showCalendar: boolean = false;\n  private showSort: boolean = false;\n  private showSortStart: boolean = false;\n  private showSortPlace: boolean = false;\n  private showAppointmentsTitle: boolean = false;\n  private allAppointsmentOnSameDay: boolean = true;\n  private sortOptions = [];\n\n  private inputElement: HTMLStzhRadiogroupElement;\n  private datepickerElement: HTMLStzhDatepickerElement;\n  private datepickerElementMedium: HTMLStzhDatepickerElement;\n\n  private updateDateByValue() {\n    this.dateByValue = this.value\n      && this._appointments\n        .find(appointment => appointment.value === this.value)\n        .start;\n  }\n\n  private getCurrentDateAppointments() {\n    let indexOfLastCurrentDayDate = 0;\n\n    // filter to current date appointments that can be shown\n    const appointmentsCurrentDate = this._appointments\n      .filter((appointment, index) => {\n        const dateIsInCurrentDay = appointment.start.getFullYear() === this._currentDate.getFullYear()\n          && appointment.start.getMonth() === this._currentDate.getMonth()\n          && appointment.start.getDate() === this._currentDate.getDate();\n\n        if (dateIsInCurrentDay) {\n          indexOfLastCurrentDayDate = index;\n        }\n\n        return dateIsInCurrentDay;\n      });\n\n    // find next day with dates or set to null\n    if (this._appointments[indexOfLastCurrentDayDate + 1]) {\n      this.nextDate = this._appointments[indexOfLastCurrentDayDate + 1].start;\n    } else {\n      this.nextDate = null;\n    }\n\n    // sort\n    appointmentsCurrentDate.sort((a, b) => a[this.sortBy] > b[this.sortBy] ? 1 : -1);\n    return appointmentsCurrentDate;\n  }\n\n  private setValueToFirstAppointmentOfCurrentDate() {\n    // choose the first available appointment from current date\n    const appointments = this.getCurrentDateAppointments()\n      .filter(appointment => !appointment.disabled)\n\n    if (appointments.length > 0) {\n      this.value = appointments[0].value;\n      this.stzhChange.emit({\n        component: \"stzh-appointments\",\n        value: this.value\n      });\n    }\n  }\n\n  private isDateDisabled = (date: Date) => {\n    const dateHasAppointment: boolean = !!this._appointments.find(appointment => {\n      return appointment.start.getFullYear() === date.getFullYear()\n        && appointment.start.getMonth() === date.getMonth()\n        && appointment.start.getDate() === date.getDate();\n    });\n\n    return !dateHasAppointment;\n  }\n\n  private onNextActiveDateClick = async () => {\n    if (this.nextDate) {\n      this.currentDate = this.nextDate;\n\n      const popover = await this.datepickerElement.getPopover();\n\n      if (popover) {\n        popover.hide();\n      }\n    }\n  }\n\n  private onMoreClick = () => {\n    this.showItems = this.stepItems + this.showItems;\n\n    // return focus to radiogroup\n    const radio = this.inputElement.querySelector('stzh-radio');\n    radio.focus();\n  }\n\n  private onDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    const target: HTMLStzhDropdownElement = event.target as HTMLStzhDropdownElement;\n\n    const sortBy = await target.getValue() as \"start\" | \"place\" | \"\";\n\n    if (sortBy) {\n      this.sortBy = sortBy;\n    }\n  }\n\n  private onDatepickerChange = (event: CustomEvent<StzhDatepickerChangeEvent>) => {\n    if (event.detail.component !== 'stzh-datepicker' || !event.detail.valueAsDate) {\n      return;\n    }\n\n    this.currentDate = event.detail.valueAsDate;\n    // reset number of items that should be shown\n    this.showItems = this._initialShowItems;\n  }\n\n  private onRadioChange = (event: CustomEvent<StzhRadioChangeEvent>) => {\n    this.value = event.detail.value;\n    this.stzhChange.emit({\n      component: \"stzh-appointments\",\n      value: this.value\n    });\n  }\n\n  async componentWillLoad() {\n    this._initialShowItems = this.showItems;\n    this.appointmentsWatcher(this.appointments);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"appointments\");\n    }\n\n    this.dateAdapterWatcher(this.dateAdapter);\n  }\n\n  componentWillRender() {\n    const appointments = this.getCurrentDateAppointments();\n\n    // slice to max that should be visible\n    this.appointmentsShown = appointments.slice(0, this.showItems);\n\n    // set flags\n    this.showMoreLink = this.showItems < appointments.length;\n    this.moreItemsLeft = appointments.length - this.showItems;\n\n    // don't show time sort when only one time in the current day\n    this.showSortStart = appointments\n      .map(appointment => {\n        return this.dateAdapter.format(appointment.start, \"time\");\n      }).filter((item, pos, self) => {\n        return self.indexOf(item) == pos;\n      }).length > 1;\n\n    // don't show place sort when only one place in the current day\n    this.showSortPlace = appointments\n      .map(appointment => {\n        return appointment.place;\n      }).filter((item, pos, self) => {\n        return self.indexOf(item) == pos;\n      }).length > 1;\n\n    this.sortOptions = [];\n\n    if (this.showSortStart) {\n      this.sortOptions.push({\n        text: this.localization.sortByTime,\n        value: \"start\"\n      });\n    }\n\n    if (this.showSortPlace) {\n      this.sortOptions.push({\n        text: this.localization.sortByPlace,\n        value: \"place\"\n      });\n    }\n\n    this.showSort = this.appointmentsShown.length > 1;\n\n    // determine sort (force alternative sorting if it makes sense)\n    this._sortBy =\n      (this.showSortStart && !this.showSortPlace && \"start\")\n      || (!this.showSortStart && this.showSortPlace && \"place\")\n      || this.sortBy;\n  }\n\n  componentDidRender() {\n    // set datepickers values to current date\n    if (this.datepickerElement) {\n      this.datepickerElement.setDate(this._currentDate);\n    }\n\n    if (this.datepickerElementMedium) {\n      this.datepickerElementMedium.setDate(this._currentDate);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-appointments\": true,\n      \"stzh-appointments--has-calendar\": this.showCalendar,\n      \"stzh-appointments--has-appointments-title\": this.showAppointmentsTitle,\n      \"stzh-appointments--has-sort\": this.showSort\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-appointments__wrapper\">\n            {this.showCalendar &&\n              <div class=\"stzh-appointments__calendar-wrapper\">\n                <div class=\"stzh-appointments__calendar-title-wrapper\">\n                  <div class=\"stzh-appointments__calendar-title\">\n                    <stzh-icon class=\"stzh-appointments__calendar-icon\" name=\"calendar\"></stzh-icon>\n                    <stzh-text font=\"heavy\">{this.calendarTitle || this.localization.calendarTitle}</stzh-text>\n                  </div>\n                </div>\n                <div class=\"stzh-appointments__calendar-content\">\n                  <stzh-datepicker\n                    hide-optional\n                    ref={(el) => (this.datepickerElement = el as HTMLStzhDatepickerElement)}\n                    onStzhChange={this.onDatepickerChange}\n                    label={this.localization.datepickerLabel}\n                    calendarIsDateDisabled={this.isDateDisabled}\n                    calendarMin={printISODate(this.earliestDate)}\n                    calendarMax={printISODate(this.latestDate)}\n                  >\n                    <stzh-link\n                      slot=\"action\"\n                      disabled={!this.nextDate}\n                      onClick={this.onNextActiveDateClick}\n                    >\n                      <stzh-text size=\"milli\">\n                        {this.localization.nextDayWithAppointments}\n                      </stzh-text>\n                    </stzh-link>\n                  </stzh-datepicker>\n                </div>\n                <div class=\"stzh-appointments__calendar-content-medium\">\n                  <stzh-datepicker\n                    hide-optional\n                    ref={(el) => (this.datepickerElementMedium = el as HTMLStzhDatepickerElement)}\n                    onStzhChange={this.onDatepickerChange}\n                    inline\n                    calendarIsDateDisabled={this.isDateDisabled}\n                    calendarMin={printISODate(this.earliestDate)}\n                    calendarMax={printISODate(this.latestDate)}\n                  >\n                    {this.nextDate &&\n                      <stzh-link\n                        slot=\"action\"\n                        onClick={this.onNextActiveDateClick}\n                      >\n                        <stzh-text size=\"milli\">\n                          {this.localization.nextDayWithAppointments}\n                        </stzh-text>\n                      </stzh-link>\n                    }\n                  </stzh-datepicker>\n                </div>\n              </div>\n            }\n            <div class=\"stzh-appointments__appointments-wrapper\">\n              {this.showAppointmentsTitle &&\n                <div class=\"stzh-appointments__appointments-title-wrapper\">\n                  <div class=\"stzh-appointments__appointments-title\">\n                    <stzh-icon class=\"stzh-appointments__appointments-icon\" name=\"clock\"></stzh-icon>\n                    <stzh-text font=\"heavy\">{this.appointmentsTitle || this.localization.appointmentsTitle}</stzh-text>\n                  </div>\n                  {this.showSort &&\n                    <div class=\"stzh-appointments__sort\">\n                      <stzh-dropdown\n                        hide-optional\n                        inline\n                        no-search\n                        class=\"stzh-appointments__sort-dropdown\"\n                        variant=\"plain\"\n                        size=\"small\"\n                        items={[this._sortBy]}\n                        options={this.sortOptions}\n                        onStzhChange={this.onDropdownChange}\n                      ></stzh-dropdown>\n                    </div>\n                  }\n                </div>\n              }\n\n              <div class=\"stzh-appointments__appointments-content\">\n                <stzh-radiogroup\n                  ref={(el) => this.inputElement = el as HTMLStzhRadiogroupElement}\n                  legend={this.localization.inputLegend}\n                  hide-legend\n                  name={this.name}\n                  value={this.value}\n                  preventUpdateProperties={[\"disabled\"]}\n                >\n                  {this.appointmentsShown.map((appointment) =>\n                    <stzh-radio\n                      onStzhChange={this.onRadioChange}\n                      value={appointment.value}\n                      disabled={typeof appointment.disabled !== \"undefined\" ? appointment.disabled : false}\n                    >\n                      <stzh-text font=\"heavy\" size=\"milli\">\n                        {!this.showCalendar && <span>{this.dateAdapter.format(appointment.start, \"dateLong\")},&nbsp;</span>}\n                        {this.dateAdapter.formatSpan(appointment.start, appointment.end, \"time\")}\n                      </stzh-text>\n                      <stzh-text size=\"milli\">{appointment.caption}</stzh-text>\n                    </stzh-radio>\n                  )}\n                </stzh-radiogroup>\n\n                {this.showMoreLink &&\n                  <stzh-link\n                    class=\"stzh-appointments__more-link\"\n                    onClick={this.onMoreClick}\n                  >\n                    <stzh-text size=\"milli\">\n                      {tc(this.localization.moreTextItems,\n                        this.moreItemsLeft > this.stepItems\n                          ? this.stepItems\n                          : this.moreItemsLeft)}\n                    </stzh-text>\n                  </stzh-link>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-appointments.entry.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,0xMAA0xM;;MCkCzyM,gBAAgB;;;;IAoInB,iBAAY,GAAY,KAAK,CAAC;IAC9B,kBAAa,GAAW,CAAC,CAAC;IAC1B,iBAAY,GAAY,KAAK,CAAC;IAC9B,aAAQ,GAAY,KAAK,CAAC;IAC1B,kBAAa,GAAY,KAAK,CAAC;IAC/B,kBAAa,GAAY,KAAK,CAAC;IAC/B,0BAAqB,GAAY,KAAK,CAAC;IACvC,6BAAwB,GAAY,IAAI,CAAC;IACzC,gBAAW,GAAG,EAAE,CAAC;IAwDjB,mBAAc,GAAG,CAAC,IAAU;MAClC,MAAM,kBAAkB,GAAY,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW;QACvE,OAAO,WAAW,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,IAAI,CAAC,WAAW,EAAE;aACxD,WAAW,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,IAAI,CAAC,QAAQ,EAAE;aAChD,WAAW,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;OACrD,CAAC,CAAC;MAEH,OAAO,CAAC,kBAAkB,CAAC;KAC5B,CAAA;IAEO,0BAAqB,GAAG;MAC9B,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC;QAEjC,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE,CAAC;QAE1D,IAAI,OAAO,EAAE;UACX,OAAO,CAAC,IAAI,EAAE,CAAC;SAChB;OACF;KACF,CAAA;IAEO,gBAAW,GAAG;MACpB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;;MAGjD,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;MAC5D,KAAK,CAAC,KAAK,EAAE,CAAC;KACf,CAAA;IAEO,qBAAgB,GAAG,OAAO,KAA2C;MAC3E,MAAM,MAAM,GAA4B,KAAK,CAAC,MAAiC,CAAC;MAEhF,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,QAAQ,EAA4B,CAAC;MAEjE,IAAI,MAAM,EAAE;QACV,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;OACtB;KACF,CAAA;IAEO,uBAAkB,GAAG,CAAC,KAA6C;MACzE,IAAI,KAAK,CAAC,MAAM,CAAC,SAAS,KAAK,iBAAiB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE;QAC7E,OAAO;OACR;MAED,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC;;MAE5C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,iBAAiB,CAAC;KACzC,CAAA;IAEO,kBAAa,GAAG,CAAC,KAAwC;MAC/D,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;MAChC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,mBAAmB;QAC9B,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;KACJ,CAAA;;kBAvPoD,OAAO;wBAIrB,EAAE;;iBASA,EAAE;gBAGH,aAAa;qBAGR,CAAC;qBAIlB,CAAC;yBAGL,EAAE;6BAGE,EAAE;;;EAe9B,kBAAkB,CAAC,QAA2B;IAC5C,IAAI,CAAC,QAAQ,EAAE;MACb,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,wBAAwB,CACrE,IAAI,CAAC,YAAY,CAAC,QAAQ,EAC1B,IAAI,CAAC,YAAY,CAAC,QAAQ,CAC3B,CAAC;KACH;GACF;EAGD,kBAAkB,CAAC,QAAuB;IACxC,IAAI,CAAC,QAAQ,EAAE;MACb,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,CAAC;MAE1D,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;QACrB,IAAI,CAAC,uCAAuC,EAAE,CAAC;OAChD;KACF;SAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MACvC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC;MAC3C,IAAI,CAAC,uCAAuC,EAAE,CAAC;KAChD;SAAM;MACL,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;MAC7B,IAAI,CAAC,uCAAuC,EAAE,CAAC;KAChD;GACF;EAGD,aAAa;IACX,IAAI,CAAC,uCAAuC,EAAE,CAAC;GAChD;EAGD,YAAY;IACV,IAAI,CAAC,iBAAiB,EAAE,CAAC;;IAEzB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GAC3C;EAGD,mBAAmB,CAAC,QAAwB;IAC1C,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KAC3C;SAAM;MACL,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;KAC/B;;IAGD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,WAAW,qCAClD,WAAW,KACd,KAAK,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAClC,GAAG,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAC9B,CAAC,CAAA;IAEH,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;;MAEjC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;MACpE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;MAChD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;MAC1E,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;;IAGD,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;MACjC,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;MAC9C,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAC,aAAa;SAC/C,GAAG,CAAC,WAAW,IAAI,WAAW,CAAC,KAAK,CAAC;SACrC,KAAK,CAAC,IAAI,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE;YACrE,GAAG,SAAS,CAAC,WAAW,EAAE,IAAI,SAAS,CAAC,QAAQ,EAAE,IAAI,SAAS,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;KACtF;;IAGD,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,wBAAwB,CAAC;IACnD,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;;IAG3D,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GAC3C;EAqBO,iBAAiB;IACvB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK;SACxB,IAAI,CAAC,aAAa;SAClB,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;SACrD,KAAK,CAAC;GACZ;EAEO,0BAA0B;IAChC,IAAI,yBAAyB,GAAG,CAAC,CAAC;;IAGlC,MAAM,uBAAuB,GAAG,IAAI,CAAC,aAAa;OAC/C,MAAM,CAAC,CAAC,WAAW,EAAE,KAAK;MACzB,MAAM,kBAAkB,GAAG,WAAW,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE;WACzF,WAAW,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE;WAC7D,WAAW,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC;MAEjE,IAAI,kBAAkB,EAAE;QACtB,yBAAyB,GAAG,KAAK,CAAC;OACnC;MAED,OAAO,kBAAkB,CAAC;KAC3B,CAAC,CAAC;;IAGL,IAAI,IAAI,CAAC,aAAa,CAAC,yBAAyB,GAAG,CAAC,CAAC,EAAE;MACrD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,yBAAyB,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;KACzE;SAAM;MACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;KACtB;;IAGD,uBAAuB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACjF,OAAO,uBAAuB,CAAC;GAChC;EAEO,uCAAuC;;IAE7C,MAAM,YAAY,GAAG,IAAI,CAAC,0BAA0B,EAAE;OACnD,MAAM,CAAC,WAAW,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAA;IAE/C,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE;MAC3B,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;MACnC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,mBAAmB;QAC9B,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;KACJ;GACF;EA4DD,MAAM,iBAAiB;IACrB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,SAAS,CAAC;IACxC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAE5C,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;KACvG;IAED,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GAC3C;EAED,mBAAmB;IACjB,MAAM,YAAY,GAAG,IAAI,CAAC,0BAA0B,EAAE,CAAC;;IAGvD,IAAI,CAAC,iBAAiB,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;;IAG/D,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS,GAAG,YAAY,CAAC,MAAM,CAAC;IACzD,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC;;IAG1D,IAAI,CAAC,aAAa,GAAG,YAAY;OAC9B,GAAG,CAAC,WAAW;MACd,OAAO,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;KAC3D,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI;MACxB,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC;KAClC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;;IAGhB,IAAI,CAAC,aAAa,GAAG,YAAY;OAC9B,GAAG,CAAC,WAAW;MACd,OAAO,WAAW,CAAC,KAAK,CAAC;KAC1B,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI;MACxB,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC;KAClC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAEhB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;IAEtB,IAAI,IAAI,CAAC,aAAa,EAAE;MACtB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;QACpB,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,UAAU;QAClC,KAAK,EAAE,OAAO;OACf,CAAC,CAAC;KACJ;IAED,IAAI,IAAI,CAAC,aAAa,EAAE;MACtB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;QACpB,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,WAAW;QACnC,KAAK,EAAE,OAAO;OACf,CAAC,CAAC;KACJ;IAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC;;IAGlD,IAAI,CAAC,OAAO;MACV,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,OAAO;YACjD,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,IAAI,OAAO,CAAC;WACtD,IAAI,CAAC,MAAM,CAAC;GAClB;EAED,kBAAkB;;IAEhB,IAAI,IAAI,CAAC,iBAAiB,EAAE;MAC1B,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KACnD;IAED,IAAI,IAAI,CAAC,uBAAuB,EAAE;MAChC,IAAI,CAAC,uBAAuB,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KACzD;GACF;EAED,MAAM;IACJ,MAAM,WAAW,GAAY,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IAE9D,MAAM,OAAO,GAAG;MACd,mBAAmB,EAAE,IAAI;MACzB,iCAAiC,EAAE,IAAI,CAAC,YAAY;MACpD,2CAA2C,EAAE,IAAI,CAAC,qBAAqB;MACvE,6BAA6B,EAAE,IAAI,CAAC,QAAQ;KAC7C,CAAC;IAEF,QACE,EAAC,IAAI,mBAAc,WAAW,IAC5B,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,4BAA4B,IACrC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,EAEN,WAAK,KAAK,EAAC,4BAA4B,IACpC,IAAI,CAAC,YAAY;MAChB,WAAK,KAAK,EAAC,qCAAqC,IAC9C,WAAK,KAAK,EAAC,2CAA2C,IACpD,WAAK,KAAK,EAAC,mCAAmC,IAC5C,iBAAW,KAAK,EAAC,kCAAkC,EAAC,IAAI,EAAC,UAAU,GAAa,EAChF,YAAM,KAAK,EAAC,wCAAwC,IACjD,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,YAAY,CAAC,aAAa,CACjD,CACH,CACF,EACN,WAAK,KAAK,EAAC,qCAAqC,IAC9C,8CAEE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,iBAAiB,GAAG,EAA+B,CAAC,EACvE,YAAY,EAAE,IAAI,CAAC,kBAAkB,EACrC,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,eAAe,EACxC,sBAAsB,EAAE,IAAI,CAAC,cAAc,EAC3C,WAAW,EAAE,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,EAC5C,WAAW,EAAE,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,IAE1C,iBACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ,EACxB,OAAO,EAAE,IAAI,CAAC,qBAAqB,IAElC,IAAI,CAAC,YAAY,CAAC,uBAAuB,CAChC,CACI,CACd,EACN,WAAK,KAAK,EAAC,4CAA4C,IACrD,8CAEE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,uBAAuB,GAAG,EAA+B,CAAC,EAC7E,YAAY,EAAE,IAAI,CAAC,kBAAkB,EACrC,MAAM,QACN,sBAAsB,EAAE,IAAI,CAAC,cAAc,EAC3C,WAAW,EAAE,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,EAC5C,WAAW,EAAE,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,IAEzC,IAAI,CAAC,QAAQ;QACZ,iBACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,IAAI,CAAC,qBAAqB,IAElC,IAAI,CAAC,YAAY,CAAC,uBAAuB,CAChC,CAEE,CACd,CACF,EAER,WAAK,KAAK,EAAC,yCAAyC,IACjD,IAAI,CAAC,qBAAqB;MACzB,WAAK,KAAK,EAAC,+CAA+C,IACxD,WAAK,KAAK,EAAC,uCAAuC,IAChD,iBAAW,KAAK,EAAC,sCAAsC,EAAC,IAAI,EAAC,OAAO,GAAa,EACjF,YAAM,KAAK,EAAC,4CAA4C,IACrD,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,YAAY,CAAC,iBAAiB,CACzD,CACH,EACL,IAAI,CAAC,QAAQ;QACZ,WAAK,KAAK,EAAC,yBAAyB,IAClC,4CAEE,MAAM,2BAEN,KAAK,EAAC,kCAAkC,EACxC,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,EACrB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,YAAY,EAAE,IAAI,CAAC,gBAAgB,GACpB,CACb,CAEJ,EAGR,WAAK,KAAK,EAAC,yCAAyC,IAClD,uBACE,KAAK,EAAC,4CAA4C,EAClD,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAA+B,EAChE,MAAM,EAAE,IAAI,CAAC,YAAY,CAAC,WAAW,uBAErC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,uBAAuB,EAAE,CAAC,UAAU,CAAC,IAEpC,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,WAAW,KACtC,kBACE,YAAY,EAAE,IAAI,CAAC,aAAa,EAChC,KAAK,EAAE,WAAW,CAAC,KAAK,EACxB,QAAQ,EAAE,OAAO,WAAW,CAAC,QAAQ,KAAK,WAAW,GAAG,WAAW,CAAC,QAAQ,GAAG,KAAK,IAEpF,iBAAW,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IACjC,CAAC,IAAI,CAAC,YAAY,IAAI,gBAAO,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC,YAAe,EAClG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,EAAE,WAAW,CAAC,GAAG,EAAE,MAAM,CAAC,CAC9D,EACZ,iBAAW,IAAI,EAAC,OAAO,IAAE,WAAW,CAAC,OAAO,CAAa,CAC9C,CACd,CACe,EAEjB,IAAI,CAAC,YAAY;MAChB,iBACE,KAAK,EAAC,8BAA8B,EACpC,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,IAAI,CAAC,WAAW,IAExB,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,EACjC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS;UAC/B,IAAI,CAAC,SAAS;UACd,IAAI,CAAC,aAAa,CAAC,CACf,CAEV,CACF,CACF,CAKF,CACD,EACP;GACH;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-appointments/stzh-appointments.scss?tag=stzh-appointments&encapsulation=scoped","src/components/stzh-appointments/stzh-appointments.tsx"],"sourcesContent":[":host {\n  --background-color: #{$colorSecondary10};\n}\n\n.stzh-appointments {\n  &__heading {\n    &:not(:empty) {\n      @include spaceCurve('padding-bottom', 'tiny');\n      margin-bottom: space('xsmall');\n\n      @include mq($from: small) {\n        margin-bottom: space('small');\n      }\n\n      @include mq($from: medium) {\n        margin-bottom: space('medium');\n      }\n\n      @include mq($from: large) {\n        margin-bottom: space('xlarge');\n      }\n    }\n  }\n\n  // &__actions {\n  //   &:not(:empty) {\n  //     @include spaceCurve('margin-top', 'medium');\n  //   }\n  // }\n\n  &__wrapper {\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'regular');\n    display: flex;\n    flex-direction: column;\n    padding-left: space('large');\n    padding-right: space('large');\n    background-color: var(--background-color);\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  &__calendar-wrapper {\n    display: flex;\n    flex-direction: column;\n\n    @include mq($from: medium) {\n      margin-right: space('xxlarge');\n    }\n  }\n\n  &__appointments-wrapper {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  &__calendar-title-wrapper,\n  &__appointments-title-wrapper {\n    @include spaceCurve('margin-bottom', 'small');\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  &__calendar-title,\n  &__appointments-title {\n    @include font('heavy');\n    @include fontSize('centi');\n    color: $colorPrimary70;\n    display: flex;\n    align-items: center;\n  }\n\n  &__calendar-icon,\n  &__appointments-icon {\n    --size: #{iconSize('large')};\n    margin-right: space('xsmall');\n  }\n\n  &__calendar-content,\n  &__calendar-content-medium {\n    @include fontSize('milli');\n  }\n\n  &__calendar-content {\n    @include mq($from: medium) {\n      display: none;\n    }\n  }\n\n  &__calendar-content-medium {\n    display: none;\n    background-color: $colorWhite;\n    padding-bottom: space('medium');\n\n    @include mq($from: medium) {\n      display: block;\n    }\n  }\n\n  &__appointments-content {\n    flex-grow: 1;\n  }\n\n  &__appointments-radiogroup {\n    margin-top: space('xsmall');\n    margin-bottom: space('xsmall');\n  }\n\n  &__more-link {\n    @include fontSize('milli');\n    margin-top: space('medium');\n  }\n\n  &--has-calendar &__appointments-wrapper {\n    margin-top: space('large');\n\n    @include mq($from: medium) {\n      margin-top: 0;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  Element,\n  Prop,\n  h,\n  Watch,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhAppointmentsChangeEvent,\n  StzhRadioChangeEvent,\n  StzhDatepickerChangeEvent,\n  StzhDropdownChangeEvent,\n} from \"../../index\";\n\nimport { tc } from \"../../utils/translation-utils\";\n\nimport { printISODate, parseISODate } from \"../../utils/date-utils\";\nimport { StzhLocaleAdapter } from \"../../utils/date-adapter\";\n\nimport { StzhAppointmentsLocalizedText } from \"./stzh-appointments.localization\"\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-appointments\",\n  styleUrl: \"stzh-appointments.scss\",\n  scoped: true\n})\nexport class StzhAppointments {\n  /** Translation strings */\n  @Prop() localization: StzhAppointmentsLocalizedText;\n\n  /** Sort by */\n  @Prop({ mutable: true }) sortBy: \"start\" | \"place\" = \"start\";\n  private _sortBy: \"start\" | \"place\";\n\n  /** Initial selected values */\n  @Prop() appointments: any[] | string = [];\n  private _appointments: any[];\n  private appointmentsShown: any[];\n\n  /** Current selected date (if undefined, earliest appointment date in list is taken or current selected one by value) */\n  @Prop({ mutable: true }) currentDate: Date | string;\n  private _currentDate: Date;\n\n  /* Selected appointment by value */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /* Name of radiogroup form element */\n  @Prop({ reflect: true }) name: string = \"appointment\";\n\n  /** Nr of items shown */\n  @Prop({ mutable: true }) showItems: number = 5;\n  private _initialShowItems: number;\n\n  /** Nr of items shown when more link is clicked */\n  @Prop() stepItems: number = 5;\n\n  /** Overwrite default calendar title */\n  @Prop() calendarTitle = \"\";\n\n  /** Overwrite default appointments title */\n  @Prop() appointmentsTitle = \"\";\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be an 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  @Element() element: HTMLStzhAppointmentsElement;\n\n  /** Appointments change event */\n  @Event() stzhChange: EventEmitter<StzhAppointmentsChangeEvent>;\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(\"currentDate\")\n  currentDateWatcher(newValue: Date | string) {\n    if (!newValue) {\n      this._currentDate = this.dateByValue || this.earliestDate;\n\n      if (!this.dateByValue) {\n        this.setValueToFirstAppointmentOfCurrentDate();\n      }\n    } else if (typeof newValue === \"string\") {\n      this._currentDate = parseISODate(newValue);\n      this.setValueToFirstAppointmentOfCurrentDate();\n    } else {\n      this._currentDate = newValue;\n      this.setValueToFirstAppointmentOfCurrentDate();\n    }\n  }\n\n  @Watch(\"sortBy\")\n  sortByWatcher() {\n    this.setValueToFirstAppointmentOfCurrentDate();\n  }\n\n  @Watch(\"value\")\n  valueWatcher() {\n    this.updateDateByValue();\n    // update current date if user has not choosen one\n    this.currentDateWatcher(this.currentDate);\n  }\n\n  @Watch(\"appointments\")\n  appointmentsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._appointments = JSON.parse(newValue);\n    } else {\n      this._appointments = newValue;\n    }\n\n    // convert start and end field to date\n    this._appointments = this._appointments.map(appointment => ({\n      ...appointment,\n      start: new Date(appointment.start),\n      end: new Date(appointment.end),\n    }))\n\n    if (this._appointments.length > 0) {\n      // sort with start field and find earliest and latest date\n      this._appointments.sort((a, b) => a['start'] > b['start'] ? 1 : -1);\n      this.earliestDate = this._appointments[0].start;\n      this.latestDate = this._appointments[this._appointments.length - 1].start;\n      this.updateDateByValue();\n    }\n\n    // determine whether all appointments are from the same day\n    if (this._appointments.length > 1) {\n      const firstDate = this._appointments[0].start;\n      this.allAppointsmentOnSameDay = this._appointments\n        .map(appointment => appointment.start)\n        .every(date => `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`\n          === `${firstDate.getFullYear()}-${firstDate.getMonth()}-${firstDate.getDate()}`);\n    }\n\n    // update flags\n    this.showCalendar = !this.allAppointsmentOnSameDay;\n    this.showAppointmentsTitle = this._appointments.length > 1;\n\n    // update current date if user has not choosen one\n    this.currentDateWatcher(this.currentDate);\n  }\n\n  private dateByValue: Date;\n  private earliestDate: Date;\n  private latestDate: Date;\n  private nextDate: Date;\n\n  private showMoreLink: boolean = false;\n  private moreItemsLeft: number = 0;\n  private showCalendar: boolean = false;\n  private showSort: boolean = false;\n  private showSortStart: boolean = false;\n  private showSortPlace: boolean = false;\n  private showAppointmentsTitle: boolean = false;\n  private allAppointsmentOnSameDay: boolean = true;\n  private sortOptions = [];\n\n  private inputElement: HTMLStzhRadiogroupElement;\n  private datepickerElement: HTMLStzhDatepickerElement;\n  private datepickerElementMedium: HTMLStzhDatepickerElement;\n\n  private updateDateByValue() {\n    this.dateByValue = this.value\n      && this._appointments\n        .find(appointment => appointment.value === this.value)\n        .start;\n  }\n\n  private getCurrentDateAppointments() {\n    let indexOfLastCurrentDayDate = 0;\n\n    // filter to current date appointments that can be shown\n    const appointmentsCurrentDate = this._appointments\n      .filter((appointment, index) => {\n        const dateIsInCurrentDay = appointment.start.getFullYear() === this._currentDate.getFullYear()\n          && appointment.start.getMonth() === this._currentDate.getMonth()\n          && appointment.start.getDate() === this._currentDate.getDate();\n\n        if (dateIsInCurrentDay) {\n          indexOfLastCurrentDayDate = index;\n        }\n\n        return dateIsInCurrentDay;\n      });\n\n    // find next day with dates or set to null\n    if (this._appointments[indexOfLastCurrentDayDate + 1]) {\n      this.nextDate = this._appointments[indexOfLastCurrentDayDate + 1].start;\n    } else {\n      this.nextDate = null;\n    }\n\n    // sort\n    appointmentsCurrentDate.sort((a, b) => a[this.sortBy] > b[this.sortBy] ? 1 : -1);\n    return appointmentsCurrentDate;\n  }\n\n  private setValueToFirstAppointmentOfCurrentDate() {\n    // choose the first available appointment from current date\n    const appointments = this.getCurrentDateAppointments()\n      .filter(appointment => !appointment.disabled)\n\n    if (appointments.length > 0) {\n      this.value = appointments[0].value;\n      this.stzhChange.emit({\n        component: \"stzh-appointments\",\n        value: this.value\n      });\n    }\n  }\n\n  private isDateDisabled = (date: Date) => {\n    const dateHasAppointment: boolean = !!this._appointments.find(appointment => {\n      return appointment.start.getFullYear() === date.getFullYear()\n        && appointment.start.getMonth() === date.getMonth()\n        && appointment.start.getDate() === date.getDate();\n    });\n\n    return !dateHasAppointment;\n  }\n\n  private onNextActiveDateClick = async () => {\n    if (this.nextDate) {\n      this.currentDate = this.nextDate;\n\n      const popover = await this.datepickerElement.getPopover();\n\n      if (popover) {\n        popover.hide();\n      }\n    }\n  }\n\n  private onMoreClick = () => {\n    this.showItems = this.stepItems + this.showItems;\n\n    // return focus to radiogroup\n    const radio = this.inputElement.querySelector('stzh-radio');\n    radio.focus();\n  }\n\n  private onDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    const target: HTMLStzhDropdownElement = event.target as HTMLStzhDropdownElement;\n\n    const sortBy = await target.getValue() as \"start\" | \"place\" | \"\";\n\n    if (sortBy) {\n      this.sortBy = sortBy;\n    }\n  }\n\n  private onDatepickerChange = (event: CustomEvent<StzhDatepickerChangeEvent>) => {\n    if (event.detail.component !== 'stzh-datepicker' || !event.detail.valueAsDate) {\n      return;\n    }\n\n    this.currentDate = event.detail.valueAsDate;\n    // reset number of items that should be shown\n    this.showItems = this._initialShowItems;\n  }\n\n  private onRadioChange = (event: CustomEvent<StzhRadioChangeEvent>) => {\n    this.value = event.detail.value;\n    this.stzhChange.emit({\n      component: \"stzh-appointments\",\n      value: this.value\n    });\n  }\n\n  async componentWillLoad() {\n    this._initialShowItems = this.showItems;\n    this.appointmentsWatcher(this.appointments);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"appointments\");\n    }\n\n    this.dateAdapterWatcher(this.dateAdapter);\n  }\n\n  componentWillRender() {\n    const appointments = this.getCurrentDateAppointments();\n\n    // slice to max that should be visible\n    this.appointmentsShown = appointments.slice(0, this.showItems);\n\n    // set flags\n    this.showMoreLink = this.showItems < appointments.length;\n    this.moreItemsLeft = appointments.length - this.showItems;\n\n    // don't show time sort when only one time in the current day\n    this.showSortStart = appointments\n      .map(appointment => {\n        return this.dateAdapter.format(appointment.start, \"time\");\n      }).filter((item, pos, self) => {\n        return self.indexOf(item) == pos;\n      }).length > 1;\n\n    // don't show place sort when only one place in the current day\n    this.showSortPlace = appointments\n      .map(appointment => {\n        return appointment.place;\n      }).filter((item, pos, self) => {\n        return self.indexOf(item) == pos;\n      }).length > 1;\n\n    this.sortOptions = [];\n\n    if (this.showSortStart) {\n      this.sortOptions.push({\n        text: this.localization.sortByTime,\n        value: \"start\"\n      });\n    }\n\n    if (this.showSortPlace) {\n      this.sortOptions.push({\n        text: this.localization.sortByPlace,\n        value: \"place\"\n      });\n    }\n\n    this.showSort = this.appointmentsShown.length > 1;\n\n    // determine sort (force alternative sorting if it makes sense)\n    this._sortBy =\n      (this.showSortStart && !this.showSortPlace && \"start\")\n      || (!this.showSortStart && this.showSortPlace && \"place\")\n      || this.sortBy;\n  }\n\n  componentDidRender() {\n    // set datepickers values to current date\n    if (this.datepickerElement) {\n      this.datepickerElement.setDate(this._currentDate);\n    }\n\n    if (this.datepickerElementMedium) {\n      this.datepickerElementMedium.setDate(this._currentDate);\n    }\n  }\n\n  render() {\n    const headingUsed: boolean = hasSlot(this.element, \"heading\");\n\n    const classes = {\n      \"stzh-appointments\": true,\n      \"stzh-appointments--has-calendar\": this.showCalendar,\n      \"stzh-appointments--has-appointments-title\": this.showAppointmentsTitle,\n      \"stzh-appointments--has-sort\": this.showSort\n    };\n\n    return (\n      <Host has-heading={headingUsed}>\n        <div class={classes}>\n          <div class=\"stzh-appointments__heading\">\n            <slot name=\"heading\"></slot>\n          </div>\n\n          <div class=\"stzh-appointments__wrapper\">\n            {this.showCalendar &&\n              <div class=\"stzh-appointments__calendar-wrapper\">\n                <div class=\"stzh-appointments__calendar-title-wrapper\">\n                  <div class=\"stzh-appointments__calendar-title\">\n                    <stzh-icon class=\"stzh-appointments__calendar-icon\" name=\"calendar\"></stzh-icon>\n                    <span class=\"stzh-appointments__calendar-title-text\">\n                      {this.calendarTitle || this.localization.calendarTitle}\n                    </span>\n                  </div>\n                </div>\n                <div class=\"stzh-appointments__calendar-content\">\n                  <stzh-datepicker\n                    hide-optional\n                    ref={(el) => (this.datepickerElement = el as HTMLStzhDatepickerElement)}\n                    onStzhChange={this.onDatepickerChange}\n                    label={this.localization.datepickerLabel}\n                    calendarIsDateDisabled={this.isDateDisabled}\n                    calendarMin={printISODate(this.earliestDate)}\n                    calendarMax={printISODate(this.latestDate)}\n                  >\n                    <stzh-link\n                      slot=\"action\"\n                      size=\"inherit\"\n                      disabled={!this.nextDate}\n                      onClick={this.onNextActiveDateClick}\n                    >\n                      {this.localization.nextDayWithAppointments}\n                    </stzh-link>\n                  </stzh-datepicker>\n                </div>\n                <div class=\"stzh-appointments__calendar-content-medium\">\n                  <stzh-datepicker\n                    hide-optional\n                    ref={(el) => (this.datepickerElementMedium = el as HTMLStzhDatepickerElement)}\n                    onStzhChange={this.onDatepickerChange}\n                    inline\n                    calendarIsDateDisabled={this.isDateDisabled}\n                    calendarMin={printISODate(this.earliestDate)}\n                    calendarMax={printISODate(this.latestDate)}\n                  >\n                    {this.nextDate &&\n                      <stzh-link\n                        slot=\"action\"\n                        size=\"inherit\"\n                        onClick={this.onNextActiveDateClick}\n                      >\n                        {this.localization.nextDayWithAppointments}\n                      </stzh-link>\n                    }\n                  </stzh-datepicker>\n                </div>\n              </div>\n            }\n            <div class=\"stzh-appointments__appointments-wrapper\">\n              {this.showAppointmentsTitle &&\n                <div class=\"stzh-appointments__appointments-title-wrapper\">\n                  <div class=\"stzh-appointments__appointments-title\">\n                    <stzh-icon class=\"stzh-appointments__appointments-icon\" name=\"clock\"></stzh-icon>\n                    <span class=\"stzh-appointments__appointments-title-text\">\n                      {this.appointmentsTitle || this.localization.appointmentsTitle}\n                    </span>\n                  </div>\n                  {this.showSort &&\n                    <div class=\"stzh-appointments__sort\">\n                      <stzh-dropdown\n                        hide-optional\n                        inline\n                        no-search\n                        class=\"stzh-appointments__sort-dropdown\"\n                        variant=\"plain\"\n                        size=\"small\"\n                        sizeMedium={\"tiny\"}\n                        items={[this._sortBy]}\n                        options={this.sortOptions}\n                        onStzhChange={this.onDropdownChange}\n                      ></stzh-dropdown>\n                    </div>\n                  }\n                </div>\n              }\n\n              <div class=\"stzh-appointments__appointments-content\">\n                <stzh-radiogroup\n                  class=\"stzh-appointments__appointments-radiogroup\"\n                  ref={(el) => this.inputElement = el as HTMLStzhRadiogroupElement}\n                  legend={this.localization.inputLegend}\n                  hide-legend\n                  name={this.name}\n                  value={this.value}\n                  preventUpdateProperties={[\"disabled\"]}\n                >\n                  {this.appointmentsShown.map((appointment) =>\n                    <stzh-radio\n                      onStzhChange={this.onRadioChange}\n                      value={appointment.value}\n                      disabled={typeof appointment.disabled !== \"undefined\" ? appointment.disabled : false}\n                    >\n                      <stzh-text font=\"heavy\" size=\"centi\">\n                        {!this.showCalendar && <span>{this.dateAdapter.format(appointment.start, \"dateLong\")},&nbsp;</span>}\n                        {this.dateAdapter.formatSpan(appointment.start, appointment.end, \"time\")}\n                      </stzh-text>\n                      <stzh-text size=\"milli\">{appointment.caption}</stzh-text>\n                    </stzh-radio>\n                  )}\n                </stzh-radiogroup>\n\n                {this.showMoreLink &&\n                  <stzh-link\n                    class=\"stzh-appointments__more-link\"\n                    size=\"inherit\"\n                    onClick={this.onMoreClick}\n                  >\n                    {tc(this.localization.moreTextItems,\n                      this.moreItemsLeft > this.stepItems\n                        ? this.stepItems\n                        : this.moreItemsLeft)}\n                  </stzh-link>\n                }\n              </div>\n            </div>\n          </div>\n\n          {/* <div class=\"stzh-appointments__actions\">\n            <slot name=\"actions\"></slot>\n          </div> */}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -20,7 +20,7 @@ const StzhBadge = class {
 };
 StzhBadge.style = stzhBadgeCss;
 
-const stzhButtonCss = "@charset \"UTF-8\";.sc-stzh-button-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-button-h{display:none}.sc-stzh-button-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-button-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-button-h *.sc-stzh-button,.sc-stzh-button-h *.sc-stzh-button::before,.sc-stzh-button-h *.sc-stzh-button::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-button-h .has-focus.sc-stzh-button{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-button-h .stzh-fylingfocus-focused.sc-stzh-button{outline-style:none !important}.sc-stzh-button-h .stzh-fylingfocus-focused.sc-stzh-button::-moz-focus-inner{border:0 !important}.sc-stzh-button-h{--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem;--color:var(--stzh-button-color, var(--stzh-color-white));--background-color:var(--stzh-button-background-color, var(--stzh-color-primary70));--border-width:0px;--border-color:transparent;--border-radius:0px;--icon-text-margin:var(--stzh-space-xsmall);--icon-toggle-color:currentColor;--badge-icon-text-margin:calc(var(--icon-text-margin) + var(--stzh-space-xxsmall));--white-space:var(--stzh-button-white-space, normal);--box-shadow:none;--cursor:pointer;--hover-color:var(--stzh-button-hover-color, var(--stzh-color-white));--hover-background-color:var(--stzh-button-hover-background-color, var(--stzh-color-secondary60));--hover-border-color:transparent;display:inline-grid;width:auto;min-width:var(--height);min-height:var(--height);pointer-events:var(--stzh-button-pointer-events, auto)}.sc-stzh-button-h:where([icon-only]:not([icon-only=\"false\"])){--icon-size:var(--stzh-icon-size-large)}@media print{.sc-stzh-button-h{-webkit-print-color-adjust:exact;print-color-adjust:exact}}[icon-only].sc-stzh-button-h:not([icon-only=false]){--padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0;width:var(--height);height:var(--height)}[fullwidth].sc-stzh-button-h:not([fullwidth=false]){width:100%;display:grid}[rounded].sc-stzh-button-h:not([rounded=false]){--border-radius:var(--height)}[no-padding-left].sc-stzh-button-h:not([no-padding-left=false]){--padding-left:0px}[no-padding-right].sc-stzh-button-h:not([no-padding-right=false]){--padding-right:0px}[variant=secondary].sc-stzh-button-h{--color:var(--stzh-button-secondary-color, var(--stzh-color-primary70));--background-color:var(--stzh-button-secondary-background-color, var(--stzh-color-secondary30));--hover-color:var(--stzh-button-secondary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--stzh-button-secondary-hover-background-color, var(--stzh-color-secondary40))}[variant=tertiary].sc-stzh-button-h{--color:var(--stzh-button-tertiary-color, var(--stzh-color-primary70));--background-color:var(--stzh-button-tertiary-background-color, transparent);--hover-color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--stzh-button-tertiary-hover-background-color, var(--stzh-color-secondary20))}[variant=tertiary-plain].sc-stzh-button-h{--color:var(--stzh-button-tertiary-color, var(--stzh-color-primary70));--background-color:transparent;--hover-color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--background-color)}[active].sc-stzh-button-h:not([active=false]){--color:var(--stzh-button-active-color, var(--stzh-color-white));--background-color:var(--stzh-button-active-background-color, var(--stzh-color-secondary60));--hover-color:var(--stzh-button-active-hover-color, var(--stzh-color-white));--hover-background-color:var(--stzh-button-active-hover-background-color, var(--stzh-color-secondary60))}[disabled].sc-stzh-button-h:not([disabled=false]),[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false]){--color:var(--stzh-button-disabled-color, var(--stzh-color-white));--background-color:var(--stzh-button-disabled-background-color, var(--stzh-color-grey70));--hover-color:var(--color);--hover-background-color:var(--background-color)}[disabled].sc-stzh-button-h:not([disabled=false])[variant=secondary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=secondary]{--color:var(--stzh-button-secondary-disabled-color, var(--stzh-color-grey80));--background-color:var(--stzh-button-secondary-disabled-background-color, var(--stzh-color-grey20))}[disabled].sc-stzh-button-h:not([disabled=false])[variant=input],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=input]{--color:var(--stzh-button-input-disabled-color, var(--stzh-color-grey80));--background-color:var(--stzh-button-input-disabled-background-color, var(--stzh-color-grey20))}[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary],[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary-plain],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=tertiary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=tertiary-plain]{--color:var(--stzh-button-tertiary-disabled-color, var(--stzh-color-grey70));--background-color:var(--stzh-button-tertiary-disabled-background-color, transparent)}.sc-stzh-button-h:where([size=\"small\"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size=\"tiny\"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--icon-size:var(--stzh-icon-size-medium)}@media screen and (min-width: 600px){.sc-stzh-button-h:where([size-small=\"default\"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-small=\"default\"]):where([icon-only]:not([icon-only=\"false\"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-small=\"small\"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-small=\"tiny\"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 900px){.sc-stzh-button-h:where([size-medium=\"default\"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-medium=\"default\"]):where([icon-only]:not([icon-only=\"false\"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-medium=\"small\"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-medium=\"tiny\"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 1260px){.sc-stzh-button-h:where([size-large=\"default\"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-large=\"default\"]):where([icon-only]:not([icon-only=\"false\"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-large=\"small\"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-large=\"tiny\"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 1600px){.sc-stzh-button-h:where([size-ultra=\"default\"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-ultra=\"default\"]):where([icon-only]:not([icon-only=\"false\"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-ultra=\"small\"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-ultra=\"tiny\"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{transform:translateX(0)}40%{transform:translateX(-0.5rem)}60%{transform:translateX(-0.25rem)}}.stzh-button.sc-stzh-button{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--font-size);line-height:var(--line-height);letter-spacing:var(--letter-spacing);position:relative;z-index:0;overflow:visible;display:flex;align-items:center;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--color);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);background-color:var(--background-color);transition-duration:var(--stzh-base-transition-animation-speed);transition-property:color, background-color, border-color;border-style:solid;border-width:var(--border-width);border-color:var(--border-color);cursor:var(--cursor);-webkit-text-decoration-line:none;text-decoration-line:none;width:100%;height:100%;border-radius:var(--border-radius);text-align:left;box-shadow:var(--box-shadow)}.stzh-button.sc-stzh-button:hover{border-color:var(--hover-border-color);background-color:var(--hover-background-color);color:var(--hover-color)}.stzh-button__vhidden.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button__inner.sc-stzh-button{display:flex;align-items:center;justify-content:center;flex-grow:1}.stzh-button__icon-wrapper.sc-stzh-button,.stzh-button__toggle-icon-wrapper.sc-stzh-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.stzh-button__icon-wrapper.sc-stzh-button{--stzh-icon-size:var(--icon-size);width:auto;height:1em}.stzh-button__toggle-icon-wrapper.sc-stzh-button{width:var(--icon-size);height:var(--icon-size)}.stzh-button__toggle-icon.sc-stzh-button{position:relative;display:block;width:var(--icon-toggle-size);height:var(--icon-toggle-size)}.stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button__toggle-icon.sc-stzh-button::after{position:absolute;top:50%;left:50%;content:\"\";display:block;width:var(--icon-toggle-size);height:0.125rem;transition-property:transform, background-color;transition-duration:500ms;transform-origin:top left;background-color:var(--icon-toggle-color)}@media (prefers-reduced-motion: reduce){.stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button__toggle-icon.sc-stzh-button::after{transition:none}}.stzh-button__toggle-icon.sc-stzh-button::before{transform:rotate(180deg) translate(-50%, -50%)}.stzh-button__toggle-icon.sc-stzh-button::after{transform:rotate(90deg) translate(-50%, -50%)}.stzh-button__text.sc-stzh-button{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;white-space:var(--white-space);text-align:center}.stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--icon-text-margin)}.stzh-button__badge.sc-stzh-button{position:absolute;z-index:1;top:0;right:0}.stzh-button__input.sc-stzh-button{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.stzh-button__mark.sc-stzh-button{border:0.125rem solid var(--stzh-color-black);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;transition:border-color var(--stzh-base-transition-animation-speed);width:1.25rem;height:1.25rem;margin-right:var(--stzh-space-xsmall);border-color:currentColor}.stzh-button__mark.sc-stzh-button::before{content:\"\"}.stzh-button__check.sc-stzh-button{background-color:currentColor;color:var(--stzh-color-primary70);width:1rem;height:1rem;border-radius:50%;opacity:0;transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-button__check.sc-stzh-button{background-color:ButtonText}}.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-secondary60)}.stzh-button.sc-stzh-button:hover .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:focus:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-secondary60)}.stzh-button__input.sc-stzh-button:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary)}.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{opacity:1}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-grey70)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-grey70)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__mark.sc-stzh-button{background-color:var(--stzh-color-grey10)}.stzh-button--is-expanded.sc-stzh-button .stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button--is-expanded.sc-stzh-button .stzh-button__toggle-icon.sc-stzh-button::after{transform:rotate(0) translate(-50%, -50%)}.stzh-button--badge-position-button.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:static}.stzh-button__badge.sc-stzh-button,.stzh-button--badge-position-button.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:relative}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--badge-icon-text-margin)}.stzh-button--has-icon-only.sc-stzh-button .stzh-button__text.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button--effect-cta.sc-stzh-button:hover .stzh-button__icon-wrapper.sc-stzh-button{animation:stzh-button-effect-cta 1s}.stzh-button--align-left.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:flex-start}.stzh-button--align-right.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:flex-end}.stzh-button--align-center.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:center}.stzh-button--align-space-between.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:space-between}.stzh-button--is-disabled.sc-stzh-button{cursor:not-allowed}.stzh-button--default.has-focus.sc-stzh-button{outline:var(--stzh-flyingfocus-color) solid 0.1875rem}";
+const stzhButtonCss = "@charset \"UTF-8\";.sc-stzh-button-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-button-h{display:none}.sc-stzh-button-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-button-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-button-h *.sc-stzh-button,.sc-stzh-button-h *.sc-stzh-button::before,.sc-stzh-button-h *.sc-stzh-button::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-button-h .has-focus.sc-stzh-button{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-button-h .stzh-fylingfocus-focused.sc-stzh-button{outline-style:none !important}.sc-stzh-button-h .stzh-fylingfocus-focused.sc-stzh-button::-moz-focus-inner{border:0 !important}.sc-stzh-button-h{--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem;--color:var(--stzh-button-color, var(--stzh-color-white));--background-color:var(--stzh-button-background-color, var(--stzh-color-primary70));--border-width:0px;--border-color:transparent;--border-radius:0px;--icon-text-margin:var(--stzh-space-xsmall);--icon-toggle-color:currentColor;--badge-icon-text-margin:calc(var(--icon-text-margin) + var(--stzh-space-xxsmall));--white-space:var(--stzh-button-white-space, normal);--box-shadow:none;--cursor:pointer;--hover-color:var(--stzh-button-hover-color, var(--stzh-color-white));--hover-background-color:var(--stzh-button-hover-background-color, var(--stzh-color-secondary60));--hover-border-color:transparent;display:inline-grid;width:auto;min-width:var(--height);min-height:var(--height);pointer-events:var(--stzh-button-pointer-events, auto)}.sc-stzh-button-h:where([icon-only]:not([icon-only=\"false\"])){--icon-size:var(--stzh-icon-size-large)}@media print{.sc-stzh-button-h{-webkit-print-color-adjust:exact;print-color-adjust:exact}}[icon-only].sc-stzh-button-h:not([icon-only=false]){--padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0;width:var(--height);height:var(--height)}[fullwidth].sc-stzh-button-h:not([fullwidth=false]){width:100%;display:grid}[rounded].sc-stzh-button-h:not([rounded=false]){--border-radius:var(--height)}[no-padding-left].sc-stzh-button-h:not([no-padding-left=false]){--padding-left:0px}[no-padding-right].sc-stzh-button-h:not([no-padding-right=false]){--padding-right:0px}[variant=secondary].sc-stzh-button-h{--color:var(--stzh-button-secondary-color, var(--stzh-color-primary70));--background-color:var(--stzh-button-secondary-background-color, var(--stzh-color-secondary30));--hover-color:var(--stzh-button-secondary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--stzh-button-secondary-hover-background-color, var(--stzh-color-secondary40))}[variant=tertiary].sc-stzh-button-h{--color:var(--stzh-button-tertiary-color, var(--stzh-color-primary70));--background-color:var(--stzh-button-tertiary-background-color, transparent);--hover-color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--stzh-button-tertiary-hover-background-color, var(--stzh-color-secondary20))}[variant=tertiary-plain].sc-stzh-button-h{--color:var(--stzh-button-tertiary-color, var(--stzh-color-primary70));--background-color:transparent;--hover-color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--background-color)}[active].sc-stzh-button-h:not([active=false]){--color:var(--stzh-button-active-color, var(--stzh-color-white));--background-color:var(--stzh-button-active-background-color, var(--stzh-color-secondary60));--hover-color:var(--stzh-button-active-hover-color, var(--stzh-color-white));--hover-background-color:var(--stzh-button-active-hover-background-color, var(--stzh-color-secondary60))}[disabled].sc-stzh-button-h:not([disabled=false]),[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false]){--color:var(--stzh-button-disabled-color, var(--stzh-color-white));--background-color:var(--stzh-button-disabled-background-color, var(--stzh-color-grey70));--hover-color:var(--color);--hover-background-color:var(--background-color)}[disabled].sc-stzh-button-h:not([disabled=false])[variant=secondary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=secondary]{--color:var(--stzh-button-secondary-disabled-color, var(--stzh-color-grey80));--background-color:var(--stzh-button-secondary-disabled-background-color, var(--stzh-color-grey20))}[disabled].sc-stzh-button-h:not([disabled=false])[variant=input],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=input]{--color:var(--stzh-button-input-disabled-color, var(--stzh-color-grey80));--background-color:var(--stzh-button-input-disabled-background-color, var(--stzh-color-grey20))}[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary],[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary-plain],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=tertiary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=tertiary-plain]{--color:var(--stzh-button-tertiary-disabled-color, var(--stzh-color-grey70));--background-color:var(--stzh-button-tertiary-disabled-background-color, transparent)}.sc-stzh-button-h:where([size=\"small\"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size=\"tiny\"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}@media screen and (min-width: 600px){.sc-stzh-button-h:where([size-small=\"default\"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-small=\"default\"]):where([icon-only]:not([icon-only=\"false\"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-small=\"small\"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-small=\"tiny\"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 900px){.sc-stzh-button-h:where([size-medium=\"default\"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-medium=\"default\"]):where([icon-only]:not([icon-only=\"false\"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-medium=\"small\"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-medium=\"tiny\"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 1260px){.sc-stzh-button-h:where([size-large=\"default\"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-large=\"default\"]):where([icon-only]:not([icon-only=\"false\"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-large=\"small\"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-large=\"tiny\"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 1600px){.sc-stzh-button-h:where([size-ultra=\"default\"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-ultra=\"default\"]):where([icon-only]:not([icon-only=\"false\"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-ultra=\"small\"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-ultra=\"tiny\"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{transform:translateX(0)}40%{transform:translateX(-0.5rem)}60%{transform:translateX(-0.25rem)}}.stzh-button.sc-stzh-button{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--font-size);line-height:var(--line-height);letter-spacing:var(--letter-spacing);position:relative;z-index:0;overflow:visible;display:flex;align-items:center;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--color);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);background-color:var(--background-color);transition-duration:var(--stzh-base-transition-animation-speed);transition-property:color, background-color, border-color;border-style:solid;border-width:var(--border-width);border-color:var(--border-color);cursor:var(--cursor);-webkit-text-decoration-line:none;text-decoration-line:none;width:100%;height:100%;border-radius:var(--border-radius);text-align:left;box-shadow:var(--box-shadow)}.stzh-button.sc-stzh-button:hover{border-color:var(--hover-border-color);background-color:var(--hover-background-color);color:var(--hover-color)}.stzh-button__vhidden.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button__inner.sc-stzh-button{display:flex;align-items:center;justify-content:center;flex-grow:1}.stzh-button__icon-wrapper.sc-stzh-button,.stzh-button__toggle-icon-wrapper.sc-stzh-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.stzh-button__icon-wrapper.sc-stzh-button{--stzh-icon-size:var(--icon-size);width:auto;height:1em}.stzh-button__toggle-icon-wrapper.sc-stzh-button{width:var(--icon-size);height:var(--icon-size)}.stzh-button__toggle-icon.sc-stzh-button{position:relative;display:block;width:var(--icon-toggle-size);height:var(--icon-toggle-size)}.stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button__toggle-icon.sc-stzh-button::after{position:absolute;top:50%;left:50%;content:\"\";display:block;width:var(--icon-toggle-size);height:0.125rem;transition-property:transform, background-color;transition-duration:500ms;transform-origin:top left;background-color:var(--icon-toggle-color)}@media (prefers-reduced-motion: reduce){.stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button__toggle-icon.sc-stzh-button::after{transition:none}}.stzh-button__toggle-icon.sc-stzh-button::before{transform:rotate(180deg) translate(-50%, -50%)}.stzh-button__toggle-icon.sc-stzh-button::after{transform:rotate(90deg) translate(-50%, -50%)}.stzh-button__text.sc-stzh-button{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;white-space:var(--white-space);text-align:center}.stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--icon-text-margin)}.stzh-button__badge.sc-stzh-button{position:absolute;z-index:1;top:0;right:0}.stzh-button__input.sc-stzh-button{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.stzh-button__mark.sc-stzh-button{border:0.125rem solid var(--stzh-color-black);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;transition:border-color var(--stzh-base-transition-animation-speed);width:1.25rem;height:1.25rem;margin-right:var(--stzh-space-xsmall);border-color:currentColor}.stzh-button__mark.sc-stzh-button::before{content:\"\"}.stzh-button__check.sc-stzh-button{background-color:currentColor;color:var(--stzh-color-primary70);width:1rem;height:1rem;border-radius:50%;opacity:0;transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-button__check.sc-stzh-button{background-color:ButtonText}}.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-secondary60)}.stzh-button.sc-stzh-button:hover .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:focus:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-secondary60)}.stzh-button__input.sc-stzh-button:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary)}.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{opacity:1}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-grey70)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-grey70)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__mark.sc-stzh-button{background-color:var(--stzh-color-grey10)}.stzh-button--is-expanded.sc-stzh-button .stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button--is-expanded.sc-stzh-button .stzh-button__toggle-icon.sc-stzh-button::after{transform:rotate(0) translate(-50%, -50%)}.stzh-button--badge-position-button.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:static}.stzh-button__badge.sc-stzh-button,.stzh-button--badge-position-button.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:relative}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--badge-icon-text-margin)}.stzh-button--has-icon-only.sc-stzh-button .stzh-button__text.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button--effect-cta.sc-stzh-button:hover .stzh-button__icon-wrapper.sc-stzh-button{animation:stzh-button-effect-cta 1s}.stzh-button--align-left.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:flex-start}.stzh-button--align-right.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:flex-end}.stzh-button--align-center.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:center}.stzh-button--align-space-between.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:space-between}.stzh-button--is-disabled.sc-stzh-button{cursor:not-allowed}.stzh-button--default.has-focus.sc-stzh-button{outline:var(--stzh-flyingfocus-color) solid 0.1875rem}";
 
 const StzhButton = class {
   constructor(hostRef) {
@@ -28,6 +28,7 @@ const StzhButton = class {
     this.stzhFocus = createEvent(this, "stzhFocus", 7);
     this.stzhBlur = createEvent(this, "stzhBlur", 7);
     this.stzhChange = createEvent(this, "stzhChange", 7);
+    this.stzhClick = createEvent(this, "stzhClick", 7);
     this.focusedByInput = false;
     this.handleReset = async () => {
       this.checked = this.defaultChecked;
@@ -77,6 +78,13 @@ const StzhButton = class {
         event.stopPropagation();
         event.preventDefault();
       }
+      else {
+        this.stzhClick.emit({
+          component: "stzh-button",
+          originalEvent: event,
+          href: this.href
+        });
+      }
     };
     this.localization = undefined;
     this.badge = "";

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

@@ -1 +1 @@
-{"file":"stzh-badge.stzh-button.stzh-icon.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-badge/stzh-badge.scss?tag=stzh-badge&encapsulation=scoped","src/components/stzh-badge/stzh-badge.tsx","src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","src/components/stzh-button/stzh-button.tsx","src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=shadow","src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":[":host {\n  --color: #{$colorWhite};\n  --background-color: #{$colorGrey90};\n  display: inline-flex;\n\n  &[type=\"success\"] {\n    --background-color: #{$colorSuccess70};\n  }\n\n  &[type=\"warning\"] {\n    --color: #{$colorBlack};\n    --background-color: #{$colorWarning60};\n  }\n\n  &[type=\"error\"] {\n    --background-color: #{$colorError60};\n  }\n\n  &[type=\"info\"] {\n    --background-color: #{$colorPrimary70};\n  }\n\n  &[filled][type=\"error\"] {\n    --background-color: #{$colorError70};\n  }\n}\n\n.stzh-badge {\n  @include badge;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { StzhBadgeType } from \"../../index\";\n\n/**\n * @slot - Slot badge content\n */\n@Component({\n  tag: \"stzh-badge\",\n  styleUrl: \"stzh-badge.scss\",\n  scoped: true\n})\nexport class StzhBadge {\n  /** Text content of the badge */\n  @Prop() label: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhBadgeType = \"default\";\n\n  render() {\n    const classes = {\n      \"stzh-badge\": true,\n      [`stzh-badge--type-${this.type}`]: !!this.type\n    };\n\n    return (\n      <Host filled={!!this.label}>\n        <div class={classes}>\n          {this.label}\n        </div>\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --height: Height of button\n * @prop --padding-top: Padding top of button\n * @prop --padding-bottom: Padding bottom of button\n * @prop --padding-left: Padding left of button\n * @prop --padding-right: Padding right of button\n * @prop --border-radius: Border radius of button\n * @prop --color: Color of button\n * @prop --background-color: Background color of button\n * @prop --border-color: Border color of button\n * @prop --icon-size: Size of icon next to button\n * @prop --hover-color: Hover color of button\n * @prop --hover-background-color: Hover background color of button\n * @prop --hover-border-color: Hover border color of button\n * @prop --white-space: White space behaviour of button\n *\n * @prop --stzh-form-input-height: **Global**: Height of fields & buttons\n * @prop --stzh-form-input-small-height: **Global**: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: **Global**: Height of fields & buttons when tiny variant is used\n */\n\n@mixin button--size-default() {\n  --height: #{$formInputHeight};\n  --padding-top: calc(#{space('xsmall')} - var(--border-width));\n  --padding-bottom: calc(#{space('xsmall')} - var(--border-width));\n  --padding-left: #{space('xlarge')};\n  --padding-right: #{space('xlarge')};\n  --font-size: var(--stzh-font-centi-font-size);\n  --line-height: var(--stzh-font-centi-text-line-height);\n  --letter-spacing: normal;\n  --icon-size: #{iconSize('medium')};\n  --icon-toggle-size: 14.5px;\n\n  &:where([icon-only]:not([icon-only=\"false\"])) {\n    --icon-size: #{iconSize('large')};\n  }\n}\n\n@mixin button--size-small() {\n  --height: #{$formInputHeightSmall};\n  --padding-left: #{space('large')};\n  --padding-right: #{space('large')};\n  --font-size: var(--stzh-font-milli-font-size);\n  --line-height: var(--stzh-font-milli-text-line-height);\n  --icon-size: #{iconSize('medium')};\n}\n\n@mixin button--size-tiny() {\n  --height: #{$formInputHeightTiny};\n  --padding-left: #{space('medium')};\n  --padding-right: #{space('medium')};\n  --padding-top: calc(#{space('xxsmall')} - var(--border-width));\n  --padding-bottom: calc(#{space('xxsmall')} - var(--border-width));\n  --font-size: var(--stzh-font-micro-font-size);\n  --line-height: var(--stzh-font-micro-text-line-height);\n  --icon-size: #{iconSize('medium')};\n}\n\n:host {\n  @include button--size-default;\n  --color: var(--stzh-button-color, #{$colorWhite});\n  --background-color: var(--stzh-button-background-color, #{$colorPrimary70});\n  --border-width: 0px;\n  --border-color: transparent;\n  --border-radius: 0px;\n  --icon-text-margin: #{space('xsmall')};\n  --icon-toggle-color: currentColor;\n  --badge-icon-text-margin: calc(var(--icon-text-margin) + #{space('xxsmall')});\n  --white-space: var(--stzh-button-white-space, normal);\n  --box-shadow: none;\n  --cursor: pointer;\n\n  --hover-color: var(--stzh-button-hover-color, #{$colorWhite});\n  --hover-background-color: var(--stzh-button-hover-background-color, #{$colorSecondary60});\n  --hover-border-color: transparent;\n\n  display: inline-grid;\n  width: auto;\n  min-width: var(--height);\n  min-height: var(--height);\n  pointer-events: var(--stzh-button-pointer-events, auto);\n\n  @media print {\n    -webkit-print-color-adjust: exact;\n    print-color-adjust: exact;\n  }\n\n  &[icon-only]:not([icon-only=\"false\"]) {\n    --padding-top: 0;\n    --padding-bottom: 0;\n    --padding-left: 0;\n    --padding-right: 0;\n\n    width: var(--height);\n    height: var(--height);\n  }\n\n  &[fullwidth]:not([fullwidth=\"false\"]) {\n    width: 100%;\n    display: grid;\n  }\n\n  &[rounded]:not([rounded=\"false\"]) {\n    --border-radius: var(--height);\n  }\n\n  &[no-padding-left]:not([no-padding-left=\"false\"]) {\n    --padding-left: 0px;\n  }\n\n  &[no-padding-right]:not([no-padding-right=\"false\"]) {\n    --padding-right: 0px;\n  }\n\n  &[variant=\"secondary\"] {\n    --color: var(--stzh-button-secondary-color, #{$colorPrimary70});\n    --background-color: var(--stzh-button-secondary-background-color, #{$colorSecondary30});\n\n    --hover-color: var(--stzh-button-secondary-hover-color, #{$colorPrimary80});\n    --hover-background-color: var(--stzh-button-secondary-hover-background-color, #{$colorSecondary40});\n  }\n\n  &[variant=\"tertiary\"] {\n    --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n    --background-color: var(--stzh-button-tertiary-background-color, transparent);\n\n    --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n    --hover-background-color: var(--stzh-button-tertiary-hover-background-color, #{$colorSecondary20});\n  }\n\n  &[variant=\"tertiary-plain\"] {\n    --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n    --background-color: transparent;\n\n    --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n    --hover-background-color: var(--background-color);\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: var(--stzh-button-active-color, #{$colorWhite});\n    --background-color: var(--stzh-button-active-background-color, #{$colorSecondary60});\n\n    --hover-color: var(--stzh-button-active-hover-color, #{$colorWhite});\n    --hover-background-color: var(--stzh-button-active-hover-background-color, #{$colorSecondary60});\n  }\n\n  &[disabled]:not([disabled=\"false\"]),\n  &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n    --color: var(--stzh-button-disabled-color, #{$colorWhite});\n    --background-color: var(--stzh-button-disabled-background-color, #{$colorGrey70});\n\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"secondary\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"secondary\"] {\n    --color: var(--stzh-button-secondary-disabled-color, #{$colorGrey80});\n    --background-color: var(--stzh-button-secondary-disabled-background-color, #{$colorGrey20});\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"input\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"input\"] {\n    --color: var(--stzh-button-input-disabled-color, #{$colorGrey80});\n    --background-color: var(--stzh-button-input-disabled-background-color, #{$colorGrey20});\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"tertiary\"],\n  &[disabled]:not([disabled=\"false\"])[variant=\"tertiary-plain\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary-plain\"] {\n    --color: var(--stzh-button-tertiary-disabled-color, #{$colorGrey70});\n    --background-color: var(--stzh-button-tertiary-disabled-background-color, transparent);\n  }\n}\n\n:host(:where([size=\"small\"])) {\n  @include button--size-small;\n}\n\n:host(:where([size=\"tiny\"])) {\n  @include button--size-tiny;\n}\n\n@each $breakpoint, $size in $breakpoints {\n  @include mq($from: $breakpoint) {\n    :host(:where([size-#{$breakpoint}=\"default\"])) {\n      @include button--size-default;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"small\"])) {\n      @include button--size-small;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"tiny\"])) {\n      @include button--size-tiny;\n    }\n  }\n}\n\n@keyframes stzh-button-effect-cta {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n.stzh-button {\n  @include font('heavy');\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  letter-spacing: var(--letter-spacing);\n  position: relative;\n  z-index: 0;\n  overflow: visible;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  color: var(--color);\n  padding-top: var(--padding-top);\n  padding-bottom: var(--padding-bottom);\n  padding-left: var(--padding-left);\n  padding-right: var(--padding-right);\n  background-color: var(--background-color);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  border-style: solid;\n  border-width: var(--border-width);\n  border-color: var(--border-color);\n  cursor: var(--cursor);\n  text-decoration-line: none;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--border-radius);\n  text-align: left;\n  box-shadow: var(--box-shadow);\n\n  &:hover {\n    border-color: var(--hover-border-color);\n    background-color: var(--hover-background-color);\n    color: var(--hover-color);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-grow: 1;\n  }\n\n  &__icon-wrapper,\n  &__toggle-icon-wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n    width: auto;\n    height: 1em;\n  }\n\n  &__toggle-icon-wrapper {\n    width: var(--icon-size);\n    height: var(--icon-size);\n  }\n\n  &__toggle-icon {\n    position: relative;\n    display: block;\n    width: var(--icon-toggle-size);\n    height: var(--icon-toggle-size);\n\n    &::before,\n    &::after {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      content: '';\n      display: block;\n      width: var(--icon-toggle-size);\n      height: 2px;\n      transition-property: transform, background-color;\n      transition-duration: 500ms;\n      transform-origin: top left;\n      background-color: var(--icon-toggle-color);\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    }\n\n    &::before {\n      transform: rotate(180deg) translate(-50%, -50%);\n    }\n\n    &::after {\n      transform: rotate(90deg) translate(-50%, -50%);\n    }\n  }\n\n  &__text {\n    @include wordWrap;\n    white-space: var(--white-space);\n    text-align: center;\n  }\n\n  &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: var(--icon-text-margin);\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    right: 0;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n  }\n\n  &__mark {\n    @include radio__mark();\n    width: 20px;\n    height: 20px;\n    margin-right: space('xsmall');\n    border-color: currentColor;\n  }\n\n  &__check {\n    @include radio__check();\n  }\n\n  /* Hover / Focus / Checked / Disabled of Radio Type */\n\n  &__input:checked:hover ~ &__inner &__mark &__check,\n  &__input:checked:focus ~ &__inner &__mark &__check {\n    color: $colorSecondary60;\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__inner &__mark,\n  &__input:checked:hover ~ &__inner &__mark,\n  &__input:checked:focus ~ &__inner &__mark {\n    border-color: $colorSecondary60;\n  }\n\n  &__input:focus ~ &__inner &__mark,\n  &__input:checked ~ &__inner &__mark {\n    border-color: $colorPrimary;\n  }\n\n  &__input:checked ~ &__inner &__mark &__check {\n    opacity: 1;\n  }\n\n  &--is-disabled &__input ~ &__inner &__mark &__check {\n    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__inner &__mark {\n    border-color: $formDisabledBorderColor;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n\n  /* Is expanded */\n\n  &--is-expanded &__toggle-icon {\n    &::before,\n    &::after {\n      transform: rotate(0) translate(-50%, -50%);\n    }\n  }\n\n  /* Badge positioning variants */\n\n  &--badge-position-button &__icon-wrapper {\n    position: static;\n  }\n\n  &__badge,\n  &--badge-position-button &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('xsmall')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n    position: relative;\n  }\n\n  &--badge-position-icon#{&}--has-icon &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('small')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: var(--badge-icon-text-margin);\n  }\n\n  /* Variant if button only has icon */\n\n  &--has-icon-only &__text {\n    @include visuallyhidden;\n  }\n\n  /* Effect */\n\n  &--effect-cta:hover &__icon-wrapper {\n\t\tanimation: stzh-button-effect-cta 1s;\n  }\n\n  /* Alignment variants */\n\n  &--align-left &__inner {\n    justify-content: flex-start;\n  }\n\n  &--align-right &__inner {\n    justify-content: flex-end;\n  }\n\n  &--align-center &__inner {\n    justify-content: center;\n  }\n\n  &--align-space-between &__inner {\n    justify-content: space-between;\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n\n  /* Default */\n\n  &--default.has-focus {\n    outline: var(--stzh-flyingfocus-color) solid 3px;\n  }\n}\n","import {\n  Component,\n  Host,\n  Fragment,\n  Element,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen\n} from \"@stencil/core\";\n\nimport {\n  StzhButtonFocusEvent,\n  StzhButtonBlurEvent,\n  StzhButtonChangeEvent,\n  StzhButtonSize,\n  StzhButtonVariant,\n  StzhBadgeType\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot - Slot for label/text content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: \"stzh-button\",\n  styleUrl: \"stzh-button.scss\",\n  scoped: true\n})\nexport class StzhButton {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Display a badge aligned to button or icons */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Badge position */\n  @Prop({ reflect: true }) badgePosition: \"icon\" | \"button\" = \"button\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Whether the button is full width */\n  @Prop({ reflect: true }) fullwidth: boolean = false;\n\n  /** Whether the button is rounded */\n  @Prop({ reflect: true }) rounded: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: StzhButtonSize = \"default\";\n\n  /** Size variant (abobe small breakpoint) */\n  @Prop({ reflect: true }) sizeSmall: StzhButtonSize;\n\n  /** Size variant (abobe medium breakpoint) */\n  @Prop({ reflect: true }) sizeMedium: StzhButtonSize;\n\n  /** Size variant (abobe large breakpoint) */\n  @Prop({ reflect: true }) sizeLarge: StzhButtonSize;\n\n  /** Size variant (abobe ultra breakpoint) */\n  @Prop({ reflect: true }) sizeUltra: StzhButtonSize;\n\n  /** Text alignment */\n  @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n  /** Variant style */\n  @Prop({ reflect: true }) variant: StzhButtonVariant = \"default\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Icon Position */\n  @Prop({ reflect: true }) iconPosition: \"left\" | \"right\" = \"left\";\n\n  /** Checked status (if type is radio) */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset, if type is radio) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** The name of the input element (if type is button or radio) */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** The value of the input element (if type is button or radio) */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** `href` if the button should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** Type of the button */\n  @Prop() type: \"button\" | \"submit\" | \"reset\" | \"radio\" = \"button\";\n\n  /** Whether the button is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether the button is active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Effect/Animation used */\n  @Prop() effect: \"default\" | \"cta\" = \"default\";\n\n  /** Whether only an icon is used inside the button */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /** Whether padding left should be removed */\n  @Prop({ reflect: true }) noPaddingLeft: boolean = false;\n\n  /** Whether padding right should be removed */\n  @Prop({ reflect: true }) noPaddingRight: boolean = false;\n\n  /** Access key of button (usually a number e.g. 1) */\n  @Prop() buttonAccesskey: string;\n\n  /** ID of button element */\n  @Prop() buttonId: string;\n\n  /** Whether to show toggle icon (show minus when a11yExpanded=true, otherwise plus) */\n  @Prop({ reflect: true }) showToggleIcon: boolean = false;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria disabled of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Aria current of link/button */\n  @Prop({ attribute: \"a11y-current\" }) a11yCurrent: string;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhButtonElement;\n\n  @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  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n  /** Change event (only called if type is radio) */\n  @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n  private button: HTMLButtonElement | HTMLAnchorElement | HTMLLabelElement;\n  private input: HTMLInputElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\n\n  private handleReset = async () => {\n    this.checked = this.defaultChecked;\n  }\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-button\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked\n    });\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.button.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-button\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-button\",\n      originalEvent: event\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.stopPropagation();\n      event.preventDefault();\n    }\n  }\n\n  private renderIcon(iconUsed: boolean): HTMLInputElement {\n    return (\n      <div class=\"stzh-button__icon-wrapper\">\n        {this.icon &&\n          <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>\n        }\n        {!this.icon && this.showToggleIcon &&\n          <div class=\"stzh-button__toggle-icon-wrapper\">\n            <div class=\"stzh-button__toggle-icon\"></div>\n          </div>\n        }\n        {!this.icon && !this.showToggleIcon &&\n          <slot name=\"icon\"></slot>\n        }\n        {(this.badge || this.badgeEmpty) && this.badgePosition === \"icon\" && iconUsed &&\n          <stzh-badge class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        }\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    return (\n      <div\n        class=\"stzh-button__text\"\n        ref={(el) => (this.text = el as HTMLDivElement)}\n      >\n        {this.rel && this.rel.includes('external') && <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n        {this.download && <div class=\"stzh-button__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n        {this.label ? this.label : <slot></slot>}\n      </div>\n    );\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        <div\n          class=\"stzh-button__inner\"\n          onClick={this.onClick}\n        >\n          {this.type === \"radio\" &&\n            <div class=\"stzh-button__mark\">\n              <div class=\"stzh-button__check\"></div>\n            </div>\n          }\n          {this.iconPosition === \"left\" && this.renderIcon(iconUsed)}\n          {this.renderContent()}\n          {this.iconPosition === \"right\" && this.renderIcon(iconUsed)}\n        </div>\n        {(this.badge || this.badgeEmpty) && (this.badgePosition === \"button\" || !iconUsed) &&\n          <stzh-badge\n            class=\"stzh-button__badge\"\n            label={this.badge}\n            type={this.badgeType}\n            onClick={this.onClick}\n          ></stzh-badge>\n        }\n      </Fragment>\n    );\n  }\n\n  async componentWillLoad() {\n    this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"button\");\n    }\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.button?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-button\": true,\n      \"stzh-button--has-icon\": iconUsed,\n      \"stzh-button--has-icon-only\": this.iconOnly,\n      \"stzh-button--has-badge\": !!this.badge,\n      \"stzh-button--is-rounded\": this.rounded,\n      \"stzh-button--is-fullwidth\": this.fullwidth,\n      \"stzh-button--is-disabled\": this.disabled || this.a11yDisabled,\n      \"stzh-button--is-active\": this.active,\n      \"stzh-button--is-expanded\": this.a11yExpanded,\n      [`stzh-button--effect-${this.effect}`]: !!this.effect,\n      [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n      [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,\n      [`stzh-button--type-${this.type}`]: !!this.type,\n      [`stzh-button--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ?\n          <a\n            ref={(el) => (this.button = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            rel={this.rel}\n            download={this.download}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n              ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n              ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls || null}\n            aria-current={this.a11yCurrent || null}\n            id={this.buttonId}\n            accessKey={this.buttonAccesskey}\n            tabindex={this.a11yTabindex}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n          :\n          this.type === \"radio\" ?\n            <label\n              ref={(el) => (this.button = el as HTMLLabelElement)}\n              class={classes}\n              onClick={this.onClick}\n              >\n              <input\n                ref={(el) => (this.input = el as HTMLInputElement)}\n                type=\"radio\"\n                class=\"stzh-button__input\"\n                name={this.name}\n                value={this.value}\n                defaultChecked={this.defaultChecked}\n                checked={this.checked}\n                disabled={this.disabled}\n                aria-label={this.a11yLabel || null}\n                aria-describedby={this.a11yDescribedby || null}\n                aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n                  ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n                aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n                  ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n                aria-controls={this.a11yControls || null}\n                aria-current={this.a11yCurrent || null}\n                id={this.buttonId}\n                accessKey={this.buttonAccesskey}\n                tabindex={this.a11yTabindex}\n                onFocus={this.onFocus}\n                onBlur={this.onBlur}\n                onClick={this.onClick}\n                onInput={this.onInput}\n              />\n              {this.renderInner(iconUsed)}\n            </label>\n            :\n            <button\n              ref={(el) => (this.button = el as HTMLButtonElement)}\n              class={classes}\n              type={this.type}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n                ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n              aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n                ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n              aria-controls={this.a11yControls || null}\n              aria-current={this.a11yCurrent || null}\n              id={this.buttonId}\n              accessKey={this.buttonAccesskey}\n              tabindex={this.a11yTabindex}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n              onClick={this.onClick}\n            >\n              {this.renderInner(iconUsed)}\n            </button>\n        }\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --size: Icon size\n * @prop --color: Icon color\n *\n * @prop --stzh-icon-size: **Global**: Default icon size. [See available icon sizes here](/docs/tokens-icons--docs#sizes).\n * @prop --stzh-icon-color: **Global**: Icon color\n * @prop --stzh-icon-vertical-align: **Global**: Icon vertical alignment\n */\n\n:host {\n  --size: #{iconSize()};\n  --color: #{$iconColor};\n  --vertical-align: #{$iconVerticalAlign};\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  color: var(--color);\n  vertical-align: var(--vertical-align);\n  width: var(--size);\n  height: var(--size);\n}\n\n.stzh-icon {\n  display: none;\n\n  &__svg {\n    width: var(--size);\n    height: var(--size);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Watch,\n  State,\n  Element\n} from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n@Component({\n  tag: \"stzh-icon\",\n  styleUrl: \"stzh-icon.scss\",\n  shadow: true\n})\nexport class StzhIcon {\n  /**\n   * Icon which should be displayed\n   * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n   */\n  @Prop() name: string = \"\";\n\n  /**\n   * Hidden icon title for screenreader\n   * (usually not needed when e.g. inside links or buttons that have text)\n  */\n  @Prop({ attribute: 'a11y-title' }) a11yTitle: string = \"\";\n\n  @Element() element: HTMLStzhIconElement;\n\n  @State() svgHtml: string = \"\";\n  @State() iconDisplay: string = \"none\";\n\n  @Watch(\"name\")\n  async nameWatcher(name: string) {\n    this.iconDisplay = \"none\";\n\n    if (name) {\n      const response = await fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`);\n\n      if (response.status === 200) {\n        const svgString = await response.text();\n\n        const parser = new DOMParser();\n        const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');\n\n        this.svgElement = svgDoc.documentElement as unknown as SVGElement;\n        this.svgElement.classList.add('stzh-icon__svg');\n\n        // for some obscure reason we need to delay showing the icon in safari,\n        // otherwise the icon doesn't show up randomly\n        // TODO: sometimes the icon still randomely disappears when clicked on page (check on newer safari if problems still occur)\n        window.setTimeout(() => {\n          this.iconDisplay = \"contents\";\n        }, 0);\n\n        this.a11yTitleWatcher(this.a11yTitle);\n      } else {\n        this.svgElement = null;\n        this.svgHtml = '';\n      }\n    } else {\n      this.svgElement = null;\n      this.svgHtml = '';\n    }\n  }\n\n  @Watch(\"a11yTitle\")\n  a11yTitleWatcher(a11yTitle: string) {\n    this.svgElement.setAttribute(\"aria-hidden\", a11yTitle ? \"false\" : \"true\");\n    this.svgElement.setAttribute(\"focusable\", a11yTitle ? \"true\" : \"false\");\n    this.svgElement.setAttribute(\"aria-labelledby\", a11yTitle ? `${this.iconId}-title` : null);\n\n    let title = this.svgElement.querySelector('title');\n\n    if (!title) {\n      title = document.createElement('title');\n      title.id = `${this.iconId}-title`;\n      this.svgElement.appendChild(title);\n    }\n\n    title.innerHTML = a11yTitle;\n    this.svgHtml = this.svgElement.outerHTML;\n  }\n\n  private svgElement: SVGElement | null;\n  private iconId: string;\n\n  async componentWillLoad() {\n    this.iconId = `stzh-icon-${iconCounter++}`;\n    this.nameWatcher(this.name);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"stzh-icon\" style={{ display: this.iconDisplay }} innerHTML={this.svgHtml}></div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-badge.stzh-button.stzh-icon.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-badge/stzh-badge.scss?tag=stzh-badge&encapsulation=scoped","src/components/stzh-badge/stzh-badge.tsx","src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","src/components/stzh-button/stzh-button.tsx","src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=shadow","src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":[":host {\n  --color: #{$colorWhite};\n  --background-color: #{$colorGrey90};\n  display: inline-flex;\n\n  &[type=\"success\"] {\n    --background-color: #{$colorSuccess70};\n  }\n\n  &[type=\"warning\"] {\n    --color: #{$colorBlack};\n    --background-color: #{$colorWarning60};\n  }\n\n  &[type=\"error\"] {\n    --background-color: #{$colorError60};\n  }\n\n  &[type=\"info\"] {\n    --background-color: #{$colorPrimary70};\n  }\n\n  &[filled][type=\"error\"] {\n    --background-color: #{$colorError70};\n  }\n}\n\n.stzh-badge {\n  @include badge;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { StzhBadgeType } from \"../../index\";\n\n/**\n * @slot - Slot badge content\n */\n@Component({\n  tag: \"stzh-badge\",\n  styleUrl: \"stzh-badge.scss\",\n  scoped: true\n})\nexport class StzhBadge {\n  /** Text content of the badge */\n  @Prop() label: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhBadgeType = \"default\";\n\n  render() {\n    const classes = {\n      \"stzh-badge\": true,\n      [`stzh-badge--type-${this.type}`]: !!this.type\n    };\n\n    return (\n      <Host filled={!!this.label}>\n        <div class={classes}>\n          {this.label}\n        </div>\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --height: Height of button\n * @prop --padding-top: Padding top of button\n * @prop --padding-bottom: Padding bottom of button\n * @prop --padding-left: Padding left of button\n * @prop --padding-right: Padding right of button\n * @prop --border-radius: Border radius of button\n * @prop --color: Color of button\n * @prop --background-color: Background color of button\n * @prop --border-color: Border color of button\n * @prop --icon-size: Size of icon next to button\n * @prop --hover-color: Hover color of button\n * @prop --hover-background-color: Hover background color of button\n * @prop --hover-border-color: Hover border color of button\n * @prop --white-space: White space behaviour of button\n *\n * @prop --stzh-form-input-height: **Global**: Height of fields & buttons\n * @prop --stzh-form-input-small-height: **Global**: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: **Global**: Height of fields & buttons when tiny variant is used\n */\n\n@mixin button--size-default() {\n  --height: #{$formInputHeight};\n  --padding-top: calc(#{space('xsmall')} - var(--border-width));\n  --padding-bottom: calc(#{space('xsmall')} - var(--border-width));\n  --padding-left: #{space('xlarge')};\n  --padding-right: #{space('xlarge')};\n  --font-size: var(--stzh-font-centi-font-size);\n  --line-height: var(--stzh-font-centi-text-line-height);\n  --letter-spacing: normal;\n  --icon-size: #{iconSize('medium')};\n  --icon-toggle-size: 14.5px;\n\n  &:where([icon-only]:not([icon-only=\"false\"])) {\n    --icon-size: #{iconSize('large')};\n  }\n}\n\n@mixin button--size-small() {\n  --height: #{$formInputHeightSmall};\n  --padding-left: #{space('large')};\n  --padding-right: #{space('large')};\n  --font-size: var(--stzh-font-milli-font-size);\n  --line-height: var(--stzh-font-milli-text-line-height);\n  --icon-size: #{iconSize('medium')};\n}\n\n@mixin button--size-tiny() {\n  --height: #{$formInputHeightTiny};\n  --padding-left: #{space('medium')};\n  --padding-right: #{space('medium')};\n  --padding-top: calc(#{space('xxsmall')} - var(--border-width));\n  --padding-bottom: calc(#{space('xxsmall')} - var(--border-width));\n  --font-size: var(--stzh-font-milli-font-size);\n  --line-height: var(--stzh-font-milli-text-line-height);\n  --icon-size: #{iconSize('medium')};\n}\n\n:host {\n  @include button--size-default;\n  --color: var(--stzh-button-color, #{$colorWhite});\n  --background-color: var(--stzh-button-background-color, #{$colorPrimary70});\n  --border-width: 0px;\n  --border-color: transparent;\n  --border-radius: 0px;\n  --icon-text-margin: #{space('xsmall')};\n  --icon-toggle-color: currentColor;\n  --badge-icon-text-margin: calc(var(--icon-text-margin) + #{space('xxsmall')});\n  --white-space: var(--stzh-button-white-space, normal);\n  --box-shadow: none;\n  --cursor: pointer;\n\n  --hover-color: var(--stzh-button-hover-color, #{$colorWhite});\n  --hover-background-color: var(--stzh-button-hover-background-color, #{$colorSecondary60});\n  --hover-border-color: transparent;\n\n  display: inline-grid;\n  width: auto;\n  min-width: var(--height);\n  min-height: var(--height);\n  pointer-events: var(--stzh-button-pointer-events, auto);\n\n  @media print {\n    -webkit-print-color-adjust: exact;\n    print-color-adjust: exact;\n  }\n\n  &[icon-only]:not([icon-only=\"false\"]) {\n    --padding-top: 0;\n    --padding-bottom: 0;\n    --padding-left: 0;\n    --padding-right: 0;\n\n    width: var(--height);\n    height: var(--height);\n  }\n\n  &[fullwidth]:not([fullwidth=\"false\"]) {\n    width: 100%;\n    display: grid;\n  }\n\n  &[rounded]:not([rounded=\"false\"]) {\n    --border-radius: var(--height);\n  }\n\n  &[no-padding-left]:not([no-padding-left=\"false\"]) {\n    --padding-left: 0px;\n  }\n\n  &[no-padding-right]:not([no-padding-right=\"false\"]) {\n    --padding-right: 0px;\n  }\n\n  &[variant=\"secondary\"] {\n    --color: var(--stzh-button-secondary-color, #{$colorPrimary70});\n    --background-color: var(--stzh-button-secondary-background-color, #{$colorSecondary30});\n\n    --hover-color: var(--stzh-button-secondary-hover-color, #{$colorPrimary80});\n    --hover-background-color: var(--stzh-button-secondary-hover-background-color, #{$colorSecondary40});\n  }\n\n  &[variant=\"tertiary\"] {\n    --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n    --background-color: var(--stzh-button-tertiary-background-color, transparent);\n\n    --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n    --hover-background-color: var(--stzh-button-tertiary-hover-background-color, #{$colorSecondary20});\n  }\n\n  &[variant=\"tertiary-plain\"] {\n    --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n    --background-color: transparent;\n\n    --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n    --hover-background-color: var(--background-color);\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: var(--stzh-button-active-color, #{$colorWhite});\n    --background-color: var(--stzh-button-active-background-color, #{$colorSecondary60});\n\n    --hover-color: var(--stzh-button-active-hover-color, #{$colorWhite});\n    --hover-background-color: var(--stzh-button-active-hover-background-color, #{$colorSecondary60});\n  }\n\n  &[disabled]:not([disabled=\"false\"]),\n  &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n    --color: var(--stzh-button-disabled-color, #{$colorWhite});\n    --background-color: var(--stzh-button-disabled-background-color, #{$colorGrey70});\n\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"secondary\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"secondary\"] {\n    --color: var(--stzh-button-secondary-disabled-color, #{$colorGrey80});\n    --background-color: var(--stzh-button-secondary-disabled-background-color, #{$colorGrey20});\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"input\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"input\"] {\n    --color: var(--stzh-button-input-disabled-color, #{$colorGrey80});\n    --background-color: var(--stzh-button-input-disabled-background-color, #{$colorGrey20});\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"tertiary\"],\n  &[disabled]:not([disabled=\"false\"])[variant=\"tertiary-plain\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary-plain\"] {\n    --color: var(--stzh-button-tertiary-disabled-color, #{$colorGrey70});\n    --background-color: var(--stzh-button-tertiary-disabled-background-color, transparent);\n  }\n}\n\n:host(:where([size=\"small\"])) {\n  @include button--size-small;\n}\n\n:host(:where([size=\"tiny\"])) {\n  @include button--size-tiny;\n}\n\n@each $breakpoint, $size in $breakpoints {\n  @include mq($from: $breakpoint) {\n    :host(:where([size-#{$breakpoint}=\"default\"])) {\n      @include button--size-default;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"small\"])) {\n      @include button--size-small;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"tiny\"])) {\n      @include button--size-tiny;\n    }\n  }\n}\n\n@keyframes stzh-button-effect-cta {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n.stzh-button {\n  @include font('heavy');\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  letter-spacing: var(--letter-spacing);\n  position: relative;\n  z-index: 0;\n  overflow: visible;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  color: var(--color);\n  padding-top: var(--padding-top);\n  padding-bottom: var(--padding-bottom);\n  padding-left: var(--padding-left);\n  padding-right: var(--padding-right);\n  background-color: var(--background-color);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  border-style: solid;\n  border-width: var(--border-width);\n  border-color: var(--border-color);\n  cursor: var(--cursor);\n  text-decoration-line: none;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--border-radius);\n  text-align: left;\n  box-shadow: var(--box-shadow);\n\n  &:hover {\n    border-color: var(--hover-border-color);\n    background-color: var(--hover-background-color);\n    color: var(--hover-color);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-grow: 1;\n  }\n\n  &__icon-wrapper,\n  &__toggle-icon-wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n    width: auto;\n    height: 1em;\n  }\n\n  &__toggle-icon-wrapper {\n    width: var(--icon-size);\n    height: var(--icon-size);\n  }\n\n  &__toggle-icon {\n    position: relative;\n    display: block;\n    width: var(--icon-toggle-size);\n    height: var(--icon-toggle-size);\n\n    &::before,\n    &::after {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      content: '';\n      display: block;\n      width: var(--icon-toggle-size);\n      height: 2px;\n      transition-property: transform, background-color;\n      transition-duration: 500ms;\n      transform-origin: top left;\n      background-color: var(--icon-toggle-color);\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    }\n\n    &::before {\n      transform: rotate(180deg) translate(-50%, -50%);\n    }\n\n    &::after {\n      transform: rotate(90deg) translate(-50%, -50%);\n    }\n  }\n\n  &__text {\n    @include wordWrap;\n    white-space: var(--white-space);\n    text-align: center;\n  }\n\n  &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: var(--icon-text-margin);\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    right: 0;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n  }\n\n  &__mark {\n    @include radio__mark();\n    width: 20px;\n    height: 20px;\n    margin-right: space('xsmall');\n    border-color: currentColor;\n  }\n\n  &__check {\n    @include radio__check();\n  }\n\n  /* Hover / Focus / Checked / Disabled of Radio Type */\n\n  &__input:checked:hover ~ &__inner &__mark &__check,\n  &__input:checked:focus ~ &__inner &__mark &__check {\n    color: $colorSecondary60;\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__inner &__mark,\n  &__input:checked:hover ~ &__inner &__mark,\n  &__input:checked:focus ~ &__inner &__mark {\n    border-color: $colorSecondary60;\n  }\n\n  &__input:focus ~ &__inner &__mark,\n  &__input:checked ~ &__inner &__mark {\n    border-color: $colorPrimary;\n  }\n\n  &__input:checked ~ &__inner &__mark &__check {\n    opacity: 1;\n  }\n\n  &--is-disabled &__input ~ &__inner &__mark &__check {\n    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__inner &__mark {\n    border-color: $formDisabledBorderColor;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n\n  /* Is expanded */\n\n  &--is-expanded &__toggle-icon {\n    &::before,\n    &::after {\n      transform: rotate(0) translate(-50%, -50%);\n    }\n  }\n\n  /* Badge positioning variants */\n\n  &--badge-position-button &__icon-wrapper {\n    position: static;\n  }\n\n  &__badge,\n  &--badge-position-button &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('xsmall')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n    position: relative;\n  }\n\n  &--badge-position-icon#{&}--has-icon &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('small')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: var(--badge-icon-text-margin);\n  }\n\n  /* Variant if button only has icon */\n\n  &--has-icon-only &__text {\n    @include visuallyhidden;\n  }\n\n  /* Effect */\n\n  &--effect-cta:hover &__icon-wrapper {\n\t\tanimation: stzh-button-effect-cta 1s;\n  }\n\n  /* Alignment variants */\n\n  &--align-left &__inner {\n    justify-content: flex-start;\n  }\n\n  &--align-right &__inner {\n    justify-content: flex-end;\n  }\n\n  &--align-center &__inner {\n    justify-content: center;\n  }\n\n  &--align-space-between &__inner {\n    justify-content: space-between;\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n\n  /* Default */\n\n  &--default.has-focus {\n    outline: var(--stzh-flyingfocus-color) solid 3px;\n  }\n}\n","import {\n  Component,\n  Host,\n  Fragment,\n  Element,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen\n} from \"@stencil/core\";\n\nimport {\n  StzhButtonFocusEvent,\n  StzhButtonBlurEvent,\n  StzhButtonChangeEvent,\n  StzhButtonSize,\n  StzhButtonVariant,\n  StzhBadgeType,\n  StzhButtonClickEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot - Slot for label/text content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: \"stzh-button\",\n  styleUrl: \"stzh-button.scss\",\n  scoped: true\n})\nexport class StzhButton {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Display a badge aligned to button or icons */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Badge position */\n  @Prop({ reflect: true }) badgePosition: \"icon\" | \"button\" = \"button\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Whether the button is full width */\n  @Prop({ reflect: true }) fullwidth: boolean = false;\n\n  /** Whether the button is rounded */\n  @Prop({ reflect: true }) rounded: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: StzhButtonSize = \"default\";\n\n  /** Size variant (above small breakpoint) */\n  @Prop({ reflect: true }) sizeSmall: StzhButtonSize;\n\n  /** Size variant (above medium breakpoint) */\n  @Prop({ reflect: true }) sizeMedium: StzhButtonSize;\n\n  /** Size variant (above large breakpoint) */\n  @Prop({ reflect: true }) sizeLarge: StzhButtonSize;\n\n  /** Size variant (above ultra breakpoint) */\n  @Prop({ reflect: true }) sizeUltra: StzhButtonSize;\n\n  /** Text alignment */\n  @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n  /** Variant style */\n  @Prop({ reflect: true }) variant: StzhButtonVariant = \"default\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Icon Position */\n  @Prop({ reflect: true }) iconPosition: \"left\" | \"right\" = \"left\";\n\n  /** Checked status (if type is radio) */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset, if type is radio) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** The name of the input element (if type is button or radio) */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** The value of the input element (if type is button or radio) */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** `href` if the button should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** Type of the button */\n  @Prop() type: \"button\" | \"submit\" | \"reset\" | \"radio\" = \"button\";\n\n  /** Whether the button is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether the button is active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Effect/Animation used */\n  @Prop() effect: \"default\" | \"cta\" = \"default\";\n\n  /** Whether only an icon is used inside the button */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /** Whether padding left should be removed */\n  @Prop({ reflect: true }) noPaddingLeft: boolean = false;\n\n  /** Whether padding right should be removed */\n  @Prop({ reflect: true }) noPaddingRight: boolean = false;\n\n  /** Access key of button (usually a number e.g. 1) */\n  @Prop() buttonAccesskey: string;\n\n  /** ID of button element */\n  @Prop() buttonId: string;\n\n  /** Whether to show toggle icon (show minus when a11yExpanded=true, otherwise plus) */\n  @Prop({ reflect: true }) showToggleIcon: boolean = false;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria disabled of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Aria current of link/button */\n  @Prop({ attribute: \"a11y-current\" }) a11yCurrent: string;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhButtonElement;\n\n  @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  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n  /** Blur event */\n  @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n  /** Change event (only called if type is radio) */\n  @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhButtonClickEvent>;\n\n  private button: HTMLButtonElement | HTMLAnchorElement | HTMLLabelElement;\n  private input: HTMLInputElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\n\n  private handleReset = async () => {\n    this.checked = this.defaultChecked;\n  }\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-button\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked\n    });\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.button.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-button\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-button\",\n      originalEvent: event\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.stopPropagation();\n      event.preventDefault();\n    }\n    else {\n      this.stzhClick.emit({\n        component: \"stzh-button\",\n        originalEvent: event,\n        href: this.href\n      });\n    }\n  }\n\n  private renderIcon(iconUsed: boolean): HTMLInputElement {\n    return (\n      <div class=\"stzh-button__icon-wrapper\">\n        {this.icon &&\n          <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>\n        }\n        {!this.icon && this.showToggleIcon &&\n          <div class=\"stzh-button__toggle-icon-wrapper\">\n            <div class=\"stzh-button__toggle-icon\"></div>\n          </div>\n        }\n        {!this.icon && !this.showToggleIcon &&\n          <slot name=\"icon\"></slot>\n        }\n        {(this.badge || this.badgeEmpty) && this.badgePosition === \"icon\" && iconUsed &&\n          <stzh-badge class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        }\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    return (\n      <div\n        class=\"stzh-button__text\"\n        ref={(el) => (this.text = el as HTMLDivElement)}\n      >\n        {this.rel && this.rel.includes('external') && <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n        {this.download && <div class=\"stzh-button__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n        {this.label ? this.label : <slot></slot>}\n      </div>\n    );\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        <div\n          class=\"stzh-button__inner\"\n          onClick={this.onClick}\n        >\n          {this.type === \"radio\" &&\n            <div class=\"stzh-button__mark\">\n              <div class=\"stzh-button__check\"></div>\n            </div>\n          }\n          {this.iconPosition === \"left\" && this.renderIcon(iconUsed)}\n          {this.renderContent()}\n          {this.iconPosition === \"right\" && this.renderIcon(iconUsed)}\n        </div>\n        {(this.badge || this.badgeEmpty) && (this.badgePosition === \"button\" || !iconUsed) &&\n          <stzh-badge\n            class=\"stzh-button__badge\"\n            label={this.badge}\n            type={this.badgeType}\n            onClick={this.onClick}\n          ></stzh-badge>\n        }\n      </Fragment>\n    );\n  }\n\n  async componentWillLoad() {\n    this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"button\");\n    }\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.button?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-button\": true,\n      \"stzh-button--has-icon\": iconUsed,\n      \"stzh-button--has-icon-only\": this.iconOnly,\n      \"stzh-button--has-badge\": !!this.badge,\n      \"stzh-button--is-rounded\": this.rounded,\n      \"stzh-button--is-fullwidth\": this.fullwidth,\n      \"stzh-button--is-disabled\": this.disabled || this.a11yDisabled,\n      \"stzh-button--is-active\": this.active,\n      \"stzh-button--is-expanded\": this.a11yExpanded,\n      [`stzh-button--effect-${this.effect}`]: !!this.effect,\n      [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n      [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,\n      [`stzh-button--type-${this.type}`]: !!this.type,\n      [`stzh-button--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ?\n          <a\n            ref={(el) => (this.button = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            rel={this.rel}\n            download={this.download}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n              ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n              ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls || null}\n            aria-current={this.a11yCurrent || null}\n            id={this.buttonId}\n            accessKey={this.buttonAccesskey}\n            tabindex={this.a11yTabindex}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n          :\n          this.type === \"radio\" ?\n            <label\n              ref={(el) => (this.button = el as HTMLLabelElement)}\n              class={classes}\n              onClick={this.onClick}\n              >\n              <input\n                ref={(el) => (this.input = el as HTMLInputElement)}\n                type=\"radio\"\n                class=\"stzh-button__input\"\n                name={this.name}\n                value={this.value}\n                defaultChecked={this.defaultChecked}\n                checked={this.checked}\n                disabled={this.disabled}\n                aria-label={this.a11yLabel || null}\n                aria-describedby={this.a11yDescribedby || null}\n                aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n                  ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n                aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n                  ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n                aria-controls={this.a11yControls || null}\n                aria-current={this.a11yCurrent || null}\n                id={this.buttonId}\n                accessKey={this.buttonAccesskey}\n                tabindex={this.a11yTabindex}\n                onFocus={this.onFocus}\n                onBlur={this.onBlur}\n                onClick={this.onClick}\n                onInput={this.onInput}\n              />\n              {this.renderInner(iconUsed)}\n            </label>\n            :\n            <button\n              ref={(el) => (this.button = el as HTMLButtonElement)}\n              class={classes}\n              type={this.type}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n                ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n              aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n                ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n              aria-controls={this.a11yControls || null}\n              aria-current={this.a11yCurrent || null}\n              id={this.buttonId}\n              accessKey={this.buttonAccesskey}\n              tabindex={this.a11yTabindex}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n              onClick={this.onClick}\n            >\n              {this.renderInner(iconUsed)}\n            </button>\n        }\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --size: Icon size\n * @prop --color: Icon color\n *\n * @prop --stzh-icon-size: **Global**: Default icon size. [See available icon sizes here](/docs/tokens-icons--docs#sizes).\n * @prop --stzh-icon-color: **Global**: Icon color\n * @prop --stzh-icon-vertical-align: **Global**: Icon vertical alignment\n */\n\n:host {\n  --size: #{iconSize()};\n  --color: #{$iconColor};\n  --vertical-align: #{$iconVerticalAlign};\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  color: var(--color);\n  vertical-align: var(--vertical-align);\n  width: var(--size);\n  height: var(--size);\n}\n\n.stzh-icon {\n  display: none;\n\n  &__svg {\n    width: var(--size);\n    height: var(--size);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Watch,\n  State,\n  Element\n} from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n@Component({\n  tag: \"stzh-icon\",\n  styleUrl: \"stzh-icon.scss\",\n  shadow: true\n})\nexport class StzhIcon {\n  /**\n   * Icon which should be displayed\n   * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n   */\n  @Prop() name: string = \"\";\n\n  /**\n   * Hidden icon title for screenreader\n   * (usually not needed when e.g. inside links or buttons that have text)\n  */\n  @Prop({ attribute: 'a11y-title' }) a11yTitle: string = \"\";\n\n  @Element() element: HTMLStzhIconElement;\n\n  @State() svgHtml: string = \"\";\n  @State() iconDisplay: string = \"none\";\n\n  @Watch(\"name\")\n  async nameWatcher(name: string) {\n    this.iconDisplay = \"none\";\n\n    if (name) {\n      const response = await fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`);\n\n      if (response.status === 200) {\n        const svgString = await response.text();\n\n        const parser = new DOMParser();\n        const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');\n\n        this.svgElement = svgDoc.documentElement as unknown as SVGElement;\n        this.svgElement.classList.add('stzh-icon__svg');\n\n        // for some obscure reason we need to delay showing the icon in safari,\n        // otherwise the icon doesn't show up randomly\n        // TODO: sometimes the icon still randomely disappears when clicked on page (check on newer safari if problems still occur)\n        window.setTimeout(() => {\n          this.iconDisplay = \"contents\";\n        }, 0);\n\n        this.a11yTitleWatcher(this.a11yTitle);\n      } else {\n        this.svgElement = null;\n        this.svgHtml = '';\n      }\n    } else {\n      this.svgElement = null;\n      this.svgHtml = '';\n    }\n  }\n\n  @Watch(\"a11yTitle\")\n  a11yTitleWatcher(a11yTitle: string) {\n    this.svgElement.setAttribute(\"aria-hidden\", a11yTitle ? \"false\" : \"true\");\n    this.svgElement.setAttribute(\"focusable\", a11yTitle ? \"true\" : \"false\");\n    this.svgElement.setAttribute(\"aria-labelledby\", a11yTitle ? `${this.iconId}-title` : null);\n\n    let title = this.svgElement.querySelector('title');\n\n    if (!title) {\n      title = document.createElement('title');\n      title.id = `${this.iconId}-title`;\n      this.svgElement.appendChild(title);\n    }\n\n    title.innerHTML = a11yTitle;\n    this.svgHtml = this.svgElement.outerHTML;\n  }\n\n  private svgElement: SVGElement | null;\n  private iconId: string;\n\n  async componentWillLoad() {\n    this.iconId = `stzh-icon-${iconCounter++}`;\n    this.nameWatcher(this.name);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"stzh-icon\" style={{ display: this.iconDisplay }} innerHTML={this.svgHtml}></div>\n      </Host>\n    );\n  }\n}\n"],"version":3}