@oiz/stzh-components 3.1.0 → 3.2.0-beta1

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

@@ -724,12 +724,26 @@ the .has-focus class is used by the focus target */
   --stzh-color-scienceblue: rgba(var(--stzh-color-scienceblue-rgb) / 1);
 
   /* VBZ */
-  --stzh-color-deepcerulean-rgb: 5 127 172;
-  --stzh-color-deepcerulean: rgba(var(--stzh-color-deepcerulean-rgb) / 1);
-  --stzh-color-regalblue-rgb: 3 76 103;
-  --stzh-color-regalblue: rgba(var(--stzh-color-regalblue-rgb) / 1);
-  --stzh-color-coral-rgb: 228 105 76;
-  --stzh-color-coral: rgba(var(--stzh-color-coral-rgb) / 1);
+  --stzh-color-vbz-cyan10-rgb: 235 249 255;
+  --stzh-color-vbz-cyan10: rgba(var(--stzh-color-vbz-cyan10-rgb) / 1);
+  --stzh-color-vbz-cyan20-rgb: 194 238 255;
+  --stzh-color-vbz-cyan20: rgba(var(--stzh-color-vbz-cyan20-rgb) / 1);
+  --stzh-color-vbz-cyan30-rgb: 132 220 255;
+  --stzh-color-vbz-cyan30: rgba(var(--stzh-color-vbz-cyan30-rgb) / 1);
+  --stzh-color-vbz-cyan40-rgb: 52 197 254;
+  --stzh-color-vbz-cyan40: rgba(var(--stzh-color-vbz-cyan40-rgb) / 1);
+  --stzh-color-vbz-cyan50-rgb: 0 159 223;
+  --stzh-color-vbz-cyan50: rgba(var(--stzh-color-vbz-cyan50-rgb) / 1);
+  --stzh-color-vbz-cyan60-rgb: 5 127 172;
+  --stzh-color-vbz-cyan60: rgba(var(--stzh-color-vbz-cyan60-rgb) / 1);
+  --stzh-color-vbz-cyan70-rgb: 0 102 143;
+  --stzh-color-vbz-cyan70: rgba(var(--stzh-color-vbz-cyan70-rgb) / 1);
+  --stzh-color-vbz-cyan80-rgb: 3 76 103;
+  --stzh-color-vbz-cyan80: rgba(var(--stzh-color-vbz-cyan80-rgb) / 1);
+  --stzh-color-vbz-cyan90-rgb: 0 44 61;
+  --stzh-color-vbz-cyan90: rgba(var(--stzh-color-vbz-cyan90-rgb) / 1);
+  --stzh-color-vbz-cyan100-rgb: 0 29 41;
+  --stzh-color-vbz-cyan100: rgba(var(--stzh-color-vbz-cyan100-rgb) / 1);
 
   /* PKZH */
   --stzh-color-shakespeare-rgb: 74 150 200;
