@oiz/stzh-components 2.1.0 → 2.2.0-beta

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

@@ -3,6 +3,7 @@ import { hasSlot, setPropsIfNull } from "../../utils/utils";
 import { media } from '../../utils/media-utils';
 import { fetchTranslations } from "../../utils/translation-utils";
 /**
+ * @slot heading - Slot for heading
  * @slot image - Slot for optional image element
  * @slot content - Slot for content for any elements
  * @slot meta - Slot for meta elements (status or chip)
@@ -110,6 +111,12 @@ export class StzhCard {
     this.handleSelectionChange = (event) => {
       this.checked = event.detail.checked;
     };
+    this.cardClick = (originalEvent) => {
+      this.stzhClick.emit({
+        component: "stzh-card",
+        originalEvent
+      });
+    };
     this.localization = undefined;
     this.collapsed = false;
     this.starred = false;
@@ -117,6 +124,8 @@ export class StzhCard {
     this.selectable = false;
     this.checked = false;
     this.name = "";
+    this.href = undefined;
+    this.target = undefined;
     this.value = "";
     this.disabled = false;
     this.heading = "";
@@ -165,6 +174,9 @@ export class StzhCard {
       this._footerActions = newValue;
     }
   }
+  collapsedWatcher() {
+    this.handleResize();
+  }
   findSortableChildElement() {
     const sortable = this.element.closest("stzh-sortable");
     if (sortable) {
@@ -214,6 +226,7 @@ export class StzhCard {
     const contentUsed = hasSlot(this.element, "content");
     const classes = {
       "stzh-card": true,
+      "stzh-card--has-link": !!this.href,
       "stzh-card--has-image": imageUsed,
       "stzh-card--has-content": contentUsed,
       "stzh-card--has-subtitle": !!this.subtitle,
@@ -240,7 +253,7 @@ export class StzhCard {
     // const headerActions = [
     //   ...this._headerActions
     // ];
-    return (h(Host, { role: "listitem", "aria-label": this.heading }, h("article", { ref: (el) => (this.mainElement = el), class: classes }, h("slot", { name: "image" }), h("div", { class: "stzh-card__content-wrapper" }, h("stzh-icon", { class: "stzh-card__dnd", name: "drag" }), h("header", { ref: (el) => (this.headerElement = el), class: "stzh-card__header", onClick: this.headerClick }, h("div", { class: "stzh-card__header-top" }, h("div", { ref: (el) => (this.headerLeftElement = el), class: "stzh-card__header-left" }, h("div", { class: "stzh-card__title-area" }, h("h3", { class: "stzh-card__title" }, this.heading), this._subtitles.length > 0 &&
+    return (h(Host, { role: "listitem", "aria-label": this.heading }, h("article", { ref: (el) => (this.mainElement = el), class: classes }, h("a", { "aria-hidden": "true", tabindex: "-1", class: "stzh-card__image-link", href: this.href, target: this.target, onClick: this.href ? this.cardClick : null }, h("slot", { name: "image" })), h("div", { class: "stzh-card__content-wrapper" }, h("stzh-icon", { class: "stzh-card__dnd", name: "drag" }), h("header", { ref: (el) => (this.headerElement = el), class: "stzh-card__header", onClick: this.headerClick }, h("div", { class: "stzh-card__header-top" }, h("div", { ref: (el) => (this.headerLeftElement = el), class: "stzh-card__header-left" }, h("div", { class: "stzh-card__title-area" }, h("h3", { class: "stzh-card__title" }, h("a", { class: "stzh-card__title-link", href: this.href, target: this.target, onClick: this.href ? this.cardClick : null }, this.heading ? this.heading : h("slot", { name: "heading" }))), this._subtitles.length > 0 &&
       h(Subtitle, { class: "stzh-card__subtitle", onClick: this.subtitleClick }, this._subtitles.map(subtitle => (h("span", { class: "stzh-card__subtitle-text" }, subtitle)))))), h("div", { ref: (el) => (this.headerRightElement = el), class: "stzh-card__header-right" }, h("div", { class: "stzh-card__card-actions" }, this._headerActions.map(action => (h("stzh-button", { class: {
         "stzh-card__card-action": true,
         "is-button": true,
@@ -405,6 +418,40 @@ export class StzhCard {
         "reflect": true,
         "defaultValue": "\"\""
       },
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Href of card"
+        },
+        "attribute": "href",
+        "reflect": true
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "target if the button is used as link (if href used)"
+        },
+        "attribute": "target",
+        "reflect": false
+      },
       "value": {
         "type": "string",
         "mutable": true,
@@ -453,7 +500,7 @@ export class StzhCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Heading"
+          "text": "Heading (or use heading slot instead)"
         },
         "attribute": "heading",
         "reflect": false,
@@ -635,6 +682,26 @@ export class StzhCard {
   }
   static get events() {
     return [{
+        "method": "stzhClick",
+        "name": "stzhClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Click event (if href is used)"
+        },
+        "complexType": {
+          "original": "StzhCardClickEvent",
+          "resolved": "{ component: \"stzh-card\"; originalEvent: MouseEvent; }",
+          "references": {
+            "StzhCardClickEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
         "method": "stzhCollapse",
         "name": "stzhCollapse",
         "bubbles": true,
@@ -727,15 +794,36 @@ export class StzhCard {
       }, {
         "propName": "footerActions",
         "methodName": "footerActionsWatcher"
+      }, {
+        "propName": "collapsed",
+        "methodName": "collapsedWatcher"
       }];
   }
   static get listeners() {
     return [{
+        "name": "appload",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
         "name": "resize",
         "method": "handleResize",
         "target": "window",
         "capture": false,
         "passive": true
+      }, {
+        "name": "DOMContentLoaded",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "load",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": false
       }];
   }
 }

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

@@ -8,7 +8,7 @@ export default {
   component: 'stzh-card',
   parameters: {
     actions: {
-      handles: ['stzhCollapse', 'stzhStarClick', 'stzhSubtitleClick', 'stzhActionClick']
+      handles: ['stzhCollapse', 'stzhClick', 'stzhStarClick', 'stzhSubtitleClick', 'stzhActionClick']
     },
     layout: 'padded',
     docs: {

package/dist/collection/components/stzh-card-list/stzh-card-list.css

@@ -97,19 +97,35 @@
   box-sizing: border-box;
 }
 
-:host ::slotted(*:not(:last-child):not([slot])) {
+:host[layout=fullwidth] ::slotted(*:not(:last-child):not([slot])) {
   margin-bottom: var(--stzh-space-medium);
 }
 @media screen and (min-width: 1024px) {
-  :host ::slotted(*:not(:last-child):not([slot])) {
+  :host[layout=fullwidth] ::slotted(*:not(:last-child):not([slot])) {
     margin-bottom: var(--stzh-space-large);
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(*:not(:last-child):not([slot])) {
+  :host[layout=fullwidth] ::slotted(*:not(:last-child):not([slot])) {
     margin-bottom: var(--stzh-space-xlarge);
   }
 }
+:host[layout=subpages] ::slotted(*:not([slot])) {
+  width: 100%;
+  margin: calc(var(--stzh-grid-gutter) / 2);
+}
+@media screen and (min-width: 600px) {
+  :host[layout=subpages] ::slotted(*:not([slot])) {
+    width: calc(50% - var(--stzh-grid-gutter-small));
+    margin: calc(var(--stzh-grid-gutter-small) / 2);
+  }
+}
+@media screen and (min-width: 1024px) {
+  :host[layout=subpages] ::slotted(*:not([slot])) {
+    width: calc(33.333% - var(--stzh-grid-gutter-medium));
+    margin: calc(var(--stzh-grid-gutter-medium) / 2);
+  }
+}
 :host ::slotted([slot=description]) stzh-icon {
   color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
 }
@@ -117,23 +133,20 @@
   --color: inherit;
 }
 
+.stzh-card-list {
+  /* Has content inside header */
+  /* Layout variant */
+}
+.stzh-card-list__cards {
+  display: flex;
+  flex-direction: column;
+}
 .stzh-card-list__header {
-  margin-bottom: var(--stzh-space-medium);
   display: flex;
   justify-content: space-between;
   flex-direction: column;
   align-items: flex-start;
 }
