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

@oiz/stzh-components 2.6.0-beta → 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 (308) 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 noting /\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 noting /\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 noting /\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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"}
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-d69b11ec.system.entry.js → p-94a5e295.system.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-System.register(["./p-7b184ebb.system.js","./p-d4b7a303.system.js"],(function(t){"use strict";var s,i,o,e,n;return{setters:[function(t){s=t.r;i=t.h;o=t.a;e=t.g},function(t){n=t.s}],execute:function(){var a=".sc-stzh-actions-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-actions-h{display:none}.sc-stzh-actions-h *.sc-stzh-actions,.sc-stzh-actions-h *.sc-stzh-actions::before,.sc-stzh-actions-h *.sc-stzh-actions::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-actions-h .sc-stzh-actions-s>[slot=primary],.sc-stzh-actions-h .sc-stzh-actions-s>[slot=secondary]{-ms-flex-positive:1;flex-grow:1;margin:var(--stzh-space-xxsmall)}.sc-stzh-actions-h[variant=cta] .sc-stzh-actions-s>[slot=primary],.sc-stzh-actions-h[variant=cta] .sc-stzh-actions-s>[slot=secondary]{-ms-flex-positive:0;flex-grow:0}.stzh-actions__actions.sc-stzh-actions{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:calc(var(--stzh-space-xxsmall) * -1)}@media screen and (min-width: 600px){.stzh-actions__actions.sc-stzh-actions{-ms-flex-direction:row;flex-direction:row}}.stzh-actions__primary-actions.sc-stzh-actions,.stzh-actions__secondary-actions.sc-stzh-actions{display:-ms-flexbox;display:flex}.stzh-actions--dialog.sc-stzh-actions .stzh-actions__actions.sc-stzh-actions{-ms-flex-pack:end;justify-content:flex-end}.stzh-actions--process.sc-stzh-actions .stzh-actions__actions.sc-stzh-actions{-ms-flex-pack:justify;justify-content:space-between}.stzh-actions--has-border.sc-stzh-actions{padding-top:var(--stzh-space-medium);border-top:0.0625rem solid var(--stzh-base-border-color)}";var c=t("stzh_actions",function(){function t(t){var i=this;s(this,t);this.init=function(){var t=i.element.querySelectorAll('stzh-button[slot="secondary"], [slot="secondary"] stzh-button');var s=i.element.querySelectorAll("stzh-button");t.forEach((function(t){n(t,{variant:"secondary"})}));s.forEach((function(t){t.setAttribute("role","listitem")}))};this.variant="form";this.withBorder=false}t.prototype.connectedCallback=function(){this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})};t.prototype.disconnectedCallback=function(){if(this.observer){this.observer.disconnect()}};t.prototype.render=function(){var t;var s=(t={"stzh-actions":true,"stzh-actions--has-border":this.withBorder},t["stzh-actions--".concat(this.variant)]=!!this.variant,t);return i(o,null,i("div",{class:s},i("div",{class:"stzh-actions__actions",role:"list"},i("div",{class:"stzh-actions__secondary-actions"},i("slot",{name:"secondary"})),i("div",{class:"stzh-actions__primary-actions"},i("slot",{name:"primary"})))))};Object.defineProperty(t.prototype,"element",{get:function(){return e(this)},enumerable:false,configurable:true});return t}());c.style=a}}}));
-//# sourceMappingURL=p-d69b11ec.system.entry.js.map
+System.register(["./p-7b184ebb.system.js","./p-d4b7a303.system.js"],(function(s){"use strict";var t,o,i,n,e;return{setters:[function(s){t=s.r;o=s.h;i=s.a;n=s.g},function(s){e=s.s}],execute:function(){var a=".sc-stzh-actions-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-actions-h{display:none}.sc-stzh-actions-h *.sc-stzh-actions,.sc-stzh-actions-h *.sc-stzh-actions::before,.sc-stzh-actions-h *.sc-stzh-actions::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-actions-h .sc-stzh-actions-s>[slot=primary],.sc-stzh-actions-h .sc-stzh-actions-s>[slot=secondary]{-ms-flex-positive:1;flex-grow:1;margin:var(--stzh-space-xxsmall)}.sc-stzh-actions-h[variant=cta] .sc-stzh-actions-s>[slot=primary],.sc-stzh-actions-h[variant=cta] .sc-stzh-actions-s>[slot=secondary]{-ms-flex-positive:0;flex-grow:0}.stzh-actions__actions.sc-stzh-actions{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:calc(var(--stzh-space-xxsmall) * -1)}@media screen and (min-width: 600px){.stzh-actions__actions.sc-stzh-actions{-ms-flex-direction:row;flex-direction:row}}.stzh-actions__primary-actions.sc-stzh-actions,.stzh-actions__secondary-actions.sc-stzh-actions{display:-ms-flexbox;display:flex}.stzh-actions--dialog.sc-stzh-actions .stzh-actions__actions.sc-stzh-actions{-ms-flex-pack:end;justify-content:flex-end}.stzh-actions--process.sc-stzh-actions .stzh-actions__actions.sc-stzh-actions{-ms-flex-pack:justify;justify-content:space-between}.stzh-actions--has-border.sc-stzh-actions{padding-top:var(--stzh-space-medium);border-top:0.0625rem solid var(--stzh-base-border-color)}";var c=s("stzh_actions",function(){function s(s){var o=this;t(this,s);this.init=function(){var s=o.element.querySelectorAll('stzh-button[slot="secondary"], [slot="secondary"] stzh-button');s.forEach((function(s){e(s,{variant:"secondary"})}))};this.variant="form";this.withBorder=false}s.prototype.connectedCallback=function(){this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})};s.prototype.disconnectedCallback=function(){if(this.observer){this.observer.disconnect()}};s.prototype.render=function(){var s;var t=(s={"stzh-actions":true,"stzh-actions--has-border":this.withBorder},s["stzh-actions--".concat(this.variant)]=!!this.variant,s);return o(i,null,o("div",{class:t},o("div",{class:"stzh-actions__actions",role:"group"},o("div",{class:"stzh-actions__secondary-actions"},o("slot",{name:"secondary"})),o("div",{class:"stzh-actions__primary-actions"},o("slot",{name:"primary"})))))};Object.defineProperty(s.prototype,"element",{get:function(){return n(this)},enumerable:false,configurable:true});return s}());c.style=a}}}));
+//# sourceMappingURL=p-94a5e295.system.entry.js.map

