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

@oiz/stzh-components 3.0.0-beta3 → 3.0.0-beta4

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

package/dist/collection/components/stzh-iframe/stzh-iframe.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-iframe.js","sourceRoot":"","sources":["../../../../src/components/stzh-iframe/stzh-iframe.tsx"],"names":[],"mappings":"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","sourcesContent":["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 StzhIframeView,\n StzhIframePreviewSkipEvent,\n StzhIframeViewChangeEvent,\n} from \"../../index\";\nimport { StzhIframeLocalizedText } from \"./stzh-iframe.localization\";\n\nimport Cookies from \"js-cookie\";\n\nconst COOKIE_PREFIX_CONFIRM = \"stzh-components-iframe-confirm\";\n\nlet iframeCounter = 0;\n\n/*\n @slot preview-logo - Slot for logo\n * @slot preview-image - Slot for preview image\n * @slot cookiewall-text - Slot for cookiewall text\n /\n@Component({\n tag: \"stzh-iframe\",\n styleUrl: \"stzh-iframe.scss\",\n scoped: true\n})\nexport class StzhIframe {\n /* Translation strings /\n @Prop() localization: StzhIframeLocalizedText;\n\n /* `src` of iframe /\n @Prop() src: string = \"\";\n private _src: string \| null = null;\n\n /\n Cookie name (if not empty, the user will be shown a cookie wall)\n * Will be prefixed with `stzh-components-iframe-confirm-`.\n /\n @Prop() cookie: string;\n\n /\n Number of days the cookie is valid for.\n * If omitted or set to null, the cookie expires when browser is closed.\n * Maximum is on year (365 days, is default).\n /\n @Prop() cookieExpires: number \| null = 365;\n\n /* Confirm button icon /\n @Prop() cookieConfirmIcon: string;\n\n /* Confirm button label /\n @Prop() cookieConfirmLabel: string;\n\n /* Confirm text (use instead of `cookiewall-text` slot) /\n @Prop() cookieConfirmText: string;\n\n /* Preview label /\n @Prop() previewLabel: string;\n\n /* Preview icon /\n @Prop() previewIcon: string = \"external-link\";\n\n /* Whether preview should be skipped, if user has passed the cookiewall before /\n @Prop() skipPreviewIfCookieAccepted: boolean = false;\n\n /* Whether preview should always be skipped /\n @Prop() skipPreview: boolean = false;\n\n @Element() element: HTMLStzhIframeElement;\n\n @State() view: StzhIframeView = \"preview\";\n\n /* Preview skip (only gets executed if it goes directly to iframe and not cookiewall) /\n @Event() stzhPreviewSkip: EventEmitter<StzhIframePreviewSkipEvent>;\n\n /* View change */\n @Event() stzhViewChange: EventEmitter<StzhIframeViewChangeEvent>;\n\n @Watch(\"src\")\n srcWatcher(newValue: string) {\n if (this.view === \"iframe\") {\n this._src = newValue;\n }\n }\n\n @Watch(\"view\")\n viewWatcher(newValue: StzhIframeView) {\n if (newValue === \"iframe\") {\n this._src = this.src;\n } else {\n this._src = null;\n }\n }\n\n private iframeId: string;\n private iframeElement: HTMLIFrameElement;\n private previewButtonElement: HTMLButtonElement;\n private confirmButtonElement: HTMLStzhButtonElement;\n private updateFocus: boolean = false;\n\n private handleIframeLoad = () => {\n if (this.updateFocus) {\n this.iframeElement.focus();\n this.updateFocus = false;\n }\n }\n\n private handleCookiewallCloseClick = () => {\n this.updateFocus = true;\n this.view = \"preview\";\n\n this.stzhViewChange.emit({\n component: \"stzh-iframe\",\n value: this.view\n });\n }\n\n private handleCookiewallConfirmClick = () => {\n Cookies.set(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`, \"1\", {\n expires: this.cookieExpires \|\| null\n });\n\n this.updateFocus = true;\n this.view = \"iframe\";\n\n this.stzhViewChange.emit({\n component: \"stzh-iframe\",\n value: this.view\n });\n }\n\n private handlePreviewClick = () => {\n\t\tconst cookieAccepted = Cookies.get(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`) \|\| false;\n this.updateFocus = true;\n\n if (!this.cookie \|\| cookieAccepted) {\n this.view = \"iframe\";\n } else {\n this.view = \"cookiewall\";\n }\n\n this.stzhViewChange.emit({\n component: \"stzh-iframe\",\n value: this.view\n });\n }\n\n async componentWillLoad() {\n this.iframeId = `stzh-iframe-${iframeCounter++}`;\n\n\t\tconst cookieAccepted = Cookies.get(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`) \|\| false;\n\n if (\n ((!this.cookie \|\| cookieAccepted) && (this.skipPreviewIfCookieAccepted \|\| this.skipPreview))\n \|\| (!this.cookie && this.skipPreview)\n ) {\n this.stzhPreviewSkip.emit({\n component: \"stzh-iframe\"\n });\n\n this.view = \"iframe\";\n } else if (this.cookie && this.skipPreview) {\n this.view = \"cookiewall\";\n }\n\n this.viewWatcher(this.view);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"iframe\");\n }\n }\n\n async componentDidRender() {\n if (this.updateFocus) {\n if (this.view === \"iframe\") {\n // wait for iframe load event (handleIframeLoad)\n } else if (this.view === \"preview\") {\n this.previewButtonElement.focus();\n this.updateFocus = false;\n } else if (this.view === \"cookiewall\") {\n this.confirmButtonElement.focus();\n this.updateFocus = false;\n }\n }\n }\n\n render() {\n const classes = {\n \"stzh-iframe\": true,\n };\n\n return (\n <Host>\n <div class={classes}>\n {this.view === \"iframe\" &&\n <iframe\n ref={(el) => (this.iframeElement = el as HTMLIFrameElement)}\n class=\"stzh-iframe__iframe\"\n src={this._src}\n allow=\"autoplay; fullscreen\"\n onLoad={this.handleIframeLoad}\n ></iframe>\n }\n\n <button\n ref={(el) => (this.previewButtonElement = el as HTMLButtonElement)}\n onClick={this.handlePreviewClick}\n aria-label={this.previewLabel \|\| this.localization.defaultPreviewLabel}\n // disabled={this.view === \"cookiewall\"}\n class={{\n \"stzh-iframe__preview\": true,\n \"is-visible\": this.view === \"preview\" \|\| this.view === \"cookiewall\"\n }}\n >\n <div class=\"stzh-iframe__preview-image-wrapper\">\n <slot name=\"preview-image\"></slot>\n </div>\n\n <div class=\"stzh-iframe__preview-logo-wrapper\">\n <slot name=\"preview-logo\"></slot>\n </div>\n\n {this.previewIcon &&\n <div class={{\n \"stzh-iframe__preview-run\": true,\n \"is-visible\": this.view === \"preview\"\n }}>\n <stzh-icon class=\"stzh-iframe__preview-run-icon\" name={this.previewIcon}></stzh-icon>\n </div>\n }\n </button>\n\n {this.cookie &&\n <div\n class={{\n \"stzh-iframe__cookiewall\": true,\n \"is-visible\": this.view === \"cookiewall\"\n }}\n >\n <div class=\"stzh-iframe__cookiewall-content\">\n <div\n class=\"stzh-iframe__cookiewall-text\"\n id={`${this.iframeId}-cookiewall-text`}\n >\n {this.cookieConfirmText ? this.cookieConfirmText : <slot name=\"cookiewall-text\"></slot>}\n </div>\n\n <stzh-button\n ref={(el) => (this.confirmButtonElement = el as HTMLStzhButtonElement)}\n class=\"stzh-iframe__cookiewall-button\"\n size=\"small\"\n a11yDescribedby={`${this.iframeId}-cookiewall-text`}\n icon={this.cookieConfirmIcon}\n label={this.cookieConfirmLabel \|\| this.localization.defaultConfirmLabel}\n onClick={this.handleCookiewallConfirmClick}\n ></stzh-button>\n </div>\n\n {!this.skipPreview &&\n <button\n class=\"stzh-iframe__cookiewall-close\"\n onClick={this.handleCookiewallCloseClick}\n aria-label={this.localization.confirmCloseLabel}\n >\n <stzh-icon class=\"stzh-iframe__cookiewall-close-icon\" name=\"close\"></stzh-icon>\n </button>\n }\n </div>\n }\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"stzh-iframe.js","sourceRoot":"","sources":["../../../../src/components/stzh-iframe/stzh-iframe.tsx"],"names":[],"mappings":"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","sourcesContent":["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 StzhIframeView,\n StzhIframePreviewSkipEvent,\n StzhIframeViewChangeEvent,\n} from \"../../index\";\nimport { StzhIframeLocalizedText } from \"./stzh-iframe.localization\";\n\nimport Cookies from \"js-cookie\";\n\nconst COOKIE_PREFIX_CONFIRM = \"stzh-components-iframe-confirm\";\n\nlet iframeCounter = 0;\n\n/*\n @slot preview-logo - Slot for logo\n * @slot preview-image - Slot for preview image\n * @slot cookiewall-text - Slot for cookiewall text\n /\n@Component({\n tag: \"stzh-iframe\",\n styleUrl: \"stzh-iframe.scss\",\n scoped: true\n})\nexport class StzhIframe {\n /* Translation strings /\n @Prop() localization: StzhIframeLocalizedText;\n\n /* Id of iframe /\n @Prop() iframeId: string;\n\n /* Error text of iframe if couldn't be loaded /\n @Prop() iframeErrorText: string;\n\n /\n Name of iframe\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#name\n /\n @Prop() name: string;\n\n /\n Sandbox of iframe\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#sandbox\n /\n @Prop() sandbox: string;\n\n /\n ReferrerPolicy of Iframe\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#referrerpolicy\n /\n @Prop() referrerpolicy: \"no-referrer\"\n \| \"no-referrer-when-downgrade\"\n \| \"origin\"\n \| \"origin-when-cross-origin\"\n \| \"same-origin\"\n \| \"strict-origin\"\n \| \"strict-origin-when-cross-origin\"\n \| \"unsafe-url\";\n\n /\n Allow of Iframe\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#allow\n /\n @Prop() allow: string = \"autoplay; fullscreen\";\n\n /* Width of iframe /\n @Prop() width: string;\n\n /* Width of iframe /\n @Prop() height: string;\n\n /* `src` of iframe /\n @Prop() src: string = \"\";\n private _src: string \| null = null;\n\n /\n Cookie name (if not empty, the user will be shown a cookie wall)\n * Will be prefixed with `stzh-components-iframe-confirm-`.\n /\n @Prop() cookie: string;\n\n /\n Number of days the cookie is valid for.\n * If omitted or set to null, the cookie expires when browser is closed.\n * Maximum is on year (365 days, is default).\n /\n @Prop() cookieExpires: number \| null = 365;\n\n /* Confirm button icon /\n @Prop() cookieConfirmIcon: string;\n\n /* Confirm button label /\n @Prop() cookieConfirmLabel: string;\n\n /* Confirm text (use instead of `cookiewall-text` slot) /\n @Prop() cookieConfirmText: string;\n\n /* Preview label /\n @Prop() previewLabel: string;\n\n /* Preview icon /\n @Prop() previewIcon: string = \"external-link\";\n\n /* Whether preview should be skipped, if user has passed the cookiewall before /\n @Prop() skipPreviewIfCookieAccepted: boolean = false;\n\n /* Whether preview should always be skipped /\n @Prop() skipPreview: boolean = false;\n\n @Element() element: HTMLStzhIframeElement;\n\n @State() view: StzhIframeView = \"preview\";\n\n /* Preview skip (only gets executed if it goes directly to iframe and not cookiewall) /\n @Event() stzhPreviewSkip: EventEmitter<StzhIframePreviewSkipEvent>;\n\n /* View change */\n @Event() stzhViewChange: EventEmitter<StzhIframeViewChangeEvent>;\n\n @Watch(\"src\")\n srcWatcher(newValue: string) {\n if (this.view === \"iframe\") {\n this._src = newValue;\n }\n }\n\n @Watch(\"view\")\n viewWatcher(newValue: StzhIframeView) {\n if (newValue === \"iframe\") {\n this._src = this.src;\n } else {\n this._src = null;\n }\n }\n\n private internalId: string;\n private iframeElement: HTMLIFrameElement;\n private previewButtonElement: HTMLButtonElement;\n private confirmButtonElement: HTMLStzhButtonElement;\n private updateFocus: boolean = false;\n\n private handleIframeLoad = () => {\n if (this.updateFocus) {\n this.iframeElement.focus();\n this.updateFocus = false;\n }\n }\n\n private handleCookiewallCloseClick = () => {\n this.updateFocus = true;\n this.view = \"preview\";\n\n this.stzhViewChange.emit({\n component: \"stzh-iframe\",\n value: this.view\n });\n }\n\n private handleCookiewallConfirmClick = () => {\n Cookies.set(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`, \"1\", {\n expires: this.cookieExpires \|\| null\n });\n\n this.updateFocus = true;\n this.view = \"iframe\";\n\n this.stzhViewChange.emit({\n component: \"stzh-iframe\",\n value: this.view\n });\n }\n\n private handlePreviewClick = () => {\n\t\tconst cookieAccepted = Cookies.get(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`) \|\| false;\n this.updateFocus = true;\n\n if (!this.cookie \|\| cookieAccepted) {\n this.view = \"iframe\";\n } else {\n this.view = \"cookiewall\";\n }\n\n this.stzhViewChange.emit({\n component: \"stzh-iframe\",\n value: this.view\n });\n }\n\n async componentWillLoad() {\n this.internalId = `stzh-iframe-${iframeCounter++}`;\n\n\t\tconst cookieAccepted = Cookies.get(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`) \|\| false;\n\n if (\n ((!this.cookie \|\| cookieAccepted) && (this.skipPreviewIfCookieAccepted \|\| this.skipPreview))\n \|\| (!this.cookie && this.skipPreview)\n ) {\n this.stzhPreviewSkip.emit({\n component: \"stzh-iframe\"\n });\n\n this.view = \"iframe\";\n } else if (this.cookie && this.skipPreview) {\n this.view = \"cookiewall\";\n }\n\n this.viewWatcher(this.view);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"iframe\");\n }\n }\n\n async componentDidRender() {\n if (this.updateFocus) {\n if (this.view === \"iframe\") {\n // wait for iframe load event (handleIframeLoad)\n } else if (this.view === \"preview\") {\n this.previewButtonElement.focus();\n this.updateFocus = false;\n } else if (this.view === \"cookiewall\") {\n this.confirmButtonElement.focus();\n this.updateFocus = false;\n }\n }\n }\n\n render() {\n const classes = {\n \"stzh-iframe\": true,\n };\n\n return (\n <Host>\n <div class={classes}>\n {this.view === \"iframe\" &&\n <iframe\n id={this.iframeId}\n name={this.name}\n sandbox={this.sandbox}\n referrerPolicy={this.referrerpolicy}\n width={this.width}\n height={this.height}\n ref={(el) => (this.iframeElement = el as HTMLIFrameElement)}\n class=\"stzh-iframe__iframe\"\n src={this._src}\n allow={this.allow}\n onLoad={this.handleIframeLoad}\n >{this.iframeErrorText}</iframe>\n }\n\n <button\n ref={(el) => (this.previewButtonElement = el as HTMLButtonElement)}\n onClick={this.handlePreviewClick}\n aria-label={this.previewLabel \|\| this.localization.defaultPreviewLabel}\n // disabled={this.view === \"cookiewall\"}\n class={{\n \"stzh-iframe__preview\": true,\n \"is-visible\": this.view === \"preview\" \|\| this.view === \"cookiewall\"\n }}\n >\n <div class=\"stzh-iframe__preview-image-wrapper\">\n <slot name=\"preview-image\"></slot>\n </div>\n\n <div class=\"stzh-iframe__preview-logo-wrapper\">\n <slot name=\"preview-logo\"></slot>\n </div>\n\n {this.previewIcon &&\n <div class={{\n \"stzh-iframe__preview-run\": true,\n \"is-visible\": this.view === \"preview\"\n }}>\n <stzh-icon class=\"stzh-iframe__preview-run-icon\" name={this.previewIcon}></stzh-icon>\n </div>\n }\n </button>\n\n {this.cookie &&\n <div\n class={{\n \"stzh-iframe__cookiewall\": true,\n \"is-visible\": this.view === \"cookiewall\"\n }}\n >\n <div class=\"stzh-iframe__cookiewall-content\">\n <div\n class=\"stzh-iframe__cookiewall-text\"\n id={`${this.internalId}-cookiewall-text`}\n >\n {this.cookieConfirmText ? this.cookieConfirmText : <slot name=\"cookiewall-text\"></slot>}\n </div>\n\n <stzh-button\n ref={(el) => (this.confirmButtonElement = el as HTMLStzhButtonElement)}\n class=\"stzh-iframe__cookiewall-button\"\n size=\"small\"\n a11yDescribedby={`${this.internalId}-cookiewall-text`}\n icon={this.cookieConfirmIcon}\n label={this.cookieConfirmLabel \|\| this.localization.defaultConfirmLabel}\n onClick={this.handleCookiewallConfirmClick}\n ></stzh-button>\n </div>\n\n {!this.skipPreview &&\n <button\n class=\"stzh-iframe__cookiewall-close\"\n onClick={this.handleCookiewallCloseClick}\n aria-label={this.localization.confirmCloseLabel}\n >\n <stzh-icon class=\"stzh-iframe__cookiewall-close-icon\" name=\"close\"></stzh-icon>\n </button>\n }\n </div>\n }\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/stzh-imagecomparison/stzh-imagecomparison.css CHANGED Viewed

