@swisspost/internet-header 1.8.3-beta.1 → 1.9.0

package/dist/collection/components/post-internet-breadcrumbs/post-internet-breadcrumbs.css

@@ -1,3 +1,10 @@
+/**
+ * Colors used by the post style guide
+ */
+/**
+ * Maps. Allow maps to have custom colors from the project
+ * by always merging into a default empty map
+ */
 /**
  * Colors used by the post style guide
  */
@@ -14,117 +21,15 @@
  * will be available as sass-variables
  * but should not be used.
 */
-/**
- * Colors used by the post style guide
- */
-/**
- * Maps. Allow maps to have custom colors from the project
- * by always merging into a default empty map
- */
 /*!
- * Bootstrap Utilities v5.1.3 (https://getbootstrap.com/)
- * Copyright 2011-2021 The Bootstrap Authors
- * Copyright 2011-2021 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
-
- * The MIT License (MIT)
-
- * Copyright (c) 2011-2020 Twitter, Inc.
- * Copyright (c) 2011-2020 The Bootstrap Authors
-
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
-
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
-
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
+ * Copyright 2021 by Swiss Post, Information Technology
  */
-.btn-close {
-  --bs-btn-close-color: #000;
-  --bs-btn-close-bg: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath opacity='1' fill='%23000000' d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/g%3E%3C/svg%3E");
-  --bs-btn-close-opacity: 0.5;
-  --bs-btn-close-hover-opacity: 0.75;
-  --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(51, 51, 51, 0.25);
-  --bs-btn-close-focus-opacity: 1;
-  --bs-btn-close-disabled-opacity: 0.25;
-  --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
-  box-sizing: content-box;
-  width: 1.5rem;
-  height: 1.5rem;
-  padding: 1rem 1rem;
-  color: var(--bs-btn-close-color);
-  background: transparent var(--bs-btn-close-bg) center/1.5rem auto no-repeat;
-  border: 0;
-  border-radius: 3px;
-  opacity: var(--bs-btn-close-opacity);
-}
-.btn-close:hover {
-  color: var(--bs-btn-close-color);
-  text-decoration: none;
-  opacity: var(--bs-btn-close-hover-opacity);
-}
-.btn-close:focus {
-  outline: 0;
-  box-shadow: var(--bs-btn-close-focus-shadow);
-  opacity: var(--bs-btn-close-focus-opacity);
-}
-.btn-close:disabled, .btn-close.disabled {
-  pointer-events: none;
-  user-select: none;
-  opacity: var(--bs-btn-close-disabled-opacity);
-}
-
-.btn-close-white {
-  filter: var(--bs-btn-close-white-filter);
-}
-
-[data-bs-theme=dark] .btn-close {
-  filter: var(--bs-btn-close-white-filter);
-}
-
-.btn-close {
-  height: unset;
-  min-height: 1.5rem;
-}
-@media (forced-colors: active), (-ms-high-contrast: active), (-ms-high-contrast: white-on-black) {
-  .btn-close {
-    opacity: 1;
-    background: transparent url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath opacity='1' fill='%23ffffff' d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/g%3E%3C/svg%3E") center/1.5rem auto no-repeat;
-  }
-}
-.btn-close:focus {
-  outline: 2px solid var(--post-contrast-color);
-  box-shadow: none;
-}
-.btn-close:focus:not(:focus-visible) {
-  outline: 0;
-}
-
-@media (forced-colors: active), (-ms-high-contrast: active), (-ms-high-contrast: white-on-black) {
-  .btn-close-white {
-    filter: none;
-  }
-}
-
 /**
  * Generate responsive size properties for things like height, width, margin, padding, etc.
  * @param $curve-size One of the curve sizes predefined at https://www.experience-hub.ch/document/2307#/grundlagen-web/abstaende
  * @param $property Property key (height, width, padding, margin, top, etc.)
  * @param $template Value template string used for shorthand declarations like padding ("$value auto" = padding: 1rem auto)
  */
