npm - @oiz/stzh-components - Versions diffs - 2.6.0 → 2.7.0-alpha - Mend

@oiz/stzh-components 2.6.0 → 2.7.0-alpha

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (170) hide show

package/dist/stzh-components/p-82e886d4.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["stzhDatepickerCss","StzhDatepicker","this","onRootFocus","input","setFocus","onInputChange","parsedDate","dateAdapter","parse","value","isoDate","printISODate","calendar","stzhChange","emit","component","valueAsDate","onCalendarChange","event","detail","format","popover","hide","createDateFormatters","localization","dateFormatLong","Intl","DateTimeFormat","$locale","day","month","year","valueWatcher","newValue","date","parseISODate","updateButtonAccessibleLabel","async","buttonLabel","selectedDateMessage","err","connectedCallback","fetchTranslations","element","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","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","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 - Slot to place input, calendar and popover element inside\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":"sSAAA,MAAMA,EAAoB,u6B,MCmCbC,EAAc,M,gEA+HjBC,KAAAC,YAAc,KACpB,GAAID,KAAKE,MAAO,CACdF,KAAKE,MAAMC,U,GAIPH,KAAAI,cAAgB,KACtB,MAAMC,EAAaL,KAAKM,YAAYC,MAAMP,KAAKE,MAAMM,MAAO,aAE5D,GAAIR,KAAKE,MAAMM,QAAU,IAAMH,EAAY,CACzC,MAAMI,EAAUC,EAAaL,GAE7B,GAAIL,KAAKW,SAAU,CACjBX,KAAKW,SAASH,MAAQC,C,CAGxBT,KAAKQ,MAAQC,EACbT,KAAKY,WAAWC,KAAK,CACnBC,UAAW,kBACXN,MAAOR,KAAKQ,MACZO,YAAaV,G,GAKXL,KAAAgB,iBAAoBC,IAC1BjB,KAAKQ,MAAQS,EAAMC,OAAOV,MAC1BR,KAAKY,WAAWC,KAAK,CACnBC,UAAW,kBACXN,MAAOR,KAAKQ,MACZO,YAAaE,EAAMC,OAAOH,cAG5B,GAAIf,KAAKE,MAAO,CACdF,KAAKE,MAAMM,MAAQS,EAAMC,OAAOH,aAC3Bf,KAAKM,YAAYa,OAAOF,EAAMC,OAAOH,YAAa,Y,CAGzD,GAAIf,KAAKoB,QAAS,CAChBpB,KAAKoB,QAAQC,M,oBAjKa,G,iBAMA,G,4BAMsC,IAAM,M,UAGlC,G,WAGC,G,WAGjB,G,cAGqB,M,cAGA,M,4FAYD,M,cAGC,M,gBAGE,M,UAGM,U,YAG3B,M,kFAe1BC,uBACE,GAAItB,KAAKuB,aAAc,CACrBvB,KAAKwB,eAAiB,IAAIC,KAAKC,eAAe1B,KAAKuB,aAAaI,QAAS,CACvEC,IAAK,UACLC,MAAO,OACPC,KAAM,W,EAOZC,aAAaC,GACX,MAAMC,EAAOC,EAAaF,GAE1B,GAAIhC,KAAKW,SAAU,CACjBX,KAAKW,SAASH,MAAQwB,C,CAGxB,GAAIhC,KAAKE,MAAO,CACdF,KAAKE,MAAMM,MAAQR,KAAKM,YAAYa,OAAOc,EAAM,Y,CAGnDjC,KAAKmC,6B,CAKPC,cAAcH,GACZjC,KAAKQ,MAAQE,EAAauB,E,CAK5BG,mBACE,OAAOpC,KAAKoB,O,CAgENe,8BACN,IAAKnC,KAAKuB,aAAc,CACtB,M,CAGF,IACE,MAAMR,EAAcmB,EAAalC,KAAKQ,OACtCR,KAAKqC,YAAc,GAAGrC,KAAKuB,aAAac,gBAAgBrC,KAAKuB,aAAae,uBAAuBtC,KAAKwB,eAAeL,OAAOJ,I,CAC5H,MAAOwB,GACPvC,KAAKqC,YAAcrC,KAAKuB,aAAac,W,EAIzCG,oBACExC,KAAKsB,sB,CAGPc,0BACE,IAAKpC,KAAKuB,aAAc,CACtBvB,KAAKuB,mBAAqBkB,EAAkBzC,KAAK0C,QAAS,a,CAG5D,IAAK1C,KAAKM,YAAa,CACrBN,KAAKM,YAAcqC,EACjB3C,KAAKuB,aAAaqB,SAClB5C,KAAKuB,aAAasB,S,EAKxBC,mBACE9C,KAAK+B,aAAa/B,KAAKQ,M,CAGzBuC,SACE,MAAMC,EAAU,CACd,kBAAmB,KACnB,0BAA2BhD,KAAKiD,QAGlC,OACEC,EAACC,EAAI,CAACC,SAAUpD,KAAKqD,SAAW,KAAO,KAAMC,QAAStD,KAAKC,aACzDiD,EAAA,OAAKK,MAAOP,GACVE,EAAA,SACEM,KAAK,SACLC,KAAMzD,KAAKyD,KACXjD,MAAOR,KAAKQ,QAGbR,KAAKiD,QACJC,EAACQ,EAAQ,KACPR,EAAA,iBACES,IAAMC,GAAQ5D,KAAKW,SAAWiD,EAC9BC,eAAgB7D,KAAK8D,uBACrBC,IAAK/D,KAAKgE,YACVC,IAAKjE,KAAKkE,YACVC,aAAcnE,KAAKgB,mBAErBkC,EAAA,OAAKK,MAAM,4BACTL,EAAA,QAAMO,KAAK,cAKfzD,KAAKiD,QACLC,EAAA,cACEkB,MAAOpE,KAAKoE,MACZT,IAAMC,GAAQ5D,KAAKE,MAAQ0D,EAC3BS,eAAc,KACdF,aAAcnE,KAAKI,cACnBkE,SAAUtE,KAAKsE,SACfjB,SAAUrD,KAAKqD,SACfkB,YAAavE,KAAKuE,YAClBC,gBAAiBxE,KAAKwE,gBACtBC,MAAOzE,KAAKyE,MACZC,QAAS1E,KAAK0E,QACdC,SAAU3E,KAAK2E,SACfC,WAAY5E,KAAK4E,WACjBC,KAAM7E,KAAK6E,MAEX3B,EAAA,gBACES,IAAMC,GAAQ5D,KAAKoB,QAAUwC,EAC7BL,MAAM,2BACNuB,KAAK,eACLC,UAAU,aACVX,MAAOpE,KAAKoE,OAEZlB,EAAA,eACE8B,QAAQ,QAAO,iBAEfC,KAAK,WACL5B,SAAUrD,KAAKqD,SACf6B,UAAWlF,KAAKqC,cAGlBa,EAAA,OAAK4B,KAAK,WACR5B,EAAA,iBACES,IAAMC,GAAQ5D,KAAKW,SAAWiD,EAC9BC,eAAgB7D,KAAK8D,uBACrBC,IAAK/D,KAAKgE,YACVC,IAAKjE,KAAKkE,YACVC,aAAcnE,KAAKgB,mBAGrBkC,EAAA,OAAKK,MAAM,4BACTL,EAAA,QAAMO,KAAK,gB,qICtT/B,MAAM0B,EAAe,u6NCuBrB,IAAIC,EAAe,E,MAaNC,EAAS,M,wIAiFZrF,KAAAsF,eAA0B,MAE1BtF,KAAAuF,QAAWtE,IACjBjB,KAAKwF,QAAUxF,KAAKE,MAAMsF,QAC1BxF,KAAKY,WAAWC,KAAK,CACnBC,UAAW,aACX2E,cAAexE,EACfT,MAAOR,KAAKQ,MACZgF,QAASxF,KAAKwF,SACd,EAGIxF,KAAAC,YAAc,KACpB,IAAKD,KAAKsF,eAAgB,CACxBtF,KAAKG,U,CAGPH,KAAKsF,eAAiB,KAAK,EAGrBtF,KAAAsD,QAAWrC,IACjBjB,KAAKsF,eAAiB,KAEtB,MAAMI,EAAa,IAAIC,WAAW,QAAS,CACzCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGd/F,KAAK0C,QAAQsD,cAAcN,GAC3B1F,KAAKiG,UAAUpF,KAAK,CAClBC,UAAW,aACX2E,cAAexE,GACf,EAGIjB,KAAAkG,OAAUjF,IAChB,MAAMkF,EAAY,IAAIR,WAAW,OAAQ,CACvCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGd/F,KAAK0C,QAAQsD,cAAcG,GAC3BnG,KAAKoG,SAASvF,KAAK,CACjBC,UAAW,aACX2E,cAAexE,GACf,E,0CA3HyC,M,UAGL,G,WAGC,G,aAGG,M,cAGC,M,gBAGE,M,aAGY,M,WAGnC,G,oGAa2C,E,CAInEmB,iBACEpC,KAAKE,MAAMmG,O,CAabC,aAAatE,GACX,UAAWA,IAAa,SAAU,CAChC,IACEhC,KAAKuG,OAASC,KAAKjG,MAAMyB,E,CACzB,MAAOyE,GACP,GAAIzE,EAAU,CACZhC,KAAKuG,OAAS,CAACvE,E,KACV,CACLhC,KAAKuG,OAAS,E,QAGb,GAAIvE,EAAU,CACnBhC,KAAKuG,OAASvE,C,KACT,CACLhC,KAAKuG,OAAS,E,CAGhBvG,KAAK0E,QAAU1E,KAAKuG,OAAOG,OAAS,C,CAyDtCtE,0BACEpC,KAAK2G,QAAU,cAAcvB,MAC7BpF,KAAKsG,aAAatG,KAAKyE,OAEvB,IAAKzE,KAAKuB,aAAc,CACtBvB,KAAKuB,mBAAqBkB,EAAkBzC,KAAK0C,QAAS,Q,EAI9DK,SACE,MAAM6D,EAAkBC,EAAQ7G,KAAK0C,QAAS,kBAAoB1C,KAAKuE,YACvE,MAAMuC,EAAsBD,EAAQ7G,KAAK0C,QAAS,uBAAyB1C,KAAKwE,gBAChF,MAAMuC,EAAYF,EAAQ7G,KAAK0C,QAAS,YAAc1C,KAAKyE,MAE3D,MAAMzB,EAAU,CACd,aAAc,KACd,8BAA+B4D,EAC/B,mCAAoCE,EACpC,wBAAyBC,EACzB,0BAA2B/G,KAAK2E,SAChC,yBAA0B3E,KAAK0E,QAC/B,0BAA2B1E,KAAKqD,UAGlC,OACEH,EAACC,EAAI,CAACC,SAAUpD,KAAKqD,SAAW,KAAO,KAAMC,QAAStD,KAAKC,aACzDiD,EAAA,OAAKK,MAAOP,GACVE,EAAA,SAAOK,MAAM,6BACXL,EAAA,SACEK,MAAM,oBACNI,IAAMC,GAAQ5D,KAAKE,MAAQ0D,EAC3BJ,KAAK,QACLwD,GAAIhH,KAAK2G,QACTlD,KAAMzD,KAAKyD,KACXjD,MAAOR,KAAKQ,MACZ6C,SAAUrD,KAAKqD,SAAQ,mBACL,GAAGrD,KAAK2G,uBAAuB3G,KAAKiH,kBAAiB,gBACxDjH,KAAK2E,SAAW,OAAS,QAAO,eACjC3E,KAAK0E,QAAU,OAAS,QACtCc,QAASxF,KAAKwF,QACdD,QAASvF,KAAKuF,QACdjC,QAAStD,KAAKsD,QACd4C,OAAQlG,KAAKkG,SAEfhD,EAAA,OAAKK,MAAM,oBACTL,EAAA,OAAKK,MAAM,uBAEbL,EAAA,OAAKK,MAAM,qBACRvD,KAAKoE,MAAQpE,KAAKoE,MAAQlB,EAAA,aAC1BlD,KAAK4E,YACJ1B,EAAA,QAAMK,MAAM,sBACVL,EAAA,QAAMK,MAAM,4BAA2B,cAAa,QACjDvD,KAAK2E,SACF3E,KAAKuB,aAAasB,SAASqE,oBAC3BlH,KAAKuB,aAAasB,SAASsE,qBAGjCjE,EAAA,QAAMK,MAAM,2BACTvD,KAAK2E,SACF3E,KAAKuB,aAAasB,SAASuE,kBAC3BpH,KAAKuB,aAAasB,SAASwE,sBAOzCnE,EAACoE,EAAoB,CACnBC,YAAY,aACZP,GAAI,GAAGhH,KAAK2G,sBACZlC,MAAOzE,KAAKuG,OACZhC,YAAavE,KAAKuE,YAClBC,gBAAiBxE,KAAKwE,gBACtBsC,oBAAqBA,EACrBU,oBAAqBxH,KAAKuB,aAAasB,SAAS2E,uB,+FCjP5D,MAAMC,EAAoB,ynICiB1B,MAAMC,EAAiB,iDAEvB,IAAIC,EAAoB,E,MAaXC,EAAc,M,yBA8CjB5H,KAAA6H,yBAAqC,GAiGrC7H,KAAA8H,KAAO,KAEb9H,KAAK+H,OAASC,MAAMC,KAAKjI,KAAK0C,QAAQwF,iBAAiBR,IAEvD1H,KAAKmI,qBAAqB,cAAe,OACzCnI,KAAKmI,qBAAqB,mBAAoB,GAAGnI,KAAKoI,4BAEtDpI,KAAKqI,WAAWrI,KAAKQ,OACrBR,KAAKsI,UAAUtI,KAAKyD,MACpBzD,KAAKuI,cAAcvI,KAAKqD,UACxBrD,KAAKwI,aAAaxI,KAAK0E,SACvB1E,KAAKyI,cAAczI,KAAK2E,SAAS,E,0CArJU,M,0DASE,M,aAGH,M,cAGC,M,gBAGE,M,WAGN,G,eAGuB,W,iGAaZ,K,6BAGC,E,CAOrD2D,UAAUtG,GACRhC,KAAKmI,qBAAqB,OAAQnG,E,CAIpCuG,cAAcvG,GACZhC,KAAKmI,qBAAqB,WAAYnG,E,CAIxCwG,aAAaxG,GACXhC,KAAKmI,qBAAqB,UAAWnG,E,CAIvCyG,cAAczG,GACZhC,KAAKmI,qBAAqB,WAAYnG,E,CAIxCqG,WAAWrG,GACThC,KAAK0I,0BAA0B1G,E,CAIjCsE,aAAatE,GACX,UAAWA,IAAa,SAAU,CAChC,IACEhC,KAAKuG,OAASC,KAAKjG,MAAMyB,E,CACzB,MAAOyE,GACP,GAAIzE,EAAU,CACZhC,KAAKuG,OAAS,CAACvE,E,KACV,CACLhC,KAAKuG,OAAS,E,QAGb,GAAIvE,EAAU,CACnBhC,KAAKuG,OAASvE,C,KACT,CACLhC,KAAKuG,OAAS,E,CAGhBvG,KAAK0E,QAAU1E,KAAKuG,OAAOG,OAAS,C,CAItCiC,+BAA+B3G,GAC7B,UAAWA,IAAa,SAAU,CAChChC,KAAK6H,yBAA2BrB,KAAKjG,MAAMyB,E,KACtC,CACLhC,KAAK6H,yBAA2B7F,C,EAKpC4G,SAAS3H,GACPjB,KAAKQ,MAAQS,EAAMC,OAAOV,K,CAQpB2H,qBAAqBU,EAAcrI,GACzCR,KAAK+H,OAAOe,SAASC,IACnB,GAAIF,IAAS,QAAW7I,KAAK6H,yBAAyBmB,QAAQH,MAAW,EAAI,CAC3EE,EAAME,EAAUJ,IAASrI,C,KAKvBkI,0BAA0BlI,GAChCR,KAAKkJ,aAAelJ,KAAK+H,OAAOoB,MAAKJ,GAASA,EAAMvI,QAAUA,IAE9D,GAAIR,KAAKkJ,aAAc,CACrBlJ,KAAKkJ,aAAa1D,QAAU,I,CAG9BxF,KAAKoJ,e,CAGCA,gBAENpJ,KAAK+H,OAAOe,SAASC,IACnB,IAAK/I,KAAKkJ,cAAgBH,IAAU/I,KAAKkJ,aAAc,CACrDH,EAAMvD,QAAU,K,KAmBtBpD,0BACEpC,KAAKoI,aAAe,mBAAmBT,MACvC3H,KAAKsG,aAAatG,KAAKyE,OACvBzE,KAAK2I,+BAA+B3I,KAAKqJ,yBAEzC,IAAKrJ,KAAKuB,aAAc,CACtBvB,KAAKuB,mBAAqBkB,EAAkBzC,KAAK0C,QAAS,a,EAI9D4G,sBAAsBC,EAAWC,EAAWX,GAC1C,OAAOA,IAAS,c,CAGlBY,qBACEzJ,KAAK8H,M,CAGPtF,oBACE,IAAKxC,KAAKQ,MAAO,CACfR,KAAK+H,OAASC,MAAMC,KAAKjI,KAAK0C,QAAQwF,iBAAiBR,IAGvD,MAAMwB,EAAelJ,KAAK+H,OAAOoB,MAAKJ,GAASA,EAAMvD,UAErD,GAAI0D,EAAc,CAChBlJ,KAAKQ,MAAQ0I,EAAa1I,K,EAI9BR,KAAK0J,SAAW,IAAIC,iBAAiB3J,KAAK8H,MAC1C9H,KAAK0J,SAASE,QAAQ5J,KAAK0C,QAAS,CAClCmH,UAAW,KACXC,QAAS,M,CAIbC,uBACE,GAAI/J,KAAK0J,SAAU,CACjB1J,KAAK0J,SAASM,Y,EAIlBjH,SACE,MAAM6D,EAAkBC,EAAQ7G,KAAK0C,QAAS,kBAAoB1C,KAAKuE,YACvE,MAAMuC,EAAsBD,EAAQ7G,KAAK0C,QAAS,uBAAyB1C,KAAKwE,gBAChF,MAAMuC,EAAYF,EAAQ7G,KAAK0C,QAAS,YAAc1C,KAAKyE,MAE3D,MAAMzB,EAAU,CACd,kBAAmB,KACnB,mCAAoC4D,EACpC,wCAAyCE,EACzC,6BAA8BC,EAC9B,+BAAgC/G,KAAK2E,SACrC,+BAAgC3E,KAAKqD,SACrC,8BAA+BrD,KAAK0E,QACpC,+BAAgC1E,KAAKiK,WACrC,CAAC,8BAA8BjK,KAAKkK,eAAgBlK,KAAKkK,WAG3D,OACEhH,EAAA,YAAUK,MAAOP,GACdhD,KAAKmK,QACJjH,EAAA,UAAQK,MAAM,2BACXvD,KAAKmK,OACLnK,KAAK4E,YACJ1B,EAAA,QAAMK,MAAM,2BACVL,EAAA,QAAMK,MAAM,iCAAgC,cAAa,QACtDvD,KAAK2E,SACF3E,KAAKuB,aAAasB,SAASqE,oBAC3BlH,KAAKuB,aAAasB,SAASsE,qBAGjCjE,EAAA,QAAMK,MAAM,gCACTvD,KAAK2E,SACF3E,KAAKuB,aAAasB,SAASuE,kBAC3BpH,KAAKuB,aAAasB,SAASwE,qBAOzCnE,EAAA,OAAKK,MAAM,2BACTL,EAAA,cAEFA,EAACoE,EAAoB,CACnBC,YAAY,kBACZP,GAAI,GAAGhH,KAAKoI,2BACZ3D,MAAOzE,KAAKuG,OACZhC,YAAavE,KAAKuE,YAClBC,gBAAiBxE,KAAKwE,gBACtBsC,oBAAqBA,EACrBU,oBAAqBxH,KAAKuB,aAAasB,SAAS2E,sB"}
1	+ {"version":3,"names":["stzhDatepickerCss","StzhDatepicker","this","onRootFocus","input","setFocus","onInputChange","parsedDate","dateAdapter","parse","value","isoDate","printISODate","calendar","stzhChange","emit","component","valueAsDate","onCalendarChange","event","detail","format","popover","hide","createDateFormatters","localization","dateFormatLong","Intl","DateTimeFormat","$locale","day","month","year","valueWatcher","newValue","date","parseISODate","updateButtonAccessibleLabel","async","buttonLabel","selectedDateMessage","err","connectedCallback","fetchTranslations","element","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","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","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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"}

package/dist/stzh-components/p-9f31cf7d.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,c as s,h as e,a as i,g as h}from"./p-9e02896c.js";import{f as r}from"./p-25a09313.js";const n=".sc-stzh-monthyearpicker-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-monthyearpicker-h{display:none}.sc-stzh-monthyearpicker-h .sc-stzh-monthyearpicker,.sc-stzh-monthyearpicker-h .sc-stzh-monthyearpicker::before,.sc-stzh-monthyearpicker-h *.sc-stzh-monthyearpicker::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-monthyearpicker-h{width:100%;--separator-height:var(--stzh-form-input-height)}[size=small].sc-stzh-monthyearpicker-h{--separator-height:var(--stzh-form-input-small-height)}.stzh-monthyearpicker__wrapper.sc-stzh-monthyearpicker{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-monthyearpicker__separator.sc-stzh-monthyearpicker{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);margin-left:var(--stzh-space-medium);margin-right:var(--stzh-space-medium);height:var(--separator-height);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}";const a=class{constructor(e){t(this,e);this.stzhChange=s(this,"stzhChange",7);this.onRootFocus=()=>{if(this.monthsDropdown){this.monthsDropdown.setFocus()}};this.onMonthsDropdownChange=t=>{const s=this.value.split("-")[0]\|\|"0000";const e=t.detail.value\|\|"00";this.onChange(s,e)};this.onYearsDropdownChange=t=>{const s=t.detail.value\|\|"0000";const e=this.value.split("-")[1]\|\|"00";this.onChange(s,e)};this.months=undefined;this.years=undefined;this.min=undefined;this.max=undefined;this.minYear=undefined;this.maxYear=undefined;this.format="default";this.name="";this.value="0000-00";this.popoverPlacement="bottom";this.monthLabel="";this.yearLabel="";this.readonly=false;this.disabled=false;this.required=false;this.showMarker=false;this.size="default";this.descriptionMonth=undefined;this.descriptionYear=undefined;this.descriptionLongMonth=undefined;this.descriptionLongYear=undefined;this.errorMonth=undefined;this.errorYear=undefined;this.invalidMonth=false;this.invalidYear=false;this.a11yDescribedbyMonth="";this.a11yDescribedbyYear="";this.localization=undefined}monthsWatcher(t){if(typeof t==="string"){this._months=JSON.parse(t)}else{this._months=t}this.updateMonthOptions()}yearsWatcher(t){if(typeof t==="string"){this._years=JSON.parse(t)}else{this._years=t}this.updateYearOptions()}minMaxWatcher(){this.updateMonthOptions();this.updateYearOptions()}onChange(t,s){this.value=`${t}-${s}`;this.stzhChange.emit({component:"stzh-monthyearpicker",value:this.value,valueMonth:s,valueYear:t})}updateMonthOptions(){const t=[];let s=[];if(this._months){s=this._months}else{const t=Number(this.value.split("-")[0]\|\|"0000");let e=1;let i=12;if(this.min){const s=new Date(this.min);if(t===s.getFullYear()){e=s.getMonth()+1}}if(this.max){const s=new Date(this.max);if(t===s.getFullYear()){i=s.getMonth()+1}}for(let t=e;t<=i;t++){s.push(t)}}s.forEach((s=>{const e=("00"+s).slice(-2);const i=this.localization.$globals.monthNames[s-1];t.push({text:this.format==="creditcard"?`${e} (${i})`:i,value:e})}));this.dropdownMonthOptions=t}updateYearOptions(){const t=[];let s=[];if(this._years){s=this._years}else{const t=Number(this.value.split("-")[1]\|\|"00");const e=(new Date).getFullYear();let i=this.minYear\|\|e-10;let h=this.maxYear\|\|e+10;if(this.min){const s=new Date(this.min);if(t&&t<s.getMonth()+1){i=s.getFullYear()+1}else{i=s.getFullYear()}}if(this.max){const s=new Date(this.max);if(t&&t>s.getMonth()+1){h=s.getFullYear()-1}else{h=s.getFullYear()}}for(let t=i;t<=h;t++){s.push(t)}}s.forEach((s=>{t.push({text:s,value:s})}));this.dropdownYearOptions=t}async componentWillLoad(){if(!this.localization){this.localization=await r(this.element,"monthyearpicker")}this.monthsWatcher(this.months);this.yearsWatcher(this.years)}render(){const t={"stzh-monthyearpicker":true};return e(i,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},e("div",{class:t},e("input",{type:"hidden",name:this.name,value:this.value}),e("div",{class:"stzh-monthyearpicker__wrapper"},e("stzh-dropdown",{name:`${this.name}-month`,class:"stzh-monthyearpicker__months-dropdown",label:this.monthLabel\|\|this.localization.monthLabel,ref:t=>this.monthsDropdown=t,onStzhChange:this.onMonthsDropdownChange,options:this.dropdownMonthOptions,items:[this.value.split("-")[1]],required:this.required,disabled:this.disabled,size:this.size,showMarker:this.showMarker,popoverPlacement:this.popoverPlacement,description:this.descriptionMonth,descriptionLong:this.descriptionLongMonth,error:this.errorMonth,a11yDescribedby:this.a11yDescribedbyMonth,invalid:this.invalidMonth}),e("div",{class:"stzh-monthyearpicker__separator"},"/"),e("stzh-dropdown",{name:`${this.name}-year`,class:"stzh-monthyearpicker__years-dropdown",label:this.yearLabel\|\|this.localization.yearLabel,onStzhChange:this.onYearsDropdownChange,options:this.dropdownYearOptions,items:[this.value.split("-")[0]],required:this.required,disabled:this.disabled,size:this.size,showMarker:this.showMarker,popoverPlacement:this.popoverPlacement,description:this.descriptionYear,descriptionLong:this.descriptionLongYear,error:this.errorYear,a11yDescribedby:this.a11yDescribedbyYear,invalid:this.invalidYear}))))}get element(){return h(this)}static get watchers(){return{months:["monthsWatcher"],years:["yearsWatcher"],value:["minMaxWatcher"],min:["minMaxWatcher"],max:["minMaxWatcher"]}}};a.style=n;export{a as stzh_monthyearpicker};
2	+ //# sourceMappingURL=p-9f31cf7d.entry.js.map

