npm - @oiz/stzh-components - Versions diffs - 4.1.0 → 4.1.1-beta - Mend

@oiz/stzh-components 4.1.0 → 4.1.1-beta

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

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

@@ -162,8 +162,12 @@
 }
 /**
-* @prop --columns: Amount of columns (can be used as alternative for `columns-{BREAKPOINT}` attributes)
+* @prop --hover-color: Text color on hover.
 */
+:host {
+  --hover-color: var(--stzh-anchornav-hover-color);
+}
 .stzh-anchornav {
   margin-top: var(--stzh-space-large);
 }
@@ -219,4 +223,7 @@
     padding-left: var(--stzh-space-xxxlarge);
     padding-right: var(--stzh-space-large);
   }
+}
+.stzh-anchornav__item:hover {
+  color: var(--hover-color);
 }

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

@@ -163,7 +163,7 @@
 :host {
   overflow: hidden;
-  --color: var(--stzh-color-primary70);
+  --color: var(--stzh-breadcrumb-color, var(--stzh-color-primary70));
 }
 @media print {
   :host {

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

@@ -175,9 +175,16 @@
 * @prop --stzh-header-is-not-stuck: **Global**: Whether head is currently not sticky (readonly variable on `<html>`)
 */
 :host {
-  --logo-width: auto;
+  --logo-width: var(--stzh-header-logo-width, auto);
   --logo-height: 100%;
   --logobar-background-color: var(--stzh-header-logobar-background-color);
+  --metabar-background-color: var(--stzh-header-metabar-background-color, var(--stzh-color-coolgrey10));
+  --menu-background-color: var(--stzh-header-menu-background-color, var(--stzh-color-secondary30));
+  --menu-list-item-background-hover: var(--stzh-header-menu-list-item-background-hover, var(--stzh-color-secondary40));
+  --menu-list-item-background-level2: var(--stzh-header-menu-list-item-background-level2, var(--stzh-color-secondary20));
+  --menu-list-item-background-level2-hover: var(--stzh-header-menu-list-item-background-level2-hover, var(--stzh-color-secondary10));
+  --menu-item-color: var(--stzh-header-menu-item-color, var(--stzh-color-primary70));
+  --metanav-item-color: var(--stzh-header-metanav-item-color, var(--stzh-color-grey90));
 }
 @media print {
   :host {
@@ -266,7 +273,7 @@
   }
 }
 .stzh-header__metabar {
-  background-color: var(--stzh-color-coolgrey10);
+  background-color: var(--metabar-background-color);
 }
 .stzh-header__metabar-inner {
   margin-left: 1.25rem;
@@ -306,7 +313,7 @@
   }
 }
 .stzh-header__burger, .stzh-header__search, .stzh-header__metanav-item {
-  color: var(--stzh-color-grey90);
+  color: var(--metanav-item-color);
   transition: color var(--stzh-base-transition-animation-speed);
   cursor: pointer;
 }
@@ -328,7 +335,7 @@
   padding: 0;
   margin-right: var(--stzh-space-medium);
   gap: var(--stzh-space-medium);
-  color: var(--stzh-color-primary70);
+  color: var(--menu-item-color);
 }
 @media screen and (min-width: 600px) {
   .stzh-header__burger {
@@ -734,7 +741,7 @@
   position: absolute;
   width: 100%;
   height: auto;
-  background-color: var(--stzh-color-secondary30);
+  background-color: var(--menu-background-color);
   display: grid;
   grid-template-rows: auto auto;
   transition-property: opacity, transform;
@@ -845,7 +852,7 @@
 }
 .stzh-header__menu-list.is-level-2, .stzh-header__menu-metanav-list.is-level-2 {
   overflow: auto;
-  background-color: var(--stzh-color-secondary20);
+  background-color: var(--menu-list-item-background-level2);
   visibility: hidden;
   opacity: 0;
   transform: translateX(100%);
@@ -910,12 +917,12 @@
 }
 @media screen and (min-width: 900px) {
   .stzh-header__menu-list-item:hover > .stzh-header__menu-item, .stzh-header__menu-list-item.is-open > .stzh-header__menu-item {
-    background-color: var(--stzh-color-secondary40);
+    background-color: var(--menu-list-item-background-hover);
   }
 }
 @media screen and (min-width: 900px) {
   .stzh-header__menu-list-item:hover > .stzh-header__menu-item.is-level-2, .stzh-header__menu-list-item.is-open > .stzh-header__menu-item.is-level-2 {
-    background-color: var(--stzh-color-secondary10);
+    background-color: var(--menu-list-item-background-level2-hover);
   }
 }
 @media screen and (max-width: 899px) {
@@ -954,7 +961,7 @@
   border: none;
   text-decoration: none;
   background-color: transparent;
-  color: var(--stzh-color-primary70);
+  color: var(--menu-item-color);
   padding-left: var(--stzh-space-xxxlarge);
   padding-top: var(--stzh-space-small);
   padding-bottom: var(--stzh-space-small);

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

@@ -565,4 +565,37 @@
     line-height: var(--stzh-font-curve-h1home-ultra-heading-line-height, var(--stzh-font-zetta-text-line-height));
     letter-spacing: var(--stzh-font-curve-h1home-ultra-heading-letter-spacing, var(--stzh-font-zetta-text-letter-spacing));
   }
+}
+.stzh-heading--curve-h1homesmall {
+  font-size: var(--stzh-font-curve-h1homesmall-default-font-size, var(--stzh-font-mega-font-size));
+  line-height: var(--stzh-font-curve-h1homesmall-default-heading-line-height, var(--stzh-font-mega-text-line-height));
+  letter-spacing: var(--stzh-font-curve-h1homesmall-default-heading-letter-spacing, var(--stzh-font-mega-text-letter-spacing));
+}
+@media screen and (min-width: 600px) {
+  .stzh-heading--curve-h1homesmall {
+    font-size: var(--stzh-font-curve-h1homesmall-small-font-size, var(--stzh-font-giga-font-size));
+    line-height: var(--stzh-font-curve-h1homesmall-small-heading-line-height, var(--stzh-font-giga-text-line-height));
+    letter-spacing: var(--stzh-font-curve-h1homesmall-small-heading-letter-spacing, var(--stzh-font-giga-text-letter-spacing));
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-heading--curve-h1homesmall {
+    font-size: var(--stzh-font-curve-h1homesmall-medium-font-size, var(--stzh-font-peta-font-size));
+    line-height: var(--stzh-font-curve-h1homesmall-medium-heading-line-height, var(--stzh-font-peta-text-line-height));
+    letter-spacing: var(--stzh-font-curve-h1homesmall-medium-heading-letter-spacing, var(--stzh-font-peta-text-letter-spacing));
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-heading--curve-h1homesmall {
+    font-size: var(--stzh-font-curve-h1homesmall-large-font-size, var(--stzh-font-exa-font-size));
+    line-height: var(--stzh-font-curve-h1homesmall-large-heading-line-height, var(--stzh-font-exa-text-line-height));
+    letter-spacing: var(--stzh-font-curve-h1homesmall-large-heading-letter-spacing, var(--stzh-font-exa-text-letter-spacing));
+  }
+}
+@media screen and (min-width: 1600px) {
+  .stzh-heading--curve-h1homesmall {
+    font-size: var(--stzh-font-curve-h1homesmall-ultra-font-size, var(--stzh-font-exa-font-size));
+    line-height: var(--stzh-font-curve-h1homesmall-ultra-heading-line-height, var(--stzh-font-exa-text-line-height));
+    letter-spacing: var(--stzh-font-curve-h1homesmall-ultra-heading-letter-spacing, var(--stzh-font-exa-text-letter-spacing));
+  }
 }

package/dist/collection/components/stzh-skin-portal-mitwirken/stzh-skin-portal-mitwirken.css CHANGED Viewed

@@ -780,10 +780,26 @@ the .has-focus class is used by the focus target */
   --stzh-color-mkz-cyan100: rgba(var(--stzh-color-mkz-cyan100-rgb) / 1);
   /* PKZH */
-  --stzh-color-shakespeare-rgb: 74 150 200;
-  --stzh-color-shakespeare: rgba(var(--stzh-color-shakespeare-rgb) / 1);
-  --stzh-color-chambray-rgb: 44 90 120;
-  --stzh-color-chambray: rgba(var(--stzh-color-chambray-rgb) / 1);
+  --stzh-color-pkzh-cyan10-rgb: 235 249 255;
+  --stzh-color-pkzh-cyan10: rgba(var(--stzh-color-pkzh-cyan10-rgb) / 1);
+  --stzh-color-pkzh-cyan20-rgb: 194 238 255;
+  --stzh-color-pkzh-cyan20: rgba(var(--stzh-color-pkzh-cyan20-rgb) / 1);
+  --stzh-color-pkzh-cyan30-rgb: 132 220 255;
+  --stzh-color-pkzh-cyan30: rgba(var(--stzh-color-pkzh-cyan30-rgb) / 1);
+  --stzh-color-pkzh-cyan40-rgb: 52 197 254;
+  --stzh-color-pkzh-cyan40: rgba(var(--stzh-color-pkzh-cyan40-rgb) / 1);
+  --stzh-color-pkzh-cyan50-rgb: 0 159 223;
+  --stzh-color-pkzh-cyan50: rgba(var(--stzh-color-pkzh-cyan50-rgb) / 1);
+  --stzh-color-pkzh-cyan60-rgb: 5 127 172;
+  --stzh-color-pkzh-cyan60: rgba(var(--stzh-color-pkzh-cyan60-rgb) / 1);
+  --stzh-color-pkzh-cyan70-rgb: 0 102 143;
+  --stzh-color-pkzh-cyan70: rgba(var(--stzh-color-pkzh-cyan70-rgb) / 1);
+  --stzh-color-pkzh-cyan80-rgb: 3 76 103;
+  --stzh-color-pkzh-cyan80: rgba(var(--stzh-color-pkzh-cyan80-rgb) / 1);
+  --stzh-color-pkzh-cyan90-rgb: 0 44 61;
+  --stzh-color-pkzh-cyan90: rgba(var(--stzh-color-pkzh-cyan90-rgb) / 1);
+  --stzh-color-pkzh-cyan100-rgb: 0 29 41;
+  --stzh-color-pkzh-cyan100: rgba(var(--stzh-color-pkzh-cyan100-rgb) / 1);
   /* Microsite Colors */
@@ -1373,16 +1389,16 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: rgba(var(--stzh-color-tabasco-rgb) / 1);
   --stzh-color-primary-hover-rgb: var(--stzh-color-mahogany-rgb);
   --stzh-color-primary-hover: rgba(var(--stzh-color-mahogany-rgb) / 1);
   /* Buttons */
   --stzh-button-background-color: var(--stzh-color-primary);
   --stzh-button-hover-background-color: var(--stzh-color-primary-hover);
   --stzh-button-disabled-background-color: var(--stzh-color-grey70);
   /* Links */
   --stzh-link-color: var(--stzh-color-primary);
   --stzh-link-hover-color: var(--stzh-color-primary-hover);
   /* Header */
   --stzh-header-logobar-background-color: var(--stzh-color-primary);
 }
@@ -1586,18 +1602,18 @@ the .has-focus class is used by the focus target */
   --stzh-button-tertiary-color: var(--stzh-color-primary80);
   --stzh-button-tertiary-hover-color: var(--stzh-color-primary90);
   --stzh-button-tertiary-disabled-color: var(--stzh-color-grey70);
   /* Links */
   --stzh-link-color: var(--stzh-color-primary80);
   --stzh-link-hover-color: var(--stzh-color-primary90);
   /* Header */
   --stzh-header-logobar-background-color: var(--stzh-color-primary70);
   /* Card list */
   --stzh-cardlist-background-color: var(--stzh-color-coolgrey10);
   --stzh-cardlist-description-color: var(--stzh-color-primary70);
-  }
+}
 /* ZVV Overrides */
 #zvv-searchmask > div {
