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/cjs/stzh-search.cjs.entry.js CHANGED Viewed

@@ -57,6 +57,8 @@ const StzhSearch = class {
     this._showMoreLink = false;
     this.fetch = async (append = false, initial = false) => {
       var _a, _b;
+      this.loading = true;
+      this.error = "";
       if (this.currentController) {
         this.currentController.abort();
       }
@@ -64,8 +66,6 @@ const StzhSearch = class {
         this.loading = false;
         return;
       }
-      this.loading = true;
-      this.error = "";
       let apiUrl = this.api.replace(/\{lang\}/gi, this.localization.$locale);
       let limit = this.limit.toString();
       this.params.set("offset", append ? this.results.length.toString() : "0");
@@ -128,7 +128,6 @@ const StzhSearch = class {
         searchParams.delete("offset");
         searchParams.set("limit", this.results.length.toString());
         newUrlParams.set("search", searchParams.toString());
-        // console.log(location.search, searchParams.toString(), newUrlParams.toString());
         window.history.replaceState(null, "", `${location.pathname}?${newUrlParams}`);
       }
       if (initial || !this.firstFetched) {
@@ -407,7 +406,7 @@ const StzhSearch = class {
         counter: `${chipResult.amount}`,
         variant: "filter",
         size: "small",
-      })) }))))), filtersAsideUsed && (index.h(index.Fragment, null, index.h("div", { class: "stzh-search__filters-aside", onStzhChange: this.handleAsideFilterChange }, index.h("div", { class: "stzh-search__filters-aside-inner" }, index.h("div", { class: "stzh-search__filters-aside-heading" }, this.localization.moreFilter), index.h("stzh-details", { open: this.isDetailsOpen, class: "stzh-search__filters-aside-details" }, index.h("stzh-button", { class: "stzh-search__filters-aside-details-trigger", variant: "tertiary-plain", size: "small", noPaddingLeft: true, showToggleIcon: true, iconPosition: "right", label: this.localization.moreFilter }), index.h("div", { slot: "content" }, index.h("slot", { name: "filters-aside" }))))))), index.h("div", { class: "stzh-search__results-wrapper" }, resultsShown && (index.h(index.Fragment, null, this.results.length === 0 ? (index.h(index.Fragment, null, this.variant !== "teaser" && this.resultsHeading && (index.h("stzh-heading", { class: "stzh-search__results-heading", curve: "h3", level: this.resultHeadingLevel, innerHTML: this.resultsHeading })), this.emptyText && (index.h("stzh-text", { class: "stzh-search__empty-text", innerHTML: this.emptyText })), this.emptyLinkLabel && this.emptyLinkHref && (index.h("div", { class: "stzh-search__empty-link-wrapper" }, index.h("stzh-link", { href: this.emptyLinkHref, label: this.emptyLinkLabel }))))) : (index.h(index.Fragment, null, this.variant !== "teaser" && this.resultsHeading && (index.h("stzh-heading", { class: "stzh-search__results-heading", curve: "h3", level: this.resultHeadingLevel, innerHTML: this.resultsHeading })), index.h(WrapperElement, Object.assign({ class: "stzh-search__results" }, wrapperProps), this.results.map(result => (index.h("div", { class: "stzh-search__results-item", innerHTML: result.html || "" })))), index.h("div", { class: "stzh-search__actions-wrapper" }, this._showMoreLink && (index.h("stzh-button", { variant: "secondary", class: "stzh-search__action-more", label: this.localization.showMore, onClick: this.handleMoreClick, a11yDisabled: this.loading }))))))), this.error && (index.h("div", { class: "stzh-search__error" }, index.h("stzh-message", { type: "error", label: this.error }))), this.loading && index.h("stzh-loader", { class: "stzh-search__loader" })), index.h("slot", null))));
+      })) }))))), filtersAsideUsed && (index.h(index.Fragment, null, index.h("div", { class: "stzh-search__filters-aside", onStzhChange: this.handleAsideFilterChange }, index.h("div", { class: "stzh-search__filters-aside-inner" }, index.h("div", { class: "stzh-search__filters-aside-heading" }, this.localization.moreFilter), index.h("stzh-details", { open: this.isDetailsOpen, class: "stzh-search__filters-aside-details" }, index.h("stzh-button", { class: "stzh-search__filters-aside-details-trigger", variant: "tertiary-plain", size: "small", noPaddingLeft: true, showToggleIcon: true, iconPosition: "right", label: this.localization.moreFilter }), index.h("div", { slot: "content" }, index.h("slot", { name: "filters-aside" }))))))), index.h("div", { class: "stzh-search__results-wrapper" }, resultsShown && (index.h(index.Fragment, null, this.results.length === 0 ? (index.h(index.Fragment, null, this.variant !== "teaser" && this.resultsHeading && (index.h("stzh-heading", { class: "stzh-search__results-heading", curve: "h3", level: this.resultHeadingLevel, innerHTML: this.resultsHeading })), this.emptyText && (index.h("stzh-text", { class: "stzh-search__empty-text", innerHTML: this.emptyText })), this.emptyLinkLabel && this.emptyLinkHref && (index.h("div", { class: "stzh-search__empty-link-wrapper" }, index.h("stzh-link", { href: this.emptyLinkHref, label: this.emptyLinkLabel }))))) : (index.h(index.Fragment, null, this.variant !== "teaser" && this.resultsHeading && (index.h("stzh-heading", { class: "stzh-search__results-heading", curve: "h3", level: this.resultHeadingLevel, innerHTML: this.resultsHeading })), index.h(WrapperElement, Object.assign({ class: "stzh-search__results" }, wrapperProps), this.results.map(result => (index.h("div", { class: "stzh-search__results-item", innerHTML: result.html || "" })))), index.h("div", { class: "stzh-search__actions-wrapper" }, this._showMoreLink && (index.h("stzh-button", { variant: "secondary", class: "stzh-search__action-more", label: this.localization.showMore, onClick: this.handleMoreClick, disabled: this.loading, a11yDisabled: this.loading }))))))), this.error && (index.h("div", { class: "stzh-search__error" }, index.h("stzh-message", { type: "error", label: this.error }))), this.loading && index.h("stzh-loader", { class: "stzh-search__loader" })), index.h("slot", null))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/stzh-search.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-search.entry.cjs.js","mappings":"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","names":["axios","debounce","media","raf","addMediaChangeListener","removeMediaChangeListener","hasSlot","h","Host","Fragment"],"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 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 if (this.currentController) {\n this.currentController.abort();\n }\n\n if (!this.hasRequiredParams && !append) {\n this.loading = false;\n return;\n }\n\n this.loading = true;\n this.error = \"\";\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 // console.log(location.search, searchParams.toString(), newUrlParams.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 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"],"version":3}
1	+ {"file":"stzh-search.entry.cjs.js","mappings":"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","names":["axios","debounce","media","raf","addMediaChangeListener","removeMediaChangeListener","hasSlot","h","Host","Fragment"],"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"],"version":3}

