@oiz/stzh-components 2.3.0-alpha → 2.3.0-alpha2

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

@@ -46,27 +46,39 @@ export const Default = Template.bind({});
 Default.args = {
   items: [
     {
+      "leadingIcon": "calendar",
       "label": "Label",
       "value": "Value 1",
-      "meta": "Metainfo",
-      "icon": "delete"
+      "icon": "delete",
+      "statusLabel": "Status",
+      "statusType": "error"
     },
     {
+      "leadingIcon": "calendar",
       "label": "Really Long Label",
       "value": "Value 2",
-      "meta": "Metainfo",
       "icon": "question-help",
-      "nonInteractive": true
+      "statusLabel": "Status",
+      "statusType": "success"
     },
     {
+      "leadingIcon": "calendar",
       "label": "Label",
-      "value": "Value 3",
-      "meta": "Metainfo"
+      "value": "Value 3 (Link)",
+      "meta": "Metainfo Long",
+      "href": "http://example.com",
     },
     {
+      "leadingIcon": "calendar",
       "label": "Label",
       "value": "Value 4",
       "meta": "Metainfo",
+    },
+    {
+      "leadingIcon": "calendar",
+      "label": "Label",
+      "value": "Value 5",
+      "meta": "Metainfo",
       "icon": "delete"
     }
   ]

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

@@ -101,17 +101,18 @@
   --font-family: var(--stzh-font-family-regular);
   --font-weight: var(--stzh-font-weight-regular);
   --color: inherit;
-  --action-display: block;
+  --action-display: flex;
   --label-min-width: var(--item-label-min-width, none);
+  --leading-icon-background-color: var(--stzh-color-grey5);
+  --leading-icon-color: var(--stzh-color-grey70);
+  --hover-leading-icon-background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+  --hover-leading-icon-color: var(--stzh-color-white);
   display: contents;
 }
 :host[href]:not([href=""]), :host[a11y-expanded], :host[a11y-controls] {
   --color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
   --hover-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
 }
-:host[direction=horizontal] {
-  --action-display: flex;
-}
 :host ::slotted(stzh-datalist) {
   margin-left: var(--stzh-space-large);
 }
@@ -127,10 +128,14 @@
 }
 .stzh-datalist-item__wrapper {
   flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
 }
-.stzh-datalist-item__value, .stzh-datalist-item__label, .stzh-datalist-item__meta, .stzh-datalist-item__action-list {
+.stzh-datalist-item__leading, .stzh-datalist-item__value, .stzh-datalist-item__label, .stzh-datalist-item__meta, .stzh-datalist-item__action-list {
   color: inherit;
-  display: block;
+  display: flex;
+  align-items: center;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -140,15 +145,34 @@
   padding: 0;
   text-decoration: none;
 }
-.stzh-datalist-item__value.is-button, .stzh-datalist-item__value.is-link, .stzh-datalist-item__label.is-button, .stzh-datalist-item__label.is-link, .stzh-datalist-item__meta.is-button, .stzh-datalist-item__meta.is-link, .stzh-datalist-item__action-list.is-button, .stzh-datalist-item__action-list.is-link {
+.stzh-datalist-item__leading.is-button, .stzh-datalist-item__leading.is-link, .stzh-datalist-item__value.is-button, .stzh-datalist-item__value.is-link, .stzh-datalist-item__label.is-button, .stzh-datalist-item__label.is-link, .stzh-datalist-item__meta.is-button, .stzh-datalist-item__meta.is-link, .stzh-datalist-item__action-list.is-button, .stzh-datalist-item__action-list.is-link {
   cursor: pointer;
 }
+.stzh-datalist-item__leading {
+  flex-shrink: 0;
+}
+.stzh-datalist-item__leading:not(:empty) {
+  padding-right: var(--stzh-space-xsmall);
+}
+.stzh-datalist-item__leading-icon-container {
+  color: var(--leading-icon-color);
+  background-color: var(--leading-icon-background-color);
+  width: 2.5rem;
+  height: 2.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  transition-property: color, background-color;
+  transition-duration: var(--stzh-base-transition-animation-speed);
+}
 .stzh-datalist-item__value {
   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));
   letter-spacing: var(--stzh-font-curve-p1-default-text-letter-spacing);
   font-family: var(--font-family);
   font-weight: var(--font-weight);
+  flex-grow: 1;
 }
 @media screen and (min-width: 1024px) {
   .stzh-datalist-item__value {
@@ -170,17 +194,18 @@
     line-height: var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height));
   }
 }
