@oiz/stzh-components 2.7.0 → 2.8.0-alpha

package/dist/esm-es5/stzh-datepicker_3.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stzhDatepickerCss","StzhDatepicker","this","onRootFocus","_this","input","setFocus","onInputChange","parsedDate","dateAdapter","parse","value","isoDate","printISODate","calendar","stzhChange","emit","component","valueAsDate","onCalendarChange","event","detail","format","popover","hide","class_1","prototype","createDateFormatters","localization","dateFormatLong","Intl","DateTimeFormat","$locale","day","month","year","valueWatcher","newValue","date","parseISODate","updateButtonAccessibleLabel","setDate","getPopover","buttonLabel","concat","selectedDateMessage","err","connectedCallback","componentWillLoad","_a","fetchTranslations","element","_b","sent","createGlobalAdapter","$formats","$globals","componentDidLoad","render","classes","inline","h","Host","tabindex","disabled","onFocus","class","type","name","Fragment","ref","el","isDateDisabled","calendarIsDateDisabled","min","calendarMin","max","calendarMax","onStzhChange","label","noAutocomplete","readonly","description","descriptionLong","error","invalid","required","showMarker","size","slot","placement","variant","icon","a11yLabel","stzhRadioCss","radioCounter","StzhRadio","focusedByInput","onInput","checked","originalEvent","focusEvent","FocusEvent","view","window","bubbles","cancelable","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","class_2","focus","errorWatcher","_error","JSON","e","length","inputId","descriptionUsed","hasSlot","descriptionLongUsed","errorUsed","id","a11yDescribedby","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","StzhInputDescription","classPrefix","moreInfoButtonLabel","stzhRadiogroupCss","SELECTOR_RADIO","radiogroupCounter","StzhRadiogroup","_preventUpdateProperties","init","radios","Array","from","querySelectorAll","updateRadiosProperty","radiogroupId","watchValue","watchName","watchDisabled","watchInvalid","watchRequired","class_3","updateCheckedRadioByValue","preventUpdatePropertiesWatcher","onChange","prop","forEach","radio","indexOf","camelCase","checkedRadio","find","uncheckRadios","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  width: 100%;\n}\n\n.stzh-datepicker {\n  &__popover {\n    --padding: #{space('medium')};\n    --width: auto;\n  }\n\n  &__actions {\n    display: flex;\n    justify-content: flex-end;\n\n    &:not(:empty) {\n      margin-top: space('xsmall');\n    }\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} from \"@stencil/core\";\n\nimport {\n  StzhCalendarChangeEvent,\n  StzhDatepickerChangeEvent\n} from \"../../index\";\n\nimport { StzhCalendarDateDisabledPredicate } from \"../../index\";\n\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { printISODate, parseISODate } from \"../../utils/date-utils\"\nimport { StzhLocaleAdapter, createGlobalAdapter } from \"../../utils/date-adapter\"\n\nimport { StzhDatepickerLocalizedText } from \"./stzh-datepicker.localization\";\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\n  /** Label for input field and popover */\n  @Prop() label: string = \"\";\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  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Show calendar inline */\n  @Prop() inline: boolean = false;\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  /**  Translation strings. */\n  @Prop() localization: StzhDatepickerLocalizedText;\n\n  @State() buttonLabel: string;\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    const date = parseISODate(newValue);\n\n    if (this.calendar) {\n      this.calendar.value = newValue;\n    }\n\n    if (this.input) {\n      this.input.value = this.dateAdapter.format(date, \"inputdate\");\n    }\n\n    this.updateButtonAccessibleLabel();\n  }\n\n  /** Set value by a JS Date object */\n  @Method()\n  async setDate(date: Date) {\n    this.value = printISODate(date);\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 onRootFocus = () => {\n    if (this.input) {\n      this.input.setFocus();\n    }\n  }\n\n  private onInputChange = () => {\n    const parsedDate = this.dateAdapter.parse(this.input.value, \"inputdate\")\n\n    if (this.input.value === \"\" || parsedDate) {\n      const isoDate = printISODate(parsedDate);\n\n      if (this.calendar) {\n        this.calendar.value = isoDate;\n      }\n\n      this.value = isoDate;\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    this.value = event.detail.value;\n    this.stzhChange.emit({\n      component: \"stzh-datepicker\",\n      value: this.value,\n      valueAsDate: event.detail.valueAsDate,\n    });\n\n    if (this.input) {\n      this.input.value = event.detail.valueAsDate\n        && this.dateAdapter.format(event.detail.valueAsDate, \"inputdate\");\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 = parseISODate(this.value);\n      this.buttonLabel = `${this.localization.buttonLabel}, ${this.localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)}`;\n    } catch (err) {\n      this.buttonLabel = this.localization.buttonLabel;\n    }\n  }\n\n  connectedCallback() {\n    this.createDateFormatters();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"datepicker\");\n    }\n\n    if (!this.dateAdapter) {\n      this.dateAdapter = createGlobalAdapter(\n        this.localization.$formats,\n        this.localization.$globals\n      );\n    }\n  }\n\n  componentDidLoad() {\n    this.valueWatcher(this.value);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-datepicker\": true,\n      \"stzh-datepicker--inline\": this.inline\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          />\n\n          {this.inline &&\n            <Fragment>\n              <stzh-calendar\n                ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\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              label={this.label}\n              ref={(el) => (this.input = el as HTMLStzhInputElement)}\n              noAutocomplete\n              onStzhChange={this.onInputChange}\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              showMarker={this.showMarker}\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                  variant=\"input\"\n                  icon-only\n                  icon=\"calendar\"\n                  disabled={this.disabled}\n                  a11yLabel={this.buttonLabel}\n                >\n                </stzh-button>\n                <div slot=\"content\">\n                  <stzh-calendar\n                    ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\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  ::slotted(stzh-text) {\n    --color: inherit;\n  }\n}\n\n.stzh-radio {\n\t@include input-description;\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    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-symbol {\n    @include fontSize('micro');\n  }\n\n  /* Hover / Focus / Checked */\n\n  &:hover &__label,\n  &__input:checked:hover ~ &__label,\n  &__input:checked:hover ~ &__mark &__check,\n  &__input:checked:focus ~ &__mark &__check {\n    color: $colorPrimaryHover;\n  }\n\n  &__input:checked ~ &__label {\n    color: $colorPrimary;\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__mark,\n  &__input:checked:hover ~ &__mark,\n  &__input:checked:focus ~ &__mark {\n    border-color: $colorPrimaryHover;\n  }\n\n  &__input:focus ~ &__mark,\n  &__input:checked ~ &__mark {\n    border-color: $colorPrimary;\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: $colorError;\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    border-color: $colorError;\n  }\n\n  /* Disabled */\n\n\t&--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label,\n  &--is-disabled &__input ~ &__mark &__check {\n    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    border-color: $formDisabledBorderColor;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n}\n","import {\n  Host,\n  Component,\n  Prop,\n  Event,\n  Element,\n  EventEmitter,\n  Method,\n  h,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhRadioChangeEvent,\n  StzhRadioFocusEvent,\n  StzhRadioBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { fetchTranslations, 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 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  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\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  /** 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  /** Focus input field */\n  @Method()\n  async setFocus() {\n    this.input.focus();\n  }\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  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n\n    this.invalid = this._error.length > 0;\n  }\n\n  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\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.setFocus();\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    if (!this.localization) {\n      this.localization = await 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;\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,\n      \"stzh-radio--is-disabled\": this.disabled\n    };\n\n    return (\n      <Host 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              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.showMarker &&\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            descriptionLongUsed={descriptionLongUsed}\n            moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n",":host([direction=\"vertical\"]) {\n  ::slotted(stzh-radio:not(:last-child)) {\n    margin-bottom: space('medium');\n  }\n}\n\n:host([direction=\"horizontal\"]) {\n  ::slotted(stzh-radio:not(:last-child)) {\n    margin-right: space('large');\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  }\n\n  &__legend {\n    @include font('heavy');\n    @include fontSize('nano');\n    padding: 0;\n    margin-bottom: space('xsmall');\n  }\n\n  &--hide-legend &__legend {\n    @include visuallyhidden;\n  }\n\n  &--direction-horizontal &__fields {\n    flex-direction: row;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Element,\n  Watch,\n  h,\n  Listen\n} from \"@stencil/core\";\n\nimport { StzhRadioChangeEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { fetchTranslations, 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 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  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Select a radio by value */\n  @Prop({ mutable: true }) value: 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  /** 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    this.invalid = this._error.length > 0;\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(\"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 init = () => {\n    // update radios\n    this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n    this.updateRadiosProperty(\"show-marker\", false);\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  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 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;\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,\n      \"stzh-radiogroup--hide-legend\": this.hideLegend,\n      [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction\n    };\n\n    return (\n      <fieldset class={classes}>\n        {this.legend &&\n          <legend class=\"stzh-radiogroup__legend\">\n            {this.legend}\n            {this.showMarker &&\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          descriptionLongUsed={descriptionLongUsed}\n          moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n        />\n      </fieldset>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["stzhDatepickerCss","StzhDatepicker","this","onRootFocus","_this","input","setFocus","onInputChange","parsedDate","dateAdapter","parse","value","isoDate","printISODate","calendar","stzhChange","emit","component","valueAsDate","onCalendarChange","event","detail","format","popover","hide","class_1","prototype","createDateFormatters","localization","dateFormatLong","Intl","DateTimeFormat","$locale","day","month","year","valueWatcher","newValue","date","parseISODate","updateButtonAccessibleLabel","setDate","getPopover","buttonLabel","concat","label","selectedDateMessage","err","connectedCallback","componentWillLoad","_a","fetchTranslations","element","_b","sent","createGlobalAdapter","$formats","$globals","componentDidLoad","render","classes","inline","h","Host","tabindex","disabled","onFocus","class","type","name","Fragment","ref","el","isDateDisabled","calendarIsDateDisabled","min","calendarMin","max","calendarMax","onStzhChange","labelHidden","noAutocomplete","readonly","description","descriptionLong","error","invalid","required","showMarker","size","slot","placement","variant","icon","a11yLabel","stzhRadioCss","radioCounter","StzhRadio","focusedByInput","onInput","checked","originalEvent","focusEvent","FocusEvent","view","window","bubbles","cancelable","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","class_2","focus","errorWatcher","_error","JSON","e","length","inputId","descriptionUsed","hasSlot","descriptionLongUsed","errorUsed","id","a11yDescribedby","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","StzhInputDescription","classPrefix","moreInfoButtonLabel","stzhRadiogroupCss","SELECTOR_RADIO","radiogroupCounter","StzhRadiogroup","_preventUpdateProperties","init","radios","Array","from","querySelectorAll","updateRadiosProperty","radiogroupId","watchValue","watchName","watchDisabled","watchInvalid","watchRequired","class_3","updateCheckedRadioByValue","preventUpdatePropertiesWatcher","onChange","prop","forEach","radio","indexOf","camelCase","checkedRadio","find","uncheckRadios","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  width: 100%;\n}\n\n.stzh-datepicker {\n  &__popover {\n    --padding: #{space('medium')};\n    --width: auto;\n  }\n\n  &__actions {\n    display: flex;\n    justify-content: flex-end;\n\n    &:not(:empty) {\n      margin-top: space('xsmall');\n    }\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} from \"@stencil/core\";\n\nimport {\n  StzhCalendarChangeEvent,\n  StzhDatepickerChangeEvent\n} from \"../../index\";\n\nimport { StzhCalendarDateDisabledPredicate } from \"../../index\";\n\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { printISODate, parseISODate } from \"../../utils/date-utils\"\nimport { StzhLocaleAdapter, createGlobalAdapter } from \"../../utils/date-adapter\"\n\nimport { StzhDatepickerLocalizedText } from \"./stzh-datepicker.localization\";\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\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  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Show calendar inline */\n  @Prop() inline: boolean = false;\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  /**  Translation strings. */\n  @Prop() localization: StzhDatepickerLocalizedText;\n\n  @State() buttonLabel: string;\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    const date = parseISODate(newValue);\n\n    if (this.calendar) {\n      this.calendar.value = newValue;\n    }\n\n    if (this.input) {\n      this.input.value = this.dateAdapter.format(date, \"inputdate\");\n    }\n\n    this.updateButtonAccessibleLabel();\n  }\n\n  /** Set value by a JS Date object */\n  @Method()\n  async setDate(date: Date) {\n    this.value = printISODate(date);\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 onRootFocus = () => {\n    if (this.input) {\n      this.input.setFocus();\n    }\n  }\n\n  private onInputChange = () => {\n    const parsedDate = this.dateAdapter.parse(this.input.value, \"inputdate\")\n\n    if (this.input.value === \"\" || parsedDate) {\n      const isoDate = printISODate(parsedDate);\n\n      if (this.calendar) {\n        this.calendar.value = isoDate;\n      }\n\n      this.value = isoDate;\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    this.value = event.detail.value;\n    this.stzhChange.emit({\n      component: \"stzh-datepicker\",\n      value: this.value,\n      valueAsDate: event.detail.valueAsDate,\n    });\n\n    if (this.input) {\n      this.input.value = event.detail.valueAsDate\n        && this.dateAdapter.format(event.detail.valueAsDate, \"inputdate\");\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 = parseISODate(this.value);\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 fetchTranslations(this.element, \"datepicker\");\n    }\n\n    if (!this.dateAdapter) {\n      this.dateAdapter = createGlobalAdapter(\n        this.localization.$formats,\n        this.localization.$globals\n      );\n    }\n  }\n\n  componentDidLoad() {\n    this.valueWatcher(this.value);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-datepicker\": true,\n      \"stzh-datepicker--inline\": this.inline\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          />\n\n          {this.inline &&\n            <Fragment>\n              <stzh-calendar\n                ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\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              label={this.label}\n              labelHidden={this.labelHidden}\n              ref={(el) => (this.input = el as HTMLStzhInputElement)}\n              noAutocomplete\n              onStzhChange={this.onInputChange}\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              showMarker={this.showMarker}\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                  variant=\"input\"\n                  icon-only\n                  icon=\"calendar\"\n                  disabled={this.disabled}\n                  a11yLabel={this.buttonLabel}\n                >\n                </stzh-button>\n                <div slot=\"content\">\n                  <stzh-calendar\n                    ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\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  ::slotted(stzh-text) {\n    --color: inherit;\n  }\n}\n\n.stzh-radio {\n\t@include input-description;\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    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-symbol {\n    @include fontSize('micro');\n  }\n\n  /* Hover / Focus / Checked */\n\n  &:hover &__label,\n  &__input:checked:hover ~ &__label,\n  &__input:checked:hover ~ &__mark &__check,\n  &__input:checked:focus ~ &__mark &__check {\n    color: $colorPrimaryHover;\n  }\n\n  &__input:checked ~ &__label {\n    color: $colorPrimary;\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__mark,\n  &__input:checked:hover ~ &__mark,\n  &__input:checked:focus ~ &__mark {\n    border-color: $colorPrimaryHover;\n  }\n\n  &__input:focus ~ &__mark,\n  &__input:checked ~ &__mark {\n    border-color: $colorPrimary;\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: $colorError;\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    border-color: $colorError;\n  }\n\n  /* Disabled */\n\n\t&--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label,\n  &--is-disabled &__input ~ &__mark &__check {\n    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    border-color: $formDisabledBorderColor;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n}\n","import {\n  Host,\n  Component,\n  Prop,\n  Event,\n  Element,\n  EventEmitter,\n  Method,\n  h,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhRadioChangeEvent,\n  StzhRadioFocusEvent,\n  StzhRadioBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { fetchTranslations, 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 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  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\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  /** 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  /** Focus input field */\n  @Method()\n  async setFocus() {\n    this.input.focus();\n  }\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  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n\n    this.invalid = this._error.length > 0;\n  }\n\n  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\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.setFocus();\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    if (!this.localization) {\n      this.localization = await 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;\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,\n      \"stzh-radio--is-disabled\": this.disabled\n    };\n\n    return (\n      <Host 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              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.showMarker &&\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            descriptionLongUsed={descriptionLongUsed}\n            moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n",":host([direction=\"vertical\"]) {\n  ::slotted(stzh-radio:not(:last-child)) {\n    margin-bottom: space('medium');\n  }\n}\n\n:host([direction=\"horizontal\"]) {\n  ::slotted(stzh-radio:not(:last-child)) {\n    margin-right: space('large');\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  }\n\n  &__legend {\n    @include font('heavy');\n    @include fontSize('nano');\n    padding: 0;\n    margin-bottom: space('xsmall');\n  }\n\n  &--hide-legend &__legend {\n    @include visuallyhidden;\n  }\n\n  &--direction-horizontal &__fields {\n    flex-direction: row;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Element,\n  Watch,\n  h,\n  Listen\n} from \"@stencil/core\";\n\nimport { StzhRadioChangeEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { fetchTranslations, 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 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  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Select a radio by value */\n  @Prop({ mutable: true }) value: 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  /** 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    this.invalid = this._error.length > 0;\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(\"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 init = () => {\n    // update radios\n    this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n    this.updateRadiosProperty(\"show-marker\", false);\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  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 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;\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,\n      \"stzh-radiogroup--hide-legend\": this.hideLegend,\n      [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction\n    };\n\n    return (\n      <fieldset class={classes}>\n        {this.legend &&\n          <legend class=\"stzh-radiogroup__legend\">\n            {this.legend}\n            {this.showMarker &&\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          descriptionLongUsed={descriptionLongUsed}\n          moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n        />\n      </fieldset>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/esm-es5/stzh-details.entry.js

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(t,e,i,n){function s(t){return t instanceof i?t:new i((function(e){e(t)}))}return new(i||(i=Promise))((function(i,r){function o(t){try{l(n.next(t))}catch(t){r(t)}}function a(t){try{l(n["throw"](t))}catch(t){r(t)}}function l(t){t.done?i(t.value):s(t.value).then(o,a)}l((n=n.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var i={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},n,s,r,o;return o={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function a(t){return function(e){return l([t,e])}}function l(a){if(n)throw new TypeError("Generator is already executing.");while(o&&(o=0,a[0]&&(i=0)),i)try{if(n=1,s&&(r=a[0]&2?s["return"]:a[0]?s["throw"]||((r=s["return"])&&r.call(s),0):s.next)&&!(r=r.call(s,a[1])).done)return r;if(s=0,r)a=[a[0]&2,r.value];switch(a[0]){case 0:case 1:r=a;break;case 4:i.label++;return{value:a[1],done:false};case 5:i.label++;s=a[1];a=[0];continue;case 7:a=i.ops.pop();i.trys.pop();continue;default:if(!(r=i.trys,r=r.length>0&&r[r.length-1])&&(a[0]===6||a[0]===2)){i=0;continue}if(a[0]===3&&(!r||a[1]>r[0]&&a[1]<r[3])){i.label=a[1];break}if(a[0]===6&&i.label<r[1]){i.label=r[1];r=a;break}if(r&&i.label<r[2]){i.label=r[2];i.ops.push(a);break}if(r[2])i.ops.pop();i.trys.pop();continue}a=e.call(t,i)}catch(t){a=[6,t];s=0}finally{n=r=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-67fd55c9.js";import{i as isStzhElement}from"./utils-51148d9a.js";import{w as waitForEvent}from"./event-utils-7a709e21.js";import{s as stopAnimations,a as animateTo,b as shimKeyframesHeightAuto}from"./animation-utils-e234a5f8.js";var stzhDetailsCss=".sc-stzh-details-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-details-h{display:none}.sc-stzh-details-h *.sc-stzh-details,.sc-stzh-details-h *.sc-stzh-details::before,.sc-stzh-details-h *.sc-stzh-details::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-details-h{display:contents;--content-padding:0;--content-background:transparent;--content-grid-column:inherit;--content-border-bottom:none}.stzh-details.sc-stzh-details,.stzh-details__trigger.sc-stzh-details{display:contents}.stzh-details__content.sc-stzh-details{overflow:hidden;background-color:var(--content-background);grid-column:var(--content-grid-column);border-bottom:var(--content-border-bottom)}.stzh-details__content-inner.sc-stzh-details{padding:var(--content-padding)}";var ANIMATION_SHOW={keyframes:[{height:"0",opacity:"0"},{height:"auto",opacity:"1"}],options:{duration:300,easing:"linear"}};var ANIMATION_HIDE={keyframes:[{height:"auto",opacity:"1"},{height:"0",opacity:"0"}],options:{duration:300,easing:"linear"}};var detailsCounter=0;var StzhDetails=function(){function t(t){var e=this;registerInstance(this,t);this.stzhOpen=createEvent(this,"stzhOpen",7);this.stzhOpened=createEvent(this,"stzhOpened",7);this.stzhClose=createEvent(this,"stzhClose",7);this.stzhClosed=createEvent(this,"stzhClosed",7);this.toggledByMethod=false;this.onClickTrigger=function(){e.toggle()};this.open=false}t.prototype.openWatcher=function(t){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(i){switch(i.label){case 0:if(!this.triggerElement){return[2]}if(this.triggerElement.firstElementChild){e=isStzhElement(this.triggerElement.firstElementChild);this.triggerElement.firstElementChild.setAttribute(e?"a11y-expanded":"aria-expanded",t?"true":"false")}if(!t)return[3,3];if(this.toggledByMethod){this.stzhOpen.emit({component:"stzh-accordion-item"})}return[4,stopAnimations(this.bodyElement)];case 1:i.sent();this.bodyElement.hidden=false;return[4,animateTo(this.bodyElement,shimKeyframesHeightAuto(ANIMATION_SHOW.keyframes,this.bodyElement.scrollHeight),ANIMATION_SHOW.options)];case 2:i.sent();this.bodyElement.style.height="auto";this.bodyElement.style.overflow="visible";if(this.toggledByMethod){this.stzhOpened.emit({component:"stzh-accordion-item"})}return[3,6];case 3:if(this.toggledByMethod){this.stzhClose.emit({component:"stzh-accordion-item"})}return[4,stopAnimations(this.bodyElement)];case 4:i.sent();this.bodyElement.style.overflow="hidden";return[4,animateTo(this.bodyElement,shimKeyframesHeightAuto(ANIMATION_HIDE.keyframes,this.bodyElement.scrollHeight),ANIMATION_HIDE.options)];case 5:i.sent();this.bodyElement.hidden=true;this.bodyElement.style.height="0px";if(this.toggledByMethod){this.stzhClosed.emit({component:"stzh-accordion-item"})}i.label=6;case 6:this.toggledByMethod=false;return[2]}}))}))};t.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(this.open){return[2]}this.toggledByMethod=true;this.open=true;return[2,waitForEvent(this.element,"stzhOpened")]}))}))};t.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(!this.open){return[2]}this.toggledByMethod=true;this.open=false;return[2,waitForEvent(this.element,"stzhClosed")]}))}))};t.prototype.toggle=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:if(!this.open)return[3,2];return[4,this.hide()];case 1:return[2,t.sent()];case 2:return[4,this.show()];case 3:return[2,t.sent()]}}))}))};t.prototype.componentWillLoad=function(){this.detailsId="stzh-details-".concat(detailsCounter++)};t.prototype.componentDidLoad=function(){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){var t=isStzhElement(this.triggerElement.firstElementChild);this.triggerElement.firstElementChild.setAttribute(t?"a11y-controls":"aria-controls","".concat(this.detailsId,"-content"));this.triggerElement.firstElementChild.setAttribute(t?"a11y-expanded":"aria-expanded",this.open?"true":"false")}};t.prototype.connectedCallback=function(){var t;var e=(t=this.triggerElement)===null||t===void 0?void 0:t.firstElementChild;if(!e){var i=Array.from(this.element.children).find((function(t){return!t.hasAttribute("slot")}));e=i}if(e){e.addEventListener("click",this.onClickTrigger)}};t.prototype.disconnectedCallback=function(){if(this.triggerElement&&this.triggerElement.firstElementChild){this.triggerElement.firstElementChild.removeEventListener("click",this.onClickTrigger)}};t.prototype.render=function(){var t=this;var e={"stzh-details":true,"stzh-details--is-open":this.open};return h(Host,null,h("div",{class:e},h("div",{ref:function(e){return t.triggerElement=e},class:"stzh-details__trigger"},h("slot",null)),h("div",{id:"".concat(this.detailsId,"-content"),ref:function(e){return t.bodyElement=e},class:"stzh-details__content","aria-labelledby":"".concat(this.detailsId,"-header")},h("div",{class:"stzh-details__content-inner"},h("slot",{name:"content"})))))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{open:["openWatcher"]}},enumerable:false,configurable:true});return t}();StzhDetails.style=stzhDetailsCss;export{StzhDetails as stzh_details};
+var __awaiter=this&&this.__awaiter||function(t,e,i,n){function s(t){return t instanceof i?t:new i((function(e){e(t)}))}return new(i||(i=Promise))((function(i,r){function o(t){try{l(n.next(t))}catch(t){r(t)}}function a(t){try{l(n["throw"](t))}catch(t){r(t)}}function l(t){t.done?i(t.value):s(t.value).then(o,a)}l((n=n.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var i={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},n,s,r,o;return o={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function a(t){return function(e){return l([t,e])}}function l(a){if(n)throw new TypeError("Generator is already executing.");while(o&&(o=0,a[0]&&(i=0)),i)try{if(n=1,s&&(r=a[0]&2?s["return"]:a[0]?s["throw"]||((r=s["return"])&&r.call(s),0):s.next)&&!(r=r.call(s,a[1])).done)return r;if(s=0,r)a=[a[0]&2,r.value];switch(a[0]){case 0:case 1:r=a;break;case 4:i.label++;return{value:a[1],done:false};case 5:i.label++;s=a[1];a=[0];continue;case 7:a=i.ops.pop();i.trys.pop();continue;default:if(!(r=i.trys,r=r.length>0&&r[r.length-1])&&(a[0]===6||a[0]===2)){i=0;continue}if(a[0]===3&&(!r||a[1]>r[0]&&a[1]<r[3])){i.label=a[1];break}if(a[0]===6&&i.label<r[1]){i.label=r[1];r=a;break}if(r&&i.label<r[2]){i.label=r[2];i.ops.push(a);break}if(r[2])i.ops.pop();i.trys.pop();continue}a=e.call(t,i)}catch(t){a=[6,t];s=0}finally{n=r=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-67fd55c9.js";import{i as isStzhElement}from"./utils-8f264f12.js";import{w as waitForEvent}from"./event-utils-7a709e21.js";import{s as stopAnimations,a as animateTo,b as shimKeyframesHeightAuto}from"./animation-utils-e234a5f8.js";var stzhDetailsCss=".sc-stzh-details-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-details-h{display:none}.sc-stzh-details-h *.sc-stzh-details,.sc-stzh-details-h *.sc-stzh-details::before,.sc-stzh-details-h *.sc-stzh-details::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-details-h{display:contents;--content-padding:0;--content-background:transparent;--content-grid-column:inherit;--content-border-bottom:none}.stzh-details.sc-stzh-details,.stzh-details__trigger.sc-stzh-details{display:contents}.stzh-details__content.sc-stzh-details{overflow:hidden;background-color:var(--content-background);grid-column:var(--content-grid-column);border-bottom:var(--content-border-bottom)}.stzh-details__content-inner.sc-stzh-details{padding:var(--content-padding)}";var ANIMATION_SHOW={keyframes:[{height:"0",opacity:"0"},{height:"auto",opacity:"1"}],options:{duration:300,easing:"linear"}};var ANIMATION_HIDE={keyframes:[{height:"auto",opacity:"1"},{height:"0",opacity:"0"}],options:{duration:300,easing:"linear"}};var detailsCounter=0;var StzhDetails=function(){function t(t){var e=this;registerInstance(this,t);this.stzhOpen=createEvent(this,"stzhOpen",7);this.stzhOpened=createEvent(this,"stzhOpened",7);this.stzhClose=createEvent(this,"stzhClose",7);this.stzhClosed=createEvent(this,"stzhClosed",7);this.toggledByMethod=false;this.onClickTrigger=function(){e.toggle()};this.open=false}t.prototype.openWatcher=function(t){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(i){switch(i.label){case 0:if(!this.triggerElement){return[2]}if(this.triggerElement.firstElementChild){e=isStzhElement(this.triggerElement.firstElementChild);this.triggerElement.firstElementChild.setAttribute(e?"a11y-expanded":"aria-expanded",t?"true":"false")}if(!t)return[3,3];if(this.toggledByMethod){this.stzhOpen.emit({component:"stzh-accordion-item"})}return[4,stopAnimations(this.bodyElement)];case 1:i.sent();this.bodyElement.hidden=false;return[4,animateTo(this.bodyElement,shimKeyframesHeightAuto(ANIMATION_SHOW.keyframes,this.bodyElement.scrollHeight),ANIMATION_SHOW.options)];case 2:i.sent();this.bodyElement.style.height="auto";this.bodyElement.style.overflow="visible";if(this.toggledByMethod){this.stzhOpened.emit({component:"stzh-accordion-item"})}return[3,6];case 3:if(this.toggledByMethod){this.stzhClose.emit({component:"stzh-accordion-item"})}return[4,stopAnimations(this.bodyElement)];case 4:i.sent();this.bodyElement.style.overflow="hidden";return[4,animateTo(this.bodyElement,shimKeyframesHeightAuto(ANIMATION_HIDE.keyframes,this.bodyElement.scrollHeight),ANIMATION_HIDE.options)];case 5:i.sent();this.bodyElement.hidden=true;this.bodyElement.style.height="0px";if(this.toggledByMethod){this.stzhClosed.emit({component:"stzh-accordion-item"})}i.label=6;case 6:this.toggledByMethod=false;return[2]}}))}))};t.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(this.open){return[2]}this.toggledByMethod=true;this.open=true;return[2,waitForEvent(this.element,"stzhOpened")]}))}))};t.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(!this.open){return[2]}this.toggledByMethod=true;this.open=false;return[2,waitForEvent(this.element,"stzhClosed")]}))}))};t.prototype.toggle=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:if(!this.open)return[3,2];return[4,this.hide()];case 1:return[2,t.sent()];case 2:return[4,this.show()];case 3:return[2,t.sent()]}}))}))};t.prototype.componentWillLoad=function(){this.detailsId="stzh-details-".concat(detailsCounter++)};t.prototype.componentDidLoad=function(){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){var t=isStzhElement(this.triggerElement.firstElementChild);this.triggerElement.firstElementChild.setAttribute(t?"a11y-controls":"aria-controls","".concat(this.detailsId,"-content"));this.triggerElement.firstElementChild.setAttribute(t?"a11y-expanded":"aria-expanded",this.open?"true":"false")}};t.prototype.connectedCallback=function(){var t;var e=(t=this.triggerElement)===null||t===void 0?void 0:t.firstElementChild;if(!e){var i=Array.from(this.element.children).find((function(t){return!t.hasAttribute("slot")}));e=i}if(e){e.addEventListener("click",this.onClickTrigger)}};t.prototype.disconnectedCallback=function(){if(this.triggerElement&&this.triggerElement.firstElementChild){this.triggerElement.firstElementChild.removeEventListener("click",this.onClickTrigger)}};t.prototype.render=function(){var t=this;var e={"stzh-details":true,"stzh-details--is-open":this.open};return h(Host,null,h("div",{class:e},h("div",{ref:function(e){return t.triggerElement=e},class:"stzh-details__trigger"},h("slot",null)),h("div",{id:"".concat(this.detailsId,"-content"),ref:function(e){return t.bodyElement=e},class:"stzh-details__content","aria-labelledby":"".concat(this.detailsId,"-header")},h("div",{class:"stzh-details__content-inner"},h("slot",{name:"content"})))))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{open:["openWatcher"]}},enumerable:false,configurable:true});return t}();StzhDetails.style=stzhDetailsCss;export{StzhDetails as stzh_details};
 //# sourceMappingURL=stzh-details.entry.js.map

package/dist/esm-es5/stzh-dialog.entry.js

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(t,e,i,a){function o(t){return t instanceof i?t:new i((function(e){e(t)}))}return new(i||(i=Promise))((function(i,s){function n(t){try{r(a.next(t))}catch(t){s(t)}}function l(t){try{r(a["throw"](t))}catch(t){s(t)}}function r(t){t.done?i(t.value):o(t.value).then(n,l)}r((a=a.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var i={label:0,sent:function(){if(s[0]&1)throw s[1];return s[1]},trys:[],ops:[]},a,o,s,n;return n={next:l(0),throw:l(1),return:l(2)},typeof Symbol==="function"&&(n[Symbol.iterator]=function(){return this}),n;function l(t){return function(e){return r([t,e])}}function r(l){if(a)throw new TypeError("Generator is already executing.");while(n&&(n=0,l[0]&&(i=0)),i)try{if(a=1,o&&(s=l[0]&2?o["return"]:l[0]?o["throw"]||((s=o["return"])&&s.call(o),0):o.next)&&!(s=s.call(o,l[1])).done)return s;if(o=0,s)l=[l[0]&2,s.value];switch(l[0]){case 0:case 1:s=l;break;case 4:i.label++;return{value:l[1],done:false};case 5:i.label++;o=l[1];l=[0];continue;case 7:l=i.ops.pop();i.trys.pop();continue;default:if(!(s=i.trys,s=s.length>0&&s[s.length-1])&&(l[0]===6||l[0]===2)){i=0;continue}if(l[0]===3&&(!s||l[1]>s[0]&&l[1]<s[3])){i.label=l[1];break}if(l[0]===6&&i.label<s[1]){i.label=s[1];s=l;break}if(s&&i.label<s[2]){i.label=s[2];i.ops.push(l);break}if(s[2])i.ops.pop();i.trys.pop();continue}l=e.call(t,i)}catch(t){l=[6,t];o=0}finally{a=s=0}if(l[0]&5)throw l[1];return{value:l[0]?l[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-67fd55c9.js";import{s as setPropsIfNull}from"./utils-51148d9a.js";import{f as fetchTranslations}from"./translation-utils-2623783f.js";import{c as createBaseFocusTrapOptions}from"./overlay-utils-33021971.js";import{c as createFocusTrap}from"./focus-trap.esm-601d164c.js";var stzhDialogCss=".sc-stzh-dialog-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-dialog-h{display:none}.sc-stzh-dialog-h *.sc-stzh-dialog,.sc-stzh-dialog-h *.sc-stzh-dialog::before,.sc-stzh-dialog-h *.sc-stzh-dialog::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-dialog-h{--width:100%;--padding:var(--stzh-space-xxlarge);--close-color:var(--stzh-base-lead-color);--backdrop-opacity:0.8}@media screen and (min-width: 600px){.sc-stzh-dialog-h{--width:33.5rem;}}@media screen and (min-width: 1024px){.sc-stzh-dialog-h{--width:48.875rem;--padding:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--width:52rem;--padding:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){[size=small].sc-stzh-dialog-h{--width:24.6875rem}}@media screen and (min-width: 1024px){[size=small].sc-stzh-dialog-h{--width:28.75rem}}@media screen and (min-width: 1260px){[size=small].sc-stzh-dialog-h{--width:32rem}}.stzh-dialog.sc-stzh-dialog{z-index:var(--stzh-z-index-dialog);display:none;position:fixed;top:0;left:0;width:100%;height:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:stretch;justify-content:stretch}.stzh-dialog__content.sc-stzh-dialog{z-index:2;position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-positive:1;flex-grow:1;overflow:auto}.stzh-dialog__dialog.sc-stzh-dialog{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:auto;border:none;background-color:var(--stzh-color-white);width:var(--width);max-width:100%;-webkit-box-shadow:var(--stzh-box-shadow-overlay);box-shadow:var(--stzh-box-shadow-overlay);height:100vh;max-height:100vh;overflow:hidden;outline:none}@media screen and (min-width: 600px){.stzh-dialog__dialog.sc-stzh-dialog{height:auto}}.stzh-dialog__backdrop.sc-stzh-dialog{z-index:1;position:absolute;top:0px;left:0px;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;text-align:center;background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));opacity:var(--backdrop-opacity)}.stzh-dialog__heading.sc-stzh-dialog{padding:var(--padding);padding-bottom:0}.stzh-dialog__dialog-content.sc-stzh-dialog{padding:var(--padding);padding-top:var(--stzh-space-xlarge);padding-bottom:var(--stzh-space-xlarge);overflow:auto;-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 1024px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1024px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-dialog__actions.sc-stzh-dialog{padding:var(--padding);padding-top:0}.stzh-dialog__close-button.sc-stzh-dialog{position:absolute;top:var(--stzh-space-xsmall);right:var(--stzh-space-xsmall);display:-ms-flexbox;display:flex;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background:none;padding:var(--stzh-space-xsmall);margin:calc(var(--stzh-space-xsmall) * -1);border-radius:var(--stzh-button-border-radius);cursor:pointer}@media screen and (min-width: 600px){.stzh-dialog__close-button.sc-stzh-dialog{top:var(--stzh-space-small);right:var(--stzh-space-small)}}@media screen and (min-width: 1024px){.stzh-dialog__close-button.sc-stzh-dialog{top:var(--stzh-space-large);right:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-dialog__close-button.sc-stzh-dialog{top:calc(var(--stzh-space-xxlarge) + var(--stzh-space-xxsmall));right:calc(var(--stzh-space-xxlarge) + var(--stzh-space-xxsmall))}}.stzh-dialog__close-icon.sc-stzh-dialog{--size:var(--stzh-icon-size-medium);color:var(--close-color)}.stzh-dialog--is-open.sc-stzh-dialog{display:-ms-flexbox;display:flex}";var keyCode={ESC:27};var CLASS_BODY_OPEN="stzh-dialog-open";var activeDialog=null;var dialogCounter=0;var StzhDialog=function(){function t(t){var e=this;registerInstance(this,t);this.stzhOpen=createEvent(this,"stzhOpen",7);this.stzhClose=createEvent(this,"stzhClose",7);this.handleDialogClick=function(t){var i=t.target;if(i.dataset.stzhDialogClose){e.hide()}else{var a=i.closest("[data-stzh-dialog-close]");if(a){e.hide()}}};this.handleCloseButtonClick=function(){e.hide()};this.init=function(){var t=e.element.querySelector('stzh-actions[slot="actions"]');if(t){setPropsIfNull(t,{variant:"dialog",withBorder:true})}};this.localization=undefined;this.closeOnEscapeKey=false;this.closeOnBackdropClick=false;this.open=false;this.stay=true;this.size="default";this.hideClose=false;this.heading="";this.a11yRole="alertdialog";this.a11yLabel="";this.closeAnalyticsId=undefined}t.prototype.handleOutsideClick=function(t){if(!this.open||!this.closeOnBackdropClick){return}var e=t.target!==this.dialogElement&&this.dialogElement.contains(t.target)===false;if(e){this.hide()}};t.prototype.handleKeydown=function(t){if(t.keyCode===keyCode.ESC&&activeDialog===this&&this.closeOnEscapeKey){this.hide()}};t.prototype.handleOpenTriggerClick=function(t){var e=t.target;if(e.dataset.stzhDialogTrigger===this.element.id){this.show()}else{var i=e.closest("[data-stzh-dialog-trigger]");if(i&&i.dataset.stzhDialogTrigger===this.element.id){this.show()}}};t.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.open=true;this.stzhOpen.emit({component:"stzh-dialog"});return[2]}))}))};t.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.open=false;this.stzhClose.emit({component:"stzh-dialog"});return[2]}))}))};t.prototype.getSiblings=function(){var t=this;if(!this.parentElement){return[]}return Array.from(this.parentElement.children).filter((function(e){return e!==t.element}))};t.prototype.disableSiblings=function(){this.getSiblings().forEach((function(t){t.setAttribute("aria-hidden","true")}))};t.prototype.enableSiblings=function(){this.getSiblings().forEach((function(t){t.removeAttribute("aria-hidden")}))};t.prototype.dialogShown=function(){activeDialog=this;document.body.classList.add(CLASS_BODY_OPEN);this.disableSiblings();if(this.trap){this.trap.activate()}};t.prototype.dialogHidden=function(){document.body.classList.remove(CLASS_BODY_OPEN);this.enableSiblings();if(this.trap){this.trap.deactivate()}activeDialog=null};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:this.id="stzh-dialog-".concat(dialogCounter);dialogCounter++;if(!!this.localization)return[3,2];t=this;return[4,fetchTranslations(this.element,"dialog")];case 1:t.localization=e.sent();e.label=2;case 2:return[2]}}))}))};t.prototype.componentDidRender=function(){this.open?this.dialogShown():this.dialogHidden()};t.prototype.componentDidUpdate=function(){this.trap.updateContainerElements(this.element)};t.prototype.componentDidLoad=function(){this.trap=createFocusTrap(this.element,Object.assign({fallbackFocus:this.dialogElement},createBaseFocusTrapOptions()));if(this.open){this.dialogShown()}};t.prototype.connectedCallback=function(){if(!this.stay&&this.element.parentElement!==document.body){document.body.appendChild(this.element)}this.parentElement=this.element.parentElement;this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})};t.prototype.disconnectedCallback=function(){this.dialogHidden();if(this.observer){this.observer.disconnect()}};t.prototype.render=function(){var t;var e=this;return h(Host,null,h("div",{class:(t={"stzh-dialog":true,"stzh-dialog--is-open":this.open,"stzh-dialog--has-heading":!!this.heading,"stzh-dialog--has-close-hidden":this.hideClose},t["stzh-dialog--size-".concat(this.size)]=!!this.size,t)},h("div",{class:"stzh-dialog__backdrop"}),h("div",{class:"stzh-dialog__content"},h("div",{class:"stzh-dialog__dialog",ref:function(t){return e.dialogElement=t},tabindex:"-1",role:this.a11yRole,"aria-label":this.a11yLabel,"aria-labelledby":this.heading?"".concat(this.id,"-heading"):null,"aria-hidden":this.open?"false":"true",onClick:this.handleDialogClick},this.heading&&h("stzh-heading",{id:"".concat(this.id,"-heading"),class:"stzh-dialog__heading",level:"2","with-border":true},this.heading),h("div",{class:"stzh-dialog__dialog-content"},h("slot",null)),h("div",{class:"stzh-dialog__actions"},h("slot",{name:"actions"})),!this.hideClose&&h("button",{class:"stzh-dialog__close-button",onClick:this.handleCloseButtonClick,"aria-label":this.localization.close,type:"button","s-object-id":this.closeAnalyticsId||this.localization.close},h("stzh-icon",{class:"stzh-dialog__close-icon",name:"close"}))))))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();StzhDialog.style=stzhDialogCss;export{StzhDialog as stzh_dialog};
+var __awaiter=this&&this.__awaiter||function(t,e,i,a){function o(t){return t instanceof i?t:new i((function(e){e(t)}))}return new(i||(i=Promise))((function(i,s){function n(t){try{r(a.next(t))}catch(t){s(t)}}function l(t){try{r(a["throw"](t))}catch(t){s(t)}}function r(t){t.done?i(t.value):o(t.value).then(n,l)}r((a=a.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var i={label:0,sent:function(){if(s[0]&1)throw s[1];return s[1]},trys:[],ops:[]},a,o,s,n;return n={next:l(0),throw:l(1),return:l(2)},typeof Symbol==="function"&&(n[Symbol.iterator]=function(){return this}),n;function l(t){return function(e){return r([t,e])}}function r(l){if(a)throw new TypeError("Generator is already executing.");while(n&&(n=0,l[0]&&(i=0)),i)try{if(a=1,o&&(s=l[0]&2?o["return"]:l[0]?o["throw"]||((s=o["return"])&&s.call(o),0):o.next)&&!(s=s.call(o,l[1])).done)return s;if(o=0,s)l=[l[0]&2,s.value];switch(l[0]){case 0:case 1:s=l;break;case 4:i.label++;return{value:l[1],done:false};case 5:i.label++;o=l[1];l=[0];continue;case 7:l=i.ops.pop();i.trys.pop();continue;default:if(!(s=i.trys,s=s.length>0&&s[s.length-1])&&(l[0]===6||l[0]===2)){i=0;continue}if(l[0]===3&&(!s||l[1]>s[0]&&l[1]<s[3])){i.label=l[1];break}if(l[0]===6&&i.label<s[1]){i.label=s[1];s=l;break}if(s&&i.label<s[2]){i.label=s[2];i.ops.push(l);break}if(s[2])i.ops.pop();i.trys.pop();continue}l=e.call(t,i)}catch(t){l=[6,t];o=0}finally{a=s=0}if(l[0]&5)throw l[1];return{value:l[0]?l[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-67fd55c9.js";import{s as setPropsIfNull}from"./utils-8f264f12.js";import{f as fetchTranslations}from"./translation-utils-2623783f.js";import{c as createBaseFocusTrapOptions}from"./overlay-utils-33021971.js";import{c as createFocusTrap}from"./focus-trap.esm-601d164c.js";var stzhDialogCss=".sc-stzh-dialog-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-dialog-h{display:none}.sc-stzh-dialog-h *.sc-stzh-dialog,.sc-stzh-dialog-h *.sc-stzh-dialog::before,.sc-stzh-dialog-h *.sc-stzh-dialog::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-dialog-h{--width:100%;--padding:var(--stzh-space-xxlarge);--close-color:var(--stzh-base-lead-color);--backdrop-opacity:0.8}@media screen and (min-width: 600px){.sc-stzh-dialog-h{--width:33.5rem;}}@media screen and (min-width: 1024px){.sc-stzh-dialog-h{--width:48.875rem;--padding:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--width:52rem;--padding:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){[size=small].sc-stzh-dialog-h{--width:24.6875rem}}@media screen and (min-width: 1024px){[size=small].sc-stzh-dialog-h{--width:28.75rem}}@media screen and (min-width: 1260px){[size=small].sc-stzh-dialog-h{--width:32rem}}.stzh-dialog.sc-stzh-dialog{z-index:var(--stzh-z-index-dialog);display:none;position:fixed;top:0;left:0;width:100%;height:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:stretch;justify-content:stretch}.stzh-dialog__content.sc-stzh-dialog{z-index:2;position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-positive:1;flex-grow:1;overflow:auto}.stzh-dialog__dialog.sc-stzh-dialog{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:auto;border:none;background-color:var(--stzh-color-white);width:var(--width);max-width:100%;-webkit-box-shadow:var(--stzh-box-shadow-overlay);box-shadow:var(--stzh-box-shadow-overlay);height:100vh;max-height:100vh;overflow:hidden;outline:none}@media screen and (min-width: 600px){.stzh-dialog__dialog.sc-stzh-dialog{height:auto}}.stzh-dialog__backdrop.sc-stzh-dialog{z-index:1;position:absolute;top:0px;left:0px;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;text-align:center;background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));opacity:var(--backdrop-opacity)}.stzh-dialog__heading.sc-stzh-dialog{padding:var(--padding);padding-bottom:0}.stzh-dialog__dialog-content.sc-stzh-dialog{padding:var(--padding);padding-top:var(--stzh-space-xlarge);padding-bottom:var(--stzh-space-xlarge);overflow:auto;-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 1024px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1024px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-dialog__actions.sc-stzh-dialog{padding:var(--padding);padding-top:0}.stzh-dialog__close-button.sc-stzh-dialog{position:absolute;top:var(--stzh-space-xsmall);right:var(--stzh-space-xsmall);display:-ms-flexbox;display:flex;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background:none;padding:var(--stzh-space-xsmall);margin:calc(var(--stzh-space-xsmall) * -1);border-radius:var(--stzh-button-border-radius);cursor:pointer}@media screen and (min-width: 600px){.stzh-dialog__close-button.sc-stzh-dialog{top:var(--stzh-space-small);right:var(--stzh-space-small)}}@media screen and (min-width: 1024px){.stzh-dialog__close-button.sc-stzh-dialog{top:var(--stzh-space-large);right:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-dialog__close-button.sc-stzh-dialog{top:calc(var(--stzh-space-xxlarge) + var(--stzh-space-xxsmall));right:calc(var(--stzh-space-xxlarge) + var(--stzh-space-xxsmall))}}.stzh-dialog__close-icon.sc-stzh-dialog{--size:var(--stzh-icon-size-medium);color:var(--close-color)}.stzh-dialog--is-open.sc-stzh-dialog{display:-ms-flexbox;display:flex}";var keyCode={ESC:27};var CLASS_BODY_OPEN="stzh-dialog-open";var activeDialog=null;var dialogCounter=0;var StzhDialog=function(){function t(t){var e=this;registerInstance(this,t);this.stzhOpen=createEvent(this,"stzhOpen",7);this.stzhClose=createEvent(this,"stzhClose",7);this.handleDialogClick=function(t){var i=t.target;if(i.dataset.stzhDialogClose){e.hide()}else{var a=i.closest("[data-stzh-dialog-close]");if(a){e.hide()}}};this.handleCloseButtonClick=function(){e.hide()};this.init=function(){var t=e.element.querySelector('stzh-actions[slot="actions"]');if(t){setPropsIfNull(t,{variant:"dialog",withBorder:true})}};this.localization=undefined;this.closeOnEscapeKey=false;this.closeOnBackdropClick=false;this.open=false;this.stay=true;this.size="default";this.hideClose=false;this.heading="";this.a11yRole="alertdialog";this.a11yLabel="";this.closeAnalyticsId=undefined}t.prototype.handleOutsideClick=function(t){if(!this.open||!this.closeOnBackdropClick){return}var e=t.target!==this.dialogElement&&this.dialogElement.contains(t.target)===false;if(e){this.hide()}};t.prototype.handleKeydown=function(t){if(t.keyCode===keyCode.ESC&&activeDialog===this&&this.closeOnEscapeKey){this.hide()}};t.prototype.handleOpenTriggerClick=function(t){var e=t.target;if(e.dataset.stzhDialogTrigger===this.element.id){this.show()}else{var i=e.closest("[data-stzh-dialog-trigger]");if(i&&i.dataset.stzhDialogTrigger===this.element.id){this.show()}}};t.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.open=true;this.stzhOpen.emit({component:"stzh-dialog"});return[2]}))}))};t.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.open=false;this.stzhClose.emit({component:"stzh-dialog"});return[2]}))}))};t.prototype.getSiblings=function(){var t=this;if(!this.parentElement){return[]}return Array.from(this.parentElement.children).filter((function(e){return e!==t.element}))};t.prototype.disableSiblings=function(){this.getSiblings().forEach((function(t){t.setAttribute("aria-hidden","true")}))};t.prototype.enableSiblings=function(){this.getSiblings().forEach((function(t){t.removeAttribute("aria-hidden")}))};t.prototype.dialogShown=function(){activeDialog=this;document.body.classList.add(CLASS_BODY_OPEN);this.disableSiblings();if(this.trap){this.trap.activate()}};t.prototype.dialogHidden=function(){document.body.classList.remove(CLASS_BODY_OPEN);this.enableSiblings();if(this.trap){this.trap.deactivate()}activeDialog=null};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:this.id="stzh-dialog-".concat(dialogCounter);dialogCounter++;if(!!this.localization)return[3,2];t=this;return[4,fetchTranslations(this.element,"dialog")];case 1:t.localization=e.sent();e.label=2;case 2:return[2]}}))}))};t.prototype.componentDidRender=function(){this.open?this.dialogShown():this.dialogHidden()};t.prototype.componentDidUpdate=function(){this.trap.updateContainerElements(this.element)};t.prototype.componentDidLoad=function(){this.trap=createFocusTrap(this.element,Object.assign({fallbackFocus:this.dialogElement},createBaseFocusTrapOptions()));if(this.open){this.dialogShown()}};t.prototype.connectedCallback=function(){if(!this.stay&&this.element.parentElement!==document.body){document.body.appendChild(this.element)}this.parentElement=this.element.parentElement;this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})};t.prototype.disconnectedCallback=function(){this.dialogHidden();if(this.observer){this.observer.disconnect()}};t.prototype.render=function(){var t;var e=this;return h(Host,null,h("div",{class:(t={"stzh-dialog":true,"stzh-dialog--is-open":this.open,"stzh-dialog--has-heading":!!this.heading,"stzh-dialog--has-close-hidden":this.hideClose},t["stzh-dialog--size-".concat(this.size)]=!!this.size,t)},h("div",{class:"stzh-dialog__backdrop"}),h("div",{class:"stzh-dialog__content"},h("div",{class:"stzh-dialog__dialog",ref:function(t){return e.dialogElement=t},tabindex:"-1",role:this.a11yRole,"aria-label":this.a11yLabel,"aria-labelledby":this.heading?"".concat(this.id,"-heading"):null,"aria-hidden":this.open?"false":"true",onClick:this.handleDialogClick},this.heading&&h("stzh-heading",{id:"".concat(this.id,"-heading"),class:"stzh-dialog__heading",level:"2","with-border":true},this.heading),h("div",{class:"stzh-dialog__dialog-content"},h("slot",null)),h("div",{class:"stzh-dialog__actions"},h("slot",{name:"actions"})),!this.hideClose&&h("button",{class:"stzh-dialog__close-button",onClick:this.handleCloseButtonClick,"aria-label":this.localization.close,type:"button","s-object-id":this.closeAnalyticsId||this.localization.close},h("stzh-icon",{class:"stzh-dialog__close-icon",name:"close"}))))))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();StzhDialog.style=stzhDialogCss;export{StzhDialog as stzh_dialog};
 //# sourceMappingURL=stzh-dialog.entry.js.map