@@ -1608,88 +1624,27 @@ the .has-focus class is used by the focus target */
 #zvv-searchmask * {
   font-weight: inherit;
 }
-/*
-.stzh-theme-mkz {
-  --stzh-color-secondary10-rgb: var(--stzh-color-cyan10-rgb);
-  --stzh-color-secondary10: rgba(var(--stzh-color-secondary10-rgb) / 1);
-  --stzh-color-secondary20-rgb: var(--stzh-color-cyan20-rgb);
-  --stzh-color-secondary20: rgba(var(--stzh-color-secondary20-rgb) / 1);
-  --stzh-color-secondary30-rgb: var(--stzh-color-cyan30-rgb);
-  --stzh-color-secondary30: rgba(var(--stzh-color-secondary30-rgb) / 1);
-  --stzh-color-secondary40-rgb: var(--stzh-color-cyan40-rgb);
-  --stzh-color-secondary40: rgba(var(--stzh-color-secondary40-rgb) / 1);
-  --stzh-color-secondary50-rgb: var(--stzh-color-cyan50-rgb);
-  --stzh-color-secondary50: rgba(var(--stzh-color-secondary50-rgb) / 1);
-  --stzh-color-secondary60-rgb: var(--stzh-color-cyan60-rgb);
-  --stzh-color-secondary60: rgba(var(--stzh-color-secondary60-rgb) / 1);
-  --stzh-color-secondary70-rgb: var(--stzh-color-cyan70-rgb);
-  --stzh-color-secondary70: rgba(var(--stzh-color-secondary70-rgb) / 1);
-  --stzh-color-secondary80-rgb: var(--stzh-color-cyan80-rgb);
-  --stzh-color-secondary80: rgba(var(--stzh-color-secondary80-rgb) / 1);
-  --stzh-color-secondary90-rgb: var(--stzh-color-cyan90-rgb);
-  --stzh-color-secondary90: rgba(var(--stzh-color-secondary90-rgb) / 1);
-  --stzh-color-secondary100-rgb: var(--stzh-color-cyan100-rgb);
-  --stzh-color-secondary100: rgba(var(--stzh-color-secondary100-rgb) / 1);
-*/
-  /* Homepage Service Highlights */
-/*
---stzh-homepage-service-highlights-topnews-subtitle-font: var(--stzh-font-family-heavy);
-}
-*/
 .stzh-theme-uvz {
   --stzh-color-primary-rgb: var(--stzh-color-monza-rgb);
   --stzh-color-primary: rgba(var(--stzh-color-monza-rgb) / 1);
   --stzh-color-primary-hover-rgb: var(--stzh-color-venetianred-rgb);
   --stzh-color-primary-hover: rgba(var(--stzh-color-venetianred-rgb) / 1);
-  /* Buttons */
-  --stzh-button-background-color: var(--stzh-color-primary);
-  --stzh-button-hover-background-color: var(--stzh-color-primary-hover);
-  --stzh-button-disabled-background-color: var(--stzh-color-grey70);
-  /* Links */
-  --stzh-link-color: var(--stzh-color-primary);
-  --stzh-link-hover-color: var(--stzh-color-primary-hover);
-/*
-  --stzh-link-color: var(--stzh-color-scienceblue);
-  --stzh-heading-color: rgb(77, 77, 77);
-*/
-  /* Header */
-  --stzh-header-logobar-background-color: var(--stzh-color-primary);
-}
-.stzh-theme-pkzh {
-  --stzh-pkzh-font-family: Verdana, 'Geneva', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  --stzh-color-primary-rgb: var(--stzh-color-shakespeare-rgb);
-  --stzh-color-primary: rgba(var(--stzh-color-shakespeare-rgb) / 1);
-  --stzh-color-primary-hover-rgb: var(--stzh-color-chambray-rgb);
-  --stzh-color-primary-hover: rgba(var(--stzh-color-chambray-rgb) / 1);
   /* Buttons */
   --stzh-button-background-color: var(--stzh-color-primary);
   --stzh-button-hover-background-color: var(--stzh-color-primary-hover);
   --stzh-button-disabled-background-color: var(--stzh-color-grey70);
   /* Links */
   --stzh-link-color: var(--stzh-color-primary);
-  --stzh-link-hover-color: var(--stzh-color-primary-hover);
+  --stzh-link-hover-color: var(--stzh-color-primary-hover);
+  /*
+    --stzh-link-color: var(--stzh-color-scienceblue);
+    --stzh-heading-color: rgb(77, 77, 77);
+  */
   /* Header */
   --stzh-header-logobar-background-color: var(--stzh-color-primary);
-  --stzh-font-family-light: var(--stzh-pkzh-font-family);
-  --stzh-font-family-regular: var(--stzh-pkzh-font-family);
-  --stzh-font-family-medium: var(--stzh-pkzh-font-family);
-  --stzh-font-family-bold: var(--stzh-pkzh-font-family);
-  --stzh-font-family-heavy: var(--stzh-pkzh-font-family);
-  --stzh-font-weight-light: 300;
-  --stzh-font-weight-regular: normal;
-  --stzh-font-weight-medium: 500;
-  --stzh-font-weight-bold: 700;
-  --stzh-font-weight-heavy: 800;
 }
 .stzh-theme-ms-aoz-agenda {
@@ -1763,6 +1718,155 @@ the .has-focus class is used by the focus target */
   background-color: var(--stzh-color-grey10);
 }