@@ -158,7 +158,7 @@
 :host {
   --exposure: 50%;
-  --divider-width: 0.1875rem;
+  --divider-width: 0.125rem;
 }
 :host ::slotted(*) {
   position: absolute;
@@ -198,17 +198,16 @@
 .stzh-imagecomparison__slider-icon-wrapper {
   display: flex;
   align-items: center;
-  justify-items: center;
+  justify-content: space-between;
   position: absolute;
   top: 50%;
   left: var(--exposure);
   overflow: hidden;
-  width: 3rem;
-  height: 2rem;
+  width: calc(2 * var(--stzh-icon-size) + var(--divider-width));
+  height: var(--stzh-icon-size);
   transform: translate(-50%, -50%);
-  color: var(--stzh-color-primary);
+  color: var(--stzh-color-primary70);
   background-color: var(--stzh-color-white);
-  border-radius: 5rem;
   transition-property: color, background-color;
   transition-duration: var(--stzh-base-transition-animation-speed);
 }
@@ -221,8 +220,8 @@
   font-family: var(--stzh-font-family-heavy);
   font-weight: var(--stzh-font-weight-heavy);
   font-style: var(--stzh-font-style-heavy);
-  font-size: var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));
-  line-height: var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));
+  font-size: var(--stzh-font-micro-font-size);
+  line-height: var(--stzh-font-micro-text-line-height);
   position: absolute;
   top: 0;
   display: flex;
@@ -232,21 +231,17 @@
   background: var(--stzh-color-black50op);
   color: var(--stzh-color-white);
 }
-@media screen and (min-width: 900px) {
-  .stzh-imagecomparison__hint-left, .stzh-imagecomparison__hint-right {
-    font-size: var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));
-    line-height: var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height));
-  }
-}
 .stzh-imagecomparison__hint-left {
   left: 0;
 }
 .stzh-imagecomparison__hint-right {
   right: 0;
 }
-.stzh-imagecomparison__label:hover .stzh-imagecomparison__slider-line, .stzh-imagecomparison__label:hover .stzh-imagecomparison__slider-icon-wrapper {
-  background-color: var(--stzh-color-primary);
-  color: var(--stzh-color-white);
+.stzh-imagecomparison__label:hover .stzh-imagecomparison__slider-line {
+  background-color: var(--stzh-color-primary70);
+}
+.stzh-imagecomparison__label:hover .stzh-imagecomparison__slider-icon-wrapper {
+  background-color: var(--stzh-color-secondary30);
 }
 .stzh-imagecomparison__label:hover + .stzh-imagecomparison__hint-wrapper {
   opacity: 1;

package/dist/collection/components/stzh-imagecomparison/stzh-imagecomparison.js CHANGED Viewed

@@ -34,7 +34,7 @@ export class StzhImageComparison {
     };
     return (h(Host, { "aria-roledescription": this.localization.label, style: {
         '--exposure': `${this.value.toString()}%`
-      } }, h("div", { class: classes }, h("div", { class: "stzh-imagecomparison__element" }, h("slot", { name: "image-before" }), h("slot", { name: "image-after" }), h("label", { class: "stzh-imagecomparison__label", "aria-label": this.label || this.localization.label, "aria-describedby": this.a11yDescribedby || null }, h("div", { class: "stzh-imagecomparison__slider-line" }), h("div", { class: "stzh-imagecomparison__slider-icon-wrapper" }, h("stzh-icon", { class: "stzh-imagecomparison__slider-icon-left", name: "angle-left" }), h("stzh-icon", { class: "stzh-imagecomparison__slider-icon-right", name: "angle-right" })), h("input", { type: "range", class: "stzh-imagecomparison__control", min: "0", max: "100", ref: (el) => (this.inputElement = el), onInput: this.handleInput })), h("div", { class: "stzh-imagecomparison__hint-wrapper" }, h("span", { class: "stzh-imagecomparison__hint-left" }, this.hintLeft ? this.hintLeft : h("slot", { name: "hint-left" })), h("span", { class: "stzh-imagecomparison__hint-right" }, this.hintRight ? this.hintRight : h("slot", { name: "hint-right" })))))));
+      } }, h("div", { class: classes }, h("div", { class: "stzh-imagecomparison__element" }, h("slot", { name: "image-before" }), h("slot", { name: "image-after" }), h("label", { class: "stzh-imagecomparison__label", "aria-label": this.label || this.localization.label, "aria-describedby": this.a11yDescribedby || null }, h("div", { class: "stzh-imagecomparison__slider-icon-wrapper" }, h("stzh-icon", { class: "stzh-imagecomparison__slider-icon-left", name: "angle-left" }), h("stzh-icon", { class: "stzh-imagecomparison__slider-icon-right", name: "angle-right" })), h("div", { class: "stzh-imagecomparison__slider-line" }), h("input", { type: "range", class: "stzh-imagecomparison__control", min: "0", max: "100", ref: (el) => (this.inputElement = el), onInput: this.handleInput })), h("div", { class: "stzh-imagecomparison__hint-wrapper" }, h("span", { class: "stzh-imagecomparison__hint-left" }, this.hintLeft ? this.hintLeft : h("slot", { name: "hint-left" })), h("span", { class: "stzh-imagecomparison__hint-right" }, this.hintRight ? this.hintRight : h("slot", { name: "hint-right" })))))));
   }
   static get is() { return "stzh-imagecomparison"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-imagecomparison/stzh-imagecomparison.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-imagecomparison.js","sourceRoot":"","sources":["../../../../src/components/stzh-imagecomparison/stzh-imagecomparison.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,CAAC,EACD,KAAK,EAEN,MAAM,eAAe,CAAC;AAQvB;;;;;GAKG;AAQH,MAAM,OAAO,mBAAmB;;IA0BtB,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MAC1C,IAAI,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;MACpC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;MAE3B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,sBAAsB;QACjC,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;IACL,CAAC,CAAA;;oBA9B0B,EAAE;qBAGD,EAAE;iBAGW,EAAE;;2BAMwB,EAAE;;EAoBrE,KAAK,CAAC,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;KAC1G;EACH,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,sBAAsB,EAAE,IAAI;KAC7B,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,4BACmB,IAAI,CAAC,YAAY,CAAC,KAAK,EAC7C,KAAK,EAAE;QACL,YAAY,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG;OAC1C;MAED,WAAK,KAAK,EAAE,OAAO;QACjB,WAAK,KAAK,EAAC,+BAA+B;UACxC,YAAM,IAAI,EAAC,cAAc,GAAQ;UACjC,YAAM,IAAI,EAAC,aAAa,GAAQ;UAEhC,aACE,KAAK,EAAC,6BAA6B,gBACvB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,sBAC/B,IAAI,CAAC,eAAe,IAAI,IAAI;YAE9C,WAAK,KAAK,EAAC,~~mCAAmC,GAAO;YACrD,WAAK,KAAK,EAAC,~~2CAA2C;cACpD,iBACE,KAAK,EAAC,wCAAwC,EAC9C,IAAI,EAAC,YAAY,GACP;cACZ,iBACE,KAAK,EAAC,yCAAyC,EAC/C,IAAI,EAAC,aAAa,GACR,CACR;~~YAEN~~,aACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,+BAA+B,EACrC,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,KAAK,EACT,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAsB,CAAC,EACzD,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACI;UAER,WAAK,KAAK,EAAC,oCAAoC;YAC7C,YAAM,KAAK,EAAC,iCAAiC,IAC1C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1D;YACP,YAAM,KAAK,EAAC,kCAAkC,IAC3C,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC7D,CACH,CACF,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { \n Component~~, \~~n Host~~, \~~n Element~~, \~~n Prop~~, \~~n h,\n Event,\n EventEmitter\n} from '@stencil/core';\n\nimport { \n StzhImagecomparisonChangeEvent,\n} from \"../../index\";\n\nimport { StzhImagecomparisonLocalizedText } from \"./stzh-imagecomparison.localization\"\n\n/*\n @slot image-before - Slot for a before image\n * @slot image-after - Slot for a after image\n * @slot hint-left - Slot for a left image hint as alternative for attribute\n * @slot hint-right - Slot for a right image hint as alternative for attribute\n /\n\n@Component({\n tag: 'stzh-imagecomparison',\n styleUrl: 'stzh-imagecomparison.scss',\n scoped: true,\n})\n\nexport class StzhImageComparison {\n /* Translation strings. /\n @Prop() localization: StzhImagecomparisonLocalizedText;\n\n /* Hint left /\n @Prop() hintLeft: string = \"\";\n\n /* Hint right /\n @Prop() hintRight: string = \"\";\n\n /* Width of image before /\n @Prop({ mutable: true }) value: number = 50;\n\n /* Overwrite default label /\n @Prop() label: string;\n\n /* Id for element which describes the label /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n @Element() element: HTMLStzhImagecomparisonElement;\n\n / Image comparison slider on change event */\n @Event() stzhChange: EventEmitter<StzhImagecomparisonChangeEvent>;\n \n private inputElement: HTMLInputElement;\n \n private handleInput = (event: InputEvent) => {\n let value = this.inputElement.value;\n this.value = Number(value);\n\n this.stzhChange.emit({ \n component: \"stzh-imagecomparison\",\n originalEvent: event,\n value: this.value\n });\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"imagecomparison\");\n }\n } \n \n render() {\n const classes = {\n \"stzh-imagecomparison\": true,\n };\n\n return (\n <Host\n aria-roledescription={this.localization.label}\n style={{\n '--exposure': `${this.value.toString()}%`\n }}\n >\n <div class={classes}>\n <div class=\"stzh-imagecomparison__element\">\n <slot name=\"image-before\"></slot>\n <slot name=\"image-after\"></slot>\n\n <label\n class=\"stzh-imagecomparison__label\"\n aria-label={this.label \|\| this.localization.label}\n aria-describedby={this.a11yDescribedby \|\| null}\n >\n <div class=\"stzh-imagecomparison__slider-~~line\"></div>\n <div class=\"stzh-imagecomparison__slider-~~icon-wrapper\">\n <stzh-icon \n class=\"stzh-imagecomparison__slider-icon-left\" \n name=\"angle-left\">\n </stzh-icon>\n <stzh-icon \n class=\"stzh-imagecomparison__slider-icon-right\" \n name=\"angle-right\">\n </stzh-icon>\n </div>\n\n <input\n type=\"range\" \n class=\"stzh-imagecomparison__control\" \n min=\"0\" \n max=\"100\"\n ref={(el) => (this.inputElement = el as HTMLInputElement)}\n onInput={this.handleInput}\n />\n </label>\n\n <div class=\"stzh-imagecomparison__hint-wrapper\">\n <span class=\"stzh-imagecomparison__hint-left\">\n {this.hintLeft ? this.hintLeft : <slot name=\"hint-left\"></slot>}\n </span>\n <span class=\"stzh-imagecomparison__hint-right\">\n {this.hintRight ? this.hintRight : <slot name=\"hint-right\"></slot>}\n </span~~> \~~n </div>\n </div>\n </div~~> \~~n </Host>\n );\n }\n}\n\n"]}
1	+ {"version":3,"file":"stzh-imagecomparison.js","sourceRoot":"","sources":["../../../../src/components/stzh-imagecomparison/stzh-imagecomparison.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,CAAC,EACD,KAAK,EAEN,MAAM,eAAe,CAAC;AAQvB;;;;;GAKG;AAQH,MAAM,OAAO,mBAAmB;;IA0BtB,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MAC1C,IAAI,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;MACpC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;MAE3B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,sBAAsB;QACjC,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;IACL,CAAC,CAAA;;oBA9B0B,EAAE;qBAGD,EAAE;iBAGW,EAAE;;2BAMwB,EAAE;;EAoBrE,KAAK,CAAC,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;KAC1G;EACH,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,sBAAsB,EAAE,IAAI;KAC7B,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,4BACmB,IAAI,CAAC,YAAY,CAAC,KAAK,EAC7C,KAAK,EAAE;QACL,YAAY,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG;OAC1C;MAED,WAAK,KAAK,EAAE,OAAO;QACjB,WAAK,KAAK,EAAC,+BAA+B;UACxC,YAAM,IAAI,EAAC,cAAc,GAAQ;UACjC,YAAM,IAAI,EAAC,aAAa,GAAQ;UAEhC,aACE,KAAK,EAAC,6BAA6B,gBACvB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,sBAC/B,IAAI,CAAC,eAAe,IAAI,IAAI;YAE9C,WAAK,KAAK,EAAC,2CAA2C;cACpD,iBACE,KAAK,EAAC,wCAAwC,EAC9C,IAAI,EAAC,YAAY,GACP;cACZ,iBACE,KAAK,EAAC,yCAAyC,EAC/C,IAAI,EAAC,aAAa,GACR,CACR;YACN,WAAK,KAAK,EAAC,mCAAmC,GAAO;YAErD,aACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,+BAA+B,EACrC,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,KAAK,EACT,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAsB,CAAC,EACzD,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACI;UAER,WAAK,KAAK,EAAC,oCAAoC;YAC7C,YAAM,KAAK,EAAC,iCAAiC,IAC1C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1D;YACP,YAAM,KAAK,EAAC,kCAAkC,IAC3C,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC7D,CACH,CACF,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Host,\n Element,\n Prop,\n h,\n Event,\n EventEmitter\n} from '@stencil/core';\n\nimport {\n StzhImagecomparisonChangeEvent,\n} from \"../../index\";\n\nimport { StzhImagecomparisonLocalizedText } from \"./stzh-imagecomparison.localization\"\n\n/*\n @slot image-before - Slot for a before image\n * @slot image-after - Slot for a after image\n * @slot hint-left - Slot for a left image hint as alternative for attribute\n * @slot hint-right - Slot for a right image hint as alternative for attribute\n /\n\n@Component({\n tag: 'stzh-imagecomparison',\n styleUrl: 'stzh-imagecomparison.scss',\n scoped: true,\n})\n\nexport class StzhImageComparison {\n /* Translation strings. /\n @Prop() localization: StzhImagecomparisonLocalizedText;\n\n /* Hint left /\n @Prop() hintLeft: string = \"\";\n\n /* Hint right /\n @Prop() hintRight: string = \"\";\n\n /* Width of image before /\n @Prop({ mutable: true }) value: number = 50;\n\n /* Overwrite default label /\n @Prop() label: string;\n\n /* Id for element which describes the label /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n @Element() element: HTMLStzhImagecomparisonElement;\n\n / Image comparison slider on change event */\n @Event() stzhChange: EventEmitter<StzhImagecomparisonChangeEvent>;\n\n private inputElement: HTMLInputElement;\n\n private handleInput = (event: InputEvent) => {\n let value = this.inputElement.value;\n this.value = Number(value);\n\n this.stzhChange.emit({\n component: \"stzh-imagecomparison\",\n originalEvent: event,\n value: this.value\n });\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"imagecomparison\");\n }\n }\n\n render() {\n const classes = {\n \"stzh-imagecomparison\": true,\n };\n\n return (\n <Host\n aria-roledescription={this.localization.label}\n style={{\n '--exposure': `${this.value.toString()}%`\n }}\n >\n <div class={classes}>\n <div class=\"stzh-imagecomparison__element\">\n <slot name=\"image-before\"></slot>\n <slot name=\"image-after\"></slot>\n\n <label\n class=\"stzh-imagecomparison__label\"\n aria-label={this.label \|\| this.localization.label}\n aria-describedby={this.a11yDescribedby \|\| null}\n >\n <div class=\"stzh-imagecomparison__slider-icon-wrapper\">\n <stzh-icon\n class=\"stzh-imagecomparison__slider-icon-left\"\n name=\"angle-left\">\n </stzh-icon>\n <stzh-icon\n class=\"stzh-imagecomparison__slider-icon-right\"\n name=\"angle-right\">\n </stzh-icon>\n </div>\n <div class=\"stzh-imagecomparison__slider-line\"></div>\n\n <input\n type=\"range\"\n class=\"stzh-imagecomparison__control\"\n min=\"0\"\n max=\"100\"\n ref={(el) => (this.inputElement = el as HTMLInputElement)}\n onInput={this.handleInput}\n />\n </label>\n\n <div class=\"stzh-imagecomparison__hint-wrapper\">\n <span class=\"stzh-imagecomparison__hint-left\">\n {this.hintLeft ? this.hintLeft : <slot name=\"hint-left\"></slot>}\n </span>\n <span class=\"stzh-imagecomparison__hint-right\">\n {this.hintRight ? this.hintRight : <slot name=\"hint-right\"></slot>}\n </span>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n"]}