package/dist/cjs/stzh-sticky-actions.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-sticky-actions.entry.cjs.js","mappings":";;;;;;;;;;;AAAA,MAAM,oBAAoB,GAAG,+vFAA+vF;;~~MCa~~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","names":["throttle","hasSlot","h","Host","forceUpdate"],"sources":["src/components/stzh-sticky-actions/stzh-sticky-actions.scss?tag=stzh-sticky-actions&encapsulation=shadow","src/components/stzh-sticky-actions/stzh-sticky-actions.tsx"],"sourcesContent":[":host {\n --gap: #{space('small')};\n --sticky-padding-bottom: var(--stzh-sticky-actions-sticky-padding-bottom, #{space('small')});\n\n --stuck-offset: calc(\n var(--stzh-pagetitle-disturber-stuck-height, 0px)\n + var(--stzh-sticky-cta-stuck-bottom-height, 0px)\n );\n\n @include mq($from: medium) {\n --sticky-padding-bottom: var(--stzh-sticky-actions-sticky-padding-bottom, #{space('medium')});\n }\n\n // z-index: $zIndexSticky;\n // position: fixed;\n // right: $containerMargin;\n // bottom: space('small');\n // transition: transform $baseTransitionAnimationSpeed;\n // transform:\n // translateY(calc((\n // var(--stzh-pagetitle-disturber-stuck-height, 0px)\n // + var(--stzh-cta-stuck-bottom-height, 0px)\n // ) / -1))\n // translateX(0);\n\n // @include mq($from: small) {\n // right: $containerMarginSmall;\n // }\n\n // @include mq($from: medium) {\n // right: $containerMarginMedium;\n // }\n\n // @include mq($from: large) {\n // right: $containerMarginLarge;\n // }\n\n // @include mq($from: ultra) {\n // right: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2);\n // }\n\n @media print {\n display: none;\n }\n}\n\n.stzh-sticky-actions {\n &__container {\n display: flex;\n justify-content: flex-end;\n transition-property: transform;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__sticky {\n --padding-top: 0px;\n --padding-bottom: var(--sticky-padding-bottom);\n }\n\n &__sticky[is-stuck-bottom] &__container {\n transform: translateY(calc(var(--stuck-offset) / -1))\n }\n\n &__scrollup-wrapper {\n transition-property: transform, opacity, visibility;\n transition-duration: $baseTransitionAnimationSpeed;\n opacity: 0;\n visibility: hidden;\n transform: translateX(var(--stzh-sticky-actions-scrollup-width, 44px));\n }\n\n &.has-chat &__scrollup-wrapper {\n transform: translateX(calc((var(--stzh-sticky-actions-scrollup-width, 44px) + var(--gap))));\n }\n\n &.has-scrollup &__chat-wrapper {\n transition-property: transform;\n transition-duration: $baseTransitionAnimationSpeed;\n transform: translateX(calc((var(--stzh-sticky-actions-scrollup-width, 44px))));\n }\n\n /* Active scrollup variant /\n\n &.has-active-scrollup &__scrollup-wrapper {\n opacity: 1;\n visibility: visible;\n transform: translateX(0px);\n }\n\n &.has-active-scrollup &__chat-wrapper {\n transform: translateX(calc(var(--gap) / -1));\n }\n\n / Is not slotted /\n &.is-not-slotted {\n height: 0;\n }\n}\n","import { Component, Element, forceUpdate, h, Host, Prop, State, Watch } from \"@stencil/core\";\n\nimport throttle from \"lodash/throttle\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/\n @slot - Slot for content that should stick to chat place\n /\n@Component({\n tag: \"stzh-sticky-actions\",\n styleUrl: \"stzh-sticky-actions.scss\",\n shadow: true,\n})\nexport class StzhStickyActions {\n /* Query used to get pagetitle element (will show scrollup when passed). */\n @Prop() pagetitleQuery: string \| (() => HTMLElement) =\n \"stzh-pagetitle, stzh-pagetitle-hero, stzh-pagetitle-home, stzh-pi-pagetitle, stzh-pi-pagetitle, stzh-homepage-service-highlights\";\n\n @State() hasActiveScrollup = false;\n @State() isSlotted = true;\n\n @Element() element: HTMLStzhStickyActionsElement;\n\n @Watch(\"hasActiveScrollup\")\n hasActiveScrollupWatcher(newValue: boolean) {\n document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-is-active\", newValue ? \"1\" : \"0\");\n document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-is-not-active\", newValue ? \"0\" : \"1\");\n }\n\n private observer: IntersectionObserver;\n private resizeObserver: ResizeObserver;\n private scrollupElement: HTMLElement;\n\n private observePagetitle = (entries: IntersectionObserverEntry[]) => {\n this.hasActiveScrollup = !entries[0].isIntersecting;\n };\n\n private updateScrollupWidth = () => {\n if (this.scrollupElement && this.element.isConnected) {\n const { width } = this.scrollupElement.getBoundingClientRect();\n document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-width\", `${width}px`);\n }\n };\n\n private handleScrollupResize = throttle(this.updateScrollupWidth, 100);\n\n componentDidLoad() {\n this.isSlotted = !!this.element.assignedSlot;\n const pagetitle =\n typeof this.pagetitleQuery === \"string\" ? document.querySelector(this.pagetitleQuery) : this.pagetitleQuery();\n\n if (pagetitle) {\n this.observer = new IntersectionObserver(this.observePagetitle, { rootMargin: \"0px\" });\n this.observer.observe(pagetitle);\n }\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n this.updateScrollupWidth();\n\n this.resizeObserver = new ResizeObserver(this.handleScrollupResize);\n this.resizeObserver.observe(this.scrollupElement);\n });\n });\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n this.resizeObserver?.disconnect();\n }\n\n render() {\n const chatSlotUsed = hasSlot(this.element, \"chat\");\n const scrollupSlotUsed = hasSlot(this.element, \"scrollup\");\n\n const classes = {\n \"stzh-sticky-actions\": true,\n \"has-chat\": chatSlotUsed,\n \"has-scrollup\": scrollupSlotUsed,\n \"has-active-scrollup\": this.hasActiveScrollup,\n \"is-not-slotted\": !this.isSlotted,\n };\n\n return (\n <Host>\n <div class={classes} data-stzh-sticky-width-container>\n <stzh-sticky\n name=\"actions\"\n class=\"stzh-sticky-actions__sticky\"\n position=\"fixed\"\n variant=\"transparent\"\n disableStickyTop={true}\n >\n <div class=\"stzh-sticky-actions__container\">\n <div class=\"stzh-sticky-actions__chat-wrapper\">\n <slot name=\"chat\" onSlotchange={() => forceUpdate(this.element)}></slot>\n </div>\n <div ref={el => (this.scrollupElement = el as HTMLElement)} class=\"stzh-sticky-actions__scrollup-wrapper\">\n <slot name=\"scrollup\" onSlotchange={() => forceUpdate(this.element)}></slot>\n </div>\n </div>\n </stzh-sticky>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-sticky-actions.entry.cjs.js","mappings":"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","names":["throttle","hasSlot","h","Host","forceUpdate"],"sources":["src/components/stzh-sticky-actions/stzh-sticky-actions.scss?tag=stzh-sticky-actions&encapsulation=shadow","src/components/stzh-sticky-actions/stzh-sticky-actions.tsx"],"sourcesContent":[":host {\n --gap: #{space('small')};\n --sticky-padding-bottom: var(--stzh-sticky-actions-sticky-padding-bottom, #{space('small')});\n\n --stuck-offset: calc(\n var(--stzh-pagetitle-disturber-stuck-height, 0px)\n + var(--stzh-sticky-cta-stuck-bottom-height, 0px)\n );\n\n @include mq($from: medium) {\n --sticky-padding-bottom: var(--stzh-sticky-actions-sticky-padding-bottom, #{space('medium')});\n }\n\n // z-index: $zIndexSticky;\n // position: fixed;\n // right: $containerMargin;\n // bottom: space('small');\n // transition: transform $baseTransitionAnimationSpeed;\n // transform:\n // translateY(calc((\n // var(--stzh-pagetitle-disturber-stuck-height, 0px)\n // + var(--stzh-cta-stuck-bottom-height, 0px)\n // ) / -1))\n // translateX(0);\n\n // @include mq($from: small) {\n // right: $containerMarginSmall;\n // }\n\n // @include mq($from: medium) {\n // right: $containerMarginMedium;\n // }\n\n // @include mq($from: large) {\n // right: $containerMarginLarge;\n // }\n\n // @include mq($from: ultra) {\n // right: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2);\n // }\n\n @media print {\n display: none;\n }\n}\n\n.stzh-sticky-actions {\n &__container {\n display: flex;\n justify-content: flex-end;\n transition-property: transform;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__sticky {\n --padding-top: 0px;\n --padding-bottom: var(--sticky-padding-bottom);\n }\n\n &__sticky[is-stuck-bottom] &__container {\n transform: translateY(calc(var(--stuck-offset) / -1))\n }\n\n &__scrollup-wrapper {\n transition-property: transform, opacity, visibility;\n transition-duration: $baseTransitionAnimationSpeed;\n opacity: 0;\n visibility: hidden;\n transform: translateX(var(--stzh-sticky-actions-scrollup-width, 44px));\n }\n\n &.has-chat &__scrollup-wrapper {\n transform: translateX(calc((var(--stzh-sticky-actions-scrollup-width, 44px) + var(--gap))));\n }\n\n &.has-scrollup &__chat-wrapper {\n transition-property: transform;\n transition-duration: $baseTransitionAnimationSpeed;\n transform: translateX(calc((var(--stzh-sticky-actions-scrollup-width, 44px))));\n }\n\n /* Active scrollup variant /\n\n &.has-active-scrollup &__scrollup-wrapper {\n opacity: 1;\n visibility: visible;\n transform: translateX(0px);\n }\n\n &.has-active-scrollup &__chat-wrapper {\n transform: translateX(calc(var(--gap) / -1));\n }\n\n / Is not slotted /\n &.is-not-slotted {\n height: 0;\n }\n}\n","import { Component, Element, forceUpdate, h, Host, Prop, State, Watch } from \"@stencil/core\";\n\nimport throttle from \"lodash/throttle\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/\n @slot - Slot for content that should stick to chat place\n * @slot - Slot for content that should stick to scroll-up place\n\n /\n@Component({\n tag: \"stzh-sticky-actions\",\n styleUrl: \"stzh-sticky-actions.scss\",\n shadow: true,\n})\nexport class StzhStickyActions {\n /* Query used to get pagetitle element (will show scrollup when passed). */\n @Prop() pagetitleQuery: string \| (() => HTMLElement) =\n \"stzh-pagetitle, stzh-pagetitle-hero, stzh-pagetitle-home, stzh-pi-pagetitle, stzh-pi-pagetitle, stzh-homepage-service-highlights\";\n\n @State() hasActiveScrollup = false;\n @State() isSlotted = true;\n\n @Element() element: HTMLStzhStickyActionsElement;\n\n @Watch(\"hasActiveScrollup\")\n hasActiveScrollupWatcher(newValue: boolean) {\n document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-is-active\", newValue ? \"1\" : \"0\");\n document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-is-not-active\", newValue ? \"0\" : \"1\");\n }\n\n private observer: IntersectionObserver;\n private resizeObserver: ResizeObserver;\n private scrollupElement: HTMLElement;\n\n private observePagetitle = (entries: IntersectionObserverEntry[]) => {\n this.hasActiveScrollup = !entries[0].isIntersecting;\n };\n\n private updateScrollupWidth = () => {\n if (this.scrollupElement && this.element.isConnected) {\n const { width } = this.scrollupElement.getBoundingClientRect();\n document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-width\", `${width}px`);\n }\n };\n\n private handleScrollupResize = throttle(this.updateScrollupWidth, 100);\n\n componentDidLoad() {\n this.isSlotted = !!this.element.assignedSlot;\n const pagetitle =\n typeof this.pagetitleQuery === \"string\" ? document.querySelector(this.pagetitleQuery) : this.pagetitleQuery();\n\n if (pagetitle) {\n this.observer = new IntersectionObserver(this.observePagetitle, { rootMargin: \"0px\" });\n this.observer.observe(pagetitle);\n }\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n this.updateScrollupWidth();\n\n this.resizeObserver = new ResizeObserver(this.handleScrollupResize);\n this.resizeObserver.observe(this.scrollupElement);\n });\n });\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n this.resizeObserver?.disconnect();\n }\n\n render() {\n const chatSlotUsed = hasSlot(this.element, \"chat\");\n const scrollupSlotUsed = hasSlot(this.element, \"scrollup\");\n\n const classes = {\n \"stzh-sticky-actions\": true,\n \"has-chat\": chatSlotUsed,\n \"has-scrollup\": scrollupSlotUsed,\n \"has-active-scrollup\": this.hasActiveScrollup,\n \"is-not-slotted\": !this.isSlotted,\n };\n\n return (\n <Host>\n <div class={classes} data-stzh-sticky-width-container>\n <stzh-sticky\n name=\"actions\"\n class=\"stzh-sticky-actions__sticky\"\n position=\"fixed\"\n variant=\"transparent\"\n disableStickyTop={true}\n >\n <div class=\"stzh-sticky-actions__container\">\n <div class=\"stzh-sticky-actions__chat-wrapper\">\n <slot name=\"chat\" onSlotchange={() => forceUpdate(this.element)}></slot>\n </div>\n <div ref={el => (this.scrollupElement = el as HTMLElement)} class=\"stzh-sticky-actions__scrollup-wrapper\">\n <slot name=\"scrollup\" onSlotchange={() => forceUpdate(this.element)}></slot>\n </div>\n </div>\n </stzh-sticky>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/stzh-sticky.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-sticky.entry.cjs.js","mappings":"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","names":["throttle","isVisible","offset","h","Host"],"sources":["src/components/stzh-sticky/stzh-sticky.scss?tag=stzh-sticky&encapsulation=shadow","src/components/stzh-sticky/stzh-sticky.tsx"],"sourcesContent":["/*\n @prop --padding-top: Padding top of sticky element\n * @prop --padding-bottom: Padding bottom of sticky element\n * @prop --padding-left: Padding left of sticky element\n * @prop --padding-right: Padding right of sticky element\n * @prop --background-color: Background color of sticky element\n * @prop --stuck-padding-top: Padding top of stuck sticky element\n * @prop --stuck-padding-bottom: Padding bottom of stuck sticky element\n * @prop --stuck-padding-left: Padding left of stuck sticky element\n * @prop --stuck-padding-right: Padding right of stuck sticky element\n * @prop --stuck-background-color: Background color of stuck sticky element\n \n @prop --stzh-sticky-{NAME}-is-stuck: Global: Whether sticky is currently stuck (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-not-stuck: Global: Whether sticky is currently not stuck (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-stuck-top: Global: Whether sticky is currently stuck on top (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-not-stuck-top: Global: Whether sticky is currently not stuck on top (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-stuck-bottom: Global: Whether sticky is currently stuck on bottom (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-not-stuck-bottom: Global: Whether sticky is currently not stuck on bottom (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-stuck-top-height: Global: Stuck top sticky element height (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-stuck-bottom-height: Global: Stuck bottom sticky element height (readonly variable on `<html>`)\n /\n\n:host {\n --padding-top: #{space('large')};\n --padding-bottom: #{space('large')};\n --padding-left: 0;\n --padding-right: 0;\n --background-color: transparent;\n\n --stuck-padding-top: var(--padding-top);\n --stuck-padding-bottom: var(--padding-bottom);\n --stuck-padding-left: var(--padding-left);\n --stuck-padding-right: var(--padding-right);\n --stuck-background-color: #{$colorGrey10};\n\n display: contents;\n\n @media print {\n display: none;\n }\n}\n\n:host([variant=\"transparent\"]) {\n --background-color: transparent;\n --stuck-background-color: transparent;\n\n pointer-events: none;\n}\n\n:host([position=\"fixed\"]) {\n display: block;\n}\n\n.stzh-sticky {\n display: contents;\n\n &__sticky {\n position: sticky;\n top: -1px;\n bottom: -1px;\n z-index: $zIndexSticky;\n width: var(--stzh-sticky-unstuck-width, auto);\n transition-property: width, transform, opacity;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__content,\n &__content::before {\n background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__content {\n --stzh-button-pointer-events: all;\n --stzh-link-pointer-events: all;\n\n position: relative;\n transition-property: background-color, transform;\n\n // &::before,\n // &::after {\n // content: '';\n // pointer-events: none;\n // display: block;\n // position: absolute;\n // left: 0;\n // width: 100%;\n // height: space('xxlarge');\n // opacity: 0;\n // transition: opacity $baseTransitionAnimationSpeed;\n // }\n\n // &::before {\n // background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);\n // top: 0;\n // transform: translateY(-100%);\n // }\n\n // &::after {\n // background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);\n // bottom: 0;\n // transform: translateY(100%);\n // }\n }\n\n &__content-inner {\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n transition-property: padding;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__spacer {\n display: none;\n }\n\n / Disabled variants /\n\n &--is-disabled-sticky-top &__sticky {\n top: auto;\n }\n\n &--is-disabled-sticky-bottom &__sticky {\n bottom: auto;\n }\n\n / Bleeding variant /\n\n &--is-bleeding &__content {\n &::before {\n z-index: -1;\n content: '';\n position: absolute;\n display: block;\n width: 100%;\n height: 100%;\n transform: translateY(0);\n transition-property: width, background-color, transform;\n }\n }\n\n / Is stuck variant /\n\n &--is-stuck &__content,\n &--is-stuck &__content::before {\n background-color: var(--stuck-background-color);\n }\n\n &--is-stuck &__content::before {\n width: calc(100vw - var(--stzh-scrollbar-width));\n transform: translateX(calc(var(--stzh-sticky-offset-left) / -1));\n }\n\n &--is-stuck &__content-inner {\n padding-top: var(--stuck-padding-top);\n padding-bottom: var(--stuck-padding-bottom);\n padding-left: var(--stuck-padding-left);\n padding-right: var(--stuck-padding-right);\n }\n\n // &--is-stuck-bottom &__content {\n // &::before {\n // opacity: 1;\n // }\n // }\n\n // &--is-stuck-top &__content {\n // &::after {\n // opacity: 1;\n // }\n // }\n\n / Transparent variant /\n\n // &--transparent &__content {\n // &::after,\n // &::before {\n // display: none;\n // }\n // }\n\n // / Position sticky variant /\n\n // &--is-breakout &__content {\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-not-loaded {\n visibility: hidden;\n }\n\n &--is-not-loaded#{&}--is-stuck &__sticky {\n transform: translateY(100%);\n opacity: 0;\n }\n\n &--is-not-loaded &__sticky,\n &--is-not-loaded &__content,\n &--is-not-loaded &__content::before,\n &--is-not-loaded &__content-inner {\n transition-duration: 0ms;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n Watch,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhStickyStuckTopEvent,\n StzhStickyStuckBottomEvent\n} from \"../../index\";\n\nimport { isVisible, offset } from \"../../utils/utils\";\nimport throttle from \"lodash/throttle\";\n\nconst ATTR_STICKY_CONTAINER = \"data-stzh-sticky-container\";\nconst ATTR_STICKY_WIDTH_CONTAINER = \"data-stzh-sticky-width-container\";\n\n/\n \n /\n@Component({\n tag: \"stzh-sticky\",\n styleUrl: \"stzh-sticky.scss\",\n shadow: true\n})\nexport class StzhSticky {\n /* Variant /\n @Prop({ reflect: true }) variant: \"default\" \| \"transparent\" = \"default\";\n\n /* Whether to disable sticking to top /\n @Prop({ reflect: true }) disableStickyTop: boolean = true;\n\n /* Whether to disable sticking to bottom /\n @Prop({ reflect: true }) disableStickyBottom: boolean = false;\n\n /* Whether background breaks out container to full viewport width /\n @Prop({ reflect: true }) bleeding: boolean = false;\n\n /* Name of sticky element (used for setting css properties) /\n @Prop() name: string;\n\n /\n Position type used.\n \n - sticky: used only css position sticky\n * - fixed: uses position fixed with js for positioning (`data-stzh-sticky-container` can be used on a container element to limit sticky position)\n /\n @Prop({ reflect: true }) position: \"sticky\" \| \"fixed\" = \"sticky\";\n\n @Watch(\"disableStickyTop\")\n @Watch(\"disableStickyBottom\")\n disableStickyWatcher() {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n if (this.position === \"fixed\") {\n this.updateFixedByResize();\n } else {\n this.updateStuck();\n }\n });\n });\n }\n\n @Watch(\"isStuckTop\")\n @Watch(\"isStuckBottom\")\n @Watch(\"hasReachedTopLimit\")\n @Watch(\"hasReachedBottomLimit\")\n stuckHeightWatcher() {\n let isStuck = false;\n\n if (this.isStuckTop && !this.hasReachedBottomLimit) {\n isStuck = true;\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck-top`, \"1\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck-top`, \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}stuck-top-height`, `${this.stickyElement.offsetHeight}px`);\n } else {\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck-top`, \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck-top`, \"1\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}stuck-top-height`, \"0px\");\n }\n\n if (this.isStuckBottom && !this.hasReachedTopLimit) {\n isStuck = true;\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck-bottom`, \"1\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck-bottom`, \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}stuck-bottom-height`, `${this.stickyElement.offsetHeight}px`);\n } else {\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck-bottom`, \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck-bottom`, \"1\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}stuck-bottom-height`, \"0px\");\n }\n\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck`, isStuck ? \"1\" : \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck`, isStuck ? \"0\" : \"1\");\n\n if (isStuck) {\n this.stickyResizeObserver.observe(this.stickyElement);\n } else {\n this.stickyResizeObserver.unobserve(this.stickyElement);\n }\n }\n\n @Watch(\"isStuckTop\")\n isStuckTopWatcher(newValue: boolean) {\n this.stzhStuckTop.emit({\n component: \"stzh-sticky\",\n sticky: newValue\n });\n }\n\n @Watch(\"isStuckBottom\")\n isStuckBottomWatcher(newValue: boolean) {\n this.stzhStuckBottom.emit({\n component: \"stzh-sticky\",\n sticky: newValue\n });\n }\n\n @Watch(\"position\")\n @Watch(\"bleeding\")\n positionWatcher() {\n if (this.position === \"fixed\") {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n window.addEventListener(\"scroll\", this.handleScroll, { passive: true });\n window.addEventListener(\"resize\", this.handleResize);\n\n this.updateFixedByResize();\n } else {\n if (this.bleeding) {\n window.addEventListener(\"scroll\", this.handleScroll, { passive: true });\n this.updateByScroll();\n } else {\n window.removeEventListener(\"scroll\", this.handleScroll);\n }\n\n window.removeEventListener(\"resize\", this.handleResize);\n this.setUnfixed();\n\n this.observer = new IntersectionObserver(this.observe, { threshold: [1] });\n this.observer.observe(this.stickyElement);\n\n this.updateStuck();\n }\n }\n\n /* Sticky stuck top event /\n @Event() stzhStuckTop: EventEmitter<StzhStickyStuckTopEvent>;\n\n /* Sticky stuck bottom event */\n @Event() stzhStuckBottom: EventEmitter<StzhStickyStuckBottomEvent>;\n\n @Element() element: HTMLStzhStickyElement;\n\n @State() isStuckTop: boolean;\n @State() isStuckBottom: boolean;\n\n @State() hasReachedTopLimit: boolean;\n @State() hasReachedBottomLimit: boolean;\n\n @State() loaded: boolean = false;\n\n private observer: IntersectionObserver;\n private stickyResizeObserver: ResizeObserver;\n private debounceScroll: number;\n private debounceResize: number;\n private stickyElement: HTMLElement;\n private spacerElement: HTMLElement;\n\n private windowHeight: number;\n private scrollX: number;\n private scrollY: number;\n private fixedTop: number;\n private fixedLeft: number;\n private fixedHeight: number = 0;\n private fixedWidth: number = 0;\n private fixedLimit: { top: number, bottom: number } \| null = null;\n\n private updateStuck() {\n const topCss = parseInt(getComputedStyle(this.stickyElement).top, 10);\n const bottomCss = parseInt(getComputedStyle(this.stickyElement).bottom, 10);\n const rect = this.stickyElement.getBoundingClientRect();\n\n if (topCss) {\n this.isStuckTop = rect.top < 0;\n } else {\n this.isStuckTop = false;\n }\n\n if (bottomCss) {\n this.isStuckBottom = document.documentElement.clientHeight < rect.bottom;\n } else {\n this.isStuckBottom = false;\n }\n }\n\n private getFixedLimit(): { top: number, bottom: number } \| null {\n const stickyContainer = this.element.closest(`[${ATTR_STICKY_CONTAINER}]`);\n\n if (!stickyContainer) {\n return null;\n }\n\n const off = offset(stickyContainer);\n\n return {\n top: off.top,\n bottom: off.top + stickyContainer.scrollHeight,\n };\n }\n\n private setUnfixed() {\n Object.assign(this.stickyElement.style, {\n position: null,\n top: null,\n bottom: null,\n left: null,\n width: null,\n });\n\n Object.assign(this.spacerElement.style, {\n display: \"none\",\n });\n }\n\n private setFixed() {\n const position = (this.hasReachedTopLimit \|\| this.hasReachedBottomLimit)\n ? \"absolute\"\n : \"fixed\";\n\n Object.assign(this.stickyElement.style, {\n position,\n top: position === \"absolute\"\n ? `${this.isStuckTop ? this.fixedLimit.bottom - this.fixedHeight : this.fixedLimit.top}px`\n : this.isStuckTop ? \"0px\" : \"auto\",\n bottom: this.isStuckTop \|\| position === \"absolute\"\n ? \"auto\" : \"0px\",\n left: `${this.fixedLeft + (position === \"fixed\" ? this.scrollX : 0)}px`,\n width: `${this.fixedWidth}px`,\n });\n\n Object.assign(this.spacerElement.style, {\n display: \"block\",\n });\n }\n\n private handleScroll = () => {\n if (this.debounceScroll) {\n window.cancelAnimationFrame(this.debounceScroll);\n }\n\n this.debounceScroll = requestAnimationFrame(this.updateByScroll);\n }\n\n private handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateFixedByResize);\n }\n\n private handleStickyResize = throttle(() => {\n this.stuckHeightWatcher();\n this.updateByScroll();\n }, 100);\n\n private updateByScroll = () => {\n if (!isVisible(this.stickyElement) \|\| !this.element.isConnected) {\n return;\n }\n\n const stickyFixedWidthContainer = this.element.closest(`[${ATTR_STICKY_WIDTH_CONTAINER}]`) as HTMLElement\n \|\| this.element.parentElement;\n\n const off = offset(\n (this.isStuckTop \|\| this.isStuckBottom) && this.position === \"fixed\"\n ? this.spacerElement : this.stickyElement\n );\n\n this.fixedTop = off.top;\n this.fixedLeft = off.left;\n\n stickyFixedWidthContainer.style.setProperty('--stzh-sticky-offset-top', `${this.fixedTop}px`);\n stickyFixedWidthContainer.style.setProperty('--stzh-sticky-offset-left', `${this.fixedLeft}px`);\n\n if (this.position === \"sticky\") {\n // for position sticky we only need the offsets variables to be updated in bleeding variant\n return;\n }\n\n this.fixedHeight = this.stickyElement.offsetHeight;\n this.spacerElement.style.height = `${this.fixedHeight}px`;\n\n this.scrollX = window.scrollX;\n this.scrollY = window.scrollY;\n this.fixedLimit = this.getFixedLimit();\n\n this.fixedWidth = stickyFixedWidthContainer.getBoundingClientRect().width;\n\n const unstuckWidth = this.element.getBoundingClientRect().width;\n // stickyFixedWidthContainer.style.setProperty('--stzh-sticky-stuck-width', `${this.fixedWidth}px`);\n stickyFixedWidthContainer.style.setProperty('--stzh-sticky-unstuck-width', `${unstuckWidth}px`);\n\n // console.log(unstuckWidth);\n\n // console.log(\n // this.scrollX,\n // this.scrollY,\n // this.windowHeight,\n // this.fixedTop,\n // this.fixedLeft,\n // this.fixedHeight,\n // this.fixedLimit,\n // );\n\n this.isStuckBottom = !this.disableStickyBottom\n && this.scrollY + this.windowHeight <= this.fixedTop + this.fixedHeight;\n this.isStuckTop = !this.disableStickyTop\n && this.scrollY >= this.fixedTop;\n\n this.hasReachedTopLimit = this.fixedLimit\n && this.scrollY + this.windowHeight - this.fixedHeight <= this.fixedLimit.top;\n this.hasReachedBottomLimit = this.fixedLimit\n && this.scrollY >= this.fixedLimit.bottom - this.fixedHeight;\n\n // console.log(\n // this.isStuckBottom,\n // this.isStuckTop,\n // this.hasReachedBottomLimit,\n // this.hasReachedTopLimit,\n // );\n\n if (this.isStuckTop \|\| this.isStuckBottom) {\n this.setFixed();\n // stickyFixedWidthContainer.style.setProperty('--stzh-sticky-width', `${this.fixedWidth}px`);\n } else {\n this.setUnfixed();\n // stickyFixedWidthContainer.style.setProperty('--stzh-sticky-width', `${unstuckWidth}px`);\n }\n }\n\n private updateFixedByResize = () => {\n if (!this.stickyElement \|\| !this.element.isConnected) {\n return;\n }\n\n // reset sticky so we can read current offsets\n this.setUnfixed();\n this.stickyElement.style.position = \"static\";\n this.stickyElement.style.width = \"auto\";\n this.isStuckTop = false;\n this.isStuckBottom = false;\n\n if (isVisible(this.stickyElement)) {\n this.windowHeight = window.innerHeight;\n this.updateByScroll();\n }\n }\n\n private observe = () => {\n this.updateStuck();\n };\n\n componentDidLoad() {\n this.stickyResizeObserver = new ResizeObserver(this.handleStickyResize);\n this.positionWatcher();\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n window.setTimeout(() => {\n this.loaded = true;\n\n if (this.position === \"fixed\") {\n this.updateFixedByResize();\n }\n }, 250);\n });\n });\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n this.stickyResizeObserver?.disconnect();\n\n window.removeEventListener(\"scroll\", this.handleScroll);\n window.removeEventListener(\"resize\", this.handleResize);\n }\n\n render() {\n const isStuck = this.isStuckTop \|\| this.isStuckBottom;\n\n const classes = {\n \"stzh-sticky\": true,\n \"stzh-sticky--is-not-loaded\": !this.loaded,\n \"stzh-sticky--is-stuck\": isStuck,\n \"stzh-sticky--is-stuck-top\": this.isStuckTop,\n \"stzh-sticky--is-stuck-bottom\": this.isStuckBottom,\n \"stzh-sticky--is-disabled-sticky-top\": this.disableStickyTop,\n \"stzh-sticky--is-disabled-sticky-bottom\": this.disableStickyBottom,\n \"stzh-sticky--is-bleeding\": this.bleeding,\n [`stzh-sticky--position-${this.position}`]: !!this.position,\n [`stzh-sticky--${this.variant}`]: !!this.variant,\n };\n\n return (\n <Host\n is-stuck={this.isStuckTop \|\| this.isStuckBottom}\n is-stuck-top={this.isStuckTop}\n is-stuck-bottom={this.isStuckBottom}\n >\n <div class={classes}>\n <div\n ref={(el) => (this.spacerElement = el as HTMLDivElement)}\n class=\"stzh-sticky__spacer\"\n ></div>\n <div\n ref={(el) => (this.stickyElement = el as HTMLDivElement)}\n class=\"stzh-sticky__sticky\"\n >\n <div class=\"stzh-sticky__content\">\n <div class=\"stzh-sticky__content-inner\">\n <slot></slot>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-sticky.entry.cjs.js","mappings":"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","names":["throttle","isVisible","offset","h","Host"],"sources":["src/components/stzh-sticky/stzh-sticky.scss?tag=stzh-sticky&encapsulation=shadow","src/components/stzh-sticky/stzh-sticky.tsx"],"sourcesContent":["/*\n @prop --padding-top: Padding top of sticky element\n * @prop --padding-bottom: Padding bottom of sticky element\n * @prop --padding-left: Padding left of sticky element\n * @prop --padding-right: Padding right of sticky element\n * @prop --background-color: Background color of sticky element\n * @prop --stuck-padding-top: Padding top of stuck sticky element\n * @prop --stuck-padding-bottom: Padding bottom of stuck sticky element\n * @prop --stuck-padding-left: Padding left of stuck sticky element\n * @prop --stuck-padding-right: Padding right of stuck sticky element\n * @prop --stuck-background-color: Background color of stuck sticky element\n \n @prop --stzh-sticky-{NAME}-is-stuck: Global: Whether sticky is currently stuck (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-not-stuck: Global: Whether sticky is currently not stuck (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-stuck-top: Global: Whether sticky is currently stuck on top (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-not-stuck-top: Global: Whether sticky is currently not stuck on top (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-stuck-bottom: Global: Whether sticky is currently stuck on bottom (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-not-stuck-bottom: Global: Whether sticky is currently not stuck on bottom (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-stuck-top-height: Global: Stuck top sticky element height (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-stuck-bottom-height: Global: Stuck bottom sticky element height (readonly variable on `<html>`)\n /\n\n:host {\n --padding-top: #{space('large')};\n --padding-bottom: #{space('large')};\n --padding-left: 0;\n --padding-right: 0;\n --background-color: transparent;\n\n --stuck-padding-top: var(--padding-top);\n --stuck-padding-bottom: var(--padding-bottom);\n --stuck-padding-left: var(--padding-left);\n --stuck-padding-right: var(--padding-right);\n --stuck-background-color: #{$colorGrey10};\n\n display: contents;\n\n @media print {\n display: none;\n }\n}\n\n:host([variant=\"transparent\"]) {\n --background-color: transparent;\n --stuck-background-color: transparent;\n\n pointer-events: none;\n}\n\n:host([position=\"fixed\"]) {\n display: block;\n}\n\n.stzh-sticky {\n display: contents;\n\n &__sticky {\n position: sticky;\n top: -1px;\n bottom: -1px;\n z-index: $zIndexSticky;\n width: var(--stzh-sticky-unstuck-width, auto);\n transition-property: width, transform, opacity;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__content,\n &__content::before {\n background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__content {\n --stzh-button-pointer-events: all;\n --stzh-link-pointer-events: all;\n\n position: relative;\n transition-property: background-color, transform;\n\n // &::before,\n // &::after {\n // content: '';\n // pointer-events: none;\n // display: block;\n // position: absolute;\n // left: 0;\n // width: 100%;\n // height: space('xxlarge');\n // opacity: 0;\n // transition: opacity $baseTransitionAnimationSpeed;\n // }\n\n // &::before {\n // background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);\n // top: 0;\n // transform: translateY(-100%);\n // }\n\n // &::after {\n // background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);\n // bottom: 0;\n // transform: translateY(100%);\n // }\n }\n\n &__content-inner {\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n transition-property: padding;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__spacer {\n display: none;\n }\n\n / Disabled variants /\n\n &--is-disabled-sticky-top &__sticky {\n top: auto;\n }\n\n &--is-disabled-sticky-bottom &__sticky {\n bottom: auto;\n }\n\n / Bleeding variant /\n\n &--is-bleeding &__content {\n &::before {\n z-index: -1;\n content: '';\n position: absolute;\n display: block;\n width: 100%;\n height: 100%;\n transform: translateY(0);\n transition-property: width, background-color, transform;\n }\n }\n\n / Is stuck variant /\n\n &--is-stuck &__content,\n &--is-stuck &__content::before {\n background-color: var(--stuck-background-color);\n }\n\n &--is-stuck &__content::before {\n width: calc(100vw - var(--stzh-scrollbar-width));\n transform: translateX(calc(var(--stzh-sticky-offset-left) / -1));\n }\n\n &--is-stuck &__content-inner {\n padding-top: var(--stuck-padding-top);\n padding-bottom: var(--stuck-padding-bottom);\n padding-left: var(--stuck-padding-left);\n padding-right: var(--stuck-padding-right);\n }\n\n // &--is-stuck-bottom &__content {\n // &::before {\n // opacity: 1;\n // }\n // }\n\n // &--is-stuck-top &__content {\n // &::after {\n // opacity: 1;\n // }\n // }\n\n / Transparent variant /\n\n // &--transparent &__content {\n // &::after,\n // &::before {\n // display: none;\n // }\n // }\n\n // / Position sticky variant /\n\n // &--is-breakout &__content {\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-not-loaded {\n visibility: hidden;\n }\n\n &--is-not-loaded#{&}--is-stuck &__sticky {\n transform: translateY(100%);\n opacity: 0;\n }\n\n &--is-not-loaded &__sticky,\n &--is-not-loaded &__content,\n &--is-not-loaded &__content::before,\n &--is-not-loaded &__content-inner {\n transition-duration: 0ms;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n Watch,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhStickyStuckTopEvent,\n StzhStickyStuckBottomEvent\n} from \"../../index\";\n\nimport { isVisible, offset } from \"../../utils/utils\";\nimport throttle from \"lodash/throttle\";\n\nconst ATTR_STICKY_CONTAINER = \"data-stzh-sticky-container\";\nconst ATTR_STICKY_WIDTH_CONTAINER = \"data-stzh-sticky-width-container\";\n\n/\n @slot - Slot for any content \n /\n@Component({\n tag: \"stzh-sticky\",\n styleUrl: \"stzh-sticky.scss\",\n shadow: true\n})\nexport class StzhSticky {\n /* Variant /\n @Prop({ reflect: true }) variant: \"default\" \| \"transparent\" = \"default\";\n\n /* Whether to disable sticking to top /\n @Prop({ reflect: true }) disableStickyTop: boolean = true;\n\n /* Whether to disable sticking to bottom /\n @Prop({ reflect: true }) disableStickyBottom: boolean = false;\n\n /* Whether background breaks out container to full viewport width /\n @Prop({ reflect: true }) bleeding: boolean = false;\n\n /* Name of sticky element (used for setting css properties) /\n @Prop() name: string;\n\n /\n Position type used.\n \n - sticky: used only css position sticky\n * - fixed: uses position fixed with js for positioning (`data-stzh-sticky-container` can be used on a container element to limit sticky position)\n /\n @Prop({ reflect: true }) position: \"sticky\" \| \"fixed\" = \"sticky\";\n\n @Watch(\"disableStickyTop\")\n @Watch(\"disableStickyBottom\")\n disableStickyWatcher() {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n if (this.position === \"fixed\") {\n this.updateFixedByResize();\n } else {\n this.updateStuck();\n }\n });\n });\n }\n\n @Watch(\"isStuckTop\")\n @Watch(\"isStuckBottom\")\n @Watch(\"hasReachedTopLimit\")\n @Watch(\"hasReachedBottomLimit\")\n stuckHeightWatcher() {\n let isStuck = false;\n\n if (this.isStuckTop && !this.hasReachedBottomLimit) {\n isStuck = true;\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck-top`, \"1\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck-top`, \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}stuck-top-height`, `${this.stickyElement.offsetHeight}px`);\n } else {\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck-top`, \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck-top`, \"1\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}stuck-top-height`, \"0px\");\n }\n\n if (this.isStuckBottom && !this.hasReachedTopLimit) {\n isStuck = true;\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck-bottom`, \"1\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck-bottom`, \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}stuck-bottom-height`, `${this.stickyElement.offsetHeight}px`);\n } else {\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck-bottom`, \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck-bottom`, \"1\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}stuck-bottom-height`, \"0px\");\n }\n\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck`, isStuck ? \"1\" : \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck`, isStuck ? \"0\" : \"1\");\n\n if (isStuck) {\n this.stickyResizeObserver.observe(this.stickyElement);\n } else {\n this.stickyResizeObserver.unobserve(this.stickyElement);\n }\n }\n\n @Watch(\"isStuckTop\")\n isStuckTopWatcher(newValue: boolean) {\n this.stzhStuckTop.emit({\n component: \"stzh-sticky\",\n sticky: newValue\n });\n }\n\n @Watch(\"isStuckBottom\")\n isStuckBottomWatcher(newValue: boolean) {\n this.stzhStuckBottom.emit({\n component: \"stzh-sticky\",\n sticky: newValue\n });\n }\n\n @Watch(\"position\")\n @Watch(\"bleeding\")\n positionWatcher() {\n if (this.position === \"fixed\") {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n window.addEventListener(\"scroll\", this.handleScroll, { passive: true });\n window.addEventListener(\"resize\", this.handleResize);\n\n this.updateFixedByResize();\n } else {\n if (this.bleeding) {\n window.addEventListener(\"scroll\", this.handleScroll, { passive: true });\n this.updateByScroll();\n } else {\n window.removeEventListener(\"scroll\", this.handleScroll);\n }\n\n window.removeEventListener(\"resize\", this.handleResize);\n this.setUnfixed();\n\n this.observer = new IntersectionObserver(this.observe, { threshold: [1] });\n this.observer.observe(this.stickyElement);\n\n this.updateStuck();\n }\n }\n\n /* Sticky stuck top event /\n @Event() stzhStuckTop: EventEmitter<StzhStickyStuckTopEvent>;\n\n /* Sticky stuck bottom event */\n @Event() stzhStuckBottom: EventEmitter<StzhStickyStuckBottomEvent>;\n\n @Element() element: HTMLStzhStickyElement;\n\n @State() isStuckTop: boolean;\n @State() isStuckBottom: boolean;\n\n @State() hasReachedTopLimit: boolean;\n @State() hasReachedBottomLimit: boolean;\n\n @State() loaded: boolean = false;\n\n private observer: IntersectionObserver;\n private stickyResizeObserver: ResizeObserver;\n private debounceScroll: number;\n private debounceResize: number;\n private stickyElement: HTMLElement;\n private spacerElement: HTMLElement;\n\n private windowHeight: number;\n private scrollX: number;\n private scrollY: number;\n private fixedTop: number;\n private fixedLeft: number;\n private fixedHeight: number = 0;\n private fixedWidth: number = 0;\n private fixedLimit: { top: number, bottom: number } \| null = null;\n\n private updateStuck() {\n const topCss = parseInt(getComputedStyle(this.stickyElement).top, 10);\n const bottomCss = parseInt(getComputedStyle(this.stickyElement).bottom, 10);\n const rect = this.stickyElement.getBoundingClientRect();\n\n if (topCss) {\n this.isStuckTop = rect.top < 0;\n } else {\n this.isStuckTop = false;\n }\n\n if (bottomCss) {\n this.isStuckBottom = document.documentElement.clientHeight < rect.bottom;\n } else {\n this.isStuckBottom = false;\n }\n }\n\n private getFixedLimit(): { top: number, bottom: number } \| null {\n const stickyContainer = this.element.closest(`[${ATTR_STICKY_CONTAINER}]`);\n\n if (!stickyContainer) {\n return null;\n }\n\n const off = offset(stickyContainer);\n\n return {\n top: off.top,\n bottom: off.top + stickyContainer.scrollHeight,\n };\n }\n\n private setUnfixed() {\n Object.assign(this.stickyElement.style, {\n position: null,\n top: null,\n bottom: null,\n left: null,\n width: null,\n });\n\n Object.assign(this.spacerElement.style, {\n display: \"none\",\n });\n }\n\n private setFixed() {\n const position = (this.hasReachedTopLimit \|\| this.hasReachedBottomLimit)\n ? \"absolute\"\n : \"fixed\";\n\n Object.assign(this.stickyElement.style, {\n position,\n top: position === \"absolute\"\n ? `${this.isStuckTop ? this.fixedLimit.bottom - this.fixedHeight : this.fixedLimit.top}px`\n : this.isStuckTop ? \"0px\" : \"auto\",\n bottom: this.isStuckTop \|\| position === \"absolute\"\n ? \"auto\" : \"0px\",\n left: `${this.fixedLeft + (position === \"fixed\" ? this.scrollX : 0)}px`,\n width: `${this.fixedWidth}px`,\n });\n\n Object.assign(this.spacerElement.style, {\n display: \"block\",\n });\n }\n\n private handleScroll = () => {\n if (this.debounceScroll) {\n window.cancelAnimationFrame(this.debounceScroll);\n }\n\n this.debounceScroll = requestAnimationFrame(this.updateByScroll);\n }\n\n private handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateFixedByResize);\n }\n\n private handleStickyResize = throttle(() => {\n this.stuckHeightWatcher();\n this.updateByScroll();\n }, 100);\n\n private updateByScroll = () => {\n if (!isVisible(this.stickyElement) \|\| !this.element.isConnected) {\n return;\n }\n\n const stickyFixedWidthContainer = this.element.closest(`[${ATTR_STICKY_WIDTH_CONTAINER}]`) as HTMLElement\n \|\| this.element.parentElement;\n\n const off = offset(\n (this.isStuckTop \|\| this.isStuckBottom) && this.position === \"fixed\"\n ? this.spacerElement : this.stickyElement\n );\n\n this.fixedTop = off.top;\n this.fixedLeft = off.left;\n\n stickyFixedWidthContainer.style.setProperty('--stzh-sticky-offset-top', `${this.fixedTop}px`);\n stickyFixedWidthContainer.style.setProperty('--stzh-sticky-offset-left', `${this.fixedLeft}px`);\n\n if (this.position === \"sticky\") {\n // for position sticky we only need the offsets variables to be updated in bleeding variant\n return;\n }\n\n this.fixedHeight = this.stickyElement.offsetHeight;\n this.spacerElement.style.height = `${this.fixedHeight}px`;\n\n this.scrollX = window.scrollX;\n this.scrollY = window.scrollY;\n this.fixedLimit = this.getFixedLimit();\n\n this.fixedWidth = stickyFixedWidthContainer.getBoundingClientRect().width;\n\n const unstuckWidth = this.element.getBoundingClientRect().width;\n // stickyFixedWidthContainer.style.setProperty('--stzh-sticky-stuck-width', `${this.fixedWidth}px`);\n stickyFixedWidthContainer.style.setProperty('--stzh-sticky-unstuck-width', `${unstuckWidth}px`);\n\n // console.log(unstuckWidth);\n\n // console.log(\n // this.scrollX,\n // this.scrollY,\n // this.windowHeight,\n // this.fixedTop,\n // this.fixedLeft,\n // this.fixedHeight,\n // this.fixedLimit,\n // );\n\n this.isStuckBottom = !this.disableStickyBottom\n && this.scrollY + this.windowHeight <= this.fixedTop + this.fixedHeight;\n this.isStuckTop = !this.disableStickyTop\n && this.scrollY >= this.fixedTop;\n\n this.hasReachedTopLimit = this.fixedLimit\n && this.scrollY + this.windowHeight - this.fixedHeight <= this.fixedLimit.top;\n this.hasReachedBottomLimit = this.fixedLimit\n && this.scrollY >= this.fixedLimit.bottom - this.fixedHeight;\n\n // console.log(\n // this.isStuckBottom,\n // this.isStuckTop,\n // this.hasReachedBottomLimit,\n // this.hasReachedTopLimit,\n // );\n\n if (this.isStuckTop \|\| this.isStuckBottom) {\n this.setFixed();\n // stickyFixedWidthContainer.style.setProperty('--stzh-sticky-width', `${this.fixedWidth}px`);\n } else {\n this.setUnfixed();\n // stickyFixedWidthContainer.style.setProperty('--stzh-sticky-width', `${unstuckWidth}px`);\n }\n }\n\n private updateFixedByResize = () => {\n if (!this.stickyElement \|\| !this.element.isConnected) {\n return;\n }\n\n // reset sticky so we can read current offsets\n this.setUnfixed();\n this.stickyElement.style.position = \"static\";\n this.stickyElement.style.width = \"auto\";\n this.isStuckTop = false;\n this.isStuckBottom = false;\n\n if (isVisible(this.stickyElement)) {\n this.windowHeight = window.innerHeight;\n this.updateByScroll();\n }\n }\n\n private observe = () => {\n this.updateStuck();\n };\n\n componentDidLoad() {\n this.stickyResizeObserver = new ResizeObserver(this.handleStickyResize);\n this.positionWatcher();\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n window.setTimeout(() => {\n this.loaded = true;\n\n if (this.position === \"fixed\") {\n this.updateFixedByResize();\n }\n }, 250);\n });\n });\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n this.stickyResizeObserver?.disconnect();\n\n window.removeEventListener(\"scroll\", this.handleScroll);\n window.removeEventListener(\"resize\", this.handleResize);\n }\n\n render() {\n const isStuck = this.isStuckTop \|\| this.isStuckBottom;\n\n const classes = {\n \"stzh-sticky\": true,\n \"stzh-sticky--is-not-loaded\": !this.loaded,\n \"stzh-sticky--is-stuck\": isStuck,\n \"stzh-sticky--is-stuck-top\": this.isStuckTop,\n \"stzh-sticky--is-stuck-bottom\": this.isStuckBottom,\n \"stzh-sticky--is-disabled-sticky-top\": this.disableStickyTop,\n \"stzh-sticky--is-disabled-sticky-bottom\": this.disableStickyBottom,\n \"stzh-sticky--is-bleeding\": this.bleeding,\n [`stzh-sticky--position-${this.position}`]: !!this.position,\n [`stzh-sticky--${this.variant}`]: !!this.variant,\n };\n\n return (\n <Host\n is-stuck={this.isStuckTop \|\| this.isStuckBottom}\n is-stuck-top={this.isStuckTop}\n is-stuck-bottom={this.isStuckBottom}\n >\n <div class={classes}>\n <div\n ref={(el) => (this.spacerElement = el as HTMLDivElement)}\n class=\"stzh-sticky__spacer\"\n ></div>\n <div\n ref={(el) => (this.stickyElement = el as HTMLDivElement)}\n class=\"stzh-sticky__sticky\"\n >\n <div class=\"stzh-sticky__content\">\n <div class=\"stzh-sticky__content-inner\">\n <slot></slot>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/stzh-table.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-table.entry.cjs.js","mappings":"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","names":["setPropsIfNull","hasSlot","h","Host"],"sources":["src/components/stzh-table/stzh-table.scss?tag=stzh-table","src/components/stzh-table/stzh-table.tsx"],"sourcesContent":["/*\n @prop --max-height: Maximum height of table\n * @prop --min-width: Minium width of table\n * @prop --cell-padding: Cells padding\n * @prop --search-input-width: Search input width from small breakpoint\n\n * @prop --stzh-table-max-width: Global: Maximum height of table\n * @prop --stzh-table-min-width: Global: Minium width of table\n * @prop --stzh-table-cell-padding: Global: Cells padding\n * @prop --stzh-table-search-input-width: Global: Search input width from small breakpoint\n /\n\nstzh-table {\n @include host;\n @include table-host();\n}\n\n.stzh-table {\n @include table(\"table\");\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n Watch\n} from \"@stencil/core\";\n\nimport { setPropsIfNull, hasSlot } from \"../../utils/utils\";\n\nconst CLASS_HAS_STICKED = \"has-sticked\";\nconst CLASS_IS_STICKY_LEFT = \"is-sticky-left\";\nconst CLASS_IS_STICKY_RIGHT = \"is-sticky-right\";\n\n/\n @slot - Slot for table element\n * @slot heading - Slot for `stzh-heading`\n * @slot search - Slot for search `stzh-input` element\n * @slot action-button - Slot for action `stzh-button` element\n * @slot list - Slot for list element showing on mobile\n * @slot pagination - Slot for action `stzh-pagination` element\n /\n@Component({\n tag: \"stzh-table\",\n styleUrl: \"stzh-table.scss\"\n})\nexport class StzhTable {\n /* Columns that should be sticky on the left side (column indexes separated by comma) /\n @Prop() fixedLeft: number = null;\n\n /* Columns that should be sticky on the right side (column indexes separated by comma) /\n @Prop() fixedRight: number = null;\n\n /\n Whether to disable min-width of the table.\n \n If `false`, the default `min-width` is `700px`\n * If `true`, the `min-width` is `none`, so the table will try to squeeze down content as much as possible.\n \n You can also overwrite the min-width via CSS with the custom property `--min-width`.\n */\n @Prop({ reflect: true }) disableMinWidth: boolean = false;\n\n @State() hasScrollLeft: boolean = false;\n @State() hasScrollRight: boolean = false;\n @State() isScrollable: boolean = false;\n @State() cellsStickyLeft: number[] = [];\n @State() cellsStickyRight: number[] = [];\n\n @Element() element: HTMLStzhTableElement;\n\n @Watch(\"fixedLeft\")\n @Watch(\"fixedRight\")\n fixedCellWatcher() {\n this.updateCellClasses();\n this.updateScrollStates();\n }\n\n private tableWrapper: HTMLDivElement;\n private observer: MutationObserver;\n private debounceScroll: number;\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n\n private updateCellClasses = () => {\n if (!this.tableWrapper) {\n return;\n }\n\n const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n rows.forEach((row: HTMLTableRowElement) => {\n const cells = Array.from(row.children);\n cells.forEach((cell: HTMLTableCellElement, index) => {\n cell.classList.remove(CLASS_IS_STICKY_LEFT);\n cell.classList.remove(CLASS_IS_STICKY_RIGHT);\n\n if (index === this.fixedLeft) {\n cell.classList.add(CLASS_IS_STICKY_LEFT);\n }\n\n if (index === this.fixedRight) {\n cell.classList.add(CLASS_IS_STICKY_RIGHT);\n }\n });\n });\n }\n\n private updateScrollStates = () => {\n if (!this.tableWrapper) {\n return;\n }\n\n const wrapperScrollLeft = this.tableWrapper.scrollLeft;\n const wrapperScrollWidth = this.tableWrapper.scrollWidth;\n const wrapperClientWidth = this.tableWrapper.clientWidth;\n\n this.isScrollable = wrapperScrollWidth > wrapperClientWidth;\n this.hasScrollLeft = wrapperScrollLeft > 0;\n this.hasScrollRight = wrapperScrollLeft < wrapperScrollWidth - wrapperClientWidth;\n\n const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n const firstRow = rows[0];\n\n if (!firstRow) {\n return;\n }\n\n this.cellsStickyLeft = [];\n this.cellsStickyRight = [];\n const cells: Element[] = Array.from(firstRow.children);\n\n cells.forEach((cell: HTMLTableCellElement, index: number) => {\n const offsetLeft = cell.offsetLeft;\n const offsetRight = offsetLeft + cell.offsetWidth;\n\n if (\n this.hasScrollLeft\n && index === this.fixedLeft\n && Math.ceil(wrapperScrollLeft) >= offsetLeft\n ) {\n this.cellsStickyLeft.push(index);\n }\n\n if (\n this.hasScrollRight\n && index === this.fixedRight\n && Math.ceil(wrapperScrollLeft) + wrapperClientWidth <= offsetRight\n ) {\n this.cellsStickyRight.push(index);\n }\n });\n\n rows.forEach((row: HTMLTableRowElement) => {\n const cells = Array.from(row.children);\n cells.forEach((cell: HTMLTableCellElement, index: number) => {\n if (\n this.cellsStickyLeft.indexOf(index) > -1\n \|\| this.cellsStickyRight.indexOf(index) > -1\n ) {\n cell.classList.add(CLASS_HAS_STICKED);\n } else {\n cell.classList.remove(CLASS_HAS_STICKED);\n }\n });\n });\n }\n\n private init = () => {\n const searchInput = this.element.querySelector(\n 'stzh-input[slot=\"search\"], [slot=\"search\"] stzh-input'\n );\n\n const listSortDropdowns = this.element.querySelectorAll(\n 'stzh-dropdown[slot=\"list-sort-by-dropdown\"], [slot=\"list-sort-by-dropdown\"] stzh-dropdown, stzh-dropdown[slot=\"list-sort-direction-dropdown\"], [slot=\"list-sort-direction-dropdown\"] stzh-dropdown'\n );\n\n if (searchInput) {\n setPropsIfNull(searchInput, {\n type: \"search\",\n size: \"small\",\n hideOptional: true\n } as HTMLStzhInputElement);\n }\n\n listSortDropdowns.forEach(sortDropdown => {\n setPropsIfNull(sortDropdown, {\n inline: true,\n noSearch: true,\n variant: \"plain\",\n size: \"small\"\n } as HTMLStzhDropdownElement)\n });\n\n this.updateCellClasses();\n this.updateScrollStates();\n }\n\n handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateScrollStates);\n }\n\n private handleScroll = () => {\n if (this.debounceScroll) {\n window.cancelAnimationFrame(this.debounceScroll);\n }\n\n this.debounceScroll = requestAnimationFrame(this.updateScrollStates);\n }\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const headingSlotUsed = hasSlot(this.element, \"heading\");\n const actionButtonSlotUsed = hasSlot(this.element, \"action-button\");\n const searchSlotUsed = hasSlot(this.element, \"search\");\n const hasList = hasSlot(this.element, \"list\");\n\n const classes = {\n \"stzh-table\": true,\n \"is-scrollable\": this.isScrollable,\n \"has-scroll-left\": this.hasScrollLeft,\n \"has-scroll-right\": this.hasScrollRight,\n \"has-scroll-left-shadow\": this.hasScrollLeft && this.cellsStickyLeft.length === 0,\n \"has-scroll-right-shadow\": this.hasScrollRight && this.cellsStickyRight.length === 0,\n \"has-list\": hasList,\n \"has-heading\": headingSlotUsed,\n \"has-action-or-search\": actionButtonSlotUsed \|\| searchSlotUsed,\n \"has-header\": headingSlotUsed \|\| actionButtonSlotUsed \|\| searchSlotUsed\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-table__header\">\n <div class=\"stzh-table__heading\">\n <slot name=\"heading\"></slot>\n </div>\n <div class=\"stzh-table__sub-header\">\n <div class=\"stzh-table__search\">\n <slot name=\"search\"></slot>\n </div>\n <div class=\"stzh-table__action-button\">\n <slot name=\"action-button\"></slot>\n </div>\n </div>\n </div>\n <div class=\"stzh-table__outer-wrapper\">\n <div\n ref={(el) => (this.tableWrapper = el as HTMLDivElement)}\n class=\"stzh-table__wrapper\"\n onScroll={this.handleScroll}\n >\n <slot></slot>\n </div>\n </div>\n <div class=\"stzh-table__list-wrapper\">\n <div class=\"stzh-table__list-sort-wrapper\">\n <slot name=\"list-sort-by-dropdown\"></slot>\n <slot name=\"list-sort-direction-dropdown\"></slot>\n </div>\n <slot name=\"list\"></slot>\n </div>\n <div class=\"stzh-table__pagination-wrapper\">\n <slot name=\"pagination\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-table.entry.cjs.js","mappings":"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","names":["setPropsIfNull","hasSlot","h","Host"],"sources":["src/components/stzh-table/stzh-table.scss?tag=stzh-table","src/components/stzh-table/stzh-table.tsx"],"sourcesContent":["/*\n @prop --max-height: Maximum height of table\n * @prop --min-width: Minium width of table\n * @prop --cell-padding: Cells padding\n * @prop --search-input-width: Search input width from small breakpoint\n\n * @prop --stzh-table-max-width: Global: Maximum height of table\n * @prop --stzh-table-min-width: Global: Minium width of table\n * @prop --stzh-table-cell-padding: Global: Cells padding\n * @prop --stzh-table-search-input-width: Global: Search input width from small breakpoint\n /\n\nstzh-table {\n @include host;\n @include table-host();\n}\n\n.stzh-table {\n @include table(\"table\");\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n Watch\n} from \"@stencil/core\";\n\nimport { setPropsIfNull, hasSlot } from \"../../utils/utils\";\n\nconst CLASS_HAS_STICKED = \"has-sticked\";\nconst CLASS_IS_STICKY_LEFT = \"is-sticky-left\";\nconst CLASS_IS_STICKY_RIGHT = \"is-sticky-right\";\n\n/\n @slot - Slot for table element\n * @slot heading - Slot for `stzh-heading`\n * @slot search - Slot for search `stzh-input` element\n * @slot action-button - Slot for action `stzh-button` element\n * @slot list - Slot for list element showing on mobile\n * @slot pagination - Slot for action `stzh-pagination` element\n * @slot list-sort-by-dropdown - Slot for a dropdown to sort by a specific criterion\n * @slot list-sort-direction-dropdown - Slot for a dropdown to choose the sort direction\n /\n@Component({\n tag: \"stzh-table\",\n styleUrl: \"stzh-table.scss\"\n})\nexport class StzhTable {\n /* Columns that should be sticky on the left side (column indexes separated by comma) /\n @Prop() fixedLeft: number = null;\n\n /* Columns that should be sticky on the right side (column indexes separated by comma) /\n @Prop() fixedRight: number = null;\n\n /\n Whether to disable min-width of the table.\n \n If `false`, the default `min-width` is `700px`\n * If `true`, the `min-width` is `none`, so the table will try to squeeze down content as much as possible.\n \n You can also overwrite the min-width via CSS with the custom property `--min-width`.\n */\n @Prop({ reflect: true }) disableMinWidth: boolean = false;\n\n @State() hasScrollLeft: boolean = false;\n @State() hasScrollRight: boolean = false;\n @State() isScrollable: boolean = false;\n @State() cellsStickyLeft: number[] = [];\n @State() cellsStickyRight: number[] = [];\n\n @Element() element: HTMLStzhTableElement;\n\n @Watch(\"fixedLeft\")\n @Watch(\"fixedRight\")\n fixedCellWatcher() {\n this.updateCellClasses();\n this.updateScrollStates();\n }\n\n private tableWrapper: HTMLDivElement;\n private observer: MutationObserver;\n private debounceScroll: number;\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n\n private updateCellClasses = () => {\n if (!this.tableWrapper) {\n return;\n }\n\n const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n rows.forEach((row: HTMLTableRowElement) => {\n const cells = Array.from(row.children);\n cells.forEach((cell: HTMLTableCellElement, index) => {\n cell.classList.remove(CLASS_IS_STICKY_LEFT);\n cell.classList.remove(CLASS_IS_STICKY_RIGHT);\n\n if (index === this.fixedLeft) {\n cell.classList.add(CLASS_IS_STICKY_LEFT);\n }\n\n if (index === this.fixedRight) {\n cell.classList.add(CLASS_IS_STICKY_RIGHT);\n }\n });\n });\n }\n\n private updateScrollStates = () => {\n if (!this.tableWrapper) {\n return;\n }\n\n const wrapperScrollLeft = this.tableWrapper.scrollLeft;\n const wrapperScrollWidth = this.tableWrapper.scrollWidth;\n const wrapperClientWidth = this.tableWrapper.clientWidth;\n\n this.isScrollable = wrapperScrollWidth > wrapperClientWidth;\n this.hasScrollLeft = wrapperScrollLeft > 0;\n this.hasScrollRight = wrapperScrollLeft < wrapperScrollWidth - wrapperClientWidth;\n\n const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n const firstRow = rows[0];\n\n if (!firstRow) {\n return;\n }\n\n this.cellsStickyLeft = [];\n this.cellsStickyRight = [];\n const cells: Element[] = Array.from(firstRow.children);\n\n cells.forEach((cell: HTMLTableCellElement, index: number) => {\n const offsetLeft = cell.offsetLeft;\n const offsetRight = offsetLeft + cell.offsetWidth;\n\n if (\n this.hasScrollLeft\n && index === this.fixedLeft\n && Math.ceil(wrapperScrollLeft) >= offsetLeft\n ) {\n this.cellsStickyLeft.push(index);\n }\n\n if (\n this.hasScrollRight\n && index === this.fixedRight\n && Math.ceil(wrapperScrollLeft) + wrapperClientWidth <= offsetRight\n ) {\n this.cellsStickyRight.push(index);\n }\n });\n\n rows.forEach((row: HTMLTableRowElement) => {\n const cells = Array.from(row.children);\n cells.forEach((cell: HTMLTableCellElement, index: number) => {\n if (\n this.cellsStickyLeft.indexOf(index) > -1\n \|\| this.cellsStickyRight.indexOf(index) > -1\n ) {\n cell.classList.add(CLASS_HAS_STICKED);\n } else {\n cell.classList.remove(CLASS_HAS_STICKED);\n }\n });\n });\n }\n\n private init = () => {\n const searchInput = this.element.querySelector(\n 'stzh-input[slot=\"search\"], [slot=\"search\"] stzh-input'\n );\n\n const listSortDropdowns = this.element.querySelectorAll(\n 'stzh-dropdown[slot=\"list-sort-by-dropdown\"], [slot=\"list-sort-by-dropdown\"] stzh-dropdown, stzh-dropdown[slot=\"list-sort-direction-dropdown\"], [slot=\"list-sort-direction-dropdown\"] stzh-dropdown'\n );\n\n if (searchInput) {\n setPropsIfNull(searchInput, {\n type: \"search\",\n size: \"small\",\n hideOptional: true\n } as HTMLStzhInputElement);\n }\n\n listSortDropdowns.forEach(sortDropdown => {\n setPropsIfNull(sortDropdown, {\n inline: true,\n noSearch: true,\n variant: \"plain\",\n size: \"small\"\n } as HTMLStzhDropdownElement)\n });\n\n this.updateCellClasses();\n this.updateScrollStates();\n }\n\n handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateScrollStates);\n }\n\n private handleScroll = () => {\n if (this.debounceScroll) {\n window.cancelAnimationFrame(this.debounceScroll);\n }\n\n this.debounceScroll = requestAnimationFrame(this.updateScrollStates);\n }\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const headingSlotUsed = hasSlot(this.element, \"heading\");\n const actionButtonSlotUsed = hasSlot(this.element, \"action-button\");\n const searchSlotUsed = hasSlot(this.element, \"search\");\n const hasList = hasSlot(this.element, \"list\");\n\n const classes = {\n \"stzh-table\": true,\n \"is-scrollable\": this.isScrollable,\n \"has-scroll-left\": this.hasScrollLeft,\n \"has-scroll-right\": this.hasScrollRight,\n \"has-scroll-left-shadow\": this.hasScrollLeft && this.cellsStickyLeft.length === 0,\n \"has-scroll-right-shadow\": this.hasScrollRight && this.cellsStickyRight.length === 0,\n \"has-list\": hasList,\n \"has-heading\": headingSlotUsed,\n \"has-action-or-search\": actionButtonSlotUsed \|\| searchSlotUsed,\n \"has-header\": headingSlotUsed \|\| actionButtonSlotUsed \|\| searchSlotUsed\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-table__header\">\n <div class=\"stzh-table__heading\">\n <slot name=\"heading\"></slot>\n </div>\n <div class=\"stzh-table__sub-header\">\n <div class=\"stzh-table__search\">\n <slot name=\"search\"></slot>\n </div>\n <div class=\"stzh-table__action-button\">\n <slot name=\"action-button\"></slot>\n </div>\n </div>\n </div>\n <div class=\"stzh-table__outer-wrapper\">\n <div\n ref={(el) => (this.tableWrapper = el as HTMLDivElement)}\n class=\"stzh-table__wrapper\"\n onScroll={this.handleScroll}\n >\n <slot></slot>\n </div>\n </div>\n <div class=\"stzh-table__list-wrapper\">\n <div class=\"stzh-table__list-sort-wrapper\">\n <slot name=\"list-sort-by-dropdown\"></slot>\n <slot name=\"list-sort-direction-dropdown\"></slot>\n </div>\n <slot name=\"list\"></slot>\n </div>\n <div class=\"stzh-table__pagination-wrapper\">\n <slot name=\"pagination\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}