+/**
+ * Pensionskasse Zürich (PKZH)
+ */
+.stzh-theme-pkzh {
+  --stzh-color-primary10-rgb: var(--stzh-color-coolgrey10-rgb);
+  --stzh-color-primary10: rgba(var(--stzh-color-primary10-rgb) / 1);
+  --stzh-color-primary20-rgb: var(--stzh-color-coolgrey20-rgb);
+  --stzh-color-primary20: rgba(var(--stzh-color-primary20-rgb) / 1);
+  --stzh-color-primary30-rgb: var(--stzh-color-coolgrey30-rgb);
+  --stzh-color-primary30: rgba(var(--stzh-color-primary30-rgb) / 1);
+  --stzh-color-primary40-rgb: var(--stzh-color-coolgrey40-rgb);
+  --stzh-color-primary40: rgba(var(--stzh-color-primary40-rgb) / 1);
+  --stzh-color-primary50-rgb: var(--stzh-color-coolgrey50-rgb);
+  --stzh-color-primary50: rgba(var(--stzh-color-primary50-rgb) / 1);
+  --stzh-color-primary60-rgb: var(--stzh-color-coolgrey60-rgb);
+  --stzh-color-primary60: rgba(var(--stzh-color-primary60-rgb) / 1);
+  --stzh-color-primary70-rgb: var(--stzh-color-coolgrey70-rgb);
+  --stzh-color-primary70: rgba(var(--stzh-color-primary70-rgb) / 1);
+  --stzh-color-primary80-rgb: var(--stzh-color-coolgrey80-rgb);
+  --stzh-color-primary80: rgba(var(--stzh-color-primary80-rgb) / 1);
+  --stzh-color-primary90-rgb: var(--stzh-color-coolgrey90-rgb);
+  --stzh-color-primary90: rgba(var(--stzh-color-primary90-rgb) / 1);
+  --stzh-color-primary100-rgb: var(--stzh-color-coolgrey100-rgb);
+  --stzh-color-primary100: rgba(var(--stzh-color-primary100-rgb) / 1);
+  --stzh-color-secondary10-rgb: var(--stzh-color-pkzh-cyan10-rgb);
+  --stzh-color-secondary10: rgba(var(--stzh-color-secondary10-rgb) / 1);
+  --stzh-color-secondary20-rgb: var(--stzh-color-pkzh-cyan20-rgb);
+  --stzh-color-secondary20: rgba(var(--stzh-color-secondary20-rgb) / 1);
+  --stzh-color-secondary30-rgb: var(--stzh-color-pkzh-cyan30-rgb);
+  --stzh-color-secondary30: rgba(var(--stzh-color-secondary30-rgb) / 1);
+  --stzh-color-secondary40-rgb: var(--stzh-color-pkzh-cyan40-rgb);
+  --stzh-color-secondary40: rgba(var(--stzh-color-secondary40-rgb) / 1);
+  --stzh-color-secondary50-rgb: var(--stzh-color-pkzh-cyan50-rgb);
+  --stzh-color-secondary50: rgba(var(--stzh-color-secondary50-rgb) / 1);
+  --stzh-color-secondary60-rgb: var(--stzh-color-pkzh-cyan60-rgb);
+  --stzh-color-secondary60: rgba(var(--stzh-color-secondary60-rgb) / 1);
+  --stzh-color-secondary70-rgb: var(--stzh-color-pkzh-cyan70-rgb);
+  --stzh-color-secondary70: rgba(var(--stzh-color-secondary70-rgb) / 1);
+  --stzh-color-secondary80-rgb: var(--stzh-color-pkzh-cyan80-rgb);
+  --stzh-color-secondary80: rgba(var(--stzh-color-secondary80-rgb) / 1);
+  --stzh-color-secondary90-rgb: var(--stzh-color-pkzh-cyan90-rgb);
+  --stzh-color-secondary90: rgba(var(--stzh-color-secondary90-rgb) / 1);
+  --stzh-color-secondary100-rgb: var(--stzh-color-pkzh-cyan100-rgb);
+  --stzh-color-secondary100: rgba(var(--stzh-color-secondary100-rgb) / 1);
+  /* Font families */
+  --stzh-font-family-regular: 'HelveticaNeueLTW05_65Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --stzh-font-family-medium: 'HelveticaNeueLTW05_65Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --stzh-font-family-medium-italic: 'HelveticaNeueLTW05_66MediumIt', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --stzh-font-family-bold: 'HelveticaNeueLTW05_65Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --stzh-font-family-heavy: 'HelveticaNeueLTW01_71488914', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --stzh-font-family-title: var(--stzh-font-family-regular);
+  --stzh-font-weight-regular: normal;
+  --stzh-font-weight-medium: 400;
+  --stzh-font-weight-medium-italic: 400;
+  --stzh-font-weight-bold: 500;
+  --stzh-font-weight-heavy: 700;
+  /* General heading color */
+  --stzh-heading-color: var(--stzh-color-secondary70);
+  /* Logobar & Header */
+  --stzh-header-color: var(--stzh-color-secondary90);
+  --stzh-header-logo-width: 15rem;
+  --stzh-header-logobar-background-color: var(--stzh-color-white);
+  --stzh-header-menu-background-color: var(--stzh-color-secondary10);
+  --stzh-header-menu-list-item-background-hover: var(--stzh-color-secondary20);
+  --stzh-header-menu-item-color: var(--stzh-color-secondary90);
+  --stzh-header-menu-list-item-background-level2: var(--stzh-color-white);
+  --stzh-header-menu-list-item-background-level2-hover: var(--stzh-color-secondary10);
+  --stzh-header-metabar-background-color: var(--stzh-color-grey10);
+  --stzh-header-metanav-item-color: var(--stzh-color-secondary90);
+  /* Pagetitle Home */
+  --stzh-pagetitle-home-heading-color: var(--stzh-color-sunnyyellow40);
+  --stzh-pagetitle-home-subheading-color: var(--stzh-color-sunnyyellow40);
+  /* Pagetitle */
+  --stzh-pagetitle-background-color: var(--stzh-color-pkzh-cyan10);
+  /* Breadcrumb */
+  --stzh-breadcrumb-color: var(--stzh-color-secondary80);
+  /* Homepage Service Highlights */
+  --stzh-homepage-service-highlights-mostsearched-background-color: var(--stzh-color-sunnyyellow40);
+  --stzh-homepage-service-highlights-mostsearched-item-font-size: var(--stzh-font-hecto-font-size);
+  --stzh-homepage-service-highlights-topnews-background-color: var(--stzh-color-white);
+  --stzh-homepage-service-highlights-topnews-background-color-hover: var(--stzh-color-secondary10);
+  --stzh-homepage-service-highlights-topnews-subtitle-font: var(--stzh-font-family-medium);
+  /* Card Superteaser */
+  --stzh-card-superteaser-tag-color: var(--stzh-color-white);
+  --stzh-card-superteaser-tag-color-hover: var(--stzh-color-white);
+  --stzh-card-superteaser-tag-background-color: var(--stzh-color-secondary70);
+  --stzh-card-superteaser-heading-margin-bottom: 0;
+  --stzh-card-superteaser-heading-link-color: var(--stzh-color-primary90);
+  /* Footer */
+  --stzh-footer-background-color: var(--stzh-color-secondary90);
+  /* Accordion */
+  --stzh-accordion-button-color: var(--stzh-color-black);
+  --stzh-accordion-button-background-color: var(--stzh-color-secondary10);
+  --stzh-accordion-button-hover-background-color: var(--stzh-color-secondary20);
+  --stzh-accordion-button-background-color-is-open: var(--stzh-color-secondary20);
+  --stzh-accordion-content-background: var(--stzh-color-secondary10);
+  /**
+   * Link
+   */
+  --stzh-link-color: var(--stzh-color-secondary70);
+  --stzh-link-hover-color: var(--stzh-color-secondary80);
+  /**
+   * Buttons
+   */
+  --stzh-button-background-color: var(--stzh-color-secondary70);
+  --stzh-button-hover-background-color: var(--stzh-color-secondary60);
+  --stzh-button-secondary-color: var(--stzh-color-primary80);
+  --stzh-button-secondary-background-color: var(--stzh-color-secondary20);
+  --stzh-button-secondary-hover-color: var(--stzh-color-primary80);
+  --stzh-button-secondary-hover-background-color: var(--stzh-color-secondary40);
+  --stzh-button-tertiary-color: var(--stzh-color-primary70);
+  --stzh-button-tertiary-hover-color: var(--stzh-color-primary80);
+  --stzh-button-tertiary-disabled-color: var(--stzh-color-grey70);
+  /**
+   * Anchornav
+   */
+  --stzh-anchornav-hover-color: var(--stzh-color-secondary50);
+}
+.stzh-theme-pkzh--cyan {
+  --stzh-pagetitle-background-color: var(--stzh-color-pkzh-cyan10);
+}
+.stzh-theme-pkzh--limegreen {
+  --stzh-pagetitle-background-color: var(--stzh-color-limegreen20);
+}
+.stzh-theme-pkzh--violet {
+  --stzh-pagetitle-background-color: var(--stzh-color-violet20);
+}
+.stzh-theme-pkzh--sunnyyellow {
+  --stzh-pagetitle-background-color: var(--stzh-color-sunnyyellow20);
+}
 /**
  * Publizistische Inhalte (PI)
  */

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

