@oiz/stzh-components 2.1.0 → 2.2.0-beta

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

@@ -111,20 +111,29 @@
   }
 }
 :host ::slotted([slot=image]) {
-  margin-top: var(--stzh-space-xxlarge);
-  margin-bottom: var(--stzh-space-xxlarge);
+  margin-top: var(--stzh-space-medium);
+}
+@media screen and (min-width: 1024px) {
+  :host ::slotted([slot=image]) {
+    margin-top: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host ::slotted([slot=image]) {
+    margin-top: var(--stzh-space-xlarge);
+  }
 }
 :host ::slotted([slot=lead]) {
-  margin-top: var(--stzh-space-medium);
+  margin-top: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
   :host ::slotted([slot=lead]) {
-    margin-top: var(--stzh-space-large);
+    margin-top: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted([slot=lead]) {
-    margin-top: var(--stzh-space-xlarge);
+    margin-top: var(--stzh-space-xxxlarge);
   }
 }
 

package/dist/collection/components/stzh-pagetitle-hero/stzh-pagetitle-hero.css

@@ -217,7 +217,7 @@
 }
 @media screen and (min-width: 600px) {
   .stzh-pagetitle-hero__title {
-    font-size: 3rem;
+    font-size: 2.8125rem;
   }
 }
 .stzh-pagetitle-hero__subtitle {

package/dist/collection/components/stzh-pagetitle-hero/stzh-pagetitle-hero.js

@@ -33,7 +33,7 @@ export class StzhPagetitleHero {
       this.destroyFitty();
       const isSmall = media("small").matches;
       this.fitty = Fitty(this.mainTitleElement, {
-        minSize: isSmall ? 48 : 32,
+        minSize: isSmall ? 45 : 32,
         maxSize: isSmall ? 96 : 64
       });
     };

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

@@ -1,6 +1,7 @@
 import { Host, h, } from "@stencil/core";
 import { computePosition, offset, shift, flip, arrow, autoUpdate, } from "@floating-ui/dom";
 import { createFocusTrap } from "focus-trap";
+import { isStzhElement } from "../../utils/utils";
 import { fetchTranslations } from "../../utils/translation-utils";
 import { media } from "../../utils/media-utils";
 import { waitForEvent } from "../../utils/event-utils";
@@ -276,8 +277,7 @@ export class StzhPopover {
     }
   }
   async componentWillLoad() {
-    this.labelId = `stzh-popover-label-${popoverCounter}`;
-    popoverCounter++;
+    this.labelId = `stzh-popover-label-${popoverCounter++}`;
     this.distanceWatcher(this.distance);
     if (!this.localization) {
       this.localization = await fetchTranslations(this.element, "popover");
@@ -285,16 +285,18 @@ export class StzhPopover {
   }
   popoverShown() {
     document.body.classList.add(CLASS_BODY_OPEN);
+    const isStzh = isStzhElement(this.triggerElement.firstElementChild);
     this.triggerElement.firstElementChild
-      .setAttribute("aria-expanded", "true");
+      .setAttribute(isStzh ? "a11y-expanded" : "aria-expanded", "true");
     if (this.trap) {
       this.trap.activate();
     }
   }
   popoverHidden() {
     document.body.classList.remove(CLASS_BODY_OPEN);
+    const isStzh = isStzhElement(this.triggerElement.firstElementChild);
     this.triggerElement.firstElementChild
-      .setAttribute("aria-expanded", "false");
+      .setAttribute(isStzh ? "a11y-expanded" : "aria-expanded", "false");
     if (this.trap) {
       this.trap.deactivate();
     }
@@ -334,7 +336,9 @@ export class StzhPopover {
     if (this.autoUpdateCleanup) {
       this.autoUpdateCleanup();
     }
-    this.triggerElement.firstElementChild.removeEventListener("click", this.onClickTrigger);
+    if (this.triggerElement && this.triggerElement.firstElementChild) {
+      this.triggerElement.firstElementChild.removeEventListener("click", this.onClickTrigger);
+    }
   }
   render() {
     const classes = {

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

@@ -1198,6 +1198,7 @@ main blockquote {
   margin: var(--stzh-space-xxlarge);
   color: var(--stzh-richttext-blockquote-color);
   position: relative;
+  overflow: hidden;
 }
 @media screen and (min-width: 600px) {
   main blockquote {
@@ -3137,6 +3138,7 @@ main .ql-editor blockquote {
   margin: var(--stzh-space-xxlarge);
   color: var(--stzh-richttext-blockquote-color);
   position: relative;
+  overflow: hidden;
 }
 @media screen and (min-width: 600px) {
   main .ql-editor blockquote {

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

@@ -274,8 +274,8 @@
   color: var(--stzh-color-grey61);
 }
 .stzh-radio--is-disabled .stzh-radio__input ~ .stzh-radio__mark {
-  border-color: var(--stzh-color-grey5);
+  border-color: transparent;
 }
 .stzh-radio--is-disabled .stzh-radio__mark {
-  background-color: var(--stzh-color-grey5);
+  background-color: var(--stzh-color-black8);
 }

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

@@ -523,6 +523,7 @@
 :host ::slotted(*) ul, :host ::slotted(*) ol, :host ::slotted(*) dl {
   list-style: none;
   padding-left: 0;
+  overflow: hidden;
 }
 :host ::slotted(*) ol {
   counter-reset: li-counter;
@@ -567,6 +568,7 @@
   margin: var(--stzh-space-xxlarge);
   color: var(--stzh-richttext-blockquote-color);
   position: relative;
+  overflow: hidden;
 }
 @media screen and (min-width: 600px) {
   :host ::slotted(*) blockquote {

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

@@ -0,0 +1,113 @@
+/**
+ * Colors
+ */
+/*
+ * Base
+ */
+/**
+ * Flyingfocus
+ */
+/**
+ * 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;
+}
+
+.stzh-sitemap stzh-datalist-item[href]:not([href=""]) {
+  --font-family: var(--stzh-font-family-heavy);
+  --font-weight: var( --stzh-font-weight-heavy);
+  --color: var(--stzh-base-color);
+  --action-display: none;
+}
+.stzh-sitemap stzh-datalist-item[href]:not([href=""]) stzh-datalist-item[href]:not([href=""]) {
+  --color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  --hover-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
+.stzh-sitemap stzh-datalist-item[href]:not([href=""]) stzh-datalist-item[href]:not([href=""]) stzh-datalist-item[href]:not([href=""]) {
+  --font-family: var(--stzh-font-family-regular);
+  --font-weight: var( --stzh-font-weight-regular);
+}

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

@@ -0,0 +1,53 @@
+import { Host, h } from "@stencil/core";
+/**
+ */
+export class StzhSitemap {
+  constructor() {
+    this.items = [];
+  }
+  render() {
+    const classes = {
+      "stzh-sitemap": true
+    };
+    return (h(Host, null, h("div", { class: classes }, h("stzh-datalist", { items: this.items }))));
+  }
+  static get is() { return "stzh-sitemap"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-sitemap.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-sitemap.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "items": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhDatalistItemEntry[] | string",
+          "resolved": "StzhDatalistItemEntry[] | string",
+          "references": {
+            "StzhDatalistItemEntry": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Items in sitemap\nArray of objects that must at least include `value` attribute.\nCan optionally contain `label`, `meta`, `icon`, `href` attribute and be nested to display deeper levels:\n`[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\", \"items\": [...]}]`"
+        },
+        "attribute": "items",
+        "reflect": false,
+        "defaultValue": "[]"
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+}

package/dist/collection/components/stzh-sitemap/stzh-sitemap.stories.js

@@ -0,0 +1,78 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Sitemap',
+  component: 'stzh-sitemap',
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('sitemap'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-sitemap {...args}></stzh-sitemap>
+);
+
+const items = `[
+  {
+    "value": "Level 1",
+    "href": "#",
+    "target": "_blank",
+    "items": [
+      {
+        "value": "Level 2",
+        "href": "#",
+        "target": "_blank",
+        "items": [
+          {
+            "value": "Level 3",
+            "href": "#",
+            "target": "_blank"
+          },
+          {
+            "value": "Level 3",
+            "href": "#",
+            "target": "_blank"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "value": "Level 1",
+    "href": "#",
+    "target": "_blank",
+    "items": [
+      {
+        "value": "Level 2",
+        "href": "#",
+        "target": "_blank"
+      },
+      {
+        "value": "Level 2",
+        "href": "#",
+        "target": "_blank"
+      }
+    ]
+  }
+]`;
+
+export const Default = Template.bind({});
+Default.args = {
+  items
+};

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

@@ -18,16 +18,10 @@ export class StzhSortable {
     this.selectedItem = null;
     this.resetItemOnBlur = false;
     this.init = () => {
-      if (!this.getContainer()) {
+      if (!this.getContainer() || this.disabled) {
         return;
       }
-      Array.from(this.getContainer().children).forEach((child) => {
-        child.classList.add(CLASS_ITEM);
-        child.addEventListener('blur', this.onBlur);
-        child.addEventListener('keydown', this.onKeydown);
-        child.setAttribute('tabindex', '0');
-        child.setAttribute('aria-describedby', `${this.sortableId}-description`);
-      });
+      this.setAttributes();
     };
     this.updated = async (event) => {
       let newIndex;
@@ -171,10 +165,16 @@ export class StzhSortable {
     });
     this.resetItemOnBlur = true;
   }
-  disabledWatcher() {
+  disabledWatcher(newValue) {
+    if (newValue) {
+      this.setAttributes();
+    }
+    else {
+      this.unsetAttributes();
+    }
     this.stzhDisable.emit({
       component: "stzh-sortable",
-      disabled: this.disabled
+      disabled: newValue
     });
   }
   filterElementsWatcher(newValue) {
@@ -246,6 +246,24 @@ export class StzhSortable {
       inline: 'nearest'
     });
   }
+  setAttributes() {
+    Array.from(this.getContainer().children).forEach((child) => {
+      child.classList.add(CLASS_ITEM);
+      child.addEventListener('blur', this.onBlur);
+      child.addEventListener('keydown', this.onKeydown);
+      child.setAttribute('tabindex', '0');
+      child.setAttribute('aria-describedby', `${this.sortableId}-description`);
+    });
+  }
+  unsetAttributes() {
+    Array.from(this.getContainer().children).forEach((child) => {
+      child.classList.remove(CLASS_ITEM);
+      child.removeEventListener('blur', this.onBlur);
+      child.removeEventListener('keydown', this.onKeydown);
+      child.removeAttribute('tabindex');
+      child.removeAttribute('aria-describedby');
+    });
+  }
   async componentWillLoad() {
     this.sortableId = `stzh-sortable-${sortableCounter++}`;
     this.filterElementsWatcher(this.filterElements);
@@ -291,6 +309,7 @@ export class StzhSortable {
   }
   disconnectedCallback() {
     this.observer.disconnect();
+    this.unsetAttributes();
     if (this.sortable) {
       this.sortable.destroy();
       this.sortable = null;

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

@@ -0,0 +1,167 @@
+@charset "UTF-8";
+/**
+ * Colors
+ */
+/*
+ * Base
+ */
+/**
+ * Flyingfocus
+ */
+/**
+ * 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;
+}
+
+@media screen and (min-width: 600px) {
+  :host {
+    --col-left-width: 50%;
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host {
+    --col-left-width: 45%;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([size=small]) {
+    --col-left-width: 33%;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([size=large]) {
+    --col-left-width: 55%;
+  }
+}
+
+:host ::slotted([slot=left]) {
+  margin-bottom: var(--stzh-space-xxxlarge);
+}
+@media screen and (min-width: 600px) {
+  :host ::slotted([slot=left]) {
+    margin-bottom: 0;
+  }
+}
+
+:host([floating]:not([floating=false])) ::slotted([slot=left]) {
+  float: left;
+  width: 100%;
+}
+@media screen and (min-width: 600px) {
+  :host([floating]:not([floating=false])) ::slotted([slot=left]) {
+    width: calc(var(--col-left-width) - var(--stzh-space-large) / 2);
+    margin-right: var(--stzh-space-large);
+  }
+}
+
+.stzh-textandimage {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin: 0 calc(var(--stzh-space-large) / -2);
+  /* Floating variant */
+}
+.stzh-textandimage__left, .stzh-textandimage__right  {
+  width: auto;
+  padding: 0 calc(var(--stzh-space-large) / 2);
+}
+@media screen and (min-width: 600px) {
+  .stzh-textandimage__left {
+    width: var(--col-left-width);
+  }
+}
+@media screen and (min-width: 600px) {
+  .stzh-textandimage__right {
+    width: calc(100% - var(--col-left-width));
+  }
+}
+.stzh-textandimage--is-floating .stzh-textandimage__left {
+  width: auto;
+}