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

package/dist/collection/components/stzh-header/stzh-header.stories.js

@@ -113,6 +113,7 @@ export default {
     actions: {
       handles: [
         'stzhMetanavItemClick',
+        'stzhMenuItemClick',
         'stzhLanguageChange',
         'stzhSearchChange',
         'stzhSearchChanged'

package/dist/collection/components/stzh-heading/stzh-heading.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */
@@ -166,6 +169,28 @@
   --color: var(--stzh-heading-color);
   color: var(--color);
 }
+:host ::slotted(a),
+:host ::slotted(* a) {
+  color: var(--stzh-link-color);
+  transition: color var(--stzh-base-transition-animation-speed);
+  border-radius: var(--stzh-button-border-radius);
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  -webkit-text-decoration-line: var(--stzh-link-text-decoration-line);
+          text-decoration-line: var(--stzh-link-text-decoration-line);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
+  -webkit-text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);
+          text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);
+}
+:host ::slotted(a):hover,
+:host ::slotted(* a):hover {
+  color: var(--stzh-link-hover-color);
+  -webkit-text-decoration-line: var(--stzh-link-hover-text-decoration-line);
+          text-decoration-line: var(--stzh-link-hover-text-decoration-line);
+}
+:host ::slotted(a):hover,
+:host ::slotted(* a):hover {
+  color: var(--stzh-link-hover-color);
+}
 
 .stzh-heading {
   font-family: var(--stzh-font-family-title);

package/dist/collection/components/stzh-hr/stzh-hr.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-hspace/stzh-hspace.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-icon/stzh-icon.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-iframe/stzh-iframe.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-iframe/stzh-iframe.js

@@ -51,6 +51,14 @@ export class StzhIframe {
       });
     };
     this.localization = undefined;
+    this.iframeId = undefined;
+    this.iframeErrorText = undefined;
+    this.name = undefined;
+    this.sandbox = undefined;
+    this.referrerpolicy = undefined;
+    this.allow = "autoplay; fullscreen";
+    this.width = undefined;
+    this.height = undefined;
     this.src = "";
     this.cookie = undefined;
     this.cookieExpires = 365;