@@ -601,6 +601,39 @@
     letter-spacing: var(--stzh-font-curve-h1home-ultra-text-letter-spacing, var(--stzh-font-zetta-text-letter-spacing));
   }
 }
+.stzh-text--curve-h1homesmall {
+  font-size: var(--stzh-font-curve-h1homesmall-default-font-size, var(--stzh-font-mega-font-size));
+  line-height: var(--stzh-font-curve-h1homesmall-default-text-line-height, var(--stzh-font-mega-text-line-height));
+  letter-spacing: var(--stzh-font-curve-h1homesmall-default-text-letter-spacing, var(--stzh-font-mega-text-letter-spacing));
+}
+@media screen and (min-width: 600px) {
+  .stzh-text--curve-h1homesmall {
+    font-size: var(--stzh-font-curve-h1homesmall-small-font-size, var(--stzh-font-giga-font-size));
+    line-height: var(--stzh-font-curve-h1homesmall-small-text-line-height, var(--stzh-font-giga-text-line-height));
+    letter-spacing: var(--stzh-font-curve-h1homesmall-small-text-letter-spacing, var(--stzh-font-giga-text-letter-spacing));
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-text--curve-h1homesmall {
+    font-size: var(--stzh-font-curve-h1homesmall-medium-font-size, var(--stzh-font-peta-font-size));
+    line-height: var(--stzh-font-curve-h1homesmall-medium-text-line-height, var(--stzh-font-peta-text-line-height));
+    letter-spacing: var(--stzh-font-curve-h1homesmall-medium-text-letter-spacing, var(--stzh-font-peta-text-letter-spacing));
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-text--curve-h1homesmall {
+    font-size: var(--stzh-font-curve-h1homesmall-large-font-size, var(--stzh-font-exa-font-size));
+    line-height: var(--stzh-font-curve-h1homesmall-large-text-line-height, var(--stzh-font-exa-text-line-height));
+    letter-spacing: var(--stzh-font-curve-h1homesmall-large-text-letter-spacing, var(--stzh-font-exa-text-letter-spacing));
+  }
+}
+@media screen and (min-width: 1600px) {
+  .stzh-text--curve-h1homesmall {
+    font-size: var(--stzh-font-curve-h1homesmall-ultra-font-size, var(--stzh-font-exa-font-size));
+    line-height: var(--stzh-font-curve-h1homesmall-ultra-text-line-height, var(--stzh-font-exa-text-line-height));
+    letter-spacing: var(--stzh-font-curve-h1homesmall-ultra-text-letter-spacing, var(--stzh-font-exa-text-letter-spacing));
+  }
+}
 .stzh-text--size-femto {
   font-size: var(--stzh-font-femto-font-size);
   line-height: var(--stzh-font-femto-text-line-height);

package/dist/collection/pages/CMS/PKZH/pkzh.e2e.js ADDED Viewed

@@ -0,0 +1,18 @@
+import { test } from "@playwright/test";
+import { visualDiff } from "../../../../.build/test/utils";
+const URL = "pages-home";
+const STORIES = [
+    "homepage"
+];
+test.describe("page: home", () => {
+    STORIES.forEach((storyId) => {
+        test(`story ${storyId} visual diff`, async ({ page }) => {
+            await visualDiff({
+                storyId,
+                page,
+                url: URL
+            });
+        });
+    });
+});
+//# sourceMappingURL=pkzh.e2e.js.map

package/dist/collection/pages/CMS/PKZH/pkzh.e2e.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"pkzh.e2e.js","sourceRoot":"","sources":["../../../../../src/pages/CMS/PKZH/pkzh.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D,MAAM,GAAG,GAAG,YAAY,CAAC;AAEzB,MAAM,OAAO,GAAG;IACd,UAAU;CACX,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC/B,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;QAC1B,IAAI,CAAC,SAAS,OAAO,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YACtD,MAAM,UAAU,CAAC;gBACf,OAAO;gBACP,IAAI;gBACJ,GAAG,EAAE,GAAG;aACT,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from \"@playwright/test\";\nimport { visualDiff } from \"../../../../.build/test/utils\";\n\nconst URL = \"pages-home\";\n\nconst STORIES = [\n \"homepage\"\n];\n\ntest.describe(\"page: home\", () => {\n STORIES.forEach((storyId) => {\n test(`story ${storyId} visual diff`, async ({ page }) => {\n await visualDiff({\n storyId,\n page,\n url: URL\n });\n });\n });\n});\n"]}

package/dist/collection/utils/utils.js CHANGED Viewed

@@ -142,56 +142,8 @@ export function addWordBreakToLinks(links) {
         }
     });
 }