-@media screen and (min-width: 1024px) {
-  .stzh-card-list__header {
-    margin-bottom: var(--stzh-space-large);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-card-list__header {
-    margin-bottom: var(--stzh-space-xlarge);
-  }
-}
 @media screen and (min-width: 800px) {
   .stzh-card-list__header {
     flex-direction: row;
@@ -163,4 +176,32 @@
 .stzh-card-list__switch {
   --color: var(--stzh-base-lead-color);
   align-self: end;
+}
+.stzh-card-list--has-header .stzh-card-list__header {
+  margin-bottom: var(--stzh-space-medium);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-card-list--has-header .stzh-card-list__header {
+    margin-bottom: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-card-list--has-header .stzh-card-list__header {
+    margin-bottom: var(--stzh-space-xlarge);
+  }
+}
+.stzh-card-list--layout-subpages .stzh-card-list__cards {
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin: calc(var(--stzh-grid-gutter) / -2);
+}
+@media screen and (min-width: 600px) {
+  .stzh-card-list--layout-subpages .stzh-card-list__cards {
+    margin: calc(var(--stzh-grid-gutter-small) / -2);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .stzh-card-list--layout-subpages .stzh-card-list__cards {
+    margin: calc(var(--stzh-grid-gutter-medium) / -2);
+  }
 }

package/dist/collection/components/stzh-card-list/stzh-card-list.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { cloneElement } from "../../utils/utils";
+import { cloneElement, hasSlot } from "../../utils/utils";
 import { fetchTranslations } from "../../utils/translation-utils";
 /**
  * @slot - Slot for `stzh-card` elements
@@ -41,6 +41,8 @@ export class StzhCardList {
       return clonedElement;
     };
     this.localization = undefined;
+    this.layout = "fullwidth";
+    this.description = undefined;
     this.showToggleLink = false;
     this.sortableEnabled = false;
     this.sortableDataIdAttribute = "data-id";
@@ -58,10 +60,13 @@ export class StzhCardList {
     this.updateCollapsedState();
   }
   render() {
+    const descriptionSlotUsed = hasSlot(this.element, "description") || !!this.description;
     const classes = {
-      "stzh-card-list": true
+      "stzh-card-list": true,
+      "stzh-card-list--has-header": this.showToggleLink || descriptionSlotUsed,
+      [`stzh-card-list--layout-${this.layout}`]: !!this.layout
     };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-card-list__header" }, h("div", { class: "stzh-card-list__description" }, h("slot", { name: "description" })), this.showToggleLink &&
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-card-list__header" }, h("div", { class: "stzh-card-list__description" }, this.description ? this.description : h("slot", { name: "description" })), this.showToggleLink &&
       h("stzh-link", { class: "stzh-card-list__switch", icon: this.allCollapsed ? "list-expanded" : "list-shrinked", label: this.allCollapsed ? this.localization.expandAll : this.localization.collapseAll, onClick: this.collapseClick })), h("stzh-sortable", { disabled: !this.sortableEnabled, dataIdAttribute: this.sortableDataIdAttribute, ghostClone: this.sortableGhostClone }, h("div", { class: "stzh-card-list__cards", role: "list" }, h("slot", null))))));
   }
   static get is() { return "stzh-card-list"; }
@@ -98,6 +103,41 @@ export class StzhCardList {
           "text": "Translation strings"
         }
       },
+      "layout": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"fullwidth\" | \"subpages\"",
+          "resolved": "\"fullwidth\" | \"subpages\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "layout",
+        "reflect": true,
+        "defaultValue": "\"fullwidth\""
+      },
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Description message (use description slot as alternative)"
+        },
+        "attribute": "description",
+        "reflect": false
+      },
       "showToggleLink": {
         "type": "boolean",
         "mutable": false,

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

@@ -782,18 +782,4 @@ stzh-chart *,
 stzh-chart *::before,
 stzh-chart *::after {
   box-sizing: border-box;
-}
-
-.stzh-chart__caption {
-  font-size: var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));
-  line-height: var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));
-}
-@media screen and (min-width: 1024px) {
-  .stzh-chart__caption {
-    font-size: var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));
-    line-height: var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height));
-  }
-}
-.stzh-chart__caption:not(:empty) {
-  margin-top: var(--stzh-space-small);
 }

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

@@ -8,7 +8,6 @@ import * as topojson from "topojson-client";
 export class StzhChart {
   constructor() {
     this.initialized = false;
-    this.caption = "";
     this.chartId = undefined;
     this.create = function () { };
   }
@@ -28,7 +27,7 @@ export class StzhChart {
     const classes = {
       "stzh-chart": true
     };
-    return (h(Host, null, h("figure", { class: classes }, h("div", { id: this.chartId, ref: (el) => (this.chartElement = el), class: "stzh-chart__element" }), h("figcaption", { class: "stzh-chart__caption" }, this.caption ? this.caption : h("slot", { name: "caption" })))));
+    return (h(Host, null, h("div", { class: classes }, h("div", { id: this.chartId, ref: (el) => (this.chartElement = el), class: "stzh-chart__element" }))));
   }
   static get is() { return "stzh-chart"; }
   static get originalStyleUrls() {
@@ -43,24 +42,6 @@ export class StzhChart {
   }
   static get properties() {
     return {
-      "caption": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Caption"
-        },
-        "attribute": "caption",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
       "chartId": {
         "type": "string",
         "mutable": false,

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

@@ -25,13 +25,14 @@ export default {
 };
 
 const Template = (args) => (
-  <stzh-chart {...args}></stzh-chart>
+  <stzh-figure caption="Laboris laborum aute id laboris culpa esse aliquip nisi anim velit.">
+    <stzh-chart {...args}></stzh-chart>
+  </stzh-figure>
 );
 
 export const Default = Template.bind({});
 Default.args = {
   'chart-id': 'PieChartFourCat',
-  caption: 'Laboris laborum aute id laboris culpa esse aliquip nisi anim velit.',
   create: function(container, libs) {
     var PieChartFourCatParams = {
       id: '#PieChartFourCat',
@@ -84,7 +85,7 @@ Default.args = {
       var PIE_DIAMETER = 260;
       var LEGEND_TOP_PADDING = 40;
       var LEGEND_LEFT_PADDING = 25;
-      var LEGEND_HEIGHT = 76;
+      var LEGEND_HEIGHT = 215;
       var LEGEND_WIDTH = 102;
       var queryProps = sszvis.responsiveProps()
         .prop('layout', {

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

@@ -261,12 +261,15 @@
 .stzh-checkbox--is-disabled .stzh-checkbox__field-wrapper {
   cursor: not-allowed;
 }
-.stzh-checkbox--is-disabled .stzh-checkbox__input ~ .stzh-checkbox__label, .stzh-checkbox--is-disabled .stzh-checkbox__input ~ .stzh-checkbox__mark .stzh-checkbox__check {
+.stzh-checkbox--is-disabled .stzh-checkbox__input ~ .stzh-checkbox__label {
   color: var(--stzh-color-grey61);
 }
+.stzh-checkbox--is-disabled .stzh-checkbox__input ~ .stzh-checkbox__mark .stzh-checkbox__check {
+  color: var(--stzh-color-grey70);
+}
 .stzh-checkbox--is-disabled .stzh-checkbox__input ~ .stzh-checkbox__mark {
-  border-color: var(--stzh-color-grey5);
+  border-color: transparent;
 }
 .stzh-checkbox--is-disabled .stzh-checkbox__mark {
-  background-color: var(--stzh-color-grey5);
+  background-color: var(--stzh-color-black8);
 }

package/dist/collection/components/stzh-chip-select/stzh-chip-select.js

@@ -146,7 +146,7 @@ export class StzhChipSelect {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Data"
+          "text": "The list of chips"
         },
         "attribute": "data",
         "reflect": false,
@@ -304,7 +304,7 @@ export class StzhChipSelect {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Whether the element is disabled or not"
+          "text": "Whether all chips are disabled or not"
         },
         "attribute": "disabled",
         "reflect": true,

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

@@ -101,6 +101,11 @@
   --lines: 1;
   width: 100%;
   color: inherit;
+  font-family: inherit;
+  font-weight: inherit;
+  font-style: inherit;
+  font-size: inherit;
+  line-height: inherit;
 }
 
 :host([lines="1"]) {

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

@@ -97,6 +97,39 @@
   box-sizing: border-box;
 }
 
+:host ::slotted([slot=image]) {
+  width: 5.5rem;
+  height: 5.5rem;
+  top: 0;
+  left: 0;
+  border-radius: 50%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  margin-bottom: var(--stzh-space-xlarge);
+}
+@media screen and (min-width: 800px) {
+  :host ::slotted([slot=image]) {
+    margin-right: var(--stzh-space-xlarge);
+    margin-bottom: 0;
+  }
+}
+@media screen and (min-width: 800px) and (min-width: 1024px) {
+  :host ::slotted([slot=image]) {
+    margin-right: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 800px) and (min-width: 1260px) {
+  :host ::slotted([slot=image]) {
+    margin-right: var(--stzh-space-xxxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host ::slotted([slot=image]) {
+    width: 12.25rem;
+    height: 12.25rem;
+  }
+}
+
 .stzh-contactaddress {
   font-size: var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));
   line-height: var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));
@@ -110,6 +143,24 @@
     letter-spacing: var(--stzh-font-curve-p1-medium-text-letter-spacing);
   }
 }
+.stzh-contactaddress, .stzh-contactaddress__inner-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+@media screen and (min-width: 800px) {
+  .stzh-contactaddress, .stzh-contactaddress__inner-wrapper {
+    flex-direction: row;
+  }
+}
+.stzh-contactaddress__wrapper {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+.stzh-contactaddress__image {
+  display: flex;
+  flex-shrink: 0;
+}
 .stzh-contactaddress__pobox {
   margin-top: var(--stzh-space-small);
 }
@@ -123,20 +174,17 @@
     margin-top: var(--stzh-space-large);
   }
 }
-.stzh-contactaddress__company, .stzh-contactaddress__heading {
-  font-family: var(--stzh-font-family-heavy);
-  font-weight: var(--stzh-font-weight-heavy);
-  font-style: normal;
-  font-size: var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));
-  line-height: var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));
-  letter-spacing: var(--stzh-font-curve-h4-default-heading-letter-spacing);
-  margin: 0;
+.stzh-contactaddress__main-heading {
+  margin-bottom: var(--stzh-space-small);
 }
 @media screen and (min-width: 1024px) {
-  .stzh-contactaddress__company, .stzh-contactaddress__heading {
-    font-size: var(--stzh-font-curve-h4-medium-font-size, var(--stzh-font-centi-font-size));
-    line-height: var(--stzh-font-curve-h4-medium-heading-line-height, var(--stzh-font-centi-heading-line-height));
-    letter-spacing: var(--stzh-font-curve-h4-medium-heading-letter-spacing);
+  .stzh-contactaddress__main-heading {
+    margin-bottom: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-contactaddress__main-heading {
+    margin-bottom: var(--stzh-space-large);
   }
 }
 .stzh-contactaddress__number-link {
@@ -147,6 +195,37 @@
 .stzh-contactaddress__number-link:hover, .stzh-contactaddress__number-link:focus {
   color: var(--stzh-link-hover-color);
 }
+.stzh-contactaddress__info {
+  flex-grow: 1;
+}
+@media screen and (min-width: 800px) {
+  .stzh-contactaddress__info {
+    flex-basis: 45%;
+  }
+}
+.stzh-contactaddress__availability-title {
+  margin-bottom: var(--stzh-space-xsmall);
+}
+.stzh-contactaddress__availability {
+  margin-top: var(--stzh-space-xlarge);
+}
+@media screen and (min-width: 800px) {
+  .stzh-contactaddress__availability {
+    margin-left: var(--stzh-space-xlarge);
+    margin-top: 0;
+    flex-basis: 55%;
+  }
+}
+@media screen and (min-width: 800px) and (min-width: 1024px) {
+  .stzh-contactaddress__availability {
+    margin-left: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 800px) and (min-width: 1260px) {
+  .stzh-contactaddress__availability {
+    margin-left: var(--stzh-space-xxxlarge);
+  }
+}
 .stzh-contactaddress--has-border {
   padding-bottom: var(--stzh-space-xlarge);
   border-bottom: 0.0625rem solid var(--stzh-base-border-color);