+.stzh-datalist-item__meta {
+  justify-content: flex-end;
+}
 .stzh-datalist-item__label {
   font-family: var(--stzh-font-family-medium);
   font-weight: var(--stzh-font-weight-medium);
   font-style: normal;
   color: var(--stzh-base-lead-color);
 }
-.stzh-datalist-item__label:not(:empty) {
-  min-width: var(--label-min-width);
-}
 .stzh-datalist-item__action-list {
   display: var(--action-display);
+  justify-content: center;
   text-align: center;
 }
 .stzh-datalist-item__action-list:not(:empty) {
@@ -228,9 +253,12 @@
 .stzh-datalist-item--is-interactive:hover .stzh-datalist-item__value {
   text-decoration: underline;
 }
+.stzh-datalist-item--is-interactive:hover .stzh-datalist-item__leading-icon-container, .stzh-datalist-item--is-interactive:focus-within .stzh-datalist-item__leading-icon-container {
+  color: var(--hover-leading-icon-color);
+  background-color: var(--hover-leading-icon-background-color);
+}
 .stzh-datalist-item--direction-vertical {
   display: flex;
-  align-items: center;
   padding-top: var(--stzh-space-xsmall);
   padding-bottom: var(--stzh-space-xsmall);
 }
@@ -241,6 +269,16 @@
 .stzh-datalist-item--direction-vertical:not(.stzh-datalist-item--has-hidden-border) {
   border-bottom: 0.0625rem solid var(--stzh-base-border-color);
 }
+.stzh-datalist-item--direction-vertical .stzh-datalist-item__leading-icon-container {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.stzh-datalist-item--direction-vertical .stzh-datalist-item__leading-icon {
+  --size: var(--stzh-icon-size-medium);
+}
+.stzh-datalist-item--direction-vertical .stzh-datalist-item__meta {
+  flex-direction: column;
+}
 .stzh-datalist-item--direction-horizontal {
   display: contents;
 }
@@ -248,16 +286,12 @@
   display: contents;
 }
 .stzh-datalist-item--direction-horizontal + .stzh-datalist-item__nested .stzh-datalist-item__nested-inner {
-  grid-column: 1/5;
+  grid-column: 1/6;
 }
 .stzh-datalist-item--direction-horizontal .stzh-datalist-item__label, .stzh-datalist-item--direction-horizontal .stzh-datalist-item__value, .stzh-datalist-item--direction-horizontal .stzh-datalist-item__meta {
-  display: flex;
   padding-top: var(--stzh-space-xsmall);
   padding-bottom: var(--stzh-space-xsmall);
 }
-.stzh-datalist-item--direction-horizontal .stzh-datalist-item__label, .stzh-datalist-item--direction-horizontal .stzh-datalist-item__value, .stzh-datalist-item--direction-horizontal .stzh-datalist-item__meta, .stzh-datalist-item--direction-horizontal .stzh-datalist-item__action-list {
-  align-items: center;
-}
 .stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border .stzh-datalist-item__label, .stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border .stzh-datalist-item__value, .stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border .stzh-datalist-item__meta {
   padding-top: calc(var(--stzh-space-xsmall) / 2);
   padding-bottom: calc(var(--stzh-space-xsmall) / 2);
@@ -266,11 +300,16 @@
   border-bottom: 0.0625rem solid var(--stzh-base-border-color);
 }
 .stzh-datalist-item--direction-horizontal .stzh-datalist-item__label:not(:empty) {
+  min-width: var(--label-min-width);
   padding-right: var(--stzh-space-xsmall);
 }
 .stzh-datalist-item--direction-horizontal .stzh-datalist-item__meta:not(:empty) {
   padding-left: var(--stzh-space-xsmall);
 }
-.stzh-datalist-item--direction-horizontal .stzh-datalist-item__action-list {
-  justify-content: center;
+.stzh-datalist-item--direction-horizontal .stzh-datalist-item__leading-icon-container {
+  width: 2rem;
+  height: 2rem;
+}
+.stzh-datalist-item--direction-horizontal .stzh-datalist-item__meta-status + .stzh-datalist-item__meta-text {
+  margin-left: var(--stzh-space-xsmall);
 }

package/dist/collection/components/stzh-datalist-item/stzh-datalist-item.js

@@ -21,10 +21,13 @@ export class StzhDatalistItem {
     this.rel = undefined;
     this.target = undefined;
     this.download = undefined;
+    this.leadingIcon = undefined;
     this.icon = undefined;
     this.label = "";
     this.value = "";
     this.meta = "";
+    this.statusLabel = "";
+    this.statusType = "default";
     this.hideBorder = false;
     this.a11yExpanded = undefined;
     this.a11yControls = undefined;
@@ -44,7 +47,17 @@ export class StzhDatalistItem {
         "stzh-datalist-item__meta": true,
         "is-button": isButton,
         "is-link": !!this.href
-      }, href: this.href, rel: this.rel, target: this.target, download: this.download }, this.meta)));
+      }, href: this.href, rel: this.rel, target: this.target, download: this.download }, this.statusLabel &&
+      h("stzh-status", { class: "stzh-datalist-item__meta-status", label: this.statusLabel, type: this.statusType }), this.meta && h("span", { class: "stzh-datalist-item__meta-text" }, this.meta))));
+  }
+  renderLeadingIcon(isButton) {
+    const Item = isButton ? "button" : (this.href ? "a" : "div");
+    return (h(Item, { "aria-hidden": "true", tabindex: "-1", class: {
+        "stzh-datalist-item__leading": true,
+        "is-button": isButton,
+        "is-link": !!this.href
+      }, href: this.href, rel: this.rel, target: this.target, download: this.download }, this.leadingIcon &&
+      h("div", { class: "stzh-datalist-item__leading-icon-container" }, h("stzh-icon", { class: "stzh-datalist-item__leading-icon", name: this.leadingIcon }))));
   }
   async connectedCallback() {
     this.datalist = this.element.closest("stzh-datalist");
@@ -74,11 +87,11 @@ export class StzhDatalistItem {
       "stzh-datalist-item--has-hidden-border": this.hideBorder,
       [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction
     };
-    const Action = isButton ? "button" : (!this.href && this.icon ? "div" : "a");
+    const Item = isButton ? "button" : (this.href ? "a" : "div");
     return (h(Host, { role: "listitem" }, h("div", { class: classes }, this.direction === "horizontal" ?
-      this.renderInner(isButton)
+      h(Fragment, null, this.renderLeadingIcon(isButton), this.renderInner(isButton))
       :
-        h("div", { class: "stzh-datalist-item__wrapper" }, this.renderInner(isButton)), h(Action, { "aria-hidden": "true", tabindex: "-1", class: {
+        h(Fragment, null, this.renderLeadingIcon(isButton), h("div", { class: "stzh-datalist-item__wrapper" }, this.renderInner(isButton))), h(Item, { "aria-hidden": "true", tabindex: "-1", class: {
         "stzh-datalist-item__action-list": true,
         "is-button": isButton,
         "is-link": !!this.href
@@ -193,6 +206,23 @@ export class StzhDatalistItem {
         "attribute": "download",
         "reflect": false
       },
+      "leadingIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Leading icon"
+        },
+        "attribute": "leading-icon",
+        "reflect": false
+      },
       "icon": {
         "type": "string",
         "mutable": false,
@@ -264,6 +294,42 @@ export class StzhDatalistItem {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "statusLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Status Label"
+        },
+        "attribute": "status-label",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "statusType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"success\" | \"warning\" | \"error\" | \"info\"",
+          "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Status Type"
+        },
+        "attribute": "status-type",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
       "hideBorder": {
         "type": "boolean",
         "mutable": false,

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

@@ -327,7 +327,7 @@ export class StzhDatatable {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Whether to disable min-width of table"
+          "text": "Whether to disable min-width of the table.\n\nIf `false`, the default `min-width` is `700px`\nIf `true`, the `min-width` is `none`, so the table will try to squeeze down content as much as possible.\n\nYou can also overwrite the min-width via CSS with the custom property `--min-width`."
         },
         "attribute": "disable-min-width",
         "reflect": true,

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

@@ -148,7 +148,11 @@ export class StzhDropdown {
   async getLoadedSearches() {
     return this.tomSelect.loadedSearches;
   }
-  /** Load items by calling load property/function  */
+  /** Return current selected items */
+  async getItems() {
+    return this.tomSelect.items;
+  }
+  /** Load items by calling load property/function */
   async loadItems(query) {
     return this.tomSelect.load(query);
   }
@@ -505,7 +509,7 @@ export class StzhDropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Selected values"
+          "text": "Set selected options. Can be array set with JS or as JSON string.\nTo get the current (user) selected options, use `getItems` method."
         },
         "attribute": "items",
         "reflect": false
@@ -1433,6 +1437,22 @@ export class StzhDropdown {
           "tags": []
         }
       },
+      "getItems": {
+        "complexType": {
+          "signature": "() => Promise<any>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<any>"
+        },
+        "docs": {
+          "text": "Return current selected items",
+          "tags": []
+        }
+      },
       "loadItems": {
         "complexType": {
           "signature": "(query: string) => Promise<any>",

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

@@ -100,6 +100,12 @@
 :host {
   --h-space: var(--stzh-space-default);
   --h-around: 0;
+  clear: both;
+}
+:host::after {
+  content: "";
+  display: table;
+  clear: both;
 }
 :host ::slotted(*) {
   max-width: 100%;
@@ -111,7 +117,7 @@
   margin-right: calc(var(--h-space) * (1 - var(--h-around)));
 }
 :host ::slotted(stzh-vspace),
-:host ::slotted(stzh-h-space),
+:host ::slotted(stzh-hspace),
 :host ::slotted(stzh-row),
 :host ::slotted(stzh-container),
 :host ::slotted(stzh-section) {
@@ -792,7 +798,7 @@
   }
 }
 
-.stzh-h-space {
+.stzh-hspace {
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
@@ -801,36 +807,36 @@
   /* Justify content variants */
   /* Align items variants */
 }
-.stzh-h-space--border-left {
+.stzh-hspace--border-left {
   border-left: 0.0625rem solid var(--stzh-base-border-color);
 }
-.stzh-h-space--border-right {
+.stzh-hspace--border-right {
   border-right: 0.0625rem solid var(--stzh-base-border-color);
 }
-.stzh-h-space--justify-center {
+.stzh-hspace--justify-center {
   justify-content: center;
 }
-.stzh-h-space--justify-end {
+.stzh-hspace--justify-end {
   justify-content: flex-end;
 }
-.stzh-h-space--justify-between {
+.stzh-hspace--justify-between {
   justify-content: space-between;
 }
-.stzh-h-space--justify-around {
+.stzh-hspace--justify-around {
   justify-content: space-around;
 }
-.stzh-h-space--justify-evenly {
+.stzh-hspace--justify-evenly {
   justify-content: space-evenly;
 }
-.stzh-h-space--items-end {
+.stzh-hspace--items-end {
   align-items: flex-end;
 }
-.stzh-h-space--items-center {
+.stzh-hspace--items-center {
   align-items: center;
 }
-.stzh-h-space--items-baseline {
+.stzh-hspace--items-baseline {
   align-items: baseline;
 }
-.stzh-h-space--items-stretch {
+.stzh-hspace--items-stretch {
   align-items: stretch;
 }