package/dist/stzh-components/p-94a5e295.system.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["stzhActionsCss","StzhActions","exports","this","init","secondaryButtons","_this","element","querySelectorAll","forEach","button","setPropsIfNull","variant","class_1","prototype","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","classes","_a","withBorder","concat","h","Host","class","role","name"],"sources":["src/components/stzh-actions/stzh-actions.scss?tag=stzh-actions&encapsulation=scoped","src/components/stzh-actions/stzh-actions.tsx"],"sourcesContent":[":host {\n ::slotted([slot=\"primary\"]),\n ::slotted([slot=\"secondary\"]) {\n flex-grow: 1;\n margin: space('xxsmall');\n }\n\n &[variant=\"cta\"] ::slotted([slot=\"primary\"]),\n &[variant=\"cta\"] ::slotted([slot=\"secondary\"]) {\n flex-grow: 0;\n }\n}\n\n.stzh-actions {\n &__actions {\n display: flex;\n flex-direction: column;\n margin: calc(#{space('xxsmall')} * -1);\n\n @include mq($from: small) {\n flex-direction: row;\n }\n }\n\n &__primary-actions,\n &__secondary-actions {\n display: flex;\n }\n\n &--dialog &__actions {\n justify-content: flex-end;\n }\n\n &--process &__actions {\n justify-content: space-between;\n }\n\n &--has-border {\n padding-top: space('medium');\n border-top: 1px solid $baseBorderColor;\n }\n}\n","import {\n Component,\n Host,\n Prop,\n h,\n Element\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot primary - Slot for primary button\n * @slot secondary - Slot for secondary button\n */\n@Component({\n tag: \"stzh-actions\",\n styleUrl: \"stzh-actions.scss\",\n scoped: true\n})\nexport class StzhActions {\n /** Variant determining what position the action buttons are */\n @Prop({ reflect: true }) variant: \"form\" | \"dialog\" | \"process\" | \"cta\" = \"form\";\n\n /** With border separator */\n @Prop({ reflect: true }) withBorder: boolean = false;\n\n @Element() element: HTMLStzhActionsElement;\n\n private observer: MutationObserver;\n\n private init = () => {\n const secondaryButtons = this.element.querySelectorAll(\n 'stzh-button[slot=\"secondary\"], [slot=\"secondary\"] stzh-button'\n );\n\n secondaryButtons.forEach((button) => {\n setPropsIfNull(button, {\n variant: \"secondary\"\n } as HTMLStzhButtonElement)\n });\n\n }\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n const classes = {\n \"stzh-actions\": true,\n \"stzh-actions--has-border\": this.withBorder,\n [`stzh-actions--${this.variant}`]: !!this.variant\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-actions__actions\" role=\"group\">\n <div class=\"stzh-actions__secondary-actions\">\n <slot name=\"secondary\"></slot>\n </div>\n <div class=\"stzh-actions__primary-actions\">\n <slot name=\"primary\"></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"wMAAA,IAAMA,EAAiB,4qD,ICmBVC,EAAWC,EAAA,0B,mCAWdC,KAAAC,KAAO,WACb,IAAMC,EAAmBC,EAAKC,QAAQC,iBACpC,iEAGFH,EAAiBI,SAAQ,SAACC,GACxBC,EAAeD,EAAQ,CACrBE,QAAS,a,kBAhB2D,O,gBAG3B,K,CAmB/CC,EAAAC,UAAAC,kBAAA,WACEZ,KAAKC,OAELD,KAAKa,SAAW,IAAIC,iBAAiBd,KAAKC,MAC1CD,KAAKa,SAASE,QAAQf,KAAKI,QAAS,CAClCY,UAAW,KACXC,QAAS,M,EAIbP,EAAAC,UAAAO,qBAAA,WACE,GAAIlB,KAAKa,SAAU,CACjBb,KAAKa,SAASM,Y,GAIlBT,EAAAC,UAAAS,OAAA,W,MACE,IAAMC,GAAOC,EAAA,CACX,eAAgB,KAChB,2BAA4BtB,KAAKuB,YACjCD,EAAC,iBAAAE,OAAiBxB,KAAKS,YAAcT,KAAKS,Q,GAG5C,OACEgB,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAON,GACVI,EAAA,OAAKE,MAAM,wBAAwBC,KAAK,SACtCH,EAAA,OAAKE,MAAM,mCACTF,EAAA,QAAMI,KAAK,eAEbJ,EAAA,OAAKE,MAAM,iCACTF,EAAA,QAAMI,KAAK,e,4HAvDD,I"}

package/dist/stzh-components/p-9b7d4e8d.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["stzhCheckboxCss","checkboxCounter","StzhCheckbox","this","focusedByInput","onInput","event","checked","input","stzhChange","emit","component","originalEvent","value","onRootFocus","setFocus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","async","focus","errorWatcher","newValue","_error","JSON","parse","e","invalid","length","inputId","error","localization","fetchTranslations","render","descriptionUsed","hasSlot","description","descriptionLongUsed","descriptionLong","errorUsed","classes","required","disabled","h","Host","tabindex","class","ref","el","type","id","name","a11yDescribedby","innerHTML","Check","label","showMarker","$globals","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","StzhInputDescription","classPrefix","moreInfoButtonLabel"],"sources":["./src/components/stzh-checkbox/stzh-checkbox.scss?tag=stzh-checkbox&encapsulation=scoped","./src/components/stzh-checkbox/stzh-checkbox.tsx"],"sourcesContent":[":host {\n display: inline-block;\n\n ::slotted(stzh-text) {\n --color: inherit;\n }\n}\n\n.stzh-checkbox {\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 border: 1px solid $formBorderColor;\n background-color: $colorWhite;\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n border-radius: $formInputBorderRadius;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n transition: border-color $baseTransitionAnimationSpeed;\n }\n\n &__check {\n display: flex;\n flex-direction: column;\n justify-content: center;\n opacity: 0;\n color: $colorPrimary;\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 color: $formDisabledColor;\n }\n\n &--is-disabled &__input ~ &__mark &__check {\n color: $colorGrey70;\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 EventEmitter,\n Element,\n Method,\n h,\n Watch\n} from \"@stencil/core\";\n\nimport {\n StzhCheckboxChangeEvent,\n StzhCheckboxFocusEvent,\n StzhCheckboxBlurEvent\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\nimport Check from './assets/check.svg';\n\nlet checkboxCounter = 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-checkbox\",\n styleUrl: \"stzh-checkbox.scss\",\n scoped: true\n})\nexport class StzhCheckbox {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Whether the checkbox is disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Name of the input element /\n @Prop({ reflect: true }) name: string = \"\";\n\n /* 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 /* 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 /* Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show noting /\n @Prop({ reflect: true }) showMarker: boolean = false;\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 input (this will be overwritten if description prop or slot is used) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Focus input field /\n @Method()\n async setFocus() {\n this.input.focus();\n }\n\n /* Change event /\n @Event() stzhChange: EventEmitter<StzhCheckboxChangeEvent>;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhCheckboxFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhCheckboxBlurEvent>;\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-checkbox\",\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-checkbox\",\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-checkbox\",\n originalEvent: event\n });\n }\n\n async componentWillLoad() {\n this.inputId = `stzh-checkbox-${checkboxCounter++}`;\n this.errorWatcher(this.error);\n\n if (!this.localization) {\n this.localization = await fetchTranslations(this.element, 'checkbox');\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-checkbox\": true,\n \"stzh-checkbox--has-description\": descriptionUsed,\n \"stzh-checkbox--has-description-long\": descriptionLongUsed,\n \"stzh-checkbox--has-error\": errorUsed,\n \"stzh-checkbox--is-required\": this.required,\n \"stzh-checkbox--is-invalid\": this.invalid,\n \"stzh-checkbox--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-checkbox__field-wrapper\">\n <input\n class=\"stzh-checkbox__input\"\n ref={(el) => (this.input = el as HTMLInputElement)}\n type=\"checkbox\"\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-checkbox__mark\">\n <div class=\"stzh-checkbox__check\" innerHTML={Check} />\n </div>\n <div class=\"stzh-checkbox__label\">\n {this.label ? this.label : <slot></slot>}\n {this.showMarker &&\n <span class=\"stzh-checkbox__marker\">\n <span class=\"stzh-checkbox__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-checkbox__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-checkbox\"\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"],"mappings":"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"}
1	+ {"version":3,"names":["stzhCheckboxCss","checkboxCounter","StzhCheckbox","this","focusedByInput","onInput","event","checked","input","stzhChange","emit","component","originalEvent","value","onRootFocus","setFocus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","async","focus","errorWatcher","newValue","_error","JSON","parse","e","invalid","length","inputId","error","localization","fetchTranslations","render","descriptionUsed","hasSlot","description","descriptionLongUsed","descriptionLong","errorUsed","classes","required","disabled","h","Host","tabindex","class","ref","el","type","id","name","a11yDescribedby","innerHTML","Check","label","showMarker","$globals","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","StzhInputDescription","classPrefix","moreInfoButtonLabel"],"sources":["./src/components/stzh-checkbox/stzh-checkbox.scss?tag=stzh-checkbox&encapsulation=scoped","./src/components/stzh-checkbox/stzh-checkbox.tsx"],"sourcesContent":[":host {\n display: inline-block;\n\n ::slotted(stzh-text) {\n --color: inherit;\n }\n}\n\n.stzh-checkbox {\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 border: 1px solid $formBorderColor;\n background-color: $colorWhite;\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n border-radius: $formInputBorderRadius;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n transition: border-color $baseTransitionAnimationSpeed;\n }\n\n &__check {\n display: flex;\n flex-direction: column;\n justify-content: center;\n opacity: 0;\n color: $colorPrimary;\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 color: $formDisabledColor;\n }\n\n &--is-disabled &__input ~ &__mark &__check {\n color: $colorGrey70;\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 EventEmitter,\n Element,\n Method,\n h,\n Watch\n} from \"@stencil/core\";\n\nimport {\n StzhCheckboxChangeEvent,\n StzhCheckboxFocusEvent,\n StzhCheckboxBlurEvent\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\nimport Check from './assets/check.svg';\n\nlet checkboxCounter = 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-checkbox\",\n styleUrl: \"stzh-checkbox.scss\",\n scoped: true\n})\nexport class StzhCheckbox {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Whether the checkbox is disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Name of the input element /\n @Prop({ reflect: true }) name: string = \"\";\n\n /* 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 /* 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 /* 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 /* 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 input (this will be overwritten if description prop or slot is used) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Focus input field /\n @Method()\n async setFocus() {\n this.input.focus();\n }\n\n /* Change event /\n @Event() stzhChange: EventEmitter<StzhCheckboxChangeEvent>;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhCheckboxFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhCheckboxBlurEvent>;\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-checkbox\",\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-checkbox\",\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-checkbox\",\n originalEvent: event\n });\n }\n\n async componentWillLoad() {\n this.inputId = `stzh-checkbox-${checkboxCounter++}`;\n this.errorWatcher(this.error);\n\n if (!this.localization) {\n this.localization = await fetchTranslations(this.element, 'checkbox');\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-checkbox\": true,\n \"stzh-checkbox--has-description\": descriptionUsed,\n \"stzh-checkbox--has-description-long\": descriptionLongUsed,\n \"stzh-checkbox--has-error\": errorUsed,\n \"stzh-checkbox--is-required\": this.required,\n \"stzh-checkbox--is-invalid\": this.invalid,\n \"stzh-checkbox--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-checkbox__field-wrapper\">\n <input\n class=\"stzh-checkbox__input\"\n ref={(el) => (this.input = el as HTMLInputElement)}\n type=\"checkbox\"\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-checkbox__mark\">\n <div class=\"stzh-checkbox__check\" innerHTML={Check} />\n </div>\n <div class=\"stzh-checkbox__label\">\n {this.label ? this.label : <slot></slot>}\n {this.showMarker &&\n <span class=\"stzh-checkbox__marker\">\n <span class=\"stzh-checkbox__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-checkbox__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-checkbox\"\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"],"mappings":"+cAAA,MAAMA,EAAkB,i2OCyBxB,IAAIC,EAAkB,E,MAaTC,EAAY,M,wIAiFfC,KAAAC,eAA0B,MAE1BD,KAAAE,QAAWC,IACjBH,KAAKI,QAAUJ,KAAKK,MAAMD,QAC1BJ,KAAKM,WAAWC,KAAK,CACnBC,UAAW,gBACXC,cAAeN,EACfO,MAAOV,KAAKU,MACZN,QAASJ,KAAKI,SACd,EAGIJ,KAAAW,YAAc,KACpB,IAAKX,KAAKC,eAAgB,CACxBD,KAAKY,U,CAGPZ,KAAKC,eAAiB,KAAK,EAGrBD,KAAAa,QAAWV,IACjBH,KAAKC,eAAiB,KAEtB,MAAMa,EAAa,IAAIC,WAAW,QAAS,CACzCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdnB,KAAKoB,QAAQC,cAAcP,GAC3Bd,KAAKsB,UAAUf,KAAK,CAClBC,UAAW,gBACXC,cAAeN,GACf,EAGIH,KAAAuB,OAAUpB,IAChB,MAAMqB,EAAY,IAAIT,WAAW,OAAQ,CACvCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdnB,KAAKoB,QAAQC,cAAcG,GAC3BxB,KAAKyB,SAASlB,KAAK,CACjBC,UAAW,gBACXC,cAAeN,GACf,E,0CA3HyC,M,UAGL,G,WAGC,G,aAGG,M,cAGC,M,aAGc,M,WAGnC,G,0EASuB,M,0CAOoB,E,CAInEuB,iBACE1B,KAAKK,MAAMsB,O,CAabC,aAAaC,GACX,UAAWA,IAAa,SAAU,CAChC,IACE7B,KAAK8B,OAASC,KAAKC,MAAMH,E,CACzB,MAAOI,GACP,GAAIJ,EAAU,CACZ7B,KAAK8B,OAAS,CAACD,E,KACV,CACL7B,KAAK8B,OAAS,E,QAGb,GAAID,EAAU,CACnB7B,KAAK8B,OAASD,C,KACT,CACL7B,KAAK8B,OAAS,E,CAGhB9B,KAAKkC,QAAUlC,KAAK8B,OAAOK,OAAS,C,CAyDtCT,0BACE1B,KAAKoC,QAAU,iBAAiBtC,MAChCE,KAAK4B,aAAa5B,KAAKqC,OAEvB,IAAKrC,KAAKsC,aAAc,CACtBtC,KAAKsC,mBAAqBC,EAAkBvC,KAAKoB,QAAS,W,EAI9DoB,SACE,MAAMC,EAAkBC,EAAQ1C,KAAKoB,QAAS,kBAAoBpB,KAAK2C,YACvE,MAAMC,EAAsBF,EAAQ1C,KAAKoB,QAAS,uBAAyBpB,KAAK6C,gBAChF,MAAMC,EAAYJ,EAAQ1C,KAAKoB,QAAS,YAAcpB,KAAKqC,MAE3D,MAAMU,EAAU,CACd,gBAAiB,KACjB,iCAAkCN,EAClC,sCAAuCG,EACvC,2BAA4BE,EAC5B,6BAA8B9C,KAAKgD,SACnC,4BAA6BhD,KAAKkC,QAClC,6BAA8BlC,KAAKiD,UAGrC,OACEC,EAACC,EAAI,CAACC,SAAUpD,KAAKiD,SAAW,KAAO,KAAMpC,QAASb,KAAKW,aACzDuC,EAAA,OAAKG,MAAON,GACVG,EAAA,SAAOG,MAAM,gCACXH,EAAA,SACEG,MAAM,uBACNC,IAAMC,GAAQvD,KAAKK,MAAQkD,EAC3BC,KAAK,WACLC,GAAIzD,KAAKoC,QACTsB,KAAM1D,KAAK0D,KACXhD,MAAOV,KAAKU,MACZuC,SAAUjD,KAAKiD,SAAQ,mBACL,GAAGjD,KAAKoC,uBAAuBpC,KAAK2D,kBAAiB,gBACxD3D,KAAKgD,SAAW,OAAS,QAAO,eACjChD,KAAKkC,QAAU,OAAS,QACtC9B,QAASJ,KAAKI,QACdF,QAASF,KAAKE,QACdW,QAASb,KAAKa,QACdU,OAAQvB,KAAKuB,SAEf2B,EAAA,OAAKG,MAAM,uBACTH,EAAA,OAAKG,MAAM,uBAAuBO,UAAWC,KAE/CX,EAAA,OAAKG,MAAM,wBACRrD,KAAK8D,MAAQ9D,KAAK8D,MAAQZ,EAAA,aAC1BlD,KAAK+D,YACJb,EAAA,QAAMG,MAAM,yBACVH,EAAA,QAAMG,MAAM,+BAA8B,cAAa,QACpDrD,KAAKgD,SACFhD,KAAKsC,aAAa0B,SAASC,oBAC3BjE,KAAKsC,aAAa0B,SAASE,qBAGjChB,EAAA,QAAMG,MAAM,8BACTrD,KAAKgD,SACFhD,KAAKsC,aAAa0B,SAASG,kBAC3BnE,KAAKsC,aAAa0B,SAASI,sBAOzClB,EAACmB,EAAoB,CACnBC,YAAY,gBACZb,GAAI,GAAGzD,KAAKoC,sBACZC,MAAOrC,KAAK8B,OACZa,YAAa3C,KAAK2C,YAClBE,gBAAiB7C,KAAK6C,gBACtBD,oBAAqBA,EACrB2B,oBAAqBvE,KAAKsC,aAAa0B,SAASO,uB"}

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

	@@ -0,0 +1,2 @@