-/* stylelint-disable */
-/* stylelint-enable */
 .btn-default,
 .btn-secondary {
   border: 2px solid var(--post-gray-60);
@@ -169,7 +74,7 @@
 .btn {
   min-height: 3rem;
   font-size: 1rem;
-  gap: 1rem;
+  gap: 0.625rem;
   outline: none;
   outline-offset: 2px;
   /* Compatibility with button-group */
@@ -182,7 +87,7 @@
   transition: opacity 250ms, border-color 250ms, background-color 250ms, color 250ms;
   border-width: 2px;
   border-style: solid;
-  border-radius: 3px;
+  border-radius: 4px;
   background-color: transparent;
   box-shadow: none;
   color: var(--post-gray-80);
@@ -192,7 +97,7 @@
   white-space: nowrap;
 }
 .btn:where(:not(.btn-link, .btn-tertiary)) {
-  padding: 0 2rem;
+  padding: 0 1rem;
 }
 .btn > .pi {
   width: 1.25rem;
@@ -278,14 +183,14 @@
 }
 .btn-icon.btn-lg {
   min-width: 3.5rem;
-  padding-right: 0.875rem;
-  padding-left: 0.875rem;
+  padding-right: 0.9375rem;
+  padding-left: 0.9375rem;
 }
 
 .btn-animated:not(.btn-link, .btn-tertiary)::after {
   content: "";
   position: absolute;
-  right: 1.25rem;
+  right: 0.5rem;
   width: 0.625em;
   height: 0.625em;
   transform: rotateZ(315deg) translate(-2px, -2px);
@@ -296,29 +201,29 @@
   opacity: 0;
 }
 .btn-animated:not(.btn-link, .btn-tertiary).btn-sm::after {
-  right: 0.5rem;
+  right: 0.25rem;
 }
 .btn-animated:not(.btn-link, .btn-tertiary).btn-rg::after {
-  right: 0.875rem;
+  right: 0.375rem;
 }
 .btn-animated:not(.btn-link, .btn-tertiary).btn-lg::after {
-  right: 1.5rem;
+  right: 0.625rem;
 }
 .btn-animated:not(.btn-link, .btn-tertiary) > span {
   transition: transform 250ms;
 }
 @media (prefers-reduced-motion: no-preference) {
   .btn-animated:not(.btn-link, .btn-tertiary):focus > span, .btn-animated:not(.btn-link, .btn-tertiary):not(:disabled):hover > span, .btn-animated:not(.btn-link, .btn-tertiary).pretend-hover > span {
-    transform: translateX(-0.75rem);
+    transform: translateX(-0.5rem);
   }
   .btn-animated:not(.btn-link, .btn-tertiary):focus.btn-sm > span, .btn-animated:not(.btn-link, .btn-tertiary):not(:disabled):hover.btn-sm > span, .btn-animated:not(.btn-link, .btn-tertiary).pretend-hover.btn-sm > span {
     transform: translateX(-0.5rem);
   }
   .btn-animated:not(.btn-link, .btn-tertiary):focus.btn-rg > span, .btn-animated:not(.btn-link, .btn-tertiary):not(:disabled):hover.btn-rg > span, .btn-animated:not(.btn-link, .btn-tertiary).pretend-hover.btn-rg > span {
-    transform: translateX(-0.625rem);
+    transform: translateX(-0.5rem);
   }
   .btn-animated:not(.btn-link, .btn-tertiary):focus.btn-lg > span, .btn-animated:not(.btn-link, .btn-tertiary):not(:disabled):hover.btn-lg > span, .btn-animated:not(.btn-link, .btn-tertiary).pretend-hover.btn-lg > span {
-    transform: translateX(-1rem);
+    transform: translateX(-0.5rem);
   }
   .btn-animated:not(.btn-link, .btn-tertiary):focus::after, .btn-animated:not(.btn-link, .btn-tertiary):not(:disabled):hover::after, .btn-animated:not(.btn-link, .btn-tertiary).pretend-hover::after {
     transform: rotateZ(315deg) translate(0, 0);
@@ -332,10 +237,10 @@
 .btn-sm {
   min-height: 2rem;
   font-size: 0.75rem;
-  gap: 0.5rem;
+  gap: 0.375rem;
 }
 .btn-sm:where(:not(.btn-link, .btn-tertiary)) {
-  padding: 0 1rem;
+  padding: 0 0.75rem;
 }
 .btn-sm > .pi {
   width: 1rem;
@@ -345,10 +250,10 @@
 .btn-rg {
   min-height: 2.5rem;
   font-size: 0.875rem;
-  gap: 0.75rem;
+  gap: 0.5rem;
 }
 .btn-rg:where(:not(.btn-link, .btn-tertiary)) {
-  padding: 0 1.5rem;
+  padding: 0 0.875rem;
 }
 .btn-rg > .pi {
   width: 1.125rem;
@@ -358,14 +263,14 @@
 .btn-lg {
   min-height: 3.5rem;
   font-size: 1.125rem;
-  gap: 1.25rem;
+  gap: 0.75rem;
 }
 .btn-lg:where(:not(.btn-link, .btn-tertiary)) {
-  padding: 0 2.5rem;
+  padding: 0 1.125rem;
 }
 .btn-lg > .pi {
-  width: 1.5rem;
-  height: 1.5rem;
+  width: 1.375rem;
+  height: 1.375rem;
 }
 
 .btn-nightblue {
@@ -528,6 +433,35 @@
   color: #fff;
 }
 
+/*!
+ * Bootstrap Utilities v5.1.3 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+
+ * The MIT License (MIT)
+
+ * Copyright (c) 2011-2020 Twitter, Inc.
+ * Copyright (c) 2011-2020 The Bootstrap Authors
+
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
 :root {
   --bs-breakpoint-xs: 0;
   --bs-breakpoint-sm: 400px;
@@ -1995,7 +1929,7 @@
   --bs-progress-height: 1rem;
   --bs-progress-font-size: 0.75rem;
   --bs-progress-bg: hsl(0, 0%, 80%);
-  --bs-progress-border-radius: 3px;
+  --bs-progress-border-radius: 4px;
   --bs-progress-box-shadow: inset 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1);
   --bs-progress-bar-color: #fff;
   --bs-progress-bar-bg: hsl(0, 0%, 20%);
@@ -2175,6 +2109,7 @@
   box-shadow: none;
   border: 0;
   margin: 0;
+  cursor: pointer;
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -2223,7 +2158,7 @@ button {
 
 a,
 button {
-  border-radius: 3px;
+  border-radius: 4px;
   outline: none;
   outline-offset: 2px;
   /* Compatibility with button-group */
@@ -2231,7 +2166,7 @@ button {
 a:is(:focus-visible, :focus-within, .pretend-focus),
 button:is(:focus-visible, :focus-within, .pretend-focus) {
   outline: 2px solid var(--post-contrast-color);
-  border-radius: 3px;
+  border-radius: 4px;
 }
 
 img,

package/dist/collection/components/post-internet-footer/post-internet-footer.css

@@ -1507,6 +1507,9 @@
   }
 }
 
+/*!
+ * Copyright 2021 by Swiss Post, Information Technology
+ */
 /**
  * Generate responsive size properties for things like height, width, margin, padding, etc.
  * @param $curve-size One of the curve sizes predefined at https://www.experience-hub.ch/document/2307#/grundlagen-web/abstaende
@@ -1557,7 +1560,7 @@
 .btn {
   min-height: 3rem;
   font-size: 1rem;
-  gap: 1rem;
+  gap: 0.625rem;
   outline: none;
   outline-offset: 2px;
   /* Compatibility with button-group */
@@ -1570,7 +1573,7 @@
   transition: opacity 250ms, border-color 250ms, background-color 250ms, color 250ms;
   border-width: 2px;
   border-style: solid;
-  border-radius: 3px;
+  border-radius: 4px;
   background-color: transparent;
   box-shadow: none;
   color: var(--post-gray-80);
@@ -1580,7 +1583,7 @@
   white-space: nowrap;
 }
 .btn:where(:not(.btn-link, .btn-tertiary)) {
-  padding: 0 2rem;
+  padding: 0 1rem;
 }
 .btn > .pi {
   width: 1.25rem;
@@ -1666,14 +1669,14 @@
 }
 .btn-icon.btn-lg {
   min-width: 3.5rem;
-  padding-right: 0.875rem;
-  padding-left: 0.875rem;
+  padding-right: 0.9375rem;
+  padding-left: 0.9375rem;
 }
 
 .btn-animated:not(.btn-link, .btn-tertiary)::after {
   content: "";
   position: absolute;
-  right: 1.25rem;
+  right: 0.5rem;
   width: 0.625em;
   height: 0.625em;
   transform: rotateZ(315deg) translate(-2px, -2px);
@@ -1684,29 +1687,29 @@
   opacity: 0;
 }
 .btn-animated:not(.btn-link, .btn-tertiary).btn-sm::after {
-  right: 0.5rem;
+  right: 0.25rem;
 }
 .btn-animated:not(.btn-link, .btn-tertiary).btn-rg::after {
-  right: 0.875rem;
+  right: 0.375rem;
 }
 .btn-animated:not(.btn-link, .btn-tertiary).btn-lg::after {
-  right: 1.5rem;
+  right: 0.625rem;
 }
 .btn-animated:not(.btn-link, .btn-tertiary) > span {
   transition: transform 250ms;
 }
 @media (prefers-reduced-motion: no-preference) {
   .btn-animated:not(.btn-link, .btn-tertiary):focus > span, .btn-animated:not(.btn-link, .btn-tertiary):not(:disabled):hover > span, .btn-animated:not(.btn-link, .btn-tertiary).pretend-hover > span {
-    transform: translateX(-0.75rem);
+    transform: translateX(-0.5rem);
   }
   .btn-animated:not(.btn-link, .btn-tertiary):focus.btn-sm > span, .btn-animated:not(.btn-link, .btn-tertiary):not(:disabled):hover.btn-sm > span, .btn-animated:not(.btn-link, .btn-tertiary).pretend-hover.btn-sm > span {
     transform: translateX(-0.5rem);
   }
   .btn-animated:not(.btn-link, .btn-tertiary):focus.btn-rg > span, .btn-animated:not(.btn-link, .btn-tertiary):not(:disabled):hover.btn-rg > span, .btn-animated:not(.btn-link, .btn-tertiary).pretend-hover.btn-rg > span {
-    transform: translateX(-0.625rem);
+    transform: translateX(-0.5rem);
   }
   .btn-animated:not(.btn-link, .btn-tertiary):focus.btn-lg > span, .btn-animated:not(.btn-link, .btn-tertiary):not(:disabled):hover.btn-lg > span, .btn-animated:not(.btn-link, .btn-tertiary).pretend-hover.btn-lg > span {
-    transform: translateX(-1rem);
+    transform: translateX(-0.5rem);
   }
   .btn-animated:not(.btn-link, .btn-tertiary):focus::after, .btn-animated:not(.btn-link, .btn-tertiary):not(:disabled):hover::after, .btn-animated:not(.btn-link, .btn-tertiary).pretend-hover::after {
     transform: rotateZ(315deg) translate(0, 0);
@@ -1720,10 +1723,10 @@
 .btn-sm {
   min-height: 2rem;
   font-size: 0.75rem;
-  gap: 0.5rem;
+  gap: 0.375rem;
 }
 .btn-sm:where(:not(.btn-link, .btn-tertiary)) {
-  padding: 0 1rem;
+  padding: 0 0.75rem;
 }
 .btn-sm > .pi {
   width: 1rem;
@@ -1733,10 +1736,10 @@
 .btn-rg {
   min-height: 2.5rem;
   font-size: 0.875rem;
-  gap: 0.75rem;
+  gap: 0.5rem;
 }
 .btn-rg:where(:not(.btn-link, .btn-tertiary)) {
-  padding: 0 1.5rem;
+  padding: 0 0.875rem;
 }
 .btn-rg > .pi {
   width: 1.125rem;
@@ -1746,14 +1749,14 @@
 .btn-lg {
   min-height: 3.5rem;
   font-size: 1.125rem;
-  gap: 1.25rem;
+  gap: 0.75rem;
 }
 .btn-lg:where(:not(.btn-link, .btn-tertiary)) {
-  padding: 0 2.5rem;
+  padding: 0 1.125rem;
 }
 .btn-lg > .pi {
-  width: 1.5rem;
-  height: 1.5rem;
+  width: 1.375rem;
+  height: 1.375rem;
 }
 
 .btn-nightblue {
@@ -1984,6 +1987,7 @@
   box-shadow: none;
   border: 0;
   margin: 0;
+  cursor: pointer;
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -2032,7 +2036,7 @@ button {
 
 a,
 button {
-  border-radius: 3px;
+  border-radius: 4px;
   outline: none;
   outline-offset: 2px;
   /* Compatibility with button-group */
@@ -2040,7 +2044,7 @@ button {
 a:is(:focus-visible, :focus-within, .pretend-focus),
 button:is(:focus-visible, :focus-within, .pretend-focus) {
   outline: 2px solid var(--post-contrast-color);
-  border-radius: 3px;
+  border-radius: 4px;
 }
 
 img,

package/dist/collection/components/post-internet-footer/post-internet-footer.js

@@ -5,10 +5,13 @@ import { PostFooterBlockCustom } from './components/post-footer-block-custom.com
 import { PostFooterBlockList } from './components/post-footer-block-list.component';
 import { PostFooterBlockAddress } from './components/post-footer-block-address.component';
 import { PostFooterBlockContact } from './components/post-footer-block-contact.component';
+import { translate } from '../../services/language.service';
 export class PostInternetFooter {
   constructor() {
     this.liveSupportEnabled = false;
+    this.cookieSettingsEnabled = false;
     this.liveSupportEnabled = this.unbluEnabled();
+    this.cookieSettingsEnabled = this.ucUIEnabled();
     /**
      * If the unblu script is not available, wait 5 seconds for it to load.
      * If it's still not there after 5 seconds, abandon efforts and don't
@@ -18,10 +21,15 @@ export class PostInternetFooter {
       let intervalId;
       let runs = 0;
       const checker = () => {
-        const isEnabled = this.unbluEnabled();
-        if (isEnabled) {
+        const unbluEnabled = this.unbluEnabled();
+        const ucUIEnabled = this.ucUIEnabled();
+        const isEnabled = unbluEnabled && ucUIEnabled;
+        if (unbluEnabled) {
           this.liveSupportEnabled = true;
         }
+        if (ucUIEnabled) {
+          this.cookieSettingsEnabled = true;
+        }
         if (isEnabled || runs >= 5) {
           window.clearInterval(intervalId);
         }
@@ -37,6 +45,13 @@ export class PostInternetFooter {
   unbluEnabled() {
     return typeof window['unbluLSLoad'] === 'function';
   }
+  ucUIEnabled() {
+    return (typeof window['UC_UI'] === 'object' &&
+      typeof window['UC_UI']['showSecondLayer'] === 'function');
+  }
+  handleCookieSettingsClick() {
+    window['UC_UI']['showSecondLayer']();
+  }
   render() {
     var _a;
     // There is something wrong entirely
@@ -63,7 +78,7 @@ export class PostInternetFooter {
       .filter(block => block.columnType === 'address')
       .map(block => (h(PostFooterBlockAddress, { key: block.title, block: block })))), h("div", { class: "copyright container" }, h("span", { class: "bold" }, footerConfig.entry.text), h("ul", { class: "no-list footer-meta-links" }, footerConfig.links
       ? footerConfig.links.map(link => (h("li", { key: link.url }, h("a", { class: "nav-link", href: link.url, target: link.target }, link.text))))
-      : null)))));
+      : null, this.cookieSettingsEnabled && (h("li", null, h("button", { class: "nav-link cookie-settings", onClick: this.handleCookieSettingsClick }, translate('Cookie Settings')))))))));
   }
   static get is() { return "swisspost-internet-footer"; }
   static get encapsulation() { return "shadow"; }
@@ -79,7 +94,8 @@ export class PostInternetFooter {
   }
   static get states() {
     return {
-      "liveSupportEnabled": {}
+      "liveSupportEnabled": {},
+      "cookieSettingsEnabled": {}
     };
   }
 }

package/dist/collection/components/post-internet-footer/post-internet-footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"post-internet-footer.js","sourceRoot":"","sources":["../../../../src/components/post-internet-footer/post-internet-footer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, State } from '@stencil/core';\nimport { state } from '../../data/store';\nimport { SvgSprite } from '../../utils/svg-sprite.component';\nimport { PostFooterBlockCustom } from './components/post-footer-block-custom.component';\nimport { PostFooterBlockList } from './components/post-footer-block-list.component';\nimport { PostFooterBlockAddress } from './components/post-footer-block-address.component';\nimport { PostFooterBlockContact } from './components/post-footer-block-contact.component';\n\n@Component({\n  tag: 'swisspost-internet-footer',\n  styleUrl: 'post-internet-footer.scss',\n  shadow: true,\n})\nexport class PostInternetFooter {\n  @State() liveSupportEnabled = false;\n\n  constructor() {\n    this.liveSupportEnabled = this.unbluEnabled();\n\n    /**\n     * If the unblu script is not available, wait 5 seconds for it to load.\n     * If it's still not there after 5 seconds, abandon efforts and don't\n     * show the live support button.\n     */\n    if (!this.liveSupportEnabled) {\n      let intervalId: number;\n      let runs = 0;\n\n      const checker = () => {\n        const isEnabled = this.unbluEnabled();\n        if (isEnabled) {\n          this.liveSupportEnabled = true;\n        }\n        if (isEnabled || runs >= 5) {\n          window.clearInterval(intervalId);\n        }\n        runs++;\n      };\n\n      intervalId = window.setInterval(checker, 1000);\n    }\n  }\n\n  /**\n   * Check if the unblu live support script is loaded\n   * @returns Boolean\n   */\n  private unbluEnabled(): boolean {\n    return typeof window['unbluLSLoad'] === 'function';\n  }\n\n  render() {\n    // There is something wrong entirely\n    if (!state) {\n      console.warn(\n        `Internet Footer: Could not load config. Please make sure that you included the <swisspost-internet-header></swisspost-internet-header> component.`,\n      );\n      return null;\n    }\n\n    // Config has not loaded yet\n    if (!state.localizedConfig) {\n      return null;\n    }\n\n    // There's no footer config\n    if (!state.localizedConfig.footer) {\n      console.warn(\n        `Internet Footer: Current project \"${state.projectId}\" does not include a footer config. The footer will not be rendered. Remove `,\n        document.querySelector('swisspost-internet-footer'),\n        `from your markup or configure the footer in your portal config to stop seeing this warning.`,\n      );\n      return null;\n    }\n\n    const footerConfig = state.localizedConfig.footer;\n    const customFooterConfig = state.localizedCustomConfig?.footer;\n\n    return (\n      <Host>\n        <SvgSprite />\n        <footer class=\"post-internet-footer light font-curve-regular\">\n          <h2 class=\"visually-hidden\">{footerConfig.title}</h2>\n          {customFooterConfig?.block && <PostFooterBlockCustom block={customFooterConfig?.block} />}\n          <div class=\"footer-container container\">\n            {footerConfig.block\n              .filter(block => block.columnType === 'list')\n              .map(block => (\n                <PostFooterBlockList key={block.title} block={block} />\n              ))}\n            {footerConfig.block\n              .filter(block => block.columnType === 'contact')\n              .map(block => (\n                <PostFooterBlockContact\n                  key={block.title}\n                  block={block}\n                  liveSupportEnabled={this.liveSupportEnabled}\n                />\n              ))}\n            {footerConfig.block\n              .filter(block => block.columnType === 'address')\n              .map(block => (\n                <PostFooterBlockAddress key={block.title} block={block} />\n              ))}\n          </div>\n          <div class=\"copyright container\">\n            <span class=\"bold\">{footerConfig.entry.text}</span>\n            <ul class=\"no-list footer-meta-links\">\n              {footerConfig.links\n                ? footerConfig.links.map(link => (\n                    <li key={link.url}>\n                      <a class=\"nav-link\" href={link.url} target={link.target}>\n                        {link.text}\n                      </a>\n                    </li>\n                  ))\n                : null}\n            </ul>\n          </div>\n        </footer>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"post-internet-footer.js","sourceRoot":"","sources":["../../../../src/components/post-internet-footer/post-internet-footer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, State } from '@stencil/core';\nimport { state } from '../../data/store';\nimport { SvgSprite } from '../../utils/svg-sprite.component';\nimport { PostFooterBlockCustom } from './components/post-footer-block-custom.component';\nimport { PostFooterBlockList } from './components/post-footer-block-list.component';\nimport { PostFooterBlockAddress } from './components/post-footer-block-address.component';\nimport { PostFooterBlockContact } from './components/post-footer-block-contact.component';\nimport { translate } from '../../services/language.service';\n\n@Component({\n  tag: 'swisspost-internet-footer',\n  styleUrl: 'post-internet-footer.scss',\n  shadow: true,\n})\nexport class PostInternetFooter {\n  @State() liveSupportEnabled = false;\n  @State() cookieSettingsEnabled = false;\n\n  constructor() {\n    this.liveSupportEnabled = this.unbluEnabled();\n    this.cookieSettingsEnabled = this.ucUIEnabled();\n\n    /**\n     * If the unblu script is not available, wait 5 seconds for it to load.\n     * If it's still not there after 5 seconds, abandon efforts and don't\n     * show the live support button.\n     */\n    if (!this.liveSupportEnabled) {\n      let intervalId: number;\n      let runs = 0;\n\n      const checker = () => {\n        const unbluEnabled = this.unbluEnabled();\n        const ucUIEnabled = this.ucUIEnabled();\n        const isEnabled = unbluEnabled && ucUIEnabled;\n        if (unbluEnabled) {\n          this.liveSupportEnabled = true;\n        }\n        if (ucUIEnabled) {\n          this.cookieSettingsEnabled = true;\n        }\n        if (isEnabled || runs >= 5) {\n          window.clearInterval(intervalId);\n        }\n        runs++;\n      };\n\n      intervalId = window.setInterval(checker, 1000);\n    }\n  }\n\n  /**\n   * Check if the unblu live support script is loaded\n   * @returns Boolean\n   */\n  private unbluEnabled(): boolean {\n    return typeof window['unbluLSLoad'] === 'function';\n  }\n\n  private ucUIEnabled(): boolean {\n    return (\n      typeof window['UC_UI'] === 'object' &&\n      typeof window['UC_UI']['showSecondLayer'] === 'function'\n    );\n  }\n\n  private handleCookieSettingsClick() {\n    window['UC_UI']['showSecondLayer']();\n  }\n\n  render() {\n    // There is something wrong entirely\n    if (!state) {\n      console.warn(\n        `Internet Footer: Could not load config. Please make sure that you included the <swisspost-internet-header></swisspost-internet-header> component.`,\n      );\n      return null;\n    }\n\n    // Config has not loaded yet\n    if (!state.localizedConfig) {\n      return null;\n    }\n\n    // There's no footer config\n    if (!state.localizedConfig.footer) {\n      console.warn(\n        `Internet Footer: Current project \"${state.projectId}\" does not include a footer config. The footer will not be rendered. Remove `,\n        document.querySelector('swisspost-internet-footer'),\n        `from your markup or configure the footer in your portal config to stop seeing this warning.`,\n      );\n      return null;\n    }\n\n    const footerConfig = state.localizedConfig.footer;\n    const customFooterConfig = state.localizedCustomConfig?.footer;\n\n    return (\n      <Host>\n        <SvgSprite />\n        <footer class=\"post-internet-footer light font-curve-regular\">\n          <h2 class=\"visually-hidden\">{footerConfig.title}</h2>\n          {customFooterConfig?.block && <PostFooterBlockCustom block={customFooterConfig?.block} />}\n          <div class=\"footer-container container\">\n            {footerConfig.block\n              .filter(block => block.columnType === 'list')\n              .map(block => (\n                <PostFooterBlockList key={block.title} block={block} />\n              ))}\n            {footerConfig.block\n              .filter(block => block.columnType === 'contact')\n              .map(block => (\n                <PostFooterBlockContact\n                  key={block.title}\n                  block={block}\n                  liveSupportEnabled={this.liveSupportEnabled}\n                />\n              ))}\n            {footerConfig.block\n              .filter(block => block.columnType === 'address')\n              .map(block => (\n                <PostFooterBlockAddress key={block.title} block={block} />\n              ))}\n          </div>\n          <div class=\"copyright container\">\n            <span class=\"bold\">{footerConfig.entry.text}</span>\n            <ul class=\"no-list footer-meta-links\">\n              {footerConfig.links\n                ? footerConfig.links.map(link => (\n                    <li key={link.url}>\n                      <a class=\"nav-link\" href={link.url} target={link.target}>\n                        {link.text}\n                      </a>\n                    </li>\n                  ))\n                : null}\n              {this.cookieSettingsEnabled && (\n                <li>\n                  <button class=\"nav-link cookie-settings\" onClick={this.handleCookieSettingsClick}>\n                    {translate('Cookie Settings')}\n                  </button>\n                </li>\n              )}\n            </ul>\n          </div>\n        </footer>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/post-internet-header/logo-animation/logo-animation.js

@@ -0,0 +1,46 @@
+import { debounce } from 'throttle-debounce';
+import { state } from '../../../data/store';
+export const registerLogoAnimationObserver = (target, headerRef) => {
+  /**
+   * Set intersection ratio as CSS custom property
+   */
+  const handleScroll = () => {
+    const fullStickyness = state.stickyness === 'full';
+    let scale = 1;
+    // Minus 1px border at the bottom that the logo is not covering
+    const adjustedHeaderHeight = headerRef.clientHeight - 1;
+    const scrollY = fullStickyness ? 0 : window.scrollY;
+    // If meta navigation is not visible (mobile, not configured), scale should just be 1
+    if (target.clientHeight > 0) {
+      scale = Math.max((adjustedHeaderHeight - Math.max(scrollY, 0)) /
+        (adjustedHeaderHeight - target.clientHeight), 1);
+    }
+    headerRef.style.setProperty('--logo-scale', scale.toString());
+  };
+  const debounced = debounce(150, handleScroll);
+  /**
+   * Observe the meta navigation in order to not track scroll events throughout the whole page.
+   * This ensures that the scroll listener is only active while the meta navigation is visible.
+   */
+  const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting && entry.intersectionRatio > 0) {
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        window.addEventListener('resize', debounced);
+        // Ensure callback is called at least once in case main thread is too busy while scrolling up
+        window.requestAnimationFrame(handleScroll);
+      }
+      else {
+        window.removeEventListener('scroll', handleScroll);
+        window.removeEventListener('resize', debounced);
+        window.requestAnimationFrame(handleScroll);
+      }
+    });
+  }, {
+    // Fires when element leaves viewport (0) and when it just about enters it (0.001)
+    threshold: [0, 0.001],
+  });
+  observer.observe(target);
+  return handleScroll;
+};
+//# sourceMappingURL=logo-animation.js.map

package/dist/collection/components/post-internet-header/logo-animation/logo-animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo-animation.js","sourceRoot":"","sources":["../../../../../src/components/post-internet-header/logo-animation/logo-animation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAC3C,MAAmB,EACnB,SAA6C,EAC7C,EAAE;EACF;;KAEG;EACH,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,KAAK,MAAM,CAAC;IACnD,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,+DAA+D;IAC/D,MAAM,oBAAoB,GAAG,SAAS,CAAC,YAAY,GAAG,CAAC,CAAC;IACxD,MAAM,OAAO,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;IAEpD,qFAAqF;IACrF,IAAI,MAAM,CAAC,YAAY,GAAG,CAAC,EAAE;MAC3B,KAAK,GAAG,IAAI,CAAC,GAAG,CACd,CAAC,oBAAoB,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;QAC3C,CAAC,oBAAoB,GAAG,MAAM,CAAC,YAAY,CAAC,EAC9C,CAAC,CACF,CAAC;KACH;IACD,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,cAAc,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;EAChE,CAAC,CAAC;EAEF,MAAM,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;EAE9C;;;KAGG;EACH,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACvC,OAAO,CAAC,EAAE;IACR,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;MACtB,IAAI,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC,iBAAiB,GAAG,CAAC,EAAE;QACvD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACnE,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;QAE7C,6FAA6F;QAC7F,MAAM,CAAC,qBAAqB,CAAC,YAAY,CAAC,CAAC;OAC5C;WAAM;QACL,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACnD,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;QAChD,MAAM,CAAC,qBAAqB,CAAC,YAAY,CAAC,CAAC;OAC5C;IACH,CAAC,CAAC,CAAC;EACL,CAAC,EACD;IACE,kFAAkF;IAClF,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC;GACtB,CACF,CAAC;EACF,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;EAEzB,OAAO,YAAY,CAAC;AACtB,CAAC,CAAC","sourcesContent":["import { debounce } from 'throttle-debounce';\nimport { state } from '../../../data/store';\n\nexport const registerLogoAnimationObserver = (\n  target: HTMLElement,\n  headerRef: HTMLSwisspostInternetHeaderElement,\n) => {\n  /**\n   * Set intersection ratio as CSS custom property\n   */\n  const handleScroll = () => {\n    const fullStickyness = state.stickyness === 'full';\n    let scale = 1;\n    // Minus 1px border at the bottom that the logo is not covering\n    const adjustedHeaderHeight = headerRef.clientHeight - 1;\n    const scrollY = fullStickyness ? 0 : window.scrollY;\n\n    // If meta navigation is not visible (mobile, not configured), scale should just be 1\n    if (target.clientHeight > 0) {\n      scale = Math.max(\n        (adjustedHeaderHeight - Math.max(scrollY, 0)) /\n          (adjustedHeaderHeight - target.clientHeight),\n        1,\n      );\n    }\n    headerRef.style.setProperty('--logo-scale', scale.toString());\n  };\n\n  const debounced = debounce(150, handleScroll);\n\n  /**\n   * Observe the meta navigation in order to not track scroll events throughout the whole page.\n   * This ensures that the scroll listener is only active while the meta navigation is visible.\n   */\n  const observer = new IntersectionObserver(\n    entries => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting && entry.intersectionRatio > 0) {\n          window.addEventListener('scroll', handleScroll, { passive: true });\n          window.addEventListener('resize', debounced);\n\n          // Ensure callback is called at least once in case main thread is too busy while scrolling up\n          window.requestAnimationFrame(handleScroll);\n        } else {\n          window.removeEventListener('scroll', handleScroll);\n          window.removeEventListener('resize', debounced);\n          window.requestAnimationFrame(handleScroll);\n        }\n      });\n    },\n    {\n      // Fires when element leaves viewport (0) and when it just about enters it (0.001)\n      threshold: [0, 0.001],\n    },\n  );\n  observer.observe(target);\n\n  return handleScroll;\n};\n"]}