npm - @oiz/stzh-components - Versions diffs - 3.0.0 → 3.1.0 - Mend

@oiz/stzh-components 3.0.0 → 3.1.0

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 (713) hide show

package/dist/components/stzh-chipselect2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-chipselect2.js","mappings":"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","names":[],"sources":["src/components/stzh-chipselect/stzh-chipselect.scss?tag=stzh-chipselect&encapsulation=scoped","src/components/stzh-chipselect/stzh-chipselect.tsx"],"sourcesContent":[":host {\n &[disabled]:not([disabled=\"false\"]) {\n --description-color: #{$formDisabledColor};\n }\n}\n\n.stzh-chipselect {\n\t@include input-description;\n\n &__label {\n @include font('heavy');\n @include fontSize('micro');\n @include truncate;\n color: $headingColor;\n display: block;\n margin-bottom: space('xsmall');\n\n &:empty {\n display: none;\n }\n }\n\n &__marker {\n @include fontSize('nano');\n margin-left: calc(-0.25em + #{space('xsmall')});\n }\n\n &__chips {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n border-radius: $buttonBorderRadius;\n column-gap: space('medium');\n\n @include mq($from: medium) {\n row-gap: space('medium');\n }\n\n // @include mq($to: medium) {\n // display: none;\n // }\n }\n\n &__chip {\n &.is-focused,\n &.is-focused[active]:not([active=false]) {\n --background-color: #{$colorSecondary40};\n\n @include highContrast() {\n --background-color: Highlight;\n }\n }\n\n &.is-focused[active]:not([active=false]) {\n --background-color: #{$colorPrimary90};\n\n @include highContrast() {\n --background-color: Canvas;\n }\n }\n }\n\n // &__dropdown {\n // @include mq($from: medium) {\n // display: none;\n // }\n // }\n\n // &__description-wrapper {\n // @include mq($to: medium) {\n // display: none;\n // }\n // }\n\n &--has-error &__error,\n &--has-description &__description {\n margin-top: space('xsmall');\n }\n\n /* Hidden label /\n\n &--has-label-hidden &__label {\n @include visuallyhidden;\n }\n\n / Disabled /\n\n &--is-disabled &__chips,\n &--is-disabled &__label {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n Event,\n EventEmitter,\n State,\n Fragment,\n Listen,\n} from \"@stencil/core\";\n\nimport {\n StzhChipselectItem,\n StzhChipselectChangeEvent,\n // StzhDropdownChangeEvent\n} from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\n// import { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet chipselectCounter = 0;\n\n/\n @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n /\n@Component({\n tag: \"stzh-chipselect\",\n styleUrl: \"stzh-chipselect.scss\",\n scoped: true\n})\nexport class StzhChipselect {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* The list of chips /\n @Prop() data: string \| StzhChipselectItem[] = [];\n private _data: StzhChipselectItem[] = [];\n // private _dataDropdown: any[] = [];\n\n /* The name of the input element /\n @Prop({ reflect: true }) name: string;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Whether label is hidden. /\n @Prop() labelHidden: boolean = false;\n\n /* Multiple /\n @Prop({ mutable: true }) multiple: boolean = false;\n\n /* Value /\n @Prop({ mutable: true }) value: string \| string[] = \"\";\n private _value: string[] = [];\n\n /* Default value (used by reset) /\n @Prop({ mutable: true }) defaultValue: string \| string[] = \"\";\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /* Long description title appearing in a popover (use description-long-title slot as or description property alternative) /\n @Prop() descriptionLongTitle: string;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n private _error: string[];\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /* Whether all chips are disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form ot hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n @State() activeFocusOptionIndex: number = 0;\n\n @Element() element: HTMLStzhChipselectElement;\n\n /* Change event /\n @Event() stzhChange: EventEmitter<StzhChipselectChangeEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"value\")\n valueWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n try {\n this._value = JSON.parse(newValue);\n } catch(ex) {\n this._value = newValue ? [newValue] : [];\n }\n } else {\n this._value = newValue ? newValue : [];\n }\n }\n\n @Watch(\"data\")\n dataWatcher(newValue: StzhChipselectItem[] \| string) {\n if (typeof newValue === \"string\") {\n this._data = JSON.parse(newValue);\n } else {\n this._data = newValue;\n }\n\n // this._dataDropdown = this._data.map((data) => {\n // return {\n // text: data.counter\n // ? `${data.label} (${data.counter})`\n // : data.label,\n // value: data.value\n // }\n // });\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string \| string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n private id: string;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private waitForNextRender() {\n return new Promise(resolve => this.renderPromiseResolve = resolve);\n }\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n\n // this.stzhChange.emit({\n // component: \"stzh-chipselect\",\n // value: this.value\n // });\n }\n\n private handleChipClick = async (data: StzhChipselectItem, index: number) => {\n if (this.multiple) {\n if (data.value === \"\" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === \"\")) {\n this.value = [];\n } else if (data.value !== \"\") {\n this.value = this._value.includes(data.value)\n ? this._value.filter(value => value !== data.value)\n : [...this._value, data.value];\n }\n } else {\n this.value = [data.value]\n }\n\n this.activeFocusOptionIndex = index;\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.multiple ? this._value[0] : this._value\n })\n }\n\n // private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n // this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n\n // this.activeFocusOptionIndex = this._data.findIndex(data => {\n // return data.value === this.value;\n // });\n\n // await this.waitForNextRender();\n\n // this.stzhChange.emit({\n // component: \"stzh-chipselect\",\n // value: this.value\n // })\n // }\n\n private handleKeydown = (event: KeyboardEvent) => {\n let newActiveIndex: number = null;\n const activeOptionIndex = this.activeFocusOptionIndex;\n\n if (event.key === \"ArrowUp\" \|\| event.key === \"ArrowLeft\") {\n event.preventDefault();\n\n if (activeOptionIndex > 0) {\n newActiveIndex = activeOptionIndex - 1;\n }\n } else if (event.key === \"ArrowDown\" \|\| event.key === \"ArrowRight\") {\n event.preventDefault();\n\n if (activeOptionIndex < this._data.length - 1) {\n newActiveIndex = activeOptionIndex + 1;\n }\n } else if (event.key === \" \" \|\| event.key === \"Enter\") {\n event.preventDefault();\n this.value = this._data[activeOptionIndex].value;\n\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.value\n });\n }\n\n if (newActiveIndex !== null) {\n this.activeFocusOptionIndex = newActiveIndex;\n }\n }\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n }\n\n async componentWillLoad() {\n this.id = `stzh-chipselect-${chipselectCounter++}`;\n\n this.dataWatcher(this.data);\n this.errorWatcher(this.error);\n this.valueWatcher(this.value);\n\n this.defaultValue = this.defaultValue \|\| this.value;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"chipselect\");\n }\n }\n\n render() {\n const descriptionUsed = !!this.description;\n const descriptionLongUsed = !!this.descriptionLong;\n const errorUsed = !!this.error;\n\n const classes = {\n \"stzh-chipselect\": true,\n \"stzh-chipselect--has-description\": descriptionUsed,\n \"stzh-chipselect--has-description-long\": descriptionLongUsed,\n \"stzh-chipselect--has-error\": errorUsed,\n \"stzh-chipselect--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-chipselect--is-disabled\": this.disabled,\n \"stzh-chipselect--is-required\": this.required,\n \"stzh-chipselect--has-label-hidden\": this.labelHidden,\n };\n\n return (\n <Host is-invalid={this.invalid \|\| errorUsed}>\n <div class={classes}>\n {this.multiple\n ?\n <Fragment>\n {this._value.map((value) =>\n <input type=\"hidden\" name={this.name} value={value} />\n )}\n </Fragment>\n :\n <input\n type=\"hidden\"\n name={this.name}\n value={this.value}\n />\n }\n\n <label class=\"stzh-chipselect__label\" htmlFor={this.id}>\n {this.label ? this.label : <slot></slot>}\n {!this.hideOptional &&\n <span class=\"stzh-chipselect__marker\">\n <span class=\"stzh-chipselect__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-chipselect__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText\n }\n </span>\n </span>\n }\n </label>\n\n {this._data.length > 0 &&\n <Fragment>\n <div\n id={this.id}\n class=\"stzh-chipselect__chips\"\n role=\"listbox\"\n tabindex=\"0\"\n aria-multiselectable={this.multiple ? \"true\" : \"false\"}\n aria-activedescendant={`${this.id}-option-${this.activeFocusOptionIndex}`}\n aria-describedby={`${this.id}-description ${this.a11yDescribedby}`}\n onKeyDown={this.handleKeydown}\n >\n {this._data.map((data, index) => (\n <stzh-chip\n role=\"option\"\n class={{\n \"stzh-chipselect__chip\": true,\n \"is-focused\": this.activeFocusOptionIndex === index\n }}\n label={data.label}\n counter={data.counter}\n icon={data.icon}\n type={data.type}\n inverted={data.inverted}\n variant={data.variant}\n size={data.size \|\| \"small\"}\n disabled={this.disabled \|\| data.disabled}\n active={\n this._value.includes(data.value)\n \|\| (!this.multiple && !data.value && (this._value.length === 0 \|\| this._value[0] === \"\"))\n \|\| (!data.value && this.multiple && (this._value.length === 0 \|\| (this._value.length === 1 && this._value[0] === \"\")))\n }\n aria-selected={\n this._value.includes(data.value)\n \|\| (!this.multiple && !data.value && (this._value.length === 0 \|\| this._value[0] === \"\"))\n \|\| (!data.value && this.multiple && (this._value.length === 0 \|\| (this._value.length === 1 && this._value[0] === \"\")))\n ? \"true\" : \"false\"\n }\n id={`${this.id}-option-${index}`}\n a11yTabindex=\"-1\"\n onClick={() => this.handleChipClick(data, index)}\n ></stzh-chip>\n ))}\n </div>\n\n <StzhInputDescription\n classPrefix=\"stzh-chipselect\"\n id={`${this.id}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n\n {/ <stzh-dropdown\n class=\"stzh-chipselect__dropdown\"\n multiple={this.multiple}\n disabled={this.disabled}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n required={this.required}\n invalid={this.invalid}\n items={[this.value]}\n label={this.label}\n labelHidden={this.labelHidden}\n options={this._dataDropdown}\n hideOptional={this.hideOptional}\n onStzhChange={this.handleDropdownChange}\n ></stzh-dropdown> */}\n </Fragment>\n }\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-chipselect2.js","mappings":"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","names":[],"sources":["src/components/stzh-chipselect/stzh-chipselect.scss?tag=stzh-chipselect&encapsulation=scoped","src/components/stzh-chipselect/stzh-chipselect.tsx"],"sourcesContent":[":host {\n &[disabled]:not([disabled=\"false\"]) {\n --description-color: #{$formDisabledColor};\n }\n}\n\n.stzh-chipselect {\n\t@include input-description;\n\n &__label {\n @include font('heavy');\n @include fontSize('micro');\n @include truncate;\n color: $headingColor;\n display: block;\n margin-bottom: space('xsmall');\n\n &:empty {\n display: none;\n }\n }\n\n &__marker {\n @include fontSize('nano');\n margin-left: calc(-0.25em + #{space('xsmall')});\n }\n\n &__chips {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n border-radius: $buttonBorderRadius;\n column-gap: space('medium');\n\n @include mq($from: medium) {\n row-gap: space('medium');\n }\n\n // @include mq($to: medium) {\n // display: none;\n // }\n }\n\n &__chip {\n &.is-focused,\n &.is-focused[active]:not([active=false]) {\n --background-color: #{$colorSecondary40};\n\n @include highContrast() {\n --background-color: Highlight;\n }\n }\n\n &.is-focused[active]:not([active=false]) {\n --background-color: #{$colorPrimary90};\n\n @include highContrast() {\n --background-color: Canvas;\n }\n }\n }\n\n // &__dropdown {\n // @include mq($from: medium) {\n // display: none;\n // }\n // }\n\n // &__description-wrapper {\n // @include mq($to: medium) {\n // display: none;\n // }\n // }\n\n &--has-error &__error,\n &--has-description &__description {\n margin-top: space('xsmall');\n }\n\n /* Hidden label /\n\n &--has-label-hidden &__label {\n @include visuallyhidden;\n }\n\n / Disabled /\n\n &--is-disabled &__chips,\n &--is-disabled &__label {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n Event,\n EventEmitter,\n State,\n Fragment,\n Listen,\n} from \"@stencil/core\";\n\nimport {\n StzhChipselectItem,\n StzhChipselectChangeEvent,\n // StzhDropdownChangeEvent\n} from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\n// import { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet chipselectCounter = 0;\n\n/\n @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n /\n@Component({\n tag: \"stzh-chipselect\",\n styleUrl: \"stzh-chipselect.scss\",\n scoped: true\n})\nexport class StzhChipselect {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* The list of chips /\n @Prop() data: string \| StzhChipselectItem[] = [];\n private _data: StzhChipselectItem[] = [];\n // private _dataDropdown: any[] = [];\n\n /* The name of the input element /\n @Prop({ reflect: true }) name: string;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Whether label is hidden. /\n @Prop() labelHidden: boolean = false;\n\n /* Multiple /\n @Prop({ mutable: true }) multiple: boolean = false;\n\n /* Value /\n @Prop({ mutable: true }) value: string \| string[] = \"\";\n private _value: string[] = [];\n\n /* Default value (used by reset) /\n @Prop({ mutable: true }) defaultValue: string \| string[] = \"\";\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /* Long description title appearing in a popover (use description-long-title slot as or description property alternative) /\n @Prop() descriptionLongTitle: string;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n private _error: string[];\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /* Whether all chips are disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form to hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n @State() activeFocusOptionIndex: number = 0;\n\n @Element() element: HTMLStzhChipselectElement;\n\n /* Change event /\n @Event() stzhChange: EventEmitter<StzhChipselectChangeEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"value\")\n valueWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n try {\n this._value = JSON.parse(newValue);\n } catch(ex) {\n this._value = newValue ? [newValue] : [];\n }\n } else {\n this._value = newValue ? newValue : [];\n }\n }\n\n @Watch(\"data\")\n dataWatcher(newValue: StzhChipselectItem[] \| string) {\n if (typeof newValue === \"string\") {\n this._data = JSON.parse(newValue);\n } else {\n this._data = newValue;\n }\n\n // this._dataDropdown = this._data.map((data) => {\n // return {\n // text: data.counter\n // ? `${data.label} (${data.counter})`\n // : data.label,\n // value: data.value\n // }\n // });\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string \| string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n private id: string;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private waitForNextRender() {\n return new Promise(resolve => this.renderPromiseResolve = resolve);\n }\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n\n // this.stzhChange.emit({\n // component: \"stzh-chipselect\",\n // value: this.value\n // });\n }\n\n private handleChipClick = async (data: StzhChipselectItem, index: number) => {\n if (this.multiple) {\n if (data.value === \"\" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === \"\")) {\n this.value = [];\n } else if (data.value !== \"\") {\n this.value = this._value.includes(data.value)\n ? this._value.filter(value => value !== data.value)\n : [...this._value, data.value];\n }\n } else {\n this.value = data.value;\n }\n\n this.activeFocusOptionIndex = index;\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.multiple ? this._value : this._value[0]\n });\n }\n\n // private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n // this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n\n // this.activeFocusOptionIndex = this._data.findIndex(data => {\n // return data.value === this.value;\n // });\n\n // await this.waitForNextRender();\n\n // this.stzhChange.emit({\n // component: \"stzh-chipselect\",\n // value: this.value\n // })\n // }\n\n private handleKeydown = (event: KeyboardEvent) => {\n let newActiveIndex: number = null;\n const activeOptionIndex = this.activeFocusOptionIndex;\n\n if (event.key === \"ArrowUp\" \|\| event.key === \"ArrowLeft\") {\n event.preventDefault();\n\n if (activeOptionIndex > 0) {\n newActiveIndex = activeOptionIndex - 1;\n }\n } else if (event.key === \"ArrowDown\" \|\| event.key === \"ArrowRight\") {\n event.preventDefault();\n\n if (activeOptionIndex < this._data.length - 1) {\n newActiveIndex = activeOptionIndex + 1;\n }\n } else if (event.key === \" \" \|\| event.key === \"Enter\") {\n event.preventDefault();\n this.value = this._data[activeOptionIndex].value;\n\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.value\n });\n }\n\n if (newActiveIndex !== null) {\n this.activeFocusOptionIndex = newActiveIndex;\n }\n }\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n }\n\n async componentWillLoad() {\n this.id = `stzh-chipselect-${chipselectCounter++}`;\n\n this.dataWatcher(this.data);\n this.errorWatcher(this.error);\n this.valueWatcher(this.value);\n\n this.defaultValue = this.defaultValue \|\| this.value;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"chipselect\");\n }\n }\n\n render() {\n const descriptionUsed = !!this.description;\n const descriptionLongUsed = !!this.descriptionLong;\n const errorUsed = !!this.error;\n\n const classes = {\n \"stzh-chipselect\": true,\n \"stzh-chipselect--has-description\": descriptionUsed,\n \"stzh-chipselect--has-description-long\": descriptionLongUsed,\n \"stzh-chipselect--has-error\": errorUsed,\n \"stzh-chipselect--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-chipselect--is-disabled\": this.disabled,\n \"stzh-chipselect--is-required\": this.required,\n \"stzh-chipselect--has-label-hidden\": this.labelHidden,\n };\n\n return (\n <Host is-invalid={this.invalid \|\| errorUsed}>\n <div class={classes}>\n {this.multiple\n ?\n <Fragment>\n {this._value.map((value) =>\n <input type=\"hidden\" name={this.name} value={value} />\n )}\n </Fragment>\n :\n <input\n type=\"hidden\"\n name={this.name}\n value={this.value}\n />\n }\n\n <label class=\"stzh-chipselect__label\" htmlFor={this.id}>\n {this.label ? this.label : <slot></slot>}\n {!this.hideOptional &&\n <span class=\"stzh-chipselect__marker\">\n <span class=\"stzh-chipselect__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-chipselect__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText\n }\n </span>\n </span>\n }\n </label>\n\n {this._data.length > 0 &&\n <Fragment>\n <div\n id={this.id}\n class=\"stzh-chipselect__chips\"\n role=\"listbox\"\n tabindex=\"0\"\n aria-multiselectable={this.multiple ? \"true\" : \"false\"}\n aria-activedescendant={`${this.id}-option-${this.activeFocusOptionIndex}`}\n aria-describedby={`${this.id}-description ${this.a11yDescribedby}`}\n onKeyDown={this.handleKeydown}\n >\n {this._data.map((data, index) => (\n <stzh-chip\n role=\"option\"\n class={{\n \"stzh-chipselect__chip\": true,\n \"is-focused\": this.activeFocusOptionIndex === index\n }}\n label={data.label}\n counter={data.counter}\n icon={data.icon}\n type={data.type}\n inverted={data.inverted}\n variant={data.variant}\n size={data.size \|\| \"small\"}\n disabled={this.disabled \|\| data.disabled}\n active={\n this._value.includes(data.value)\n \|\| (!this.multiple && !data.value && (this._value.length === 0 \|\| this._value[0] === \"\"))\n \|\| (!data.value && this.multiple && (this._value.length === 0 \|\| (this._value.length === 1 && this._value[0] === \"\")))\n }\n aria-selected={\n this._value.includes(data.value)\n \|\| (!this.multiple && !data.value && (this._value.length === 0 \|\| this._value[0] === \"\"))\n \|\| (!data.value && this.multiple && (this._value.length === 0 \|\| (this._value.length === 1 && this._value[0] === \"\")))\n ? \"true\" : \"false\"\n }\n id={`${this.id}-option-${index}`}\n a11yTabindex=\"-1\"\n onClick={() => this.handleChipClick(data, index)}\n ></stzh-chip>\n ))}\n </div>\n\n <StzhInputDescription\n classPrefix=\"stzh-chipselect\"\n id={`${this.id}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n\n {/ <stzh-dropdown\n class=\"stzh-chipselect__dropdown\"\n multiple={this.multiple}\n disabled={this.disabled}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n required={this.required}\n invalid={this.invalid}\n items={[this.value]}\n label={this.label}\n labelHidden={this.labelHidden}\n options={this._dataDropdown}\n hideOptional={this.hideOptional}\n onStzhChange={this.handleDropdownChange}\n ></stzh-dropdown> */}\n </Fragment>\n }\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/stzh-contact.js CHANGED Viewed

@@ -8,12 +8,14 @@ import { d as defineCustomElement$2 } from './stzh-link2.js';
 const stzhContactCss = ".sc-stzh-contact-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-contact-h{display:none}.sc-stzh-contact-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-contact-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-contact-h *.sc-stzh-contact,.sc-stzh-contact-h *.sc-stzh-contact::before,.sc-stzh-contact-h *.sc-stzh-contact::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-contact-h .has-focus.sc-stzh-contact{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-contact-h .stzh-fylingfocus-focused.sc-stzh-contact{outline-style:none !important}.sc-stzh-contact-h .stzh-fylingfocus-focused.sc-stzh-contact::-moz-focus-inner{border:0 !important}.sc-stzh-contact-h{--grid-template-areas:var(\n    --stzh-contact-grid-template-areas,\n    \"heading heading heading heading\"\n    \"image image image image\"\n    \"info info info info\"\n    \"availability availability availability availability\"\n    \"additional additional additional additional\"\n  );--grid-template-columns:var(\n    --stzh-contact-grid-template-columns,\n    repeat(4, minmax(0, 1fr))\n  )}@media screen and (min-width: 900px){.sc-stzh-contact-h{--grid-template-areas:var(\n      --stzh-contact-grid-template-areas,\n      \"heading heading heading heading heading heading heading heading\"\n      \"image image image image . . . .\"\n      \"info info info info availability availability availability availability\"\n      \"additional additional additional additional additional additional additional additional\"\n    );--grid-template-columns:var(\n      --stzh-contact-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}@media print{.sc-stzh-contact-h{page-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid}}.sc-stzh-contact-h .sc-stzh-contact-s>[slot=image]{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.stzh-contact.sc-stzh-contact{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns)}@media screen and (min-width: 900px){.stzh-contact.sc-stzh-contact{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-contact.sc-stzh-contact{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-contact.sc-stzh-contact{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-contact.sc-stzh-contact{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-contact.sc-stzh-contact{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-contact__main-heading.sc-stzh-contact{grid-area:heading}.stzh-contact__main-heading.sc-stzh-contact:not(:empty){margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-contact__main-heading.sc-stzh-contact:not(:empty){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-contact__main-heading.sc-stzh-contact:not(:empty){margin-bottom:var(--stzh-space-large)}}.stzh-contact__image-wrapper.sc-stzh-contact{grid-area:image;background-color:var(--stzh-color-secondary20)}.stzh-contact__image.sc-stzh-contact{position:relative}.stzh-contact__info.sc-stzh-contact{grid-area:info}.stzh-contact__heading.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__name.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__address.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__numbers.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__emails.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__pobox.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__availability-title.sc-stzh-contact:not(:empty):not(:last-child){margin-bottom:var(--stzh-space-xsmall)}.stzh-contact__number.sc-stzh-contact,.stzh-contact__email.sc-stzh-contact{display:flex;align-items:center}.stzh-contact__heading.sc-stzh-contact,.stzh-contact__name.sc-stzh-contact,.stzh-contact__availability-title.sc-stzh-contact{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);margin:0px}@media screen and (min-width: 900px){.stzh-contact__heading.sc-stzh-contact,.stzh-contact__name.sc-stzh-contact,.stzh-contact__availability-title.sc-stzh-contact{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-contact__heading.sc-stzh-contact,.stzh-contact__name.is-heading.sc-stzh-contact,.stzh-contact__availability-title.sc-stzh-contact{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-contact__availability.sc-stzh-contact{grid-area:availability;margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-contact__availability.sc-stzh-contact{margin-top:0px}}.stzh-contact__availability-list.sc-stzh-contact,.stzh-contact__availability-hour-list.sc-stzh-contact{list-style:none;margin:0;padding:0}.stzh-contact__availability-list.sc-stzh-contact{gap:var(--stzh-space-xsmall);display:grid}@media screen and (min-width: 900px){.stzh-contact__availability-list.sc-stzh-contact{gap:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-contact__availability-list.sc-stzh-contact{gap:var(--stzh-space-medium)}}.stzh-contact__availability-weekday.sc-stzh-contact{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height))}@media screen and (min-width: 900px){.stzh-contact__availability-weekday.sc-stzh-contact{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}.stzh-contact__availability-hours.sc-stzh-contact{display:flex;flex-wrap:wrap;-moz-column-gap:var(--stzh-space-xsmall);column-gap:var(--stzh-space-xsmall)}.stzh-contact__availability-hours-separator.sc-stzh-contact{width:0.0625rem;background-color:currentColor;flex-shrink:0}.stzh-contact__additional.sc-stzh-contact{gap:var(--stzh-space-medium);grid-area:additional;display:grid}@media screen and (min-width: 600px){.stzh-contact__additional.sc-stzh-contact{gap:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-contact__additional.sc-stzh-contact{gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-contact__additional.sc-stzh-contact{gap:var(--stzh-space-xxlarge)}}.stzh-contact__additional.sc-stzh-contact:not(:empty){margin-top:var(--stzh-space-medium)}.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image-wrapper.sc-stzh-contact{margin-bottom:var(--stzh-space-medium)}.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:4rem;height:4rem}@media screen and (min-width: 600px){.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:5rem;height:5rem}}@media screen and (min-width: 900px){.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:6.25rem;height:6.25rem}}@media screen and (min-width: 1260px){.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:7.5rem;height:7.5rem}}@media screen and (min-width: 1600px){.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:8.75rem;height:8.75rem}}";
 function formatTel(tel) {
-  return tel.replace(/\s/g, '');
+  return tel.replace(/\s/g, "");
 }
 const StzhContact$1 = /*@__PURE__*/ proxyCustomElement(class StzhContact extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this._street = [];
+    this._streetInfo = [];
     this._numbers = [];
     this._emails = [];
     this._availability = [];
@@ -71,10 +73,38 @@ const StzhContact$1 = /*@__PURE__*/ proxyCustomElement(class StzhContact extends
       this._emails = newValue;
     }
   }
+  streetWatcher(newValue) {
+    if (typeof newValue === "string") {
+      try {
+        this._street = JSON.parse(newValue);
+      }
+      catch (noArrayException) {
+        this._street = [newValue];
+      }
+    }
+    else if (newValue) {
+      this._street = newValue;
+    }
+  }
+  streetInfoWatcher(newValue) {
+    if (typeof newValue === "string") {
+      try {
+        this._streetInfo = JSON.parse(newValue);
+      }
+      catch (noArrayException) {
+        this._streetInfo = [newValue];
+      }
+    }
+    else if (newValue) {
+      this._streetInfo = newValue;
+    }
+  }
   async componentWillLoad() {
     this.numbersWatcher(this.numbers);
     this.emailsWatcher(this.emails);
     this.availabilityWatcher(this.availability);
+    this.streetWatcher(this.street);
+    this.streetInfoWatcher(this.streetInfo);
   }
   render() {
     const hasImage = hasSlot(this.element, "image");
@@ -86,50 +116,23 @@ const StzhContact$1 = /*@__PURE__*/ proxyCustomElement(class StzhContact extends
       "stzh-contact--has-image": hasImage,
       "stzh-contact--has-address": hasAddress,
       "stzh-contact--has-addons": hasAddons,
-      "stzh-contact--has-links": hasLinks
+      "stzh-contact--has-links": hasLinks,
     };
     const HeadingLevel = `h${this.headingLevel}`;
-    const NameHeadingLevel = this.nameHeadingLevel ? `h${this.nameHeadingLevel}` : 'div';
+    const NameHeadingLevel = this.nameHeadingLevel ? `h${this.nameHeadingLevel}` : "div";
     const AvailabilityTitleElement = `h${this.availabilityTitleLevel}`;
-    return (h(Host, null, h("div", { class: classes, itemscope: true, itemtype: `http://schema.org/${this.type}` }, h("div", { class: "stzh-contact__main-heading", itemprop: (this.type === "Organization" && !this.heading
-        || this.type === "Person" && !this.name) ? "name" : null }, this.mainHeading
-      ? h("stzh-heading", { level: this.mainHeadingLevel }, this.mainHeading)
-      : h("slot", { name: "main-heading" })), h("div", { class: "stzh-contact__image-wrapper" }, h("div", { class: "stzh-contact__image" }, h("slot", { name: "image" }))), h("div", { class: "stzh-contact__info" }, this.heading &&
-      h(HeadingLevel, { class: "stzh-contact__heading", itemprop: this.type === "Organization" || !this.name ? "name" : null, innerHTML: this.heading }), this.name &&
-      h(NameHeadingLevel, { class: {
-          "stzh-contact__name": true,
-          "is-heading": this.nameHeadingLevel !== "",
-        }, itemprop: this.type === "Person" ? "name" : null }, this.name), h("div", { class: "stzh-contact__address", itemprop: "address", itemscope: true, itemtype: "http://schema.org/PostalAddress", innerHTML: this.address }, !this.address &&
-      h(Fragment, null, this.street &&
-        h("div", { class: "stzh-contact__street", itemprop: "streetAddress" }, this.street, this.streetInfo &&
-          h(Fragment, null, h("br", null), " ", this.streetInfo)), this.postalCode &&
-        h("span", { class: "stzh-contact__postal-code", itemprop: "postalCode" }, this.postalCode, "\u00A0"), this.location &&
-        h("span", { class: "stzh-contact__locality", itemprop: "addressLocality" }, this.location), h("slot", { name: "address" }))), this._numbers.length > 0 &&
-      h("div", { class: "stzh-contact__numbers" }, this._numbers.map((number) => h("div", { class: "stzh-contact__number" }, h("span", null, number.label, "\u00A0"), h("stzh-link", { size: "inherit", height: "auto", class: "stzh-contact__number-link", href: `${number.type}:${formatTel(number.number)}`, analyticsId: number.analyticsId || (`${number.label} ${number.number}`), itemprop: number.type === "fax" ? "faxNumber" : "telephone" }, number.number)))), this._emails.length > 0 &&
-      h("div", { class: "stzh-contact__emails" }, this._emails.map((email) => h("div", { class: "stzh-contact__email" }, h("span", null, email.label, "\u00A0"), email.href
-        ?
-          h("stzh-link", { size: "inherit", height: "auto", class: "stzh-container__email-link", href: `mailto:${email.href}`, analyticsId: email.analyticsId || (`${email.label} ${email.text}`), itemprop: "email" }, email.text)
-        :
-          h("span", { class: "stzh-container__email-link", itemprop: "email" }, email.text)))), h("div", { class: "stzh-contact__pobox", innerHTML: this.pobox }, !this.pobox &&
-      h(Fragment, null, this.poboxHeading &&
-        h("div", { class: "stzh-contact__pobox-heading" }, this.poboxHeading), this.poboxTitle &&
-        h("div", { class: "stzh-contact__pobox-title" }, this.poboxTitle), this.poboxPostalCode &&
-        h("span", { class: "stzh-contact__pobox-postal-code" }, this.poboxPostalCode, "\u00A0"), this.poboxLocation &&
-        h("span", { class: "stzh-contact__pobox-locality" }, this.poboxLocation), h("slot", { name: "pobox" })))), this.availability &&
-      h("div", { class: "stzh-contact__availability" }, this.availabilityTitle &&
-        h(AvailabilityTitleElement, { class: "stzh-contact__availability-title" }, this.availabilityTitle), this._availability.length > 0 &&
-        h("ul", { class: "stzh-contact__availability-list" }, this._availability.map((item) => h("li", { class: "stzh-contact__availability-list-item" }, h("div", { class: "stzh-contact__availability-weekday" }, item.weekday), item.hours.length > 0
-          ?
-            h("div", { class: "stzh-contact__availability-hours" }, item.hours.map((hour, index) => h(Fragment, null, h("div", { class: "stzh-contact__availability-hour" }, hour), index < item.hours.length - 1 &&
-              h("div", { class: "stzh-contact__availability-hours-separator" }))))
-          :
-            h("div", { class: "stzh-contact__availability-hours" }, "-"))))), h("div", { class: "stzh-contact__additional" }, h("slot", null)))));
+    return (h(Host, null, h("div", { class: classes, itemscope: true, itemtype: `http://schema.org/${this.type}` }, h("div", { class: "stzh-contact__main-heading", itemprop: (this.type === "Organization" && !this.heading) || (this.type === "Person" && !this.name) ? "name" : null }, this.mainHeading ? (h("stzh-heading", { level: this.mainHeadingLevel }, this.mainHeading)) : (h("slot", { name: "main-heading" }))), h("div", { class: "stzh-contact__image-wrapper" }, h("div", { class: "stzh-contact__image" }, h("slot", { name: "image" }))), h("div", { class: "stzh-contact__info" }, this.heading && (h(HeadingLevel, { class: "stzh-contact__heading", itemprop: this.type === "Organization" || !this.name ? "name" : null, innerHTML: this.heading })), this.name && (h(NameHeadingLevel, { class: {
+        "stzh-contact__name": true,
+        "is-heading": this.nameHeadingLevel !== "",
+      }, itemprop: this.type === "Person" ? "name" : null }, this.name)), h("div", { class: "stzh-contact__address", itemprop: "address", itemscope: true, itemtype: "http://schema.org/PostalAddress", innerHTML: this.address }, !this.address && (h(Fragment, null, this._street.length > 0 && (h("div", { class: "stzh-contact__street", itemprop: "streetAddress" }, this._street.map((street) => (h(Fragment, null, street, h("br", null)))), this._streetInfo.length > 0 && (h(Fragment, null, h("br", null), " ", this._streetInfo.map((streetInfo) => (h(Fragment, null, streetInfo, h("br", null)))))))), this.postalCode && (h("span", { class: "stzh-contact__postal-code", itemprop: "postalCode" }, this.postalCode, "\u00A0")), this.location && (h("span", { class: "stzh-contact__locality", itemprop: "addressLocality" }, this.location)), h("slot", { name: "address" })))), this._numbers.length > 0 && (h("div", { class: "stzh-contact__numbers" }, this._numbers.map(number => (h("div", { class: "stzh-contact__number" }, h("span", null, number.label, "\u00A0"), h("stzh-link", { size: "inherit", height: "auto", class: "stzh-contact__number-link", href: `${number.type}:${formatTel(number.number)}`, analyticsId: number.analyticsId || `${number.label} ${number.number}`, itemprop: number.type === "fax" ? "faxNumber" : "telephone" }, number.number)))))), this._emails.length > 0 && (h("div", { class: "stzh-contact__emails" }, this._emails.map(email => (h("div", { class: "stzh-contact__email" }, h("span", null, email.label, "\u00A0"), email.href ? (h("stzh-link", { size: "inherit", height: "auto", class: "stzh-container__email-link", href: `mailto:${email.href}`, analyticsId: email.analyticsId || `${email.label} ${email.text}`, itemprop: "email" }, email.text)) : (h("span", { class: "stzh-container__email-link", itemprop: "email" }, email.text))))))), h("div", { class: "stzh-contact__pobox", innerHTML: this.pobox }, !this.pobox && (h(Fragment, null, this.poboxHeading && h("div", { class: "stzh-contact__pobox-heading" }, this.poboxHeading), this.poboxTitle && h("div", { class: "stzh-contact__pobox-title" }, this.poboxTitle), this.poboxPostalCode && (h("span", { class: "stzh-contact__pobox-postal-code" }, this.poboxPostalCode, "\u00A0")), this.poboxLocation && h("span", { class: "stzh-contact__pobox-locality" }, this.poboxLocation), h("slot", { name: "pobox" }))))), this.availability && (h("div", { class: "stzh-contact__availability" }, this.availabilityTitle && (h(AvailabilityTitleElement, { class: "stzh-contact__availability-title" }, this.availabilityTitle)), this._availability.length > 0 && (h("ul", { class: "stzh-contact__availability-list" }, this._availability.map(item => (h("li", { class: "stzh-contact__availability-list-item" }, h("div", { class: "stzh-contact__availability-weekday" }, item.weekday), item.hours.length > 0 ? (h("div", { class: "stzh-contact__availability-hours" }, item.hours.map((hour, index) => (h(Fragment, null, h("div", { class: "stzh-contact__availability-hour" }, hour), index < item.hours.length - 1 && (h("div", { class: "stzh-contact__availability-hours-separator" }))))))) : (h("div", { class: "stzh-contact__availability-hours" }, "-"))))))))), h("div", { class: "stzh-contact__additional" }, h("slot", null)))));
   }
   get element() { return this; }
   static get watchers() { return {
     "availability": ["availabilityWatcher"],
     "numbers": ["numbersWatcher"],
-    "emails": ["emailsWatcher"]
+    "emails": ["emailsWatcher"],
+    "street": ["streetWatcher"],
+    "streetInfo": ["streetInfoWatcher"]
   }; }
   static get style() { return stzhContactCss; }
 }, [6, "stzh-contact", {
@@ -158,7 +161,9 @@ const StzhContact$1 = /*@__PURE__*/ proxyCustomElement(class StzhContact extends
   }, undefined, {
     "availability": ["availabilityWatcher"],
     "numbers": ["numbersWatcher"],
-    "emails": ["emailsWatcher"]
+    "emails": ["emailsWatcher"],
+    "street": ["streetWatcher"],
+    "streetInfo": ["streetInfoWatcher"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/stzh-contact.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-contact.js","mappings":"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","names":["StzhContact"],"sources":["src/components/stzh-contact/stzh-contact.scss?tag=stzh-contact&encapsulation=scoped","src/components/stzh-contact/stzh-contact.tsx"],"sourcesContent":[":host {\n --grid-template-areas: var(\n --stzh-contact-grid-template-areas,\n \"heading heading heading heading\"\n \"image image image image\"\n \"info info info info\"\n \"availability availability availability availability\"\n \"additional additional additional additional\"\n );\n\n --grid-template-columns: var(\n --stzh-contact-grid-template-columns,\n #{$gridColumns}\n );\n\n @include mq($from: medium) {\n --grid-template-areas: var(\n --stzh-contact-grid-template-areas,\n \"heading heading heading heading heading heading heading heading\"\n \"image image image image . . . .\"\n \"info info info info availability availability availability availability\"\n \"additional additional additional additional additional additional additional additional\"\n );\n\n --grid-template-columns: var(\n --stzh-contact-grid-template-columns,\n #{$gridColumnsMedium}\n );\n }\n\n @media print {\n page-break-inside: avoid;\n break-inside: avoid;\n }\n\n ::slotted([slot=\"image\"]) {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n}\n\n.stzh-contact {\n @include fontCurve('p1');\n @include gridGutter;\n display: grid;\n grid-template-areas: var(--grid-template-areas);\n grid-template-columns: var(--grid-template-columns);\n\n &__main-heading {\n grid-area: heading;\n\n &:not(:empty) {\n @include spaceCurve('margin-bottom', 'small');\n }\n }\n\n &__image-wrapper {\n grid-area: image;\n background-color: $colorSecondary20;\n }\n\n &__image {\n position: relative;\n }\n\n &__info {\n grid-area: info;\n }\n\n &__heading,\n &__name,\n &__address,\n &__numbers,\n &__emails,\n &__pobox,\n &__availability-title {\n &:not(:empty):not(:last-child) {\n margin-bottom: space('xsmall');\n }\n }\n\n &__number,\n &__email {\n display: flex;\n align-items: center;\n }\n\n &__heading,\n &__name,\n &__availability-title {\n @include fontCurve('p1');\n margin: 0px;\n }\n\n &__heading,\n &__name.is-heading,\n &__availability-title {\n @include font('heavy');\n }\n\n &__availability {\n grid-area: availability;\n margin-top: space('xlarge');\n\n @include mq($from: medium) {\n margin-top: 0px;\n }\n }\n\n &__availability-list,\n &__availability-hour-list {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n &__availability-list {\n @include spaceCurve('gap', 'tiny');\n display: grid;\n }\n\n &__availability-weekday {\n @include fontCurve('p2');\n }\n\n &__availability-hours {\n display: flex;\n flex-wrap: wrap;\n column-gap: space('xsmall');\n }\n\n &__availability-hours-separator {\n width: 1px;\n background-color: currentColor;\n flex-shrink: 0;\n }\n\n &__additional {\n @include spaceCurve('gap', 'regular');\n grid-area: additional;\n display: grid;\n\n &:not(:empty) {\n margin-top: space('medium');\n }\n }\n\n /* Has image /\n\n &--has-image &__image-wrapper {\n margin-bottom: space('medium');\n }\n\n &--has-image &__image {\n width: 64px;\n height: 64px;\n\n @include mq($from: small) {\n width: 80px;\n height: 80px;\n }\n\n @include mq($from: medium) {\n width: 100px;\n height: 100px;\n }\n\n @include mq($from: large) {\n width: 120px;\n height: 120px;\n }\n\n @include mq($from: ultra) {\n width: 140px;\n height: 140px;\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Fragment,\n Watch\n} from \"@stencil/core\";\n\nimport {\n ContactNumber,\n ContactEmail,\n StzhContactAvailabilityItem\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nfunction formatTel(tel: string) {\n return tel.replace(/\\s/g,'');\n}\n\n/\n @slot main-heading - slot for main heading\n * @slot image - slot for image\n * @slot address - slot for address (alternative for `address` property or separate properties `street`, `streetInfo`, `postalCode` & `location`)\n * @slot pobox - slot for pobox (alternative for `pobox` property or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`)\n * @slot slot for additional (e.g. accordion with contact form, map or datalist)\n /\n@Component({\n tag: \"stzh-contact\",\n styleUrl: \"stzh-contact.scss\",\n scoped: true\n})\nexport class StzhContact {\n /* Type /\n @Prop() type: \"Organization\" \| \"Person\" = \"Organization\";\n\n /* Main heading /\n @Prop() mainHeading: string;\n\n /* Main heading level /\n @Prop() mainHeadingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"2\";\n\n /* Heading /\n @Prop() heading: string;\n\n /* Heading level /\n @Prop() headingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /* Name /\n @Prop() name: string;\n\n /* Name heading level /\n @Prop() nameHeadingLevel: \"\" \| \"1\" \| \"2\" \| \"3\" \| \"4\" = \"\";\n\n /* Address (alternative for address slot or separate properties `street`, `streetInfo`, `postalCode` & `location`) /\n @Prop() address: string;\n\n /* Street /\n @Prop() street: string;\n\n /* Additional street info /\n @Prop() streetInfo: string;\n\n /* Postal code /\n @Prop() postalCode: string;\n\n /* Location / city /\n @Prop() location: string;\n\n /\n Numbers\n * Array of objects that can include the attributes `type` = `tel`\|`fax`, `label`, `number`\n * and optionally `analyticsId` for setting `s-object-id` to the link element\n * (for Adobe Analytics, default value is `label` and `number`).\n /\n @Prop() numbers: ContactNumber[] \| string = [];\n private _numbers: ContactNumber[] = [];\n\n /\n Numbers\n * Array of objects that can include the attributes `label`, `number`, `text`, `href`\n * and optionally `analyticsId` for setting `s-object-id` to the link element\n * (for Adobe Analytics, default value is `label` and `text`).\n /\n @Prop() emails: ContactEmail[] \| string = [];\n private _emails: ContactEmail[] = [];\n\n /* Pobox (alternative for pobox slot or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`) /\n @Prop() pobox: string;\n\n /* Post office box heading /\n @Prop() poboxHeading: string;\n\n /* Post office box title /\n @Prop() poboxTitle: string;\n\n /* Post office box postal code /\n @Prop() poboxPostalCode: string;\n\n /* Post office box location / city /\n @Prop() poboxLocation: string;\n\n /* Availability title /\n @Prop() availabilityTitle: string;\n\n /* Availability title level /\n @Prop() availabilityTitleLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /* Availability times */\n @Prop() availability: string \| StzhContactAvailabilityItem[];\n private _availability: StzhContactAvailabilityItem[] = [];\n // private _availabilityDataItems: StzhDatalistItemEntry[] = [];\n\n @Watch(\"availability\")\n availabilityWatcher(newValue: string \| StzhContactAvailabilityItem[]) {\n if (typeof newValue === \"string\") {\n this._availability = JSON.parse(newValue);\n } else {\n this._availability = newValue;\n }\n\n // if (this._availability) {\n // this._availabilityDataItems = this._availability.map((item) => ({\n // value: item.hours.join(' \| '),\n // label: item.weekday\n // }));\n // }\n }\n\n @Watch(\"numbers\")\n numbersWatcher(newValue: ContactNumber[] \| string) {\n if (typeof newValue === \"string\") {\n this._numbers = JSON.parse(newValue);\n } else {\n this._numbers = newValue;\n }\n }\n\n @Watch(\"emails\")\n emailsWatcher(newValue: ContactEmail[] \| string) {\n if (typeof newValue === \"string\") {\n this._emails = JSON.parse(newValue);\n } else {\n this._emails = newValue;\n }\n }\n\n @Element() element: HTMLStzhFigureElement;\n\n async componentWillLoad() {\n this.numbersWatcher(this.numbers);\n this.emailsWatcher(this.emails);\n this.availabilityWatcher(this.availability);\n }\n\n render() {\n const hasImage = hasSlot(this.element, \"image\");\n const hasAddress = !!this.address \|\| hasSlot(this.element, \"address\");\n const hasAddons = hasSlot(this.element, \"addons\");\n const hasLinks = hasSlot(this.element, \"links\");\n\n const classes = {\n \"stzh-contact\": true,\n \"stzh-contact--has-image\": hasImage,\n \"stzh-contact--has-address\": hasAddress,\n \"stzh-contact--has-addons\": hasAddons,\n \"stzh-contact--has-links\": hasLinks\n };\n\n const HeadingLevel = `h${this.headingLevel}`;\n const NameHeadingLevel = this.nameHeadingLevel ? `h${this.nameHeadingLevel}` : 'div';\n const AvailabilityTitleElement = `h${this.availabilityTitleLevel}`;\n\n return (\n <Host>\n <div class={classes} itemscope itemtype={`http://schema.org/${this.type}`}>\n <div\n class=\"stzh-contact__main-heading\"\n itemprop={(this.type === \"Organization\" && !this.heading\n \|\| this.type === \"Person\" && !this.name) ? \"name\" : null}\n >\n {this.mainHeading\n ? <stzh-heading level={this.mainHeadingLevel}>{this.mainHeading}</stzh-heading>\n : <slot name=\"main-heading\"></slot>\n }\n </div>\n\n <div class=\"stzh-contact__image-wrapper\">\n <div class=\"stzh-contact__image\">\n <slot name=\"image\"></slot>\n </div>\n </div>\n\n <div class=\"stzh-contact__info\">\n {this.heading &&\n <HeadingLevel\n class=\"stzh-contact__heading\"\n itemprop={this.type === \"Organization\" \|\| !this.name ? \"name\" : null}\n innerHTML={this.heading}\n ></HeadingLevel>\n }\n\n {this.name &&\n <NameHeadingLevel\n class={{\n \"stzh-contact__name\": true,\n \"is-heading\": this.nameHeadingLevel !== \"\",\n }}\n itemprop={this.type === \"Person\" ? \"name\" : null}\n >\n {this.name}\n </NameHeadingLevel>\n }\n\n <div\n class=\"stzh-contact__address\"\n itemprop=\"address\"\n itemscope\n itemtype=\"http://schema.org/PostalAddress\"\n innerHTML={this.address}\n >\n {!this.address &&\n <Fragment>\n {this.street &&\n <div class=\"stzh-contact__street\" itemprop=\"streetAddress\">\n {this.street}\n {this.streetInfo &&\n <Fragment>\n <br /> {this.streetInfo}\n </Fragment>\n }\n </div>\n }\n\n {this.postalCode &&\n <span class=\"stzh-contact__postal-code\" itemprop=\"postalCode\">\n {this.postalCode} \n </span>\n }\n\n {this.location &&\n <span class=\"stzh-contact__locality\" itemprop=\"addressLocality\">\n {this.location}\n </span>\n }\n\n <slot name=\"address\"></slot>\n </Fragment>\n }\n </div>\n\n {this._numbers.length > 0 &&\n <div class=\"stzh-contact__numbers\">\n {this._numbers.map((number) =>\n <div class=\"stzh-contact__number\">\n <span>{number.label} </span>\n <stzh-link\n size=\"inherit\"\n height=\"auto\"\n class=\"stzh-contact__number-link\"\n href={`${number.type}:${formatTel(number.number)}`}\n analyticsId={number.analyticsId \|\| (`${number.label} ${number.number}`)}\n itemprop={number.type === \"fax\" ? \"faxNumber\" : \"telephone\"}\n >\n {number.number}\n </stzh-link>\n </div>\n )}\n </div>\n }\n\n {this._emails.length > 0 &&\n <div class=\"stzh-contact__emails\">\n {this._emails.map((email) =>\n <div class=\"stzh-contact__email\">\n <span>{email.label} </span>\n {email.href\n ?\n <stzh-link\n size=\"inherit\"\n height=\"auto\"\n class=\"stzh-container__email-link\"\n href={`mailto:${email.href}`}\n analyticsId={email.analyticsId \|\| (`${email.label} ${email.text}`)}\n itemprop=\"email\"\n >\n {email.text}\n </stzh-link>\n :\n <span\n class=\"stzh-container__email-link\"\n itemprop=\"email\"\n >\n {email.text}\n </span>\n }\n </div>\n )}\n </div>\n }\n\n <div\n class=\"stzh-contact__pobox\"\n innerHTML={this.pobox}\n >\n {!this.pobox &&\n <Fragment>\n {this.poboxHeading &&\n <div class=\"stzh-contact__pobox-heading\">{this.poboxHeading}</div>\n }\n {this.poboxTitle &&\n <div class=\"stzh-contact__pobox-title\">{this.poboxTitle}</div>\n }\n {this.poboxPostalCode &&\n <span class=\"stzh-contact__pobox-postal-code\">{this.poboxPostalCode} </span>\n }\n {this.poboxLocation &&\n <span class=\"stzh-contact__pobox-locality\">{this.poboxLocation}</span>\n }\n <slot name=\"pobox\"></slot>\n </Fragment>\n }\n </div>\n </div>\n\n {this.availability &&\n <div class=\"stzh-contact__availability\">\n {this.availabilityTitle &&\n <AvailabilityTitleElement\n class=\"stzh-contact__availability-title\"\n >\n {this.availabilityTitle}\n </AvailabilityTitleElement>\n }\n\n {this._availability.length > 0 &&\n <ul class=\"stzh-contact__availability-list\">\n {this._availability.map((item) =>\n <li class=\"stzh-contact__availability-list-item\">\n <div class=\"stzh-contact__availability-weekday\">{item.weekday}</div>\n {item.hours.length > 0\n ?\n <div class=\"stzh-contact__availability-hours\">\n {item.hours.map((hour, index) =>\n <Fragment>\n <div class=\"stzh-contact__availability-hour\">{hour}</div>\n {index < item.hours.length - 1 &&\n <div class=\"stzh-contact__availability-hours-separator\"></div>\n }\n </Fragment>\n )}\n </div>\n :\n <div class=\"stzh-contact__availability-hours\">\n -\n </div>\n }\n </li>\n )}\n </ul>\n }\n </div>\n }\n\n <div class=\"stzh-contact__additional\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-contact.js","mappings":"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","names":["StzhContact"],"sources":["src/components/stzh-contact/stzh-contact.scss?tag=stzh-contact&encapsulation=scoped","src/components/stzh-contact/stzh-contact.tsx"],"sourcesContent":[":host {\n --grid-template-areas: var(\n --stzh-contact-grid-template-areas,\n \"heading heading heading heading\"\n \"image image image image\"\n \"info info info info\"\n \"availability availability availability availability\"\n \"additional additional additional additional\"\n );\n\n --grid-template-columns: var(\n --stzh-contact-grid-template-columns,\n #{$gridColumns}\n );\n\n @include mq($from: medium) {\n --grid-template-areas: var(\n --stzh-contact-grid-template-areas,\n \"heading heading heading heading heading heading heading heading\"\n \"image image image image . . . .\"\n \"info info info info availability availability availability availability\"\n \"additional additional additional additional additional additional additional additional\"\n );\n\n --grid-template-columns: var(\n --stzh-contact-grid-template-columns,\n #{$gridColumnsMedium}\n );\n }\n\n @media print {\n page-break-inside: avoid;\n break-inside: avoid;\n }\n\n ::slotted([slot=\"image\"]) {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n}\n\n.stzh-contact {\n @include fontCurve('p1');\n @include gridGutter;\n display: grid;\n grid-template-areas: var(--grid-template-areas);\n grid-template-columns: var(--grid-template-columns);\n\n &__main-heading {\n grid-area: heading;\n\n &:not(:empty) {\n @include spaceCurve('margin-bottom', 'small');\n }\n }\n\n &__image-wrapper {\n grid-area: image;\n background-color: $colorSecondary20;\n }\n\n &__image {\n position: relative;\n }\n\n &__info {\n grid-area: info;\n }\n\n &__heading,\n &__name,\n &__address,\n &__numbers,\n &__emails,\n &__pobox,\n &__availability-title {\n &:not(:empty):not(:last-child) {\n margin-bottom: space('xsmall');\n }\n }\n\n &__number,\n &__email {\n display: flex;\n align-items: center;\n }\n\n &__heading,\n &__name,\n &__availability-title {\n @include fontCurve('p1');\n margin: 0px;\n }\n\n &__heading,\n &__name.is-heading,\n &__availability-title {\n @include font('heavy');\n }\n\n &__availability {\n grid-area: availability;\n margin-top: space('xlarge');\n\n @include mq($from: medium) {\n margin-top: 0px;\n }\n }\n\n &__availability-list,\n &__availability-hour-list {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n &__availability-list {\n @include spaceCurve('gap', 'tiny');\n display: grid;\n }\n\n &__availability-weekday {\n @include fontCurve('p2');\n }\n\n &__availability-hours {\n display: flex;\n flex-wrap: wrap;\n column-gap: space('xsmall');\n }\n\n &__availability-hours-separator {\n width: 1px;\n background-color: currentColor;\n flex-shrink: 0;\n }\n\n &__additional {\n @include spaceCurve('gap', 'regular');\n grid-area: additional;\n display: grid;\n\n &:not(:empty) {\n margin-top: space('medium');\n }\n }\n\n /* Has image /\n\n &--has-image &__image-wrapper {\n margin-bottom: space('medium');\n }\n\n &--has-image &__image {\n width: 64px;\n height: 64px;\n\n @include mq($from: small) {\n width: 80px;\n height: 80px;\n }\n\n @include mq($from: medium) {\n width: 100px;\n height: 100px;\n }\n\n @include mq($from: large) {\n width: 120px;\n height: 120px;\n }\n\n @include mq($from: ultra) {\n width: 140px;\n height: 140px;\n }\n }\n}\n","import { Component, Element, Fragment, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport { ContactEmail, ContactNumber, StzhContactAvailabilityItem } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nfunction formatTel(tel: string) {\n return tel.replace(/\\s/g, \"\");\n}\n\n/\n @slot main-heading - slot for main heading\n * @slot image - slot for image\n * @slot address - slot for address (alternative for `address` property or separate properties `street`, `streetInfo`, `postalCode` & `location`)\n * @slot pobox - slot for pobox (alternative for `pobox` property or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`)\n * @slot slot for additional (e.g. accordion with contact form, map or datalist)\n /\n@Component({\n tag: \"stzh-contact\",\n styleUrl: \"stzh-contact.scss\",\n scoped: true,\n})\nexport class StzhContact {\n /* Type /\n @Prop() type: \"Organization\" \| \"Person\" = \"Organization\";\n\n /* Main heading /\n @Prop() mainHeading: string;\n\n /* Main heading level /\n @Prop() mainHeadingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"2\";\n\n /* Heading /\n @Prop() heading: string;\n\n /* Heading level /\n @Prop() headingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /* Name /\n @Prop() name: string;\n\n /* Name heading level /\n @Prop() nameHeadingLevel: \"\" \| \"1\" \| \"2\" \| \"3\" \| \"4\" = \"\";\n\n /* Address (alternative for address slot or separate properties `street`, `streetInfo`, `postalCode` & `location`) /\n @Prop() address: string;\n\n /* Street /\n @Prop() street: string \| string[];\n private _street: string[] = [];\n\n /* Additional street info /\n @Prop() streetInfo: string \| string[];\n private _streetInfo: string[] = [];\n\n /* Postal code /\n @Prop() postalCode: string;\n\n /* Location / city /\n @Prop() location: string;\n\n /\n Numbers\n * Array of objects that can include the attributes `type` = `tel`\|`fax`, `label`, `number`\n * and optionally `analyticsId` for setting `s-object-id` to the link element\n * (for Adobe Analytics, default value is `label` and `number`).\n /\n @Prop() numbers: ContactNumber[] \| string = [];\n private _numbers: ContactNumber[] = [];\n\n /\n Numbers\n * Array of objects that can include the attributes `label`, `number`, `text`, `href`\n * and optionally `analyticsId` for setting `s-object-id` to the link element\n * (for Adobe Analytics, default value is `label` and `text`).\n /\n @Prop() emails: ContactEmail[] \| string = [];\n private _emails: ContactEmail[] = [];\n\n /* Pobox (alternative for pobox slot or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`) /\n @Prop() pobox: string;\n\n /* Post office box heading /\n @Prop() poboxHeading: string;\n\n /* Post office box title /\n @Prop() poboxTitle: string;\n\n /* Post office box postal code /\n @Prop() poboxPostalCode: string;\n\n /* Post office box location / city /\n @Prop() poboxLocation: string;\n\n /* Availability title /\n @Prop() availabilityTitle: string;\n\n /* Availability title level /\n @Prop() availabilityTitleLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /* Availability times */\n @Prop() availability: string \| StzhContactAvailabilityItem[];\n private _availability: StzhContactAvailabilityItem[] = [];\n\n // private _availabilityDataItems: StzhDatalistItemEntry[] = [];\n\n @Watch(\"availability\")\n availabilityWatcher(newValue: string \| StzhContactAvailabilityItem[]) {\n if (typeof newValue === \"string\") {\n this._availability = JSON.parse(newValue);\n } else {\n this._availability = newValue;\n }\n\n // if (this._availability) {\n // this._availabilityDataItems = this._availability.map((item) => ({\n // value: item.hours.join(' \| '),\n // label: item.weekday\n // }));\n // }\n }\n\n @Watch(\"numbers\")\n numbersWatcher(newValue: ContactNumber[] \| string) {\n if (typeof newValue === \"string\") {\n this._numbers = JSON.parse(newValue);\n } else {\n this._numbers = newValue;\n }\n }\n\n @Watch(\"emails\")\n emailsWatcher(newValue: ContactEmail[] \| string) {\n if (typeof newValue === \"string\") {\n this._emails = JSON.parse(newValue);\n } else {\n this._emails = newValue;\n }\n }\n\n @Watch(\"street\")\n streetWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n try {\n this._street = JSON.parse(newValue);\n } catch (noArrayException) {\n this._street = [newValue];\n }\n } else if (newValue) {\n this._street = newValue;\n }\n }\n\n @Watch(\"streetInfo\")\n streetInfoWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n try {\n this._streetInfo = JSON.parse(newValue);\n } catch (noArrayException) {\n this._streetInfo = [newValue];\n }\n } else if (newValue) {\n this._streetInfo = newValue;\n }\n }\n\n @Element() element: HTMLStzhFigureElement;\n\n async componentWillLoad() {\n this.numbersWatcher(this.numbers);\n this.emailsWatcher(this.emails);\n this.availabilityWatcher(this.availability);\n this.streetWatcher(this.street);\n this.streetInfoWatcher(this.streetInfo);\n }\n\n render() {\n const hasImage = hasSlot(this.element, \"image\");\n const hasAddress = !!this.address \|\| hasSlot(this.element, \"address\");\n const hasAddons = hasSlot(this.element, \"addons\");\n const hasLinks = hasSlot(this.element, \"links\");\n\n const classes = {\n \"stzh-contact\": true,\n \"stzh-contact--has-image\": hasImage,\n \"stzh-contact--has-address\": hasAddress,\n \"stzh-contact--has-addons\": hasAddons,\n \"stzh-contact--has-links\": hasLinks,\n };\n\n const HeadingLevel = `h${this.headingLevel}`;\n const NameHeadingLevel = this.nameHeadingLevel ? `h${this.nameHeadingLevel}` : \"div\";\n const AvailabilityTitleElement = `h${this.availabilityTitleLevel}`;\n\n return (\n <Host>\n <div class={classes} itemscope itemtype={`http://schema.org/${this.type}`}>\n <div\n class=\"stzh-contact__main-heading\"\n itemprop={\n (this.type === \"Organization\" && !this.heading) \|\| (this.type === \"Person\" && !this.name) ? \"name\" : null\n }\n >\n {this.mainHeading ? (\n <stzh-heading level={this.mainHeadingLevel}>{this.mainHeading}</stzh-heading>\n ) : (\n <slot name=\"main-heading\"></slot>\n )}\n </div>\n\n <div class=\"stzh-contact__image-wrapper\">\n <div class=\"stzh-contact__image\">\n <slot name=\"image\"></slot>\n </div>\n </div>\n\n <div class=\"stzh-contact__info\">\n {this.heading && (\n <HeadingLevel\n class=\"stzh-contact__heading\"\n itemprop={this.type === \"Organization\" \|\| !this.name ? \"name\" : null}\n innerHTML={this.heading}\n ></HeadingLevel>\n )}\n\n {this.name && (\n <NameHeadingLevel\n class={{\n \"stzh-contact__name\": true,\n \"is-heading\": this.nameHeadingLevel !== \"\",\n }}\n itemprop={this.type === \"Person\" ? \"name\" : null}\n >\n {this.name}\n </NameHeadingLevel>\n )}\n\n <div\n class=\"stzh-contact__address\"\n itemprop=\"address\"\n itemscope\n itemtype=\"http://schema.org/PostalAddress\"\n innerHTML={this.address}\n >\n {!this.address && (\n <Fragment>\n {this._street.length > 0 && (\n <div class=\"stzh-contact__street\" itemprop=\"streetAddress\">\n {this._street.map((street: string) => (\n <Fragment>\n {street}\n <br />\n </Fragment>\n ))}\n {this._streetInfo.length > 0 && (\n <Fragment>\n <br />{\" \"}\n {this._streetInfo.map((streetInfo: string) => (\n <Fragment>\n {streetInfo}\n <br />\n </Fragment>\n ))}\n </Fragment>\n )}\n </div>\n )}\n\n {this.postalCode && (\n <span class=\"stzh-contact__postal-code\" itemprop=\"postalCode\">\n {this.postalCode} \n </span>\n )}\n\n {this.location && (\n <span class=\"stzh-contact__locality\" itemprop=\"addressLocality\">\n {this.location}\n </span>\n )}\n\n <slot name=\"address\"></slot>\n </Fragment>\n )}\n </div>\n\n {this._numbers.length > 0 && (\n <div class=\"stzh-contact__numbers\">\n {this._numbers.map(number => (\n <div class=\"stzh-contact__number\">\n <span>{number.label} </span>\n <stzh-link\n size=\"inherit\"\n height=\"auto\"\n class=\"stzh-contact__number-link\"\n href={`${number.type}:${formatTel(number.number)}`}\n analyticsId={number.analyticsId \|\| `${number.label} ${number.number}`}\n itemprop={number.type === \"fax\" ? \"faxNumber\" : \"telephone\"}\n >\n {number.number}\n </stzh-link>\n </div>\n ))}\n </div>\n )}\n\n {this._emails.length > 0 && (\n <div class=\"stzh-contact__emails\">\n {this._emails.map(email => (\n <div class=\"stzh-contact__email\">\n <span>{email.label} </span>\n {email.href ? (\n <stzh-link\n size=\"inherit\"\n height=\"auto\"\n class=\"stzh-container__email-link\"\n href={`mailto:${email.href}`}\n analyticsId={email.analyticsId \|\| `${email.label} ${email.text}`}\n itemprop=\"email\"\n >\n {email.text}\n </stzh-link>\n ) : (\n <span class=\"stzh-container__email-link\" itemprop=\"email\">\n {email.text}\n </span>\n )}\n </div>\n ))}\n </div>\n )}\n\n <div class=\"stzh-contact__pobox\" innerHTML={this.pobox}>\n {!this.pobox && (\n <Fragment>\n {this.poboxHeading && <div class=\"stzh-contact__pobox-heading\">{this.poboxHeading}</div>}\n {this.poboxTitle && <div class=\"stzh-contact__pobox-title\">{this.poboxTitle}</div>}\n {this.poboxPostalCode && (\n <span class=\"stzh-contact__pobox-postal-code\">{this.poboxPostalCode} </span>\n )}\n {this.poboxLocation && <span class=\"stzh-contact__pobox-locality\">{this.poboxLocation}</span>}\n <slot name=\"pobox\"></slot>\n </Fragment>\n )}\n </div>\n </div>\n\n {this.availability && (\n <div class=\"stzh-contact__availability\">\n {this.availabilityTitle && (\n <AvailabilityTitleElement class=\"stzh-contact__availability-title\">\n {this.availabilityTitle}\n </AvailabilityTitleElement>\n )}\n\n {this._availability.length > 0 && (\n <ul class=\"stzh-contact__availability-list\">\n {this._availability.map(item => (\n <li class=\"stzh-contact__availability-list-item\">\n <div class=\"stzh-contact__availability-weekday\">{item.weekday}</div>\n {item.hours.length > 0 ? (\n <div class=\"stzh-contact__availability-hours\">\n {item.hours.map((hour, index) => (\n <Fragment>\n <div class=\"stzh-contact__availability-hour\">{hour}</div>\n {index < item.hours.length - 1 && (\n <div class=\"stzh-contact__availability-hours-separator\"></div>\n )}\n </Fragment>\n ))}\n </div>\n ) : (\n <div class=\"stzh-contact__availability-hours\">-</div>\n )}\n </li>\n ))}\n </ul>\n )}\n </div>\n )}\n\n <div class=\"stzh-contact__additional\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/stzh-container.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const stzhContainerCss = ".sc-stzh-container-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-container-h{display:none}.sc-stzh-container-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-container-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-container-h *.sc-stzh-container,.sc-stzh-container-h *.sc-stzh-container::before,.sc-stzh-container-h *.sc-stzh-container::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-container-h .has-focus.sc-stzh-container{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-container-h .stzh-fylingfocus-focused.sc-stzh-container{outline-style:none !important}.sc-stzh-container-h .stzh-fylingfocus-focused.sc-stzh-container::-moz-focus-inner{border:0 !important}.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-1.25rem;margin-right:-1.25rem}@media screen and (min-width: 600px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-2rem;margin-right:-2rem}}@media screen and (min-width: 900px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-2.5rem;margin-right:-2.5rem}}@media screen and (min-width: 1260px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-4rem;margin-right:-4rem}}@media screen and (min-width: 1600px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / -2);margin-right:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / -2)}}.sc-stzh-container-h .sc-stzh-container-s stzh-banner,.sc-stzh-container-h .sc-stzh-container-s stzh-ghettobox,.sc-stzh-container-h .sc-stzh-container-s stzh-pagetitle,.sc-stzh-container-h .sc-stzh-container-s stzh-container{position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(--stzh-scrollbar-width) / 2);margin-right:calc(-50vw + var(--stzh-scrollbar-width) / 2);width:calc(100vw - var(--stzh-scrollbar-width));max-width:calc(100vw - var(--stzh-scrollbar-width))}.stzh-container.sc-stzh-container{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-container.sc-stzh-container{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-container.sc-stzh-container{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-container.sc-stzh-container{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-container.sc-stzh-container{margin-left:auto;margin-right:auto;max-width:84.25rem}}.stzh-container--has-no-margin.sc-stzh-container{margin-left:auto;margin-right:auto}";
+const stzhContainerCss = ".sc-stzh-container-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-container-h{display:none}.sc-stzh-container-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-container-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-container-h *.sc-stzh-container,.sc-stzh-container-h *.sc-stzh-container::before,.sc-stzh-container-h *.sc-stzh-container::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-container-h .has-focus.sc-stzh-container{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-container-h .stzh-fylingfocus-focused.sc-stzh-container{outline-style:none !important}.sc-stzh-container-h .stzh-fylingfocus-focused.sc-stzh-container::-moz-focus-inner{border:0 !important}.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-1.25rem;margin-right:-1.25rem}@media screen and (min-width: 600px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-2rem;margin-right:-2rem}}@media screen and (min-width: 900px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-2.5rem;margin-right:-2.5rem}}@media screen and (min-width: 1260px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-4rem;margin-right:-4rem}}@media screen and (min-width: 1600px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / -2);margin-right:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / -2)}}.sc-stzh-container-h .sc-stzh-container-s stzh-banner,.sc-stzh-container-h .sc-stzh-container-s stzh-ghettobox,.sc-stzh-container-h .sc-stzh-container-s stzh-pagetitle,.sc-stzh-container-h .sc-stzh-container-s stzh-pagetitle-home,.sc-stzh-container-h .sc-stzh-container-s stzh-container,.sc-stzh-container-h .sc-stzh-container-s stzh-homepage-service-highlights{position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(--stzh-scrollbar-width) / 2);margin-right:calc(-50vw + var(--stzh-scrollbar-width) / 2);width:calc(100vw - var(--stzh-scrollbar-width));max-width:calc(100vw - var(--stzh-scrollbar-width))}.stzh-container.sc-stzh-container{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-container.sc-stzh-container{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-container.sc-stzh-container{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-container.sc-stzh-container{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-container.sc-stzh-container{margin-left:auto;margin-right:auto;max-width:84.25rem}}.stzh-container--has-no-margin.sc-stzh-container{margin-left:auto;margin-right:auto}";
 const StzhContainer$1 = /*@__PURE__*/ proxyCustomElement(class StzhContainer extends HTMLElement {
   constructor() {

package/dist/components/stzh-container.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-container.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,~~mhGAAmhG~~;;~~MCe/hGA~~,eAAa;;;;oBAKI,KAAK;;EAEjC,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,gBAAgB,EAAE,IAAI;MACtB,+BAA+B,EAAE,IAAI,CAAC,QAAQ;;KAE/C,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhContainer"],"sources":["src/components/stzh-container/stzh-container.scss?tag=stzh-container&encapsulation=scoped","src/components/stzh-container/stzh-container.tsx"],"sourcesContent":[":host {\n ::slotted() {\n stzh-header {\n margin-left: -$containerMargin;\n margin-right: -$containerMargin;\n\n @include mq($from: small) {\n margin-left: -$containerMarginSmall;\n margin-right: -$containerMarginSmall;\n }\n\n @include mq($from: medium) {\n margin-left: -$containerMarginMedium;\n margin-right: -$containerMarginMedium;\n }\n\n @include mq($from: large) {\n margin-left: -$containerMarginLarge;\n margin-right: -$containerMarginLarge;\n }\n\n @include mq($from: ultra) {\n margin-left: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / -2);\n margin-right: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / -2);\n }\n }\n\n stzh-banner,\n stzh-ghettobox,\n stzh-pagetitle,\n stzh-container {\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n width: calc(100vw - var(--stzh-scrollbar-width));\n max-width: calc(100vw - var(--stzh-scrollbar-width));\n }\n\n // stzh-section[variant=\"highlight\"] {\n // --padding-left: #{$containerMargin};\n // --padding-right: #{$containerMargin};\n\n // @include mq($from: small) {\n // --padding-left: #{$containerMarginSmall};\n // --padding-right: #{$containerMarginSmall};\n // }\n\n // @include mq($from: medium) {\n // --padding-left: #{$containerMarginMedium};\n // --padding-right: #{$containerMarginMedium};\n // }\n\n // @include mq($from: large) {\n // --padding-left: #{space('xlarge')};\n // --padding-right: #{space('xlarge')};\n // }\n\n // @include mq($to: large) {\n // position: relative;\n // left: 50%;\n // right: 50%;\n // margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n // margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n // width: calc(100vw - var(--stzh-scrollbar-width));\n // max-width: calc(100vw - var(--stzh-scrollbar-width));\n // }\n // }\n\n // stzh-row stzh-section[variant=\"highlight\"] {\n // @include spaceCurve('--padding-left', 'small');\n // @include spaceCurve('--padding-right', 'small');\n\n // @include mq($to: large) {\n // left: initial;\n // right: initial;\n // margin-left: initial;\n // margin-right: initial;\n // width: initial;\n // max-width: initial;\n // }\n // }\n }\n}\n\n.stzh-container {\n @include container;\n\n // &--size-big {\n // @include container($size: \"big\");\n // }\n\n &--has-no-margin {\n margin-left: auto;\n margin-right: auto;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n} from \"@stencil/core\";\n\n/\n @slot - Slot for any content\n /\n@Component({\n tag: \"stzh-container\",\n styleUrl: \"stzh-container.scss\",\n scoped: true\n})\nexport class StzhContainer {\n /* Size variant /\n // @Prop() size: \"default\" \| \"big\" = \"default\";\n\n /* Whether to prevent side margins */\n @Prop() noMargin: boolean = false;\n\n render() {\n const classes = {\n \"stzh-container\": true,\n \"stzh-container--has-no-margin\": this.noMargin,\n // [`stzh-container--size-${this.size}`]: !!this.size,\n };\n\n return (\n <Host>\n <div class={classes}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-container.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,4pGAA4pG;;MCexqGA,eAAa;;;;oBAKI,KAAK;;EAEjC,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,gBAAgB,EAAE,IAAI;MACtB,+BAA+B,EAAE,IAAI,CAAC,QAAQ;;KAE/C,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhContainer"],"sources":["src/components/stzh-container/stzh-container.scss?tag=stzh-container&encapsulation=scoped","src/components/stzh-container/stzh-container.tsx"],"sourcesContent":[":host {\n ::slotted() {\n stzh-header {\n margin-left: -$containerMargin;\n margin-right: -$containerMargin;\n\n @include mq($from: small) {\n margin-left: -$containerMarginSmall;\n margin-right: -$containerMarginSmall;\n }\n\n @include mq($from: medium) {\n margin-left: -$containerMarginMedium;\n margin-right: -$containerMarginMedium;\n }\n\n @include mq($from: large) {\n margin-left: -$containerMarginLarge;\n margin-right: -$containerMarginLarge;\n }\n\n @include mq($from: ultra) {\n margin-left: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / -2);\n margin-right: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / -2);\n }\n }\n\n stzh-banner,\n stzh-ghettobox,\n stzh-pagetitle,\n stzh-pagetitle-home,\n stzh-container,\n stzh-homepage-service-highlights {\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n width: calc(100vw - var(--stzh-scrollbar-width));\n max-width: calc(100vw - var(--stzh-scrollbar-width));\n }\n\n // stzh-section[variant=\"highlight\"] {\n // --padding-left: #{$containerMargin};\n // --padding-right: #{$containerMargin};\n\n // @include mq($from: small) {\n // --padding-left: #{$containerMarginSmall};\n // --padding-right: #{$containerMarginSmall};\n // }\n\n // @include mq($from: medium) {\n // --padding-left: #{$containerMarginMedium};\n // --padding-right: #{$containerMarginMedium};\n // }\n\n // @include mq($from: large) {\n // --padding-left: #{space('xlarge')};\n // --padding-right: #{space('xlarge')};\n // }\n\n // @include mq($to: large) {\n // position: relative;\n // left: 50%;\n // right: 50%;\n // margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n // margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n // width: calc(100vw - var(--stzh-scrollbar-width));\n // max-width: calc(100vw - var(--stzh-scrollbar-width));\n // }\n // }\n\n // stzh-row stzh-section[variant=\"highlight\"] {\n // @include spaceCurve('--padding-left', 'small');\n // @include spaceCurve('--padding-right', 'small');\n\n // @include mq($to: large) {\n // left: initial;\n // right: initial;\n // margin-left: initial;\n // margin-right: initial;\n // width: initial;\n // max-width: initial;\n // }\n // }\n }\n}\n\n.stzh-container {\n @include container;\n\n // &--size-big {\n // @include container($size: \"big\");\n // }\n\n &--has-no-margin {\n margin-left: auto;\n margin-right: auto;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n} from \"@stencil/core\";\n\n/\n @slot - Slot for any content\n /\n@Component({\n tag: \"stzh-container\",\n styleUrl: \"stzh-container.scss\",\n scoped: true\n})\nexport class StzhContainer {\n /* Size variant /\n // @Prop() size: \"default\" \| \"big\" = \"default\";\n\n /* Whether to prevent side margins */\n @Prop() noMargin: boolean = false;\n\n render() {\n const classes = {\n \"stzh-container\": true,\n \"stzh-container--has-no-margin\": this.noMargin,\n // [`stzh-container--size-${this.size}`]: !!this.size,\n };\n\n return (\n <Host>\n <div class={classes}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/stzh-content.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const stzhContentCss = ".sc-stzh-content-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-content-h{display:none}.sc-stzh-content-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-content-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-content-h *.sc-stzh-content,.sc-stzh-content-h *.sc-stzh-content::before,.sc-stzh-content-h *.sc-stzh-content::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-content-h .has-focus.sc-stzh-content{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-content-h .stzh-fylingfocus-focused.sc-stzh-content{outline-style:none !important}.sc-stzh-content-h .stzh-fylingfocus-focused.sc-stzh-content::-moz-focus-inner{border:0 !important}.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, \"content content content content\")}@media screen and (min-width: 900px){.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, \"content content content content content content content content\")}}@media screen and (min-width: 1260px){.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content aside-right aside-right\")}}@media screen and (min-width: 1260px){[variant=shifted].sc-stzh-content-h{--grid-template-areas:var(--stzh-content-shifted-grid-template-areas, var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content content aside-right\"))}}@media screen and (min-width: 1260px){[variant=full].sc-stzh-content-h{--grid-template-areas:var(--stzh-content-full-grid-template-areas, var(--stzh-content-grid-template-areas, \"content content content content content content content content content content content content\"))}}.sc-stzh-content-h .sc-stzh-content-s>*{grid-area:content}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-cta-small-grid-template-areas:\"cta cta cta .\"}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-cta-grid-template-areas:\"cta cta cta cta cta . . .\";--stzh-cta-small-grid-template-areas:\"cta cta cta cta . . . .\"}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-text-display:grid;--stzh-text-grid-template-areas:\"text text text .\";--stzh-richtext-display:grid;--stzh-richtext-grid-template-areas:\"text text text .\"}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-text-grid-template-areas:\"text text text text text text . .\";--stzh-richtext-grid-template-areas:\"text text text text text text . .\"}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-grid-template-areas:\"list list list .\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-small) - 2 * var(--stzh-grid-gutter-small)) / 3 * 4) + 3 * var(--stzh-grid-gutter-small) + var(--stzh-grid-gutter-small))}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-grid-template-areas:\"list list list list list . . .\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-medium) - 4 * var(--stzh-grid-gutter-medium)) / 5 * 8) + 7 * var(--stzh-grid-gutter-medium) + var(--stzh-grid-gutter-medium))}}@media screen and (min-width: 1260px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-large) - 4 * var(--stzh-grid-gutter-large)) / 5 * 8) + 7 * var(--stzh-grid-gutter-large) + var(--stzh-grid-gutter-large))}}@media screen and (min-width: 1600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-ultra) - 4 * var(--stzh-grid-gutter-ultra)) / 5 * 8) + 7 * var(--stzh-grid-gutter-ultra) + var(--stzh-grid-gutter-ultra))}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-eventdata{--stzh-text-display:block;--stzh-richtext-display:block}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-cta-small-grid-template-areas:\"cta cta cta cta\"}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-cta-grid-template-areas:\"cta cta cta cta cta cta cta cta\";--stzh-cta-small-grid-template-areas:\"cta cta cta cta cta cta cta cta\"}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-text-display:block;--stzh-richtext-display:block}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-grid-template-areas:\"list list list list\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-small) - 2 * var(--stzh-grid-gutter-small)) / 4 * 4) + 3 * var(--stzh-grid-gutter-small) + var(--stzh-grid-gutter-small))}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-grid-template-areas:\"list list list list list list list list\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-medium) - 4 * var(--stzh-grid-gutter-medium)) / 8 * 8) + 7 * var(--stzh-grid-gutter-medium) + var(--stzh-grid-gutter-medium))}}@media screen and (min-width: 1260px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-large) - 4 * var(--stzh-grid-gutter-large)) / 8 * 8) + 7 * var(--stzh-grid-gutter-large) + var(--stzh-grid-gutter-large))}}@media screen and (min-width: 1600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-ultra) - 4 * var(--stzh-grid-gutter-ultra)) / 8 * 8) + 7 * var(--stzh-grid-gutter-ultra) + var(--stzh-grid-gutter-ultra))}}.stzh-content.sc-stzh-content{--stzh-content-grid-template-areas:\"content content content content content content content content content content content content\";--stzh-content-shifted-grid-template-areas:\"content content content content content content content content content content content content\";--stzh-content-full-grid-template-areas:\"content content content content content content content content content content content content\";-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas)}@media screen and (min-width: 600px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-content.sc-stzh-content{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-content.sc-stzh-content{grid-template-columns:repeat(12, minmax(0, 1fr))}}";
+const stzhContentCss = ".sc-stzh-content-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-content-h{display:none}.sc-stzh-content-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-content-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-content-h *.sc-stzh-content,.sc-stzh-content-h *.sc-stzh-content::before,.sc-stzh-content-h *.sc-stzh-content::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-content-h .has-focus.sc-stzh-content{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-content-h .stzh-fylingfocus-focused.sc-stzh-content{outline-style:none !important}.sc-stzh-content-h .stzh-fylingfocus-focused.sc-stzh-content::-moz-focus-inner{border:0 !important}.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, \"content content content content\")}@media screen and (min-width: 900px){.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, \"content content content content content content content content\")}}@media screen and (min-width: 1260px){.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content aside-right aside-right\")}}@media screen and (min-width: 1260px){[variant=shifted].sc-stzh-content-h{--grid-template-areas:var(--stzh-content-shifted-grid-template-areas, var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content content aside-right\"))}}@media screen and (min-width: 1260px){[variant=full].sc-stzh-content-h{--grid-template-areas:var(--stzh-content-full-grid-template-areas, var(--stzh-content-grid-template-areas, \"content content content content content content content content content content content content\"))}}.sc-stzh-content-h .sc-stzh-content-s>*{grid-area:content}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-cta-small-grid-template-areas:\"cta cta cta .\"}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-cta-grid-template-areas:\"cta cta cta cta cta . . .\";--stzh-cta-small-grid-template-areas:\"cta cta cta cta . . . .\"}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-text-display:grid;--stzh-text-grid-template-areas:\"text text text .\";--stzh-richtext-display:grid;--stzh-richtext-grid-template-areas:\"text text text .\"}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-text-grid-template-areas:\"text text text text text text . .\";--stzh-richtext-grid-template-areas:\"text text text text text text . .\"}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-grid-template-areas:\"list list list .\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-small) - 2 * var(--stzh-grid-gutter-small)) / 3 * 4) + 3 * var(--stzh-grid-gutter-small) + var(--stzh-grid-gutter-small))}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-grid-template-areas:\"list list list list list . . .\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-medium) - 4 * var(--stzh-grid-gutter-medium)) / 5 * 8) + 7 * var(--stzh-grid-gutter-medium) + var(--stzh-grid-gutter-medium))}}@media screen and (min-width: 1260px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-large) - 4 * var(--stzh-grid-gutter-large)) / 5 * 8) + 7 * var(--stzh-grid-gutter-large) + var(--stzh-grid-gutter-large))}}@media screen and (min-width: 1600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-ultra) - 4 * var(--stzh-grid-gutter-ultra)) / 5 * 8) + 7 * var(--stzh-grid-gutter-ultra) + var(--stzh-grid-gutter-ultra))}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-eventdata{--stzh-text-display:block;--stzh-richtext-display:block}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=contextbox],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-cta-small-grid-template-areas:\"cta cta cta cta\"}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=contextbox],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-cta-grid-template-areas:\"cta cta cta cta cta cta cta cta\";--stzh-cta-small-grid-template-areas:\"cta cta cta cta cta cta cta cta\"}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=contextbox],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-text-display:block;--stzh-richtext-display:block}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=contextbox],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-grid-template-areas:\"list list list list\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-small) - 2 * var(--stzh-grid-gutter-small)) / 4 * 4) + 3 * var(--stzh-grid-gutter-small) + var(--stzh-grid-gutter-small))}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=contextbox],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-grid-template-areas:\"list list list list list list list list\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-medium) - 4 * var(--stzh-grid-gutter-medium)) / 8 * 8) + 7 * var(--stzh-grid-gutter-medium) + var(--stzh-grid-gutter-medium))}}@media screen and (min-width: 1260px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=contextbox],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-large) - 4 * var(--stzh-grid-gutter-large)) / 8 * 8) + 7 * var(--stzh-grid-gutter-large) + var(--stzh-grid-gutter-large))}}@media screen and (min-width: 1600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=contextbox],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-ultra) - 4 * var(--stzh-grid-gutter-ultra)) / 8 * 8) + 7 * var(--stzh-grid-gutter-ultra) + var(--stzh-grid-gutter-ultra))}}.stzh-content.sc-stzh-content{--stzh-content-grid-template-areas:\"content content content content content content content content content content content content\";--stzh-content-shifted-grid-template-areas:\"content content content content content content content content content content content content\";--stzh-content-full-grid-template-areas:\"content content content content content content content content content content content content\";-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas)}@media screen and (min-width: 600px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-content.sc-stzh-content{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-content.sc-stzh-content{grid-template-columns:repeat(12, minmax(0, 1fr))}}";
 const StzhContent$1 = /*@__PURE__*/ proxyCustomElement(class StzhContent extends HTMLElement {
   constructor() {

package/dist/components/stzh-content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-content.js","mappings":";;AAAA,MAAM,cAAc,GAAG,~~27nBAA27nB~~;;~~MCgBr8nBA~~,aAAW;;;;mBAE6C,SAAS;gCAG5B,KAAK;;EAIrD,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;MACpB,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;KAClD,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhContent"],"sources":["src/components/stzh-content/stzh-content.scss?tag=stzh-content&encapsulation=scoped","src/components/stzh-content/stzh-content.tsx"],"sourcesContent":[":host {\n --grid-template-areas: var(--stzh-content-grid-template-areas, \"content content content content\");\n\n @include mq($from: medium) {\n --grid-template-areas: var(--stzh-content-grid-template-areas, \"content content content content content content content content\");\n }\n\n @include mq($from: large) {\n --grid-template-areas: var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content aside-right aside-right\");\n }\n\n &[variant=\"shifted\"] {\n @include mq($from: large) {\n --grid-template-areas: var(--stzh-content-shifted-grid-template-areas, var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content content aside-right\"));\n }\n }\n\n &[variant=\"full\"] {\n @include mq($from: large) {\n --grid-template-areas: var(--stzh-content-full-grid-template-areas, var(--stzh-content-grid-template-areas, \"content content content content content content content content content content content content\"));\n }\n }\n\n ::slotted() {\n grid-area: content;\n }\n\n &:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) ::slotted() {\n /* CTA Layout /\n\n @include mq($from: small) {\n --stzh-cta-small-grid-template-areas: \"cta cta cta .\";\n }\n\n @include mq($from: medium) {\n --stzh-cta-grid-template-areas: \"cta cta cta cta cta . . .\";\n --stzh-cta-small-grid-template-areas: \"cta cta cta cta . . . .\";\n }\n\n / Text / Richtext Layout /\n\n @include mq($from: small) {\n --stzh-text-display: grid;\n --stzh-text-grid-template-areas: \"text text text .\";\n\n --stzh-richtext-display: grid;\n --stzh-richtext-grid-template-areas: \"text text text .\";\n }\n\n @include mq($from: medium) {\n --stzh-text-grid-template-areas: \"text text text text text text . .\";\n --stzh-richtext-grid-template-areas: \"text text text text text text . .\";\n }\n\n / Datalist Layout /\n\n @include mq($from: small) {\n --stzh-datalist-grid-template-areas: \"list list list .\";\n // breakout with details element inside datalist-item\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterSmall} - 2 #{$gridGutterSmall}) / 3 * 4) + 3 * #{$gridGutterSmall} + #{$gridGutterSmall});\n }\n\n @include mq($from: medium) {\n --stzh-datalist-grid-template-areas: \"list list list list list . . .\";\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterMedium} - 4 * #{$gridGutterMedium}) / 5 * 8) + 7 * #{$gridGutterMedium} + #{$gridGutterMedium});\n }\n\n @include mq($from: large) {\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterLarge} - 4 * #{$gridGutterLarge}) / 5 * 8) + 7 * #{$gridGutterLarge} + #{$gridGutterLarge});\n }\n\n @include mq($from: ultra) {\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterUltra} - 4 * #{$gridGutterUltra}) / 5 * 8) + 7 * #{$gridGutterUltra} + #{$gridGutterUltra});\n }\n\n /* Reset layout inside certain components /\n\n stzh-datalist,\n stzh-eventdata {\n / Text Layout /\n\n @include mq($from: small) {\n --stzh-text-display: block;\n --stzh-richtext-display: block;\n }\n }\n\n stzh-section[variant=\"highlight\"],\n stzh-ghettobox,\n stzh-message,\n stzh-toast,\n stzh-tooltip,\n stzh-popover,\n stzh-accordion,\n stzh-timeline,\n stzh-twocolumns,\n stzh-textandimage,\n stzh-datalist stzh-datalist,\n stzh-dialog,\n stzh-overlay {\n / CTA Layout /\n\n @include mq($from: small) {\n --stzh-cta-small-grid-template-areas: \"cta cta cta cta\";\n }\n\n @include mq($from: medium) {\n --stzh-cta-grid-template-areas: \"cta cta cta cta cta cta cta cta\";\n --stzh-cta-small-grid-template-areas: \"cta cta cta cta cta cta cta cta\";\n }\n\n / Text Layout /\n\n @include mq($from: small) {\n --stzh-text-display: block;\n --stzh-richtext-display: block;\n }\n\n / Datalist Layout /\n\n @include mq($from: small) {\n --stzh-datalist-grid-template-areas: \"list list list list\";\n // breakout with details element inside datalist-item\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterSmall} - 2 #{$gridGutterSmall}) / 4 * 4) + 3 * #{$gridGutterSmall} + #{$gridGutterSmall});\n }\n\n @include mq($from: medium) {\n --stzh-datalist-grid-template-areas: \"list list list list list list list list\";\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterMedium} - 4 * #{$gridGutterMedium}) / 8 * 8) + 7 * #{$gridGutterMedium} + #{$gridGutterMedium});\n }\n\n @include mq($from: large) {\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterLarge} - 4 * #{$gridGutterLarge}) / 8 * 8) + 7 * #{$gridGutterLarge} + #{$gridGutterLarge});\n }\n\n @include mq($from: ultra) {\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterUltra} - 4 * #{$gridGutterUltra}) / 8 * 8) + 7 * #{$gridGutterUltra} + #{$gridGutterUltra});\n }\n }\n }\n}\n\n.stzh-content {\n // set nested content elements to be fullwidth\n --stzh-content-grid-template-areas: \"content content content content content content content content content content content content\";\n --stzh-content-shifted-grid-template-areas: \"content content content content content content content content content content content content\";\n --stzh-content-full-grid-template-areas: \"content content content content content content content content content content content content\";\n\n @include grid;\n grid-template-areas: var(--grid-template-areas);\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n} from \"@stencil/core\";\n\n/*\n @slot - Slot for any content\n /\n@Component({\n tag: \"stzh-content\",\n styleUrl: \"stzh-content.scss\",\n scoped: true\n})\nexport class StzhContent {\n /* Variant /\n @Prop({ reflect: true }) variant: \"default\" \| \"shifted\" \| \"full\" = \"default\";\n\n /* Prevent changing layout of elements within this content element */\n @Prop({ reflect: true }) preventElementLayout = false;\n\n @Element() element: HTMLStzhContentElement;\n\n render() {\n const classes = {\n \"stzh-content\": true,\n [`stzh-content--${this.variant}`]: !!this.variant,\n };\n\n return (\n <Host>\n <div class={classes}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-content.js","mappings":";;AAAA,MAAM,cAAc,GAAG,88pBAA88pB;;MCgBx9pBA,aAAW;;;;mBAE6C,SAAS;gCAG5B,KAAK;;EAIrD,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;MACpB,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;KAClD,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhContent"],"sources":["src/components/stzh-content/stzh-content.scss?tag=stzh-content&encapsulation=scoped","src/components/stzh-content/stzh-content.tsx"],"sourcesContent":[":host {\n --grid-template-areas: var(--stzh-content-grid-template-areas, \"content content content content\");\n\n @include mq($from: medium) {\n --grid-template-areas: var(--stzh-content-grid-template-areas, \"content content content content content content content content\");\n }\n\n @include mq($from: large) {\n --grid-template-areas: var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content aside-right aside-right\");\n }\n\n &[variant=\"shifted\"] {\n @include mq($from: large) {\n --grid-template-areas: var(--stzh-content-shifted-grid-template-areas, var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content content aside-right\"));\n }\n }\n\n &[variant=\"full\"] {\n @include mq($from: large) {\n --grid-template-areas: var(--stzh-content-full-grid-template-areas, var(--stzh-content-grid-template-areas, \"content content content content content content content content content content content content\"));\n }\n }\n\n ::slotted() {\n grid-area: content;\n }\n\n &:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) ::slotted() {\n /* CTA Layout /\n\n @include mq($from: small) {\n --stzh-cta-small-grid-template-areas: \"cta cta cta .\";\n }\n\n @include mq($from: medium) {\n --stzh-cta-grid-template-areas: \"cta cta cta cta cta . . .\";\n --stzh-cta-small-grid-template-areas: \"cta cta cta cta . . . .\";\n }\n\n / Text / Richtext Layout /\n\n @include mq($from: small) {\n --stzh-text-display: grid;\n --stzh-text-grid-template-areas: \"text text text .\";\n\n --stzh-richtext-display: grid;\n --stzh-richtext-grid-template-areas: \"text text text .\";\n }\n\n @include mq($from: medium) {\n --stzh-text-grid-template-areas: \"text text text text text text . .\";\n --stzh-richtext-grid-template-areas: \"text text text text text text . .\";\n }\n\n / Datalist Layout /\n\n @include mq($from: small) {\n --stzh-datalist-grid-template-areas: \"list list list .\";\n // breakout with details element inside datalist-item\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterSmall} - 2 #{$gridGutterSmall}) / 3 * 4) + 3 * #{$gridGutterSmall} + #{$gridGutterSmall});\n }\n\n @include mq($from: medium) {\n --stzh-datalist-grid-template-areas: \"list list list list list . . .\";\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterMedium} - 4 * #{$gridGutterMedium}) / 5 * 8) + 7 * #{$gridGutterMedium} + #{$gridGutterMedium});\n }\n\n @include mq($from: large) {\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterLarge} - 4 * #{$gridGutterLarge}) / 5 * 8) + 7 * #{$gridGutterLarge} + #{$gridGutterLarge});\n }\n\n @include mq($from: ultra) {\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterUltra} - 4 * #{$gridGutterUltra}) / 5 * 8) + 7 * #{$gridGutterUltra} + #{$gridGutterUltra});\n }\n\n /* Reset layout inside certain components /\n\n stzh-datalist,\n stzh-eventdata {\n / Text Layout /\n\n @include mq($from: small) {\n --stzh-text-display: block;\n --stzh-richtext-display: block;\n }\n }\n\n stzh-section[variant=\"highlight\"],\n stzh-section[variant=\"contextbox\"],\n stzh-ghettobox,\n stzh-message,\n stzh-toast,\n stzh-tooltip,\n stzh-popover,\n stzh-accordion,\n stzh-timeline,\n stzh-twocolumns,\n stzh-textandimage,\n stzh-datalist stzh-datalist,\n stzh-dialog,\n stzh-overlay {\n / CTA Layout /\n\n @include mq($from: small) {\n --stzh-cta-small-grid-template-areas: \"cta cta cta cta\";\n }\n\n @include mq($from: medium) {\n --stzh-cta-grid-template-areas: \"cta cta cta cta cta cta cta cta\";\n --stzh-cta-small-grid-template-areas: \"cta cta cta cta cta cta cta cta\";\n }\n\n / Text Layout /\n\n @include mq($from: small) {\n --stzh-text-display: block;\n --stzh-richtext-display: block;\n }\n\n / Datalist Layout /\n\n @include mq($from: small) {\n --stzh-datalist-grid-template-areas: \"list list list list\";\n // breakout with details element inside datalist-item\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterSmall} - 2 #{$gridGutterSmall}) / 4 * 4) + 3 * #{$gridGutterSmall} + #{$gridGutterSmall});\n }\n\n @include mq($from: medium) {\n --stzh-datalist-grid-template-areas: \"list list list list list list list list\";\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterMedium} - 4 * #{$gridGutterMedium}) / 8 * 8) + 7 * #{$gridGutterMedium} + #{$gridGutterMedium});\n }\n\n @include mq($from: large) {\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterLarge} - 4 * #{$gridGutterLarge}) / 8 * 8) + 7 * #{$gridGutterLarge} + #{$gridGutterLarge});\n }\n\n @include mq($from: ultra) {\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterUltra} - 4 * #{$gridGutterUltra}) / 8 * 8) + 7 * #{$gridGutterUltra} + #{$gridGutterUltra});\n }\n }\n }\n}\n\n.stzh-content {\n // set nested content elements to be fullwidth\n --stzh-content-grid-template-areas: \"content content content content content content content content content content content content\";\n --stzh-content-shifted-grid-template-areas: \"content content content content content content content content content content content content\";\n --stzh-content-full-grid-template-areas: \"content content content content content content content content content content content content\";\n\n @include grid;\n grid-template-areas: var(--grid-template-areas);\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n} from \"@stencil/core\";\n\n/*\n @slot - Slot for any content\n /\n@Component({\n tag: \"stzh-content\",\n styleUrl: \"stzh-content.scss\",\n scoped: true\n})\nexport class StzhContent {\n /* Variant /\n @Prop({ reflect: true }) variant: \"default\" \| \"shifted\" \| \"full\" = \"default\";\n\n /* Prevent changing layout of elements within this content element */\n @Prop({ reflect: true }) preventElementLayout = false;\n\n @Element() element: HTMLStzhContentElement;\n\n render() {\n const classes = {\n \"stzh-content\": true,\n [`stzh-content--${this.variant}`]: !!this.variant,\n };\n\n return (\n <Host>\n <div class={classes}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}