@@ -1310,27 +1324,197 @@ the .has-focus class is used by the focus target */
 }
 
 .stzh-theme-vbz {
-  --stzh-color-primary-rgb: var(--stzh-color-deepcerulean-rgb);
-  --stzh-color-primary-hover-rgb: var(--stzh-color-regalblue-rgb);
+  --stzh-color-primary10-rgb: var(--stzh-color-vbz-cyan10-rgb);
+  --stzh-color-primary10: rgba(var(--stzh-color-primary10-rgb) / 1);
+  --stzh-color-primary20-rgb: var(--stzh-color-vbz-cyan20-rgb);
+  --stzh-color-primary20: rgba(var(--stzh-color-primary20-rgb) / 1);
+  --stzh-color-primary30-rgb: var(--stzh-color-vbz-cyan30-rgb);
+  --stzh-color-primary30: rgba(var(--stzh-color-primary30-rgb) / 1);
+  --stzh-color-primary40-rgb: var(--stzh-color-vbz-cyan40-rgb);
+  --stzh-color-primary40: rgba(var(--stzh-color-primary40-rgb) / 1);
+  --stzh-color-primary50-rgb: var(--stzh-color-vbz-cyan50-rgb);
+  --stzh-color-primary50: rgba(var(--stzh-color-primary50-rgb) / 1);
+  --stzh-color-primary60-rgb: var(--stzh-color-vbz-cyan60-rgb);
+  --stzh-color-primary60: rgba(var(--stzh-color-primary60-rgb) / 1);
+  --stzh-color-primary70-rgb: var(--stzh-color-vbz-cyan70-rgb);
+  --stzh-color-primary70: rgba(var(--stzh-color-primary70-rgb) / 1);
+  --stzh-color-primary80-rgb: var(--stzh-color-vbz-cyan80-rgb);
+  --stzh-color-primary80: rgba(var(--stzh-color-primary80-rgb) / 1);
+  --stzh-color-primary90-rgb: var(--stzh-color-vbz-cyan90-rgb);
+  --stzh-color-primary90: rgba(var(--stzh-color-primary90-rgb) / 1);
+  --stzh-color-primary100-rgb: var(--stzh-color-vbz-cyan100-rgb);
+  --stzh-color-primary100: rgba(var(--stzh-color-primary100-rgb) / 1);
 
-  --stzh-font-family-heavy: var(--stzh-font-family-bold);
-  --stzh-font-family-medium: var(--stzh-font-family-regular);
+  --stzh-color-secondary10-rgb: var(--stzh-color-coolgrey10-rgb);
+  --stzh-color-secondary10: rgba(var(--stzh-color-secondary10-rgb) / 1);
+  --stzh-color-secondary20-rgb: var(--stzh-color-coolgrey20-rgb);
+  --stzh-color-secondary20: rgba(var(--stzh-color-secondary20-rgb) / 1);
+  --stzh-color-secondary30-rgb: var(--stzh-color-coolgrey30-rgb);
+  --stzh-color-secondary30: rgba(var(--stzh-color-secondary30-rgb) / 1);
+  --stzh-color-secondary40-rgb: var(--stzh-color-coolgrey40-rgb);
+  --stzh-color-secondary40: rgba(var(--stzh-color-secondary40-rgb) / 1);
+  --stzh-color-secondary50-rgb: var(--stzh-color-coolgrey50-rgb);
+  --stzh-color-secondary50: rgba(var(--stzh-color-secondary50-rgb) / 1);
+  --stzh-color-secondary60-rgb: var(--stzh-color-coolgrey60-rgb);
+  --stzh-color-secondary60: rgba(var(--stzh-color-secondary60-rgb) / 1);
+  --stzh-color-secondary70-rgb: var(--stzh-color-coolgrey70-rgb);
+  --stzh-color-secondary70: rgba(var(--stzh-color-secondary70-rgb) / 1);
+  --stzh-color-secondary80-rgb: var(--stzh-color-coolgrey80-rgb);
+  --stzh-color-secondary80: rgba(var(--stzh-color-secondary80-rgb) / 1);
+  --stzh-color-secondary90-rgb: var(--stzh-color-coolgrey90-rgb);
+  --stzh-color-secondary90: rgba(var(--stzh-color-secondary90-rgb) / 1);
+  --stzh-color-secondary100-rgb: var(--stzh-color-coolgrey100-rgb);
+  --stzh-color-secondary100: rgba(var(--stzh-color-secondary100-rgb) / 1);
+
+  --stzh-color-info10-rgb: var(--stzh-color-cobaltblue10-rgb);
+  --stzh-color-info10: rgba(var(--stzh-color-info10-rgb) / 1);
+  --stzh-color-info20-rgb: var(--stzh-color-cobaltblue20-rgb);
+  --stzh-color-info20: rgba(var(--stzh-color-info20-rgb) / 1);
+  --stzh-color-info30-rgb: var(--stzh-color-cobaltblue30-rgb);
+  --stzh-color-info30: rgba(var(--stzh-color-info30-rgb) / 1);
+  --stzh-color-info40-rgb: var(--stzh-color-cobaltblue40-rgb);
+  --stzh-color-info40: rgba(var(--stzh-color-info40-rgb) / 1);
+  --stzh-color-info50-rgb: var(--stzh-color-cobaltblue50-rgb);
+  --stzh-color-info50: rgba(var(--stzh-color-info50-rgb) / 1);
+  --stzh-color-info60-rgb: var(--stzh-color-cobaltblue60-rgb);
+  --stzh-color-info60: rgba(var(--stzh-color-info60-rgb) / 1);
+  --stzh-color-info70-rgb: var(--stzh-color-cobaltblue70-rgb);
+  --stzh-color-info70: rgba(var(--stzh-color-info70-rgb) / 1);
+  --stzh-color-info80-rgb: var(--stzh-color-cobaltblue80-rgb);
+  --stzh-color-info80: rgba(var(--stzh-color-info80-rgb) / 1);
+  --stzh-color-info90-rgb: var(--stzh-color-cobaltblue90-rgb);
+  --stzh-color-info90: rgba(var(--stzh-color-info90-rgb) / 1);
+  --stzh-color-info100-rgb: var(--stzh-color-cobaltblue100-rgb);
+  --stzh-color-info100: rgba(var(--stzh-color-info100-rgb) / 1);
+
+  /* Font families */
+  --stzh-font-family-regular: 'HelveticaNeueLTW01_55Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --stzh-font-family-medium: 'HelveticaNeueLTW01_55Roman', '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: 'HelveticaNeueLTW05_65Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   --stzh-font-family-title: var(--stzh-font-family-light);
+  --stzh-font-weight-regular: normal;
+  --stzh-font-weight-medium: 400;
+  --stzh-font-weight-bold: 500;
+  --stzh-font-weight-heavy: 500;
 
-  /** Toasts */
-  /*
-  TODO: remove font family variables if not needed anymore
+  /* Buttons */
+  --stzh-button-background-color: var(--stzh-color-primary60);
+  --stzh-button-hover-background-color: var(--stzh-color-primary80);
+  --stzh-button-disabled-background-color: var(--stzh-color-grey70);
+
+  --stzh-button-secondary-background-color: var(--stzh-color-secondary30);
+  --stzh-button-secondary-hover-background-color: var(--stzh-color-secondary40);
+  --stzh-button-secondary-disabled-background-color: var(--stzh-color-grey20);
+  --stzh-button-secondary-color: var(--stzh-color-primary70);
+  --stzh-button-secondary-hover-color: var(--stzh-color-primary80);
+  --stzh-button-secondary-disabled-color: var(--stzh-color-grey70);
+
+  --stzh-button-tertiary-background-color: var(--stzh-color-white);
+  --stzh-button-tertiary-hover-background-color: var(--stzh-color-secondary20);
+  --stzh-button-tertiary-disabled-background-color: var(--stzh-color-white);
+  --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);
 