package/dist/collection/components/stzh-link/stzh-link.js CHANGED Viewed

@@ -41,8 +41,8 @@ export class StzhLink {
     this.localization = undefined;
     this.icon = "";
     this.iconPosition = "left";
-    this.size = "default";
     this.height = "default";
+    this.size = "default";
     this.sizeSmall = undefined;
     this.sizeMedium = undefined;
     this.sizeLarge = undefined;
@@ -193,45 +193,45 @@ export class StzhLink {
         "reflect": true,
         "defaultValue": "\"left\""
       },
-      "size": {
+      "height": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "StzhLinkSize",
-          "resolved": "\"default\" | \"inherit\" | \"small\"",
-          "references": {
-            "StzhLinkSize": {
-              "location": "import",
-              "path": "../../index",
-              "id": "src/index.ts::StzhLinkSize"
-            }
-          }
+          "original": "\"default\" | \"auto\"",
+          "resolved": "\"auto\" | \"default\"",
+          "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Size variant"
+          "text": "Height variant (none prevent setting min-height for mikro and small breakpoint)"
         },
-        "attribute": "size",
+        "attribute": "height",
         "reflect": true,
         "defaultValue": "\"default\""
       },
-      "height": {
+      "size": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"default\" | \"auto\"",
-          "resolved": "\"auto\" | \"default\"",
-          "references": {}
+          "original": "StzhLinkSize",
+          "resolved": "\"default\" | \"inherit\" | \"small\"",
+          "references": {
+            "StzhLinkSize": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhLinkSize"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Height variant (none prevent setting min-height for mikro and small breakpoint)"
+          "text": "Size variant"
         },
-        "attribute": "height",
+        "attribute": "size",
         "reflect": true,
         "defaultValue": "\"default\""
       },