-// `extras.experimentalSlotFixes` stencil config flag resolves cloning light dom elements
-// so our own cloneElement / cloneWrappedStzhElement helpers are not needed right now
-// (used before in cardlist and sortable component).
-// export function children(node: Element) {
-//   return childNodes(node).map((n: any) => n.nodeType === 1);
-// }
-// const nativeCloneNodeFn = Node.prototype.cloneNode;
-// export function cloneElement(node: Element, deep: boolean) {
-//   const clonedNode = nativeCloneNodeFn.call(node, false);
-//   const srcChildNodes = childNodes(node);
-//   if (deep) {
-//     for (let i = 0; i < srcChildNodes.length; i++) {
-//       if (srcChildNodes[i].nodeType !== 2) {
-//         const childClone = cloneElement(srcChildNodes[i], true);
-//         clonedNode.appendChild(childClone);
-//       }
-//     }
-//   }
-//   return clonedNode;
-// }
-// // Clone an stzh-* element that is using stencil polyfilled slots (no shadow dom)
-// // and potentially wrapped in normal elements (e.g. angular component)
-// export function cloneWrappedStzhElement(elementToClone: Element): [Element, Element, Element] {
-//   let clonedElement: Element;
-//   let clonedStzhElement: Element;
-//   let originalStzhElement: Element;
-//   if (isStzhElement(elementToClone)) {
-//     clonedElement = cloneElement(elementToClone, true);
-//     clonedStzhElement = clonedElement;
-//     originalStzhElement = elementToClone;
-//   } else {
-//     clonedElement = elementToClone.cloneNode() as Element;
-//     let clonedInnerElementLast: Element = clonedElement;
-//     let originalInnerElementLast: Element = elementToClone;
-//     // clone inner root elements separately until we find a stzh element
-//     while (originalInnerElementLast.children.length === 1 && !isStzhElement(originalInnerElementLast.children[0])) {
-//       originalInnerElementLast = originalInnerElementLast.children[0];
-//       const clonedInnerElementCurrent = originalInnerElementLast.cloneNode() as Element;
-//       clonedInnerElementLast.appendChild(clonedInnerElementCurrent);
-//       clonedInnerElementLast = clonedInnerElementCurrent;
-//     }
-//     if (isStzhElement(originalInnerElementLast.children[0])) {
-//       clonedStzhElement = cloneElement(originalInnerElementLast.children[0], true);
-//       originalStzhElement = originalInnerElementLast.children[0];
-//       clonedInnerElementLast.appendChild(clonedStzhElement);
-//     } else {
-//       // no root stzh element found, so we give up and just deep clone the root
-//       clonedElement = cloneElement(elementToClone, true);
-//     }
-//   }
-//   return [clonedElement, clonedStzhElement, originalStzhElement];
-// }
+export function getTheme() {
+    const htmlElement = document.documentElement;
+    return Array.from(htmlElement.classList).find(className => className.startsWith("stzh-theme-"));
+}
 //# sourceMappingURL=utils.js.map