@@ -77,7 +85,7 @@ export class StzhIframe {
     }
   }
   async componentWillLoad() {
-    this.iframeId = `stzh-iframe-${iframeCounter++}`;
+    this.internalId = `stzh-iframe-${iframeCounter++}`;
     const cookieAccepted = Cookies.get(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`) || false;
     if (((!this.cookie || cookieAccepted) && (this.skipPreviewIfCookieAccepted || this.skipPreview))
       || (!this.cookie && this.skipPreview)) {
@@ -114,7 +122,7 @@ export class StzhIframe {
       "stzh-iframe": true,
     };
     return (h(Host, null, h("div", { class: classes }, this.view === "iframe" &&
-      h("iframe", { ref: (el) => (this.iframeElement = el), class: "stzh-iframe__iframe", src: this._src, allow: "autoplay; fullscreen", onLoad: this.handleIframeLoad }), h("button", { ref: (el) => (this.previewButtonElement = el), onClick: this.handlePreviewClick, "aria-label": this.previewLabel || this.localization.defaultPreviewLabel,
+      h("iframe", { id: this.iframeId, name: this.name, sandbox: this.sandbox, referrerPolicy: this.referrerpolicy, width: this.width, height: this.height, ref: (el) => (this.iframeElement = el), class: "stzh-iframe__iframe", src: this._src, allow: this.allow, onLoad: this.handleIframeLoad }, this.iframeErrorText), h("button", { ref: (el) => (this.previewButtonElement = el), onClick: this.handlePreviewClick, "aria-label": this.previewLabel || this.localization.defaultPreviewLabel,
       // disabled={this.view === "cookiewall"}
       class: {
         "stzh-iframe__preview": true,
@@ -127,7 +135,7 @@ export class StzhIframe {
       h("div", { class: {
           "stzh-iframe__cookiewall": true,
           "is-visible": this.view === "cookiewall"
-        } }, h("div", { class: "stzh-iframe__cookiewall-content" }, h("div", { class: "stzh-iframe__cookiewall-text", id: `${this.iframeId}-cookiewall-text` }, this.cookieConfirmText ? this.cookieConfirmText : h("slot", { name: "cookiewall-text" })), h("stzh-button", { ref: (el) => (this.confirmButtonElement = el), class: "stzh-iframe__cookiewall-button", size: "small", a11yDescribedby: `${this.iframeId}-cookiewall-text`, icon: this.cookieConfirmIcon, label: this.cookieConfirmLabel || this.localization.defaultConfirmLabel, onClick: this.handleCookiewallConfirmClick })), !this.skipPreview &&
+        } }, h("div", { class: "stzh-iframe__cookiewall-content" }, h("div", { class: "stzh-iframe__cookiewall-text", id: `${this.internalId}-cookiewall-text` }, this.cookieConfirmText ? this.cookieConfirmText : h("slot", { name: "cookiewall-text" })), h("stzh-button", { ref: (el) => (this.confirmButtonElement = el), class: "stzh-iframe__cookiewall-button", size: "small", a11yDescribedby: `${this.internalId}-cookiewall-text`, icon: this.cookieConfirmIcon, label: this.cookieConfirmLabel || this.localization.defaultConfirmLabel, onClick: this.handleCookiewallConfirmClick })), !this.skipPreview &&
         h("button", { class: "stzh-iframe__cookiewall-close", onClick: this.handleCookiewallCloseClick, "aria-label": this.localization.confirmCloseLabel }, h("stzh-icon", { class: "stzh-iframe__cookiewall-close-icon", name: "close" }))))));
   }
   static get is() { return "stzh-iframe"; }
@@ -165,6 +173,155 @@ export class StzhIframe {
           "text": "Translation strings"
         }
       },
+      "iframeId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Id of iframe"
+        },
+        "attribute": "iframe-id",
+        "reflect": false
+      },
+      "iframeErrorText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Error text of iframe if couldn't be loaded"
+        },
+        "attribute": "iframe-error-text",
+        "reflect": false
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "see",
+              "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#name"
+            }],
+          "text": "Name of iframe"
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "sandbox": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "see",
+              "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#sandbox"
+            }],
+          "text": "Sandbox of iframe"
+        },
+        "attribute": "sandbox",
+        "reflect": false
+      },
+      "referrerpolicy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"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\"",
+          "resolved": "\"no-referrer\" | \"no-referrer-when-downgrade\" | \"origin\" | \"origin-when-cross-origin\" | \"same-origin\" | \"strict-origin\" | \"strict-origin-when-cross-origin\" | \"unsafe-url\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "see",
+              "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#referrerpolicy"
+            }],
+          "text": "ReferrerPolicy of Iframe"
+        },
+        "attribute": "referrerpolicy",
+        "reflect": false
+      },
+      "allow": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "see",
+              "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#allow"
+            }],
+          "text": "Allow of Iframe"
+        },
+        "attribute": "allow",
+        "reflect": false,
+        "defaultValue": "\"autoplay; fullscreen\""
+      },
+      "width": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Width of iframe"
+        },
+        "attribute": "width",
+        "reflect": false
+      },
+      "height": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Width of iframe"
+        },
+        "attribute": "height",
+        "reflect": false
+      },
       "src": {
         "type": "string",
         "mutable": false,

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

@@ -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"]}
+{"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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */
@@ -158,7 +161,7 @@
 
 :host {
   --exposure: 50%;
-  --divider-width: 0.1875rem;
+  --divider-width: 0.125rem;
 }
 :host ::slotted(*) {
   position: absolute;
@@ -198,17 +201,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 +223,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 +234,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

@@ -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

@@ -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"]}
+{"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-input/stzh-input.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-invert/stzh-invert.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-link/stzh-link.css

@@ -3,7 +3,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -28,6 +28,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */