npm - @oiz/stzh-components - Versions diffs - 3.2.0-beta1 → 3.2.0 - Mend

@oiz/stzh-components 3.2.0-beta1 → 3.2.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 (285) hide show

package/dist/stzh-components/p-909f7fc0.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["stzhDatalistCss","StzhDatalist","this","_items","setCurrentDirection","media","matches","directionUltra","currentDirection","directionLarge","directionMedium","directionSmall","direction","setCurrentColumns","columnsUltra","currentColumns","columnsLarge","columnsMedium","columnsSmall","columns","resizeHandler","directionWatcher","columnsWatcher","currentDirectionWatcher","newValue","stzhDirectionChange","emit","component","value","variantWatcher","stzhVariantChange","itemsWatcher","JSON","parse","getCurrentDirection","componentWillLoad","items","connectedCallback","addMediaChangeListener","disconnectedCallback","removeMediaChangeListener","render","classes","variant","h","Host","style","toString","class","role","map","item","Object","assign","length","stzhDatalistItemCss","datalistItemCounter","StzhDatalistItem","_meta","external","isPhone","onActionClick","originalEvent","stzhItemActionClick","onClick","event","stzhClick","href","handleDirectionChange","detail","handleVariantChange","metaWatcher","ex","externalWatcher","rel","includes","hrefWatcher","startsWith","renderInner","isButton","hasActionButton","Item","Icon","Fragment","icon","name","label","tabindex","id","datalistItemId","target","download","a11yControls","a11yExpanded","localization","$globals","externalLinkLabel","downloadLinkLabel","iconPosition","curve","innerHTML","statusLabel","type","statusType","meta","index","renderLeadingIcon","leadingIcon","componentDidLoad","window","stzhComponents","utils","fetchTranslations","element","datalist","closest","_a","addEventListener","_b","removeEventListener","iconHref","iconTooltip","ActionItem","ActionButton","size","iconLabel","iconOnly","content"],"sources":["src/components/stzh-datalist/stzh-datalist.scss?tag=stzh-datalist&encapsulation=scoped","src/components/stzh-datalist/stzh-datalist.tsx","src/components/stzh-datalist-item/stzh-datalist-item.scss?tag=stzh-datalist-item&encapsulation=scoped","src/components/stzh-datalist-item/stzh-datalist-item.tsx"],"sourcesContent":[":host {\n // @prop --item-label-min-width: Min width of label\n // --item-label-min-width: 120px;\n --columns: 1;\n --columns-gap: #{$gridGutter};\n --list-display: grid;\n --list-margin-right: calc(var(--columns-gap) / -1);\n --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) auto var(--columns-gap));\n --full-grid-column: 1 / 5;\n --nested-margin-left: var(--stzh-datalist-nested-margin-left, 0px);\n --details-content-width: var(--stzh-datalist-details-content-width, 100%);\n\n --grid-template-areas: var(\n --stzh-datalist-grid-template-areas,\n \"list list list list\"\n );\n\n --grid-template-columns: var(\n --stzh-datalist-grid-template-columns,\n #{$gridColumns}\n );\n\n margin-left: var(--nested-margin-left);\n\n @include mq($from: small) {\n --columns-gap: #{$gridGutterSmall};\n\n --grid-template-areas: var(\n --stzh-datalist-grid-template-areas,\n \"list list list list\"\n );\n }\n\n @include mq($from: medium) {\n --columns-gap: #{$gridGutterMedium};\n\n --grid-template-areas: var(\n --stzh-datalist-grid-template-areas,\n \"list list list list list list list list\"\n );\n\n --grid-template-columns: var(\n --stzh-datalist-grid-template-columns,\n #{$gridColumnsMedium}\n );\n }\n\n @include mq($from: large) {\n --columns-gap: #{$gridGutterLarge};\n }\n\n @include mq($from: ultra) {\n --columns-gap: #{$gridGutterUltra};\n }\n\n // @include mq($from: medium) { // was smallheader before\n // --item-label-min-width: 144px;\n // }\n\n // &[disable-label-min-width]:not([disable-label-min-width=\"false\"]) {\n // --item-label-min-width: none;\n // }\n\n // datalist-item or wrapper elements should be set to display: contents to make grid layout work.\n // in AEM edit mode: we prevent setting it, so the links can still be edited.\n\n ::slotted(.layout_column) > :not([class=\"cq-\"]),\n ::slotted(:not([class=\"cq-\"])) {\n display: contents;\n }\n\n // ::slotted(.layout_column) {\n // display: contents;\n\n // .section {\n // display: contents;\n // }\n // }\n\n &[is-direction=\"horizontal\"] {\n --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) auto auto var(--columns-gap));\n --full-grid-column: 1 / 6;\n\n &:where(:has(stzh-datalist-item:not([meta=\"\"]))),\n &:where(:has(stzh-datalist-item:not([status-label=\"\"]))) {\n --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap));\n }\n }\n\n &[variant=\"table\"] {\n --list-grid-template-columns: repeat(var(--columns), auto auto minmax(auto, 1fr) auto auto var(--columns-gap));\n --full-grid-column: 1 / 7;\n\n &:where(:has(stzh-datalist-item:not([meta=\"\"]))),\n &:where(:has(stzh-datalist-item:not([status-label=\"\"]))) {\n --list-grid-template-columns: repeat(var(--columns), auto auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap));\n }\n }\n}\n\n/* AEM edit mode: we set list as block element (always as one column), to prevent layout breaks /\n\n:host(:has([class=\"cq-\"])) {\n --stzh-datalist-item-wrapper-display: flex;\n\n --list-display: block;\n --list-margin-right: 0;\n}\n\n.stzh-datalist {\n // offset margin of nested datalist\n --stzh-datalist-nested-margin-left: #{space('large')};\n // details grid columns\n --stzh-details-content-grid-column: var(--full-grid-column);\n --stzh-details-content-padding-right: var(--columns-gap);\n --stzh-details-content-width: var(--details-content-width);\n\n @include gridGutter;\n display: grid;\n grid-template-areas: var(--grid-template-areas);\n grid-template-columns: var(--grid-template-columns);\n\n &__wrapper {\n grid-area: list;\n overflow: visible;\n }\n\n &__list {\n display: var(--list-display);\n border-collapse: collapse;\n grid-template-columns: var(--list-grid-template-columns);\n align-items: stretch;\n margin-right: var(--list-margin-right);\n }\n\n /* Multiple Columns /\n\n &--has-multiple-columns {\n // display of nested datalist\n --stzh-datalist-item-nested-display: none;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Watch,\n Prop,\n Event,\n EventEmitter,\n State,\n Method\n} from \"@stencil/core\";\n\nimport {\n StzhDatalistItemEntry,\n StzhDatalistDirection,\n StzhDatalistVariant,\n StzhDatalistVariantChangeEvent,\n StzhDatalistDirectionChangeEvent\n} from \"../../index\";\n\nimport {\n media,\n addMediaChangeListener,\n removeMediaChangeListener\n} from '../../utils/media-utils';\n\n/\n /\n@Component({\n tag: \"stzh-datalist\",\n styleUrl: \"stzh-datalist.scss\",\n scoped: true\n})\nexport class StzhDatalist {\n /** Variant /\n @Prop({ reflect: true }) variant: StzhDatalistVariant = \"default\";\n \n /* Columns /\n @Prop({ reflect: true }) columns: number = 1;\n\n /* Columns above small breakpoint /\n @Prop({ reflect: true }) columnsSmall: number;\n\n /* Columns above medium breakpoint /\n @Prop({ reflect: true }) columnsMedium: number;\n\n /* Columns above large breakpoint /\n @Prop({ reflect: true }) columnsLarge: number;\n\n /* Columns above ultra breakpoint /\n @Prop({ reflect: true }) columnsUltra: number;\n\n /* Direction /\n @Prop({ reflect: true }) direction: StzhDatalistDirection = \"vertical\";\n\n /* Direction above small breakpoint /\n @Prop({ reflect: true }) directionSmall: StzhDatalistDirection;\n\n /* Direction above medium breakpoint /\n @Prop({ reflect: true }) directionMedium: StzhDatalistDirection;\n\n /* Direction above large breakpoint /\n @Prop({ reflect: true }) directionLarge: StzhDatalistDirection;\n\n /* Direction above ultra breakpoint /\n @Prop({ reflect: true }) directionUltra: StzhDatalistDirection;\n\n /\n Whether to disable min-width of datalist item label for the `horizontal` variant.\n \n If `false`, the default `min-width` is `144px` (for >= 800px) and `120px` (for < 800px).\n * If `true`, the `min-width` is `none`, so the label column, will have the width of cell with the widest content.\n \n You can also overwrite the label min-width via CSS with the custom property `--item-label-min-width`.\n /\n // @Prop({ reflect: true }) disableLabelMinWidth: boolean = false;\n\n /\n Items in datalist\n * Array of objects that must at least include `value` attribute.\n * Can optionally contain `leadingIcon`, `label`, `meta`, `icon`, `iconLabel`, `iconTooltip`, `href`, `statusLabel`, `statusType` attribute and be nested to display deeper levels:\n * `[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\", \"items\": [...]}]`\n /\n @Prop() items: StzhDatalistItemEntry[] \| string = [];\n private _items: StzhDatalistItemEntry[] = [];\n\n /* Variant attribute change event /\n @Event() stzhVariantChange: EventEmitter<StzhDatalistVariantChangeEvent>;\n\n /* Direction attribute change event /\n @Event() stzhDirectionChange: EventEmitter<StzhDatalistDirectionChangeEvent>;\n\n @Element() element: HTMLStzhDatalistElement;\n\n @Watch(\"direction\")\n @Watch(\"directionSmall\")\n @Watch(\"directionMedium\")\n @Watch(\"directionLarge\")\n @Watch(\"directionUltra\")\n directionWatcher() {\n this.setCurrentDirection();\n }\n\n @Watch(\"columns\")\n @Watch(\"columnsSmall\")\n @Watch(\"columnsMedium\")\n @Watch(\"columnsLarge\")\n @Watch(\"columnsUltra\")\n columnsWatcher() {\n this.setCurrentColumns();\n }\n\n @Watch(\"currentDirection\")\n currentDirectionWatcher(newValue: StzhDatalistDirection) {\n this.stzhDirectionChange.emit({\n component: \"stzh-datalist\",\n value: newValue\n });\n }\n\n @Watch(\"variant\")\n variantWatcher(newValue: StzhDatalistVariant) {\n this.stzhVariantChange.emit({\n component: \"stzh-datalist\",\n value: newValue\n });\n }\n\n @Watch(\"items\")\n itemsWatcher(newValue: any[] \| string) {\n if (typeof newValue === \"string\") {\n this._items = JSON.parse(newValue);\n } else {\n this._items = newValue;\n }\n }\n\n /* Get current direction /\n @Method()\n async getCurrentDirection() {\n return this.currentDirection;\n }\n\n @State() currentColumns: number = 1;\n @State() currentDirection: StzhDatalistDirection;\n\n private setCurrentDirection = () => {\n if (media(\"ultra\").matches && this.directionUltra) {\n this.currentDirection = this.directionUltra;\n } else if (media(\"large\").matches && this.directionLarge) {\n this.currentDirection = this.directionLarge;\n } else if (media(\"medium\").matches && this.directionMedium) {\n this.currentDirection = this.directionMedium;\n } else if (media(\"small\").matches && this.directionSmall) {\n this.currentDirection = this.directionSmall;\n } else {\n this.currentDirection = this.direction;\n }\n }\n\n private setCurrentColumns = () => {\n if (media(\"ultra\").matches && this.columnsUltra) {\n this.currentColumns = this.columnsUltra;\n } else if (media(\"large\").matches && this.columnsLarge) {\n this.currentColumns = this.columnsLarge;\n } else if (media(\"medium\").matches && this.columnsMedium) {\n this.currentColumns = this.columnsMedium;\n } else if (media(\"small\").matches && this.columnsSmall) {\n this.currentColumns = this.columnsSmall;\n } else {\n this.currentColumns = this.columns;\n }\n }\n\n resizeHandler = () => {\n this.setCurrentDirection();\n this.setCurrentColumns();\n }\n\n async componentWillLoad() {\n this.itemsWatcher(this.items);\n this.resizeHandler();\n }\n\n connectedCallback() {\n addMediaChangeListener(this.resizeHandler);\n }\n\n disconnectedCallback() {\n removeMediaChangeListener(this.resizeHandler);\n }\n\n render() {\n const classes = {\n \"stzh-datalist\": true,\n \"stzh-datalist--has-multiple-columns\": this.currentColumns > 1,\n [`stzh-datalist--direction-${this.currentDirection}`]: !!this.currentDirection,\n [`stzh-datalist--${this.variant}`]: !!this.variant\n };\n\n return (\n <Host\n is-direction={this.currentDirection}\n style={{\n '--columns': this.currentColumns ? this.currentColumns.toString() : null\n }}\n >\n <div class={classes}>\n <div class=\"stzh-datalist__wrapper\">\n <div class=\"stzh-datalist__list\" role=\"list\">\n {this._items.map((item) =>\n <stzh-datalist-item {...item}>\n {item.items && item.items.length > 0 &&\n <stzh-datalist items={item.items}></stzh-datalist>\n }\n </stzh-datalist-item>\n )}\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n",":host {\n --value-font-family: var(--stzh-font-family-medium);\n --value-font-weight: var(--stzh-font-weight-medium);\n --value-color: inherit;\n --action-display: flex;\n // --label-min-width: var(--item-label-min-width, none);\n // --leading-icon-background-color: transparent;\n --leading-icon-color: #{$colorGrey90};\n --nested-display: var(--stzh-datalist-item-nested-display, block);\n --wrapper-display: var(--stzh-datalist-item-wrapper-display, contents);\n\n // --hover-leading-icon-background-color: var(--leading-icon-background-color);\n // --hover-leading-icon-color: var(--leading-icon-color);\n\n // --horizontal-min-height: 48px;\n\n display: contents;\n\n &[href]:not([href=\"\"]),\n &[a11y-expanded],\n &[a11y-controls] {\n --value-color: #{$linkColor};\n --value-hover-color: #{$linkHoverColor};\n }\n}\n\n.stzh-datalist-item {\n position: relative;\n text-decoration-line: none;\n display: var(--wrapper-display);\n align-items: center;\n\n &__nested {\n display: contents;\n }\n\n &__nested-inner {\n display: var(--nested-display);\n grid-column: var(--full-grid-column);\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__wrapper {\n flex-grow: 1;\n display: grid;\n }\n\n &__leading,\n &__value,\n &__label,\n &__meta,\n &__action-list {\n color: inherit;\n display: flex;\n text-align: left;\n appearance: none;\n font-family: inherit;\n background: transparent;\n border: none;\n padding: 0;\n text-decoration-line: none;\n\n &.is-button,\n &.is-link {\n cursor: pointer;\n }\n }\n\n &__leading {\n flex-shrink: 0;\n\n &:not(:empty) {\n padding-right: space('xsmall');\n }\n }\n\n &__leading-icon-container {\n color: var(--leading-icon-color);\n // background-color: var(--leading-icon-background-color);\n // display: flex;\n // justify-content: center;\n // align-items: center;\n // border-radius: 50%;\n transition-property: color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__value-wrapper {\n display: flex;\n align-items: center;\n gap: space('xsmall');\n color: var(--value-color);\n transition: color $baseTransitionAnimationSpeed;\n }\n\n &__value {\n flex-grow: 1;\n flex-direction: column;\n }\n\n &__value-text {\n --color: initial;\n\n @include fontCurve('p1');\n font-family: var(--value-font-family);\n font-weight: var(--value-font-weight);\n width: auto;\n }\n\n &__label,\n &__meta {\n @include fontCurve('caption');\n }\n\n &__meta {\n justify-content: flex-end;\n }\n\n &__meta-text {\n display: flex;\n gap: space('xsmall');\n color: $colorGrey70;\n }\n\n &__label {\n color: $colorGrey90;\n }\n\n &__label-icon {\n\n }\n\n &__action-list {\n display: var(--action-display);\n justify-content: center;\n text-align: center;\n\n &:not(:empty) {\n padding-left: space('medium');\n }\n }\n\n &__action {\n &.is-non-interactive {\n display: flex;\n justify-content: center;\n align-items: center;\n width: $formInputHeightSmall;\n height: $formInputHeightSmall;\n }\n }\n\n &__interactive {\n position: absolute;\n top: 0;\n left: 0;\n }\n\n / Button variant /\n\n &--is-button &__icon.is-open {\n display: none;\n }\n\n &--is-button#{&}--is-expanded &__icon {\n &.is-closed {\n display: none;\n }\n\n &.is-open {\n display: inline-flex;\n }\n }\n\n / Interactive variant /\n\n &--is-interactive &__value-text {\n text-decoration-line: underline;\n }\n\n &--is-interactive:hover &__value-wrapper {\n color: var(--value-hover-color);\n }\n\n // &--is-interactive:hover &__leading-icon-container,\n // &--is-interactive:focus-within &__leading-icon-container {\n // color: var(--hover-leading-icon-color);\n // background-color: var(--hover-leading-icon-background-color);\n // }\n\n / Vertical Variant /\n\n &--direction-vertical &__leading,\n &--direction-vertical &__wrapper,\n &--direction-vertical &__action-list {\n &:not(:empty) {\n padding-top: space('xsmall');\n padding-bottom: space('xsmall');\n }\n }\n\n // &--direction-vertical &__leading-icon-container {\n // width: 40px;\n // height: 40px;\n // }\n\n // &--direction-vertical &__leading-icon {\n // --size: #{iconSize('medium')};\n // }\n\n &--direction-vertical &__meta {\n flex-direction: column;\n align-items: flex-start;\n }\n\n / Horizontal / Table Variant /\n\n // &--direction-horizontal &__leading,\n // &--direction-horizontal &__value,\n // // &--direction-horizontal &__label,\n // &--direction-horizontal &__meta,\n // &--direction-horizontal &__action-list {\n // min-height: var(--horizontal-min-height);\n // }\n\n &--direction-horizontal &__leading,\n &--direction-horizontal &__value,\n // &--direction-horizontal &__label,\n &--direction-horizontal &__action-list {\n &:not(:empty) {\n // @include spaceCurve('padding-top', 'tiny');\n // @include spaceCurve('padding-bottom', 'tiny');\n padding-top: space('xxsmall');\n padding-bottom: space('xxsmall');\n }\n }\n\n &--direction-horizontal &__meta {\n // @include spaceCurve('padding-bottom', 'tiny');\n padding-bottom: space('xxsmall');\n padding-top: calc(#{space('xxsmall')} + 12px);\n // padding-top: calc(#{spaceCurveValue('tiny')} + 12px);\n\n // @include mq($from: medium) {\n // padding-top: calc(#{spaceCurveValue('tiny', 'medium')} + 12px);\n // }\n\n // @include mq($from: large) {\n // padding-top: calc(#{spaceCurveValue('tiny', 'large')} + 12px);\n // }\n }\n\n // &--direction-horizontal &__label {\n // &:not(:empty) {\n // min-width: var(--label-min-width);\n // padding-right: space('xsmall');\n // }\n // }\n\n // &--direction-horizontal &__label:not(:empty) + &__value {\n // &:not(:empty) {\n // padding-left: space('xsmall');\n // }\n // }\n\n &--direction-horizontal &__meta {\n &:not(:empty) {\n padding-left: space('xsmall');\n }\n }\n\n // &--direction-horizontal &__leading-icon-container {\n // width: 24px;\n // height: 24px;\n // }\n\n &--direction-horizontal &__meta-status + &__meta-text {\n margin-left: space('xsmall');\n }\n\n /* Table Variant /\n\n &--table &__label,\n &--table &__meta {\n @include fontSize('nano');\n }\n\n &--table &__label {\n color: $colorGrey70;\n }\n\n &--table &__value-text {\n @include fontSize('milli');\n }\n\n &--table &__leading,\n &--table &__value,\n &--table &__label,\n &--table &__meta,\n &--table &__action-list {\n &:not(:empty) {\n padding-top: space('xsmall');\n padding-bottom: space('small');\n }\n }\n\n &--table &__label:not(:empty) + &__value {\n padding-left: space('medium');\n }\n\n &--table &__meta {\n &:not(:empty) {\n padding-left: space('medium');\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n Fragment,\n State,\n Watch\n} from \"@stencil/core\";\n\nimport {\n StzhDatalistItemActionClickEvent,\n StzhDatalistDirectionChangeEvent,\n StzhDatalistVariantChangeEvent,\n StzhDatalistVariant,\n StzhDatalistDirection,\n StzhStatusType,\n StzhDatalistItemClickEvent\n} from \"../../index\";\n\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet datalistItemCounter = 0;\n\n/\n @slot - Slot for nested datalist\n * @slot value - Slot for value (or use value slot instead)\n /\n@Component({\n tag: \"stzh-datalist-item\",\n styleUrl: \"stzh-datalist-item.scss\",\n scoped: true\n})\nexport class StzhDatalistItem {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Link /\n @Prop({ reflect: true }) href: string;\n\n /* Rel (if href is used) /\n @Prop() rel: string;\n\n /* Target (if href is used) /\n @Prop() target: string;\n\n /* Download attribute of link (if `href` used) /\n @Prop() download: string;\n\n /* Leading icon /\n @Prop() leadingIcon: string;\n\n /* Icon of action button (if href is used, will only be for presentation) /\n @Prop() icon: string;\n\n /* Icon position /\n @Prop() iconPosition: \"left\" \| \"right\" = \"right\";\n\n /* Overwrite aria-label of action button (default aria label is `label` and `value`). /\n @Prop() iconLabel: string;\n\n /* Tooltip content of action button. Overwrites aria-label (set by default or `iconLabel`) of action button. /\n @Prop() iconTooltip: string;\n\n /* Href of action button /\n @Prop() iconHref: string;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Value (or use value slot instead) /\n @Prop() value: string = \"\";\n\n /* Meta /\n @Prop({ reflect: true }) meta: string \| string[] = \"\";\n private _meta: string[] = [];\n\n /* Status Label /\n @Prop({ reflect: true }) statusLabel: string = \"\";\n\n /* Status Type /\n @Prop() statusType: StzhStatusType = \"default\";\n\n /* Aria expanded of link/button /\n @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n /* Aria controls of link/button /\n @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n /* Item action click event /\n @Event() stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;\n\n /* Item click event /\n @Event() stzhClick: EventEmitter<StzhDatalistItemClickEvent>;\n\n @Element() element: HTMLStzhDatalistItemElement;\n\n @Watch(\"meta\")\n metaWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n try {\n this._meta = JSON.parse(newValue);\n } catch (ex) {\n this._meta = newValue === \"\" ? [] : [newValue];\n }\n } else {\n this._meta = newValue;\n }\n }\n\n @Watch(\"rel\")\n externalWatcher() {\n this.external = this.rel && this.rel.includes(\"external\");\n }\n\n @Watch(\"href\")\n hrefWatcher() {\n this.isPhone = this.href && (this.href.startsWith(\"tel:\") \|\| this.href.startsWith(\"fax:\"));\n }\n\n @State() direction: StzhDatalistDirection = \"vertical\";\n @State() variant: StzhDatalistVariant = \"default\";\n\n private external: boolean = false;\n private isPhone: boolean = false;\n private datalist: HTMLStzhDatalistElement;\n private datalistItemId: string;\n\n private onActionClick = (originalEvent: MouseEvent) => {\n this.stzhItemActionClick.emit({\n component: \"stzh-datalist-item\",\n originalEvent\n });\n }\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-datalist-item\",\n originalEvent: event,\n href: this.href\n });\n }\n\n private handleDirectionChange = (event: CustomEvent<StzhDatalistDirectionChangeEvent>) => {\n this.direction = event.detail.value;\n }\n\n private handleVariantChange = (event: CustomEvent<StzhDatalistVariantChangeEvent>) => {\n this.variant = event.detail.value;\n }\n\n private renderInner(isButton: boolean, hasActionButton: boolean): DocumentFragment {\n const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n const Icon = () => (\n <Fragment>\n {(this.href \|\| this.icon) && !hasActionButton && !isButton &&\n <div class=\"stzh-datalist-item__label-icon\">\n <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon\n ? this.icon\n : (this.isPhone\n ? \"phone\"\n : (this.external && \"external-link\")\n )}\n ></stzh-icon>\n </div>\n }\n\n {isButton &&\n <div class=\"stzh-datalist-item__label-icon\">\n <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n </div>\n }\n </Fragment>\n );\n\n return (\n <Fragment>\n {this.variant === \"table\" &&\n <Item\n aria-hidden={this.label ? null : \"true\"}\n tabindex=\"-1\"\n id={`${this.datalistItemId}-label`}\n class={{\n \"stzh-datalist-item__label\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n onClick={this.onClick}\n >\n {this.label}\n </Item>\n }\n\n <Item\n id={`${this.datalistItemId}-value`}\n class={{\n \"stzh-datalist-item__value\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n // aria-labelledby={Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n aria-labelledby={Item !== 'div' ? `${this.variant === \"table\" ? `${this.datalistItemId}-label` : ''} ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n aria-controls={this.a11yControls \|\| null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n onClick={this.onClick}\n >\n {this.variant === \"default\" &&\n <div class=\"stzh-datalist-item__label\">{this.label}</div>\n }\n\n {this.external && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n\n <div class=\"stzh-datalist-item__value-wrapper\">\n {this.iconPosition === \"left\" && <Icon></Icon>}\n {this.value\n ?\n <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\" innerHTML={this.value}></stzh-text>\n :\n <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\">\n <slot name=\"value\"></slot>\n </stzh-text>\n }\n {this.iconPosition === \"right\" && <Icon></Icon>}\n </div>\n </Item>\n\n <Item\n aria-hidden={this.statusLabel \|\| this._meta.length > 0 ? null : \"true\"}\n tabindex=\"-1\"\n id={`${this.datalistItemId}-meta`}\n class={{\n \"stzh-datalist-item__meta\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n onClick={this.onClick}\n >\n {this.statusLabel &&\n <stzh-status\n class=\"stzh-datalist-item__meta-status\"\n label={this.statusLabel}\n type={this.statusType}\n ></stzh-status>\n }\n {this._meta.length > 0 &&\n <span class=\"stzh-datalist-item__meta-text\">\n {this._meta.map((meta, index) =>\n <Fragment>\n <span class=\"stzh-datalist-item__meta-text-inner\">{meta}</span>\n {index + 1 !== this._meta.length &&\n <span class=\"stzh-datalist-item__meta-separator\">\|</span>\n }\n </Fragment>\n )}\n </span>\n }\n </Item>\n </Fragment>\n )\n }\n\n private renderLeadingIcon(isButton: boolean): HTMLElement {\n const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n return (\n <Item\n role=\"presentation\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n class={{\n \"stzh-datalist-item__leading\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n onClick={this.onClick}\n >\n {this.leadingIcon &&\n <div class=\"stzh-datalist-item__leading-icon-container\">\n <stzh-icon class=\"stzh-datalist-item__leading-icon\" name={this.leadingIcon}></stzh-icon>\n </div>\n }\n </Item>\n );\n }\n\n async componentDidLoad() {\n // execute connectedCallbck again, because sometimes has problem rendering\n this.connectedCallback();\n }\n\n async componentWillLoad() {\n this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;\n this.metaWatcher(this.meta);\n this.externalWatcher();\n this.hrefWatcher();\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datalist-item\");\n }\n }\n\n async connectedCallback() {\n this.datalist = this.element.closest(\"stzh-datalist\");\n\n if (this.datalist) {\n this.variant = this.datalist.variant;\n this.direction = await this.datalist.getCurrentDirection();\n\n this.datalist?.addEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n this.datalist?.addEventListener(\"stzhVariantChange\", this.handleVariantChange);\n }\n }\n\n disconnectedCallback() {\n if (this.datalist) {\n this.datalist?.removeEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n this.datalist?.removeEventListener(\"stzhVariantChange\", this.handleVariantChange);\n this.datalist = null;\n }\n }\n\n render() {\n const isButton = typeof this.a11yExpanded !== \"undefined\"\n \|\| typeof this.a11yControls !== \"undefined\";\n\n const hasActionButton = !!((!this.href \|\| this.iconHref \|\| this.iconTooltip) && this.icon);\n\n const classes = {\n \"stzh-datalist-item\": true,\n \"stzh-datalist-item--is-interactive\": !!this.href \|\| isButton,\n \"stzh-datalist-item--is-link\": !!this.href,\n \"stzh-datalist-item--is-button\": isButton,\n \"stzh-datalist-item--is-expanded\": this.a11yExpanded,\n [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction && this.variant === \"default\",\n [`stzh-datalist-item--${this.variant}`]: !!this.variant\n };\n\n let ActionItem = isButton\n ? \"button\"\n : (hasActionButton\n ? \"div\"\n : \"a\"\n );\n\n const ActionButton = () => {\n return (\n <stzh-button\n class={{\n \"stzh-datalist-item__action\": true,\n \"is-button\": true\n }}\n variant=\"tertiary\"\n size=\"small\"\n aria-label={this.iconLabel}\n iconOnly={true}\n href={this.iconHref}\n icon={this.icon}\n onClick={this.onActionClick}\n ></stzh-button>\n );\n }\n\n return (\n <Host role=\"listitem\">\n <div class={classes}>\n {this.direction === \"horizontal\" \|\| this.variant === \"table\" ?\n <Fragment>\n {this.renderLeadingIcon(isButton)}\n {this.renderInner(isButton, hasActionButton)}\n </Fragment>\n :\n <Fragment>\n {this.renderLeadingIcon(isButton)}\n <div class=\"stzh-datalist-item__wrapper\">\n {this.renderInner(isButton, hasActionButton)}\n </div>\n </Fragment>\n }\n <ActionItem\n role={hasActionButton ? null : \"presentation\"}\n aria-hidden={hasActionButton ? null : \"true\"}\n tabindex=\"-1\"\n class={{\n \"stzh-datalist-item__action-list\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href && !this.iconHref\n }}\n href={!this.iconHref ? this.href : null}\n rel={!this.iconHref ? this.rel : null}\n target={!this.iconHref ? this.target : null}\n download={!this.iconHref ? this.download : null}\n >\n {/ {this.href && !this.iconHref &&\n (this.download ?\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : \"download\"}></stzh-icon>\n </div>\n :\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : (this.external ? \"external-link\" : \"arrow-right\")}></stzh-icon>\n </div>\n )\n } /}\n\n {/ {isButton &&\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n </div>\n } */}\n\n {hasActionButton &&\n (\n this.iconTooltip\n ?\n <stzh-tooltip content={this.iconTooltip}>\n {ActionButton()}\n </stzh-tooltip>\n :\n ActionButton()\n )\n }\n </ActionItem>\n\n <div class=\"stzh-datalist-item__spacer\"></div>\n </div>\n\n <div class=\"stzh-datalist-item__nested\">\n <div class=\"stzh-datalist-item__nested-inner\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["stzhDatalistCss","StzhDatalist","this","_items","setCurrentDirection","media","matches","directionUltra","currentDirection","directionLarge","directionMedium","directionSmall","direction","setCurrentColumns","columnsUltra","currentColumns","columnsLarge","columnsMedium","columnsSmall","columns","resizeHandler","directionWatcher","columnsWatcher","currentDirectionWatcher","newValue","stzhDirectionChange","emit","component","value","variantWatcher","stzhVariantChange","itemsWatcher","JSON","parse","getCurrentDirection","componentWillLoad","items","connectedCallback","addMediaChangeListener","disconnectedCallback","removeMediaChangeListener","render","classes","variant","h","Host","style","toString","class","role","map","item","Object","assign","length","stzhDatalistItemCss","datalistItemCounter","StzhDatalistItem","_meta","external","isPhone","onActionClick","originalEvent","stzhItemActionClick","onClick","event","stzhClick","href","handleDirectionChange","detail","handleVariantChange","metaWatcher","ex","externalWatcher","rel","includes","hrefWatcher","startsWith","renderInner","isButton","hasActionButton","Item","Icon","Fragment","icon","name","label","tabindex","id","datalistItemId","target","download","a11yControls","a11yExpanded","localization","$globals","externalLinkLabel","downloadLinkLabel","iconPosition","curve","innerHTML","statusLabel","type","statusType","meta","index","renderLeadingIcon","leadingIcon","componentDidLoad","window","stzhComponents","utils","fetchTranslations","element","datalist","closest","_a","addEventListener","_b","removeEventListener","iconHref","iconTooltip","ActionItem","ActionButton","size","iconLabel","iconOnly","content"],"sources":["src/components/stzh-datalist/stzh-datalist.scss?tag=stzh-datalist&encapsulation=scoped","src/components/stzh-datalist/stzh-datalist.tsx","src/components/stzh-datalist-item/stzh-datalist-item.scss?tag=stzh-datalist-item&encapsulation=scoped","src/components/stzh-datalist-item/stzh-datalist-item.tsx"],"sourcesContent":[":host {\n // @prop --item-label-min-width: Min width of label\n // --item-label-min-width: 120px;\n --columns: 1;\n --columns-gap: #{$gridGutter};\n --list-display: grid;\n --list-margin-right: calc(var(--columns-gap) / -1);\n --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) auto var(--columns-gap));\n --full-grid-column: 1 / 5;\n --nested-margin-left: var(--stzh-datalist-nested-margin-left, 0px);\n --details-content-width: var(--stzh-datalist-details-content-width, 100%);\n\n --grid-template-areas: var(\n --stzh-datalist-grid-template-areas,\n \"list list list list\"\n );\n\n --grid-template-columns: var(\n --stzh-datalist-grid-template-columns,\n #{$gridColumns}\n );\n\n margin-left: var(--nested-margin-left);\n\n @include mq($from: small) {\n --columns-gap: #{$gridGutterSmall};\n\n --grid-template-areas: var(\n --stzh-datalist-grid-template-areas,\n \"list list list list\"\n );\n }\n\n @include mq($from: medium) {\n --columns-gap: #{$gridGutterMedium};\n\n --grid-template-areas: var(\n --stzh-datalist-grid-template-areas,\n \"list list list list list list list list\"\n );\n\n --grid-template-columns: var(\n --stzh-datalist-grid-template-columns,\n #{$gridColumnsMedium}\n );\n }\n\n @include mq($from: large) {\n --columns-gap: #{$gridGutterLarge};\n }\n\n @include mq($from: ultra) {\n --columns-gap: #{$gridGutterUltra};\n }\n\n // @include mq($from: medium) { // was smallheader before\n // --item-label-min-width: 144px;\n // }\n\n // &[disable-label-min-width]:not([disable-label-min-width=\"false\"]) {\n // --item-label-min-width: none;\n // }\n\n // datalist-item or wrapper elements should be set to display: contents to make grid layout work.\n // in AEM edit mode: we prevent setting it, so the links can still be edited.\n\n ::slotted(.layout_column) > :not([class=\"cq-\"]),\n ::slotted(:not([class=\"cq-\"])) {\n display: contents;\n }\n\n // ::slotted(.layout_column) {\n // display: contents;\n\n // .section {\n // display: contents;\n // }\n // }\n\n &[is-direction=\"horizontal\"] {\n --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) auto auto var(--columns-gap));\n --full-grid-column: 1 / 6;\n\n &:where(:has(stzh-datalist-item:not([meta=\"\"]))),\n &:where(:has(stzh-datalist-item:not([status-label=\"\"]))) {\n --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap));\n }\n }\n\n &[variant=\"table\"] {\n --list-grid-template-columns: repeat(var(--columns), auto auto minmax(auto, 1fr) auto auto var(--columns-gap));\n --full-grid-column: 1 / 7;\n\n &:where(:has(stzh-datalist-item:not([meta=\"\"]))),\n &:where(:has(stzh-datalist-item:not([status-label=\"\"]))) {\n --list-grid-template-columns: repeat(var(--columns), auto auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap));\n }\n }\n}\n\n/* AEM edit mode: we set list as block element (always as one column), to prevent layout breaks /\n\n:host(:has([class=\"cq-\"])) {\n --stzh-datalist-item-wrapper-display: flex;\n\n --list-display: block;\n --list-margin-right: 0;\n}\n\n.stzh-datalist {\n // offset margin of nested datalist\n --stzh-datalist-nested-margin-left: #{space('large')};\n // details grid columns\n --stzh-details-content-grid-column: var(--full-grid-column);\n --stzh-details-content-padding-right: var(--columns-gap);\n --stzh-details-content-width: var(--details-content-width);\n\n @include gridGutter;\n display: grid;\n grid-template-areas: var(--grid-template-areas);\n grid-template-columns: var(--grid-template-columns);\n\n &__wrapper {\n grid-area: list;\n overflow: visible;\n }\n\n &__list {\n display: var(--list-display);\n border-collapse: collapse;\n grid-template-columns: var(--list-grid-template-columns);\n align-items: stretch;\n margin-right: var(--list-margin-right);\n }\n\n /* Multiple Columns /\n\n &--has-multiple-columns {\n // display of nested datalist\n --stzh-datalist-item-nested-display: none;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Watch,\n Prop,\n Event,\n EventEmitter,\n State,\n Method\n} from \"@stencil/core\";\n\nimport {\n StzhDatalistItemEntry,\n StzhDatalistDirection,\n StzhDatalistVariant,\n StzhDatalistVariantChangeEvent,\n StzhDatalistDirectionChangeEvent\n} from \"../../index\";\n\nimport {\n media,\n addMediaChangeListener,\n removeMediaChangeListener\n} from '../../utils/media-utils';\n\n/\n @slot - Slot for any content\n /\n@Component({\n tag: \"stzh-datalist\",\n styleUrl: \"stzh-datalist.scss\",\n scoped: true\n})\nexport class StzhDatalist {\n /* Variant /\n @Prop({ reflect: true }) variant: StzhDatalistVariant = \"default\";\n \n /* Columns /\n @Prop({ reflect: true }) columns: number = 1;\n\n /* Columns above small breakpoint /\n @Prop({ reflect: true }) columnsSmall: number;\n\n /* Columns above medium breakpoint /\n @Prop({ reflect: true }) columnsMedium: number;\n\n /* Columns above large breakpoint /\n @Prop({ reflect: true }) columnsLarge: number;\n\n /* Columns above ultra breakpoint /\n @Prop({ reflect: true }) columnsUltra: number;\n\n /* Direction /\n @Prop({ reflect: true }) direction: StzhDatalistDirection = \"vertical\";\n\n /* Direction above small breakpoint /\n @Prop({ reflect: true }) directionSmall: StzhDatalistDirection;\n\n /* Direction above medium breakpoint /\n @Prop({ reflect: true }) directionMedium: StzhDatalistDirection;\n\n /* Direction above large breakpoint /\n @Prop({ reflect: true }) directionLarge: StzhDatalistDirection;\n\n /* Direction above ultra breakpoint /\n @Prop({ reflect: true }) directionUltra: StzhDatalistDirection;\n\n /\n Whether to disable min-width of datalist item label for the `horizontal` variant.\n \n If `false`, the default `min-width` is `144px` (for >= 800px) and `120px` (for < 800px).\n * If `true`, the `min-width` is `none`, so the label column, will have the width of cell with the widest content.\n \n You can also overwrite the label min-width via CSS with the custom property `--item-label-min-width`.\n /\n // @Prop({ reflect: true }) disableLabelMinWidth: boolean = false;\n\n /\n Items in datalist\n * Array of objects that must at least include `value` attribute.\n * Can optionally contain `leadingIcon`, `label`, `meta`, `icon`, `iconLabel`, `iconTooltip`, `href`, `statusLabel`, `statusType` attribute and be nested to display deeper levels:\n * `[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\", \"items\": [...]}]`\n /\n @Prop() items: StzhDatalistItemEntry[] \| string = [];\n private _items: StzhDatalistItemEntry[] = [];\n\n /* Variant attribute change event /\n @Event() stzhVariantChange: EventEmitter<StzhDatalistVariantChangeEvent>;\n\n /* Direction attribute change event /\n @Event() stzhDirectionChange: EventEmitter<StzhDatalistDirectionChangeEvent>;\n\n @Element() element: HTMLStzhDatalistElement;\n\n @Watch(\"direction\")\n @Watch(\"directionSmall\")\n @Watch(\"directionMedium\")\n @Watch(\"directionLarge\")\n @Watch(\"directionUltra\")\n directionWatcher() {\n this.setCurrentDirection();\n }\n\n @Watch(\"columns\")\n @Watch(\"columnsSmall\")\n @Watch(\"columnsMedium\")\n @Watch(\"columnsLarge\")\n @Watch(\"columnsUltra\")\n columnsWatcher() {\n this.setCurrentColumns();\n }\n\n @Watch(\"currentDirection\")\n currentDirectionWatcher(newValue: StzhDatalistDirection) {\n this.stzhDirectionChange.emit({\n component: \"stzh-datalist\",\n value: newValue\n });\n }\n\n @Watch(\"variant\")\n variantWatcher(newValue: StzhDatalistVariant) {\n this.stzhVariantChange.emit({\n component: \"stzh-datalist\",\n value: newValue\n });\n }\n\n @Watch(\"items\")\n itemsWatcher(newValue: any[] \| string) {\n if (typeof newValue === \"string\") {\n this._items = JSON.parse(newValue);\n } else {\n this._items = newValue;\n }\n }\n\n /* Get current direction /\n @Method()\n async getCurrentDirection() {\n return this.currentDirection;\n }\n\n @State() currentColumns: number = 1;\n @State() currentDirection: StzhDatalistDirection;\n\n private setCurrentDirection = () => {\n if (media(\"ultra\").matches && this.directionUltra) {\n this.currentDirection = this.directionUltra;\n } else if (media(\"large\").matches && this.directionLarge) {\n this.currentDirection = this.directionLarge;\n } else if (media(\"medium\").matches && this.directionMedium) {\n this.currentDirection = this.directionMedium;\n } else if (media(\"small\").matches && this.directionSmall) {\n this.currentDirection = this.directionSmall;\n } else {\n this.currentDirection = this.direction;\n }\n }\n\n private setCurrentColumns = () => {\n if (media(\"ultra\").matches && this.columnsUltra) {\n this.currentColumns = this.columnsUltra;\n } else if (media(\"large\").matches && this.columnsLarge) {\n this.currentColumns = this.columnsLarge;\n } else if (media(\"medium\").matches && this.columnsMedium) {\n this.currentColumns = this.columnsMedium;\n } else if (media(\"small\").matches && this.columnsSmall) {\n this.currentColumns = this.columnsSmall;\n } else {\n this.currentColumns = this.columns;\n }\n }\n\n resizeHandler = () => {\n this.setCurrentDirection();\n this.setCurrentColumns();\n }\n\n async componentWillLoad() {\n this.itemsWatcher(this.items);\n this.resizeHandler();\n }\n\n connectedCallback() {\n addMediaChangeListener(this.resizeHandler);\n }\n\n disconnectedCallback() {\n removeMediaChangeListener(this.resizeHandler);\n }\n\n render() {\n const classes = {\n \"stzh-datalist\": true,\n \"stzh-datalist--has-multiple-columns\": this.currentColumns > 1,\n [`stzh-datalist--direction-${this.currentDirection}`]: !!this.currentDirection,\n [`stzh-datalist--${this.variant}`]: !!this.variant\n };\n\n return (\n <Host\n is-direction={this.currentDirection}\n style={{\n '--columns': this.currentColumns ? this.currentColumns.toString() : null\n }}\n >\n <div class={classes}>\n <div class=\"stzh-datalist__wrapper\">\n <div class=\"stzh-datalist__list\" role=\"list\">\n {this._items.map((item) =>\n <stzh-datalist-item {...item}>\n {item.items && item.items.length > 0 &&\n <stzh-datalist items={item.items}></stzh-datalist>\n }\n </stzh-datalist-item>\n )}\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n",":host {\n --value-font-family: var(--stzh-font-family-medium);\n --value-font-weight: var(--stzh-font-weight-medium);\n --value-color: inherit;\n --action-display: flex;\n // --label-min-width: var(--item-label-min-width, none);\n // --leading-icon-background-color: transparent;\n --leading-icon-color: #{$colorGrey90};\n --nested-display: var(--stzh-datalist-item-nested-display, block);\n --wrapper-display: var(--stzh-datalist-item-wrapper-display, contents);\n\n // --hover-leading-icon-background-color: var(--leading-icon-background-color);\n // --hover-leading-icon-color: var(--leading-icon-color);\n\n // --horizontal-min-height: 48px;\n\n display: contents;\n\n &[href]:not([href=\"\"]),\n &[a11y-expanded],\n &[a11y-controls] {\n --value-color: #{$linkColor};\n --value-hover-color: #{$linkHoverColor};\n }\n}\n\n.stzh-datalist-item {\n position: relative;\n text-decoration-line: none;\n display: var(--wrapper-display);\n align-items: center;\n\n &__nested {\n display: contents;\n }\n\n &__nested-inner {\n display: var(--nested-display);\n grid-column: var(--full-grid-column);\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__wrapper {\n flex-grow: 1;\n display: grid;\n }\n\n &__leading,\n &__value,\n &__label,\n &__meta,\n &__action-list {\n color: inherit;\n display: flex;\n text-align: left;\n appearance: none;\n font-family: inherit;\n background: transparent;\n border: none;\n padding: 0;\n text-decoration-line: none;\n\n &.is-button,\n &.is-link {\n cursor: pointer;\n }\n }\n\n &__leading {\n flex-shrink: 0;\n\n &:not(:empty) {\n padding-right: space('xsmall');\n }\n }\n\n &__leading-icon-container {\n color: var(--leading-icon-color);\n // background-color: var(--leading-icon-background-color);\n // display: flex;\n // justify-content: center;\n // align-items: center;\n // border-radius: 50%;\n transition-property: color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__value-wrapper {\n display: flex;\n align-items: center;\n gap: space('xsmall');\n color: var(--value-color);\n transition: color $baseTransitionAnimationSpeed;\n }\n\n &__value {\n flex-grow: 1;\n flex-direction: column;\n }\n\n &__value-text {\n --color: initial;\n\n @include fontCurve('p1');\n font-family: var(--value-font-family);\n font-weight: var(--value-font-weight);\n width: auto;\n }\n\n &__label,\n &__meta {\n @include fontCurve('caption');\n }\n\n &__meta {\n justify-content: flex-end;\n }\n\n &__meta-text {\n display: flex;\n gap: space('xsmall');\n color: $colorGrey70;\n }\n\n &__label {\n color: $colorGrey90;\n }\n\n &__label-icon {\n\n }\n\n &__action-list {\n display: var(--action-display);\n justify-content: center;\n text-align: center;\n\n &:not(:empty) {\n padding-left: space('medium');\n }\n }\n\n &__action {\n &.is-non-interactive {\n display: flex;\n justify-content: center;\n align-items: center;\n width: $formInputHeightSmall;\n height: $formInputHeightSmall;\n }\n }\n\n &__interactive {\n position: absolute;\n top: 0;\n left: 0;\n }\n\n / Button variant /\n\n &--is-button &__icon.is-open {\n display: none;\n }\n\n &--is-button#{&}--is-expanded &__icon {\n &.is-closed {\n display: none;\n }\n\n &.is-open {\n display: inline-flex;\n }\n }\n\n / Interactive variant /\n\n &--is-interactive &__value-text {\n text-decoration-line: underline;\n }\n\n &--is-interactive:hover &__value-wrapper {\n color: var(--value-hover-color);\n }\n\n // &--is-interactive:hover &__leading-icon-container,\n // &--is-interactive:focus-within &__leading-icon-container {\n // color: var(--hover-leading-icon-color);\n // background-color: var(--hover-leading-icon-background-color);\n // }\n\n / Vertical Variant /\n\n &--direction-vertical &__leading,\n &--direction-vertical &__wrapper,\n &--direction-vertical &__action-list {\n &:not(:empty) {\n padding-top: space('xsmall');\n padding-bottom: space('xsmall');\n }\n }\n\n // &--direction-vertical &__leading-icon-container {\n // width: 40px;\n // height: 40px;\n // }\n\n // &--direction-vertical &__leading-icon {\n // --size: #{iconSize('medium')};\n // }\n\n &--direction-vertical &__meta {\n flex-direction: column;\n align-items: flex-start;\n }\n\n / Horizontal / Table Variant /\n\n // &--direction-horizontal &__leading,\n // &--direction-horizontal &__value,\n // // &--direction-horizontal &__label,\n // &--direction-horizontal &__meta,\n // &--direction-horizontal &__action-list {\n // min-height: var(--horizontal-min-height);\n // }\n\n &--direction-horizontal &__leading,\n &--direction-horizontal &__value,\n // &--direction-horizontal &__label,\n &--direction-horizontal &__action-list {\n &:not(:empty) {\n // @include spaceCurve('padding-top', 'tiny');\n // @include spaceCurve('padding-bottom', 'tiny');\n padding-top: space('xxsmall');\n padding-bottom: space('xxsmall');\n }\n }\n\n &--direction-horizontal &__meta {\n // @include spaceCurve('padding-bottom', 'tiny');\n padding-bottom: space('xxsmall');\n padding-top: calc(#{space('xxsmall')} + 12px);\n // padding-top: calc(#{spaceCurveValue('tiny')} + 12px);\n\n // @include mq($from: medium) {\n // padding-top: calc(#{spaceCurveValue('tiny', 'medium')} + 12px);\n // }\n\n // @include mq($from: large) {\n // padding-top: calc(#{spaceCurveValue('tiny', 'large')} + 12px);\n // }\n }\n\n // &--direction-horizontal &__label {\n // &:not(:empty) {\n // min-width: var(--label-min-width);\n // padding-right: space('xsmall');\n // }\n // }\n\n // &--direction-horizontal &__label:not(:empty) + &__value {\n // &:not(:empty) {\n // padding-left: space('xsmall');\n // }\n // }\n\n &--direction-horizontal &__meta {\n &:not(:empty) {\n padding-left: space('xsmall');\n }\n }\n\n // &--direction-horizontal &__leading-icon-container {\n // width: 24px;\n // height: 24px;\n // }\n\n &--direction-horizontal &__meta-status + &__meta-text {\n margin-left: space('xsmall');\n }\n\n /* Table Variant /\n\n &--table &__label,\n &--table &__meta {\n @include fontSize('nano');\n }\n\n &--table &__label {\n color: $colorGrey70;\n }\n\n &--table &__value-text {\n @include fontSize('milli');\n }\n\n &--table &__leading,\n &--table &__value,\n &--table &__label,\n &--table &__meta,\n &--table &__action-list {\n &:not(:empty) {\n padding-top: space('xsmall');\n padding-bottom: space('small');\n }\n }\n\n &--table &__label:not(:empty) + &__value {\n padding-left: space('medium');\n }\n\n &--table &__meta {\n &:not(:empty) {\n padding-left: space('medium');\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n Fragment,\n State,\n Watch\n} from \"@stencil/core\";\n\nimport {\n StzhDatalistItemActionClickEvent,\n StzhDatalistDirectionChangeEvent,\n StzhDatalistVariantChangeEvent,\n StzhDatalistVariant,\n StzhDatalistDirection,\n StzhStatusType,\n StzhDatalistItemClickEvent\n} from \"../../index\";\n\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet datalistItemCounter = 0;\n\n/\n @slot - Slot for nested datalist\n * @slot value - Slot for value (or use value slot instead)\n /\n@Component({\n tag: \"stzh-datalist-item\",\n styleUrl: \"stzh-datalist-item.scss\",\n scoped: true\n})\nexport class StzhDatalistItem {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Link /\n @Prop({ reflect: true }) href: string;\n\n /* Rel (if href is used) /\n @Prop() rel: string;\n\n /* Target (if href is used) /\n @Prop() target: string;\n\n /* Download attribute of link (if `href` used) /\n @Prop() download: string;\n\n /* Leading icon /\n @Prop() leadingIcon: string;\n\n /* Icon of action button (if href is used, will only be for presentation) /\n @Prop() icon: string;\n\n /* Icon position /\n @Prop() iconPosition: \"left\" \| \"right\" = \"right\";\n\n /* Overwrite aria-label of action button (default aria label is `label` and `value`). /\n @Prop() iconLabel: string;\n\n /* Tooltip content of action button. Overwrites aria-label (set by default or `iconLabel`) of action button. /\n @Prop() iconTooltip: string;\n\n /* Href of action button /\n @Prop() iconHref: string;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Value (or use value slot instead) /\n @Prop() value: string = \"\";\n\n /* Meta /\n @Prop({ reflect: true }) meta: string \| string[] = \"\";\n private _meta: string[] = [];\n\n /* Status Label /\n @Prop({ reflect: true }) statusLabel: string = \"\";\n\n /* Status Type /\n @Prop() statusType: StzhStatusType = \"default\";\n\n /* Aria expanded of link/button /\n @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n /* Aria controls of link/button /\n @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n /* Item action click event /\n @Event() stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;\n\n /* Item click event /\n @Event() stzhClick: EventEmitter<StzhDatalistItemClickEvent>;\n\n @Element() element: HTMLStzhDatalistItemElement;\n\n @Watch(\"meta\")\n metaWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n try {\n this._meta = JSON.parse(newValue);\n } catch (ex) {\n this._meta = newValue === \"\" ? [] : [newValue];\n }\n } else {\n this._meta = newValue;\n }\n }\n\n @Watch(\"rel\")\n externalWatcher() {\n this.external = this.rel && this.rel.includes(\"external\");\n }\n\n @Watch(\"href\")\n hrefWatcher() {\n this.isPhone = this.href && (this.href.startsWith(\"tel:\") \|\| this.href.startsWith(\"fax:\"));\n }\n\n @State() direction: StzhDatalistDirection = \"vertical\";\n @State() variant: StzhDatalistVariant = \"default\";\n\n private external: boolean = false;\n private isPhone: boolean = false;\n private datalist: HTMLStzhDatalistElement;\n private datalistItemId: string;\n\n private onActionClick = (originalEvent: MouseEvent) => {\n this.stzhItemActionClick.emit({\n component: \"stzh-datalist-item\",\n originalEvent\n });\n }\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-datalist-item\",\n originalEvent: event,\n href: this.href\n });\n }\n\n private handleDirectionChange = (event: CustomEvent<StzhDatalistDirectionChangeEvent>) => {\n this.direction = event.detail.value;\n }\n\n private handleVariantChange = (event: CustomEvent<StzhDatalistVariantChangeEvent>) => {\n this.variant = event.detail.value;\n }\n\n private renderInner(isButton: boolean, hasActionButton: boolean): DocumentFragment {\n const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n const Icon = () => (\n <Fragment>\n {(this.href \|\| this.icon) && !hasActionButton && !isButton &&\n <div class=\"stzh-datalist-item__label-icon\">\n <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon\n ? this.icon\n : (this.isPhone\n ? \"phone\"\n : (this.external && \"external-link\")\n )}\n ></stzh-icon>\n </div>\n }\n\n {isButton &&\n <div class=\"stzh-datalist-item__label-icon\">\n <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n </div>\n }\n </Fragment>\n );\n\n return (\n <Fragment>\n {this.variant === \"table\" &&\n <Item\n aria-hidden={this.label ? null : \"true\"}\n tabindex=\"-1\"\n id={`${this.datalistItemId}-label`}\n class={{\n \"stzh-datalist-item__label\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n onClick={this.onClick}\n >\n {this.label}\n </Item>\n }\n\n <Item\n id={`${this.datalistItemId}-value`}\n class={{\n \"stzh-datalist-item__value\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n // aria-labelledby={Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n aria-labelledby={Item !== 'div' ? `${this.variant === \"table\" ? `${this.datalistItemId}-label` : ''} ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n aria-controls={this.a11yControls \|\| null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n onClick={this.onClick}\n >\n {this.variant === \"default\" &&\n <div class=\"stzh-datalist-item__label\">{this.label}</div>\n }\n\n {this.external && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n\n <div class=\"stzh-datalist-item__value-wrapper\">\n {this.iconPosition === \"left\" && <Icon></Icon>}\n {this.value\n ?\n <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\" innerHTML={this.value}></stzh-text>\n :\n <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\">\n <slot name=\"value\"></slot>\n </stzh-text>\n }\n {this.iconPosition === \"right\" && <Icon></Icon>}\n </div>\n </Item>\n\n <Item\n aria-hidden={this.statusLabel \|\| this._meta.length > 0 ? null : \"true\"}\n tabindex=\"-1\"\n id={`${this.datalistItemId}-meta`}\n class={{\n \"stzh-datalist-item__meta\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n onClick={this.onClick}\n >\n {this.statusLabel &&\n <stzh-status\n class=\"stzh-datalist-item__meta-status\"\n label={this.statusLabel}\n type={this.statusType}\n ></stzh-status>\n }\n {this._meta.length > 0 &&\n <span class=\"stzh-datalist-item__meta-text\">\n {this._meta.map((meta, index) =>\n <Fragment>\n <span class=\"stzh-datalist-item__meta-text-inner\">{meta}</span>\n {index + 1 !== this._meta.length &&\n <span class=\"stzh-datalist-item__meta-separator\">\|</span>\n }\n </Fragment>\n )}\n </span>\n }\n </Item>\n </Fragment>\n )\n }\n\n private renderLeadingIcon(isButton: boolean): HTMLElement {\n const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n return (\n <Item\n role=\"presentation\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n class={{\n \"stzh-datalist-item__leading\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n onClick={this.onClick}\n >\n {this.leadingIcon &&\n <div class=\"stzh-datalist-item__leading-icon-container\">\n <stzh-icon class=\"stzh-datalist-item__leading-icon\" name={this.leadingIcon}></stzh-icon>\n </div>\n }\n </Item>\n );\n }\n\n async componentDidLoad() {\n // execute connectedCallbck again, because sometimes has problem rendering\n this.connectedCallback();\n }\n\n async componentWillLoad() {\n this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;\n this.metaWatcher(this.meta);\n this.externalWatcher();\n this.hrefWatcher();\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datalist-item\");\n }\n }\n\n async connectedCallback() {\n this.datalist = this.element.closest(\"stzh-datalist\");\n\n if (this.datalist) {\n this.variant = this.datalist.variant;\n this.direction = await this.datalist.getCurrentDirection();\n\n this.datalist?.addEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n this.datalist?.addEventListener(\"stzhVariantChange\", this.handleVariantChange);\n }\n }\n\n disconnectedCallback() {\n if (this.datalist) {\n this.datalist?.removeEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n this.datalist?.removeEventListener(\"stzhVariantChange\", this.handleVariantChange);\n this.datalist = null;\n }\n }\n\n render() {\n const isButton = typeof this.a11yExpanded !== \"undefined\"\n \|\| typeof this.a11yControls !== \"undefined\";\n\n const hasActionButton = !!((!this.href \|\| this.iconHref \|\| this.iconTooltip) && this.icon);\n\n const classes = {\n \"stzh-datalist-item\": true,\n \"stzh-datalist-item--is-interactive\": !!this.href \|\| isButton,\n \"stzh-datalist-item--is-link\": !!this.href,\n \"stzh-datalist-item--is-button\": isButton,\n \"stzh-datalist-item--is-expanded\": this.a11yExpanded,\n [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction && this.variant === \"default\",\n [`stzh-datalist-item--${this.variant}`]: !!this.variant\n };\n\n let ActionItem = isButton\n ? \"button\"\n : (hasActionButton\n ? \"div\"\n : \"a\"\n );\n\n const ActionButton = () => {\n return (\n <stzh-button\n class={{\n \"stzh-datalist-item__action\": true,\n \"is-button\": true\n }}\n variant=\"tertiary\"\n size=\"small\"\n aria-label={this.iconLabel}\n iconOnly={true}\n href={this.iconHref}\n icon={this.icon}\n onClick={this.onActionClick}\n ></stzh-button>\n );\n }\n\n return (\n <Host role=\"listitem\">\n <div class={classes}>\n {this.direction === \"horizontal\" \|\| this.variant === \"table\" ?\n <Fragment>\n {this.renderLeadingIcon(isButton)}\n {this.renderInner(isButton, hasActionButton)}\n </Fragment>\n :\n <Fragment>\n {this.renderLeadingIcon(isButton)}\n <div class=\"stzh-datalist-item__wrapper\">\n {this.renderInner(isButton, hasActionButton)}\n </div>\n </Fragment>\n }\n <ActionItem\n role={hasActionButton ? null : \"presentation\"}\n aria-hidden={hasActionButton ? null : \"true\"}\n tabindex=\"-1\"\n class={{\n \"stzh-datalist-item__action-list\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href && !this.iconHref\n }}\n href={!this.iconHref ? this.href : null}\n rel={!this.iconHref ? this.rel : null}\n target={!this.iconHref ? this.target : null}\n download={!this.iconHref ? this.download : null}\n >\n {/ {this.href && !this.iconHref &&\n (this.download ?\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : \"download\"}></stzh-icon>\n </div>\n :\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : (this.external ? \"external-link\" : \"arrow-right\")}></stzh-icon>\n </div>\n )\n } /}\n\n {/ {isButton &&\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n </div>\n } */}\n\n {hasActionButton &&\n (\n this.iconTooltip\n ?\n <stzh-tooltip content={this.iconTooltip}>\n {ActionButton()}\n </stzh-tooltip>\n :\n ActionButton()\n )\n }\n </ActionItem>\n\n <div class=\"stzh-datalist-item__spacer\"></div>\n </div>\n\n <div class=\"stzh-datalist-item__nested\">\n <div class=\"stzh-datalist-item__nested-inner\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-94947ab0.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["stzhPagebottomCss","StzhPagebottom","componentWillLoad","this","localization","window","stzhComponents","utils","fetchTranslations","element","render","classes","rs_skip","h","Host","class","withPrint","label","printLabel","variant","size","noPaddingLeft","noPaddingRight","analyticsId","printAnalyticsId","shareDisabled","shareTitle","url","shareUrl","services","shareServices","mailSubject","shareMailSubject","mailBody","shareMailBody","name"],"sources":["src/components/stzh-pagebottom/stzh-pagebottom.scss?tag=stzh-pagebottom&encapsulation=scoped","src/components/stzh-pagebottom/stzh-pagebottom.tsx"],"sourcesContent":[":host {\n @media print {\n display: none;\n }\n\n // ::slotted([slot=\"logo\"]) {\n // height: 38px;\n // }\n}\n\n.stzh-pagebottom {\n &__wrapper {\n display: grid;\n }\n\n &__left {\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n row-gap: space('xsmall');\n\n @include mq($from: small) {\n flex-direction: row;\n }\n }\n\n &__share-title {\n @include fontCurve('caption');\n\t\tmargin-bottom: space('small');\n }\n\n &__sticky-actions {\n margin-left: auto;\n margin-top: space('medium');\n\n --stzh-button-white-space: nowrap;\n\n @include mq($from: small) {\n margin-top: 0;\n }\n }\n\n &__print,\n &__share-wrapper {\n flex-shrink: 0;\n }\n\n &__share-wrapper {\n margin-left: -10px;\n\n @include mq($from: medium) {\n margin-left: 0;\n }\n }\n\n &__print {\n @include mq($from: small) {\n margin-right: space('xxlarge');\n }\n\n @include mq($from: medium) {\n @include spaceCurve('margin-right', 'big');\n }\n }\n\n // &__logo {\n // @include mq($from: small) {\n // margin-left: auto;\n // }\n // }\n\n // &__logo-link {\n // &:not(:empty) {\n // display: block;\n // margin-top: space('xlarge');\n\n // @include mq($from: small) {\n // margin-top: 0;\n // margin-left: space('xlarge');\n // }\n // }\n // }\n\n &:has(#{&}__sticky-actions:not(:empty)) &__wrapper {\n grid-template-columns: auto;\n\n @include mq($from: small) {\n grid-template-columns: minmax(0, 1fr) calc(110px + 44px + #{space('small')} + #{space('medium')});\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n} from \"@stencil/core\";\n\nimport { ShareService } from \"../../index\";\n// import { hasSlot } from \"../../utils/utils\";\n\nimport { StzhPagebottomLocalizedText } from \"./stzh-pagebottom.localization\";\n\n/*\n /\n@Component({\n tag: \"stzh-pagebottom\",\n styleUrl: \"stzh-pagebottom.scss\",\n scoped: true\n})\nexport class StzhPagebottom {\n /** Translation strings. /\n @Prop() localization: StzhPagebottomLocalizedText;\n\n /* Share Title /\n @Prop() shareTitle: string = \"\";\n\n /* URL of current site (uses full URL by default) /\n @Prop() shareUrl: string;\n\n /\n Array of enabled share buttons.\n * Possible services: `facebook` / `twitter` / `linkedin` / `xing` / `mail`\n /\n @Prop() shareServices: ShareService[] \| string;\n\n /* Whether to show share /\n @Prop({ reflect: true }) shareDisabled: boolean;\n\n /* Overwrite share mail subject translation /\n @Prop() shareMailSubject: string;\n\n /* Overwrite share mail body translation /\n @Prop() shareMailBody: string;\n\n /* Logo href /\n @Prop() logoHref: string = \"https://www.stadt-zuerich.ch\";\n\n /* Whether to show print button /\n @Prop({ reflect: true }) withPrint: boolean;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute of the print button element.\n /\n @Prop() printAnalyticsId: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the logo link element.\n * Default value will be \"Footer Logo\"\n /\n // @Prop() logoAnalyticsId: string;\n\n @Element() element: HTMLStzhPagebottomElement;\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"pagebottom\");\n }\n }\n\n render() {\n // const printUsed: boolean = hasSlot(this.element, \"print\");\n // const logoUsed: boolean = hasSlot(this.element, \"logo\");\n\n const classes = {\n \"stzh-pagebottom\": true,\n \"rs_skip\": true // will prevent component being read by readspeaker\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-pagebottom__wrapper\">\n <div class=\"stzh-pagebottom__left\">\n {this.withPrint &&\n <div class=\"stzh-pagebottom__print\">\n <stzh-print>\n <stzh-button\n label={this.localization.printLabel}\n variant=\"tertiary-plain\"\n size=\"small\"\n noPaddingLeft={true}\n noPaddingRight={true}\n analyticsId={this.printAnalyticsId}\n ></stzh-button>\n </stzh-print>\n </div>\n }\n\n {!this.shareDisabled &&\n <div class=\"stzh-pagebottom__share-wrapper\">\n {this.shareTitle &&\n <div class=\"stzh-pagebottom__share-title\">{this.shareTitle}</div>\n }\n <stzh-share\n url={this.shareUrl}\n services={this.shareServices}\n mailSubject={this.shareMailSubject}\n mailBody={this.shareMailBody}\n ></stzh-share>\n </div>\n }\n </div>\n\n <div class=\"stzh-pagebottom__sticky-actions\">\n <slot name=\"sticky-actions\"></slot>\n </div>\n </div>\n\n {/ {logoUsed &&\n <div class=\"stzh-pagebottom__logo\">\n <a\n href={this.logoHref}\n class=\"stzh-pagebottom__logo-link\"\n s-object-id={this.logoAnalyticsId \|\| \"Footer Logo\"}\n >\n <slot name=\"logo\"></slot>\n </a>\n </div>\n } */}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAoB,+uH,~~MCoBbC~~,EAAc,M,qEAKI,G,6JAqBF,+B,yDAoB3B,uBAAMC,GACJ,IAAKC,KAAKC,aAAc,CACtBD,KAAKC,mBAAqBC,OAAOC,eAAeC,MAAMC,kBAAkBL,KAAKM,QAAS,a,EAI1F,MAAAC,GAIE,MAAMC,EAAU,CACd,kBAAmB,KACnBC,QAAW,MAGb,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOJ,GACVE,EAAA,OAAKE,MAAM,4BACTF,EAAA,OAAKE,MAAM,yBACRZ,KAAKa,WACJH,EAAA,OAAKE,MAAM,0BACTF,EAAA,kBACEA,EAAA,eACEI,MAAOd,KAAKC,aAAac,WACzBC,QAAQ,iBACRC,KAAK,QACLC,cAAe,KACfC,eAAgB,KAChBC,YAAapB,KAAKqB,sBAMxBrB,KAAKsB,eACLZ,EAAA,OAAKE,MAAM,kCACRZ,KAAKuB,YACJb,EAAA,OAAKE,MAAM,gCAAgCZ,KAAKuB,YAElDb,EAAA,cACEc,IAAKxB,KAAKyB,SACVC,SAAU1B,KAAK2B,cACfC,YAAa5B,KAAK6B,iBAClBC,SAAU9B,KAAK+B,kBAMvBrB,EAAA,OAAKE,MAAM,mCACTF,EAAA,QAAMsB,KAAK,sB"}
1	+ {"version":3,"names":["stzhPagebottomCss","StzhPagebottom","componentWillLoad","this","localization","window","stzhComponents","utils","fetchTranslations","element","render","classes","rs_skip","h","Host","class","withPrint","label","printLabel","variant","size","noPaddingLeft","noPaddingRight","analyticsId","printAnalyticsId","shareDisabled","shareTitle","url","shareUrl","services","shareServices","mailSubject","shareMailSubject","mailBody","shareMailBody","name"],"sources":["src/components/stzh-pagebottom/stzh-pagebottom.scss?tag=stzh-pagebottom&encapsulation=scoped","src/components/stzh-pagebottom/stzh-pagebottom.tsx"],"sourcesContent":[":host {\n @media print {\n display: none;\n }\n\n // ::slotted([slot=\"logo\"]) {\n // height: 38px;\n // }\n}\n\n.stzh-pagebottom {\n &__wrapper {\n display: grid;\n }\n\n &__left {\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n row-gap: space('xsmall');\n\n @include mq($from: small) {\n flex-direction: row;\n }\n }\n\n &__share-title {\n @include fontCurve('caption');\n\t\tmargin-bottom: space('small');\n }\n\n &__sticky-actions {\n margin-left: auto;\n margin-top: space('medium');\n\n --stzh-button-white-space: nowrap;\n\n @include mq($from: small) {\n margin-top: 0;\n }\n }\n\n &__print,\n &__share-wrapper {\n flex-shrink: 0;\n }\n\n &__share-wrapper {\n margin-left: -10px;\n\n @include mq($from: medium) {\n margin-left: 0;\n }\n }\n\n &__print {\n @include mq($from: small) {\n margin-right: space('xxlarge');\n }\n\n @include mq($from: medium) {\n @include spaceCurve('margin-right', 'big');\n }\n }\n\n // &__logo {\n // @include mq($from: small) {\n // margin-left: auto;\n // }\n // }\n\n // &__logo-link {\n // &:not(:empty) {\n // display: block;\n // margin-top: space('xlarge');\n\n // @include mq($from: small) {\n // margin-top: 0;\n // margin-left: space('xlarge');\n // }\n // }\n // }\n\n &:has(#{&}__sticky-actions:not(:empty)) &__wrapper {\n grid-template-columns: auto;\n\n @include mq($from: small) {\n grid-template-columns: minmax(0, 1fr) calc(110px + 44px + #{space('small')} + #{space('medium')});\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n} from \"@stencil/core\";\n\nimport { ShareService } from \"../../index\";\n// import { hasSlot } from \"../../utils/utils\";\n\nimport { StzhPagebottomLocalizedText } from \"./stzh-pagebottom.localization\";\n\n/*\n @slot sticky-actions - Slot for sticky actions\n /\n@Component({\n tag: \"stzh-pagebottom\",\n styleUrl: \"stzh-pagebottom.scss\",\n scoped: true\n})\nexport class StzhPagebottom {\n /* Translation strings. /\n @Prop() localization: StzhPagebottomLocalizedText;\n\n /* Share Title /\n @Prop() shareTitle: string = \"\";\n\n /* URL of current site (uses full URL by default) /\n @Prop() shareUrl: string;\n\n /\n Array of enabled share buttons.\n * Possible services: `facebook` / `twitter` / `linkedin` / `xing` / `mail`\n /\n @Prop() shareServices: ShareService[] \| string;\n\n /* Whether to show share /\n @Prop({ reflect: true }) shareDisabled: boolean;\n\n /* Overwrite share mail subject translation /\n @Prop() shareMailSubject: string;\n\n /* Overwrite share mail body translation /\n @Prop() shareMailBody: string;\n\n /* Logo href /\n @Prop() logoHref: string = \"https://www.stadt-zuerich.ch\";\n\n /* Whether to show print button /\n @Prop({ reflect: true }) withPrint: boolean;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute of the print button element.\n /\n @Prop() printAnalyticsId: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the logo link element.\n * Default value will be \"Footer Logo\"\n /\n // @Prop() logoAnalyticsId: string;\n\n @Element() element: HTMLStzhPagebottomElement;\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"pagebottom\");\n }\n }\n\n render() {\n // const printUsed: boolean = hasSlot(this.element, \"print\");\n // const logoUsed: boolean = hasSlot(this.element, \"logo\");\n\n const classes = {\n \"stzh-pagebottom\": true,\n \"rs_skip\": true // will prevent component being read by readspeaker\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-pagebottom__wrapper\">\n <div class=\"stzh-pagebottom__left\">\n {this.withPrint &&\n <div class=\"stzh-pagebottom__print\">\n <stzh-print>\n <stzh-button\n label={this.localization.printLabel}\n variant=\"tertiary-plain\"\n size=\"small\"\n noPaddingLeft={true}\n noPaddingRight={true}\n analyticsId={this.printAnalyticsId}\n ></stzh-button>\n </stzh-print>\n </div>\n }\n\n {!this.shareDisabled &&\n <div class=\"stzh-pagebottom__share-wrapper\">\n {this.shareTitle &&\n <div class=\"stzh-pagebottom__share-title\">{this.shareTitle}</div>\n }\n <stzh-share\n url={this.shareUrl}\n services={this.shareServices}\n mailSubject={this.shareMailSubject}\n mailBody={this.shareMailBody}\n ></stzh-share>\n </div>\n }\n </div>\n\n <div class=\"stzh-pagebottom__sticky-actions\">\n <slot name=\"sticky-actions\"></slot>\n </div>\n </div>\n\n {/ {logoUsed &&\n <div class=\"stzh-pagebottom__logo\">\n <a\n href={this.logoHref}\n class=\"stzh-pagebottom__logo-link\"\n s-object-id={this.logoAnalyticsId \|\| \"Footer Logo\"}\n >\n <slot name=\"logo\"></slot>\n </a>\n </div>\n } */}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAoB,+uH,MCqBbC,EAAc,M,qEAKI,G,6JAqBF,+B,yDAoB3B,uBAAMC,GACJ,IAAKC,KAAKC,aAAc,CACtBD,KAAKC,mBAAqBC,OAAOC,eAAeC,MAAMC,kBAAkBL,KAAKM,QAAS,a,EAI1F,MAAAC,GAIE,MAAMC,EAAU,CACd,kBAAmB,KACnBC,QAAW,MAGb,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOJ,GACVE,EAAA,OAAKE,MAAM,4BACTF,EAAA,OAAKE,MAAM,yBACRZ,KAAKa,WACJH,EAAA,OAAKE,MAAM,0BACTF,EAAA,kBACEA,EAAA,eACEI,MAAOd,KAAKC,aAAac,WACzBC,QAAQ,iBACRC,KAAK,QACLC,cAAe,KACfC,eAAgB,KAChBC,YAAapB,KAAKqB,sBAMxBrB,KAAKsB,eACLZ,EAAA,OAAKE,MAAM,kCACRZ,KAAKuB,YACJb,EAAA,OAAKE,MAAM,gCAAgCZ,KAAKuB,YAElDb,EAAA,cACEc,IAAKxB,KAAKyB,SACVC,SAAU1B,KAAK2B,cACfC,YAAa5B,KAAK6B,iBAClBC,SAAU9B,KAAK+B,kBAMvBrB,EAAA,OAAKE,MAAM,mCACTF,EAAA,QAAMsB,KAAK,sB"}

package/dist/stzh-components/{p-d9fa718c.entry.js → p-995bee31.entry.js} RENAMED Viewed

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

package/dist/stzh-components/p-995bee31.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

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