1	+ import{r as t,h as s,a as o,c as e,F as r,g as n}from"./p-9e02896c.js";import{h as i}from"./p-5c697491.js";import{f as h}from"./p-25a09313.js";const a=".sc-stzh-badge-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-badge-h{display:none}.sc-stzh-badge-h .sc-stzh-badge,.sc-stzh-badge-h .sc-stzh-badge::before,.sc-stzh-badge-h .sc-stzh-badge::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-badge-h{--color:var(--stzh-color-white);--background-color:var(--stzh-base-color);display:-ms-inline-flexbox;display:inline-flex}[type=success].sc-stzh-badge-h{--background-color:var(--stzh-color-truegreen)}[type=warning].sc-stzh-badge-h{--color:var(--stzh-color-grey87);--background-color:var(--stzh-color-warning)}[type=error].sc-stzh-badge-h{--background-color:var(--stzh-color-error)}[type=info].sc-stzh-badge-h{--background-color:var(--stzh-color-zueriblue)}.stzh-badge.sc-stzh-badge{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:normal;-webkit-box-sizing:content-box;box-sizing:content-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;min-width:0.625rem;font-size:0.625rem;line-height:1.4;-webkit-box-shadow:0 0 0 0.0625rem #fff;box-shadow:0 0 0 0.0625rem #fff;border-radius:0.875rem;padding:0.0625rem 0.375rem;background-color:var(--background-color);color:var(--color);text-transform:uppercase}.stzh-badge.sc-stzh-badge:empty{width:0.875rem;height:0.875rem;padding:0}";const c=class{constructor(s){t(this,s);this.label="";this.type="default"}render(){const t={"stzh-badge":true,[`stzh-badge--type-${this.type}`]:!!this.type};return s(o,null,s("div",{class:t},this.label))}};c.style=a;const l='@charset "UTF-8";.sc-stzh-button-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-button-h{display:none}.sc-stzh-button-h .sc-stzh-button,.sc-stzh-button-h .sc-stzh-button::before,.sc-stzh-button-h .sc-stzh-button::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-button-h{--color:var(--stzh-color-white);--background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--border-width:0.0625rem;--border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--border-radius:var(--stzh-button-border-radius);--height:var(--stzh-form-input-height);--icon-size:var(--stzh-icon-size-small);--icon-text-margin:var(--stzh-space-small);--badge-icon-text-margin:calc(var(--icon-text-margin) + var(--stzh-space-xxsmall));--padding:calc(var(--stzh-space-xsmall) - 0.0625rem) var(--stzh-space-xlarge);--white-space:normal;--border-radius:var(--stzh-button-border-radius);--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--floating-position:sticky;--floating-float:right;--floating-bottom:var(--stzh-space-medium);--floating-right:var(--stzh-space-medium);display:inline-block}@media screen and (min-width: 600px){.sc-stzh-button-h{--floating-bottom:var(--stzh-space-xlarge);--floating-right:var(--stzh-space-xlarge)}}[fullwidth].sc-stzh-button-h:not([fullwidth=false]){width:100%;display:block}[rounded].sc-stzh-button-h:not([rounded=false]){--border-radius:var(--height)}[floating].sc-stzh-button-h:not([floating=false]){position:var(--floating-position);bottom:var(--floating-bottom);right:var(--floating-right);float:var(--floating-float)}[size=small].sc-stzh-button-h{--height:var(--stzh-form-input-small-height)}[size=tiny].sc-stzh-button-h{--height:var(--stzh-form-input-tiny-height);--icon-text-margin:var(--stzh-space-xsmall);--padding:calc(var(--stzh-space-xxsmall) - 0.0625rem) var(--stzh-space-medium)}[variant=secondary].sc-stzh-button-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:var(--stzh-color-white);--border-color:var(--stzh-color-primary60op)}[variant=input].sc-stzh-button-h{--color:var(--stzh-color-grey61);--background-color:transparent;--border-color:var(--stzh-color-grey61);--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:transparent;--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}[variant=tertiary].sc-stzh-button-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:transparent;--border-color:transparent;--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:var(--stzh-button-text-hover-background);--hover-border-color:transparent}[active].sc-stzh-button-h:not([active=false]){--color:var(--stzh-color-white);--background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}[disabled].sc-stzh-button-h:not([disabled=false]),[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false]){--border-color:var(--stzh-color-grey13);--background-color:var(--stzh-color-grey13);--hover-border-color:var(--stzh-color-grey13);--hover-background-color:var(--stzh-color-grey13)}[disabled].sc-stzh-button-h:not([disabled=false])[variant=secondary],[disabled].sc-stzh-button-h:not([disabled=false])[variant=input],[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=secondary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=input],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=tertiary]{--color:var(--stzh-color-grey25);--border-color:var(--stzh-color-grey13);--background-color:transparent;--hover-color:var(--stzh-color-grey25);--hover-border-color:var(--stzh-color-grey13);--hover-background-color:transparent}@-webkit-keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}60%{-webkit-transform:translateX(-0.25rem);transform:translateX(-0.25rem)}}@keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}60%{-webkit-transform:translateX(-0.25rem);transform:translateX(-0.25rem)}}.sc-stzh-button-h .sc-stzh-button-s>stzh-icon,.stzh-button__icon.sc-stzh-button{--size:var(--icon-size)}.stzh-button.sc-stzh-button{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);line-height:1.25;font-family:inherit;position:relative;z-index:0;overflow:visible;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:stretch;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--color);padding:var(--padding);background-color:var(--background-color);-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;border-style:solid;border-width:var(--border-width);border-color:var(--border-color);cursor:pointer;-webkit-text-decoration-line:none;text-decoration-line:none;width:100%;min-width:var(--height);min-height:var(--height);border-radius:var(--border-radius);text-align:left}.stzh-button.sc-stzh-button:hover{border-color:var(--hover-border-color);background-color:var(--hover-background-color);color:var(--hover-color)}.stzh-button__vhidden.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button__inner.sc-stzh-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}.stzh-button__icon-wrapper.sc-stzh-button{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;width:auto;height:1em}.stzh-button__text.sc-stzh-button{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;white-space:var(--white-space);text-align:center}.stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--icon-text-margin)}.stzh-button__badge.sc-stzh-button{position:absolute;z-index:1;top:0;right:0}.stzh-button__input.sc-stzh-button{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.stzh-button__mark.sc-stzh-button{border:0.0625rem solid var(--stzh-color-grey61);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;-ms-flex-negative:0;flex-shrink:0;border-radius:50%;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:border-color var(--stzh-base-transition-animation-speed);transition:border-color var(--stzh-base-transition-animation-speed);width:1.25rem;height:1.25rem;margin-right:var(--stzh-space-xsmall);border-color:currentColor}.stzh-button__mark.sc-stzh-button::before{content:""}.stzh-button__check.sc-stzh-button{background-color:currentColor;color:var(--stzh-color-primary, var(--stzh-color-zueriblue));width:0.5rem;height:0.5rem;border-radius:50%;opacity:0}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-button__check.sc-stzh-button{background-color:ButtonText}}.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-button.sc-stzh-button:hover .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:focus:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-button__input.sc-stzh-button:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{opacity:1}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-grey61)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:transparent}.stzh-button--is-disabled.sc-stzh-button .stzh-button__mark.sc-stzh-button{background-color:var(--stzh-color-black8)}.stzh-button--size-small.sc-stzh-button,.stzh-button--size-tiny.sc-stzh-button{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-button--is-floating.sc-stzh-button{-webkit-box-shadow:var(--stzh-box-shadow-overlay);box-shadow:var(--stzh-box-shadow-overlay)}.stzh-button--badge-position-button.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:static}.stzh-button__badge.sc-stzh-button,.stzh-button--badge-position-button.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:relative}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--badge-icon-text-margin)}.stzh-button--has-icon-only.sc-stzh-button{width:var(--height);height:var(--height);padding:0}.stzh-button--has-icon-only.sc-stzh-button .stzh-button__text.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button--effect-cta.sc-stzh-button:hover .stzh-button__icon-wrapper.sc-stzh-button{-webkit-animation:stzh-button-effect-cta 1s;animation:stzh-button-effect-cta 1s}.stzh-button--align-left.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:start;justify-content:flex-start}.stzh-button--align-right.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:end;justify-content:flex-end}.stzh-button--align-center.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:center;justify-content:center}.stzh-button--align-space-between.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:justify;justify-content:space-between}.stzh-button--is-disabled.sc-stzh-button{cursor:not-allowed}';const b=class{constructor(s){t(this,s);this.stzhFocus=e(this,"stzhFocus",7);this.stzhBlur=e(this,"stzhBlur",7);this.stzhChange=e(this,"stzhChange",7);this.focusedByInput=false;this.onInput=t=>{this.checked=this.input.checked;this.stzhChange.emit({component:"stzh-button",originalEvent:t,value:this.value,checked:this.checked})};this.onRootFocus=()=>{if(!this.focusedByInput){this.setFocus()}this.focusedByInput=false};this.onFocus=t=>{this.focusedByInput=true;const s=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhFocus.emit({component:"stzh-button",originalEvent:t})};this.onBlur=t=>{const s=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhBlur.emit({component:"stzh-button",originalEvent:t})};this.onClick=t=>{if(this.disabled){t.stopPropagation();t.preventDefault()}};this.localization=undefined;this.badge="";this.badgeType="default";this.badgePosition="button";this.badgeEmpty=false;this.fullwidth=false;this.rounded=false;this.floating=false;this.size="default";this.textAlign="default";this.variant="default";this.icon="";this.iconPosition="left";this.checked=false;this.name="";this.value="";this.href="";this.rel=undefined;this.target="";this.download=undefined;this.type="button";this.disabled=false;this.active=false;this.label="";this.effect="default";this.iconOnly=false;this.linkAccesskey=undefined;this.a11yLabel=undefined;this.a11yDescribedby="";this.a11yExpanded=undefined;this.a11yDisabled=undefined;this.a11yControls=undefined;this.a11yTabindex=undefined;this.analyticsId=undefined}async setFocus(){this.button.focus()}renderIcon(t){return s("div",{class:"stzh-button__icon-wrapper"},this.icon?s("stzh-icon",{class:"stzh-button__icon",name:this.icon}):s("slot",{name:"icon"}),(this.badge\|\|this.badgeEmpty)&&this.badgePosition==="icon"&&t&&s("stzh-badge",{class:"stzh-button__badge",label:this.badge,type:this.badgeType}))}renderContent(){return s("div",{class:"stzh-button__text"},this.rel&&this.rel.includes("external")&&s("div",{class:"stzh-button__vhidden"},this.localization.$globals.externalLinkLabel),this.download&&s("div",{class:"stzh-button__vhidden"},this.localization.$globals.downloadLinkLabel),s("div",{ref:t=>this.text=t},this.label?this.label:s("slot",null)))}renderInner(t){return s(r,null,s("div",{class:"stzh-button__inner",onClick:this.onClick},this.type==="radio"&&s("div",{class:"stzh-button__mark"},s("div",{class:"stzh-button__check"})),this.iconPosition==="left"&&this.renderIcon(t),this.renderContent(),this.iconPosition==="right"&&this.renderIcon(t)),(this.badge\|\|this.badgeEmpty)&&(this.badgePosition==="button"\|\|!t)&&s("stzh-badge",{class:"stzh-button__badge",label:this.badge,type:this.badgeType,onClick:this.onClick}))}async componentWillLoad(){if(!this.localization){this.localization=await h(this.element,"button")}}componentDidRender(){requestAnimationFrame((()=>{this.button.setAttribute("s-object-id",this.analyticsId\|\|this.text.innerText)}))}render(){const t=i(this.element,"icon")\|\|!!this.icon;const e={"stzh-button":true,"stzh-button--has-icon":t,"stzh-button--has-icon-only":this.iconOnly,"stzh-button--has-badge":!!this.badge,"stzh-button--is-floating":this.floating,"stzh-button--is-rounded":this.rounded,"stzh-button--is-fullwidth":this.fullwidth,"stzh-button--is-disabled":this.disabled\|\|this.a11yDisabled,"stzh-button--is-active":this.active,[`stzh-button--effect-${this.effect}`]:!!this.effect,[`stzh-button--badge-position-${this.badgePosition}`]:!!this.badgePosition,[`stzh-button--align-${this.textAlign}`]:!!this.textAlign,[`stzh-button--size-${this.size}`]:!!this.size,[`stzh-button--type-${this.type}`]:!!this.type,[`stzh-button--${this.variant}`]:!!this.variant};return s(o,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},this.href?s("a",{ref:t=>this.button=t,href:this.disabled?null:this.href,rel:this.rel,download:this.download,target:this.target,class:e,"aria-label":this.a11yLabel,"aria-describedby":this.a11yDescribedby,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},this.renderInner(t)):this.type==="radio"?s("label",{ref:t=>this.button=t,class:e,onClick:this.onClick},s("input",{ref:t=>this.input=t,type:"radio",class:"stzh-button__input",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,"aria-label":this.a11yLabel,"aria-describedby":this.a11yDescribedby,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick,onInput:this.onInput}),this.renderInner(t)):s("button",{ref:t=>this.button=t,class:e,type:this.type,disabled:this.disabled,"aria-label":this.a11yLabel,"aria-describedby":this.a11yDescribedby,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},this.renderInner(t)))}get element(){return n(this)}};b.style=l;const u=".sc-stzh-icon-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-icon-h{display:none}.sc-stzh-icon-h .sc-stzh-icon,.sc-stzh-icon-h .sc-stzh-icon::before,.sc-stzh-icon-h *.sc-stzh-icon::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-icon-h{--size:var(--stzh-icon-size-default);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:currentColor;vertical-align:text-top}.stzh-icon.sc-stzh-icon{width:var(--size);height:var(--size)}";let z=0;const d=class{constructor(s){t(this,s);this.name="";this.a11yTitle=""}componentWillLoad(){this.iconId=`stzh-icon-${z++}`}render(){return s(o,null,this.name&&s("svg",{class:"stzh-icon",role:this.a11yTitle?"img":"presentation","aria-hidden":this.a11yTitle?null:"true",focusable:this.a11yTitle?"true":"false","aria-labelledby":this.a11yTitle?`${this.iconId}-title`:null},this.a11yTitle&&s("title",{id:`${this.iconId}-title`},this.a11yTitle),s("use",{href:`#stzh-icon-${this.name}`})))}};d.style=u;export{c as stzh_badge,b as stzh_button,d as stzh_icon};
2	+ //# sourceMappingURL=p-9d46101e.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"names":["stzhBadgeCss","StzhBadge","render","classes","this","type","h","Host","class","label","stzhButtonCss","StzhButton","focusedByInput","onInput","event","checked","input","stzhChange","emit","component","originalEvent","value","onRootFocus","setFocus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","onClick","disabled","stopPropagation","preventDefault","async","button","focus","renderIcon","iconUsed","icon","name","badge","badgeEmpty","badgePosition","badgeType","renderContent","rel","includes","localization","$globals","externalLinkLabel","download","downloadLinkLabel","ref","el","text","renderInner","Fragment","iconPosition","fetchTranslations","componentDidRender","requestAnimationFrame","setAttribute","analyticsId","innerText","hasSlot","iconOnly","floating","rounded","fullwidth","a11yDisabled","active","effect","textAlign","size","variant","tabindex","href","target","a11yLabel","a11yDescribedby","a11yExpanded","a11yControls","accessKey","linkAccesskey","a11yTabindex","stzhIconCss","iconCounter","StzhIcon","componentWillLoad","iconId","role","a11yTitle","focusable","id"],"sources":["./src/components/stzh-badge/stzh-badge.scss?tag=stzh-badge&encapsulation=scoped","./src/components/stzh-badge/stzh-badge.tsx","./src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","./src/components/stzh-button/stzh-button.tsx","./src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=scoped","./src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":[":host {\n --color: #{$colorWhite};\n --background-color: #{$baseColor};\n display: inline-flex;\n\n &[type=\"success\"] {\n --background-color: #{$colorTruegreen};\n }\n\n &[type=\"warning\"] {\n --color: #{$colorGrey87};\n --background-color: #{$colorWarning};\n }\n\n &[type=\"error\"] {\n --background-color: #{$colorError};\n }\n\n &[type=\"info\"] {\n --background-color: #{$colorZueriblue};\n }\n}\n\n.stzh-badge {\n @include badge;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot badge content\n */\n@Component({\n tag: \"stzh-badge\",\n styleUrl: \"stzh-badge.scss\",\n scoped: true\n})\nexport class StzhBadge {\n /** Text content of the badge */\n @Prop() label: string = \"\";\n\n /** Type */\n @Prop({ reflect: true }) type: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n render() {\n const classes = {\n \"stzh-badge\": true,\n [`stzh-badge--type-${this.type}`]: !!this.type\n };\n\n return (\n <Host>\n <div class={classes}>\n {this.label}\n </div>\n </Host>\n );\n }\n}\n",":host {\n --color: #{$colorWhite};\n --background-color: #{$colorPrimary};\n --border-width: 1px;\n --border-color: #{$colorPrimary};\n --border-radius: #{$buttonBorderRadius};\n --height: #{$formInputHeight};\n --icon-size: #{iconSize('small')};\n --icon-text-margin: #{space('small')};\n --badge-icon-text-margin: calc(var(--icon-text-margin) + #{space('xxsmall')});\n --padding: calc(#{space('xsmall')} - 1px) #{space('xlarge')};\n --white-space: normal;\n --border-radius: #{$buttonBorderRadius};\n\n --hover-color: #{$colorWhite};\n --hover-background-color: #{$colorPrimaryHover};\n --hover-border-color: #{$colorPrimaryHover};\n\n --floating-position: sticky;\n --floating-float: right;\n --floating-bottom: #{space('medium')};\n --floating-right: #{space('medium')};\n\n display: inline-block;\n\n @include mq($from: small) {\n --floating-bottom: #{space('xlarge')};\n --floating-right: #{space('xlarge')};\n }\n\n &[fullwidth]:not([fullwidth=\"false\"]) {\n width: 100%;\n display: block;\n }\n\n &[rounded]:not([rounded=\"false\"]) {\n --border-radius: var(--height);\n }\n\n &[floating]:not([floating=\"false\"]) {\n position: var(--floating-position);\n bottom: var(--floating-bottom);\n right: var(--floating-right);\n float: var(--floating-float);\n }\n\n &[size=\"small\"] {\n --height: #{$formInputHeightSmall};\n }\n\n &[size=\"tiny\"] {\n --height: #{$formInputHeightTiny};\n --icon-text-margin: #{space('xsmall')};\n --padding: calc(#{space('xxsmall')} - 1px) #{space('medium')};\n }\n\n &[variant=\"secondary\"] {\n --color: #{$colorPrimary};\n --background-color: #{$colorWhite};\n --border-color: #{$colorPrimary60op};\n }\n\n &[variant=\"input\"] {\n --color: #{$formColor};\n --background-color: transparent;\n --border-color: #{$formBorderColor};\n\n --hover-color: #{$colorPrimaryHover};\n --hover-background-color: transparent;\n --hover-border-color: #{$colorPrimaryHover};\n }\n\n &[variant=\"tertiary\"] {\n --color: #{$colorPrimary};\n --background-color: transparent;\n --border-color: transparent;\n\n --hover-color: #{$colorPrimaryHover};\n --hover-background-color: #{$buttonTextHoverBackground};\n --hover-border-color: transparent;\n }\n\n &[active]:not([active=\"false\"]) {\n --color: #{$colorWhite};\n --background-color: #{$colorPrimaryHover};\n --border-color: #{$colorPrimaryHover};\n\n --hover-color: #{$colorWhite};\n --hover-background-color: #{$colorPrimaryHover};\n --hover-border-color: #{$colorPrimaryHover};\n }\n\n &[disabled]:not([disabled=\"false\"]),\n &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n --border-color: #{$colorGrey13};\n --background-color: #{$colorGrey13};\n\n --hover-border-color: #{$colorGrey13};\n --hover-background-color: #{$colorGrey13};\n }\n\n &[disabled]:not([disabled=\"false\"])[variant=\"secondary\"],\n &[disabled]:not([disabled=\"false\"])[variant=\"input\"],\n &[disabled]:not([disabled=\"false\"])[variant=\"tertiary\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"secondary\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"input\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary\"] {\n --color: #{$colorGrey25};\n --border-color: #{$colorGrey13};\n --background-color: transparent;\n\n --hover-color: #{$colorGrey25};\n --hover-border-color: #{$colorGrey13};\n --hover-background-color: transparent;\n }\n}\n\n@keyframes stzh-button-effect-cta {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n:host ::slotted(stzh-icon),\n.stzh-button__icon {\n --size: var(--icon-size);\n}\n\n.stzh-button {\n @include fontSize('milli');\n line-height: 1.25;\n font-family: inherit;\n position: relative;\n z-index: 0;\n overflow: visible;\n display: flex;\n align-items: center;\n justify-content: stretch;\n appearance: none;\n color: var(--color);\n padding: var(--padding);\n background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color, border-color;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--border-color);\n cursor: pointer;\n text-decoration-line: none;\n width: 100%;\n min-width: var(--height);\n min-height: var(--height);\n border-radius: var(--border-radius);\n text-align: left;\n\n &:hover {\n border-color: var(--hover-border-color);\n background-color: var(--hover-background-color);\n color: var(--hover-color);\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__inner {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-grow: 1;\n }\n\n &__icon-wrapper {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: auto;\n height: 1em;\n }\n\n &__text {\n @include wordWrap;\n white-space: var(--white-space);\n text-align: center;\n }\n\n &__icon-wrapper:not(:empty) + &__text:not(:empty),\n &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n margin-left: var(--icon-text-margin);\n }\n\n &__badge {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n }\n\n &__input {\n @include visuallyhiddenInput;\n }\n\n &__mark {\n @include radio__mark();\n width: 20px;\n height: 20px;\n margin-right: space('xsmall');\n border-color: currentColor;\n }\n\n &__check {\n @include radio__check();\n }\n\n /* Hover / Focus / Checked / Disabled of Radio Type */\n\n &__input:checked:hover ~ &__inner &__mark &__check,\n &__input:checked:focus ~ &__inner &__mark &__check {\n color: $colorPrimaryHover;\n }\n\n &:hover &__mark,\n &__input:focus:hover ~ &__inner &__mark,\n &__input:checked:hover ~ &__inner &__mark,\n &__input:checked:focus ~ &__inner &__mark {\n border-color: $colorPrimaryHover;\n }\n\n &__input:focus ~ &__inner &__mark,\n &__input:checked ~ &__inner &__mark {\n border-color: $colorPrimary;\n }\n\n &__input:checked ~ &__inner &__mark &__check {\n opacity: 1;\n }\n\n &--is-disabled &__input ~ &__inner &__mark &__check {\n color: $formDisabledColor;\n }\n\n &--is-disabled &__input ~ &__inner &__mark {\n border-color: $formDisabledBorderColor;\n }\n\n &--is-disabled &__mark {\n background-color: $formDisabledBackgroundColor;\n }\n\n /* Size variants */\n\n &--size-small,\n &--size-tiny {\n @include fontSize('micro');\n }\n\n /* Floating */\n\n &--is-floating {\n box-shadow: $boxShadowOverlay;\n }\n\n /* Badge positioning variants */\n\n &--badge-position-button &__icon-wrapper {\n position: static;\n }\n\n &__badge,\n &--badge-position-button &__badge {\n top: calc(#{space('xsmall')} * -1);\n right: calc(#{space('xsmall')} * -1);\n }\n\n &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n position: relative;\n }\n\n &--badge-position-icon#{&}--has-icon &__badge {\n top: calc(#{space('xsmall')} * -1);\n right: calc(#{space('small')} * -1);\n }\n\n &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper:not(:empty) + &__text:not(:empty),\n &--badge-position-icon#{&}--has-icon#{&}--has-badge &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n margin-left: var(--badge-icon-text-margin);\n }\n\n /* Variant if button only has icon */\n\n &--has-icon-only {\n width: var(--height);\n height: var(--height);\n padding: 0;\n }\n\n &--has-icon-only &__text {\n @include visuallyhidden;\n }\n\n /* Effect */\n\n &--effect-cta:hover &__icon-wrapper {\n\t\tanimation: stzh-button-effect-cta 1s;\n }\n\n /* Alignment variants */\n\n &--align-left &__inner {\n justify-content: flex-start;\n }\n\n &--align-right &__inner {\n justify-content: flex-end;\n }\n\n &--align-center &__inner {\n justify-content: center;\n }\n\n &--align-space-between &__inner {\n justify-content: space-between;\n }\n\n /* Disabled variant */\n\n &--is-disabled {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n Method,\n Fragment,\n Element,\n h,\n Prop,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhButtonFocusEvent,\n StzhButtonBlurEvent,\n StzhButtonChangeEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot - Slot for label/text content\n * @slot icon - Slot for icon element\n */\n@Component({\n tag: \"stzh-button\",\n styleUrl: \"stzh-button.scss\",\n scoped: true\n})\nexport class StzhButton {\n /** Translation strings */\n @Prop() localization: StzhLocaleComponent;\n\n /** Display a badge aligned to button or icons */\n @Prop() badge: string = \"\";\n\n /** Badge type */\n @Prop({ reflect: true }) badgeType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n /** Badge position */\n @Prop({ reflect: true }) badgePosition: \"icon\" | \"button\" = \"button\";\n\n /** Whether badge should be displayed empty */\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n /** Whether the button is full width */\n @Prop({ reflect: true }) fullwidth: boolean = false;\n\n /** Whether the button is rounded */\n @Prop({ reflect: true }) rounded: boolean = false;\n\n /** Whether the button is floating */\n @Prop({ reflect: true }) floating: boolean = false;\n\n /** Size variant */\n @Prop({ reflect: true }) size: \"default\" | \"small\" | \"tiny\" = \"default\";\n\n /** Text alignment */\n @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n /** Variant style */\n @Prop({ reflect: true }) variant: \"default\" | \"secondary\" | \"input\" | \"tertiary\" = \"default\";\n\n /** Icon (use instead of icon slot) */\n @Prop() icon: string = \"\";\n\n /** Icon Position */\n @Prop({ reflect: true }) iconPosition: \"left\" | \"right\" = \"left\";\n\n /** Checked status (if type is radio) */\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /** The name of the input element (if type is radio) */\n @Prop({ reflect: true }) name: string = \"\";\n\n /** The value of the input element (if type is radio) */\n @Prop({ mutable: true }) value: string = \"\";\n\n /** `href` if the button should be used as link */\n @Prop() href: string = \"\";\n\n /** Rel (if href is used) */\n @Prop() rel: string;\n\n /** Target if the button is used as link (if `href` used) */\n @Prop() target: string = \"\";\n\n /** Download attribute of link (if `href` used) */\n @Prop() download: string;\n\n /** Type of the button */\n @Prop() type: \"button\" | \"submit\" | \"reset\" | \"radio\" = \"button\";\n\n /** Whether the button is disabled */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** Whether the button is active */\n @Prop({ reflect: true }) active: boolean = false;\n\n /** Label */\n @Prop() label: string = \"\";\n\n /** Effect/Animation used */\n @Prop() effect: \"default\" | \"cta\" = \"default\";\n\n /** Whether only an icon is used inside the button */\n @Prop({ reflect: true }) iconOnly: boolean = false;\n\n /** Access key of link (usually a number e.g. 1) */\n @Prop() linkAccesskey: string;\n\n /** Accessible label for screen readers to replace visible text */\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /** Aria expanded of link/button */\n @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n /** Aria disabled of link/button */\n @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n /** Aria controls of link/button */\n @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n /** Tabindex of link/button */\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /**\n * For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n */\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhButtonElement;\n\n /** Focus button */\n @Method()\n async setFocus() {\n this.button.focus();\n }\n\n /** Focus event */\n @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n /** Input blur event */\n @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n /** Change event (only called if type is radio) */\n @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n private button: HTMLButtonElement | HTMLAnchorElement | HTMLLabelElement;\n private input: HTMLInputElement;\n private text: HTMLDivElement;\n private focusedByInput: boolean = false;\n\n private onInput = (event: InputEvent) => {\n this.checked = this.input.checked;\n this.stzhChange.emit({\n component: \"stzh-button\",\n originalEvent: event,\n value: this.value,\n checked: this.checked\n });\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.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-button\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-button\",\n originalEvent: event\n });\n }\n\n private onClick = (event: MouseEvent) => {\n if (this.disabled) {\n event.stopPropagation();\n event.preventDefault();\n }\n }\n\n private renderIcon(iconUsed: boolean): HTMLInputElement {\n return (\n <div class=\"stzh-button__icon-wrapper\">\n {this.icon ?\n <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>\n :\n <slot name=\"icon\"></slot>\n }\n {(this.badge || this.badgeEmpty) && this.badgePosition === \"icon\" && iconUsed &&\n <stzh-badge class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div class=\"stzh-button__text\">\n {this.rel && this.rel.includes('external') && <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-button__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n <div ref={(el) => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\n </div>\n );\n }\n\n private renderInner(iconUsed: boolean): DocumentFragment {\n return (\n <Fragment>\n <div\n class=\"stzh-button__inner\"\n onClick={this.onClick}\n >\n {this.type === \"radio\" &&\n <div class=\"stzh-button__mark\">\n <div class=\"stzh-button__check\"></div>\n </div>\n }\n {this.iconPosition === \"left\" && this.renderIcon(iconUsed)}\n {this.renderContent()}\n {this.iconPosition === \"right\" && this.renderIcon(iconUsed)}\n </div>\n {(this.badge || this.badgeEmpty) && (this.badgePosition === \"button\" || !iconUsed) &&\n <stzh-badge\n class=\"stzh-button__badge\"\n label={this.badge}\n type={this.badgeType}\n onClick={this.onClick}\n ></stzh-badge>\n }\n </Fragment>\n );\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await fetchTranslations(this.element, \"button\");\n }\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.button.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n });\n }\n\n render() {\n const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n const classes = {\n \"stzh-button\": true,\n \"stzh-button--has-icon\": iconUsed,\n \"stzh-button--has-icon-only\": this.iconOnly,\n \"stzh-button--has-badge\": !!this.badge,\n \"stzh-button--is-floating\": this.floating,\n \"stzh-button--is-rounded\": this.rounded,\n \"stzh-button--is-fullwidth\": this.fullwidth,\n \"stzh-button--is-disabled\": this.disabled || this.a11yDisabled,\n \"stzh-button--is-active\": this.active,\n [`stzh-button--effect-${this.effect}`]: !!this.effect,\n [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,\n [`stzh-button--size-${this.size}`]: !!this.size,\n [`stzh-button--type-${this.type}`]: !!this.type,\n [`stzh-button--${this.variant}`]: !!this.variant\n };\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n {this.href ?\n <a\n ref={(el) => (this.button = el as HTMLAnchorElement)}\n href={this.disabled ? null : this.href}\n rel={this.rel}\n download={this.download}\n target={this.target}\n class={classes}\n aria-label={this.a11yLabel}\n aria-describedby={this.a11yDescribedby}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls}\n accessKey={this.linkAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n >\n {this.renderInner(iconUsed)}\n </a>\n :\n this.type === \"radio\" ?\n <label\n ref={(el) => (this.button = el as HTMLLabelElement)}\n class={classes}\n onClick={this.onClick}\n >\n <input\n ref={(el) => (this.input = el as HTMLInputElement)}\n type=\"radio\"\n class=\"stzh-button__input\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n aria-label={this.a11yLabel}\n aria-describedby={this.a11yDescribedby}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls}\n accessKey={this.linkAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n onInput={this.onInput}\n />\n {this.renderInner(iconUsed)}\n </label>\n :\n <button\n ref={(el) => (this.button = el as HTMLButtonElement)}\n class={classes}\n type={this.type}\n disabled={this.disabled}\n aria-label={this.a11yLabel}\n aria-describedby={this.a11yDescribedby}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls}\n accessKey={this.linkAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n >\n {this.renderInner(iconUsed)}\n </button>\n }\n </Host>\n );\n }\n}\n",":host {\n --size: #{iconSize()};\n\n display: inline-flex;\n justify-content: center;\n align-items: center;\n color: currentColor;\n vertical-align: text-top;\n}\n\n.stzh-icon {\n width: var(--size);\n height: var(--size);\n}\n","import {\n Component,\n Host,\n h,\n Prop\n} from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n@Component({\n tag: \"stzh-icon\",\n styleUrl: \"stzh-icon.scss\",\n scoped: true\n})\nexport class StzhIcon {\n /**\n * Icon which should be displayed\n * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n */\n @Prop() name: string = \"\";\n\n /**\n * Hidden icon title for screenreader\n * (usually not needed when e.g. inside links or buttons that have text)\n */\n @Prop({ attribute: 'a11y-title' }) a11yTitle: string = \"\";\n\n private iconId: string;\n\n componentWillLoad() {\n this.iconId = `stzh-icon-${iconCounter++}`;\n }\n\n render() {\n return (\n <Host>\n {this.name &&\n <svg\n class=\"stzh-icon\"\n role={this.a11yTitle ? 'img' : 'presentation'}\n aria-hidden={this.a11yTitle ? null : 'true'}\n focusable={this.a11yTitle ? 'true' : 'false'}\n aria-labelledby={this.a11yTitle ? `${this.iconId}-title` : null}\n >\n {this.a11yTitle &&\n <title id={`${this.iconId}-title`}>\n {this.a11yTitle}\n </title>\n }\n <use href={`#stzh-icon-${this.name}`}></use>\n </svg>\n }\n </Host>\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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"}