@swisspost/internet-header 1.5.0-beta.0

package/dist/collection/components/post-logo/post-logo.css

@@ -0,0 +1,239 @@
+/**
+ * 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;
+}
+
+.logo {
+  display: block;
+  align-items: center;
+  background: #fc0;
+}
+
+svg,
+.logo-svg {
+  display: block;
+  height: var(--header-height);
+}
+
+.square-logo {
+  display: block;
+}
+@media (min-width: 400px) {
+  .square-logo {
+    display: none;
+  }
+}
+
+.full-logo {
+  display: none;
+}
+@media (min-width: 400px) {
+  .full-logo {
+    display: block;
+  }
+}

package/dist/collection/components/post-logo/post-logo.js

@@ -0,0 +1,60 @@
+import { Host, h } from '@stencil/core';
+import { throttle } from 'throttle-debounce';
+import { state } from '../../data/store';
+import { LogoSprite, FaviconSvg } from './logo-sprite.component';
+export class PostLogo {
+  constructor() {
+    this.showFaviconLogo = undefined;
+    // Register window resize event listener and a resize observer on the mainnav controls (they change size while controls are being loaded) to display an accurately sized logo
+    this.throttledResize = throttle(300, () => this.handleResize());
+    window.addEventListener('resize', this.throttledResize, { passive: true });
+    this.resizeObserver = new ResizeObserver(this.handleResize.bind(this));
+    // Initially call the resize handler
+    this.handleResize();
+  }
+  componentDidLoad() {
+    var _a;
+    const mainNavControls = (_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.main-navigation-controls');
+    if (mainNavControls) {
+      this.resizeObserver.observe(mainNavControls);
+    }
+  }
+  disconnectedCallback() {
+    window.removeEventListener('resize', this.throttledResize);
+    this.resizeObserver.disconnect();
+  }
+  handleResize() {
+    var _a, _b;
+    const mainNavControls = (_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.main-navigation-controls');
+    const menuButton = (_b = this.host.parentElement) === null || _b === void 0 ? void 0 : _b.querySelector('.menu-button');
+    if (mainNavControls && menuButton)
+      this.showFaviconLogo =
+        window.innerWidth - (150 + mainNavControls.clientWidth + menuButton.clientWidth) <= 0;
+  }
+  render() {
+    var _a;
+    if (((_a = state.localizedConfig) === null || _a === void 0 ? void 0 : _a.header.logo) === undefined)
+      return;
+    const config = state.localizedConfig.header.logo;
+    return (h(Host, null, h(LogoSprite, null), h("a", { href: config.logoLink, class: "logo" }, h("span", { class: "visually-hidden" }, config.logoLinkTitle), h(FaviconSvg, { className: "square-logo" }), h("img", { class: "logo-svg full-logo", src: config.logoSvg, alt: config.logoText }))));
+  }
+  static get is() { return "post-logo"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["post-logo.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["post-logo.css"]
+    };
+  }
+  static get states() {
+    return {
+      "showFaviconLogo": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=post-logo.js.map

package/dist/collection/components/post-logo/post-logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"post-logo.js","sourceRoot":"","sources":["../../../../src/components/post-logo/post-logo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAOjE,MAAM,OAAO,QAAQ;EAMnB;;IACE,6KAA6K;IAC7K,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;IAChE,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IAC3E,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAEvE,oCAAoC;IACpC,IAAI,CAAC,YAAY,EAAE,CAAC;GACrB;EAED,gBAAgB;;IACd,MAAM,eAAe,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,0CAAE,aAAa,CAAC,2BAA2B,CAAC,CAAC;IAC5F,IAAI,eAAe,EAAE;MACnB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;KAC9C;EACH,CAAC;EAED,oBAAoB;IAClB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IAC3D,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;EACnC,CAAC;EAED,YAAY;;IACV,MAAM,eAAe,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,0CAAE,aAAa,CAAC,2BAA2B,CAAC,CAAC;IAC5F,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,0CAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC1E,IAAI,eAAe,IAAI,UAAU;MAC/B,IAAI,CAAC,eAAe;QAClB,MAAM,CAAC,UAAU,GAAG,CAAC,GAAG,GAAG,eAAe,CAAC,WAAW,GAAG,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;EAC5F,CAAC;EAED,MAAM;;IACJ,IAAI,CAAA,MAAA,KAAK,CAAC,eAAe,0CAAE,MAAM,CAAC,IAAI,MAAK,SAAS;MAAE,OAAO;IAC7D,MAAM,MAAM,GAAG,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC;IAEjD,OAAO,CACL,EAAC,IAAI;MACH,EAAC,UAAU,OAAG;MACd,SAAG,IAAI,EAAE,MAAM,CAAC,QAAQ,EAAE,KAAK,EAAC,MAAM;QACpC,YAAM,KAAK,EAAC,iBAAiB,IAAE,MAAM,CAAC,aAAa,CAAQ;QAC3D,EAAC,UAAU,IAAC,SAAS,EAAC,aAAa,GAAG;QACtC,WAAK,KAAK,EAAC,oBAAoB,EAAC,GAAG,EAAE,MAAM,CAAC,OAAO,EAAE,GAAG,EAAE,MAAM,CAAC,QAAQ,GAAI,CAC3E,CACC,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, State, Element } from '@stencil/core';\r\nimport { throttle } from 'throttle-debounce';\r\nimport { state } from '../../data/store';\r\nimport { LogoSprite, FaviconSvg } from './logo-sprite.component';\r\n\r\n@Component({\r\n  tag: 'post-logo',\r\n  styleUrl: 'post-logo.scss',\r\n  shadow: true,\r\n})\r\nexport class PostLogo {\r\n  @State() showFaviconLogo: boolean;\r\n  @Element() host: HTMLPostLogoElement;\r\n  private throttledResize: throttle<() => void>;\r\n  private resizeObserver: ResizeObserver;\r\n\r\n  constructor() {\r\n    // Register window resize event listener and a resize observer on the mainnav controls (they change size while controls are being loaded) to display an accurately sized logo\r\n    this.throttledResize = throttle(300, () => this.handleResize());\r\n    window.addEventListener('resize', this.throttledResize, { passive: true });\r\n    this.resizeObserver = new ResizeObserver(this.handleResize.bind(this));\r\n\r\n    // Initially call the resize handler\r\n    this.handleResize();\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const mainNavControls = this.host.parentElement?.querySelector('.main-navigation-controls');\r\n    if (mainNavControls) {\r\n      this.resizeObserver.observe(mainNavControls);\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    window.removeEventListener('resize', this.throttledResize);\r\n    this.resizeObserver.disconnect();\r\n  }\r\n\r\n  handleResize() {\r\n    const mainNavControls = this.host.parentElement?.querySelector('.main-navigation-controls');\r\n    const menuButton = this.host.parentElement?.querySelector('.menu-button');\r\n    if (mainNavControls && menuButton)\r\n      this.showFaviconLogo =\r\n        window.innerWidth - (150 + mainNavControls.clientWidth + menuButton.clientWidth) <= 0;\r\n  }\r\n\r\n  render() {\r\n    if (state.localizedConfig?.header.logo === undefined) return;\r\n    const config = state.localizedConfig.header.logo;\r\n\r\n    return (\r\n      <Host>\r\n        <LogoSprite />\r\n        <a href={config.logoLink} class=\"logo\">\r\n          <span class=\"visually-hidden\">{config.logoLinkTitle}</span>\r\n          <FaviconSvg className=\"square-logo\" />\r\n          <img class=\"logo-svg full-logo\" src={config.logoSvg} alt={config.logoText} />\r\n        </a>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/post-main-navigation/components/level-one-action.component.js

@@ -0,0 +1,13 @@
+import { h } from '@stencil/core';
+export const LevelOneAction = (props) => {
+  var _a, _b, _c;
+  const TagName = props.level.url ? 'a' : 'button';
+  return (h(TagName, { class: {
+      'main-link': true,
+      'active': !!props.level.isActiveOverride,
+      'focus': props.isOpen,
+    }, href: props.level.url, title: ((_a = props.level.title) === null || _a === void 0 ? void 0 : _a.trim()) && ((_b = props.level.title) === null || _b === void 0 ? void 0 : _b.trim()) !== ((_c = props.level.text) === null || _c === void 0 ? void 0 : _c.trim())
+      ? props.level.title
+      : undefined, tabindex: props.level.url ? undefined : 0, "aria-haspopup": !props.level.noFlyout + '', "aria-expanded": props.level.noFlyout ? null : props.isOpen + '', onTouchEnd: e => props.onTouchEnd(e), onKeyDown: e => props.onKeyDown(e), onClick: e => props.onClick(e) }, h("span", null, props.level.text), h("svg", { "aria-hidden": "true" }, h("use", { href: "#pi-pointy-arrow-right" }))));
+};
+//# sourceMappingURL=level-one-action.component.js.map

package/dist/collection/components/post-main-navigation/components/level-one-action.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"level-one-action.component.js","sourceRoot":"","sources":["../../../../../src/components/post-main-navigation/components/level-one-action.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAM9B,EAAE,EAAE;;EACH,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;EAEjD,OAAO,CACL,EAAC,OAAO,IACN,KAAK,EAAE;MACL,WAAW,EAAE,IAAI;MACjB,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,gBAAgB;MACxC,OAAO,EAAE,KAAK,CAAC,MAAM;KACtB,EACD,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,EACrB,KAAK,EACH,CAAA,MAAA,KAAK,CAAC,KAAK,CAAC,KAAK,0CAAE,IAAI,EAAE,KAAI,CAAA,MAAA,KAAK,CAAC,KAAK,CAAC,KAAK,0CAAE,IAAI,EAAE,OAAK,MAAA,KAAK,CAAC,KAAK,CAAC,IAAI,0CAAE,IAAI,EAAE,CAAA;MACjF,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK;MACnB,CAAC,CAAC,SAAS,EAEf,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,mBAC1B,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,mBAC1B,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,EAC9D,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,EACpC,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAClC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAE9B,gBAAO,KAAK,CAAC,KAAK,CAAC,IAAI,CAAQ;IAC/B,0BAAiB,MAAM;MACrB,WAAK,IAAI,EAAC,wBAAwB,GAAG,CACjC,CACE,CACX,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\r\nimport { NavMainEntity } from '../../../models/header.model';\r\n\r\nexport const LevelOneAction = (props: {\r\n  level: NavMainEntity;\r\n  isOpen: boolean;\r\n  onTouchEnd: (e: any) => void;\r\n  onKeyDown: (e: any) => void;\r\n  onClick: (e: any) => void;\r\n}) => {\r\n  const TagName = props.level.url ? 'a' : 'button';\r\n\r\n  return (\r\n    <TagName\r\n      class={{\r\n        'main-link': true,\r\n        'active': !!props.level.isActiveOverride,\r\n        'focus': props.isOpen,\r\n      }}\r\n      href={props.level.url}\r\n      title={\r\n        props.level.title?.trim() && props.level.title?.trim() !== props.level.text?.trim()\r\n          ? props.level.title\r\n          : undefined\r\n      }\r\n      tabindex={props.level.url ? undefined : 0}\r\n      aria-haspopup={!props.level.noFlyout + ''}\r\n      aria-expanded={props.level.noFlyout ? null : props.isOpen + ''}\r\n      onTouchEnd={e => props.onTouchEnd(e)}\r\n      onKeyDown={e => props.onKeyDown(e)}\r\n      onClick={e => props.onClick(e)}\r\n    >\r\n      <span>{props.level.text}</span>\r\n      <svg aria-hidden=\"true\">\r\n        <use href=\"#pi-pointy-arrow-right\" />\r\n      </svg>\r\n    </TagName>\r\n  );\r\n};\r\n"]}