package/dist/collection/components/stzh-link/stzh-link.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-link.js","sourceRoot":"","sources":["../../../../src/components/stzh-link/stzh-link.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n Fragment,\n Element,\n h,\n Prop,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhLinkFocusEvent,\n StzhLinkBlurEvent,\n StzhLinkSize,\n StzhBadgeType\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/*\n @slot - Slot for text content\n * @slot icon - Slot for icon element\n /\n@Component({\n tag: \"stzh-link\",\n styleUrl: \"stzh-link.scss\",\n scoped: true\n})\nexport class StzhLink {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Icon (use instead of icon slot) /\n @Prop() icon: string = \"\";\n\n /* Icon Position /\n @Prop({ reflect: true }) iconPosition: \"left\" \| \"right\" = \"left\";\n\n /* Size variant /\n @Prop({ reflect: true }) size: StzhLinkSize = \"default\";\n\n /* Height variant (none prevent setting min-height for mikro and small breakpoint) /\n @Prop({ reflect: true }) height: \"default\" \| \"auto\" = \"default\";\n\n /* Size variant (abobe small breakpoint) /\n @Prop({ reflect: true }) sizeSmall: StzhLinkSize;\n\n /* Size variant (abobe medium breakpoint) /\n @Prop({ reflect: true }) sizeMedium: StzhLinkSize;\n\n /* Size variant (abobe large breakpoint) /\n @Prop({ reflect: true }) sizeLarge: StzhLinkSize;\n\n /* Size variant (abobe ultra breakpoint) /\n @Prop({ reflect: true }) sizeUltra: StzhLinkSize;\n\n /* href attribute of the link /\n @Prop() href: string = \"\";\n\n /* Rel (if href is used) /\n @Prop() rel: string;\n\n /* target if the button is used as link (if href used) /\n @Prop() target: string = \"\";\n\n /* Download attribute of link (if `href` used) /\n @Prop() download: string;\n\n /* type of the button, if used as button (if no href used) /\n @Prop() type: \"button\" \| \"submit\" \| \"reset\" = \"button\";\n\n /* Variant style /\n @Prop({ reflect: true }) variant: \"default\" \| \"secondary\" \| \"back\" = \"default\";\n\n /* Whether the link is full width /\n @Prop({ reflect: true }) fullwidth: boolean = false;\n\n /* Text alignment /\n @Prop({ reflect: true }) textAlign: \"left\" \| \"center\" \| \"right\" \| \"space-between\" \| \"default\" = \"default\";\n\n /* Badge text /\n @Prop() badge: string = \"\";\n\n /* Badge type /\n @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n /* Whether badge should be displayed empty /\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n /* Badge position /\n @Prop({ reflect: true }) badgePosition: \"icon\" \| \"link\" = \"icon\";\n\n /* Disabled status /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Active status /\n @Prop({ reflect: true }) active: boolean = false;\n\n /* Whether only an icon is used inside the link /\n @Prop({ reflect: true }) iconOnly: boolean = false;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Access key of link (usually a number e.g. 1) /\n @Prop() linkAccesskey: string;\n\n /* ID of link element /\n @Prop() linkId: string;\n\n /* Accessible label for screen readers to replace visible text /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /* Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Aria expanded of link/button /\n @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n /* Aria disabled of link/button /\n @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n /* Aria controls of link/button /\n @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n /* Tabindex of link/button /\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /* Aria current of link/button /\n @Prop({ attribute: \"a11y-current\" }) a11yCurrent: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhLinkElement;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhLinkFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhLinkBlurEvent>;\n\n private link: HTMLButtonElement \| HTMLAnchorElement;\n private text: HTMLDivElement;\n private focusedByInput: boolean = false;\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.link.focus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-link\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-link\",\n originalEvent: event\n });\n }\n\n private renderIcon(): HTMLInputElement {\n return (\n <div class=\"stzh-link__icon-wrapper\">\n {this.icon ?\n <stzh-icon class=\"stzh-link__icon\" name={this.icon}></stzh-icon>\n :\n <slot name=\"icon\"></slot>\n }\n {(this.badge \|\| this.badgeEmpty) &&\n <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div class=\"stzh-link__text\">\n {this.rel && this.rel.includes('external') && <div class=\"stzh-link__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-link__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n <div ref={(el) => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\n </div>\n );\n }\n\n private renderInner(iconUsed: boolean): DocumentFragment {\n return (\n <Fragment>\n <div class=\"stzh-link__inner\">\n {this.iconPosition === \"left\" && this.renderIcon()}\n {this.renderContent()}\n {this.iconPosition === \"right\" && this.renderIcon()}\n </div>\n {(this.badge \|\| this.badgeEmpty) && !iconUsed &&\n <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </Fragment>\n );\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"link\");\n }\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.link?.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n });\n }\n\n render() {\n const iconUsed = hasSlot(this.element, \"icon\") \|\| !!this.icon;\n const classes = {\n \"stzh-link\": true,\n \"stzh-link--has-icon\": iconUsed,\n \"stzh-link--has-icon-only\": this.iconOnly,\n \"stzh-link--has-badge\": !!this.badge,\n \"stzh-link--is-fullwidth\": this.fullwidth,\n \"stzh-link--is-disabled\": this.disabled,\n \"stzh-link--is-active\": this.active,\n [`stzh-link--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n [`stzh-link--align-${this.textAlign}`]: !!this.textAlign,\n [`stzh-link--${this.variant}`]: !!this.variant,\n };\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n {this.href ?\n <a\n ref={(el) => (this.link = el as HTMLAnchorElement)}\n href={this.disabled ? null : this.href}\n download={this.download}\n rel={this.rel}\n target={this.target}\n class={classes}\n id={this.linkId}\n accessKey={this.linkAccesskey}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner(iconUsed)}\n </a>\n :\n <button\n ref={(el) => (this.link = el as HTMLButtonElement)}\n class={classes}\n type={this.type}\n disabled={this.disabled}\n id={this.linkId}\n accessKey={this.linkAccesskey}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner(iconUsed)}\n </button>\n }\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"stzh-link.js","sourceRoot":"","sources":["../../../../src/components/stzh-link/stzh-link.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n Fragment,\n Element,\n h,\n Prop,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhLinkFocusEvent,\n StzhLinkBlurEvent,\n StzhLinkSize,\n StzhBadgeType\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/*\n @slot - Slot for text content\n * @slot icon - Slot for icon element\n /\n@Component({\n tag: \"stzh-link\",\n styleUrl: \"stzh-link.scss\",\n scoped: true\n})\nexport class StzhLink {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Icon (use instead of icon slot) /\n @Prop() icon: string = \"\";\n\n /* Icon Position /\n @Prop({ reflect: true }) iconPosition: \"left\" \| \"right\" = \"left\";\n\n /* Height variant (none prevent setting min-height for mikro and small breakpoint) /\n @Prop({ reflect: true }) height: \"default\" \| \"auto\" = \"default\";\n\n /* Size variant /\n @Prop({ reflect: true }) size: StzhLinkSize = \"default\";\n\n /* Size variant (abobe small breakpoint) /\n @Prop({ reflect: true }) sizeSmall: StzhLinkSize;\n\n /* Size variant (abobe medium breakpoint) /\n @Prop({ reflect: true }) sizeMedium: StzhLinkSize;\n\n /* Size variant (abobe large breakpoint) /\n @Prop({ reflect: true }) sizeLarge: StzhLinkSize;\n\n /* Size variant (abobe ultra breakpoint) /\n @Prop({ reflect: true }) sizeUltra: StzhLinkSize;\n\n /* href attribute of the link /\n @Prop() href: string = \"\";\n\n /* Rel (if href is used) /\n @Prop() rel: string;\n\n /* target if the button is used as link (if href used) /\n @Prop() target: string = \"\";\n\n /* Download attribute of link (if `href` used) /\n @Prop() download: string;\n\n /* type of the button, if used as button (if no href used) /\n @Prop() type: \"button\" \| \"submit\" \| \"reset\" = \"button\";\n\n /* Variant style /\n @Prop({ reflect: true }) variant: \"default\" \| \"secondary\" \| \"back\" = \"default\";\n\n /* Whether the link is full width /\n @Prop({ reflect: true }) fullwidth: boolean = false;\n\n /* Text alignment /\n @Prop({ reflect: true }) textAlign: \"left\" \| \"center\" \| \"right\" \| \"space-between\" \| \"default\" = \"default\";\n\n /* Badge text /\n @Prop() badge: string = \"\";\n\n /* Badge type /\n @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n /* Whether badge should be displayed empty /\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n /* Badge position /\n @Prop({ reflect: true }) badgePosition: \"icon\" \| \"link\" = \"icon\";\n\n /* Disabled status /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Active status /\n @Prop({ reflect: true }) active: boolean = false;\n\n /* Whether only an icon is used inside the link /\n @Prop({ reflect: true }) iconOnly: boolean = false;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Access key of link (usually a number e.g. 1) /\n @Prop() linkAccesskey: string;\n\n /* ID of link element /\n @Prop() linkId: string;\n\n /* Accessible label for screen readers to replace visible text /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /* Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Aria expanded of link/button /\n @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n /* Aria disabled of link/button /\n @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n /* Aria controls of link/button /\n @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n /* Tabindex of link/button /\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /* Aria current of link/button /\n @Prop({ attribute: \"a11y-current\" }) a11yCurrent: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhLinkElement;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhLinkFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhLinkBlurEvent>;\n\n private link: HTMLButtonElement \| HTMLAnchorElement;\n private text: HTMLDivElement;\n private focusedByInput: boolean = false;\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.link.focus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-link\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-link\",\n originalEvent: event\n });\n }\n\n private renderIcon(): HTMLInputElement {\n return (\n <div class=\"stzh-link__icon-wrapper\">\n {this.icon ?\n <stzh-icon class=\"stzh-link__icon\" name={this.icon}></stzh-icon>\n :\n <slot name=\"icon\"></slot>\n }\n {(this.badge \|\| this.badgeEmpty) &&\n <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div class=\"stzh-link__text\">\n {this.rel && this.rel.includes('external') && <div class=\"stzh-link__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-link__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n <div ref={(el) => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\n </div>\n );\n }\n\n private renderInner(iconUsed: boolean): DocumentFragment {\n return (\n <Fragment>\n <div class=\"stzh-link__inner\">\n {this.iconPosition === \"left\" && this.renderIcon()}\n {this.renderContent()}\n {this.iconPosition === \"right\" && this.renderIcon()}\n </div>\n {(this.badge \|\| this.badgeEmpty) && !iconUsed &&\n <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </Fragment>\n );\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"link\");\n }\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.link?.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n });\n }\n\n render() {\n const iconUsed = hasSlot(this.element, \"icon\") \|\| !!this.icon;\n const classes = {\n \"stzh-link\": true,\n \"stzh-link--has-icon\": iconUsed,\n \"stzh-link--has-icon-only\": this.iconOnly,\n \"stzh-link--has-badge\": !!this.badge,\n \"stzh-link--is-fullwidth\": this.fullwidth,\n \"stzh-link--is-disabled\": this.disabled,\n \"stzh-link--is-active\": this.active,\n [`stzh-link--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n [`stzh-link--align-${this.textAlign}`]: !!this.textAlign,\n [`stzh-link--${this.variant}`]: !!this.variant,\n };\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n {this.href ?\n <a\n ref={(el) => (this.link = el as HTMLAnchorElement)}\n href={this.disabled ? null : this.href}\n download={this.download}\n rel={this.rel}\n target={this.target}\n class={classes}\n id={this.linkId}\n accessKey={this.linkAccesskey}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner(iconUsed)}\n </a>\n :\n <button\n ref={(el) => (this.link = el as HTMLButtonElement)}\n class={classes}\n type={this.type}\n disabled={this.disabled}\n id={this.linkId}\n accessKey={this.linkAccesskey}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner(iconUsed)}\n </button>\n }\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/stzh-search/stzh-search.css CHANGED Viewed

@@ -327,6 +327,58 @@ stzh-search[has-aside-filters] {
     padding: 0;
   }
 }
+.stzh-search__filters-aside-heading {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: var(--stzh-font-style-heavy);
+  font-size: var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));
+  line-height: var(--stzh-font-curve-h4-default-text-line-height, var(--stzh-font-milli-text-line-height));
+  letter-spacing: var(--stzh-font-curve-h4-default-text-letter-spacing);
+  padding-bottom: var(--stzh-space-xsmall);
+  color: var(--stzh-color-primary70);
+  display: none;
+}
+@media screen and (min-width: 600px) {
+  .stzh-search__filters-aside-heading {
+    font-size: var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));
+    line-height: var(--stzh-font-curve-h4-small-text-line-height, var(--stzh-font-centi-text-line-height));
+    letter-spacing: var(--stzh-font-curve-h4-small-text-letter-spacing);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-search__filters-aside-heading {
+    font-size: var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));
+    line-height: var(--stzh-font-curve-h4-large-text-line-height, var(--stzh-font-deci-text-line-height));
+    letter-spacing: var(--stzh-font-curve-h4-large-text-letter-spacing);
+  }
+}
+@media screen and (min-width: 1600px) {
+  .stzh-search__filters-aside-heading {
+    font-size: var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));
+    line-height: var(--stzh-font-curve-h4-ultra-text-line-height, var(--stzh-font-deca-text-line-height));
+    letter-spacing: var(--stzh-font-curve-h4-ultra-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing));
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-search__filters-aside-heading {
+    padding-bottom: var(--stzh-space-small);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-search__filters-aside-heading {
+    padding-bottom: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-search__filters-aside-heading {
+    display: block;
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-search stzh-button.stzh-search__filters-aside-details-trigger {
+    display: none;
+  }
+}
 @media screen and (min-width: 1260px) {
   .stzh-search__filters-aside-inner {
     position: -webkit-sticky;
@@ -387,6 +439,24 @@ stzh-search[has-aside-filters] {
     margin-top: var(--stzh-space-xxxlarge);
   }
 }
+.stzh-search__empty-text {
+  margin-bottom: var(--stzh-space-medium);
+}
+@media screen and (min-width: 600px) {
+  .stzh-search__empty-text {
+    margin-bottom: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-search__empty-text {
+    margin-bottom: var(--stzh-space-xlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-search__empty-text {
+    margin-bottom: var(--stzh-space-xxlarge);
+  }
+}
 .stzh-search__loader {
   margin-top: var(--stzh-space-xlarge);
 }

package/dist/collection/components/stzh-search/stzh-search.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { Host, h, Fragment } from "@stencil/core";
 import axios from "axios";
 import { hasSlot, raf } from "../../utils/utils";
+import { media, addMediaChangeListener, removeMediaChangeListener } from "../../utils/media-utils";
 import debounce from "lodash/debounce";
 function defaultTemplateResult(search, item) {
   if (search.variant === "teaser") {
@@ -140,6 +141,9 @@ export class StzhSearch {
     this.handleMoreClick = () => {
       this.fetch(true);
     };
+    this.handleMediaChange = () => {
+      this.isDetailsOpen = media("large").matches;
+    };
     this.handleFormReset = async () => {
       requestAnimationFrame(() => {
         requestAnimationFrame(async () => {
@@ -162,6 +166,9 @@ export class StzhSearch {
     };
     this.templateResultWrapperProps = defaultResultWrapperProps;
     this.resultHeadingLevel = "3";
+    this.emptyText = undefined;
+    this.emptyLinkHref = undefined;
+    this.emptyLinkLabel = undefined;
     this.totalCount = 0;
     this.loading = false;
     this.results = [];
@@ -169,6 +176,7 @@ export class StzhSearch {
     this.hasRequiredParams = false;
     this.firstFetched = false;
     this.initiallyFetched = false;
+    this.isDetailsOpen = false;
   }
   totalCountWatcher() {
     this._showMoreLink = this.totalCount > this.results.length;
@@ -316,6 +324,13 @@ export class StzhSearch {
       this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "search");
     }
   }
+  connectedCallback() {
+    addMediaChangeListener(this.handleMediaChange);
+    this.handleMediaChange();
+  }
+  disconnectedCallback() {
+    removeMediaChangeListener(this.handleMediaChange);
+  }
   render() {
     const filtersMainUsed = hasSlot(this.element, 'filters-main');
     const filtersAsideUsed = hasSlot(this.element, 'filters-aside');
@@ -335,11 +350,13 @@ export class StzhSearch {
       ? this.templateResultWrapperProps(this.element)
       : this.templateResultWrapperProps;
     return (h(Host, { "has-aside-filters": filtersAsideUsed }, h("form", { ref: (el) => (this.formElement = el), novalidate: true, class: classes, onSubmit: this.handleFormSubmit, onReset: this.handleFormReset }, h("div", { class: "stzh-search__filters-main", onStzhChange: this.handleMainFilterChange }, h("slot", { name: "filters-main" })), filtersAsideUsed &&
-      h(Fragment, null, h("div", { class: "stzh-search__filters-aside", onStzhChange: this.handleAsideFilterChange }, h("div", { class: "stzh-search__filters-aside-inner" }, h("stzh-details", null, h("stzh-button", { variant: "tertiary-plain", size: "small", noPaddingLeft: true, showToggleIcon: true, iconPosition: "right", label: this.localization.moreFilter }), h("div", { slot: "content" }, h("slot", { name: "filters-aside" })))))), h("div", { class: "stzh-search__results-wrapper" }, resultsShown &&
+      h(Fragment, null, h("div", { class: "stzh-search__filters-aside", onStzhChange: this.handleAsideFilterChange }, h("div", { class: "stzh-search__filters-aside-inner" }, h("div", { class: "stzh-search__filters-aside-heading" }, this.localization.moreFilter), h("stzh-details", { open: this.isDetailsOpen, class: "stzh-search__filters-aside-details" }, 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 }), h("div", { slot: "content" }, h("slot", { name: "filters-aside" })))))), h("div", { class: "stzh-search__results-wrapper" }, resultsShown &&
       h(Fragment, null, this.results.length === 0
         ?
           h(Fragment, null, this.variant !== "teaser" && this.resultsHeading &&
-            h("stzh-heading", { class: "stzh-search__results-heading", curve: "h3", level: this.resultHeadingLevel }, this.resultsHeading || this.localization.noResults))
+            h("stzh-heading", { class: "stzh-search__results-heading", curve: "h3", level: this.resultHeadingLevel }, this.resultsHeading || this.localization.noResults), this.emptyText &&
+            h("stzh-text", { class: "stzh-search__empty-text" }, this.emptyText), this.emptyLinkLabel && this.emptyLinkHref &&
+            h("div", { class: "stzh-search__empty-link-wrapper" }, h("stzh-link", { href: this.emptyLinkHref, label: this.emptyLinkLabel })))
         :
           h(Fragment, null, this.variant !== "teaser" && this.resultsHeading &&
             h("stzh-heading", { class: "stzh-search__results-heading", curve: "h3", level: this.resultHeadingLevel }, this.resultsHeading), h(WrapperElement, Object.assign({ class: "stzh-search__results" }, wrapperProps), this.results.map((result) => h("div", { class: "stzh-search__results-item", innerHTML: result.html || "" }))), h("div", { class: "stzh-search__actions-wrapper" }, this._showMoreLink &&
@@ -612,6 +629,57 @@ export class StzhSearch {
         "attribute": "result-heading-level",
         "reflect": false,
         "defaultValue": "\"3\""
+      },
+      "emptyText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Empty text"
+        },
+        "attribute": "empty-text",
+        "reflect": false
+      },
+      "emptyLinkHref": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Empty link href"
+        },
+        "attribute": "empty-link-href",
+        "reflect": false
+      },
+      "emptyLinkLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Empty link label"
+        },
+        "attribute": "empty-link-label",
+        "reflect": false
       }
     };
   }
@@ -623,7 +691,8 @@ export class StzhSearch {
       "resultsHeading": {},
       "hasRequiredParams": {},
       "firstFetched": {},
-      "initiallyFetched": {}
+      "initiallyFetched": {},
+      "isDetailsOpen": {}
     };
   }
   static get elementRef() { return "element"; }