-  --stzh-toast-label-font-family: var(--stzh-font-family-regular);
-  --stzh-toast-label-font-weight: var(--stzh-font-weight-regular);
-  --stzh-toast-label-font-style: var(--stzh-font-style-regular);
+  /* Links */
+  --stzh-link-color: var(--stzh-color-primary50);
+  --stzh-link-hover-color: var(--stzh-color-primary60);
 
-  --stzh-toast-background-color: var(--stzh-color-white);
-  --stzh-toast-label-color: var(--stzh-base-color);
-  --stzh-toast-close-color: var(--stzh-color-primary);
-  --stzh-toast-button-color: var(--stzh-color-primary);
-  --stzh-toast-icon-color: var(--stzh-color-primary);
-  */
+  /* Header */
+  --stzh-header-logobar-background-color: transparent;
+
+  /* Tooltip */
+  --stzh-tooltip-color: var(--stzh-color-secondary70);
+  --stzh-tooltip-background-color: var(--stzh-color-secondary10);
+  --stzh-tooltip-link-color: var(--stzh-color-primary60);
+  --stzh-tooltip-hover-link-color: var(--stzh-color-primary70);
+}
+
+/* ZVV Overrides */
+#zvv-searchmask > div {
+  margin: 0;
+  padding: 0;
+}
+
+.stzh-theme-mkz-violet {
+  --stzh-color-secondary10-rgb: var(--stzh-color-violet10-rgb);
+  --stzh-color-secondary10: rgba(var(--stzh-color-secondary10-rgb) / 1);
+  --stzh-color-secondary20-rgb: var(--stzh-color-violet20-rgb);
+  --stzh-color-secondary20: rgba(var(--stzh-color-secondary20-rgb) / 1);
+  --stzh-color-secondary30-rgb: var(--stzh-color-violet30-rgb);
+  --stzh-color-secondary30: rgba(var(--stzh-color-secondary30-rgb) / 1);
+  --stzh-color-secondary40-rgb: var(--stzh-color-violet40-rgb);
+  --stzh-color-secondary40: rgba(var(--stzh-color-secondary40-rgb) / 1);
+  --stzh-color-secondary50-rgb: var(--stzh-color-violet50-rgb);
+  --stzh-color-secondary50: rgba(var(--stzh-color-secondary50-rgb) / 1);
+  --stzh-color-secondary60-rgb: var(--stzh-color-violet60-rgb);
+  --stzh-color-secondary60: rgba(var(--stzh-color-secondary60-rgb) / 1);
+  --stzh-color-secondary70-rgb: var(--stzh-color-violet70-rgb);
+  --stzh-color-secondary70: rgba(var(--stzh-color-secondary70-rgb) / 1);
+  --stzh-color-secondary80-rgb: var(--stzh-color-violet80-rgb);
+  --stzh-color-secondary80: rgba(var(--stzh-color-secondary80-rgb) / 1);
+  --stzh-color-secondary90-rgb: var(--stzh-color-violet90-rgb);
+  --stzh-color-secondary90: rgba(var(--stzh-color-secondary90-rgb) / 1);
+  --stzh-color-secondary100-rgb: var(--stzh-color-violet100-rgb);
+  --stzh-color-secondary100: rgba(var(--stzh-color-secondary100-rgb) / 1);
+
+  /* Header */
+  --stzh-header-logobar-background-color: var(--stzh-color-secondary50);
+
+  /* Footer */
+  --stzh-footer-background-color: var(--stzh-color-secondary100);
+  --stzh-footer-background-color-menu: var(--stzh-color-secondary80);
+
+  /* Homepage Service Highlights */
+  --stzh-homepage-service-highlights-topnews-subtitle-font: var(--stzh-font-family-heavy);
+  --stzh-homepage-service-highlights-topnews-item-subtitle-color: var(--stzh-color-primary60);
+  --stzh-homepage-service-highlights-topnews-item-subtitle-highlighted-color: var(--stzh-color-primary60);
+
+  /* Tag */
+  --stzh-tag-color: var(--stzh-color-secondary60);
+}
+
+.stzh-theme-mkz-cyan {
+  --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);
+
+  /* Header */
+  --stzh-header-logobar-background-color: var(--stzh-color-secondary50);
+
+  /* Pagetitle */
+  --stzh-pagetitle-background-color: var(--stzh-color-secondary20);
+
+  /* Footer */
+  --stzh-footer-background-color: var(--stzh-color-secondary100);
+  --stzh-footer-background-color-menu: var(--stzh-color-secondary80);
+
+  /* Homepage Service Highlights */
+  --stzh-homepage-service-highlights-topnews-subtitle-font: var(--stzh-font-family-heavy);
+  --stzh-homepage-service-highlights-topnews-item-subtitle-color: var(--stzh-color-primary60);
+  --stzh-homepage-service-highlights-topnews-item-subtitle-highlighted-color: var(--stzh-color-primary60);
+
+  /* Tag */
+  --stzh-tag-color: var(--stzh-color-secondary60);
 }
 
 .stzh-theme-uvz {

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

@@ -183,6 +183,7 @@
 
 .stzh-sticky-actions {
   /* Active scrollup variant */
+  /* Is not slotted */
 }
 .stzh-sticky-actions__container {
   display: flex;
@@ -219,4 +220,7 @@
 }
 .stzh-sticky-actions.has-active-scrollup .stzh-sticky-actions__chat-wrapper {
   transform: translateX(calc(var(--gap) / -1));
+}
+.stzh-sticky-actions.is-not-slotted {
+  height: 0;
 }

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

@@ -1,4 +1,4 @@
-import { Host, h, forceUpdate, } from "@stencil/core";
+import { forceUpdate, h, Host } from "@stencil/core";
 import throttle from "lodash/throttle";
 import { hasSlot } from "../../utils/utils";
 /**
@@ -16,19 +16,19 @@ export class StzhStickyActions {
       }
     };
     this.handleScrollupResize = throttle(this.updateScrollupWidth, 100);
-    this.pagetitleQuery = 'stzh-pagetitle, stzh-pagetitle-hero';
+    this.pagetitleQuery = "stzh-pagetitle, stzh-pagetitle-hero, stzh-pagetitle-home, stzh-pi-pagetitle, stzh-pi-pagetitle, stzh-homepage-service-highlights";
     this.hasActiveScrollup = false;
+    this.isSlotted = true;
   }
   hasActiveScrollupWatcher(newValue) {
     document.documentElement.style.setProperty("--stzh-sticky-actions-scrollup-is-active", newValue ? "1" : "0");
     document.documentElement.style.setProperty("--stzh-sticky-actions-scrollup-is-not-active", newValue ? "0" : "1");
   }
   componentDidLoad() {
-    const pagetitle = typeof this.pagetitleQuery === "string"
-      ? document.querySelector(this.pagetitleQuery)
-      : this.pagetitleQuery();
+    this.isSlotted = !!this.element.assignedSlot;
+    const pagetitle = typeof this.pagetitleQuery === "string" ? document.querySelector(this.pagetitleQuery) : this.pagetitleQuery();
     if (pagetitle) {
-      this.observer = new IntersectionObserver(this.observePagetitle, { rootMargin: "0px", });
+      this.observer = new IntersectionObserver(this.observePagetitle, { rootMargin: "0px" });
       this.observer.observe(pagetitle);
     }
     requestAnimationFrame(() => {
@@ -52,8 +52,9 @@ export class StzhStickyActions {
       "has-chat": chatSlotUsed,
       "has-scrollup": scrollupSlotUsed,
       "has-active-scrollup": this.hasActiveScrollup,
+      "is-not-slotted": !this.isSlotted,
     };
-    return (h(Host, null, h("div", { class: classes, "data-stzh-sticky-width-container": true }, h("stzh-sticky", { name: "actions", class: "stzh-sticky-actions__sticky", position: "fixed", variant: "transparent", disableStickyTop: true }, h("div", { class: "stzh-sticky-actions__container" }, h("div", { class: "stzh-sticky-actions__chat-wrapper" }, h("slot", { name: "chat", onSlotchange: () => forceUpdate(this.element) })), h("div", { ref: (el) => (this.scrollupElement = el), class: "stzh-sticky-actions__scrollup-wrapper" }, h("slot", { name: "scrollup", onSlotchange: () => forceUpdate(this.element) })))))));
+    return (h(Host, null, h("div", { class: classes, "data-stzh-sticky-width-container": true }, h("stzh-sticky", { name: "actions", class: "stzh-sticky-actions__sticky", position: "fixed", variant: "transparent", disableStickyTop: true }, h("div", { class: "stzh-sticky-actions__container" }, h("div", { class: "stzh-sticky-actions__chat-wrapper" }, h("slot", { name: "chat", onSlotchange: () => forceUpdate(this.element) })), h("div", { ref: el => (this.scrollupElement = el), class: "stzh-sticky-actions__scrollup-wrapper" }, h("slot", { name: "scrollup", onSlotchange: () => forceUpdate(this.element) })))))));
   }
   static get is() { return "stzh-sticky-actions"; }
   static get encapsulation() { return "shadow"; }
@@ -90,13 +91,14 @@ export class StzhStickyActions {
         },
         "attribute": "pagetitle-query",
         "reflect": false,
-        "defaultValue": "'stzh-pagetitle, stzh-pagetitle-hero'"
+        "defaultValue": "\"stzh-pagetitle, stzh-pagetitle-hero, stzh-pagetitle-home, stzh-pi-pagetitle, stzh-pi-pagetitle, stzh-homepage-service-highlights\""
       }
     };
   }
   static get states() {
     return {
-      "hasActiveScrollup": {}
+      "hasActiveScrollup": {},
+      "isSlotted": {}
     };
   }
   static get elementRef() { return "element"; }

package/dist/collection/components/stzh-sticky-actions/stzh-sticky-actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-sticky-actions.js","sourceRoot":"","sources":["../../../../src/components/stzh-sticky-actions/stzh-sticky-actions.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  forceUpdate,\n  State,\n  Prop,\n  Watch,\n} from \"@stencil/core\";\n\nimport throttle from \"lodash/throttle\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for content that should stick to chat place\n */\n@Component({\n  tag: \"stzh-sticky-actions\",\n  styleUrl: \"stzh-sticky-actions.scss\",\n  shadow: true\n})\nexport class StzhStickyActions {\n  /** Query used to get pagetitle element (will show scrollup when passed). */\n  @Prop() pagetitleQuery: string | (() => HTMLElement) = 'stzh-pagetitle, stzh-pagetitle-hero';\n\n  @State() hasActiveScrollup = false;\n\n  @Element() element: HTMLStzhStickyActionsElement;\n\n  @Watch(\"hasActiveScrollup\")\n  hasActiveScrollupWatcher(newValue: boolean) {\n    document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-is-active\", newValue ? \"1\" : \"0\");\n    document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-is-not-active\", newValue ? \"0\" : \"1\");\n  }\n\n  private observer: IntersectionObserver;\n  private resizeObserver: ResizeObserver;\n  private scrollupElement: HTMLElement;\n\n  private observePagetitle = (entries: IntersectionObserverEntry[]) => {\n    this.hasActiveScrollup = !entries[0].isIntersecting;\n  }\n\n  private updateScrollupWidth = () => {\n    if (this.scrollupElement && this.element.isConnected) {\n      const { width } = this.scrollupElement.getBoundingClientRect();\n      document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-width\", `${width}px`);\n    }\n  }\n\n  private handleScrollupResize = throttle(this.updateScrollupWidth, 100);\n\n  componentDidLoad() {\n    const pagetitle = typeof this.pagetitleQuery === \"string\"\n      ? document.querySelector(this.pagetitleQuery)\n      : this.pagetitleQuery();\n\n    if (pagetitle) {\n      this.observer = new IntersectionObserver(this.observePagetitle, { rootMargin: \"0px\", });\n      this.observer.observe(pagetitle);\n    }\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        this.updateScrollupWidth();\n\n        this.resizeObserver = new ResizeObserver(this.handleScrollupResize);\n        this.resizeObserver.observe(this.scrollupElement);\n      });\n    });\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n    this.resizeObserver?.disconnect();\n  }\n\n  render() {\n    const chatSlotUsed = hasSlot(this.element, \"chat\");\n    const scrollupSlotUsed = hasSlot(this.element, \"scrollup\");\n\n    const classes = {\n      \"stzh-sticky-actions\": true,\n      \"has-chat\": chatSlotUsed,\n      \"has-scrollup\": scrollupSlotUsed,\n      \"has-active-scrollup\": this.hasActiveScrollup,\n    };\n\n    return (\n      <Host>\n        <div class={classes} data-stzh-sticky-width-container>\n          <stzh-sticky\n            name=\"actions\"\n            class=\"stzh-sticky-actions__sticky\"\n            position=\"fixed\"\n            variant=\"transparent\"\n            disableStickyTop={true}\n          >\n            <div class=\"stzh-sticky-actions__container\">\n              <div class=\"stzh-sticky-actions__chat-wrapper\">\n                <slot name=\"chat\" onSlotchange={() => forceUpdate(this.element)}></slot>\n              </div>\n              <div\n                ref={(el) => (this.scrollupElement = el as HTMLElement)}\n                class=\"stzh-sticky-actions__scrollup-wrapper\"\n              >\n                <slot name=\"scrollup\" onSlotchange={() => forceUpdate(this.element)}></slot>\n              </div>\n            </div>\n          </stzh-sticky>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-sticky-actions.js","sourceRoot":"","sources":["../../../../src/components/stzh-sticky-actions/stzh-sticky-actions.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, forceUpdate, h, Host, Prop, State, Watch } from \"@stencil/core\";\n\nimport throttle from \"lodash/throttle\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for content that should stick to chat place\n */\n@Component({\n  tag: \"stzh-sticky-actions\",\n  styleUrl: \"stzh-sticky-actions.scss\",\n  shadow: true,\n})\nexport class StzhStickyActions {\n  /** Query used to get pagetitle element (will show scrollup when passed). */\n  @Prop() pagetitleQuery: string | (() => HTMLElement) =\n    \"stzh-pagetitle, stzh-pagetitle-hero, stzh-pagetitle-home, stzh-pi-pagetitle, stzh-pi-pagetitle, stzh-homepage-service-highlights\";\n\n  @State() hasActiveScrollup = false;\n  @State() isSlotted = true;\n\n  @Element() element: HTMLStzhStickyActionsElement;\n\n  @Watch(\"hasActiveScrollup\")\n  hasActiveScrollupWatcher(newValue: boolean) {\n    document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-is-active\", newValue ? \"1\" : \"0\");\n    document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-is-not-active\", newValue ? \"0\" : \"1\");\n  }\n\n  private observer: IntersectionObserver;\n  private resizeObserver: ResizeObserver;\n  private scrollupElement: HTMLElement;\n\n  private observePagetitle = (entries: IntersectionObserverEntry[]) => {\n    this.hasActiveScrollup = !entries[0].isIntersecting;\n  };\n\n  private updateScrollupWidth = () => {\n    if (this.scrollupElement && this.element.isConnected) {\n      const { width } = this.scrollupElement.getBoundingClientRect();\n      document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-width\", `${width}px`);\n    }\n  };\n\n  private handleScrollupResize = throttle(this.updateScrollupWidth, 100);\n\n  componentDidLoad() {\n    this.isSlotted = !!this.element.assignedSlot;\n    const pagetitle =\n      typeof this.pagetitleQuery === \"string\" ? document.querySelector(this.pagetitleQuery) : this.pagetitleQuery();\n\n    if (pagetitle) {\n      this.observer = new IntersectionObserver(this.observePagetitle, { rootMargin: \"0px\" });\n      this.observer.observe(pagetitle);\n    }\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        this.updateScrollupWidth();\n\n        this.resizeObserver = new ResizeObserver(this.handleScrollupResize);\n        this.resizeObserver.observe(this.scrollupElement);\n      });\n    });\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n    this.resizeObserver?.disconnect();\n  }\n\n  render() {\n    const chatSlotUsed = hasSlot(this.element, \"chat\");\n    const scrollupSlotUsed = hasSlot(this.element, \"scrollup\");\n\n    const classes = {\n      \"stzh-sticky-actions\": true,\n      \"has-chat\": chatSlotUsed,\n      \"has-scrollup\": scrollupSlotUsed,\n      \"has-active-scrollup\": this.hasActiveScrollup,\n      \"is-not-slotted\": !this.isSlotted,\n    };\n\n    return (\n      <Host>\n        <div class={classes} data-stzh-sticky-width-container>\n          <stzh-sticky\n            name=\"actions\"\n            class=\"stzh-sticky-actions__sticky\"\n            position=\"fixed\"\n            variant=\"transparent\"\n            disableStickyTop={true}\n          >\n            <div class=\"stzh-sticky-actions__container\">\n              <div class=\"stzh-sticky-actions__chat-wrapper\">\n                <slot name=\"chat\" onSlotchange={() => forceUpdate(this.element)}></slot>\n              </div>\n              <div ref={el => (this.scrollupElement = el as HTMLElement)} class=\"stzh-sticky-actions__scrollup-wrapper\">\n                <slot name=\"scrollup\" onSlotchange={() => forceUpdate(this.element)}></slot>\n              </div>\n            </div>\n          </stzh-sticky>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -175,18 +175,22 @@
 * @prop --stzh-tooltip-padding: **Global**: Padding of tooltip (default `var(--stzh-space-small)`)
 * @prop --stzh-tooltip-border-radius: **Global**: Border radius of tooltip (default `3px`)
 * @prop --stzh-tooltip-drop-shadow: **Global**: Border radius of tooltip (default `drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.16))`)
+* @prop --stzh-tooltip-color: **Global**: Color of tooltip text
+* @prop --stzh-tooltip-background-color: **Global**: Background color of tooltip
+* @prop --stzh-tooltip-link-color: **Global**: Color for link within tooltip
+* @prop --stzh-tooltip-hover-link-color: **Global**: Hover color for link within tooltip
 */
 :host {
   display: contents;
-  --color: var(--stzh-color-white);
-  --background-color: var(--stzh-color-coolgrey60);
+  --color: var(--stzh-tooltip-color, var(--stzh-color-white));
+  --background-color: var(--stzh-tooltip-background-color, var(--stzh-color-coolgrey60));
   --width: var(--stzh-tooltip-width);
   --min-width: var(--stzh-tooltip-min-width);
   --max-width: var(--stzh-tooltip-max-width);
   --padding: var(--stzh-tooltip-padding);
   --border-radius: var(--stzh-tooltip-border-radius);
-  --link-color: var(--stzh-color-white);
-  --hover-link-color: var(--stzh-color-white70op);
+  --link-color: var(--stzh-tooltip-link-color, var(--stzh-color-white));
+  --hover-link-color: var(--stzh-tooltip-hover-link-color, var(--stzh-color-white70op));
 }
 :host[size=small] {
   --padding: var(--stzh-tooltip-small-padding);

package/dist/collection/components/stzh-upload/models/stzh-photographing-configuration.dto.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=stzh-photographing-configuration.dto.js.map

package/dist/collection/components/stzh-upload/models/stzh-photographing-configuration.dto.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-photographing-configuration.dto.js","sourceRoot":"","sources":["../../../../../src/components/stzh-upload/models/stzh-photographing-configuration.dto.ts"],"names":[],"mappings":"","sourcesContent":["export interface StzhPhotographingConfigurationDto {\n  stage: string;\n  wsClientUrl: string;\n  publicEndpoint: string;\n}\n"]}

package/dist/collection/components/stzh-upload/models/stzh-photographing-pdf-file.dto.js

@@ -0,0 +1,3 @@
+export class StzhPhotographingPdfFileDto {
+}
+//# sourceMappingURL=stzh-photographing-pdf-file.dto.js.map

package/dist/collection/components/stzh-upload/models/stzh-photographing-pdf-file.dto.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-photographing-pdf-file.dto.js","sourceRoot":"","sources":["../../../../../src/components/stzh-upload/models/stzh-photographing-pdf-file.dto.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,2BAA2B;CAIvC","sourcesContent":["export class StzhPhotographingPdfFileDto {\n  name: string;\n  size: number;\n  downloadLink: string;\n}\n"]}

package/dist/collection/components/stzh-upload/models/stzh-photographing-url-details.dto.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=stzh-photographing-url-details.dto.js.map

package/dist/collection/components/stzh-upload/models/stzh-photographing-url-details.dto.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-photographing-url-details.dto.js","sourceRoot":"","sources":["../../../../../src/components/stzh-upload/models/stzh-photographing-url-details.dto.ts"],"names":[],"mappings":"","sourcesContent":["export interface StzhPhotographingUrlDetailsDto {\n  url: string;\n  userId?: string;\n}\n"]}

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

@@ -172,12 +172,12 @@ stzh-upload {
   /* default outline value, which will be applied to all elements receiving focus
   the .has-focus class is used by the focus target */
   --list-grid-template-areas: var(
-    --stzh-upload-list-grid-template-areas,
-    "list list list list"
+      --stzh-upload-list-grid-template-areas,
+      "list list list list"
   );
   --list-grid-template-columns: var(
-    --stzh-upload-list-grid-template-columns,
-    repeat(4, minmax(0, 1fr))
+      --stzh-upload-list-grid-template-columns,
+      repeat(4, minmax(0, 1fr))
   );
 }
 stzh-upload[hidden] {
@@ -213,20 +213,20 @@ stzh-upload .stzh-fylingfocus-focused::-moz-focus-inner {
 @media screen and (min-width: 600px) {
   stzh-upload {
     --list-grid-template-areas: var(
-      --stzh-upload-list-grid-template-areas,
-      "list list list ."
+        --stzh-upload-list-grid-template-areas,
+        "list list list ."
     );
   }
 }
 @media screen and (min-width: 900px) {
   stzh-upload {
     --list-grid-template-areas: var(
-      --stzh-upload-list-grid-template-areas,
-      "list list list list list . . ."
+        --stzh-upload-list-grid-template-areas,
+        "list list list list list . . ."
     );
     --list-grid-template-columns: var(
-      --stzh-upload-list-grid-template-columns,
-      repeat(8, minmax(0, 1fr))
+        --stzh-upload-list-grid-template-columns,
+        repeat(8, minmax(0, 1fr))
     );
   }
 }
@@ -249,6 +249,7 @@ stzh-upload[disabled]:not([disabled=false]) {
   /* Hidden progressbar */
   /* Invalid */
   /* Disabled */
+  /* Mhotographing */
 }
 .stzh-upload__marker-symbol {
   font-family: var(--stzh-font-family-medium);
@@ -388,6 +389,7 @@ stzh-upload[disabled]:not([disabled=false]) {
   }
 }
 .stzh-upload__heading-wrapper {
+  width: 100%;
   font-family: var(--stzh-font-family-heavy);
   font-weight: var(--stzh-font-weight-heavy);
   font-style: var(--stzh-font-style-heavy);
@@ -401,12 +403,28 @@ stzh-upload[disabled]:not([disabled=false]) {
   transition: color var(--stzh-base-transition-animation-speed);
 }
 .stzh-upload__heading-inner-wrapper {
+  width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--stzh-space-xsmall);
 }
-.stzh-upload__button-wrapper {
+.stzh-upload__buttons-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--stzh-space-medium);
+  width: 100%;
+}
+@media screen and (min-width: 900px) {
+  .stzh-upload__buttons-wrapper {
+    flex-direction: row;
+    justify-content: center;
+  }
+}
+.stzh-upload__button, .stzh-upload__button-scan {
+  width: 100%;
+}
+.stzh-upload__hint-wrapper {
   font-family: var(--stzh-font-family-medium);
   font-weight: var(--stzh-font-weight-medium);
   font-style: var(--stzh-font-style-medium);
@@ -666,4 +684,59 @@ stzh-upload[disabled]:not([disabled=false]) {
 .stzh-upload--is-disabled .stzh-upload__clickarea {
   cursor: not-allowed;
   background-color: var(--stzh-color-grey10);
+}
+.stzh-upload-photographing__info:not(:last-child) {
+  padding-bottom: var(--stzh-space-xxlarge);
+}
+@media screen and (min-width: 900px) {
+  .stzh-upload-photographing__info:not(:last-child) {
+    padding-bottom: var(--stzh-space-xxxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-upload-photographing__info:not(:last-child) {
+    padding-bottom: var(--stzh-space-xxxxlarge);
+  }
+}
+.stzh-upload-photographing__text-qrcode {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: var(--stzh-space-large);
+}
+.stzh-upload-photographing-qrcode {
+  width: 7.5rem;
+  height: 7.5rem;
+}
+@media screen and (min-width: 1260px) {
+  .stzh-upload-photographing-qrcode {
+    width: 8.75rem;
+    height: 8.75rem;
+  }
+}
+.stzh-upload-photographing-link {
+  margin-top: var(--stzh-space-medium);
+  word-break: break-word;
+}
+@media screen and (min-width: 900px) {
+  .stzh-upload-photographing-link {
+    margin-top: var(--stzh-space-large);
+  }
+}
+.stzh-upload-photographing__back-button {
+  margin-bottom: var(--stzh-space-medium);
+}
+@media screen and (min-width: 600px) {
+  .stzh-upload-photographing__back-button {
+    margin-bottom: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-upload-photographing__back-button {
+    margin-bottom: var(--stzh-space-xlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-upload-photographing__back-button {
+    margin-bottom: var(--stzh-space-xxlarge);
+  }
 }