@oiz/stzh-components 0.0.0-pretest

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

@@ -0,0 +1,436 @@
+/**
+ * Colors
+ */
+/*
+ * Base
+ */
+/**
+ * Link
+ */
+/**
+ * Text
+ */
+/**
+ * Richtext
+ */
+/**
+ * Section
+ */
+/**
+ * Header
+ */
+/**
+ * Appnav
+ */
+/**
+ * Progressbar
+ */
+/**
+ * Loader
+ */
+/**
+ * Table
+ */
+/**
+ * Heading
+ */
+/**
+ * Menu (Item)
+ */
+/**
+ * Form Elements (Input / Checkbox / Radio / Select / Datepicker)
+ */
+/**
+ * Popover
+ */
+/**
+ * Tooltips
+ */
+/**
+ * Accordions
+ */
+/**
+ * Buttons
+ */
+/**
+ * Box Shadows
+ */
+/**
+ * Z-Indexes
+ * Inspired by https://www.duetds.com/tokens/#z-index
+ */
+/**
+ * Icon sizes
+ */
+/**
+ * Grid
+ */
+/**
+ * Breakpoints
+ */
+/**
+ * Container
+ */
+/**
+ * Spaces
+ */
+/**
+ * Fonts
+ */
+:host {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: normal;
+  color: var(--stzh-base-color);
+  box-sizing: border-box;
+  display: block;
+}
+:host[hidden] {
+  display: none;
+}
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: border-box;
+}
+
+@-webkit-keyframes stzh-header-open {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}
+
+@keyframes stzh-header-open {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}
+@-webkit-keyframes stzh-header-close {
+  from {
+    transform: translateY(0%);
+  }
+  to {
+    transform: translateY(-100%);
+  }
+}
+@keyframes stzh-header-close {
+  from {
+    transform: translateY(0%);
+  }
+  to {
+    transform: translateY(-100%);
+  }
+}
+:host ::slotted(img[slot=logo]) {
+  width: auto;
+  height: 100%;
+}
+:host ::slotted(stzh-popover[slot=login]) {
+  display: flex;
+  flex-grow: 1;
+}
+:host ::slotted(stzh-popover[slot=login]) .stzh-popover,
+:host ::slotted(stzh-popover[slot=login]) .stzh-popover__trigger {
+  display: flex;
+  flex-grow: 1;
+}
+:host ::slotted(stzh-popover[slot=login]) .stzh-popover .stzh-popover__trigger stzh-button .stzh-button {
+  font-size: var(--stzh-font-micro-font-size);
+  line-height: var(--stzh-font-micro-text-line-height);
+  height: auto;
+}
+@media screen and (max-width: 799px) {
+  :host ::slotted(stzh-popover[slot=login]) .stzh-popover .stzh-popover__trigger stzh-button .stzh-button {
+    border-radius: 0;
+    height: 100%;
+  }
+}
+@media screen and (max-width: 799px) {
+  :host ::slotted(stzh-popover[slot=login]) .stzh-popover .stzh-popover__trigger stzh-button .stzh-button__badge {
+    top: 0.5rem;
+    right: 0.4375rem;
+  }
+}
+
+.header {
+  /* Hide logo */
+  /* Has empty metabar */
+  /* Sticky metabar */
+  /* Sticky variant */
+  /* Sticky closing */
+}
+.header__inner {
+  transition: box-shadow var(--stzh-base-transition-animation-speed);
+}
+.header__main {
+  position: relative;
+  z-index: var(--stzh-z-index-header);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  box-shadow: var(--stzh-box-shadow-header);
+  background-color: var(--stzh-color-white);
+  transition: box-shadow var(--stzh-base-transition-animation-speed);
+}
+@media screen and (min-width: 800px) {
+  .header__main {
+    box-shadow: none;
+    flex-direction: column-reverse;
+    border-bottom: 0.0625rem solid var(--stzh-base-border-color);
+    padding-top: 4rem;
+  }
+  @supports ((position: -webkit-sticky) or (position: sticky)) {
+    .header__main {
+      padding-top: 0;
+    }
+  }
+}
+.header__metabar {
+  border-top: 0.0625rem solid var(--stzh-base-border-color);
+}
+@media screen and (min-width: 800px) {
+  .header__metabar {
+    border-top: none;
+    background-color: var(--stzh-color-grey5);
+    z-index: 1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+  @supports ((position: -webkit-sticky) or (position: sticky)) {
+    .header__metabar {
+      position: -webkit-sticky;
+      position: sticky;
+    }
+  }
+}
+.header__metabar-inner {
+  margin: 0 1.25rem;
+  display: flex;
+  align-items: stretch;
+  height: 3rem;
+}
+@media screen and (min-width: 600px) {
+  .header__metabar-inner {
+    margin: 0 2rem;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .header__metabar-inner {
+    margin: 0 2.5rem;
+  }
+}
+@media screen and (min-width: 1260px) {
+  .header__metabar-inner {
+    margin: 0 5.5rem;
+  }
+}
+@media screen and (min-width: 1440px) {
+  .header__metabar-inner {
+    margin: 0 auto;
+    width: 78.75rem;
+  }
+}
+@media screen and (max-width: 799px) {
+  .header__metabar-inner {
+    margin: 0 auto;
+  }
+}
+@media screen and (min-width: 800px) {
+  .header__metabar-inner {
+    justify-content: flex-end;
+    align-items: center;
+    height: 4rem;
+  }
+}
+.header__metabar-nav {
+  display: none;
+}
+@media screen and (min-width: 800px) {
+  .header__metabar-nav {
+    display: inline-flex;
+  }
+}
+.header__metabar-login {
+  display: flex;
+  flex-basis: 50%;
+}
+@media screen and (min-width: 800px) {
+  .header__metabar-login:not(:first-child) {
+    flex-basis: auto;
+    margin-left: var(--stzh-space-small);
+  }
+}
+.header__logobar {
+  display: flex;
+  background-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+.header__logobar-logo {
+  box-sizing: content-box;
+  display: flex;
+  background-color: var(--stzh-color-white);
+  overflow: hidden;
+  width: calc(100% - 3rem - 0.0625rem);
+}
+@media screen and (min-width: 800px) {
+  .header__logobar-logo {
+    width: 25rem;
+  }
+}
+@media screen and (min-width: 1260px) {
+  .header__logobar-logo {
+    width: 28.75rem;
+  }
+}
+@media screen and (min-width: 1440px) {
+  .header__logobar-logo {
+    padding-left: calc((100vw - 78.75rem - var(--stzh-scrollbar-width, 0px)) / 2);
+  }
+}
+.header__logo-link {
+  flex-grow: 1;
+  display: inline-flex;
+  height: 4.75rem;
+  padding: var(--stzh-space-medium);
+  padding-left: 1.25rem;
+  transition: opacity var(--stzh-base-transition-animation-speed);
+}
+@media screen and (min-width: 600px) {
+  .header__logo-link {
+    padding-left: 2rem;
+  }
+}
+@media screen and (min-width: 800px) {
+  .header__logo-link {
+    height: 5.625rem;
+  }
+}
+@media screen and (min-width: 1260px) {
+  .header__logo-link {
+    height: 7.5rem;
+    padding: var(--stzh-space-large);
+    padding-left: 5.5rem;
+  }
+}
+@media screen and (min-width: 1440px) {
+  .header__logo-link {
+    padding-left: 0;
+  }
+}
+.header__appnav {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: calc(var(--stzh-z-index-header) - 1);
+  box-shadow: var(--stzh-box-shadow-header);
+  background-color: var(--stzh-color-white);
+}
+@media screen and (min-width: 600px) {
+  .header__appnav {
+    position: static;
+    box-shadow: none;
+  }
+}
+@media screen and (min-width: 600px) {
+  .header__appnav-inner {
+    margin: 0 1.25rem;
+  }
+}
+@media screen and (min-width: 600px) and (min-width: 600px) {
+  .header__appnav-inner {
+    margin: 0 2rem;
+  }
+}
+@media screen and (min-width: 600px) and (min-width: 1024px) {
+  .header__appnav-inner {
+    margin: 0 2.5rem;
+  }
+}
+@media screen and (min-width: 600px) and (min-width: 1260px) {
+  .header__appnav-inner {
+    margin: 0 5.5rem;
+  }
+}
+@media screen and (min-width: 600px) and (min-width: 1440px) {
+  .header__appnav-inner {
+    margin: 0 auto;
+    width: 78.75rem;
+  }
+}
+.header--hide-logo .header__logo-link {
+  opacity: 0;
+}
+@media screen and (max-width: 799px) {
+  .header--has-empty-metabar .header__metabar {
+    display: none;
+  }
+}
+@media screen and (min-width: 800px) {
+  .header--sticky-metabar:not(.header--sticky) .header__metabar {
+    position: fixed;
+  }
+}
+@media screen and (min-width: 600px) {
+  .header--sticky .header__inner {
+    -webkit-animation: stzh-header-open var(--stzh-base-transition-animation-speed);
+            animation: stzh-header-open var(--stzh-base-transition-animation-speed);
+    z-index: var(--stzh-z-index-header);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    margin: 0;
+    box-shadow: var(--stzh-box-shadow-header);
+  }
+}
+@media screen and (max-width: 599px) {
+  .header--sticky .header__main {
+    -webkit-animation: stzh-header-open var(--stzh-base-transition-animation-speed);
+            animation: stzh-header-open var(--stzh-base-transition-animation-speed);
+    z-index: var(--stzh-z-index-header);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    margin: 0;
+  }
+}
+@media screen and (min-width: 600px) {
+  .header--sticky .header__main {
+    box-shadow: none;
+  }
+}
+@media screen and (max-width: 799px) {
+  .header--sticky .header__appnav {
+    border-top: 0.0625rem solid var(--stzh-base-border-color);
+  }
+}
+.header--sticky .header__metabar {
+  border-top: none;
+}
+.header--sticky.header--has-empty-metabar .header__metabar {
+  display: none;
+}
+.header--sticky .header__logobar {
+  display: none;
+}
+@media screen and (min-width: 600px) {
+  .header--sticky-closing .header__inner {
+    -webkit-animation: stzh-header-close var(--stzh-base-transition-animation-speed);
+            animation: stzh-header-close var(--stzh-base-transition-animation-speed);
+  }
+}
+@media screen and (max-width: 599px) {
+  .header--sticky-closing .header__main {
+    -webkit-animation: stzh-header-close var(--stzh-base-transition-animation-speed);
+            animation: stzh-header-close var(--stzh-base-transition-animation-speed);
+  }
+}

package/dist/collection/components/stzh-header/stzh-header.js

@@ -0,0 +1,267 @@
+import { Host, h, writeTask, readTask, } from "@stencil/core";
+import { hasSlot } from "../../utils/utils";
+import { media } from '../../utils/media-utils';
+/**
+ * @slot logo - Slot for brand logo
+ * @slot nav - Slot for `stzh-metanav` element
+ * @slot login - Slot for login button
+ * @slot appnav - Slot for `stzh-appnav` element
+ */
+export class StzhHeader {
+  constructor() {
+    /** Portal link (for logo) */
+    this.href = "https://stadt-zuerich.ch";
+    /**
+     * Prevent creating a appnav placeholder element
+     * with the size of appnav inside header parent element.
+     * This prevents the fixed appnav to overlap
+     * content at the end on mikro breakpoint,
+     * but could lead to problems with certain layouts.
+     */
+    this.preventAppnavPlaceholder = false;
+    this.hideLogo = false;
+    this.sticky = false;
+    this.stickyClosing = false;
+    this.stickyMetabar = false;
+    this.stickyMetabarEnd = false;
+  }
+  /** Update position / sticky state of header */
+  async updatePosition() {
+    const removeSticky = () => {
+      this.sticky = false;
+      this.stickyClosing = false;
+      this.paddingTop = 0;
+    };
+    if (this.scrollingUp && this.belowStayStickyPoint) {
+      if (!this.sticky && this.belowStartStickyPoint) {
+        this.paddingTop = this.headerHeight;
+        this.sticky = true;
+      }
+      this.updateMetabarPosition();
+    }
+    else {
+      if (this.sticky && this.belowStayStickyPoint) {
+        const animationEnd = () => {
+          removeSticky();
+          this.updateMetabarPosition();
+          this.innerElement.removeEventListener('animationend', animationEnd);
+        };
+        this.innerElement.addEventListener('animationend', animationEnd);
+        this.stickyClosing = true;
+      }
+      else {
+        removeSticky();
+        this.updateMetabarPosition();
+      }
+    }
+  }
+  resizeListener() {
+    if (this.debounceResize) {
+      window.cancelAnimationFrame(this.debounceResize);
+    }
+    this.debounceResize = requestAnimationFrame(() => {
+      readTask(() => {
+        this.isSmall = media('small').matches;
+        this.isSmallheader = media('smallheader').matches;
+        this.headerTop = this.element.offsetTop;
+        this.headerHeight = this.element.offsetHeight;
+        this.appnavHeight = this.appnavElement ? this.appnavElement.offsetHeight : 0;
+        this.metabarHeight = this.metabarElement ? this.metabarElement.offsetHeight : 0;
+      });
+      writeTask(() => {
+        if (this.appnavHeight && !this.isSmall && !this.preventAppnavPlaceholder) {
+          this.appnavPlaceholderElement.style.height = `${this.appnavHeight}px`;
+        }
+        else {
+          this.appnavPlaceholderElement.style.height = "0px";
+        }
+      });
+      this.scrollListener();
+    });
+  }
+  scrollListener() {
+    readTask(() => {
+      this.scrollTop = this.getScrollTop();
+      this.scrollingUp = this.lastScrollTop && this.lastScrollTop > this.scrollTop;
+      this.lastScrollTop = this.scrollTop;
+      this.innerHeight = this.innerElement ? this.innerElement.offsetHeight : 0;
+      this.mainHeight = this.mainElement ? this.mainElement.offsetHeight : 0;
+      this.logobarHeight = this.sticky
+        ? this.isSmall
+          ? this.headerHeight - this.innerHeight
+          : this.headerHeight - this.mainHeight
+        : this.logobarElement
+          ? this.logobarElement.offsetHeight
+          : 0;
+      this.belowStayStickyPoint = this.scrollTop > this.logobarHeight;
+      this.belowStartStickyPoint = this.scrollTop > this.headerHeight;
+      this.headerOverlap = (this.headerTop - this.scrollTop) / -1;
+      this.hideLogo = this.isSmallheader && this.headerOverlap > 10;
+    });
+    writeTask(() => {
+      this.updatePosition();
+    });
+  }
+  getScrollTop() {
+    return window.pageYOffset || document.documentElement.scrollTop;
+  }
+  updateMetabarPosition() {
+    if (!this.metabarElement) {
+      return;
+    }
+    if (CSS && CSS.supports && CSS.supports("position", "sticky")) {
+      return;
+    }
+    if (this.isSmallheader && this.headerOverlap > 0 && !this.sticky && !this.stickyClosing) {
+      if (this.headerOverlap < this.mainHeight - this.metabarHeight) {
+        this.stickyMetabar = true;
+        this.stickyMetabarEnd = false;
+        this.metabarTransform = 'translateY(0)';
+      }
+      else {
+        this.stickyMetabar = false;
+        this.stickyMetabarEnd = true;
+        this.metabarTransform = `translateY(${this.logobarHeight}px)`;
+      }
+    }
+    else {
+      this.stickyMetabar = false;
+      this.stickyMetabarEnd = false;
+      this.metabarTransform = 'translateY(0)';
+    }
+  }
+  connectedCallback() {
+    this.appnavPlaceholderElement = document.createElement("div");
+    this.element.parentElement.appendChild(this.appnavPlaceholderElement);
+  }
+  disconnectedCallback() {
+    this.appnavPlaceholderElement.parentElement.removeChild(this.appnavPlaceholderElement);
+  }
+  render() {
+    const navSlotUsed = hasSlot(this.element, 'nav');
+    const loginSlotUsed = hasSlot(this.element, 'login');
+    const appnavSlotUsed = hasSlot(this.element, 'appnav');
+    const classes = {
+      "header": true,
+      "header--sticky": this.sticky,
+      "header--sticky-closing": this.stickyClosing,
+      "header--hide-logo": this.hideLogo,
+      "header--sticky-metabar": this.stickyMetabar,
+      "header--sticky-metabar-end": this.stickyMetabarEnd,
+      "header--has-empty-metabar": !navSlotUsed && !loginSlotUsed,
+      "header--has-appnav": appnavSlotUsed
+    };
+    return (h(Host, null, h("div", { style: { paddingTop: `${this.paddingTop}px` }, class: classes }, h("div", { class: "header__inner", ref: (el) => (this.innerElement = el) }, h("div", { class: "header__main", ref: (el) => (this.mainElement = el) }, h("div", { class: "header__logobar", ref: (el) => (this.logobarElement = el) }, h("div", { class: "header__logobar-logo" }, h("a", { href: this.href, class: "header__logo-link" }, h("slot", { name: "logo" })))), h("div", { class: "header__metabar", style: { transform: this.metabarTransform }, ref: (el) => (this.metabarElement = el) }, h("div", { class: "header__metabar-inner" }, h("div", { class: "header__metabar-nav" }, h("slot", { name: "nav" })), h("div", { class: "header__metabar-login" }, h("slot", { name: "login" }))))), h("div", { class: "header__appnav", ref: (el) => (this.appnavElement = el) }, h("div", { class: "header__appnav-inner" }, h("slot", { name: "appnav" })))))));
+  }
+  static get is() { return "stzh-header"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-header.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-header.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Portal link (for logo)"
+        },
+        "attribute": "href",
+        "reflect": false,
+        "defaultValue": "\"https://stadt-zuerich.ch\""
+      },
+      "preventAppnavPlaceholder": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Prevent creating a appnav placeholder element\r\nwith the size of appnav inside header parent element.\r\nThis prevents the fixed appnav to overlap\r\ncontent at the end on mikro breakpoint,\r\nbut could lead to problems with certain layouts."
+        },
+        "attribute": "prevent-appnav-placeholder",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hideLogo": {},
+      "paddingTop": {},
+      "metabarTransform": {},
+      "sticky": {},
+      "stickyClosing": {},
+      "stickyMetabar": {},
+      "stickyMetabarEnd": {}
+    };
+  }
+  static get methods() {
+    return {
+      "updatePosition": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Update position / sticky state of header",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "resizeListener",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "DOMContentLoaded",
+        "method": "resizeListener",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "load",
+        "method": "resizeListener",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "scroll",
+        "method": "scrollListener",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}