package/dist/stzh-components/p-9f31cf7d.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["stzhMonthyearpickerCss","StzhMonthyearpicker","this","onRootFocus","monthsDropdown","setFocus","onMonthsDropdownChange","event","year","value","split","month","detail","onChange","onYearsDropdownChange","monthsWatcher","newValue","_months","JSON","parse","updateMonthOptions","yearsWatcher","_years","updateYearOptions","minMaxWatcher","stzhChange","emit","component","valueMonth","valueYear","options","months","currentYear","Number","minMonth","maxMonth","min","minDate","Date","getFullYear","getMonth","max","maxDate","i","push","forEach","paddedMonth","slice","monthName","localization","$globals","monthNames","text","format","dropdownMonthOptions","years","currentMonth","yearNow","minYear","maxYear","dropdownYearOptions","async","fetchTranslations","element","render","classes","h","Host","tabindex","disabled","onFocus","class","type","name","label","monthLabel","ref","el","onStzhChange","items","required","size","showMarker","popoverPlacement","description","descriptionMonth","descriptionLong","descriptionLongMonth","error","errorMonth","a11yDescribedby","a11yDescribedbyMonth","invalid","invalidMonth","yearLabel","descriptionYear","descriptionLongYear","errorYear","a11yDescribedbyYear","invalidYear"],"sources":["./src/components/stzh-monthyearpicker/stzh-monthyearpicker.scss?tag=stzh-monthyearpicker&encapsulation=scoped","./src/components/stzh-monthyearpicker/stzh-monthyearpicker.tsx"],"sourcesContent":[":host {\n width: 100%;\n --separator-height: #{$formInputHeight};\n\n &[size=\"small\"] {\n --separator-height: #{$formInputHeightSmall};\n }\n}\n\n.stzh-monthyearpicker {\n &__wrapper {\n display: flex;\n align-items: flex-start;\n }\n\n &__separator {\n @include fontSize('milli');\n margin-left: space('medium');\n margin-right: space('medium');\n height: var(--separator-height);\n display: flex;\n align-items: center;\n }\n}\n","import {\n Component,\n Prop,\n Host,\n Element,\n h,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\n\nimport {\n StzhDropdownOption,\n StzhDropdownChangeEvent,\n StzhMonthyearpickerChangeEvent\n} from \"../../index\";\n\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { StzhMonthyearpickerLocalizedText } from \"./stzh-monthyearpicker.localization\";\n\n/**\n */\n@Component({\n tag: \"stzh-monthyearpicker\",\n styleUrl: \"stzh-monthyearpicker.scss\",\n scoped: true\n})\nexport class StzhMonthyearpicker {\n /** Set which months to show (overwrites months from min/max) */\n @Prop() months: number[] | string;\n private _months: number[];\n\n /** Set which years to show (overwrites years from min/max) */\n @Prop() years: number[] | string;\n private _years: number[];\n\n /**\n * Minimum month and year allowed to be picked in `YYYY-MM` format.\n * This setting can be used alone or together with the `max` property.\n */\n @Prop() min: string;\n\n /**\n * Maximum month and year allowed to be picked in `YYYY-MM` format.\n * This setting can be used alone or together with the `min` property.\n */\n @Prop() max: string;\n\n /**\n * Minimum year (will be overwritten if `min` is used).\n * This setting can be used alone or together with the `maxYear` property.\n */\n @Prop() minYear: number;\n\n /**\n * Maximum year (will be overwritten if `max` is used).\n * This setting can be used alone or together with the `minYear` property.\n */\n @Prop() maxYear: number;\n\n /** Picker format. */\n @Prop({ reflect: true }) format: \"default\" | \"creditcard\" = \"default\";\n\n /** Name of the hidden date picker input. */\n @Prop({ reflect: true }) name: string = \"\";\n\n /** Value of hidden input (current selected year and month YYYY-MM). */\n @Prop({ mutable: true }) value: string = \"0000-00\";\n\n /** Popover placement for the dropdown (if applicable) */\n @Prop({ reflect: true }) popoverPlacement: \"bottom\" | \"bottom-end\" | \"bottom-center\" | \"top\" | \"top-end\" | \"top-center\" = \"bottom\";\n\n /** Month dropdown label */\n @Prop() monthLabel: string = \"\";\n\n /** Year dropdown label */\n @Prop() yearLabel: 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 /** 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 /** Description message for month */\n @Prop() descriptionMonth: string;\n\n /** Description message for year */\n @Prop() descriptionYear: string;\n\n /** Long description message appearing in a popover for month */\n @Prop() descriptionLongMonth: string;\n\n /** Long description message appearing in a popover for year */\n @Prop() descriptionLongYear: string;\n\n /** One or multiple error message for month */\n @Prop() errorMonth: string | string[];\n\n /** One or multiple error message for year */\n @Prop() errorYear: string | string[];\n\n /** Invalid status for month */\n @Prop({ reflect: true }) invalidMonth: boolean = false;\n\n /** Invalid status for year */\n @Prop({ reflect: true }) invalidYear: boolean = false;\n\n /** Id of the element which describes the month dropdown */\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedbyMonth: string = \"\";\n\n /** Id of the element which describes the year dropdown */\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedbyYear: string = \"\";\n\n /** Translation strings. */\n @Prop() localization: StzhMonthyearpickerLocalizedText;\n\n /** Monthyearpicker change event */\n @Event() stzhChange: EventEmitter<StzhMonthyearpickerChangeEvent>;\n\n @Element() element: HTMLStzhMonthyearpickerElement;\n\n @Watch(\"months\")\n monthsWatcher(newValue: number[] | string) {\n if (typeof newValue === \"string\") {\n this._months = JSON.parse(newValue);\n } else {\n this._months = newValue;\n }\n\n this.updateMonthOptions();\n }\n\n @Watch(\"years\")\n yearsWatcher(newValue: number[] | string) {\n if (typeof newValue === \"string\") {\n this._years = JSON.parse(newValue);\n } else {\n this._years = newValue;\n }\n\n this.updateYearOptions();\n }\n\n @Watch(\"value\")\n @Watch(\"min\")\n @Watch(\"max\")\n minMaxWatcher() {\n this.updateMonthOptions();\n this.updateYearOptions();\n }\n\n private monthsDropdown: HTMLStzhDropdownElement;\n private dropdownMonthOptions: StzhDropdownOption[];\n private dropdownYearOptions: StzhDropdownOption[];\n\n private onRootFocus = () => {\n if (this.monthsDropdown) {\n this.monthsDropdown.setFocus();\n }\n }\n\n private onMonthsDropdownChange = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n const year = this.value.split(\"-\")[0] || \"0000\";\n const month = event.detail.value || \"00\";\n this.onChange(year, month);\n }\n\n private onYearsDropdownChange = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n const year = event.detail.value || \"0000\";\n const month = this.value.split(\"-\")[1] || \"00\";\n this.onChange(year, month);\n }\n\n private onChange(year, month) {\n this.value = `${year}-${month}`;\n this.stzhChange.emit({\n component: \"stzh-monthyearpicker\",\n value: this.value,\n valueMonth: month,\n valueYear: year\n });\n }\n\n private updateMonthOptions() {\n const options = [];\n let months = [];\n\n if (this._months) {\n months = this._months;\n } else {\n const currentYear = Number(this.value.split(\"-\")[0] || \"0000\");\n\n let minMonth = 1;\n let maxMonth = 12;\n\n if (this.min) {\n const minDate = new Date(this.min);\n\n if (currentYear === minDate.getFullYear()) {\n minMonth = minDate.getMonth() + 1;\n }\n }\n\n if (this.max) {\n const maxDate = new Date(this.max);\n\n if (currentYear === maxDate.getFullYear()) {\n maxMonth = maxDate.getMonth() + 1;\n }\n }\n\n for (let i = minMonth; i <= maxMonth; i++) {\n months.push(i);\n }\n }\n\n months.forEach((month) => {\n const paddedMonth = (\"00\" + month).slice(-2);\n const monthName = this.localization.$globals.monthNames[month - 1];\n\n options.push({\n text: this.format === \"creditcard\"\n ? `${paddedMonth} (${monthName})`\n : monthName,\n value: paddedMonth\n });\n });\n\n this.dropdownMonthOptions = options;\n }\n\n private updateYearOptions(): void {\n const options = [];\n let years = [];\n\n if (this._years) {\n years = this._years;\n } else {\n const currentMonth = Number(this.value.split(\"-\")[1] || \"00\");\n\n const yearNow = new Date().getFullYear();\n let minYear = this.minYear || (yearNow - 10);\n let maxYear = this.maxYear || (yearNow + 10);\n\n if (this.min) {\n const minDate = new Date(this.min);\n\n if (currentMonth && currentMonth < minDate.getMonth() + 1) {\n minYear = minDate.getFullYear() + 1;\n } else {\n minYear = minDate.getFullYear();\n }\n }\n\n if (this.max) {\n const maxDate = new Date(this.max);\n\n if (currentMonth && currentMonth > maxDate.getMonth() + 1) {\n maxYear = maxDate.getFullYear() - 1;\n } else {\n maxYear = maxDate.getFullYear();\n }\n }\n\n for (let i = minYear; i <= maxYear; i++) {\n years.push(i);\n }\n }\n\n years.forEach((year) => {\n options.push({ text: year, value: year });\n });\n\n this.dropdownYearOptions = options;\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await fetchTranslations(this.element, \"monthyearpicker\");\n }\n\n this.monthsWatcher(this.months);\n this.yearsWatcher(this.years);\n }\n\n render() {\n const classes = {\n \"stzh-monthyearpicker\": true\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 <div class=\"stzh-monthyearpicker__wrapper\">\n <stzh-dropdown\n name={`${this.name}-month`}\n class=\"stzh-monthyearpicker__months-dropdown\"\n label={this.monthLabel || this.localization.monthLabel}\n ref={(el) => (this.monthsDropdown = el as HTMLStzhDropdownElement)}\n onStzhChange={this.onMonthsDropdownChange}\n options={this.dropdownMonthOptions}\n items={[this.value.split(\"-\")[1]]}\n required={this.required}\n disabled={this.disabled}\n size={this.size}\n showMarker={this.showMarker}\n popoverPlacement={this.popoverPlacement}\n description={this.descriptionMonth}\n descriptionLong={this.descriptionLongMonth}\n error={this.errorMonth}\n a11yDescribedby={this.a11yDescribedbyMonth}\n invalid={this.invalidMonth}\n ></stzh-dropdown>\n\n <div class=\"stzh-monthyearpicker__separator\">/</div>\n\n <stzh-dropdown\n name={`${this.name}-year`}\n class=\"stzh-monthyearpicker__years-dropdown\"\n label={this.yearLabel || this.localization.yearLabel}\n onStzhChange={this.onYearsDropdownChange}\n options={this.dropdownYearOptions}\n items={[this.value.split(\"-\")[0]]}\n required={this.required}\n disabled={this.disabled}\n size={this.size}\n showMarker={this.showMarker}\n popoverPlacement={this.popoverPlacement}\n description={this.descriptionYear}\n descriptionLong={this.descriptionLongYear}\n error={this.errorYear}\n a11yDescribedby={this.a11yDescribedbyYear}\n invalid={this.invalidYear}\n ></stzh-dropdown>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}