package/dist/collection/utils/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/utils/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,mHAAmH;AACnH,uHAAuH;AACvH,MAAM,UAAU,OAAO,CAAC,EAAe,EAAE,IAAa;IACpD,wBAAwB;IACxB,IAAI,IAAI,EAAE,CAAC;QACT,OAAO,EAAE,CAAC,aAAa,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC;IACvD,CAAC;IAED,0BAA0B;IAC1B,OAAO,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE;QAC9C,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC;YACvE,OAAO,IAAI,CAAC;QACd,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;YACxC,MAAM,EAAE,GAAG,IAAmB,CAAC;YAC/B,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;gBAC7B,OAAO,IAAI,CAAC;YACd,CAAC;QACH,CAAC;QAED,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,OAAgB,EAAE,UAAe;IAC9D,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;QAC5C,IAAI,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC;YACvD,OAAO,CAAC,SAAS,CAAC,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC;QAC7C,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,OAAgB,EAAE,UAAe;IACxD,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;QAC5C,OAAO,CAAC,SAAS,CAAC,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC;IAC7C,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,OAAgB;IAC5C,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,QAAQ,KAAK,CAAC,EAAE,CAAC;QACvC,OAAO,KAAK,CAAC;IACf,CAAC;IAED,OAAO,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;AAC9D,CAAC;AAED,gFAAgF;AAChF,MAAM,UAAU,OAAO,CAAC,IAAI;IAC1B,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CACjC,cAAc,IAAI,iBAAiB,IAAI,IAAI,CAC5C,CAAC;IACF,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AAClD,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,IAAoB;IAC1C,MAAM,OAAO,GAAG,EAAE,CAAC;IAEnB,OAAO,IAAI,EAAE,CAAC;QACZ,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACtB,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC;IACzB,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,IAAa;IACtC,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;IAEnC,yDAAyD;IACzD,8DAA8D;IAC9D,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;QACjB,MAAM,MAAM,GAAG,EAAE,CAAC;QAElB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC3C,MAAM,IAAI,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YAEnC,IAAI,IAAI,EAAE,CAAC;gBACT,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACpB,CAAC;QACH,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;AAChC,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,OAAoB;IAC5C,aAAa;IACb,IAAI,OAAO,OAAO,CAAC,eAAe,KAAK,WAAW,EAAE,CAAC;QACnD,aAAa;QACb,OAAO,OAAO,CAAC,eAAe,CAAC;YAC7B,YAAY,EAAE,KAAK;YACnB,kBAAkB,EAAE,KAAK;SAC1B,CAAC,CAAC;IACL,CAAC;SAAM,CAAC;QACN,OAAO,CAAC,CAAC,CACP,OAAO,CAAC,WAAW;YACnB,OAAO,CAAC,YAAY;YACpB,OAAO,CAAC,cAAc,EAAE,CAAC,MAAM,CAChC,CAAC;IACJ,CAAC;AACH,CAAC;AAED,MAAM,UAAU,MAAM,CAAC,OAAO;IAC5B,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC,MAAM,EAAE,CAAC;QACrC,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;IAC7B,CAAC;IAED,IAAI,IAAI,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IAC3C,IAAI,GAAG,GAAG,OAAO,CAAC,aAAa,CAAC,WAAW,CAAC;IAE5C,OAAO;QACL,GAAG,EAAE,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,WAAW;QAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC,WAAW;KAClC,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,GAAG;IACvB,OAAO,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,EAAE;QACnC,qBAAqB,CAAC,GAAG,EAAE;YACzB,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,UAAU,CAAC,IAAY;IAC3C,OAAO,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,EAAE;QACnC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACrB,OAAO,EAAE,CAAC;QACZ,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,CAAN,IAAY,mBAKX;AALD,WAAY,mBAAmB;IAC7B,0CAAmB,CAAA;IACnB,kCAAW,CAAA;IACX,kCAAW,CAAA;IACX,oCAAa,CAAA;AACf,CAAC,EALW,mBAAmB,KAAnB,mBAAmB,QAK9B;AAED,MAAM,UAAU,kBAAkB;IAChC,MAAM,GAAG,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;IACjC,IACE,GAAG,CAAC,QAAQ,CAAC,wBAAwB,CAAC;QACtC,GAAG,CAAC,KAAK,CAAC,sBAAsB,CAAC,EACjC,CAAC;QACD,OAAO,mBAAmB,CAAC,GAAG,CAAC;IACjC,CAAC;SAAM,IACL,GAAG,CAAC,QAAQ,CAAC,wBAAwB,CAAC;QACtC,GAAG,CAAC,QAAQ,CAAC,oCAAoC,CAAC;QAClD,GAAG,CAAC,KAAK,CAAC,sBAAsB,CAAC,EACjC,CAAC;QACD,OAAO,mBAAmB,CAAC,GAAG,CAAC;IACjC,CAAC;SAAM,IACL,GAAG,CAAC,QAAQ,CAAC,8BAA8B,CAAC;QAC5C,GAAG,CAAC,QAAQ,CAAC,+BAA+B,CAAC;QAC7C,GAAG,CAAC,KAAK,CAAC,iBAAiB,CAAC,EAC5B,CAAC;QACD,OAAO,mBAAmB,CAAC,IAAI,CAAC;IAClC,CAAC;SAAM,CAAC;QACN,OAAO,mBAAmB,CAAC,OAAO,CAAC;IACrC,CAAC;AACH,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,KAAoB;IACtD,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;;QACrB,IAAI,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YACpC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QAC5D,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC;AAED,yFAAyF;AACzF,qFAAqF;AACrF,oDAAoD;AAEpD,4CAA4C;AAC5C,+DAA+D;AAC/D,IAAI;AAEJ,sDAAsD;AAEtD,+DAA+D;AAC/D,4DAA4D;AAC5D,4CAA4C;AAE5C,gBAAgB;AAChB,uDAAuD;AACvD,+CAA+C;AAC/C,mEAAmE;AACnE,8CAA8C;AAC9C,UAAU;AACV,QAAQ;AACR,MAAM;AAEN,uBAAuB;AACvB,IAAI;AAEJ,oFAAoF;AACpF,yEAAyE;AACzE,kGAAkG;AAClG,gCAAgC;AAChC,oCAAoC;AACpC,sCAAsC;AAEtC,yCAAyC;AACzC,0DAA0D;AAC1D,yCAAyC;AACzC,4CAA4C;AAC5C,aAAa;AACb,6DAA6D;AAE7D,2DAA2D;AAC3D,8DAA8D;AAE9D,2EAA2E;AAC3E,uHAAuH;AACvH,yEAAyE;AACzE,2FAA2F;AAE3F,uEAAuE;AACvE,4DAA4D;AAC5D,QAAQ;AAER,iEAAiE;AACjE,sFAAsF;AACtF,oEAAoE;AACpE,+DAA+D;AAC/D,eAAe;AACf,kFAAkF;AAClF,4DAA4D;AAC5D,QAAQ;AACR,MAAM;AAEN,oEAAoE;AACpE,IAAI","sourcesContent":["import { dashCase } from \"./string-utils\";\n\n// Determines whether an element has a slot. If name is specified, the function will look for a corresponding named\n// slot, otherwise it will look for a \"default\" slot (e.g. a non-empty text node or an element with no slot attribute).\nexport function hasSlot(el: HTMLElement, name?: string) {\n // Look for a named slot\n if (name) {\n return el.querySelector(`[slot=\"${name}\"]`) !== null;\n }\n\n // Look for a default slot\n return Array.from(childNodes(el)).some((node) => {\n if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== \"\") {\n return true;\n }\n\n if (node.nodeType === node.ELEMENT_NODE) {\n const el = node as HTMLElement;\n if (!el.hasAttribute(\"slot\")) {\n return true;\n }\n }\n\n return false;\n });\n}\n\nexport function setPropsIfNull(element: Element, attributes: any) {\n Object.keys(attributes).forEach((attribute) => {\n if (element.getAttribute(dashCase(attribute)) === null) {\n element[attribute] = attributes[attribute];\n }\n });\n}\n\nexport function setProps(element: Element, attributes: any) {\n Object.keys(attributes).forEach((attribute) => {\n element[attribute] = attributes[attribute];\n });\n}\n\nexport function isStzhElement(element: Element) {\n if (!element \|\| element.nodeType !== 1) {\n return false;\n }\n\n return element.tagName.toLowerCase().indexOf(\"stzh-\") === 0;\n}\n\n// returns content of <meta name=\"\" content=\"\"> tags or '' if empty/non existant\nexport function getMeta(name) {\n const meta = document.querySelector(\n `meta[name=\"${name}\"],[property=\"${name}\"]`\n );\n return meta ? meta.getAttribute(\"content\") : \"\";\n}\n\nexport function parents(node: Element \| Node) {\n const parents = [];\n\n while (node) {\n parents.unshift(node);\n node = node.parentNode;\n }\n\n return parents;\n}\n\nexport function childNodes(node: Element) {\n const childNodes = node.childNodes;\n\n // check if element is stencil element without shadow dom\n // and then detect elements that were slotted into the element\n if (node[\"s-sc\"]) {\n const result = [];\n\n for (let i = 0; i < childNodes.length; i++) {\n const slot = childNodes[i][\"s-nr\"];\n\n if (slot) {\n result.push(slot);\n }\n }\n\n return result;\n }\n\n return Array.from(childNodes);\n}\n\nexport function isVisible(element: HTMLElement): boolean {\n // @ts-ignore\n if (typeof element.checkVisibility !== \"undefined\") {\n // @ts-ignore\n return element.checkVisibility({\n checkOpacity: false,\n checkVisibilityCSS: false\n });\n } else {\n return !!(\n element.offsetWidth \|\|\n element.offsetHeight \|\|\n element.getClientRects().length\n );\n }\n}\n\nexport function offset(element): { top: number; left: number } {\n if (!element.getClientRects().length) {\n return { top: 0, left: 0 };\n }\n\n let rect = element.getBoundingClientRect();\n let win = element.ownerDocument.defaultView;\n\n return {\n top: rect.top + win.pageYOffset,\n left: rect.left + win.pageXOffset\n };\n}\n\nexport async function raf() {\n return new Promise<void>((resolve) => {\n requestAnimationFrame(() => {\n resolve();\n });\n });\n}\n\nexport async function setTimeout(time: number) {\n return new Promise<void>((resolve) => {\n window.setTimeout(() => {\n resolve();\n }, time);\n });\n}\n\nexport enum StzhEnvironmentEnum {\n UNKNOWN = \"UNKNOWN\",\n DEV = \"DEV\",\n UAT = \"UAT\",\n PROD = \"PROD\",\n}\n\nexport function getStzhEnvironment(): StzhEnvironmentEnum {\n const url = window.location.href;\n if (\n url.includes(\"test.stadt-zuerich.loc\") \|\|\n url.match(/\\.dev\\.cmp\\.szh\\.loc/)\n ) {\n return StzhEnvironmentEnum.DEV;\n } else if (\n url.includes(\"integ.stadt-zuerich.ch\") \|\|\n url.includes(\"stzh-desi-unic-preview.netlify.app\") \|\|\n url.match(/\\.uat\\.cmp\\.szh\\.loc/)\n ) {\n return StzhEnvironmentEnum.UAT;\n } else if (\n url.includes(\"https://www.stadt-zuerich.ch\") \|\|\n url.includes(\"designsystem.stadt-zuerich.ch\") \|\|\n url.match(/\\.cmp\\.szh\\.loc/)\n ) {\n return StzhEnvironmentEnum.PROD;\n } else {\n return StzhEnvironmentEnum.UNKNOWN;\n }\n}\n\nexport function addWordBreakToLinks(links: HTMLElement[]) {\n links.forEach((link) => {\n if (link.textContent?.includes(\"_\")) {\n link.innerHTML = link.textContent.replace(/_/g, \"_<wbr>\");\n }\n });\n}\n\n// `extras.experimentalSlotFixes` stencil config flag resolves cloning light dom elements\n// so our own cloneElement / cloneWrappedStzhElement helpers are not needed right now\n// (used before in cardlist and sortable component).\n\n// export function children(node: Element) {\n// return childNodes(node).map((n: any) => n.nodeType === 1);\n// }\n\n// const nativeCloneNodeFn = Node.prototype.cloneNode;\n\n// export function cloneElement(node: Element, deep: boolean) {\n// const clonedNode = nativeCloneNodeFn.call(node, false);\n// const srcChildNodes = childNodes(node);\n\n// if (deep) {\n// for (let i = 0; i < srcChildNodes.length; i++) {\n// if (srcChildNodes[i].nodeType !== 2) {\n// const childClone = cloneElement(srcChildNodes[i], true);\n// clonedNode.appendChild(childClone);\n// }\n// }\n// }\n\n// return clonedNode;\n// }\n\n// // Clone an stzh-* element that is using stencil polyfilled slots (no shadow dom)\n// // and potentially wrapped in normal elements (e.g. angular component)\n// export function cloneWrappedStzhElement(elementToClone: Element): [Element, Element, Element] {\n// let clonedElement: Element;\n// let clonedStzhElement: Element;\n// let originalStzhElement: Element;\n\n// if (isStzhElement(elementToClone)) {\n// clonedElement = cloneElement(elementToClone, true);\n// clonedStzhElement = clonedElement;\n// originalStzhElement = elementToClone;\n// } else {\n// clonedElement = elementToClone.cloneNode() as Element;\n\n// let clonedInnerElementLast: Element = clonedElement;\n// let originalInnerElementLast: Element = elementToClone;\n\n// // clone inner root elements separately until we find a stzh element\n// while (originalInnerElementLast.children.length === 1 && !isStzhElement(originalInnerElementLast.children[0])) {\n// originalInnerElementLast = originalInnerElementLast.children[0];\n// const clonedInnerElementCurrent = originalInnerElementLast.cloneNode() as Element;\n\n// clonedInnerElementLast.appendChild(clonedInnerElementCurrent);\n// clonedInnerElementLast = clonedInnerElementCurrent;\n// }\n\n// if (isStzhElement(originalInnerElementLast.children[0])) {\n// clonedStzhElement = cloneElement(originalInnerElementLast.children[0], true);\n// originalStzhElement = originalInnerElementLast.children[0];\n// clonedInnerElementLast.appendChild(clonedStzhElement);\n// } else {\n// // no root stzh element found, so we give up and just deep clone the root\n// clonedElement = cloneElement(elementToClone, true);\n// }\n// }\n\n// return [clonedElement, clonedStzhElement, originalStzhElement];\n// }\n"]}
1	+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/utils/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { dashCase } from \"./string-utils\";\n\n// Determines whether an element has a slot. If name is specified, the function will look for a corresponding named\n// slot, otherwise it will look for a \"default\" slot (e.g. a non-empty text node or an element with no slot attribute).\nexport function hasSlot(el: HTMLElement, name?: string) {\n // Look for a named slot\n if (name) {\n return el.querySelector(`[slot=\"${name}\"]`) !== null;\n }\n\n // Look for a default slot\n return Array.from(childNodes(el)).some((node) => {\n if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== \"\") {\n return true;\n }\n\n if (node.nodeType === node.ELEMENT_NODE) {\n const el = node as HTMLElement;\n if (!el.hasAttribute(\"slot\")) {\n return true;\n }\n }\n\n return false;\n });\n}\n\nexport function setPropsIfNull(element: Element, attributes: any) {\n Object.keys(attributes).forEach((attribute) => {\n if (element.getAttribute(dashCase(attribute)) === null) {\n element[attribute] = attributes[attribute];\n }\n });\n}\n\nexport function setProps(element: Element, attributes: any) {\n Object.keys(attributes).forEach((attribute) => {\n element[attribute] = attributes[attribute];\n });\n}\n\nexport function isStzhElement(element: Element) {\n if (!element \|\| element.nodeType !== 1) {\n return false;\n }\n\n return element.tagName.toLowerCase().indexOf(\"stzh-\") === 0;\n}\n\n// returns content of <meta name=\"\" content=\"\"> tags or '' if empty/non existant\nexport function getMeta(name) {\n const meta = document.querySelector(\n `meta[name=\"${name}\"],[property=\"${name}\"]`\n );\n return meta ? meta.getAttribute(\"content\") : \"\";\n}\n\nexport function parents(node: Element \| Node) {\n const parents = [];\n\n while (node) {\n parents.unshift(node);\n node = node.parentNode;\n }\n\n return parents;\n}\n\nexport function childNodes(node: Element) {\n const childNodes = node.childNodes;\n\n // check if element is stencil element without shadow dom\n // and then detect elements that were slotted into the element\n if (node[\"s-sc\"]) {\n const result = [];\n\n for (let i = 0; i < childNodes.length; i++) {\n const slot = childNodes[i][\"s-nr\"];\n\n if (slot) {\n result.push(slot);\n }\n }\n\n return result;\n }\n\n return Array.from(childNodes);\n}\n\nexport function isVisible(element: HTMLElement): boolean {\n // @ts-ignore\n if (typeof element.checkVisibility !== \"undefined\") {\n // @ts-ignore\n return element.checkVisibility({\n checkOpacity: false,\n checkVisibilityCSS: false\n });\n } else {\n return !!(\n element.offsetWidth \|\|\n element.offsetHeight \|\|\n element.getClientRects().length\n );\n }\n}\n\nexport function offset(element): { top: number; left: number } {\n if (!element.getClientRects().length) {\n return { top: 0, left: 0 };\n }\n\n let rect = element.getBoundingClientRect();\n let win = element.ownerDocument.defaultView;\n\n return {\n top: rect.top + win.pageYOffset,\n left: rect.left + win.pageXOffset\n };\n}\n\nexport async function raf() {\n return new Promise<void>((resolve) => {\n requestAnimationFrame(() => {\n resolve();\n });\n });\n}\n\nexport async function setTimeout(time: number) {\n return new Promise<void>((resolve) => {\n window.setTimeout(() => {\n resolve();\n }, time);\n });\n}\n\nexport enum StzhEnvironmentEnum {\n UNKNOWN = \"UNKNOWN\",\n DEV = \"DEV\",\n UAT = \"UAT\",\n PROD = \"PROD\",\n}\n\nexport function getStzhEnvironment(): StzhEnvironmentEnum {\n const url = window.location.href;\n if (\n url.includes(\"test.stadt-zuerich.loc\") \|\|\n url.match(/\\.dev\\.cmp\\.szh\\.loc/)\n ) {\n return StzhEnvironmentEnum.DEV;\n } else if (\n url.includes(\"integ.stadt-zuerich.ch\") \|\|\n url.includes(\"stzh-desi-unic-preview.netlify.app\") \|\|\n url.match(/\\.uat\\.cmp\\.szh\\.loc/)\n ) {\n return StzhEnvironmentEnum.UAT;\n } else if (\n url.includes(\"https://www.stadt-zuerich.ch\") \|\|\n url.includes(\"designsystem.stadt-zuerich.ch\") \|\|\n url.match(/\\.cmp\\.szh\\.loc/)\n ) {\n return StzhEnvironmentEnum.PROD;\n } else {\n return StzhEnvironmentEnum.UNKNOWN;\n }\n}\n\nexport function addWordBreakToLinks(links: HTMLElement[]) {\n links.forEach((link) => {\n if (link.textContent?.includes(\"_\")) {\n link.innerHTML = link.textContent.replace(/_/g, \"_<wbr>\");\n }\n });\n}\n\nexport function getTheme() {\n const htmlElement = document.documentElement;\n return Array.from(htmlElement.classList).find(className => className.startsWith(\"stzh-theme-\"));\n}\n"]}