@oiz/stzh-components 3.0.0-beta5 → 3.0.0

package/dist/stzh-components/p-0bf70420.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhDatepickerCss","StzhDatepicker","this","handleReset","async","value","defaultValue","onRootFocus","input","focus","onInputChanged","parsedDate","dateAdapter","parse","formattedDate","_internalDateAdapter","format","valueWatcher","stzhChange","emit","component","valueAsDate","onCalendarChange","event","detail","popover","hide","resetListener","target","contains","element","requestAnimationFrame","createDateFormatters","localization","dateFormatLong","Intl","DateTimeFormat","$locale","day","month","year","newValue","date","calendarValue","printISODate","inputValue","updateButtonAccessibleLabel","dateAdapterWatcher","window","stzhComponents","utils","createFormatParseAdapter","$formats","$globals","internalDateAdapterWatcher","$formatsIso","$formatsLegacy","setDate","getPopover","buttonLabel","label","selectedDateMessage","err","connectedCallback","componentWillLoad","fetchTranslations","internalDateAdapter","render","actionUsed","hasSlot","classes","inline","h","Host","tabindex","disabled","onFocus","class","type","name","Fragment","isDateDisabled","calendarIsDateDisabled","min","calendarMin","max","calendarMax","onStzhChange","labelHidden","ref","el","noAutocomplete","onStzhChanged","readonly","description","descriptionLong","error","invalid","required","hideOptional","size","slot","placement","icon","a11yLabel","stzhRadioCss","radioCounter","StzhRadio","focusedByInput","checked","defaultChecked","onInput","originalEvent","focusEvent","FocusEvent","view","bubbles","cancelable","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","errorWatcher","_error","JSON","e","inputId","descriptionUsed","descriptionLongUsed","errorUsed","_a","length","id","a11yDescribedby","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","StzhInputDescription","classPrefix","descriptionLongTitle","moreInfoButtonLabel","stzhRadiogroupCss","SELECTOR_RADIO","radiogroupCounter","StzhRadiogroup","_preventUpdateProperties","init","radios","Array","from","querySelectorAll","updateRadiosProperty","radiogroupId","watchValue","watchName","watchDisabled","watchInvalid","watchRequired","updateCheckedRadioByValue","preventUpdatePropertiesWatcher","onChange","prop","forEach","radio","indexOf","camelCase","checkedRadio","find","uncheckRadios","componentDidLoad","preventUpdateProperties","componentShouldUpdate","_newValue","_oldValue","componentDidRender","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","hideLegend","direction","legend"],"sources":["src/components/stzh-datepicker/stzh-datepicker.scss?tag=stzh-datepicker&encapsulation=scoped","src/components/stzh-datepicker/stzh-datepicker.tsx","src/components/stzh-radio/stzh-radio.scss?tag=stzh-radio&encapsulation=scoped","src/components/stzh-radio/stzh-radio.tsx","src/components/stzh-radiogroup/stzh-radiogroup.scss?tag=stzh-radiogroup&encapsulation=scoped","src/components/stzh-radiogroup/stzh-radiogroup.tsx"],"sourcesContent":[":host {\n  --calendar-width: #{$calendarWidth};\n\n  width: 100%;\n\n  &[inline]:not([inline=\"false\"]) {\n    width: var(--calendar-width);\n  }\n}\n\n.stzh-datepicker {\n  &__popover {\n    --width: auto;\n  }\n\n  &__calendar {\n    margin-left: auto;\n    margin-right: auto;\n\n    &.is-inline {\n      width: 100%;\n      margin-left: 0px;\n      margin-right: 0px;\n    }\n  }\n\n  &__actions {\n    display: flex;\n    width: var(--calendar-width);\n    margin-left: auto;\n    margin-right: auto;\n\n    &.is-inline {\n      width: 100%;\n      margin-left: 0px;\n      margin-right: 0px;\n    }\n\n    &:not(:empty) {\n      padding-left: space('small');\n      padding-right: space('small');\n    }\n  }\n\n  /* Has action */\n\n  &--has-action &__popover {\n    --content-padding: 0 0 #{space('small')} 0;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Method,\n  Watch,\n  Fragment,\n  State,\n  Listen\n} from \"@stencil/core\";\n\nimport {\n  StzhCalendarChangeEvent,\n  StzhDatepickerChangeEvent\n} from \"../../index\";\n\nimport { StzhCalendarDateDisabledPredicate } from \"../../index\";\n\nimport { printISODate } from \"../../utils/date-utils\"\nimport { StzhLocaleAdapter } from \"../../utils/date-adapter\"\n\nimport { StzhDatepickerLocalizedText } from \"./stzh-datepicker.localization\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot action - Slot for action below calendar (stzh-link element)\n */\n@Component({\n  tag: \"stzh-datepicker\",\n  styleUrl: \"stzh-datepicker.scss\",\n  scoped: true\n})\nexport class StzhDatepicker {\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @Prop() calendarMin: string = \"\"\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @Prop() calendarMax: string = \"\"\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   */\n  @Prop() calendarIsDateDisabled: StzhCalendarDateDisabledPredicate = () => false\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of hidden date picker input (current selected date in ISO format). */\n  @Prop({ mutable: true }) value: string = \"\";\n  @State() calendarValue: string = \"\";\n  @State() inputValue: string = \"\";\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string = \"\";\n\n  /** Label for input field and popover */\n  @Prop() label: string = \"\";\n\n  /** Whether label is visually hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form ot hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Show calendar inline */\n  @Prop({ reflect: true }) inline: boolean = false;\n\n  /**\n   * Date adapter visible date shown to the user, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  /**\n   * Date adapter for internal date passed to backend, for custom parsing/formatting.\n   * Can be `\"iso\"` (default, date in ISO format) / `\"legacy\"` (date in `d.m.Y` format)\n   * or `StzhLocaleAdapter` (must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.)\n   */\n  @Prop() internalDateAdapter: \"iso\" | \"legacy\" | StzhLocaleAdapter = \"iso\";\n  private _internalDateAdapter: StzhLocaleAdapter;\n\n  /**  Translation strings. */\n  @Prop() localization: StzhDatepickerLocalizedText;\n\n  @State() buttonLabel: string;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"localization\")\n  createDateFormatters() {\n    if (this.localization) {\n      this.dateFormatLong = new Intl.DateTimeFormat(this.localization.$locale, {\n        day: \"numeric\",\n        month: \"long\",\n        year: \"numeric\",\n      })\n    }\n  }\n\n  /** Update calendar and input when value prop has changed */\n  @Watch(\"value\")\n  valueWatcher(newValue: string) {\n    if (!this._internalDateAdapter) {\n      return;\n    }\n\n    const date = this._internalDateAdapter.parse(newValue, \"dateInput\");\n\n    this.calendarValue = printISODate(date);\n    this.inputValue = this.dateAdapter.format(date, \"dateInput\");\n\n    this.updateButtonAccessibleLabel();\n  }\n\n  @Watch(\"dateAdapter\")\n  dateAdapterWatcher(newValue: StzhLocaleAdapter) {\n    if (!newValue) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals\n      );\n    }\n  }\n\n  @Watch(\"internalDateAdapter\")\n  internalDateAdapterWatcher(newValue: \"iso\" | \"legacy\" | StzhLocaleAdapter) {\n    if (newValue === \"iso\" || !newValue) {\n      this._internalDateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formatsIso,\n        this.localization.$globals\n      );\n    } else if (newValue === \"legacy\") {\n      this._internalDateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formatsLegacy,\n        this.localization.$globals\n      );\n    } else {\n      this._internalDateAdapter = newValue;\n    }\n  }\n\n  /** Set value by a JS Date object */\n  @Method()\n  async setDate(date: Date) {\n    this.value = this._internalDateAdapter.format(date, \"dateInput\");\n  }\n\n  /** Return internal popover element */\n  @Method()\n  async getPopover(): Promise<HTMLStzhPopoverElement> {\n    return this.popover;\n  }\n\n  /** Datepicker change event */\n  @Event() stzhChange: EventEmitter<StzhDatepickerChangeEvent>;\n\n  @Element() element: HTMLStzhDatepickerElement;\n\n  /**\n   * To format dates exclusively for the benefit of screen readers.\n   *\n   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n   * better performance when formatting large number of dates. See:\n   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n   */\n  private dateFormatLong: Intl.DateTimeFormat\n\n  private input: HTMLStzhInputElement;\n  private popover: HTMLStzhPopoverElement;\n  // private calendar: HTMLStzhCalendarElement;\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n  }\n\n  private onRootFocus = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  }\n\n  private onInputChanged = () => {\n    const parsedDate = this.dateAdapter.parse(this.input.value, \"dateInput\");\n\n    if (this.input.value === \"\" || parsedDate) {\n      const formattedDate = this._internalDateAdapter.format(parsedDate, \"dateInput\");\n\n      if (this.value !== formattedDate) {\n        this.value = formattedDate;\n      } else {\n        this.valueWatcher(formattedDate);\n      }\n\n      this.stzhChange.emit({\n        component: \"stzh-datepicker\",\n        value: this.value,\n        valueAsDate: parsedDate,\n      })\n    }\n  }\n\n  private onCalendarChange = (event: CustomEvent<StzhCalendarChangeEvent>) => {\n    if (event.detail.component !== \"stzh-calendar\") {\n      return;\n    }\n\n    this.value = event.detail.valueAsDate\n      && this._internalDateAdapter.format(event.detail.valueAsDate, \"dateInput\");\n\n    this.stzhChange.emit({\n      component: \"stzh-datepicker\",\n      value: this.value,\n      valueAsDate: event.detail.valueAsDate,\n    });\n\n    if (this.popover) {\n      this.popover.hide();\n    }\n  }\n\n  private updateButtonAccessibleLabel() {\n    if (!this.localization) {\n      return;\n    }\n\n    try {\n      const valueAsDate = this._internalDateAdapter.parse(this.value, \"dateInput\");\n      this.buttonLabel = `${this.label}, ${this.localization.buttonLabel}, ${this.localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)}`;\n    } catch (err) {\n      this.buttonLabel = `${this.label}, ${this.localization.buttonLabel}`;\n    }\n  }\n\n  connectedCallback() {\n    this.createDateFormatters();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datepicker\");\n    }\n\n    this.dateAdapterWatcher(this.dateAdapter);\n    this.internalDateAdapterWatcher(this.internalDateAdapter);\n    this.valueWatcher(this.value);\n    this.defaultValue = this.defaultValue || this.value;\n  }\n\n  render() {\n    const actionUsed = hasSlot(this.element, 'action');\n\n    const classes = {\n      \"stzh-datepicker\": true,\n      \"stzh-datepicker--inline\": this.inline,\n      \"stzh-datepicker--has-action\": actionUsed\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n            defaultValue={this.defaultValue}\n          />\n\n          {this.inline &&\n            <Fragment>\n              <stzh-calendar\n                // ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n                value={this.calendarValue}\n                class=\"stzh-datepicker__calendar is-inline\"\n                isDateDisabled={this.calendarIsDateDisabled}\n                min={this.calendarMin}\n                max={this.calendarMax}\n                onStzhChange={this.onCalendarChange}\n              ></stzh-calendar>\n              <div class=\"stzh-datepicker__actions\">\n                <slot name=\"action\"></slot>\n              </div>\n            </Fragment>\n          }\n\n          {!this.inline &&\n            <stzh-input\n              value={this.inputValue}\n              label={this.label}\n              labelHidden={this.labelHidden}\n              ref={(el) => (this.input = el as HTMLStzhInputElement)}\n              noAutocomplete\n              onStzhChanged={this.onInputChanged}\n              readonly={this.readonly}\n              disabled={this.disabled}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              error={this.error}\n              invalid={this.invalid}\n              required={this.required}\n              hideOptional={this.hideOptional}\n              size={this.size}\n            >\n              <stzh-popover\n                ref={(el) => (this.popover = el as HTMLStzhPopoverElement)}\n                class=\"stzh-datepicker__popover\"\n                slot=\"button-right\"\n                placement=\"bottom-end\"\n                label={this.label}\n              >\n                <stzh-button\n                  icon-only\n                  icon=\"calendar\"\n                  size={this.size}\n                  disabled={this.disabled}\n                  a11yLabel={this.buttonLabel}\n                ></stzh-button>\n                <div slot=\"content\">\n                  <stzh-calendar\n                    // ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n                    value={this.calendarValue}\n                    class=\"stzh-datepicker__calendar is-popover\"\n                    isDateDisabled={this.calendarIsDateDisabled}\n                    min={this.calendarMin}\n                    max={this.calendarMax}\n                    onStzhChange={this.onCalendarChange}\n                  >\n                  </stzh-calendar>\n                  <div class=\"stzh-datepicker__actions\">\n                    <slot name=\"action\"></slot>\n                  </div>\n                </div>\n              </stzh-popover>\n            </stzh-input>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  display: inline-block;\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-radio {\n  @include input-description;\n  display: grid;\n\n  &__field-wrapper {\n    @include fontSize('milli');\n    position: relative;\n    display: flex;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__mark {\n    @include radio__mark();\n  }\n\n  &__check {\n    @include radio__check();\n  }\n\n  &__label {\n    --stzh-base-color: initial;\n\n    display: inline-block;\n    color: $baseColor;\n    transition: color $baseTransitionAnimationSpeed;\n    margin-left: space('small');\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker {\n    @include fontSize('micro');\n    margin-left: calc(-0.25em + #{space('xsmall')});\n  }\n\n  /* Hover / Focus / Checked */\n\n  &:hover &__label,\n  &__input:checked ~ &__label {\n    color: $colorPrimary70;\n  }\n\n  &__input:checked:hover ~ &__label,\n  &__input:checked:hover ~ &__mark &__check {\n    color: $colorPrimary90;\n  }\n\n  &:hover &__mark,\n  &__input:checked ~ &__mark {\n    border-color: $colorPrimary70;\n  }\n\n  &__input:checked:hover ~ &__mark {\n    border-color: $colorPrimary90;\n  }\n\n  &__input:checked ~ &__mark &__check {\n    opacity: 1;\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label,\n  &--is-invalid &__input ~ &__mark &__check {\n    color: $colorError60;\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    border-color: $colorError60;\n  }\n\n  /* Disabled */\n\n\t&--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label {\n    color: $colorGrey60;\n  }\n\n  &--is-disabled &__input ~ &__mark &__check {\n    color: $colorGrey50;\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    border-color: $colorGrey50;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $colorGrey20;\n  }\n}\n","import {\n  Host,\n  Component,\n  Prop,\n  Event,\n  Element,\n  EventEmitter,\n  h,\n  Watch,\n  Listen\n} from \"@stencil/core\";\n\nimport {\n  StzhRadioChangeEvent,\n  StzhRadioFocusEvent,\n  StzhRadioBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet radioCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-radio\",\n  styleUrl: \"stzh-radio.scss\",\n  scoped: true\n})\nexport class StzhRadio {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** The name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** The value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form ot hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id for element which describes the radio 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  /** Input change event */\n  @Event() stzhChange: EventEmitter<StzhRadioChangeEvent>;\n\n  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhRadioFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhRadioBlurEvent>;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\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-radio\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked\n    });\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.input.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-radio\",\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-radio\",\n      originalEvent: event\n    });\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-radio-${radioCounter++}`;\n    this.errorWatcher(this.error);\n\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, 'radio');\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || this._error?.length > 0;\n\n    const classes = {\n      \"stzh-radio\": true,\n      \"stzh-radio--has-description\": descriptionUsed,\n      \"stzh-radio--has-description-long\": descriptionLongUsed,\n      \"stzh-radio--has-error\": errorUsed,\n      \"stzh-radio--is-required\": this.required,\n      \"stzh-radio--is-invalid\": this.invalid || errorUsed,\n      \"stzh-radio--is-disabled\": this.disabled\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-radio__field-wrapper\">\n            <input\n              class=\"stzh-radio__input\"\n              ref={(el) => (this.input = el as HTMLInputElement)}\n              type=\"radio\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              defaultChecked={this.defaultChecked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-radio__mark\">\n              <div class=\"stzh-radio__check\"></div>\n            </div>\n            <div class=\"stzh-radio__label\">\n              {this.label ? this.label : <slot></slot>}\n              {!this.hideOptional &&\n                <span class=\"stzh-radio__marker\">\n                  <span class=\"stzh-radio__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker\n                    }\n                  </span>\n                  <span class=\"stzh-radio__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText\n                    }\n                  </span>\n                </span>\n              }\n            </div>\n          </label>\n          <StzhInputDescription\n            classPrefix=\"stzh-radio\"\n            id={`${this.inputId}-description`}\n            error={this._error}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            descriptionLongTitle={this.descriptionLongTitle}\n            descriptionLongUsed={descriptionLongUsed}\n            moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-radiogroup {\n  @include input-description;\n  margin: 0;\n  padding: 0;\n  border: none;\n\n  &__fields {\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n    gap: space('medium');\n  }\n\n  &__legend {\n    @include font('heavy');\n    @include fontSize('micro');\n    color: $headingColor;\n    padding: 0;\n    margin-bottom: space('xsmall');\n  }\n\n  &__marker {\n    @include fontSize('nano');\n    margin-left: calc(-0.25em + #{space('xsmall')});\n  }\n\n  &--hide-legend &__legend {\n    @include visuallyhidden;\n  }\n\n  &--direction-horizontal &__fields {\n    flex-wrap: wrap;\n    flex-direction: row;\n    row-gap: space('medium');\n    column-gap: space('xxlarge');\n  }\n}\n","import {\n  Component,\n  Prop,\n  Element,\n  Watch,\n  h,\n  Listen,\n  Host\n} from \"@stencil/core\";\n\nimport { StzhRadioChangeEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nconst SELECTOR_RADIO = 'stzh-radio, stzh-button[type=radio], stzh-card';\n\nlet radiogroupCounter = 0;\n\n/**\n * @slot - Slot for `stzh-radio`, `stzh-button[type=\"radio\"]` or `stzh-card` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-radiogroup\",\n  styleUrl: \"stzh-radiogroup.scss\",\n  scoped: true\n})\nexport class StzhRadiogroup {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** The name of the input radio elements, will define the radio group. If you have more than one radio group on a page, every group needs to have its own unique name */\n  @Prop({ reflect: true }) name: string;\n\n  /** The legend */\n  @Prop() legend: string;\n\n  /** Hide legend to show only for screenreaders */\n  @Prop({ reflect: true }) hideLegend: boolean = false;\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form ot hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Select a radio by value */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string = \"\";\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Current checked radio element (readonly) */\n  @Prop() checkedRadio: HTMLStzhRadioElement | null = null;\n\n  /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker) */\n  @Prop() preventUpdateProperties: string[] | string = [];\n  private _preventUpdateProperties: string[] = [];\n\n  /** Host element */\n  @Element() element: HTMLElement;\n\n  @Watch(\"name\")\n  watchName(newValue: string) {\n    this.updateRadiosProperty(\"name\", newValue);\n  }\n\n  @Watch(\"disabled\")\n  watchDisabled(newValue: boolean) {\n    this.updateRadiosProperty(\"disabled\", newValue);\n  }\n\n  @Watch(\"invalid\")\n  watchInvalid(newValue: boolean) {\n    this.updateRadiosProperty(\"invalid\", newValue);\n  }\n\n  @Watch(\"required\")\n  watchRequired(newValue: boolean) {\n    this.updateRadiosProperty(\"required\", newValue);\n  }\n\n  @Watch(\"value\")\n  watchValue(newValue: string) {\n    this.updateCheckedRadioByValue(newValue);\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  @Watch(\"preventUpdateProperties\")\n  preventUpdatePropertiesWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._preventUpdateProperties = JSON.parse(newValue);\n    } else {\n      this._preventUpdateProperties = newValue;\n    }\n  }\n\n  @Listen(\"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\n  @Listen(\"stzhChange\")\n  onChange(event: CustomEvent<StzhRadioChangeEvent>) {\n    this.value = event.detail.value;\n  }\n\n  /** Radio elements */\n  private radios: HTMLStzhRadioElement[];\n  private radiogroupId: string;\n  private observer: MutationObserver;\n\n  private updateRadiosProperty(prop: string, value: any) {\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (prop === \"name\" || (this._preventUpdateProperties.indexOf(prop) === -1)) {\n        radio[camelCase(prop)] = value;\n      }\n    });\n  }\n\n  private updateCheckedRadioByValue(value: string) {\n    this.checkedRadio = this.radios.find(radio => radio.value === value);\n\n    if (this.checkedRadio) {\n      this.checkedRadio.checked = true;\n    }\n\n    this.uncheckRadios();\n  }\n\n  private uncheckRadios() {\n    // make sure that no other radios are checked than the current one or no one\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (!this.checkedRadio || radio !== this.checkedRadio) {\n        radio.checked = false;\n      }\n    });\n  }\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n  }\n\n  private init = () => {\n    // update radios\n    this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n    this.updateRadiosProperty(\"hide-optional\", true);\n    this.updateRadiosProperty(\"a11y-describedby\", `${this.radiogroupId}-description`);\n\n    this.watchValue(this.value);\n    this.watchName(this.name);\n    this.watchDisabled(this.disabled);\n    this.watchInvalid(this.invalid);\n    this.watchRequired(this.required);\n  }\n\n  componentDidLoad() {\n    this.defaultValue = this.defaultValue ? this.defaultValue : this.value;\n  }\n\n  async componentWillLoad() {\n    this.radiogroupId = `stzh-radiogroup-${radiogroupCounter++}`;\n    this.errorWatcher(this.error);\n    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'radiogroup');\n    }\n  }\n\n  componentShouldUpdate(_newValue, _oldValue, prop: string) {\n    return prop !== \"checkedRadio\";\n  }\n\n  componentDidRender() {\n    this.init();\n  }\n\n  connectedCallback() {\n    if (!this.value) {\n      this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n      // try to find a checkbox that might has checked set to true\n      const checkedRadio = this.radios.find(radio => radio.checked);\n\n      if (checkedRadio) {\n        this.value = checkedRadio.value;\n      }\n    }\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || this._error?.length > 0;\n\n    const classes = {\n      \"stzh-radiogroup\": true,\n      \"stzh-radiogroup--has-description\": descriptionUsed,\n      \"stzh-radiogroup--has-description-long\": descriptionLongUsed,\n      \"stzh-radiogroup--has-error\": errorUsed,\n      \"stzh-radiogroup--is-required\": this.required,\n      \"stzh-radiogroup--is-disabled\": this.disabled,\n      \"stzh-radiogroup--is-invalid\": this.invalid || errorUsed,\n      \"stzh-radiogroup--hide-legend\": this.hideLegend,\n      [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed}>\n        <fieldset class={classes}>\n          {this.legend &&\n            <legend class=\"stzh-radiogroup__legend\">\n              {this.legend}\n              {!this.hideOptional &&\n                <span class=\"stzh-radiogroup__marker\">\n                  <span class=\"stzh-radiogroup__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker\n                    }\n                  </span>\n                  <span class=\"stzh-radiogroup__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText\n                    }\n                  </span>\n                </span>\n              }\n            </legend>\n          }\n          <div class=\"stzh-radiogroup__fields\">\n            <slot></slot>\n          </div>\n          <StzhInputDescription\n            classPrefix=\"stzh-radiogroup\"\n            id={`${this.radiogroupId}-description`}\n            error={this._error}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            descriptionLongTitle={this.descriptionLongTitle}\n            descriptionLongUsed={descriptionLongUsed}\n            moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n          />\n        </fieldset>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-3c2d9cff.entry.js

@@ -1,2 +0,0 @@
-import{r as s,h as t,F as e,a,g as i}from"./p-c7bfac7a.js";import{a as r}from"./p-a771013b.js";import{r as h,h as n}from"./p-7e304ea3.js";import{m as l,a as o,r as c}from"./p-10e2901a.js";import{d}from"./p-dd385618.js";import"./p-9b063923.js";import"./p-7183ba4d.js";const m=':host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-search{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;--grid-template-areas:"filters-main filters-main filters-main filters-main"\n  "results results results results"}stzh-search[hidden]{display:none}stzh-search::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-search::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-search *,stzh-search *::before,stzh-search *::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)}stzh-search .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}stzh-search .stzh-fylingfocus-focused{outline-style:none !important}stzh-search .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}@media screen and (min-width: 900px){stzh-search{--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main"\n      "results results results results results results results results"}}@media screen and (min-width: 1260px){stzh-search{--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main"\n      ". . results results results results results results results results . ."}}stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters="false"]))){--grid-template-areas:"filters-main filters-main filters-main filters-main"\n  "filters-aside filters-aside filters-aside filters-aside"\n  "results results results results"}@media screen and (min-width: 900px){stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters="false"]))){--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main"\n      "filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside"\n      "results results results results results results results results"}}@media screen and (min-width: 1260px){stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters="false"]))){--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main"\n      "filters-aside filters-aside filters-aside filters-aside results results results results results results results results"}}@media screen and (min-width: 1260px){stzh-search:where([variant="teaser"]){--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main"\n      "results results results results results results results results results results results results"}}.stzh-search{-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas);}@media screen and (min-width: 600px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-search{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-search{grid-template-columns:repeat(12, minmax(0, 1fr))}}.stzh-search__filters-main{grid-area:filters-main}.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xlarge);background-color:var(--stzh-color-grey10)}@media screen and (min-width: 900px){.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xxxlarge)}}.stzh-search__filters-aside{grid-area:filters-aside}.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xlarge);background-color:var(--stzh-color-grey10)}@media screen and (min-width: 900px){.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside:not(:empty){background-color:transparent;padding:0}}.stzh-search__filters-aside-heading{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-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-h4-default-text-letter-spacing);padding-bottom:var(--stzh-space-xsmall);color:var(--stzh-color-primary70);display:none}@media screen and (min-width: 600px){.stzh-search__filters-aside-heading{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h4-small-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-heading{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h4-large-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-search__filters-aside-heading{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-search__filters-aside-heading{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-heading{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-heading{display:block}}@media screen and (min-width: 1260px){.stzh-search stzh-button.stzh-search__filters-aside-details-trigger{display:none}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-inner{position:-webkit-sticky;position:sticky;top:calc(var(--stzh-header-metabar-height, 0px) * var(--stzh-header-is-stuck, 0) + var(--stzh-space-medium));transition:top var(--stzh-base-transition-animation-speed);width:calc(100% + var(--stzh-grid-gutter-large) - var(--stzh-space-xxxxlarge))}}@media screen and (min-width: 1600px){.stzh-search__filters-aside-inner{width:calc(100% + var(--stzh-grid-gutter-ultra) - var(--stzh-space-xxxxlarge))}}.stzh-search__results-wrapper{grid-area:results;display:grid}.stzh-search__results-heading,.stzh-search__results-empty,.stzh-search__results,.stzh-search__action-more{transition-property:opacity;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-search__results-heading{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-search__results-item{display:contents}.stzh-search__actions-wrapper{display:flex;justify-content:center}.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xxxlarge)}}.stzh-search__empty-text{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search__empty-text{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search__empty-text{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search__empty-text{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-search__loader{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-search__loader{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__loader{margin-top:var(--stzh-space-xxxlarge)}}.stzh-search--teaser .stzh-search__actions-wrapper{justify-content:flex-start}.stzh-search--teaser .stzh-search__filters-main:not(:empty){padding:0;background-color:transparent}.stzh-search--teaser .stzh-search__filters-aside:not(:empty){padding:0;background-color:transparent}@media screen and (max-width: 1259px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (max-width: 1259px) and (min-width: 600px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-big)}}@media screen and (max-width: 1259px) and (min-width: 900px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-big)}}@media screen and (max-width: 1259px) and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-huge)}}@media screen and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (max-width: 1259px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-xlarge)}}@media screen and (max-width: 1259px) and (min-width: 900px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-xxlarge)}}@media screen and (max-width: 1259px) and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxxlarge)}}.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-xxlarge)}}.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-aside:not(:empty){padding-top:0px}.stzh-search--has-hidden-main-filters .stzh-search__filters-main{display:none}.stzh-search--has-hidden-aside-filters .stzh-search__filters-aside{display:none}.stzh-search--has-hidden-main-filters .stzh-search__results-wrapper,.stzh-search--has-hidden-main-filters.stzh-search--teaser .stzh-search__results-wrapper{margin-top:0px}.stzh-search--is-loading .stzh-search__results-heading,.stzh-search--is-loading .stzh-search__results-empty,.stzh-search--is-loading .stzh-search__results,.stzh-search--is-loading .stzh-search__action-more{opacity:0.5}';function z(s,t){return`\n    <stzh-card-${s.variant==="teaser"?"superteaser":"searchresult"}\n      href="{href}"\n      dateline="{dateline}"\n      tag="{tag}"\n      topic="{topic}"\n      service="{service}"\n      event-location="{eventLocation}"\n      download-heading="{downloadHeading}"\n      meta='{meta}'\n      breadcrumb-items='{breadcrumbItems}'\n      download-meta='{downloadMeta}'\n      datalist-items='{datalistItems}'\n      ${t.imagePosition&&'image-position="{imagePosition}"'}\n      ${t.download&&'download="{download}"'}\n      style="\n        ${t.serviceBackgroundColor?"--service-background-color: {serviceBackgroundColor};":""}\n        ${t.serviceColor?"--service-color: {serviceColor};":""}\n      "\n    >\n      <div slot="heading">{heading}</div>\n      <div slot="description">{description}</div>\n      ${t.image?t.imagePosition==="right"?`<img src="${t.image}" slot="image" />`:`<stzh-ratio ${s.variant==="teaser"?'ratio="2:1"':'ratio="21:9" ratio-small="1:1"'} slot="image"><img src="${t.image}" /></stzh-ratio>`:""}\n    </stzh-card-${s.variant==="teaser"?"superteaser":"searchresult"}>\n  `}function f(s){return{layout:s.variant==="teaser"?"teasers":"searchresults"}}const p=class{constructor(t){s(this,t);this._showMoreLink=false;this.fetch=async(s=false,t=false)=>{var e;if(this.currentController){this.currentController.abort()}if(!this.hasRequiredParams&&!s){this.loading=false;return}this.loading=true;this.error="";let a=this.api.replace(/\{lang\}/gi,this.localization.$locale);let i=this.limit.toString();this.params.set("offset",s?this.results.length.toString():"0");if(t){const s=new URLSearchParams(location.search).get("search");if(s){const t=new URLSearchParams(s).get("limit");if(t){i=t}}}this.params.set("limit",i);this.currentController=new AbortController;let h={};try{const s=await r(a,{params:this.params,signal:this.currentController.signal});h=s.data}catch(s){this.error=this.localization.error}this.resultsHeading=h.resultsHeading||"";this.totalCount=((e=h.meta)===null||e===void 0?void 0:e.total)||0;if(h.error){this.error=h.message||this.localization.error}if(h.results){if(s){this.results=[...this.results,...h.results.map((s=>{var t;return Object.assign(Object.assign({},s),{html:this.renderResultTemplate(s.html||((t=h.templates)===null||t===void 0?void 0:t.result),s)})}))]}else{this.results=h.results.map((s=>{var t;return Object.assign(Object.assign({},s),{html:this.renderResultTemplate(s.html||((t=h.templates)===null||t===void 0?void 0:t.result),s)})}))}}if(!t&&!this.preventUpdateUrl){const s=new URLSearchParams(location.search);const t=new URLSearchParams(this.params);t.delete("offset");t.set("limit",this.results.length.toString());s.set("search",t.toString());window.history.replaceState(null,"",`${location.pathname}?${s}`)}if(t||!this.firstFetched){this.loading=false}else{window.setTimeout((()=>{this.loading=false}),this.debounceTime)}this.firstFetched=true};this.debouncedFetch=d(this.fetch,this.debounceTime);this.handleMainFilterChange=async()=>{if(this.autofetchMainFilters){await this.updateParams();this.debouncedFetch()}};this.handleAsideFilterChange=async()=>{if(this.autofetchAsideFilters){await this.updateParams();this.debouncedFetch()}};this.handleFormSubmit=async s=>{s.preventDefault();await this.updateParams();this.fetch()};this.handleMoreClick=()=>{this.fetch(true)};this.handleMediaChange=()=>{this.isDetailsOpen=l("large").matches};this.handleFormReset=async()=>{requestAnimationFrame((()=>{requestAnimationFrame((async()=>{await this.updateParams()}))}))};this.localization=undefined;this.variant="default";this.autofetchMainFilters=false;this.autofetchAsideFilters=false;this.hideMainFilters=false;this.hideAsideFilters=false;this.api="";this.debounceTime=500;this.limit=6;this.initialFetch=false;this.preventUpdateUrl=false;this.templateResult=z;this.templateResultWrapperElement=function(){return"stzh-cardlist"};this.templateResultWrapperProps=f;this.resultHeadingLevel="3";this.emptyText=undefined;this.emptyLinkHref=undefined;this.emptyLinkLabel=undefined;this.totalCount=0;this.loading=false;this.error="";this.results=[];this.resultsHeading=undefined;this.hasRequiredParams=false;this.firstFetched=false;this.initiallyFetched=false;this.isDetailsOpen=false}totalCountWatcher(){this._showMoreLink=this.totalCount>this.results.length}preventUpdateUrlWatcher(){this.updateParams()}renderResultTemplate(s,t){let e=s||(typeof this.templateResult==="function"?this.templateResult(this.element,t):this.templateResult);["href","heading","dateline","description","image","imagePosition","tag","topic","service","serviceColor","serviceBackgroundColor","meta","breadcrumbItems","eventLocation","download","downloadHeading","downloadMeta","datalistItems"].forEach((s=>{const a=new RegExp(`{${s}}`,"gi");let i=t[s]||"";if(["meta","breadcrumbItems","downloadMeta","datalistItems"].includes(s)&&i){i=JSON.stringify(i)}e=e.replace(a,i)}));return e}async updateParams(s=false){const t=()=>{const s=new FormData(this.formElement);this.params=new URLSearchParams(s);this.params.set("variant",this.variant)};if(s){const s=new URLSearchParams(location.search);const t=s.get("search");if(t){this.initialFetch=true;const s=new URLSearchParams(t);[...new Set(s.keys())].forEach((t=>{const e=s.getAll(t);const a=Array.from(document.querySelectorAll(`:where(stzh-input,stzh-radiogroup,stzh-chipselect,stzh-amount,stzh-datepicker,stzh-monthyearpicker,stzh-timepicker,stzh-pagination,stzh-toggle)[name="${t}"]`));const i=Array.from(document.querySelectorAll(`:where(stzh-checkboxgroup)[name="${t}"]`));const r=Array.from(document.querySelectorAll(`:where(stzh-dropdown)[name="${t}"]`));a.forEach((s=>{s.value=e[0]}));i.forEach((s=>{s.value=e}));r.forEach((s=>{s.items=e}))}))}}await h();t();let e=true;const a=Array.from(this.element.querySelectorAll(":where(stzh-input)[required]"));const i=Array.from(this.element.querySelectorAll(":where(stzh-dropdown)[required]"));const r=Array.from(this.element.querySelectorAll(":where(stzh-monthyearpicker)[required]"));const n=Array.from(this.element.querySelectorAll(":where(stzh-amount,stzh-radiogroup,stzh-chipselect,stzh-datepicker,stzh-monthyearpicker,stzh-timepicker,stzh-pagination,stzh-toggle)[required]"));const l=Array.from(this.element.querySelectorAll(":where(stzh-checkbox)[required]"));l.forEach((t=>{const a=!t.checked;if(!s){t.invalid=a}if(a){e=false}}));a.forEach((t=>{const a=t.value===""||t.minlength&&t.minlength>t.value.length||t.maxlength&&t.maxlength<t.value.length;if(!s){t.invalid=a}if(a){e=false}}));i.forEach((t=>{const a=t.items.length===0;if(!s){t.invalid=a}if(a){e=false}}));n.forEach((t=>{const a=t.value.toString().length===0;if(!s){t.invalid=a}if(a){e=false}}));r.forEach((t=>{const a=t.value.toString().length===0;if(!s){t.invalidYear=a;t.invalidMonth=a}if(a){e=false}}));this.hasRequiredParams=e}async componentDidLoad(){await this.updateParams(true);if(this.initialFetch){await this.fetch(false,true);this.initiallyFetched=true}else{this.initiallyFetched=true}}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"search")}}connectedCallback(){o(this.handleMediaChange);this.handleMediaChange()}disconnectedCallback(){c(this.handleMediaChange)}render(){const s=n(this.element,"filters-main");const i=n(this.element,"filters-aside");const r=(this.hasRequiredParams||this.firstFetched)&&this.firstFetched&&this.initiallyFetched;const h={"stzh-search":true,"stzh-search--has-filters-main":s,"stzh-search--has-filters-aside":i,"stzh-search--has-hidden-main-filters":this.hideMainFilters,"stzh-search--has-hidden-aside-filters":this.hideAsideFilters,"stzh-search--has-results-shown":r,"stzh-search--has-error-shown":!!this.error,"stzh-search--is-loading":this.loading,[`stzh-search--${this.variant}`]:!!this.variant};const l=typeof this.templateResultWrapperElement==="function"?this.templateResultWrapperElement(this.element):this.templateResultWrapperElement;const o=typeof this.templateResultWrapperProps==="function"?this.templateResultWrapperProps(this.element):this.templateResultWrapperProps;return t(a,{"has-aside-filters":i},t("form",{ref:s=>this.formElement=s,novalidate:true,class:h,onSubmit:this.handleFormSubmit,onReset:this.handleFormReset},t("div",{class:"stzh-search__filters-main",onStzhChange:this.handleMainFilterChange},t("slot",{name:"filters-main"})),i&&t(e,null,t("div",{class:"stzh-search__filters-aside",onStzhChange:this.handleAsideFilterChange},t("div",{class:"stzh-search__filters-aside-inner"},t("div",{class:"stzh-search__filters-aside-heading"},this.localization.moreFilter),t("stzh-details",{open:this.isDetailsOpen,class:"stzh-search__filters-aside-details"},t("stzh-button",{class:"stzh-search__filters-aside-details-trigger",variant:"tertiary-plain",size:"small",noPaddingLeft:true,showToggleIcon:true,iconPosition:"right",label:this.localization.moreFilter}),t("div",{slot:"content"},t("slot",{name:"filters-aside"})))))),t("div",{class:"stzh-search__results-wrapper"},r&&t(e,null,this.results.length===0?t(e,null,this.variant!=="teaser"&&this.resultsHeading&&t("stzh-heading",{class:"stzh-search__results-heading",curve:"h3",level:this.resultHeadingLevel,innerHTML:this.resultsHeading}),this.emptyText&&t("stzh-text",{class:"stzh-search__empty-text",innerHTML:this.emptyText}),this.emptyLinkLabel&&this.emptyLinkHref&&t("div",{class:"stzh-search__empty-link-wrapper"},t("stzh-link",{href:this.emptyLinkHref,label:this.emptyLinkLabel}))):t(e,null,this.variant!=="teaser"&&this.resultsHeading&&t("stzh-heading",{class:"stzh-search__results-heading",curve:"h3",level:this.resultHeadingLevel,innerHTML:this.resultsHeading}),t(l,Object.assign({class:"stzh-search__results"},o),this.results.map((s=>t("div",{class:"stzh-search__results-item",innerHTML:s.html||""})))),t("div",{class:"stzh-search__actions-wrapper"},this._showMoreLink&&t("stzh-button",{variant:"secondary",class:"stzh-search__action-more",label:this.localization.showMore,onClick:this.handleMoreClick,a11yDisabled:this.loading})))),this.error&&t("div",{class:"stzh-search__error"},t("stzh-message",{type:"error",label:this.error})),this.loading&&t("stzh-loader",{class:"stzh-search__loader"})),t("slot",null)))}get element(){return i(this)}static get watchers(){return{totalCount:["totalCountWatcher"],results:["totalCountWatcher"],preventUpdateUrl:["preventUpdateUrlWatcher"]}}};p.style=m;export{p as stzh_search};
-//# sourceMappingURL=p-3c2d9cff.entry.js.map

package/dist/stzh-components/p-3c2d9cff.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhSearchCss","defaultTemplateResult","search","item","variant","imagePosition","download","serviceBackgroundColor","serviceColor","image","defaultResultWrapperProps","layout","StzhSearch","this","_showMoreLink","fetch","async","append","initial","currentController","abort","hasRequiredParams","loading","error","apiUrl","api","replace","localization","$locale","limit","toString","params","set","results","length","URLSearchParams","location","get","urlLimit","AbortController","data","response","axios","signal","resultsHeading","totalCount","_a","meta","total","message","map","Object","assign","html","renderResultTemplate","templates","result","preventUpdateUrl","newUrlParams","searchParams","delete","window","history","replaceState","pathname","firstFetched","setTimeout","debounceTime","debouncedFetch","debounce","handleMainFilterChange","autofetchMainFilters","updateParams","handleAsideFilterChange","autofetchAsideFilters","handleFormSubmit","event","preventDefault","handleMoreClick","handleMediaChange","isDetailsOpen","media","matches","handleFormReset","requestAnimationFrame","totalCountWatcher","preventUpdateUrlWatcher","template","templateResult","element","forEach","property","regex","RegExp","value","includes","JSON","stringify","updateByFormElements","formData","FormData","formElement","initialParams","initialFetch","currentSearchParams","Set","keys","key","values","getAll","valueInputs","Array","from","document","querySelectorAll","valueArrayInputs","itemsArrayInputs","input","items","raf","requiredInputFields","requiredDropdownFields","requiredMonthyearpickers","requiredFields","requiredCheckboxFields","field","invalid","checked","minlength","maxlength","invalidYear","invalidMonth","componentDidLoad","initiallyFetched","componentWillLoad","stzhComponents","utils","fetchTranslations","connectedCallback","addMediaChangeListener","disconnectedCallback","removeMediaChangeListener","render","filtersMainUsed","hasSlot","filtersAsideUsed","resultsShown","classes","hideMainFilters","hideAsideFilters","WrapperElement","templateResultWrapperElement","wrapperProps","templateResultWrapperProps","h","Host","ref","el","novalidate","class","onSubmit","onReset","onStzhChange","name","Fragment","moreFilter","open","size","noPaddingLeft","showToggleIcon","iconPosition","label","slot","curve","level","resultHeadingLevel","innerHTML","emptyText","emptyLinkLabel","emptyLinkHref","href","showMore","onClick","a11yDisabled","type"],"sources":["src/components/stzh-search/stzh-search.scss?tag=stzh-search","src/components/stzh-search/stzh-search.tsx"],"sourcesContent":["stzh-search {\n  @include host;\n\n  --grid-template-areas:\n  \"filters-main filters-main filters-main filters-main\"\n  \"results results results results\";\n\n  @include mq($from: medium) {\n    --grid-template-areas:\n      \"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\"\n      \"results results results results results results results results\";\n  }\n\n  @include mq($from: large) {\n    --grid-template-areas:\n      \"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\"\n      \". . results results results results results results results results . .\";\n  }\n\n  &:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters=\"false\"]))) {\n    --grid-template-areas:\n    \"filters-main filters-main filters-main filters-main\"\n    \"filters-aside filters-aside filters-aside filters-aside\"\n    \"results results results results\";\n\n    @include mq($from: medium) {\n      --grid-template-areas:\n        \"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\"\n        \"filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside\"\n        \"results results results results results results results results\";\n    }\n\n    @include mq($from: large) {\n      --grid-template-areas:\n        \"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\"\n        \"filters-aside filters-aside filters-aside filters-aside results results results results results results results results\";\n    }\n  }\n\n  &:where([variant=\"teaser\"]) {\n    @include mq($from: large) {\n      --grid-template-areas:\n        \"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\"\n        \"results results results results results results results results results results results results\";\n    }\n  }\n}\n\n.stzh-search {\n  @include grid;\n  grid-template-areas: var(--grid-template-areas);\n\n  &__filters-main {\n    grid-area: filters-main;\n\n    &:not(:empty) {\n      @include spaceCurve('padding', 'medium');\n      background-color: $colorGrey10;\n    }\n  }\n\n  &__filters-aside {\n    grid-area: filters-aside;\n\n    &:not(:empty) {\n      @include spaceCurve('padding', 'medium');\n      background-color: $colorGrey10;\n\n      @include mq($from: large) {\n        background-color: transparent;\n        padding: 0;\n      }\n    }\n  }\n\n  &__filters-aside-heading {\n    @include font('heavy');\n    @include fontCurve('h4');\n    @include spaceCurve('padding-bottom', 'tiny');\n    color: $colorPrimary70;\n    display: none;\n\n    @include mq($from: large) {\n      display: block;\n    }\n  }\n\n  stzh-button#{&}__filters-aside-details-trigger {\n    @include mq($from: large) {\n      display: none;\n    }\n  }\n\n  &__filters-aside-inner {\n    @include mq($from: large) {\n      position: sticky;\n      top: calc(var(--stzh-header-metabar-height, 0px) * var(--stzh-header-is-stuck, 0) + #{space('medium')});\n      transition: top $baseTransitionAnimationSpeed;\n      width: calc(100% + #{$gridGutterLarge} - #{spaceCurveValue('large', 'large')});\n    }\n\n    @include mq($from: ultra) {\n      width: calc(100% + #{$gridGutterUltra} - #{spaceCurveValue('large', 'large')});\n    }\n  }\n\n  &__results-wrapper {\n    grid-area: results;\n    display: grid;\n  }\n\n  &__results-heading,\n  &__results-empty,\n  &__results,\n  &__action-more {\n    transition-property: opacity;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__results-heading {\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  &__results-item {\n    display: contents;\n  }\n\n  &__actions-wrapper {\n    display: flex;\n    justify-content: center;\n\n    &:not(:empty) {\n      @include spaceCurve('margin-top', 'medium');\n    }\n  }\n\n  &__empty-text {\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  &__loader {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  /* Teaser variant */\n\n  &--teaser &__actions-wrapper {\n    justify-content: flex-start;\n  }\n\n  &--teaser &__filters-main {\n    &:not(:empty) {\n      padding: 0;\n      background-color: transparent;\n    }\n  }\n\n  &--teaser &__filters-aside {\n    &:not(:empty) {\n      padding: 0;\n      background-color: transparent;\n    }\n  }\n\n  /* Has results shown or aside filter */\n\n  &--has-results-shown &__results-wrapper {\n    @include mq($to: large) {\n      @include spaceCurve('margin-top', 'huge');\n    }\n  }\n\n  &--has-results-shown &__filters-main,\n  &--has-filters-aside &__filters-main {\n    @include mq($from: large) {\n      @include spaceCurve('margin-bottom', 'large');\n    }\n  }\n\n  &--has-results-shown#{&}--teaser &__results-wrapper {\n    @include mq($to: large) {\n      @include spaceCurve('margin-top', 'medium');\n    }\n  }\n\n  &--has-results-shown#{&}--teaser &__filters-main,\n  &--has-filters-aside#{&}--teaser &__filters-main {\n    @include mq($from: large) {\n      @include spaceCurve('margin-bottom', 'medium');\n    }\n  }\n\n  /* Has main and aside filters */\n\n  &--has-filters-main#{&}--has-filters-aside &__filters-main {\n    &:not(:empty) {\n      @include spaceCurve('padding-bottom', 'regular');\n    }\n  }\n\n  &--has-filters-main#{&}--has-filters-aside &__filters-aside {\n    &:not(:empty) {\n      padding-top: 0px;\n    }\n  }\n\n  /* Has hidden main/aside filters */\n\n  &--has-hidden-main-filters &__filters-main {\n    display: none;\n  }\n\n  &--has-hidden-aside-filters &__filters-aside {\n    display: none;\n  }\n\n  &--has-hidden-main-filters &__results-wrapper,\n  &--has-hidden-main-filters#{&}--teaser &__results-wrapper {\n    margin-top: 0px;\n  }\n\n  /* Is loading */\n\n  &--is-loading &__results-heading,\n  &--is-loading &__results-empty,\n  &--is-loading &__results,\n  &--is-loading &__action-more {\n    opacity: 0.5;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Watch,\n  Fragment\n} from \"@stencil/core\";\n\nimport { StzhSearchResult } from \"../../index\";\n\nimport axios from 'axios';\nimport { hasSlot, raf } from \"../../utils/utils\";\n\nimport { StzhSearchLocalizedText } from \"./stzh-search.localization\";\n\nimport {\n  media,\n  addMediaChangeListener,\n  removeMediaChangeListener\n} from '../../utils/media-utils';\n\nimport debounce from \"lodash/debounce\";\n\nfunction defaultTemplateResult(search: HTMLStzhSearchElement, item: StzhSearchResult): string {\n  return `\n    <stzh-card-${search.variant === \"teaser\" ? \"superteaser\" : \"searchresult\"}\n      href=\"{href}\"\n      dateline=\"{dateline}\"\n      tag=\"{tag}\"\n      topic=\"{topic}\"\n      service=\"{service}\"\n      event-location=\"{eventLocation}\"\n      download-heading=\"{downloadHeading}\"\n      meta='{meta}'\n      breadcrumb-items='{breadcrumbItems}'\n      download-meta='{downloadMeta}'\n      datalist-items='{datalistItems}'\n      ${item.imagePosition && 'image-position=\"{imagePosition}\"'}\n      ${item.download && 'download=\"{download}\"'}\n      style=\"\n        ${item.serviceBackgroundColor ? '--service-background-color: {serviceBackgroundColor};' : ''}\n        ${item.serviceColor ? '--service-color: {serviceColor};' : ''}\n      \"\n    >\n      <div slot=\"heading\">{heading}</div>\n      <div slot=\"description\">{description}</div>\n      ${item.image\n        ?\n          (\n            item.imagePosition === \"right\"\n              ?\n                `<img src=\"${item.image}\" slot=\"image\" />`\n              :\n                `<stzh-ratio ${search.variant === \"teaser\" ? 'ratio=\"2:1\"' : 'ratio=\"21:9\" ratio-small=\"1:1\"'} slot=\"image\"><img src=\"${item.image}\" /></stzh-ratio>`\n          )\n        :\n          ''\n      }\n    </stzh-card-${search.variant === \"teaser\" ? \"superteaser\" : \"searchresult\"}>\n  `;\n}\n\nfunction defaultResultWrapperProps(search: HTMLStzhSearchElement) {\n  return {\n    layout: search.variant === \"teaser\" ? \"teasers\" : \"searchresults\"\n  } as HTMLStzhCardlistElement;\n}\n\n/**\n * @slot filters-main - Slot for main filters\n * @slot filters-aside - Slot for aside filters\n */\n@Component({\n  tag: \"stzh-search\",\n  styleUrl: \"stzh-search.scss\"\n})\nexport class StzhSearch {\n  /** Translation strings */\n  @Prop() localization: StzhSearchLocalizedText;\n\n  /** Variant */\n  @Prop() variant: \"default\" | \"teaser\" = \"default\";\n\n  /** Whether search results should be automatically fetched when a main filters has changed. */\n  @Prop() autofetchMainFilters: boolean = false;\n\n  /** Whether search results should be automatically fetched when a aside filters has changed. */\n  @Prop() autofetchAsideFilters: boolean = false;\n\n  /** Whether to hide the main filters slot */\n  @Prop({ reflect: true }) hideMainFilters: boolean = false;\n\n  /** Whether to hide the aside filters slot */\n  @Prop({ reflect: true }) hideAsideFilters: boolean = false;\n\n  /** API URL */\n  @Prop() api: string = \"\";\n\n  /** Debounce time in ms */\n  @Prop() debounceTime: number = 500;\n\n  /** Numbers of results shown with each load more action */\n  @Prop() limit: number = 6;\n\n  /** Whether search request should be fetched initially with set filters */\n  @Prop() initialFetch: boolean = false;\n\n  /** Whether url query should be updated when filter has changed */\n  @Prop() preventUpdateUrl: boolean = false;\n\n  /** Will be overwritten by api result (`templates.result` or `results[x].html`) */\n  @Prop() templateResult: string | ((search: HTMLStzhSearchElement, item: StzhSearchResult) => string) = defaultTemplateResult;\n\n  /** Element used for list wrapper element */\n  @Prop() templateResultWrapperElement: string | ((search: HTMLStzhSearchElement) => string) = function() {\n    return 'stzh-cardlist';\n  };\n\n  /** Properties applied to list wrapper element */\n  @Prop() templateResultWrapperProps: { [key: string]: any } | ((search: HTMLStzhSearchElement) => { [key: string]: any }) = defaultResultWrapperProps;\n\n  /** Heading level of results heading */\n  @Prop() resultHeadingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Empty text */\n  @Prop() emptyText: string;\n\n  /** Empty link href */\n  @Prop() emptyLinkHref: string;\n\n  /** Empty link label */\n  @Prop() emptyLinkLabel: string;\n\n  @Element() element: HTMLStzhSearchElement;\n\n  @Watch(\"totalCount\")\n  @Watch(\"results\")\n  totalCountWatcher() {\n    this._showMoreLink = this.totalCount > this.results.length;\n  }\n\n  @Watch(\"preventUpdateUrl\")\n  preventUpdateUrlWatcher() {\n    this.updateParams();\n  }\n\n  @State() totalCount: number = 0;\n  private _showMoreLink: boolean = false;\n\n  @State() loading: boolean = false;\n  @State() error: string = \"\";\n\n  @State() results: StzhSearchResult[] = [];\n  @State() resultsHeading: string;\n  @State() hasRequiredParams: boolean = false;\n  @State() firstFetched: boolean = false;\n  @State() initiallyFetched: boolean = false;\n  @State() isDetailsOpen: boolean = false;\n\n  private currentController: AbortController;\n  private params: URLSearchParams;\n  private formElement: HTMLFormElement;\n\n  private renderResultTemplate(html: string, item: StzhSearchResult) {\n    let template = html\n      || (typeof this.templateResult === \"function\"\n        ? this.templateResult(this.element, item)\n        : this.templateResult);\n\n    [\n      \"href\",\n      \"heading\",\n      \"dateline\",\n      \"description\",\n      \"image\",\n      \"imagePosition\",\n      \"tag\",\n      \"topic\",\n      \"service\",\n      \"serviceColor\",\n      \"serviceBackgroundColor\",\n      \"meta\",\n      \"breadcrumbItems\",\n      \"eventLocation\",\n      \"download\",\n      \"downloadHeading\",\n      \"downloadMeta\",\n      \"datalistItems\",\n    ].forEach((property) => {\n      const regex = new RegExp(`\\{${property}\\}`, \"gi\");\n      let value = item[property] || \"\";\n\n      if ([\"meta\", \"breadcrumbItems\", \"downloadMeta\", \"datalistItems\"].includes(property) && value) {\n        value = JSON.stringify(value);\n      }\n\n      template = template.replace(regex, value)\n    });\n\n    return template;\n  }\n\n  private async updateParams(initial: boolean = false) {\n    const updateByFormElements = () => {\n      const formData = new FormData(this.formElement);\n      // @ts-ignore\n      this.params = new URLSearchParams(formData);\n      this.params.set('variant', this.variant);\n    }\n\n    if (initial) {\n      const initialParams = new URLSearchParams(location.search);\n      const search = initialParams.get(\"search\");\n\n      if (search) {\n        this.initialFetch = true;\n        const currentSearchParams = new URLSearchParams(search);\n\n        [...new Set(currentSearchParams.keys())].forEach((key) => {\n          const values = currentSearchParams.getAll(key);\n\n          // value as string/number: input, ... / pagination\n          const valueInputs = Array.from(document.querySelectorAll(`:where(stzh-input,stzh-radiogroup,stzh-chipselect,stzh-amount,stzh-datepicker,stzh-monthyearpicker,stzh-timepicker,stzh-pagination,stzh-toggle)[name=\"${key}\"]`)) as\n            | HTMLStzhInputElement[]\n            | HTMLStzhRadiogroupElement[]\n            | HTMLStzhChipselectElement[]\n            | HTMLStzhAmountElement[]\n            | HTMLStzhDatepickerElement[]\n            | HTMLStzhMonthyearpickerElement[]\n            | HTMLStzhTimepickerElement[]\n            | HTMLStzhPaginationElement[]\n            | HTMLStzhToggleElement[]\n\n          // value as array: checkboxgroup\n          const valueArrayInputs = Array.from(document.querySelectorAll(`:where(stzh-checkboxgroup)[name=\"${key}\"]`)) as\n            | HTMLStzhCheckboxgroupElement[]\n\n          // items as array: dropdown\n          const itemsArrayInputs = Array.from(document.querySelectorAll(`:where(stzh-dropdown)[name=\"${key}\"]`)) as\n            | HTMLStzhDropdownElement[]\n\n          valueInputs.forEach((input: HTMLStzhInputElement | HTMLStzhRadiogroupElement | HTMLStzhChipselectElement | HTMLStzhAmountElement | HTMLStzhDatepickerElement | HTMLStzhMonthyearpickerElement | HTMLStzhTimepickerElement | HTMLStzhPaginationElement | HTMLStzhToggleElement) => {\n            input.value = values[0];\n          });\n\n          valueArrayInputs.forEach((input: HTMLStzhCheckboxgroupElement) => {\n            input.value = values;\n          });\n\n          itemsArrayInputs.forEach((input: HTMLStzhDropdownElement) => {\n            input.items = values;\n          });\n        });\n      }\n\n    }\n\n    await raf();\n    updateByFormElements();\n\n    // console.log(this.params.toString());\n\n    let hasRequiredParams = true;\n\n    const requiredInputFields = Array.from(this.element.querySelectorAll(\":where(stzh-input)[required]\")) as\n      | HTMLStzhInputElement[];\n\n    const requiredDropdownFields = Array.from(this.element.querySelectorAll(\":where(stzh-dropdown)[required]\")) as\n      | HTMLStzhDropdownElement[];\n\n    const requiredMonthyearpickers = Array.from(this.element.querySelectorAll(\":where(stzh-monthyearpicker)[required]\")) as\n      | HTMLStzhMonthyearpickerElement[]\n\n    const requiredFields = Array.from(this.element.querySelectorAll(\":where(stzh-amount,stzh-radiogroup,stzh-chipselect,stzh-datepicker,stzh-monthyearpicker,stzh-timepicker,stzh-pagination,stzh-toggle)[required]\")) as\n      | HTMLStzhAmountElement[]\n      | HTMLStzhRadiogroupElement[]\n      | HTMLStzhChipselectElement[]\n      | HTMLStzhDatepickerElement[]\n      | HTMLStzhTimepickerElement[]\n      | HTMLStzhPaginationElement[]\n      | HTMLStzhToggleElement[];\n\n    const requiredCheckboxFields = Array.from(this.element.querySelectorAll(\":where(stzh-checkbox)[required]\")) as\n      | HTMLStzhCheckboxElement[];\n\n    requiredCheckboxFields.forEach((field: HTMLStzhCheckboxElement) => {\n      const invalid = !field.checked;\n\n      if (!initial) {\n        field.invalid = invalid;\n      }\n\n      if (invalid) {\n        hasRequiredParams = false;\n      }\n    });\n\n    requiredInputFields.forEach((field: HTMLStzhInputElement) => {\n      const invalid = field.value === \"\"\n        || (field.minlength && field.minlength > field.value.length)\n        || (field.maxlength && field.maxlength < field.value.length);\n\n      if (!initial) {\n        field.invalid = invalid;\n      }\n\n      if (invalid) {\n        hasRequiredParams = false;\n      }\n    });\n\n    requiredDropdownFields.forEach((field: HTMLStzhDropdownElement) => {\n      const invalid = field.items.length === 0;\n\n      if (!initial) {\n        field.invalid = invalid;\n      }\n\n      if (invalid) {\n        hasRequiredParams = false;\n      }\n    });\n\n    requiredFields.forEach((field: HTMLStzhAmountElement | HTMLStzhRadiogroupElement | HTMLStzhCheckboxElement | HTMLStzhChipselectElement | HTMLStzhDatepickerElement | HTMLStzhTimepickerElement | HTMLStzhPaginationElement | HTMLStzhToggleElement) => {\n      const invalid = field.value.toString().length === 0;\n\n      if (!initial) {\n        field.invalid = invalid;\n      }\n\n      if (invalid) {\n        hasRequiredParams = false;\n      }\n    });\n\n    requiredMonthyearpickers.forEach((field: HTMLStzhMonthyearpickerElement) => {\n      const invalid = field.value.toString().length === 0;\n\n      if (!initial) {\n        field.invalidYear = invalid;\n        field.invalidMonth = invalid;\n      }\n\n      if (invalid) {\n        hasRequiredParams = false;\n      }\n    });\n\n    this.hasRequiredParams = hasRequiredParams;\n  }\n\n  private fetch = async (append: boolean = false, initial: boolean = false) => {\n    if (this.currentController) {\n      this.currentController.abort()\n    }\n\n    if (!this.hasRequiredParams && !append) {\n      this.loading = false;\n      return;\n    }\n\n    this.loading = true;\n    this.error = \"\";\n\n    let apiUrl = this.api.replace(/\\{lang\\}/gi, this.localization.$locale);\n    let limit = this.limit.toString();\n\n    this.params.set('offset', append ? this.results.length.toString() : '0');\n\n    if (initial) {\n      const search = new URLSearchParams(location.search).get(\"search\");\n\n      if (search) {\n        const urlLimit = new URLSearchParams(search).get(\"limit\");\n\n        if (urlLimit) {\n          limit = urlLimit;\n        }\n      }\n    }\n\n    this.params.set('limit', limit);\n\n    this.currentController = new AbortController();\n\n    let data: {\n      error?: boolean\n      message?: string\n      templates?: {\n        result: string\n      },\n      meta?: {\n        total: number\n      },\n      resultsHeading?: string\n      results?: StzhSearchResult[]\n    } = {};\n\n    try {\n      // load data from API\n      const response = await axios(apiUrl, {\n        params: this.params,\n        signal: this.currentController.signal\n      });\n\n      data = response.data;\n    } catch (error) {\n      this.error = this.localization.error;\n    }\n\n    this.resultsHeading = data.resultsHeading || \"\";\n    this.totalCount = data.meta?.total || 0;\n\n    if (data.error) {\n      this.error = data.message || this.localization.error;\n    }\n\n    if (data.results) {\n      if (append) {\n        this.results = [...this.results, ...data.results.map(item => ({\n          ...item,\n          html: this.renderResultTemplate(item.html || data.templates?.result, item)\n        }))];\n      } else {\n        this.results = data.results.map(item => ({\n          ...item,\n          html: this.renderResultTemplate(item.html || data.templates?.result, item)\n        }));\n      }\n    }\n\n    if (!initial && !this.preventUpdateUrl) {\n      const newUrlParams = new URLSearchParams(location.search);\n      const searchParams = new URLSearchParams(this.params);\n\n      searchParams.delete(\"offset\");\n      searchParams.set(\"limit\", this.results.length.toString());\n      newUrlParams.set(\"search\", searchParams.toString());\n\n      // console.log(location.search, searchParams.toString(), newUrlParams.toString());\n\n      window.history.replaceState(null, \"\", `${location.pathname}?${newUrlParams}`)\n    }\n\n    if (initial || !this.firstFetched) {\n      this.loading = false;\n    } else {\n      // to be able to see loading effect we delay turning off loading state\n      window.setTimeout(() => {\n        this.loading = false;\n      }, this.debounceTime);\n    }\n\n    this.firstFetched = true;\n  }\n\n  private debouncedFetch = debounce(this.fetch, this.debounceTime);\n\n  private handleMainFilterChange = async () => {\n    if (this.autofetchMainFilters) {\n      await this.updateParams();\n      this.debouncedFetch();\n    }\n  }\n\n  private handleAsideFilterChange = async () => {\n    if (this.autofetchAsideFilters) {\n      await this.updateParams();\n      this.debouncedFetch();\n    }\n  }\n\n  private handleFormSubmit = async (event: Event) => {\n    event.preventDefault();\n\n    await this.updateParams();\n    this.fetch();\n  }\n\n  private handleMoreClick = () => {\n    this.fetch(true);\n  }\n\n  private handleMediaChange = () => {\n    this.isDetailsOpen = media(\"large\").matches;\n  }\n\n  private handleFormReset = async () => {\n    requestAnimationFrame(() => {\n      requestAnimationFrame(async () => {\n        await this.updateParams();\n      });\n    });\n  }\n\n  async componentDidLoad() {\n    // update params initially to get hidden filters\n    // and set initialFetch to true if search params exist\n    await this.updateParams(true);\n\n    if (this.initialFetch) {\n      await this.fetch(false, true);\n      this.initiallyFetched = true;\n    } else {\n      this.initiallyFetched = true;\n    }\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"search\");\n    }\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.handleMediaChange);\n    this.handleMediaChange();\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.handleMediaChange);\n  }\n\n  render() {\n    const filtersMainUsed = hasSlot(this.element, 'filters-main');\n    const filtersAsideUsed = hasSlot(this.element, 'filters-aside');\n\n    const resultsShown = (this.hasRequiredParams || this.firstFetched) && this.firstFetched && this.initiallyFetched;\n\n    const classes = {\n      \"stzh-search\": true,\n      \"stzh-search--has-filters-main\": filtersMainUsed,\n      \"stzh-search--has-filters-aside\": filtersAsideUsed,\n      \"stzh-search--has-hidden-main-filters\": this.hideMainFilters,\n      \"stzh-search--has-hidden-aside-filters\": this.hideAsideFilters,\n      \"stzh-search--has-results-shown\": resultsShown,\n      \"stzh-search--has-error-shown\": !!this.error,\n      \"stzh-search--is-loading\": this.loading,\n      [`stzh-search--${this.variant}`]: !!this.variant,\n    };\n\n    const WrapperElement = typeof this.templateResultWrapperElement === \"function\"\n      ? this.templateResultWrapperElement(this.element)\n      : this.templateResultWrapperElement;\n\n    const wrapperProps = typeof this.templateResultWrapperProps === \"function\"\n      ? this.templateResultWrapperProps(this.element)\n      : this.templateResultWrapperProps;\n\n    return (\n      <Host has-aside-filters={filtersAsideUsed}>\n        <form\n          ref={(el) => (this.formElement = el as HTMLFormElement)}\n          novalidate\n          class={classes}\n          onSubmit={this.handleFormSubmit}\n          onReset={this.handleFormReset}\n        >\n          {/* @ts-ignore */}\n          <div class=\"stzh-search__filters-main\" onStzhChange={this.handleMainFilterChange}>\n            <slot name=\"filters-main\"></slot>\n          </div>\n\n          {filtersAsideUsed &&\n            <Fragment>\n              {/* @ts-ignore */}\n              <div class=\"stzh-search__filters-aside\" onStzhChange={this.handleAsideFilterChange}>\n                <div class=\"stzh-search__filters-aside-inner\">\n                  <div class=\"stzh-search__filters-aside-heading\">\n                    {this.localization.moreFilter}\n                  </div>\n                  <stzh-details\n                    open={this.isDetailsOpen}\n                    class=\"stzh-search__filters-aside-details\"\n                  >\n                    <stzh-button\n                      class=\"stzh-search__filters-aside-details-trigger\"\n                      variant=\"tertiary-plain\"\n                      size=\"small\"\n                      noPaddingLeft={true}\n                      showToggleIcon={true}\n                      iconPosition=\"right\"\n                      label={this.localization.moreFilter}\n                    ></stzh-button>\n                    <div slot=\"content\">\n                      <slot name=\"filters-aside\"></slot>\n                    </div>\n                  </stzh-details>\n                </div>\n              </div>\n            </Fragment>\n          }\n\n          <div class=\"stzh-search__results-wrapper\">\n            {resultsShown &&\n              <Fragment>\n                {this.results.length === 0\n                  ?\n                  <Fragment>\n                    {this.variant !== \"teaser\" && this.resultsHeading &&\n                      <stzh-heading\n                        class=\"stzh-search__results-heading\"\n                        curve=\"h3\"\n                        level={this.resultHeadingLevel}\n                        innerHTML={this.resultsHeading}\n                      ></stzh-heading>\n                    }\n\n                    {this.emptyText &&\n                      <stzh-text class=\"stzh-search__empty-text\" innerHTML={this.emptyText}></stzh-text>\n                    }\n\n                    {this.emptyLinkLabel && this.emptyLinkHref &&\n                      <div class=\"stzh-search__empty-link-wrapper\">\n                        <stzh-link\n                          href={this.emptyLinkHref}\n                          label={this.emptyLinkLabel}\n                        ></stzh-link>\n                      </div>\n                    }\n                  </Fragment>\n                  :\n                  <Fragment>\n                    {this.variant !== \"teaser\" && this.resultsHeading &&\n                      <stzh-heading\n                        class=\"stzh-search__results-heading\"\n                        curve=\"h3\"\n                        level={this.resultHeadingLevel}\n                        innerHTML={this.resultsHeading}\n                      ></stzh-heading>\n                    }\n\n                    <WrapperElement class=\"stzh-search__results\" {...wrapperProps}>\n                      {this.results.map((result) =>\n                        <div class=\"stzh-search__results-item\" innerHTML={result.html || \"\"}></div>\n                      )}\n                    </WrapperElement>\n\n                    <div class=\"stzh-search__actions-wrapper\">\n                      {this._showMoreLink &&\n                        <stzh-button\n                          variant=\"secondary\"\n                          class=\"stzh-search__action-more\"\n                          label={this.localization.showMore}\n                          onClick={this.handleMoreClick}\n                          a11yDisabled={this.loading}\n                        >\n                        </stzh-button>\n                      }\n                    </div>\n                  </Fragment>\n                }\n              </Fragment>\n            }\n\n            {this.error &&\n              <div class=\"stzh-search__error\">\n                <stzh-message type=\"error\" label={this.error}></stzh-message>\n              </div>\n            }\n\n            {this.loading && <stzh-loader class=\"stzh-search__loader\"></stzh-loader>}\n          </div>\n\n          <slot></slot>\n        </form>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-3cd1696a.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as e,F as o,a as i,g as s}from"./p-c7bfac7a.js";import{s as r,h as n}from"./p-7e304ea3.js";import"./p-9b063923.js";const h=":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}@media print{stzh-footer{display:none}}.stzh-footer{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;font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);background-color:var(--stzh-color-primary100);--stzh-flyingfocus-color:var(--stzh-color-white);--stzh-base-color:var(--stzh-color-white70op);--stzh-link-color:var(--stzh-color-white70op);--stzh-link-hover-color:var(--stzh-color-white);--stzh-link-text-decoration-line:none;--stzh-link-hover-text-decoration-line:none;}.stzh-footer[hidden]{display:none}.stzh-footer::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.stzh-footer::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.stzh-footer *,.stzh-footer *::before,.stzh-footer *::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)}.stzh-footer .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.stzh-footer .stzh-fylingfocus-focused{outline-style:none !important}.stzh-footer .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}.stzh-footer [slot=logo],.stzh-footer [slot=logo] img{display:block;height:2.375rem}.stzh-footer [slot=info]{margin:0}.stzh-footer__wrapper{margin-left:1.25rem;margin-right:1.25rem;padding:var(--stzh-space-xlarge) 0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--stzh-space-xlarge)}@media screen and (min-width: 600px){.stzh-footer__wrapper{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-footer__wrapper{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-footer__wrapper{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-footer__wrapper{margin-left:auto;margin-right:auto;max-width:84.25rem}}@media screen and (min-width: 900px){.stzh-footer__wrapper{flex-direction:row;align-items:center;justify-content:space-between}}.stzh-footer__menu{background-color:var(--stzh-color-primary80)}.stzh-footer__menu-inner{margin-left:1.25rem;margin-right:1.25rem;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);display:flex;flex-direction:column;align-items:flex-start;padding:var(--stzh-space-xxlarge) 0;--stzh-link-height:2.75rem}@media screen and (min-width: 600px){.stzh-footer__menu-inner{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-footer__menu-inner{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-footer__menu-inner{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-footer__menu-inner{margin-left:auto;margin-right:auto;max-width:84.25rem}}.stzh-footer__menu-inner:empty,.stzh-footer__logo:empty,.stzh-footer__info:empty,.stzh-footer__links:empty{display:none}.stzh-footer__copyright-wrapper{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);display:flex;flex-direction:column;gap:var(--stzh-space-medium);color:var(--stzh-color-white)}@media screen and (min-width: 900px){.stzh-footer__copyright-wrapper{gap:var(--stzh-space-large);margin-right:auto}}.stzh-footer__copyright{display:flex;align-items:center;height:2.75rem}.stzh-footer__info{display:flex;flex-direction:column;align-items:flex-start;gap:var(--stzh-space-large)}.stzh-footer__links{--stzh-link-height:2.75rem}@media screen and (min-width: 900px){.stzh-footer__links{margin-left:auto}}.stzh-footer__links,.stzh-footer slot-fb[name=link]:not([hidden]){display:flex;flex-direction:column;align-items:flex-start}@media screen and (min-width: 600px){.stzh-footer__links,.stzh-footer slot-fb[name=link]:not([hidden]){flex-direction:row;align-items:center;gap:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-footer--has-logo .stzh-footer__wrapper,.stzh-footer--has-info .stzh-footer__wrapper{align-items:flex-start}}";const l=class{constructor(e){t(this,e);this.init=()=>{const t=this.element.querySelectorAll('stzh-link[slot="menu-link"], [slot="menu-link"] stzh-link');const e=this.element.querySelectorAll('stzh-link[slot="link"], [slot="link"] stzh-link');const o=this.element.querySelectorAll('stzh-text[slot="info"], [slot="info"] stzh-text');const i=this.element.querySelectorAll('stzh-link[slot="info"], [slot="info"] stzh-link');t.forEach((t=>{t.setAttribute("role","listitem");r(t,{size:"inherit"})}));e.forEach((t=>{t.setAttribute("role","listitem");r(t,{size:"inherit"})}));i.forEach((t=>{r(t,{size:"inherit"})}));o.forEach((t=>{r(t,{curve:"none"})}))};this.localization=undefined;this.copyright=undefined;this.variant="default";this.mainUrl="https://www.stadt-zuerich.ch"}async componentWillLoad(){if(typeof this.copyright==="undefined"){const t=new Date;this.copyright=`© ${t.getFullYear()} Stadt Zürich`}if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"footer")}}connectedCallback(){this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}render(){const t=n(this.element,"logo");const s=n(this.element,"info");const r=n(this.element,"link");const h=n(this.element,"menu-link");const l={"stzh-footer":true,"stzh-footer--has-logo":t,"stzh-footer--has-info":s,"stzh-footer--has-links":r,"stzh-footer--has-menu-links":h};return e(i,null,e("footer",{class:l},e("div",{class:"stzh-footer__menu"},e("div",{class:"stzh-footer__menu-inner"},e("slot",{name:"menu-link"}))),e("div",{class:"stzh-footer__wrapper"},e("div",{class:"stzh-footer__copyright-wrapper"},this.copyright&&e("div",{class:"stzh-footer__copyright"},this.copyright),e("div",{class:"stzh-footer__logo"},e("slot",{name:"logo"}))),e("div",{class:"stzh-footer__info"},e("slot",{name:"info"})),e("div",{class:"stzh-footer__links",role:"list"},e("slot",{name:"link"},this.variant==="egov"&&e(o,null,e("stzh-link",{slot:"link",size:"inherit",target:"_blank",class:"stzh-footer__link",href:`${this.mainUrl}/${this.localization.legalNoticeUrl}`},this.localization.legalNoticeText),e("stzh-link",{slot:"link",size:"inherit",target:"_blank",class:"stzh-footer__link",href:`${this.mainUrl}/${this.localization.imprintUrl}`},this.localization.imprintText),e("stzh-link",{slot:"link",size:"inherit",class:"stzh-footer__link",target:"_blank",href:`${this.mainUrl}/${this.localization.accessibilityUrl}`},this.localization.accessibilityText)))))))}get element(){return s(this)}};l.style=h;export{l as stzh_footer};
-//# sourceMappingURL=p-3cd1696a.entry.js.map

package/dist/stzh-components/p-3cd1696a.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhFooterCss","StzhFooter","this","init","menuLinks","element","querySelectorAll","links","infoTexts","infoLinks","forEach","link","setAttribute","setPropsIfNull","size","curve","componentWillLoad","copyright","currentDate","Date","getFullYear","localization","window","stzhComponents","utils","fetchTranslations","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","logoSlotUsed","hasSlot","infoSlotUsed","linkSlotUsed","menuLinkSlotUsed","classes","h","Host","class","name","role","variant","Fragment","slot","target","href","mainUrl","legalNoticeUrl","legalNoticeText","imprintUrl","imprintText","accessibilityUrl","accessibilityText"],"sources":["src/components/stzh-footer/stzh-footer.scss?tag=stzh-footer","src/components/stzh-footer/stzh-footer.tsx"],"sourcesContent":["stzh-footer {\n  @media print {\n    display: none;\n  }\n}\n\n.stzh-footer {\n  @include host;\n  @include fontSize('micro');\n  background-color: $colorPrimary100;\n\n  --stzh-flyingfocus-color: #{$colorWhite};\n  --stzh-base-color: #{$colorWhite70op};\n  --stzh-link-color: #{$colorWhite70op};\n  --stzh-link-hover-color: #{$colorWhite};\n  --stzh-link-text-decoration-line: none;\n  --stzh-link-hover-text-decoration-line: none;\n\n  [slot=\"logo\"],\n  [slot=\"logo\"] img {\n    display: block;\n    height: 38px;\n  }\n\n  [slot=\"info\"] {\n    margin: 0;\n  }\n\n  &__wrapper {\n    @include container;\n    padding: space('xlarge') 0;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: space('xlarge');\n\n    @include mq($from: medium) {\n      flex-direction: row;\n      align-items: center;\n      justify-content: space-between;\n    }\n  }\n\n  &__menu {\n    background-color: $colorPrimary80;\n  }\n\n  &__menu-inner {\n    @include container;\n    @include fontSize('centi');\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: space('xxlarge') 0;\n\n    --stzh-link-height: 44px;\n  }\n\n  &__menu-inner,\n  &__logo,\n  &__info,\n  &__links {\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__copyright-wrapper {\n    @include fontSize('milli');\n    display: flex;\n    flex-direction: column;\n    gap: space('medium');\n    color: $colorWhite;\n\n    @include mq($from: medium) {\n      gap: space('large');\n      margin-right: auto;\n    }\n  }\n\n  &__copyright {\n    display: flex;\n    align-items: center;\n    height: 44px;\n  }\n\n  &__info {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: space('large');\n  }\n\n  &__links {\n    --stzh-link-height: 44px;\n\n    @include mq($from: medium) {\n      margin-left: auto;\n    }\n  }\n\n  &__links,\n  slot-fb[name=\"link\"]:not([hidden]) {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n\n    @include mq($from: small) {\n      flex-direction: row;\n      align-items: center;\n      gap: space('large');\n    }\n  }\n\n  /* Logo or info filled variant */\n\n  &--has-logo &__wrapper,\n  &--has-info &__wrapper {\n    @include mq($from: medium) {\n      align-items: flex-start;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Fragment,\n} from \"@stencil/core\";\n\nimport { StzhFooterLocalizedText } from './stzh-footer.localization';\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot menu-link - Slot for menu links (`stzh-link` elements)\n * @slot logo - Slot for logo `img`\n * @slot info - Slot for info content (`stzh-link` or `stzh-text` elements)\n * @slot link - Slot for meta links (`stzh-link` elements)\n */\n@Component({\n  tag: \"stzh-footer\",\n  styleUrl: \"stzh-footer.scss\"\n})\nexport class StzhFooter {\n  /** Translation strings */\n  @Prop() localization: StzhFooterLocalizedText;\n\n  /** Copyright text (will show default copyright string if undefined) */\n  @Prop() copyright: string;\n\n  /** Footer variant */\n  @Prop() variant: \"default\" | \"egov\" = \"default\";\n\n  /** Main URL for shortlinks */\n  @Prop() mainUrl: string = \"https://www.stadt-zuerich.ch\";\n\n  @Element() element: HTMLStzhFooterElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const menuLinks = this.element.querySelectorAll('stzh-link[slot=\"menu-link\"], [slot=\"menu-link\"] stzh-link');\n    const links = this.element.querySelectorAll('stzh-link[slot=\"link\"], [slot=\"link\"] stzh-link');\n    const infoTexts = this.element.querySelectorAll('stzh-text[slot=\"info\"], [slot=\"info\"] stzh-text');\n    const infoLinks = this.element.querySelectorAll('stzh-link[slot=\"info\"], [slot=\"info\"] stzh-link');\n\n    menuLinks.forEach((link) => {\n      link.setAttribute(\"role\", \"listitem\");\n\n      setPropsIfNull(link, {\n        size: \"inherit\"\n      } as HTMLStzhLinkElement);\n    });\n\n    links.forEach((link) => {\n      link.setAttribute(\"role\", \"listitem\");\n\n      setPropsIfNull(link, {\n        size: \"inherit\"\n      } as HTMLStzhLinkElement);\n    });\n\n    infoLinks.forEach((link) => {\n      setPropsIfNull(link, {\n        size: \"inherit\"\n      } as HTMLStzhLinkElement);\n    });\n\n    infoTexts.forEach((link) => {\n      setPropsIfNull(link, {\n        curve: \"none\"\n      } as HTMLStzhTextElement);\n    });\n  }\n\n  async componentWillLoad() {\n    if (typeof this.copyright === \"undefined\") {\n      const currentDate = new Date();\n      this.copyright = `© ${currentDate.getFullYear()} Stadt Zürich`;\n    }\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'footer');\n    }\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const logoSlotUsed = hasSlot(this.element, \"logo\");\n    const infoSlotUsed = hasSlot(this.element, \"info\");\n    const linkSlotUsed = hasSlot(this.element, \"link\");\n    const menuLinkSlotUsed = hasSlot(this.element, \"menu-link\");\n\n    const classes = {\n      \"stzh-footer\": true,\n      \"stzh-footer--has-logo\": logoSlotUsed,\n      \"stzh-footer--has-info\": infoSlotUsed,\n      \"stzh-footer--has-links\": linkSlotUsed,\n      \"stzh-footer--has-menu-links\": menuLinkSlotUsed\n    };\n\n    return (\n      <Host>\n        <footer class={classes}>\n          <div class=\"stzh-footer__menu\">\n            <div class=\"stzh-footer__menu-inner\">\n              <slot name=\"menu-link\"></slot>\n            </div>\n          </div>\n          <div class=\"stzh-footer__wrapper\">\n            <div class=\"stzh-footer__copyright-wrapper\">\n              {this.copyright &&\n                <div class=\"stzh-footer__copyright\">\n                  {this.copyright}\n                </div>\n              }\n              <div class=\"stzh-footer__logo\">\n                <slot name=\"logo\"></slot>\n              </div>\n            </div>\n\n            <div class=\"stzh-footer__info\">\n              <slot name=\"info\"></slot>\n            </div>\n\n            <div class=\"stzh-footer__links\" role=\"list\">\n              <slot name=\"link\">\n                {this.variant === \"egov\" &&\n                  <Fragment>\n                    <stzh-link\n                      slot=\"link\"\n                      size=\"inherit\"\n                      target=\"_blank\"\n                      class=\"stzh-footer__link\"\n                      href={`${this.mainUrl}/${this.localization.legalNoticeUrl}`}\n                    >\n                      {this.localization.legalNoticeText}\n                    </stzh-link>\n                    <stzh-link\n                      slot=\"link\"\n                      size=\"inherit\"\n                      target=\"_blank\"\n                      class=\"stzh-footer__link\"\n                      href={`${this.mainUrl}/${this.localization.imprintUrl}`}\n                    >\n                      {this.localization.imprintText}\n                    </stzh-link>\n                    <stzh-link\n                      slot=\"link\"\n                      size=\"inherit\"\n                      class=\"stzh-footer__link\"\n                      target=\"_blank\"\n                      href={`${this.mainUrl}/${this.localization.accessibilityUrl}`}\n                    >\n                      {this.localization.accessibilityText}\n                    </stzh-link>\n                  </Fragment>\n                }\n              </slot>\n            </div>\n          </div>\n        </footer>\n      </Host>\n    );\n  }\n}\n"],"mappings":"mIAAA,MAAMA,EAAgB,20K,MCuBTC,EAAU,M,yBAiBbC,KAAAC,KAAO,KACb,MAAMC,EAAYF,KAAKG,QAAQC,iBAAiB,6DAChD,MAAMC,EAAQL,KAAKG,QAAQC,iBAAiB,mDAC5C,MAAME,EAAYN,KAAKG,QAAQC,iBAAiB,mDAChD,MAAMG,EAAYP,KAAKG,QAAQC,iBAAiB,mDAEhDF,EAAUM,SAASC,IACjBA,EAAKC,aAAa,OAAQ,YAE1BC,EAAeF,EAAM,CACnBG,KAAM,WACiB,IAG3BP,EAAMG,SAASC,IACbA,EAAKC,aAAa,OAAQ,YAE1BC,EAAeF,EAAM,CACnBG,KAAM,WACiB,IAG3BL,EAAUC,SAASC,IACjBE,EAAeF,EAAM,CACnBG,KAAM,WACiB,IAG3BN,EAAUE,SAASC,IACjBE,EAAeF,EAAM,CACnBI,MAAO,QACgB,GACzB,E,kEAzCkC,U,aAGZ,8B,CAyC1B,uBAAMC,GACJ,UAAWd,KAAKe,YAAc,YAAa,CACzC,MAAMC,EAAc,IAAIC,KACxBjB,KAAKe,UAAY,KAAKC,EAAYE,4B,CAGpC,IAAKlB,KAAKmB,aAAc,CACtBnB,KAAKmB,mBAAqBC,OAAOC,eAAeC,MAAMC,kBAAkBvB,KAAKG,QAAS,S,EAI1F,iBAAAqB,GACExB,KAAKC,OAELD,KAAKyB,SAAW,IAAIC,iBAAiB1B,KAAKC,MAC1CD,KAAKyB,SAASE,QAAQ3B,KAAKG,QAAS,CAClCyB,UAAW,KACXC,QAAS,M,CAIb,oBAAAC,GACE,GAAI9B,KAAKyB,SAAU,CACjBzB,KAAKyB,SAASM,Y,EAIlB,MAAAC,GACE,MAAMC,EAAeC,EAAQlC,KAAKG,QAAS,QAC3C,MAAMgC,EAAeD,EAAQlC,KAAKG,QAAS,QAC3C,MAAMiC,EAAeF,EAAQlC,KAAKG,QAAS,QAC3C,MAAMkC,EAAmBH,EAAQlC,KAAKG,QAAS,aAE/C,MAAMmC,EAAU,CACd,cAAe,KACf,wBAAyBL,EACzB,wBAAyBE,EACzB,yBAA0BC,EAC1B,8BAA+BC,GAGjC,OACEE,EAACC,EAAI,KACHD,EAAA,UAAQE,MAAOH,GACbC,EAAA,OAAKE,MAAM,qBACTF,EAAA,OAAKE,MAAM,2BACTF,EAAA,QAAMG,KAAK,gBAGfH,EAAA,OAAKE,MAAM,wBACTF,EAAA,OAAKE,MAAM,kCACRzC,KAAKe,WACJwB,EAAA,OAAKE,MAAM,0BACRzC,KAAKe,WAGVwB,EAAA,OAAKE,MAAM,qBACTF,EAAA,QAAMG,KAAK,WAIfH,EAAA,OAAKE,MAAM,qBACTF,EAAA,QAAMG,KAAK,UAGbH,EAAA,OAAKE,MAAM,qBAAqBE,KAAK,QACnCJ,EAAA,QAAMG,KAAK,QACR1C,KAAK4C,UAAY,QAChBL,EAACM,EAAQ,KACPN,EAAA,aACEO,KAAK,OACLlC,KAAK,UACLmC,OAAO,SACPN,MAAM,oBACNO,KAAM,GAAGhD,KAAKiD,WAAWjD,KAAKmB,aAAa+B,kBAE1ClD,KAAKmB,aAAagC,iBAErBZ,EAAA,aACEO,KAAK,OACLlC,KAAK,UACLmC,OAAO,SACPN,MAAM,oBACNO,KAAM,GAAGhD,KAAKiD,WAAWjD,KAAKmB,aAAaiC,cAE1CpD,KAAKmB,aAAakC,aAErBd,EAAA,aACEO,KAAK,OACLlC,KAAK,UACL6B,MAAM,oBACNM,OAAO,SACPC,KAAM,GAAGhD,KAAKiD,WAAWjD,KAAKmB,aAAamC,oBAE1CtD,KAAKmB,aAAaoC,wB"}

package/dist/stzh-components/p-400f2932.entry.js

@@ -1,2 +0,0 @@
-import{r as s,c as t,h as e,a as i,g as a}from"./p-c7bfac7a.js";import{i as n}from"./p-7e304ea3.js";import{w as o}from"./p-54bd842e.js";import{s as h,a as r,b as c}from"./p-7e2354d0.js";import"./p-9b063923.js";const l=".sc-stzh-details-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-details-h{display:none}.sc-stzh-details-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-details-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-details-h *.sc-stzh-details,.sc-stzh-details-h *.sc-stzh-details::before,.sc-stzh-details-h *.sc-stzh-details::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-details-h .has-focus.sc-stzh-details{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-details-h .stzh-fylingfocus-focused.sc-stzh-details{outline-style:none !important}.sc-stzh-details-h .stzh-fylingfocus-focused.sc-stzh-details::-moz-focus-inner{border:0 !important}.sc-stzh-details-h{display:contents;--content-width:var(--stzh-details-content-width, 100%);--content-padding-left:0px;--content-padding-right:var(--stzh-details-content-padding-right, 0px);--content-background:transparent;--content-grid-column:var(--stzh-details-content-grid-column, inherit);--content-border-bottom:none;--content-padding-top:var(--stzh-details-content-padding-top, var(--stzh-space-medium));--content-padding-bottom:0}.stzh-details.sc-stzh-details,.stzh-details__trigger.sc-stzh-details{display:contents}.stzh-details__content.sc-stzh-details{width:var(--content-width);overflow:hidden;background-color:var(--content-background);grid-column:var(--content-grid-column);border-bottom:var(--content-border-bottom)}@media print{.stzh-details__content.sc-stzh-details{height:auto !important;overflow:visible !important;display:block !important}}.stzh-details__content-inner.sc-stzh-details{padding-top:var(--content-padding-top);padding-bottom:var(--content-padding-bottom);padding-left:var(--content-padding-left);padding-right:var(--content-padding-right)}";const d={keyframes:[{height:"0",opacity:"0"},{height:"auto",opacity:"1"}],options:{duration:300,easing:"linear"}};const z={keyframes:[{height:"auto",opacity:"1"},{height:"0",opacity:"0"}],options:{duration:300,easing:"linear"}};let m=0;const g=class{constructor(e){s(this,e);this.stzhOpen=t(this,"stzhOpen",7);this.stzhOpened=t(this,"stzhOpened",7);this.stzhClose=t(this,"stzhClose",7);this.stzhClosed=t(this,"stzhClosed",7);this.toggledByMethod=false;this.onClickTrigger=()=>{this.toggle()};this.open=false}async openWatcher(s){if(!this.triggerElement){return}if(this.triggerElement.firstElementChild){const t=n(this.triggerElement.firstElementChild);this.triggerElement.firstElementChild.setAttribute(t?"a11y-expanded":"aria-expanded",s?"true":"false")}if(s){if(this.toggledByMethod){this.stzhOpen.emit({component:"stzh-accordion-item"})}await h(this.bodyElement);this.bodyElement.hidden=false;await r(this.bodyElement,c(d.keyframes,{height:this.bodyElement.scrollHeight}),d.options);this.bodyElement.style.height="auto";this.bodyElement.style.overflow="visible";if(this.toggledByMethod){this.stzhOpened.emit({component:"stzh-accordion-item"})}}else{if(this.toggledByMethod){this.stzhClose.emit({component:"stzh-accordion-item"})}await h(this.bodyElement);this.bodyElement.style.overflow="hidden";await r(this.bodyElement,c(z.keyframes,{height:this.bodyElement.scrollHeight}),z.options);this.bodyElement.hidden=true;this.bodyElement.style.height="0px";if(this.toggledByMethod){this.stzhClosed.emit({component:"stzh-accordion-item"})}}this.toggledByMethod=false}async show(){if(this.open){return}this.toggledByMethod=true;this.open=true;return o(this.element,"stzhOpened")}async hide(){if(!this.open){return}this.toggledByMethod=true;this.open=false;return o(this.element,"stzhClosed")}async toggle(){if(this.open){return await this.hide()}else{return await this.show()}}componentWillLoad(){this.detailsId=`stzh-details-${m++}`}componentDidLoad(){this.bodyElement.hidden=!this.open;this.bodyElement.style.height=this.open?"auto":"0px";this.bodyElement.style.overflow=this.open?"visible":"hidden";if(this.triggerElement.firstElementChild){const s=n(this.triggerElement.firstElementChild);this.triggerElement.firstElementChild.setAttribute(s?"a11y-controls":"aria-controls",`${this.detailsId}-content`);this.triggerElement.firstElementChild.setAttribute(s?"a11y-expanded":"aria-expanded",this.open?"true":"false")}}connectedCallback(){var s;let t=(s=this.triggerElement)===null||s===void 0?void 0:s.firstElementChild;if(!t){const s=Array.from(this.element.children).find((s=>!s.hasAttribute("slot")));t=s}if(t){t.addEventListener("click",this.onClickTrigger)}}disconnectedCallback(){if(this.triggerElement&&this.triggerElement.firstElementChild){this.triggerElement.firstElementChild.removeEventListener("click",this.onClickTrigger)}}render(){const s={"stzh-details":true,"stzh-details--is-open":this.open};return e(i,null,e("div",{class:s},e("div",{ref:s=>this.triggerElement=s,class:"stzh-details__trigger"},e("slot",null)),e("div",{id:`${this.detailsId}-content`,ref:s=>this.bodyElement=s,class:"stzh-details__content","aria-labelledby":`${this.detailsId}-header`},e("div",{class:"stzh-details__content-inner"},e("slot",{name:"content"})))))}get element(){return a(this)}static get watchers(){return{open:["openWatcher"]}}};g.style=l;const p=".sc-stzh-message-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-message-h{display:none}.sc-stzh-message-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-message-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-message-h *.sc-stzh-message,.sc-stzh-message-h *.sc-stzh-message::before,.sc-stzh-message-h *.sc-stzh-message::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-message-h .has-focus.sc-stzh-message{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-message-h .stzh-fylingfocus-focused.sc-stzh-message{outline-style:none !important}.sc-stzh-message-h .stzh-fylingfocus-focused.sc-stzh-message::-moz-focus-inner{border:0 !important}.sc-stzh-message-h{--background-color:var(--stzh-color-grey20);--icon-color:var(--stzh-color-info70);--close-color:var(--stzh-color-grey90);--label-color:var(--stzh-color-info70);--description-color:var(--stzh-color-grey90)}[type=success].sc-stzh-message-h{--label-color:var(--stzh-color-success70);--icon-color:var(--stzh-color-success70);--background-color:var(--stzh-color-success20)}[type=warning].sc-stzh-message-h{--label-color:var(--stzh-color-warning90);--icon-color:var(--stzh-color-warning90);--background-color:var(--stzh-color-warning20)}[type=error].sc-stzh-message-h{--label-color:var(--stzh-color-error70);--icon-color:var(--stzh-color-error70);--background-color:var(--stzh-color-error20)}.stzh-message.sc-stzh-message{position:relative;display:flex;box-shadow:var(--stzh-box-shadow-message);background-color:var(--background-color);border-radius:var(--stzh-button-border-radius)}.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);padding-right:var(--stzh-space-xlarge);gap:var(--stzh-space-small);display:flex;flex-direction:column;flex-grow:1;padding-left:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{gap:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{gap:var(--stzh-space-large)}}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{flex-direction:row;align-items:flex-start}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-left:var(--stzh-space-large)}}.stzh-message__icon-wrapper.sc-stzh-message{display:flex;flex-shrink:0}.stzh-message__icon.sc-stzh-message{--size:var(--stzh-icon-size-large);color:var(--icon-color)}@media screen and (min-width: 600px){.stzh-message__text-wrapper.sc-stzh-message{flex-grow:1}}.stzh-message__label.sc-stzh-message{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing);color:var(--label-color)}@media screen and (min-width: 600px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-small-heading-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-large-heading-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}.stzh-message__label.sc-stzh-message:not(:empty){margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-message__label.sc-stzh-message:not(:empty){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message__label.sc-stzh-message:not(:empty){margin-bottom:var(--stzh-space-large)}}.stzh-message__description.sc-stzh-message{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);color:var(--description-color)}@media screen and (min-width: 900px){.stzh-message__description.sc-stzh-message{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-xxlarge)}}.stzh-message__close[variant=tertiary].sc-stzh-message{--color:var(--close-color);position:absolute;top:0;right:0}.stzh-message.sc-stzh-message:has(.stzh-message__description:empty):has(.stzh-message__link:empty) .stzh-message__label.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-xxsmall);margin-bottom:0}";const f=class{constructor(e){s(this,e);this.stzhOpen=t(this,"stzhOpen",7);this.stzhClose=t(this,"stzhClose",7);this.onCloseButtonClick=()=>{this.hide()};this.label="";this.description="";this.type="info";this.hideClose=false;this.localization=undefined;this.open=true}async show(){this.open=true;this.stzhOpen.emit({component:"stzh-message"})}async hide(){this.open=false;this.stzhClose.emit({component:"stzh-message"})}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"message")}}render(){const s={"stzh-message":true,"stzh-message--has-close-hidden":this.hideClose,[`stzh-message--type-${this.type}`]:!!this.type};return e(i,{hidden:!this.open},e("div",{class:s},e("div",{class:"stzh-message__content"},e("div",{class:"stzh-message__icon-wrapper"},e("stzh-icon",{class:"stzh-message__icon",name:this.type==="info"&&"info-help-filled"||this.type==="success"&&"checkmark-circle-filled"||this.type==="warning"&&"important-warning-filled"||this.type==="error"&&"warning-filled"})),e("div",{class:"stzh-message__text-wrapper"},e("div",{class:"stzh-message__label"},this.label?this.label:e("slot",{name:"label"})),e("div",{class:"stzh-message__description"},this.description?this.description:e("slot",null)),e("div",{class:"stzh-message__link"},e("slot",{name:"link"})))),!this.hideClose&&e("stzh-button",{class:"stzh-message__close",onClick:this.onCloseButtonClick,a11yLabel:this.localization.close,variant:"tertiary",size:"small",iconOnly:true,icon:"close-big"})))}get element(){return a(this)}};f.style=p;export{g as stzh_details,f as stzh_message};
-//# sourceMappingURL=p-400f2932.entry.js.map

package/dist/stzh-components/p-400f2932.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhDetailsCss","ANIMATION_SHOW","keyframes","height","opacity","options","duration","easing","ANIMATION_HIDE","detailsCounter","StzhDetails","this","toggledByMethod","onClickTrigger","toggle","openWatcher","newValue","triggerElement","firstElementChild","isStzh","isStzhElement","setAttribute","stzhOpen","emit","component","stopAnimations","bodyElement","hidden","animateTo","shimKeyframesAutoValues","scrollHeight","style","overflow","stzhOpened","stzhClose","stzhClosed","show","open","waitForEvent","element","hide","componentWillLoad","detailsId","componentDidLoad","connectedCallback","trigger","_a","defaultSlot","Array","from","children","find","child","hasAttribute","addEventListener","disconnectedCallback","removeEventListener","render","classes","h","Host","class","ref","el","id","name","stzhMessageCss","StzhMessage","onCloseButtonClick","localization","window","stzhComponents","utils","fetchTranslations","hideClose","type","label","description","onClick","a11yLabel","close","variant","size","iconOnly","icon"],"sources":["src/components/stzh-details/stzh-details.scss?tag=stzh-details&encapsulation=scoped","src/components/stzh-details/stzh-details.tsx","src/components/stzh-message/stzh-message.scss?tag=stzh-message&encapsulation=scoped","src/components/stzh-message/stzh-message.tsx"],"sourcesContent":[":host {\n  display: contents;\n\n  --content-width: var(--stzh-details-content-width, 100%);\n  --content-padding-left: 0px;\n  --content-padding-right: var(--stzh-details-content-padding-right, 0px);\n  --content-background: transparent;\n  --content-grid-column: var(--stzh-details-content-grid-column, inherit);\n  --content-border-bottom: none;\n  --content-padding-top: var(--stzh-details-content-padding-top, #{space('medium')});\n  --content-padding-bottom: 0;\n\n  // @include mq($from: medium) {\n  //   --content-padding-top: var(--stzh-details-content-padding-top, #{spaceCurveValue('medium', 'medium')});\n  // }\n\n  // @include mq($from: large) {\n  //   --content-padding-top: var(--stzh-details-content-padding-top, #{spaceCurveValue('medium', 'large')});\n  // }\n\n  // &[no-padding-top]:not([no-padding-top=\"false\"]) {\n  //   --content-padding-top: var(--stzh-details-content-padding-top, 0px);\n  // }\n\n  // &[no-padding-bottom]:not([no-padding-bottom=\"false\"]) {\n  //   --content-padding-bottom: var(--stzh-details-content-padding-bottom, 0px);\n  // }\n}\n\n.stzh-details {\n  &,\n  &__trigger {\n    display: contents;\n  }\n\n  &__content {\n    width: var(--content-width);\n    overflow: hidden;\n    background-color: var(--content-background);\n    grid-column: var(--content-grid-column);\n    border-bottom: var(--content-border-bottom);\n\n    @media print {\n      height: auto !important;\n      overflow: visible !important;\n      display: block !important;\n    }\n  }\n\n  &__content-inner {\n    padding-top: var(--content-padding-top);\n    padding-bottom: var(--content-padding-bottom);\n    padding-left: var(--content-padding-left);\n    padding-right: var(--content-padding-right);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Method,\n  Watch,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhAccordionItemOpenEvent,\n  StzhAccordionItemOpenedEvent,\n  StzhAccordionItemCloseEvent,\n  StzhAccordionItemClosedEvent\n} from \"../../index\";\n\nimport { isStzhElement } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { stopAnimations, animateTo, shimKeyframesAutoValues } from \"../../utils/animation-utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 300, easing: \"linear\" }\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 300, easing: \"linear\" }\n};\n\nlet detailsCounter = 0;\n\n/**\n * @slot - Slot for trigger\n * @slot content - Slot for any content\n */\n@Component({\n  tag: \"stzh-details\",\n  styleUrl: \"stzh-details.scss\",\n  scoped: true\n})\nexport class StzhDetails {\n  /** Whether fold is open */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  // /** Whether to remove top padding */\n  // @Prop({ reflect: true }) noPaddingTop: boolean = false;\n\n  // /** Whether to remove top padding */\n  // @Prop({ reflect: true }) noPaddingBottom: boolean = false;\n\n  @Element() element: HTMLStzhDetailsElement;\n\n  /** Open event */\n  @Event() stzhOpen: EventEmitter<StzhAccordionItemOpenEvent>;\n\n  /** Opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhAccordionItemOpenedEvent>;\n\n  /** Close event */\n  @Event() stzhClose: EventEmitter<StzhAccordionItemCloseEvent>;\n\n  /** Closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhAccordionItemClosedEvent>;\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.triggerElement) {\n      return;\n    }\n\n    if (this.triggerElement.firstElementChild) {\n      const isStzh = isStzhElement(this.triggerElement.firstElementChild);\n\n      this.triggerElement.firstElementChild\n        .setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", newValue ? \"true\" : \"false\");\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.hidden = false;\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n          height: this.bodyElement.scrollHeight\n        }),\n        ANIMATION_SHOW.options\n      );\n\n      this.bodyElement.style.height = \"auto\";\n      this.bodyElement.style.overflow = \"visible\";\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.style.overflow = \"hidden\";\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.bodyElement.scrollHeight\n        }),\n        ANIMATION_HIDE.options\n      );\n\n      this.bodyElement.hidden = true;\n      this.bodyElement.style.height = \"0px\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  private toggledByMethod: boolean = false;\n  private bodyElement: HTMLDivElement;\n  private detailsId: string;\n\n  /** Show accordion item content */\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide accordion item content */\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  private triggerElement: HTMLElement;\n\n  private onClickTrigger = () => {\n    this.toggle();\n  }\n\n  componentWillLoad() {\n    this.detailsId = `stzh-details-${detailsCounter++}`;\n  }\n\n  componentDidLoad() {\n    this.bodyElement.hidden = !this.open;\n    this.bodyElement.style.height = this.open ? \"auto\" : \"0px\";\n    this.bodyElement.style.overflow = this.open ? \"visible\" : \"hidden\";\n\n    if (this.triggerElement.firstElementChild) {\n      const isStzh = isStzhElement(this.triggerElement.firstElementChild);\n      this.triggerElement.firstElementChild.setAttribute(isStzh ? \"a11y-controls\" : \"aria-controls\", `${this.detailsId}-content`);\n      this.triggerElement.firstElementChild.setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", this.open ? \"true\" : \"false\");\n    }\n  }\n\n  connectedCallback() {\n    let trigger = this.triggerElement?.firstElementChild;\n\n    if (!trigger) {\n      const defaultSlot = Array.from(this.element.children)\n        .find(child => !(child as HTMLElement).hasAttribute(\"slot\")) as HTMLElement\n\n      trigger = defaultSlot;\n    }\n\n    if (trigger) {\n      trigger.addEventListener(\"click\", this.onClickTrigger);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.triggerElement && this.triggerElement.firstElementChild) {\n      this.triggerElement.firstElementChild.removeEventListener(\"click\", this.onClickTrigger);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-details\": true,\n      \"stzh-details--is-open\": this.open\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div\n            ref={(el) => (this.triggerElement = el as HTMLDivElement)}\n            class=\"stzh-details__trigger\"\n          >\n            <slot></slot>\n          </div>\n          <div\n            id={`${this.detailsId}-content`}\n            ref={(el) => (this.bodyElement = el as HTMLDivElement)}\n            class=\"stzh-details__content\"\n            aria-labelledby={`${this.detailsId}-header`}\n          >\n            <div class=\"stzh-details__content-inner\">\n              <slot name=\"content\"></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --background-color: #{$colorGrey20};\n  --icon-color: #{$colorInfo70};\n  --close-color: #{$colorGrey90};\n  --label-color: #{$colorInfo70};\n  --description-color: #{$colorGrey90};\n\n  &[type=\"success\"] {\n    --label-color: #{$colorSuccess70};\n    --icon-color: #{$colorSuccess70};\n    --background-color: #{$colorSuccess20};\n  }\n\n  &[type=\"warning\"] {\n    --label-color: #{$colorWarning90};\n    --icon-color: #{$colorWarning90};\n    --background-color: #{$colorWarning20};\n  }\n\n  &[type=\"error\"] {\n    --label-color: #{$colorError70};\n    --icon-color: #{$colorError70};\n    --background-color: #{$colorError20};\n  }\n}\n\n.stzh-message {\n  position: relative;\n  display: flex;\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n  border-radius: #{$buttonBorderRadius};\n\n  &__content {\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'regular');\n    @include spaceCurve('padding-right', 'medium');\n    @include spaceCurve('gap', 'small');\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    padding-left: space('medium');\n\n    @include mq($from: small) {\n      flex-direction: row;\n      align-items: flex-start;\n    }\n\n    @include mq($from: medium) {\n      padding-left: space('large');\n    }\n  }\n\n  &__icon-wrapper {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  &__icon {\n    --size: #{iconSize('large')};\n    color: var(--icon-color);\n  }\n\n  &__text-wrapper {\n    @include mq($from: small) {\n      flex-grow: 1;\n    }\n  }\n\n  &__label {\n    @include font('title');\n    @include fontCurve('h4', 'heading');\n    color: var(--label-color);\n\n    &:not(:empty) {\n      @include spaceCurve('margin-bottom', 'small');\n    }\n  }\n\n  &__description {\n    @include fontCurve('p1');\n    color: var(--description-color);\n  }\n\n  &__description:not(:empty) + &__link:not(:empty) {\n    @include spaceCurve('margin-top', 'regular');\n  }\n\n  &__close[variant=\"tertiary\"] {\n    --color: var(--close-color);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  /* Only label variant */\n\n  &:has(#{&}__description:empty):has(#{&}__link:empty) &__label:not(:empty) {\n    margin-top: space('xxsmall');\n    margin-bottom: 0;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  State\n} from \"@stencil/core\";\n\nimport { StzhMessageOpenEvent, StzhMessageCloseEvent } from \"../../index\";\n\nimport { StzhMessageLocalizedText } from \"./stzh-message.localization\"\n\n/**\n * @slot - Slot for description content (use instead of description property)\n * @slot label - Slot for label (use as alternative for property)\n * @slot link - Slot for optional stzh-link element\n */\n@Component({\n  tag: \"stzh-message\",\n  styleUrl: \"stzh-message.scss\",\n  scoped: true\n})\nexport class StzhMessage {\n  /** Label (slot can also be used as alternative) */\n  @Prop() label: string = \"\";\n\n  /** Description (use instead of default slot) */\n  @Prop() description: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: \"info\" | \"success\" | \"warning\" | \"error\" = \"info\"\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Translation strings. */\n  @Prop() localization: StzhMessageLocalizedText;\n\n  /** Message open event */\n  @Event() stzhOpen: EventEmitter<StzhMessageOpenEvent>;\n\n  /** Message close event */\n  @Event() stzhClose: EventEmitter<StzhMessageCloseEvent>;\n\n  @Element() element: HTMLStzhMessageElement;\n\n  /** Open state */\n  @State() open: boolean = true;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-message\"\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-message\"\n    });\n  }\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"message\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-message\": true,\n      \"stzh-message--has-close-hidden\": this.hideClose,\n      [`stzh-message--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host hidden={!this.open}>\n        <div class={classes}>\n          <div class=\"stzh-message__content\">\n            <div class=\"stzh-message__icon-wrapper\">\n              <stzh-icon\n                class=\"stzh-message__icon\"\n                name={\n                  this.type === 'info' && \"info-help-filled\"\n                  || this.type === 'success' && \"checkmark-circle-filled\"\n                  || this.type === 'warning' && \"important-warning-filled\"\n                  || this.type === 'error' && \"warning-filled\"\n                }\n              ></stzh-icon>\n            </div>\n            <div class=\"stzh-message__text-wrapper\">\n              <div class=\"stzh-message__label\">\n                {this.label ? this.label : <slot name=\"label\"></slot>}\n              </div>\n              <div class=\"stzh-message__description\">\n                {this.description ? this.description : <slot></slot>}\n              </div>\n              <div class=\"stzh-message__link\">\n                <slot name=\"link\"></slot>\n              </div>\n            </div>\n          </div>\n\n          {!this.hideClose &&\n            <stzh-button\n              class=\"stzh-message__close\"\n              onClick={this.onCloseButtonClick}\n              a11yLabel={this.localization.close}\n              variant=\"tertiary\"\n              size=\"small\"\n              iconOnly={true}\n              icon=\"close-big\"\n            ></stzh-button>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-55cdd473.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhPagetitleCss","StzhPagetitle","this","isDisturberOpen","update","disturberElement","isMedium","media","matches","disturberHeight","_a","offsetHeight","hasDisturber","isStuck","document","documentElement","style","setProperty","init","heading","element","querySelector","disturber","leads","querySelectorAll","show","readspeakerButton","tag","setPropsIfNull","curve","initialOpenAnimation","mikro","type","size","nonInteractive","variant","noPaddingLeft","noPaddingRight","sizeMedium","buttonAccesskey","forEach","lead","handleResize","debounceResize","window","cancelAnimationFrame","requestAnimationFrame","handleStzhOpen","event","detail","component","handleStzhClose","componentDidRender","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","imageSlotUsed","hasSlot","leadSlotUsed","tagSlotUsed","readspeakerSlotUsed","classes","background","h","Host","class","name","dateline","ratio","ratioSmall","ratioMedium","ref","el"],"sources":["src/components/stzh-pagetitle/stzh-pagetitle.scss?tag=stzh-pagetitle&encapsulation=scoped","src/components/stzh-pagetitle/stzh-pagetitle.tsx"],"sourcesContent":["/**\n * @prop --background-color: Background color\n * @prop --image-background-color: Background color of image\n *\n * @prop --stzh-pagetitle-disturber-height: Global: Disturber height\n * @prop --stzh-pagetitle-disturber-stuck-height: Global: Disturber height when sticky (below medium breakpoint)\n * @prop --stzh-pagetitle-disturber-is-stuck: **Global**: Whether disturber is currently sticky (readonly variable on `<html>`)\n * @prop --stzh-pagetitle-disturber-is-not-stuck: **Global**: Whether disturber is currently not sticky (readonly variable on `<html>`)\n */\n\n:host {\n  --background-color: #{$pagetitleBackgroundColor};\n  --image-background-color: #{$ratioBackgroundColor};\n\n  ::slotted([slot=\"image\"]) {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  &[background=\"default\"] {\n    --stzh-readspeaker-background-color: var(--background-color);\n    --stzh-readspeaker-audio-track-progress-background-color: #{$colorWhite};\n  }\n\n  &[background=\"transparent\"] {\n    --background-color: transparent;\n  }\n}\n\n.stzh-pagetitle {\n  background-color: var(--background-color);\n\n  &__container {\n    @include container;\n  }\n\n  &__wrapper {\n    position: relative;\n    display: grid;\n  }\n\n  &__text {\n    @include spaceCurve('padding-top', 'big');\n    @include spaceCurve('padding-bottom', 'big');\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &__image-wrapper {\n    position: relative;\n  }\n\n  &__ratio {\n    --background-color: var(--image-background-color);\n  }\n\n  &__image-inner-wrapper {\n    background-color: var(--image-background-color);\n    position: absolute;\n    inset: 0;\n    height: 100%;\n    margin-left: calc(#{$containerMargin} / -1);\n    margin-right: calc(#{$containerMargin} / -1);\n\n    @include mq($from: small) {\n      margin-left: calc(#{$containerMarginSmall} / -1);\n      margin-right: calc(#{$containerMarginSmall} / -1);\n    }\n\n    @include mq($from: medium) {\n      margin-left: 0;\n      margin-right: 0;\n      width: calc(100% + #{$containerMarginMedium});\n    }\n\n    @include mq($from: large) {\n      width: calc(100% + #{$containerMarginLarge});\n    }\n\n    @include mq($from: ultra) {\n      width: calc(100% + ((#{map-get($breakpoints, 'ultra')} - #{$containerMaxWidth}) / 2));\n    }\n  }\n\n  &__meta {\n    display: flex;\n    flex-direction: column-reverse;\n    row-gap: space('xsmall');\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  &__tag {\n    &:not(:empty) {\n      margin-right: auto;\n    }\n  }\n\n  &__readspeaker {\n    @include mq($from: small, $to: medium) {\n      --stzh-readspeaker-dropdown-position: relative;\n      --stzh-readspeaker-dropdown-top: auto;\n    }\n  }\n\n  &__dateline {\n    @include fontSize('milli');\n    @include spaceCurve('margin-top', 'regular');\n    color: $colorPrimary70;\n    margin-bottom: space('xsmall');\n  }\n\n  &__lead {\n    --stzh-base-lead-color: #{$headingColor};\n  }\n\n  &__heading:not(:empty) + &__lead:not(:empty) {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  &__disturber {\n    z-index: $zIndexSticky;\n    position: fixed;\n    left: 0;\n    right: 0;\n    bottom: 0;\n\n    @include mq($from: medium) {\n      z-index: initial;\n      position: absolute;\n      width: calc(((100% - 7 * #{$gridGutterMedium}) / 8 * 3) + 2 * #{$gridGutterMedium});\n      left: auto;\n      bottom: calc((#{spaceCurveValue('huge', 'medium')} - #{spaceCurveValue('regular', 'medium')}) / -1);\n    }\n\n    @include mq($from: large) {\n      width: calc(((100% - 11 * #{$gridGutterLarge}) / 12 * 4) + 3 * #{$gridGutterLarge});\n      bottom: calc(#{spaceCurveValue('huge', 'large')} / -1);\n    }\n\n    @include mq($from: ultra) {\n      width: calc(((100% - 11 * #{$gridGutterUltra}) / 12 * 4) + 3 * #{$gridGutterUltra});\n    }\n  }\n\n  /* Has no image variant */\n\n  &--has-no-image &__ratio {\n    display: none;\n  }\n\n  &--has-no-image &__text {\n    @include grid;\n  }\n\n  &--has-no-image &__meta,\n  &--has-no-image &__dateline,\n  &--has-no-image &__heading,\n  &--has-no-image &__lead {\n    grid-column: 1 / span 4;\n  }\n\n  &--has-no-image &__meta,\n  &--has-no-image &__dateline,\n  &--has-no-image &__heading {\n    @include mq($from: medium) {\n      grid-column: 1 / span 8;\n    }\n  }\n\n  &--has-no-image &__lead {\n    @include mq($from: medium) {\n      grid-column: 1 / span 6;\n    }\n\n    @include mq($from: large) {\n      grid-column: 1 / span 7;\n    }\n  }\n\n  /* Has image variant */\n\n  &--has-image &__wrapper {\n    @include mq($from: medium) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      gap: space('xxlarge');\n    }\n  }\n\n  /* Has meta */\n\n  &--has-meta &__text {\n    @include spaceCurve('padding-top', 'regular');\n  }\n\n  /* Has tag */\n\n  &--has-tag &__readspeaker {\n    @include mq($from: medium) {\n      --stzh-readspeaker-dropdown-left: auto;\n      --stzh-readspeaker-dropdown-right: 0px;\n\n      --stzh-readspeaker-dropdown-settings-left: auto;\n      --stzh-readspeaker-dropdown-settings-right: 0px;\n    }\n  }\n\n  /* Default background */\n\n  &--background-default &__text {\n    --stzh-selection-background-color: #{$colorWhite};\n  }\n\n  /* Transparent background */\n\n  &--background-transparent &__text {\n    @include spaceCurve('padding-bottom', 'large');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Listen,\n} from \"@stencil/core\";\n\nimport {\n  StzhDisturberOpenEvent,\n  StzhDisturberCloseEvent\n} from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\n\n/**\n * @slot heading - Slot for `stzh-heading` element\n * @slot image - Slot for `stzh-figure` or `img` element\n * @slot lead - Slot for `stzh-text` element\n * @slot tag - Slot for `stzh-tag` element\n * @slot readspeaker - Slot for `stzh-readspeaker` element\n */\n@Component({\n  tag: \"stzh-pagetitle\",\n  styleUrl: \"stzh-pagetitle.scss\",\n  scoped: true\n})\nexport class StzhPagetitle {\n  @Element() element: HTMLStzhPagetitleElement;\n\n  /** Background color */\n  @Prop({ reflect: true }) background: \"default\" | \"transparent\" = \"default\";\n\n  /** Dateline */\n  @Prop() dateline: string;\n\n  @Listen(\"resize\", { target: \"window\" })\n  handleResize() {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.update);\n  }\n\n  @Listen(\"stzhOpen\")\n  handleStzhOpen(event: CustomEvent<StzhDisturberOpenEvent>) {\n    if (event.detail.component === \"stzh-disturber\") {\n      this.isDisturberOpen = true;\n      requestAnimationFrame(() => {\n        requestAnimationFrame(this.update);\n      });\n    }\n  }\n\n  @Listen(\"stzhClose\")\n  handleStzhClose(event: CustomEvent<StzhDisturberCloseEvent>) {\n    if (event.detail.component === \"stzh-disturber\") {\n      this.isDisturberOpen = false;\n      requestAnimationFrame(() => {\n        requestAnimationFrame(this.update);\n      });\n    }\n  }\n\n  private observer: MutationObserver;\n  private debounceResize: number;\n  private disturberElement: HTMLDivElement;\n  private isDisturberOpen: boolean = false;\n\n  private update = () => {\n    if (!this.disturberElement) {\n      return;\n    }\n\n    const isMedium = media(\"medium\").matches;\n    const disturberHeight = this.disturberElement?.offsetHeight || 0;\n    const hasDisturber = disturberHeight && this.isDisturberOpen;\n    const isStuck = hasDisturber && !isMedium;\n\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-height\", hasDisturber ? `${disturberHeight}px` : \"0px\");\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-stuck-height\", isStuck ? `${disturberHeight}px` : \"0px\");\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-is-stuck\", isStuck ? \"1\" : \"0\");\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-is-not-stuck\", isStuck ? \"0\" : \"1\");\n\n    // document.documentElement.classList.toggle(\"stzh-pagetitle-disturber-is-stuck\", isStuck);\n  }\n\n  private init = () => {\n    const heading = this.element.querySelector('stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading');\n    const disturber = this.element.querySelector('stzh-disturber[slot=\"disturber\"], [slot=\"disturber\"] stzh-disturber');\n    const leads = this.element.querySelectorAll('stzh-text[slot=\"lead\"], [slot=\"lead\"] stzh-text');\n    const show = this.element.querySelector('stzh-show[slot=\"disturber\"], [slot=\"disturber\"] stzh-show');\n    const readspeakerButton = this.element.querySelector('[slot=\"readspeaker\"] stzh-button');\n    const tag = this.element.querySelector('stzh-tag[slot=\"tag\"], [slot=\"tag\"] stzh-tag');\n\n    if (heading) {\n      setPropsIfNull(heading, {\n        curve: \"hero\"\n      } as HTMLStzhHeadingElement);\n    }\n\n    if (disturber) {\n      setPropsIfNull(disturber, {\n        initialOpenAnimation: true\n      } as HTMLStzhDisturberElement);\n    }\n\n    if (show) {\n      setPropsIfNull(show, {\n        mikro: true\n      } as HTMLStzhShowElement);\n    }\n\n    if (tag) {\n      setPropsIfNull(tag, {\n        type: \"secondary\",\n        size: \"large\",\n        nonInteractive: true\n      } as HTMLStzhTagElement);\n    }\n\n    if (readspeakerButton) {\n      setPropsIfNull(readspeakerButton, {\n        variant: \"tertiary-plain\",\n        noPaddingLeft: true,\n        noPaddingRight: true,\n        size: \"small\",\n        sizeMedium: \"tiny\",\n        buttonAccesskey: \"L\"\n      } as HTMLStzhButtonElement);\n    }\n\n    leads.forEach((lead) => {\n      setPropsIfNull(lead, {\n        lead: true\n      } as HTMLStzhTextElement)\n    });\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      requestAnimationFrame(this.update);\n    });\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n  }\n\n  render() {\n    const imageSlotUsed = hasSlot(this.element, 'image');\n    const leadSlotUsed = hasSlot(this.element, 'lead');\n    const tagSlotUsed = hasSlot(this.element, 'tag');\n    const readspeakerSlotUsed = hasSlot(this.element, 'readspeaker');\n\n    const classes = {\n      \"stzh-pagetitle\": true,\n      \"stzh-pagetitle--has-image\": imageSlotUsed,\n      \"stzh-pagetitle--has-no-image\": !imageSlotUsed,\n      \"stzh-pagetitle--has-lead\": leadSlotUsed,\n      \"stzh-pagetitle--has-tag\": tagSlotUsed,\n      \"stzh-pagetitle--has-meta\": tagSlotUsed || readspeakerSlotUsed,\n      [`stzh-pagetitle--background-${this.background}`]: !!this.background,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-pagetitle__container\">\n            <div class=\"stzh-pagetitle__wrapper\">\n              <div class=\"stzh-pagetitle__text\">\n\n                <div class=\"stzh-pagetitle__meta\">\n                  <div class=\"stzh-pagetitle__tag\">\n                    <slot name=\"tag\"></slot>\n                  </div>\n\n                  <div class=\"stzh-pagetitle__readspeaker\">\n                    <slot name=\"readspeaker\"></slot>\n                  </div>\n                </div>\n\n                {this.dateline &&\n                  <div class=\"stzh-pagetitle__dateline\">\n                    {this.dateline}\n                  </div>\n                }\n\n                <div class=\"stzh-pagetitle__heading\">\n                  <slot name=\"heading\"></slot>\n                </div>\n\n                <div class=\"stzh-pagetitle__lead\">\n                  <slot name=\"lead\"></slot>\n                </div>\n\n              </div>\n\n              <div class=\"stzh-pagetitle__image-wrapper\">\n                <stzh-ratio\n                  ratio={\"16:9\"}\n                  ratioSmall={\"3:2\"}\n                  ratioMedium={\"16:9\"}\n                  class=\"stzh-pagetitle__ratio\"\n                ></stzh-ratio>\n                <div class=\"stzh-pagetitle__image-inner-wrapper\">\n                  <slot name=\"image\"></slot>\n                </div>\n              </div>\n\n              <div\n                class=\"stzh-pagetitle__disturber\"\n                ref={(el) => (this.disturberElement = el as HTMLDivElement)}\n              >\n                <slot name=\"disturber\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-5f5d14cb.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as e,a as n,g as s}from"./p-c7bfac7a.js";const i=".sc-stzh-eventinfo-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-eventinfo-h{display:none}.sc-stzh-eventinfo-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-eventinfo-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-eventinfo-h *.sc-stzh-eventinfo,.sc-stzh-eventinfo-h *.sc-stzh-eventinfo::before,.sc-stzh-eventinfo-h *.sc-stzh-eventinfo::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-eventinfo-h .has-focus.sc-stzh-eventinfo{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-eventinfo-h .stzh-fylingfocus-focused.sc-stzh-eventinfo{outline-style:none !important}.sc-stzh-eventinfo-h .stzh-fylingfocus-focused.sc-stzh-eventinfo::-moz-focus-inner{border:0 !important}.stzh-eventinfo.sc-stzh-eventinfo{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);color:var(--stzh-color-grey80)}@media screen and (min-width: 900px){.stzh-eventinfo.sc-stzh-eventinfo{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-eventinfo__month-list.sc-stzh-eventinfo,.stzh-eventinfo__event-list.sc-stzh-eventinfo{list-style:none;margin:0;padding:0}.stzh-eventinfo__month-list.sc-stzh-eventinfo{display:grid;-moz-column-gap:var(--stzh-space-small);column-gap:var(--stzh-space-small)}@media screen and (min-width: 600px){.stzh-eventinfo__month-list.sc-stzh-eventinfo{grid-template-columns:minmax(0, 1fr) auto}}@media screen and (min-width: 900px){.stzh-eventinfo__month-list.sc-stzh-eventinfo{grid-template-columns:minmax(calc(9.375rem - var(--stzh-space-small)), auto) minmax(calc(12.5rem - var(--stzh-space-small)), auto) minmax(0, 1fr) auto}}.stzh-eventinfo__month-list-item.sc-stzh-eventinfo:not(:first-child) .stzh-eventinfo__heading.sc-stzh-eventinfo{margin-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-eventinfo__month-list-item.sc-stzh-eventinfo:not(:first-child) .stzh-eventinfo__heading.sc-stzh-eventinfo{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-eventinfo__month-list-item.sc-stzh-eventinfo:not(:first-child) .stzh-eventinfo__heading.sc-stzh-eventinfo{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-eventinfo__month-list-item.sc-stzh-eventinfo:not(:first-child) .stzh-eventinfo__heading.sc-stzh-eventinfo{margin-top:var(--stzh-space-xxlarge)}}.stzh-eventinfo__month-list-item.sc-stzh-eventinfo{display:contents}.stzh-eventinfo__month-list-item.sc-stzh-eventinfo:last-child .stzh-eventinfo__event-list-item.sc-stzh-eventinfo:last-child .stzh-eventinfo__event-weekday.sc-stzh-eventinfo,.stzh-eventinfo__month-list-item.sc-stzh-eventinfo:last-child .stzh-eventinfo__event-list-item.sc-stzh-eventinfo:last-child .stzh-eventinfo__event-date.sc-stzh-eventinfo,.stzh-eventinfo__month-list-item.sc-stzh-eventinfo:last-child .stzh-eventinfo__event-list-item.sc-stzh-eventinfo:last-child .stzh-eventinfo__event-time.sc-stzh-eventinfo,.stzh-eventinfo__month-list-item.sc-stzh-eventinfo:last-child .stzh-eventinfo__event-list-item.sc-stzh-eventinfo:last-child .stzh-eventinfo__event-link.sc-stzh-eventinfo,.stzh-eventinfo__month-list-item.sc-stzh-eventinfo:last-child .stzh-eventinfo__event-list-item.sc-stzh-eventinfo:last-child .stzh-eventinfo__event-datetime-wrapper.sc-stzh-eventinfo{margin-bottom:0px}.stzh-eventinfo__heading.sc-stzh-eventinfo{margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-eventinfo__heading.sc-stzh-eventinfo{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-eventinfo__heading.sc-stzh-eventinfo{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 600px){.stzh-eventinfo__heading.sc-stzh-eventinfo{grid-column:1/3}}@media screen and (min-width: 900px){.stzh-eventinfo__heading.sc-stzh-eventinfo{grid-column:1/5}}.stzh-eventinfo__event-list.sc-stzh-eventinfo{display:contents}.stzh-eventinfo__event-list-item.sc-stzh-eventinfo{display:contents}@media screen and (min-width: 900px){.stzh-eventinfo__event-weekday.sc-stzh-eventinfo,.stzh-eventinfo__event-date.sc-stzh-eventinfo,.stzh-eventinfo__event-time.sc-stzh-eventinfo{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-eventinfo__event-weekday.sc-stzh-eventinfo,.stzh-eventinfo__event-date.sc-stzh-eventinfo,.stzh-eventinfo__event-time.sc-stzh-eventinfo{margin-bottom:var(--stzh-space-medium)}}.stzh-eventinfo__event-link.sc-stzh-eventinfo{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-eventinfo__event-link.sc-stzh-eventinfo{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-eventinfo__event-link.sc-stzh-eventinfo{margin-bottom:var(--stzh-space-medium)}}.stzh-eventinfo__event-datetime-wrapper.sc-stzh-eventinfo{display:grid}@media screen and (min-width: 600px) and (max-width: 899px){.stzh-eventinfo__event-datetime-wrapper.sc-stzh-eventinfo{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 900px){.stzh-eventinfo__event-datetime-wrapper.sc-stzh-eventinfo{display:contents}}.stzh-eventinfo__event-date-wrapper.sc-stzh-eventinfo{display:flex;gap:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-eventinfo__event-date-wrapper.sc-stzh-eventinfo{display:contents}}@media screen and (min-width: 600px) and (max-width: 899px){.stzh-eventinfo__event-weekday.sc-stzh-eventinfo{min-width:5.625rem}}";const o=class{constructor(e){t(this,e);this._items=[];this._itemsGroupedByMonth=[];this.localization=undefined;this.monthHeadingLevel="4";this.items=undefined;this.dateAdapter=undefined}itemsWatcher(){if(!this.dateAdapter){return}const t=typeof this.items==="string"?JSON.parse(this.items):this.items;if(!t){return}this._items=t.map((t=>Object.assign(Object.assign({},t),{start:new Date(t.start),end:new Date(t.end)}))).sort(((t,e)=>t.start.getTime()-e.end.getTime()));const e=this._items.reduce(((t,e)=>{const n=e.start.getMonth()+e.start.getFullYear();if(!t[n]){t[n]={name:this.localization.$globals.monthNames[e.start.getMonth()]+" "+e.start.getFullYear(),events:[]}}t[n].events.push(e);return t}),{});this._itemsGroupedByMonth=Object.values(e)}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"eventinfo")}if(!this.dateAdapter){this.dateAdapter=window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formats,this.localization.$globals)}this.itemsWatcher()}render(){const t={"stzh-eventinfo":true};return e(n,null,e("div",{class:t},this._itemsGroupedByMonth.length>0&&e("ul",{class:"stzh-eventinfo__month-list"},this._itemsGroupedByMonth.map((t=>e("li",{class:"stzh-eventinfo__month-list-item"},e("stzh-heading",{class:"stzh-eventinfo__heading",level:this.monthHeadingLevel},t.name),t.events.length>0&&e("ul",{class:"stzh-eventinfo__event-list"},t.events.map((t=>e("li",{class:"stzh-eventinfo__event-list-item"},e("span",{class:"stzh-eventinfo__event-datetime-wrapper"},e("span",{class:"stzh-eventinfo__event-date-wrapper"},e("span",{class:"stzh-eventinfo__event-weekday"},this.localization.$globals.dayNames[t.start.getDay()]),e("span",{class:"stzh-eventinfo__event-date"},this.dateAdapter.format(t.start,"date"))),e("span",{class:"stzh-eventinfo__event-time"},this.dateAdapter.formatSpan(t.start,t.end,"time"))),e("span",{class:"stzh-eventinfo__event-link"},t.calendarUrl&&e("stzh-link",{size:"small",href:t.calendarUrl,label:t.calendarLabel||this.localization.addToCalendar}))))))))))))}get element(){return s(this)}static get watchers(){return{items:["itemsWatcher"],dateAdapter:["itemsWatcher"]}}};o.style=i;export{o as stzh_eventinfo};
-//# sourceMappingURL=p-5f5d14cb.entry.js.map

package/dist/stzh-components/p-5f5d14cb.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhEventinfoCss","StzhEventinfo","this","_items","_itemsGroupedByMonth","itemsWatcher","dateAdapter","data","items","JSON","parse","map","event","Object","assign","start","Date","end","sort","a","b","getTime","groupedItems","reduce","acc","monthYearKey","getMonth","getFullYear","name","localization","$globals","monthNames","events","push","values","componentWillLoad","window","stzhComponents","utils","fetchTranslations","element","createFormatParseAdapter","$formats","render","classes","h","Host","class","length","level","monthHeadingLevel","dayNames","getDay","format","formatSpan","calendarUrl","size","href","label","calendarLabel","addToCalendar"],"sources":["src/components/stzh-eventinfo/stzh-eventinfo.scss?tag=stzh-eventinfo&encapsulation=scoped","src/components/stzh-eventinfo/stzh-eventinfo.tsx"],"sourcesContent":[":host {\n\n}\n\n.stzh-eventinfo {\n  @include fontCurve('p1');\n  color: $colorGrey80;\n\n  &__month-list,\n  &__event-list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  &__month-list {\n    display: grid;\n    column-gap: space('small');\n\n    @include mq($from: small) {\n      grid-template-columns: minmax(0, 1fr) auto;\n    }\n\n    @include mq($from: medium) {\n      grid-template-columns: minmax(calc(150px - #{space('small')}), auto) minmax(calc(200px - #{space('small')}), auto) minmax(0, 1fr) auto;\n    }\n  }\n\n  &__month-list-item:not(:first-child) &__heading {\n    @include spaceCurve('margin-top', 'regular');\n  }\n\n  &__month-list-item {\n    display: contents;\n  }\n\n  &__month-list-item:last-child &__event-list-item:last-child &__event-weekday,\n  &__month-list-item:last-child &__event-list-item:last-child &__event-date,\n  &__month-list-item:last-child &__event-list-item:last-child &__event-time,\n  &__month-list-item:last-child &__event-list-item:last-child &__event-link,\n  &__month-list-item:last-child &__event-list-item:last-child &__event-datetime-wrapper {\n    margin-bottom: 0px;\n  }\n\n  &__heading {\n    @include spaceCurve('margin-bottom', 'tiny');\n\n    @include mq($from: small) {\n      grid-column: 1 / 3;\n    }\n\n    @include mq($from: medium) {\n      grid-column: 1 / 5;\n    }\n  }\n\n  &__event-list {\n    display: contents;\n  }\n\n  &__event-list-item {\n    display: contents;\n  }\n\n  &__event-weekday,\n  &__event-date,\n  &__event-time {\n    @include mq($from: medium) {\n      margin-bottom: space('small');\n    }\n\n    @include mq($from: large) {\n      margin-bottom: space('medium');\n    }\n  }\n\n  &__event-link {\n    margin-bottom: space('medium');\n\n    @include mq($from: medium) {\n      margin-bottom: space('small');\n    }\n\n    @include mq($from: large) {\n      margin-bottom: space('medium');\n    }\n  }\n\n  &__event-datetime-wrapper {\n    display: grid;\n\n    @include mq($from: small, $to: medium) {\n      margin-bottom: space('medium');\n    }\n\n    @include mq($from: medium) {\n      display: contents;\n    }\n  }\n\n  &__event-date-wrapper {\n    display: flex;\n    gap: space('xsmall');\n\n    @include mq($from: medium) {\n      display: contents;\n    }\n  }\n\n  &__event-weekday {\n    @include mq($from: small, $to: medium) {\n      min-width: 90px;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  StzhEventinfoItemInput,\n  StzhEventinfoItem,\n  StzhEventinfoMonth,\n  StzhLocaleAdapter\n} from \"../../index\";\n\nimport { StzhEventinfoLocalizedText } from './stzh-eventinfo.localization';\n\n/**\n */\n@Component({\n  tag: \"stzh-eventinfo\",\n  styleUrl: \"stzh-eventinfo.scss\",\n  scoped: true\n})\nexport class StzhEventinfo {\n  /** Translation strings */\n  @Prop() localization: StzhEventinfoLocalizedText;\n\n  /** Month heading level */\n  @Prop() monthHeadingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"4\";\n\n  /** Event dates */\n  @Prop() items: StzhEventinfoItemInput[] | string;\n  private _items: StzhEventinfoItem[] = [];\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  @Element() element: HTMLStzhEventinfoElement;\n\n  private _itemsGroupedByMonth: StzhEventinfoMonth[] = [];\n\n  @Watch(\"items\")\n  @Watch(\"dateAdapter\")\n  itemsWatcher() {\n    if (!this.dateAdapter) {\n      return;\n    }\n\n    const data: StzhEventinfoItemInput[] = typeof this.items === \"string\"\n      ? JSON.parse(this.items)\n      : this.items;\n\n    if (!data) {\n      return;\n    }\n\n    // convert start and end field to date\n    this._items = data\n      .map(event => ({\n        ...event,\n        start: new Date(event.start),\n        end: new Date(event.end),\n      }))\n      .sort((a, b) => a.start.getTime() - b.end.getTime());\n\n    // grouping events by month and year\n    const groupedItems: { [monthKey: string]: StzhEventinfoMonth } = this._items.reduce((acc, event) => {\n      const monthYearKey = event.start.getMonth() + event.start.getFullYear();\n      if (!acc[monthYearKey]) {\n        acc[monthYearKey] = {\n          name: this.localization.$globals.monthNames[event.start.getMonth()]\n            + \" \" + event.start.getFullYear(),\n          events: []\n        } as StzhEventinfoMonth;\n      }\n\n      acc[monthYearKey].events.push(event);\n      return acc;\n    }, {});\n\n    this._itemsGroupedByMonth = Object.values(groupedItems);\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"eventinfo\");\n    }\n\n    if (!this.dateAdapter) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals\n      );\n    }\n\n    this.itemsWatcher();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-eventinfo\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this._itemsGroupedByMonth.length > 0 &&\n            <ul class=\"stzh-eventinfo__month-list\">\n              {this._itemsGroupedByMonth.map((groupedItems) =>\n                <li class=\"stzh-eventinfo__month-list-item\">\n                  <stzh-heading\n                    class=\"stzh-eventinfo__heading\"\n                    level={this.monthHeadingLevel}\n                  >\n                    {groupedItems.name}\n                  </stzh-heading>\n\n                  {groupedItems.events.length > 0 &&\n                    <ul class=\"stzh-eventinfo__event-list\">\n                      {groupedItems.events.map((event) =>\n                        <li class=\"stzh-eventinfo__event-list-item\">\n                          <span class=\"stzh-eventinfo__event-datetime-wrapper\">\n                            <span class=\"stzh-eventinfo__event-date-wrapper\">\n                              <span class=\"stzh-eventinfo__event-weekday\">\n                                {this.localization.$globals.dayNames[event.start.getDay()]}\n                              </span>\n                              <span class=\"stzh-eventinfo__event-date\">\n                                {this.dateAdapter.format(event.start, \"date\")}\n                              </span>\n                            </span>\n                            <span class=\"stzh-eventinfo__event-time\">\n                              {this.dateAdapter.formatSpan(event.start, event.end, \"time\")}\n                            </span>\n                          </span>\n                          <span class=\"stzh-eventinfo__event-link\">\n                            {event.calendarUrl &&\n                              <stzh-link\n                                size=\"small\"\n                                href={event.calendarUrl}\n                                label={event.calendarLabel || this.localization.addToCalendar}\n                              ></stzh-link>\n                            }\n                          </span>\n                        </li>\n                      )}\n                  </ul>\n                  }\n                </li>\n              )}\n            </ul>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAmB,kpM,MCyBZC,EAAa,M,yBAShBC,KAAAC,OAA8B,GAW9BD,KAAAE,qBAA6C,G,mDAfF,I,gDAmBnD,YAAAC,GACE,IAAKH,KAAKI,YAAa,CACrB,M,CAGF,MAAMC,SAAwCL,KAAKM,QAAU,SACzDC,KAAKC,MAAMR,KAAKM,OAChBN,KAAKM,MAET,IAAKD,EAAM,CACT,M,CAIFL,KAAKC,OAASI,EACXI,KAAIC,GAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACLF,GAAK,CACRG,MAAO,IAAIC,KAAKJ,EAAMG,OACtBE,IAAK,IAAID,KAAKJ,EAAMK,SAErBC,MAAK,CAACC,EAAGC,IAAMD,EAAEJ,MAAMM,UAAYD,EAAEH,IAAII,YAG5C,MAAMC,EAA2DpB,KAAKC,OAAOoB,QAAO,CAACC,EAAKZ,KACxF,MAAMa,EAAeb,EAAMG,MAAMW,WAAad,EAAMG,MAAMY,cAC1D,IAAKH,EAAIC,GAAe,CACtBD,EAAIC,GAAgB,CAClBG,KAAM1B,KAAK2B,aAAaC,SAASC,WAAWnB,EAAMG,MAAMW,YACpD,IAAMd,EAAMG,MAAMY,cACtBK,OAAQ,G,CAIZR,EAAIC,GAAcO,OAAOC,KAAKrB,GAC9B,OAAOY,CAAG,GACT,IAEHtB,KAAKE,qBAAuBS,OAAOqB,OAAOZ,E,CAG5C,uBAAMa,GACJ,IAAKjC,KAAK2B,aAAc,CACtB3B,KAAK2B,mBAAqBO,OAAOC,eAAeC,MAAMC,kBAAkBrC,KAAKsC,QAAS,Y,CAGxF,IAAKtC,KAAKI,YAAa,CACrBJ,KAAKI,YAAc8B,OAAOC,eAAeC,MAAMG,yBAC7CvC,KAAK2B,aAAaa,SAClBxC,KAAK2B,aAAaC,S,CAItB5B,KAAKG,c,CAGP,MAAAsC,GACE,MAAMC,EAAU,CACd,iBAAkB,MAGpB,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,GACT1C,KAAKE,qBAAqB4C,OAAS,GAClCH,EAAA,MAAIE,MAAM,8BACP7C,KAAKE,qBAAqBO,KAAKW,GAC9BuB,EAAA,MAAIE,MAAM,mCACRF,EAAA,gBACEE,MAAM,0BACNE,MAAO/C,KAAKgD,mBAEX5B,EAAaM,MAGfN,EAAaU,OAAOgB,OAAS,GAC5BH,EAAA,MAAIE,MAAM,8BACPzB,EAAaU,OAAOrB,KAAKC,GACxBiC,EAAA,MAAIE,MAAM,mCACRF,EAAA,QAAME,MAAM,0CACVF,EAAA,QAAME,MAAM,sCACVF,EAAA,QAAME,MAAM,iCACT7C,KAAK2B,aAAaC,SAASqB,SAASvC,EAAMG,MAAMqC,WAEnDP,EAAA,QAAME,MAAM,8BACT7C,KAAKI,YAAY+C,OAAOzC,EAAMG,MAAO,UAG1C8B,EAAA,QAAME,MAAM,8BACT7C,KAAKI,YAAYgD,WAAW1C,EAAMG,MAAOH,EAAMK,IAAK,UAGzD4B,EAAA,QAAME,MAAM,8BACTnC,EAAM2C,aACLV,EAAA,aACEW,KAAK,QACLC,KAAM7C,EAAM2C,YACZG,MAAO9C,EAAM+C,eAAiBzD,KAAK2B,aAAa+B,0B"}