@oiz/stzh-components 3.0.0 → 3.1.0

package/dist/collection/components/stzh-skin-storybook-preview/stzh-skin-storybook-preview.css

@@ -82,6 +82,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */

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

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */

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

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */

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

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */
@@ -245,6 +248,15 @@
   }
 }
 
+:host([curve=intermediary]) {
+  --space: var(--stzh-space-medium);
+}
+@media screen and (min-width: 900px) {
+  :host([curve=intermediary]) {
+    --space: var(--stzh-space-large);
+  }
+}
+
 :host([curve=regular]) {
   --space: var(--stzh-space-medium);
 }

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

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */

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

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */

package/dist/collection/components/stzh-sticky-actions/stzh-sticky-actions.css

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */

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

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */

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

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */

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

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */
@@ -557,6 +560,39 @@
     letter-spacing: var(--stzh-font-curve-hero-ultra-text-letter-spacing, var(--stzh-font-hero-text-letter-spacing));
   }
 }
+.stzh-text--curve-h1home {
+  font-size: var(--stzh-font-curve-h1home-default-font-size, var(--stzh-font-mega-font-size));
+  line-height: var(--stzh-font-curve-h1home-default-text-line-height, var(--stzh-font-mega-text-line-height));
+  letter-spacing: var(--stzh-font-curve-h1home-default-text-letter-spacing, var(--stzh-font-mega-text-letter-spacing));
+}
+@media screen and (min-width: 600px) {
+  .stzh-text--curve-h1home {
+    font-size: var(--stzh-font-curve-h1home-small-font-size, var(--stzh-font-giga-font-size));
+    line-height: var(--stzh-font-curve-h1home-small-text-line-height, var(--stzh-font-giga-text-line-height));
+    letter-spacing: var(--stzh-font-curve-h1home-small-text-letter-spacing, var(--stzh-font-giga-text-letter-spacing));
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-text--curve-h1home {
+    font-size: var(--stzh-font-curve-h1home-medium-font-size, var(--stzh-font-peta-font-size));
+    line-height: var(--stzh-font-curve-h1home-medium-text-line-height, var(--stzh-font-peta-text-line-height));
+    letter-spacing: var(--stzh-font-curve-h1home-medium-text-letter-spacing, var(--stzh-font-peta-text-letter-spacing));
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-text--curve-h1home {
+    font-size: var(--stzh-font-curve-h1home-large-font-size, var(--stzh-font-exa-font-size));
+    line-height: var(--stzh-font-curve-h1home-large-text-line-height, var(--stzh-font-exa-text-line-height));
+    letter-spacing: var(--stzh-font-curve-h1home-large-text-letter-spacing, var(--stzh-font-exa-text-letter-spacing));
+  }
+}
+@media screen and (min-width: 1600px) {
+  .stzh-text--curve-h1home {
+    font-size: var(--stzh-font-curve-h1home-ultra-font-size, var(--stzh-font-zetta-font-size));
+    line-height: var(--stzh-font-curve-h1home-ultra-text-line-height, var(--stzh-font-zetta-text-line-height));
+    letter-spacing: var(--stzh-font-curve-h1home-ultra-text-letter-spacing, var(--stzh-font-zetta-text-letter-spacing));
+  }
+}
 .stzh-text--size-femto {
   font-size: var(--stzh-font-femto-font-size);
   line-height: var(--stzh-font-femto-text-line-height);
@@ -624,6 +660,21 @@
   line-height: var(--stzh-font-hero-text-line-height);
   letter-spacing: var(--stzh-font-hero-text-letter-spacing);
 }
+.stzh-text--size-peta {
+  font-size: var(--stzh-font-peta-font-size);
+  line-height: var(--stzh-font-peta-text-line-height);
+  letter-spacing: var(--stzh-font-peta-text-letter-spacing);
+}
+.stzh-text--size-exa {
+  font-size: var(--stzh-font-exa-font-size);
+  line-height: var(--stzh-font-exa-text-line-height);
+  letter-spacing: var(--stzh-font-exa-text-letter-spacing);
+}
+.stzh-text--size-zetta {
+  font-size: var(--stzh-font-zetta-font-size);
+  line-height: var(--stzh-font-zetta-text-line-height);
+  letter-spacing: var(--stzh-font-zetta-text-letter-spacing);
+}
 @media screen and (min-width: 600px) {
   .stzh-text--size-small-femto {
     font-size: var(--stzh-font-femto-font-size);
@@ -719,6 +770,27 @@
     letter-spacing: var(--stzh-font-hero-text-letter-spacing);
   }
 }
+@media screen and (min-width: 600px) {
+  .stzh-text--size-small-peta {
+    font-size: var(--stzh-font-peta-font-size);
+    line-height: var(--stzh-font-peta-text-line-height);
+    letter-spacing: var(--stzh-font-peta-text-letter-spacing);
+  }
+}
+@media screen and (min-width: 600px) {
+  .stzh-text--size-small-exa {
+    font-size: var(--stzh-font-exa-font-size);
+    line-height: var(--stzh-font-exa-text-line-height);
+    letter-spacing: var(--stzh-font-exa-text-letter-spacing);
+  }
+}
+@media screen and (min-width: 600px) {
+  .stzh-text--size-small-zetta {
+    font-size: var(--stzh-font-zetta-font-size);
+    line-height: var(--stzh-font-zetta-text-line-height);
+    letter-spacing: var(--stzh-font-zetta-text-letter-spacing);
+  }
+}
 @media screen and (min-width: 900px) {
   .stzh-text--size-medium-femto {
     font-size: var(--stzh-font-femto-font-size);
@@ -814,6 +886,27 @@
     letter-spacing: var(--stzh-font-hero-text-letter-spacing);
   }
 }
+@media screen and (min-width: 900px) {
+  .stzh-text--size-medium-peta {
+    font-size: var(--stzh-font-peta-font-size);
+    line-height: var(--stzh-font-peta-text-line-height);
+    letter-spacing: var(--stzh-font-peta-text-letter-spacing);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-text--size-medium-exa {
+    font-size: var(--stzh-font-exa-font-size);
+    line-height: var(--stzh-font-exa-text-line-height);
+    letter-spacing: var(--stzh-font-exa-text-letter-spacing);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-text--size-medium-zetta {
+    font-size: var(--stzh-font-zetta-font-size);
+    line-height: var(--stzh-font-zetta-text-line-height);
+    letter-spacing: var(--stzh-font-zetta-text-letter-spacing);
+  }
+}
 @media screen and (min-width: 1260px) {
   .stzh-text--size-large-femto {
     font-size: var(--stzh-font-femto-font-size);
@@ -909,6 +1002,27 @@
     letter-spacing: var(--stzh-font-hero-text-letter-spacing);
   }
 }
+@media screen and (min-width: 1260px) {
+  .stzh-text--size-large-peta {
+    font-size: var(--stzh-font-peta-font-size);
+    line-height: var(--stzh-font-peta-text-line-height);
+    letter-spacing: var(--stzh-font-peta-text-letter-spacing);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-text--size-large-exa {
+    font-size: var(--stzh-font-exa-font-size);
+    line-height: var(--stzh-font-exa-text-line-height);
+    letter-spacing: var(--stzh-font-exa-text-letter-spacing);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-text--size-large-zetta {
+    font-size: var(--stzh-font-zetta-font-size);
+    line-height: var(--stzh-font-zetta-text-line-height);
+    letter-spacing: var(--stzh-font-zetta-text-letter-spacing);
+  }
+}
 @media screen and (min-width: 1600px) {
   .stzh-text--size-ultra-femto {
     font-size: var(--stzh-font-femto-font-size);
@@ -1003,4 +1117,25 @@
     line-height: var(--stzh-font-hero-text-line-height);
     letter-spacing: var(--stzh-font-hero-text-letter-spacing);
   }
+}
+@media screen and (min-width: 1600px) {
+  .stzh-text--size-ultra-peta {
+    font-size: var(--stzh-font-peta-font-size);
+    line-height: var(--stzh-font-peta-text-line-height);
+    letter-spacing: var(--stzh-font-peta-text-letter-spacing);
+  }
+}
+@media screen and (min-width: 1600px) {
+  .stzh-text--size-ultra-exa {
+    font-size: var(--stzh-font-exa-font-size);
+    line-height: var(--stzh-font-exa-text-line-height);
+    letter-spacing: var(--stzh-font-exa-text-letter-spacing);
+  }
+}
+@media screen and (min-width: 1600px) {
+  .stzh-text--size-ultra-zetta {
+    font-size: var(--stzh-font-zetta-font-size);
+    line-height: var(--stzh-font-zetta-text-line-height);
+    letter-spacing: var(--stzh-font-zetta-text-letter-spacing);
+  }
 }

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

@@ -71,7 +71,7 @@ export class StzhText {
         "mutable": false,
         "complexType": {
           "original": "Font.Curves",
-          "resolved": "\"caption\" | \"default\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"hero\" | \"lead\" | \"none\" | \"p1\" | \"p2\"",
+          "resolved": "\"caption\" | \"default\" | \"h1\" | \"h1home\" | \"h2\" | \"h3\" | \"h4\" | \"hero\" | \"lead\" | \"none\" | \"p1\" | \"p2\"",
           "references": {
             "Font": {
               "location": "import",

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

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */
@@ -162,13 +165,12 @@
 :host {
   --row-gap: var(--stzh-space-medium);
   --grid-template-areas: var(
-    --stzh-textandimage-grid-template-areas,
-    "text text text text"
-    "image image image image"
+      --stzh-textandimage-grid-template-areas,
+      "text text text text" "image image image image"
   );
   --grid-template-columns: var(
-    --stzh-textandimage-grid-template-columns,
-    repeat(4, minmax(0, 1fr))
+      --stzh-textandimage-grid-template-columns,
+      repeat(4, minmax(0, 1fr))
   );
 }
 @media screen and (min-width: 600px) {
@@ -189,29 +191,59 @@
 @media screen and (min-width: 600px) {
   :host {
     --grid-template-areas: var(
-      --stzh-textandimage-grid-template-areas,
-      "text text text text"
-      "image image image ."
+        --stzh-textandimage-grid-template-areas,
+        "text text text text" "image image image ."
     );
   }
 }
 @media screen and (min-width: 900px) {
   :host {
     --grid-template-areas: var(
-      --stzh-textandimage-grid-template-areas,
-      "text text text image image image image image"
+        --stzh-textandimage-grid-template-areas,
+        "text text text image image image image image"
     );
     --grid-template-columns: var(
-      --stzh-textandimage-grid-template-columns,
-      repeat(8, minmax(0, 1fr))
+        --stzh-textandimage-grid-template-columns,
+        repeat(8, minmax(0, 1fr))
     );
   }
 }
 @media screen and (min-width: 1260px) {
   :host {
     --grid-template-areas: var(
-      --stzh-textandimage-grid-template-areas,
-      "text text text text image image image image"
+        --stzh-textandimage-grid-template-areas,
+        "text text text text image image image image"
+    );
+  }
+}
+
+:host([image-position=left]) {
+  --grid-template-areas: var(
+      --stzh-textandimage-grid-template-areas-image-left,
+      "text text text text" "image image image image"
+  );
+}
+@media screen and (min-width: 600px) {
+  :host([image-position=left]) {
+    --grid-template-areas: var(
+        --stzh-textandimage-grid-template-areas-image-left,
+        "text text text text" "image image image ."
+    );
+  }
+}
+@media screen and (min-width: 900px) {
+  :host([image-position=left]) {
+    --grid-template-areas: var(
+        --stzh-textandimage-grid-template-areas-image-left,
+        "text text text image image image image image"
+    );
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host([image-position=left]) {
+    --grid-template-areas: var(
+        --stzh-textandimage-grid-template-areas-image-left,
+        "text text text text image image image image"
     );
   }
 }
@@ -219,24 +251,24 @@
 @media screen and (min-width: 600px) {
   :host([size=small]) {
     --grid-template-areas: var(
-      --stzh-textandimage-small-grid-template-areas,
-      "text text image image"
+        --stzh-textandimage-small-grid-template-areas,
+        "text text image image"
     );
   }
 }
 @media screen and (min-width: 900px) {
   :host([size=small]) {
     --grid-template-areas: var(
-      --stzh-textandimage-small-grid-template-areas,
-      "text text text text image image image image"
+        --stzh-textandimage-small-grid-template-areas,
+        "text text text text image image image image"
     );
   }
 }
 @media screen and (min-width: 1260px) {
   :host([size=small]) {
     --grid-template-areas: var(
-      --stzh-textandimage-small-grid-template-areas,
-      "text text text text text image image image"
+        --stzh-textandimage-small-grid-template-areas,
+        "text text text text text image image image"
     );
   }
 }
@@ -244,50 +276,47 @@
 @media screen and (min-width: 600px) {
   :host([size=large]) {
     --grid-template-areas: var(
-      --stzh-textandimage-large-grid-template-areas,
-      "text text text ."
-      "image image image image"
+        --stzh-textandimage-large-grid-template-areas,
+        "text text text ." "image image image image"
     );
   }
 }
 @media screen and (min-width: 900px) {
   :host([size=large]) {
     --grid-template-areas: var(
-      --stzh-textandimage-large-grid-template-areas,
-      "text text text text text . . ."
-      "image image image image image image image image"
+        --stzh-textandimage-large-grid-template-areas,
+        "text text text text text . . ." "image image image image image image image image"
     );
   }
 }
 @media screen and (min-width: 1260px) {
   :host([size=large]) {
     --grid-template-areas: var(
-      --stzh-textandimage-large-grid-template-areas,
-      "text text text text text text . ."
-      "image image image image image image image image"
+        --stzh-textandimage-large-grid-template-areas,
+        "text text text text text text . ." "image image image image image image image image"
     );
   }
 }
 
 :host([single]:not([single=false])) {
   --grid-template-areas: var(
-    --stzh-textandimage-single-grid-template-areas,
-    "text text text text"
+      --stzh-textandimage-single-grid-template-areas,
+      "text text text text"
   );
 }
 @media screen and (min-width: 600px) {
   :host([single]:not([single=false])) {
     --grid-template-areas: var(
-      --stzh-textandimage-single-grid-template-areas,
-      "text text text ."
+        --stzh-textandimage-single-grid-template-areas,
+        "text text text ."
     );
   }
 }
 @media screen and (min-width: 900px) {
   :host([single]:not([single=false])) {
     --grid-template-areas: var(
-      --stzh-textandimage-single-grid-template-areas,
-      "text text text text text text . ."
+        --stzh-textandimage-single-grid-template-areas,
+        "text text text text text text . ."
     );
   }
 }
@@ -300,6 +329,7 @@
   grid-template-areas: var(--grid-template-areas);
   grid-template-columns: var(--grid-template-columns);
   /* Single variant */
+  /* Image position */
 }
 @media screen and (min-width: 600px) {
   .stzh-textandimage {
@@ -339,4 +369,10 @@
 }
 .stzh-textandimage--is-single-right .stzh-textandimage__left {
   display: none;
+}
+.stzh-textandimage--image-position-left .stzh-textandimage__left {
+  grid-area: image;
+}
+.stzh-textandimage--image-position-left .stzh-textandimage__right {
+  grid-area: text;
 }

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

@@ -1,4 +1,4 @@
-import { Host, h, forceUpdate, } from "@stencil/core";
+import { forceUpdate, h, Host } from "@stencil/core";
 import { hasSlot, setPropsIfNull } from "../../utils/utils";
 /**
  * @slot left - Slot for left column content
@@ -12,27 +12,28 @@ export class StzhTextandimage {
       const leftSlotUsed = hasSlot(this.element, "left");
       const rightSlotUsed = hasSlot(this.element, "right");
       if (this.size === "large" || !(leftSlotUsed && rightSlotUsed)) {
-        ratios.forEach((button) => {
+        ratios.forEach(button => {
           setPropsIfNull(button, {
             ratio: "3:2",
-            ratioSmall: "16:9"
+            ratioSmall: "16:9",
           });
         });
       }
-      galleries.forEach((button) => {
+      galleries.forEach(button => {
         setPropsIfNull(button, {
-          variant: "single"
+          variant: "single",
         });
       });
     };
     this.size = "default";
+    this.imagePosition = "right";
   }
   connectedCallback() {
     this.init();
     this.observer = new MutationObserver(this.init);
     this.observer.observe(this.element, {
       childList: true,
-      subtree: true
+      subtree: true,
     });
   }
   disconnectedCallback() {
@@ -50,9 +51,10 @@ export class StzhTextandimage {
       "stzh-textandimage--is-single-right": isSingle && rightSlotUsed,
       "stzh-textandimage--has-left": leftSlotUsed,
       "stzh-textandimage--has-right": rightSlotUsed,
-      [`stzh-textandimage--size-${this.size}`]: !!this.size
+      [`stzh-textandimage--size-${this.size}`]: !!this.size,
+      [`stzh-textandimage--image-position-${this.imagePosition}`]: !!this.imagePosition,
     };
-    return (h(Host, { single: isSingle }, h("div", { class: classes }, h("div", { class: "stzh-textandimage__left" }, h("slot", { name: "left", onSlotchange: () => forceUpdate(this.element) })), h("div", { class: "stzh-textandimage__right" }, h("slot", { name: "right", onSlotchange: () => forceUpdate(this.element) })))));
+    return (h(Host, { single: isSingle, "image-position": this.imagePosition }, h("div", { class: classes }, h("div", { class: "stzh-textandimage__left" }, h("slot", { name: "left", onSlotchange: () => forceUpdate(this.element) })), h("div", { class: "stzh-textandimage__right" }, h("slot", { name: "right", onSlotchange: () => forceUpdate(this.element) })))));
   }
   static get is() { return "stzh-textandimage"; }
   static get encapsulation() { return "shadow"; }
@@ -85,6 +87,24 @@ export class StzhTextandimage {
         "attribute": "size",
         "reflect": true,
         "defaultValue": "\"default\""
+      },
+      "imagePosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"left\" | \"right\"",
+          "resolved": "\"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Image position"
+        },
+        "attribute": "image-position",
+        "reflect": true,
+        "defaultValue": "\"right\""
       }
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"stzh-textandimage.js","sourceRoot":"","sources":["../../../../src/components/stzh-textandimage/stzh-textandimage.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  forceUpdate,\n} from \"@stencil/core\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot left - Slot for left column content\n * @slot right - Slot for right column content\n */\n@Component({\n  tag: \"stzh-textandimage\",\n  styleUrl: \"stzh-textandimage.scss\",\n  shadow: true\n})\nexport class StzhTextandimage {\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" | \"large\" = \"default\";\n\n  @Element() element: HTMLStzhTextandimageElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const ratios = this.element.querySelectorAll(\n      'stzh-ratio[slot=\"right\"], [slot=\"right\"] stzh-ratio, stzh-gallery[slot=\"right\"], [slot=\"right\"] stzh-gallery'\n    );\n\n    const galleries = this.element.querySelectorAll(\n      'stzh-gallery[slot=\"right\"], [slot=\"right\"] stzh-gallery'\n    );\n\n    const leftSlotUsed = hasSlot(this.element, \"left\");\n    const rightSlotUsed = hasSlot(this.element, \"right\");\n\n    if (this.size === \"large\" || !(leftSlotUsed && rightSlotUsed)) {\n      ratios.forEach((button) => {\n        setPropsIfNull(button, {\n          ratio: \"3:2\",\n          ratioSmall: \"16:9\"\n        } as HTMLStzhRatioElement)\n      });\n    }\n\n    galleries.forEach((button) => {\n      setPropsIfNull(button, {\n        variant: \"single\"\n      } as HTMLStzhGalleryElement)\n    });\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const leftSlotUsed = hasSlot(this.element, \"left\");\n    const rightSlotUsed = hasSlot(this.element, \"right\");\n\n    const isSingle = !(leftSlotUsed && rightSlotUsed);\n\n    const classes = {\n      \"stzh-textandimage\": true,\n      \"stzh-textandimage--is-single-left\": isSingle && leftSlotUsed,\n      \"stzh-textandimage--is-single-right\": isSingle && rightSlotUsed,\n      \"stzh-textandimage--has-left\": leftSlotUsed,\n      \"stzh-textandimage--has-right\": rightSlotUsed,\n      [`stzh-textandimage--size-${this.size}`]: !!this.size\n    };\n\n    return (\n      <Host single={isSingle}>\n        <div class={classes}>\n          <div class=\"stzh-textandimage__left\">\n            <slot name=\"left\" onSlotchange={() => forceUpdate(this.element)}></slot>\n          </div>\n\n          <div class=\"stzh-textandimage__right\">\n            <slot name=\"right\" onSlotchange={() => forceUpdate(this.element)}></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-textandimage.js","sourceRoot":"","sources":["../../../../src/components/stzh-textandimage/stzh-textandimage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, forceUpdate, h, Host, Prop } from \"@stencil/core\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot left - Slot for left column content\n * @slot right - Slot for right column content\n */\n@Component({\n  tag: \"stzh-textandimage\",\n  styleUrl: \"stzh-textandimage.scss\",\n  shadow: true,\n})\nexport class StzhTextandimage {\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" | \"large\" = \"default\";\n\n  /** Image position */\n  @Prop({ reflect: true }) imagePosition: \"left\" | \"right\" = \"right\";\n\n  @Element() element: HTMLStzhTextandimageElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const ratios = this.element.querySelectorAll(\n      'stzh-ratio[slot=\"right\"], [slot=\"right\"] stzh-ratio, stzh-gallery[slot=\"right\"], [slot=\"right\"] stzh-gallery'\n    );\n\n    const galleries = this.element.querySelectorAll('stzh-gallery[slot=\"right\"], [slot=\"right\"] stzh-gallery');\n\n    const leftSlotUsed = hasSlot(this.element, \"left\");\n    const rightSlotUsed = hasSlot(this.element, \"right\");\n\n    if (this.size === \"large\" || !(leftSlotUsed && rightSlotUsed)) {\n      ratios.forEach(button => {\n        setPropsIfNull(button, {\n          ratio: \"3:2\",\n          ratioSmall: \"16:9\",\n        } as HTMLStzhRatioElement);\n      });\n    }\n\n    galleries.forEach(button => {\n      setPropsIfNull(button, {\n        variant: \"single\",\n      } as HTMLStzhGalleryElement);\n    });\n  };\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const leftSlotUsed = hasSlot(this.element, \"left\");\n    const rightSlotUsed = hasSlot(this.element, \"right\");\n\n    const isSingle = !(leftSlotUsed && rightSlotUsed);\n\n    const classes = {\n      \"stzh-textandimage\": true,\n      \"stzh-textandimage--is-single-left\": isSingle && leftSlotUsed,\n      \"stzh-textandimage--is-single-right\": isSingle && rightSlotUsed,\n      \"stzh-textandimage--has-left\": leftSlotUsed,\n      \"stzh-textandimage--has-right\": rightSlotUsed,\n      [`stzh-textandimage--size-${this.size}`]: !!this.size,\n      [`stzh-textandimage--image-position-${this.imagePosition}`]: !!this.imagePosition,\n    };\n\n    return (\n      <Host single={isSingle} image-position={this.imagePosition}>\n        <div class={classes}>\n          <div class=\"stzh-textandimage__left\">\n            <slot name=\"left\" onSlotchange={() => forceUpdate(this.element)}></slot>\n          </div>\n\n          <div class=\"stzh-textandimage__right\">\n            <slot name=\"right\" onSlotchange={() => forceUpdate(this.element)}></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}