@oiz/stzh-components 1.5.0-alpha → 2.0.0-beta

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

@@ -0,0 +1,237 @@
+import { Host, h } from "@stencil/core";
+/**
+ */
+export class StzhDatalist {
+  constructor() {
+    /** Direction */
+    this.direction = "vertical";
+    /** Direction above small breakpoint */
+    this.directionSmall = "horizontal";
+    /** Direction above medium breakpoint  */
+    this.directionMedium = "inherit";
+    /** Direction above large breakpoint  */
+    this.directionLarge = "inherit";
+    /** Direction above ultra breakpoint  */
+    this.directionUltra = "inherit";
+    /** Hide border lines between items */
+    this.hideBorder = false;
+    /**
+     * Items in datalist
+     * Array of objects that must at least include `value` attribute.
+     * Can optionally contain `label`, `meta`, `icon`, `href` attribute:
+     * `[{"value":"Value 1", "label": "Label 1"}, {"value":"Value 2", "label": "Label 2"}]`
+     */
+    this.items = [];
+    this._items = [];
+    this.actionClick = (originalEvent, item) => {
+      this.stzhItemActionClick.emit({
+        component: "stzh-datalist",
+        originalEvent,
+        item
+      });
+    };
+  }
+  itemsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._items = JSON.parse(newValue);
+    }
+    else {
+      this._items = newValue;
+    }
+  }
+  async componentWillLoad() {
+    this.itemsWatcher(this.items);
+  }
+  render() {
+    const classes = {
+      "stzh-datalist": true,
+      "stzh-datalist--hide-border": this.hideBorder,
+      [`stzh-datalist--direction-${this.direction}`]: !!this.direction,
+      [`stzh-datalist--direction-small-${this.directionSmall}`]: !!this.directionSmall,
+      [`stzh-datalist--direction-medium-${this.directionMedium}`]: !!this.directionMedium,
+      [`stzh-datalist--direction-large-${this.directionLarge}`]: !!this.directionLarge,
+      [`stzh-datalist--direction-ultra-${this.directionUltra}`]: !!this.directionUltra
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-datalist__list", role: "list" }, this._items.map((item) => h("div", { role: "listitem", class: {
+        "stzh-datalist__list-item": true,
+        "stzh-datalist__list-item--has-icon": !!item.icon,
+      } }, h("div", { class: "stzh-datalist__label" }, item.label), h("div", { class: "stzh-datalist__value" }, item.href ? h("stzh-link", { href: item.href, label: item.value, size: "inherit" }) : item.value), h("div", { class: "stzh-datalist__meta" }, item.meta), h("div", { class: "stzh-datalist__action-list" }, h("button", { class: "stzh-datalist__action", onClick: (event) => this.actionClick(event, item) }, h("stzh-icon", { name: item.icon })))))))));
+  }
+  static get is() { return "stzh-datalist"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-datalist.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-datalist.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "direction": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"vertical\" | \"horizontal\"",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Direction"
+        },
+        "attribute": "direction",
+        "reflect": true,
+        "defaultValue": "\"vertical\""
+      },
+      "directionSmall": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"vertical\" | \"horizontal\" | \"inherit\"",
+          "resolved": "\"horizontal\" | \"inherit\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Direction above small breakpoint"
+        },
+        "attribute": "direction-small",
+        "reflect": true,
+        "defaultValue": "\"horizontal\""
+      },
+      "directionMedium": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"vertical\" | \"horizontal\" | \"inherit\"",
+          "resolved": "\"horizontal\" | \"inherit\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Direction above medium breakpoint"
+        },
+        "attribute": "direction-medium",
+        "reflect": true,
+        "defaultValue": "\"inherit\""
+      },
+      "directionLarge": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"vertical\" | \"horizontal\" | \"inherit\"",
+          "resolved": "\"horizontal\" | \"inherit\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Direction above large breakpoint"
+        },
+        "attribute": "direction-large",
+        "reflect": true,
+        "defaultValue": "\"inherit\""
+      },
+      "directionUltra": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"vertical\" | \"horizontal\" | \"inherit\"",
+          "resolved": "\"horizontal\" | \"inherit\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Direction above ultra breakpoint"
+        },
+        "attribute": "direction-ultra",
+        "reflect": true,
+        "defaultValue": "\"inherit\""
+      },
+      "hideBorder": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hide border lines between items"
+        },
+        "attribute": "hide-border",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "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 datalist\nArray of objects that must at least include `value` attribute.\nCan optionally contain `label`, `meta`, `icon`, `href` attribute:\n`[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\"}]`"
+        },
+        "attribute": "items",
+        "reflect": false,
+        "defaultValue": "[]"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhItemActionClick",
+        "name": "stzhItemActionClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Item action click event"
+        },
+        "complexType": {
+          "original": "StzhDatalistItemActionClickEvent",
+          "resolved": "{ component: \"stzh-datalist\"; originalEvent: MouseEvent; item: StzhDatalistItemEntry; }",
+          "references": {
+            "StzhDatalistItemActionClickEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "items",
+        "methodName": "itemsWatcher"
+      }];
+  }
+}

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

@@ -0,0 +1,66 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Datalist',
+  component: 'stzh-datalist',
+  parameters: {
+    actions: {
+      handles: ['stzhItemActionClick']
+    },
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('datalist'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-datalist {...args}></stzh-datalist>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  items: [
+    {
+      "label": "Label",
+      "value": "Value 1",
+      "meta": "Metainfo",
+      "icon": "delete"
+    },
+    {
+      "label": "Really Long Label",
+      "value": "Value 2",
+      "meta": "Metainfo",
+      "icon": "delete"
+    },
+    {
+      "label": "Label",
+      "value": "Value 3",
+      "meta": "Metainfo"
+    },
+    {
+      "label": "Label",
+      "value": "Value 4",
+      "meta": "Metainfo",
+      "icon": "delete"
+    },
+    {
+      "label": "Label",
+      "value": "Value 5",
+      "icon": "delete",
+      "href": "http://example.com"
+    }
+  ]
+};

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

@@ -134,7 +134,7 @@ export class StzhDatepicker {
     };
     return (h(Host, null, h("div", { class: classes }, h("input", { type: "hidden", name: this.name, value: this.value }), this.inline &&
       h(Fragment, null, h("stzh-calendar", { ref: (el) => (this.calendar = el), isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), h("div", { class: "stzh-datepicker__actions" }, h("slot", { name: "action" }))), !this.inline &&
-      h("stzh-input", { label: this.label, ref: (el) => (this.input = el), noAutocomplete: true, onStzhChange: this.onInputChange, readonly: this.readonly, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, invalid: this.invalid, required: this.required, showMarker: this.showMarker, placeholder: this.placeholder, size: this.size }, h("stzh-popover", { ref: (el) => (this.popover = el), class: "stzh-datepicker__popover", slot: "button-right", placement: "bottom-end", label: this.label }, h("stzh-button", { variant: "input", "icon-only": true, icon: "calendar", disabled: this.disabled, a11yLabel: this.buttonLabel }), h("div", { slot: "content" }, h("stzh-calendar", { ref: (el) => (this.calendar = el), isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), h("div", { class: "stzh-datepicker__actions" }, h("slot", { name: "action" }))))))));
+      h("stzh-input", { label: this.label, ref: (el) => (this.input = el), noAutocomplete: true, onStzhChange: this.onInputChange, readonly: this.readonly, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, invalid: this.invalid, required: this.required, showMarker: this.showMarker, size: this.size }, h("stzh-popover", { ref: (el) => (this.popover = el), class: "stzh-datepicker__popover", slot: "button-right", placement: "bottom-end", label: this.label }, h("stzh-button", { variant: "input", "icon-only": true, icon: "calendar", disabled: this.disabled, a11yLabel: this.buttonLabel }), h("div", { slot: "content" }, h("stzh-calendar", { ref: (el) => (this.calendar = el), isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), h("div", { class: "stzh-datepicker__actions" }, h("slot", { name: "action" }))))))));
   }
   static get is() { return "stzh-datepicker"; }
   static get encapsulation() { return "scoped"; }
@@ -402,26 +402,6 @@ export class StzhDatepicker {
         "reflect": true,
         "defaultValue": "false"
       },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": undefined
-            }],
-          "text": "Placeholder text"
-        },
-        "attribute": "placeholder",
-        "reflect": false
-      },
       "size": {
         "type": "string",
         "mutable": false,

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

@@ -98,6 +98,7 @@
   --width: 100%;
   --padding: var(--stzh-space-large);
   --close-color: var(--stzh-base-lead-color);
+  --backdrop-opacity: 0.8;
 }
 @media screen and (min-width: 600px) {
   :host {
@@ -185,7 +186,7 @@
   overflow-y: auto;
   text-align: center;
   background-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
-  opacity: 0.8;
+  opacity: var(--backdrop-opacity);
 }
 .stzh-dialog__heading {
   padding: var(--padding);

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

@@ -697,7 +697,7 @@ stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
 .stzh-dropdown--plain.stzh-dropdown--has-icon .stzh-dropdown__label {
   left: calc(var(--icon-size) + var(--stzh-space-xsmall) + 0.0625rem);
 }
-.stzh-dropdown--has-fixed-label .stzh-dropdown__label, .stzh-dropdown--is-filled .stzh-dropdown__label, .stzh-dropdown--is-disabled .stzh-dropdown__label, .stzh-dropdown--is-invalid .stzh-dropdown__label, .stzh-dropdown--has-focus .stzh-dropdown__label, .stzh-dropdown--has-placeholder .stzh-dropdown__label {
+.stzh-dropdown--has-fixed-label .stzh-dropdown__label, .stzh-dropdown--is-filled .stzh-dropdown__label, .stzh-dropdown--is-disabled .stzh-dropdown__label, .stzh-dropdown--is-invalid .stzh-dropdown__label, .stzh-dropdown--has-focus .stzh-dropdown__label {
   top: 0;
   left: calc(var(--stzh-space-medium) - var(--stzh-space-xxsmall));
   height: 1.25rem;
@@ -706,10 +706,10 @@ stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
   max-width: calc(100% - (var(--stzh-space-medium) - var(--stzh-space-xxsmall)) * 2);
   pointer-events: all;
 }
-.stzh-dropdown--has-fixed-label .stzh-dropdown__label:not(:empty)::before, .stzh-dropdown--is-filled .stzh-dropdown__label:not(:empty)::before, .stzh-dropdown--is-disabled .stzh-dropdown__label:not(:empty)::before, .stzh-dropdown--is-invalid .stzh-dropdown__label:not(:empty)::before, .stzh-dropdown--has-focus .stzh-dropdown__label:not(:empty)::before, .stzh-dropdown--has-placeholder .stzh-dropdown__label:not(:empty)::before {
+.stzh-dropdown--has-fixed-label .stzh-dropdown__label:not(:empty)::before, .stzh-dropdown--is-filled .stzh-dropdown__label:not(:empty)::before, .stzh-dropdown--is-disabled .stzh-dropdown__label:not(:empty)::before, .stzh-dropdown--is-invalid .stzh-dropdown__label:not(:empty)::before, .stzh-dropdown--has-focus .stzh-dropdown__label:not(:empty)::before {
   display: block;
 }
-.stzh-dropdown--plain.stzh-dropdown--has-fixed-label .stzh-dropdown__label, .stzh-dropdown--plain.stzh-dropdown--is-filled .stzh-dropdown__label, .stzh-dropdown--plain.stzh-dropdown--is-disabled .stzh-dropdown__label, .stzh-dropdown--plain.stzh-dropdown--is-invalid .stzh-dropdown__label, .stzh-dropdown--plain.stzh-dropdown--has-focus .stzh-dropdown__label, .stzh-dropdown--plain.stzh-dropdown--has-placeholder .stzh-dropdown__label {
+.stzh-dropdown--plain.stzh-dropdown--has-fixed-label .stzh-dropdown__label, .stzh-dropdown--plain.stzh-dropdown--is-filled .stzh-dropdown__label, .stzh-dropdown--plain.stzh-dropdown--is-disabled .stzh-dropdown__label, .stzh-dropdown--plain.stzh-dropdown--is-invalid .stzh-dropdown__label, .stzh-dropdown--plain.stzh-dropdown--has-focus .stzh-dropdown__label {
   left: 0;
   padding: 0;
   max-width: 100%;

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

@@ -158,8 +158,8 @@ export class StzhDropdown {
     return this.tomSelect.getValue();
   }
   /** Set new value */
-  async setValue(newValue) {
-    this.tomSelect.setValue(newValue);
+  async setValue(newValue, silent = false) {
+    this.tomSelect.setValue(newValue, silent);
   }
   /** Focus select */
   async setFocus() {
@@ -253,7 +253,6 @@ export class StzhDropdown {
       duplicates: false,
       delimiter: ",",
       copyClassesToDropdown: false,
-      placeholder: this.placeholder,
       hidePlaceholder: null,
       // if you want the user to be able to add own items enable this option
       // (but checkbox_options plugin throws an error and would need a fix first)
@@ -451,13 +450,12 @@ export class StzhDropdown {
       "stzh-dropdown--has-description": descriptionUsed,
       "stzh-dropdown--has-description-long": descriptionLongUsed,
       "stzh-dropdown--has-error": errorUsed,
-      "stzh-dropdown--has-placeholder": !!this.placeholder,
       "stzh-dropdown--has-fixed-label": ((_a = window === null || window === void 0 ? void 0 : window.stzhComponents) === null || _a === void 0 ? void 0 : _a.labels) === "fixed",
       [`stzh-dropdown--popover-placement-${this.popoverPlacement}`]: !!this.popoverPlacement,
       [`stzh-dropdown--size-${this.size}`]: !!this.size,
       [`stzh-dropdown--${this.variant}`]: !!this.variant
     };
-    return (h(Host, null, h("div", { class: classes, ref: (el) => (this.rootElement = el) }, h("div", { class: "stzh-dropdown__field-wrapper" }, h("select", { id: this.dropdownId, class: "stzh-dropdown__select", ref: (el) => (this.select = el), multiple: this.multiple, name: this.name, disabled: this.disabled, "aria-invalid": this.invalid ? "true" : "false", "aria-describedby": `${this.dropdownId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false" }, h("slot", null)), h("div", { class: "stzh-dropdown__sizer" }, this.placeholder), h("stzh-icon", { name: "angle-down", class: "stzh-dropdown__angle-icon" }), h("div", { class: "stzh-dropdown__icon-wrapper" }, this.icon ?
+    return (h(Host, null, h("div", { class: classes, ref: (el) => (this.rootElement = el) }, h("div", { class: "stzh-dropdown__field-wrapper" }, h("select", { id: this.dropdownId, class: "stzh-dropdown__select", ref: (el) => (this.select = el), multiple: this.multiple, name: this.name, disabled: this.disabled, "aria-invalid": this.invalid ? "true" : "false", "aria-describedby": `${this.dropdownId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false" }, h("slot", null)), h("stzh-icon", { name: "angle-down", class: "stzh-dropdown__angle-icon" }), h("div", { class: "stzh-dropdown__icon-wrapper" }, this.icon ?
       h("stzh-icon", { class: "stzh-dropdown__icon", name: this.icon })
       :
         h("slot", { name: "icon" })), h("label", { class: "stzh-dropdown__label", htmlFor: this.dropdownId }, this.label ? this.label : h("slot", { name: "label" }), this.showMarker &&
@@ -1123,26 +1121,6 @@ export class StzhDropdown {
         "attribute": "error",
         "reflect": false
       },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": undefined
-            }],
-          "text": "Placeholder option"
-        },
-        "attribute": "placeholder",
-        "reflect": false
-      },
       "localization": {
         "type": "unknown",
         "mutable": false,
@@ -1406,10 +1384,13 @@ export class StzhDropdown {
       },
       "setValue": {
         "complexType": {
-          "signature": "(newValue: string | string[]) => Promise<void>",
+          "signature": "(newValue: string | string[], silent?: boolean) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
+            }, {
+              "tags": [],
+              "text": ""
             }],
           "references": {
             "Promise": {