@swisspost/internet-header 1.5.0-beta.0

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

@@ -0,0 +1,86 @@
+import { Host, h } from '@stencil/core';
+import { state } from '../../data/store';
+import { SvgSprite } from '../../utils/svg-sprite.component';
+import { PostFooterBlockCustom } from './components/post-footer-block-custom.component';
+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';
+export class PostInternetFooter {
+  constructor() {
+    this.liveSupportEnabled = false;
+    this.liveSupportEnabled = this.unbluEnabled();
+    /**
+     * 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
+     * show the live support button.
+     */
+    if (!this.liveSupportEnabled) {
+      let intervalId;
+      let runs = 0;
+      const checker = () => {
+        const isEnabled = this.unbluEnabled();
+        if (isEnabled) {
+          this.liveSupportEnabled = true;
+        }
+        if (isEnabled || runs >= 5) {
+          window.clearInterval(intervalId);
+        }
+        runs++;
+      };
+      intervalId = window.setInterval(checker, 1000);
+    }
+  }
+  /**
+   * Check if the unblu live support script is loaded
+   * @returns Boolean
+   */
+  unbluEnabled() {
+    return typeof window['unbluLSLoad'] === 'function';
+  }
+  render() {
+    var _a;
+    // There is something wrong entirely
+    if (!state) {
+      console.warn(`Internet Footer: Could not load config. Please make sure that you included the <swisspost-internet-header></swisspost-internet-header> component.`);
+      return null;
+    }
+    // Config has not loaded yet
+    if (!state.localizedConfig) {
+      return null;
+    }
+    // There's no footer config
+    if (!state.localizedConfig.footer) {
+      console.warn(`Internet Footer: Current project "${state.projectId}" does not include a footer config. The footer will not be rendered. Remove `, document.querySelector('swisspost-internet-footer'), `from your markup or configure the footer in your portal config to stop seeing this warning.`);
+      return null;
+    }
+    const footerConfig = state.localizedConfig.footer;
+    const customFooterConfig = (_a = state.localizedCustomConfig) === null || _a === void 0 ? void 0 : _a.footer;
+    return (h(Host, null, h(SvgSprite, null), h("footer", { class: "post-internet-footer light font-curve-regular" }, h("h2", { class: "visually-hidden" }, footerConfig.title), (customFooterConfig === null || customFooterConfig === void 0 ? void 0 : customFooterConfig.block) && h(PostFooterBlockCustom, { block: customFooterConfig === null || customFooterConfig === void 0 ? void 0 : customFooterConfig.block }), h("div", { class: "footer-container container" }, footerConfig.block
+      .filter(block => block.columnType === 'list')
+      .map(block => (h(PostFooterBlockList, { key: block.title, block: block }))), footerConfig.block
+      .filter(block => block.columnType === 'contact')
+      .map(block => (h(PostFooterBlockContact, { key: block.title, block: block, liveSupportEnabled: this.liveSupportEnabled }))), footerConfig.block
+      .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)))));
+  }
+  static get is() { return "swisspost-internet-footer"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["post-internet-footer.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["post-internet-footer.css"]
+    };
+  }
+  static get states() {
+    return {
+      "liveSupportEnabled": {}
+    };
+  }
+}
+//# sourceMappingURL=post-internet-footer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"post-internet-footer.js","sourceRoot":"","sources":["../../../../src/components/post-internet-footer/post-internet-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,qBAAqB,EAAE,MAAM,iDAAiD,CAAC;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAC;AACpF,OAAO,EAAE,sBAAsB,EAAE,MAAM,kDAAkD,CAAC;AAC1F,OAAO,EAAE,sBAAsB,EAAE,MAAM,kDAAkD,CAAC;AAO1F,MAAM,OAAO,kBAAkB;EAG7B;8BAF8B,KAAK;IAGjC,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;IAE9C;;;;OAIG;IACH,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;MAC5B,IAAI,UAAkB,CAAC;MACvB,IAAI,IAAI,GAAG,CAAC,CAAC;MAEb,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QACtC,IAAI,SAAS,EAAE;UACb,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;SAChC;QACD,IAAI,SAAS,IAAI,IAAI,IAAI,CAAC,EAAE;UAC1B,MAAM,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;SAClC;QACD,IAAI,EAAE,CAAC;MACT,CAAC,CAAC;MAEF,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;KAChD;GACF;EAED;;;KAGG;EACK,YAAY;IAClB,OAAO,OAAO,MAAM,CAAC,aAAa,CAAC,KAAK,UAAU,CAAC;EACrD,CAAC;EAED,MAAM;;IACJ,oCAAoC;IACpC,IAAI,CAAC,KAAK,EAAE;MACV,OAAO,CAAC,IAAI,CACV,mJAAmJ,CACpJ,CAAC;MACF,OAAO,IAAI,CAAC;KACb;IAED,4BAA4B;IAC5B,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE;MAC1B,OAAO,IAAI,CAAC;KACb;IAED,2BAA2B;IAC3B,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,MAAM,EAAE;MACjC,OAAO,CAAC,IAAI,CACV,qCAAqC,KAAK,CAAC,SAAS,8EAA8E,EAClI,QAAQ,CAAC,aAAa,CAAC,2BAA2B,CAAC,EACnD,6FAA6F,CAC9F,CAAC;MACF,OAAO,IAAI,CAAC;KACb;IAED,MAAM,YAAY,GAAG,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC;IAClD,MAAM,kBAAkB,GAAG,MAAA,KAAK,CAAC,qBAAqB,0CAAE,MAAM,CAAC;IAE/D,OAAO,CACL,EAAC,IAAI;MACH,EAAC,SAAS,OAAG;MACb,cAAQ,KAAK,EAAC,+CAA+C;QAC3D,UAAI,KAAK,EAAC,iBAAiB,IAAE,YAAY,CAAC,KAAK,CAAM;QACpD,CAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,KAAK,KAAI,EAAC,qBAAqB,IAAC,KAAK,EAAE,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,KAAK,GAAI;QACzF,WAAK,KAAK,EAAC,4BAA4B;UACpC,YAAY,CAAC,KAAK;aAChB,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,KAAK,MAAM,CAAC;aAC5C,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACZ,EAAC,mBAAmB,IAAC,GAAG,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI,CACxD,CAAC;UACH,YAAY,CAAC,KAAK;aAChB,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,KAAK,SAAS,CAAC;aAC/C,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACZ,EAAC,sBAAsB,IACrB,GAAG,EAAE,KAAK,CAAC,KAAK,EAChB,KAAK,EAAE,KAAK,EACZ,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,GAC3C,CACH,CAAC;UACH,YAAY,CAAC,KAAK;aAChB,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,KAAK,SAAS,CAAC;aAC/C,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACZ,EAAC,sBAAsB,IAAC,GAAG,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI,CAC3D,CAAC,CACA;QACN,WAAK,KAAK,EAAC,qBAAqB;UAC9B,YAAM,KAAK,EAAC,MAAM,IAAE,YAAY,CAAC,KAAK,CAAC,IAAI,CAAQ;UACnD,UAAI,KAAK,EAAC,2BAA2B,IAClC,YAAY,CAAC,KAAK;YACjB,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAC7B,UAAI,GAAG,EAAE,IAAI,CAAC,GAAG;cACf,SAAG,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACpD,IAAI,CAAC,IAAI,CACR,CACD,CACN,CAAC;YACJ,CAAC,CAAC,IAAI,CACL,CACD,CACC,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, State } from '@stencil/core';\r\nimport { state } from '../../data/store';\r\nimport { SvgSprite } from '../../utils/svg-sprite.component';\r\nimport { PostFooterBlockCustom } from './components/post-footer-block-custom.component';\r\nimport { PostFooterBlockList } from './components/post-footer-block-list.component';\r\nimport { PostFooterBlockAddress } from './components/post-footer-block-address.component';\r\nimport { PostFooterBlockContact } from './components/post-footer-block-contact.component';\r\n\r\n@Component({\r\n  tag: 'swisspost-internet-footer',\r\n  styleUrl: 'post-internet-footer.scss',\r\n  shadow: true,\r\n})\r\nexport class PostInternetFooter {\r\n  @State() liveSupportEnabled = false;\r\n\r\n  constructor() {\r\n    this.liveSupportEnabled = this.unbluEnabled();\r\n\r\n    /**\r\n     * If the unblu script is not available, wait 5 seconds for it to load.\r\n     * If it's still not there after 5 seconds, abandon efforts and don't\r\n     * show the live support button.\r\n     */\r\n    if (!this.liveSupportEnabled) {\r\n      let intervalId: number;\r\n      let runs = 0;\r\n\r\n      const checker = () => {\r\n        const isEnabled = this.unbluEnabled();\r\n        if (isEnabled) {\r\n          this.liveSupportEnabled = true;\r\n        }\r\n        if (isEnabled || runs >= 5) {\r\n          window.clearInterval(intervalId);\r\n        }\r\n        runs++;\r\n      };\r\n\r\n      intervalId = window.setInterval(checker, 1000);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Check if the unblu live support script is loaded\r\n   * @returns Boolean\r\n   */\r\n  private unbluEnabled(): boolean {\r\n    return typeof window['unbluLSLoad'] === 'function';\r\n  }\r\n\r\n  render() {\r\n    // There is something wrong entirely\r\n    if (!state) {\r\n      console.warn(\r\n        `Internet Footer: Could not load config. Please make sure that you included the <swisspost-internet-header></swisspost-internet-header> component.`,\r\n      );\r\n      return null;\r\n    }\r\n\r\n    // Config has not loaded yet\r\n    if (!state.localizedConfig) {\r\n      return null;\r\n    }\r\n\r\n    // There's no footer config\r\n    if (!state.localizedConfig.footer) {\r\n      console.warn(\r\n        `Internet Footer: Current project \"${state.projectId}\" does not include a footer config. The footer will not be rendered. Remove `,\r\n        document.querySelector('swisspost-internet-footer'),\r\n        `from your markup or configure the footer in your portal config to stop seeing this warning.`,\r\n      );\r\n      return null;\r\n    }\r\n\r\n    const footerConfig = state.localizedConfig.footer;\r\n    const customFooterConfig = state.localizedCustomConfig?.footer;\r\n\r\n    return (\r\n      <Host>\r\n        <SvgSprite />\r\n        <footer class=\"post-internet-footer light font-curve-regular\">\r\n          <h2 class=\"visually-hidden\">{footerConfig.title}</h2>\r\n          {customFooterConfig?.block && <PostFooterBlockCustom block={customFooterConfig?.block} />}\r\n          <div class=\"footer-container container\">\r\n            {footerConfig.block\r\n              .filter(block => block.columnType === 'list')\r\n              .map(block => (\r\n                <PostFooterBlockList key={block.title} block={block} />\r\n              ))}\r\n            {footerConfig.block\r\n              .filter(block => block.columnType === 'contact')\r\n              .map(block => (\r\n                <PostFooterBlockContact\r\n                  key={block.title}\r\n                  block={block}\r\n                  liveSupportEnabled={this.liveSupportEnabled}\r\n                />\r\n              ))}\r\n            {footerConfig.block\r\n              .filter(block => block.columnType === 'address')\r\n              .map(block => (\r\n                <PostFooterBlockAddress key={block.title} block={block} />\r\n              ))}\r\n          </div>\r\n          <div class=\"copyright container\">\r\n            <span class=\"bold\">{footerConfig.entry.text}</span>\r\n            <ul class=\"no-list footer-meta-links\">\r\n              {footerConfig.links\r\n                ? footerConfig.links.map(link => (\r\n                    <li key={link.url}>\r\n                      <a class=\"nav-link\" href={link.url} target={link.target}>\r\n                        {link.text}\r\n                      </a>\r\n                    </li>\r\n                  ))\r\n                : null}\r\n            </ul>\r\n          </div>\r\n        </footer>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -0,0 +1,340 @@
+/**
+ * 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
+ */
+@font-face {
+  font-display: swap;
+  font-family: "Frutiger Neue For Post";
+  font-weight: 700;
+  src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff") format("woff");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Frutiger Neue For Post";
+  font-weight: 400;
+  src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff") format("woff");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Frutiger Neue For Post";
+  font-weight: 300;
+  src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff") format("woff");
+}
+*,
+:host,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+  font-family: "Frutiger Neue For Post", system-ui, sans-serif;
+}
+
+button {
+  font: inherit;
+  padding: 0;
+}
+
+img,
+svg {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+@media (forced-colors: active) {
+  svg {
+    color: white;
+  }
+}
+
+.no-list {
+  list-style: none;
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.btn-blank {
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+}
+
+.nav-link {
+  text-decoration: none;
+  color: rgba(0, 0, 0, 0.8);
+  transition: color 200ms;
+  background-color: transparent;
+  border-radius: 0;
+  box-shadow: none;
+  border: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.nav-link:hover, .nav-link:focus {
+  color: black;
+}
+.nav-link > svg {
+  width: 1.4em;
+  height: 1.4em;
+  flex-shrink: 0;
+}
+.nav-link > span {
+  flex-shrink: 1;
+}
+
+.box > *:first-child {
+  margin-top: 0;
+}
+.box > *:last-child {
+  margin-bottom: 0;
+}
+
+.mirrored {
+  transform: scaleX(-1);
+}
+
+.rotate-270 {
+  transform: rotate(270deg);
+}
+
+.bold {
+  font-weight: 700;
+}
+
+.light {
+  font-weight: 300;
+}
+
+.d-flex {
+  display: flex;
+}
+
+.d-inline-flex {
+  display: inline-flex;
+}
+
+.align-items-center {
+  align-items: center;
+}
+
+@media (min-width: 1441px) {
+  .wide-container {
+    margin: 0 auto;
+    max-width: 1440px;
+  }
+}
+
+@media (max-width: 599.98px) {
+  .container {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+}
+@media (min-width: 600px) and (max-width: 1023.98px) {
+  .container {
+    padding-right: 32px;
+    padding-left: 32px;
+  }
+}
+@media (min-width: 1024px) {
+  .container {
+    padding-right: 40px;
+    padding-left: 40px;
+  }
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  border: 0;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+}
+
+@media (max-width: -0.02px) {
+  .hidden-xs {
+    display: none;
+  }
+}
+
+@media (max-width: 399.98px) {
+  .hidden-sm {
+    display: none;
+  }
+}
+
+@media (max-width: 599.98px) {
+  .hidden-rg {
+    display: none;
+  }
+}
+
+@media (max-width: 779.98px) {
+  .hidden-md {
+    display: none;
+  }
+}
+
+@media (max-width: 1023.98px) {
+  .hidden-lg {
+    display: none;
+  }
+}
+
+@media (max-width: 1279.98px) {
+  .hidden-xl {
+    display: none;
+  }
+}
+
+@media (max-width: 1440.98px) {
+  .hidden-xxl {
+    display: none;
+  }
+}
+
+:host {
+  display: block;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 300;
+  z-index: var(--header-z-index, 10);
+  --header-height: 3.5rem;
+  --meta-header-height: 0px;
+  --language-dropdown-margin-top: 0px;
+}
+@media (min-width: 1024px) {
+  :host {
+    --meta-header-height: 3rem;
+    --header-height: 4rem;
+  }
+}
+@media (min-width: 1280px) {
+  :host {
+    --header-height: 4.5rem;
+  }
+}
+
+:host([meta=false]) {
+  --meta-header-height: 0px;
+  --language-dropdown-margin-top: 1px;
+}
+
+@supports (position: sticky) {
+  :host(:not(.stickyness-none)) {
+    position: sticky;
+  }
+
+  :host(.stickyness-full) {
+    top: 0;
+  }
+
+  :host(.stickyness-main) {
+    top: calc(var(--meta-header-height, 0px) * -1);
+  }
+
+  :host(.stickyness-minimal) {
+    top: calc((var(--header-height, 0px) + var(--meta-header-height, 0px)) * -1);
+    transition: top 200ms ease-in;
+  }
+
+  :host(.stickyness-minimal.scrolling-up),
+:host(.stickyness-minimal.dropdown-open) {
+    top: calc(var(--meta-header-height, 0px) * -1);
+    transition: top 200ms ease-out;
+  }
+}
+.post-internet-header {
+  border-bottom: 1px solid #e6e6e6;
+  background-color: white;
+}
+
+.main-navigation-container {
+  display: flex;
+}
+.main-navigation-container > .main-navigation-controls {
+  flex: 0 0 auto;
+}
+
+.main-navigation {
+  display: flex;
+}
+
+.sub-navigation-container {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  display: flex;
+  background: white;
+  visibility: hidden;
+}
+
+.main-navigation-item:hover .sub-navigation-container {
+  visibility: visible;
+}
+
+.main-navigation-controls {
+  display: flex;
+  margin-left: auto;
+}
+@media (max-width: 1023.98px) {
+  .main-navigation-controls {
+    font-weight: 400;
+  }
+}
+@media (min-width: 1024px) {
+  .main-navigation-controls {
+    font-size: 1.0625rem;
+  }
+}
+.main-navigation-controls > * {
+  border-left: 1px solid #e6e6e6;
+}
+
+.menu-button {
+  display: flex;
+  align-items: center;
+  padding: 0 calc(1rem - 1px);
+  font-weight: 300;
+  cursor: pointer;
+  border-left: 1px solid #e6e6e6;
+  order: 1;
+  /* Display on the far right because of tab order */
+}
+@media (min-width: 1024px) {
+  .menu-button {
+    display: none;
+  }
+}
+@media (min-width: 600px) and (max-width: 1023.98px) {
+  .menu-button .visually-hidden {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: auto;
+    overflow: visible;
+    clip: auto;
+    visibility: visible;
+    margin-right: 0.5rem;
+  }
+}
+.menu-button svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.full-width .wide-container {
+  max-width: none;
+}