@oiz/stzh-components 2.1.0-beta → 2.2.0-beta

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

@@ -5,6 +5,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -119,13 +122,13 @@ body {
 the .has-focus class is used by the focus target */
 .stzh-flyingfocus-enabled :focus,
 .stzh-flyingfocus-enabled .has-focus {
-  outline: var(--stzh-color-primary) solid 0.125rem;
+  outline: var(--stzh-flyingfocus-color) solid 0.125rem;
   outline-offset: 0.3125rem;
 }
 
 /* thicker border for primary buttons */
 .stzh-flyingfocus-enabled stzh-button[variant="primary"].has-focus {
-  outline: var(--stzh-color-primary) solid 0.1875rem;
+  outline: var(--stzh-flyingfocus-color) solid 0.1875rem;
   outline-offset: 0.25rem;
 }
 
@@ -373,6 +376,9 @@ the .has-focus class is used by the focus target */
   --stzh-base-border-color: var(--stzh-color-grey13);
   --stzh-base-transition-animation-speed: 0.3s;
 
+  /* Flyingfocus */
+  --stzh-flyingfocus-color: var(--stzh-color-primary);
+
   /* Links */
   --stzh-link-color: var(--stzh-color-primary);
   --stzh-link-hover-color: var(--stzh-color-primary-hover);
@@ -425,7 +431,6 @@ the .has-focus class is used by the focus target */
   --stzh-tooltip-drop-shadow: drop-shadow(0 0.125rem 0.625rem rgba(0, 0, 0, 0.16));
 
   /* Accordion */
-  --stzh-accordion-content-padding: var(--stzh-space-medium);
   --stzh-accordion-content-background: var(--stzh-color-grey5);
 }
 
@@ -1193,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 {
@@ -3132,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-progressbar/stzh-progressbar.css

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

package/dist/collection/components/stzh-progressbar-item/stzh-progressbar-item.css

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -271,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-radiogroup/stzh-radiogroup.css

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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

@@ -5,6 +5,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -520,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;
@@ -564,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-row/stzh-row.css

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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

@@ -64,35 +64,35 @@ export class StzhShare {
         blank: true,
         url: `https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`,
         text: this.localization.shareFacebook,
-        icon: "facebook"
+        icon: "facebook-filled"
       },
       "twitter": {
         popup: true,
         blank: true,
         url: `https://twitter.com/intent/tweet?text=${abbreviateText(title, maxTweetLength)}&url=${shareUrl}`,
         text: this.localization.shareTwitter,
-        icon: "twitter"
+        icon: "twitter-filled"
       },
       "linkedin": {
         popup: true,
         blank: true,
         url: `https://www.linkedin.com/shareArticle?mini=true&summary=${description}&title=${title}&url=${shareUrl}`,
         text: this.localization.shareLinkedin,
-        icon: "linkedin"
+        icon: "linkedin-filled"
       },
       "xing": {
         popup: true,
         blank: true,
         url: `https://www.xing.com/spi/shares/new?url=${shareUrl}`,
         text: this.localization.shareXing,
-        icon: "xing"
+        icon: "xing-filled"
       },
       "mail": {
         popup: false,
         blank: false,
         url: `mailto:?subject=${mailSubject}&body=${mailBody}`,
         text: this.localization.shareMail,
-        icon: "mail"
+        icon: "mail-filled"
       }
     };
     return (h(Host, null, h("div", { class: classes }, h("ul", { class: "stzh-share__list" }, this._services.map((service) => h("li", { class: "stzh-share__item" }, h("stzh-tooltip", { content: serviceData[service].text }, h("a", { class: `stzh-share__button is-${service}`, href: serviceData[service].url, "aria-label": serviceData[service].text, rel: serviceData[service].blank ? "nofollow noopener noreferrer" : "nofollow", target: serviceData[service].blank ? "_blank" : "_self", onClick: serviceData[service].popup ? (e) => this.openPopup(serviceData[service].url, e) : null }, h("stzh-icon", { class: "stzh-share__icon", name: serviceData[service].icon })))))))));

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-skiplink/stzh-skiplink.css

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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-status/stzh-status.css

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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

@@ -52,7 +52,7 @@ const Template = (args) => (
       </stzh-text>
 
       <stzh-sticky {...args}>
-        <stzh-actions>
+        <stzh-actions variant="cta">
           <stzh-button slot="primary" label="Label" effect="cta" icon="arrow-right-long" icon-position="right"></stzh-button>
         </stzh-actions>
       </stzh-sticky>

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */