@oiz/stzh-components 1.4.0-npmjstest → 2.0.0-beta

package/dist/vscode-data.json

@@ -89,6 +89,106 @@
         }
       ]
     },
+    {
+      "name": "stzh-actionset",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH actions component.\n\nAutomatically position given buttons inside a form, dialog or process. Sets `variant=\"secondary\"` to `stzh-button` elements placed in secondary slot by default if nothing else is set."
+      },
+      "attributes": [
+        {
+          "name": "actions",
+          "description": "Card header actions"
+        },
+        {
+          "name": "popover-button-size",
+          "description": "Popover button size",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "tiny"
+            }
+          ]
+        },
+        {
+          "name": "popover-button-variant",
+          "description": "Popover button variant",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "input"
+            },
+            {
+              "name": "secondary"
+            },
+            {
+              "name": "tertiary"
+            }
+          ]
+        },
+        {
+          "name": "popover-placement",
+          "description": "Popover placement",
+          "values": [
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "bottom-end"
+            },
+            {
+              "name": "bottom-start"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "left-end"
+            },
+            {
+              "name": "left-start"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "right-end"
+            },
+            {
+              "name": "right-start"
+            },
+            {
+              "name": "top"
+            },
+            {
+              "name": "top-end"
+            },
+            {
+              "name": "top-start"
+            }
+          ]
+        },
+        {
+          "name": "variant",
+          "description": "Variant determining what position the action buttons are",
+          "values": [
+            {
+              "name": "overflow"
+            },
+            {
+              "name": "stack"
+            }
+          ]
+        }
+      ]
+    },
     {
       "name": "stzh-appnav",
       "description": {
@@ -211,6 +311,10 @@
             }
           ]
         },
+        {
+          "name": "checked",
+          "description": "Checked status (if type is radio)"
+        },
         {
           "name": "disabled",
           "description": "Whether the button is disabled"
@@ -259,6 +363,10 @@
           "name": "label",
           "description": "Label"
         },
+        {
+          "name": "name",
+          "description": "The name of the input element (if type is radio)"
+        },
         {
           "name": "size",
           "description": "Size variant",
@@ -306,6 +414,9 @@
             {
               "name": "button"
             },
+            {
+              "name": "radio"
+            },
             {
               "name": "reset"
             },
@@ -314,6 +425,10 @@
             }
           ]
         },
+        {
+          "name": "value",
+          "description": "The value of the input element (if type is radio)"
+        },
         {
           "name": "variant",
           "description": "Variant style",
@@ -359,6 +474,120 @@
         }
       ]
     },
+    {
+      "name": "stzh-card",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH card component."
+      },
+      "attributes": [
+        {
+          "name": "checked",
+          "description": "Whether card is checked (if card is selectable)"
+        },
+        {
+          "name": "collapsed",
+          "description": "Whether card is collapsed or not"
+        },
+        {
+          "name": "collapsible",
+          "description": "Whether card is collapsible"
+        },
+        {
+          "name": "disabled",
+          "description": "Whether the element is disabled or not (if card is selectable)"
+        },
+        {
+          "name": "footer-actions",
+          "description": "Card footer actions"
+        },
+        {
+          "name": "header-actions",
+          "description": "Card header actions"
+        },
+        {
+          "name": "heading",
+          "description": "Heading"
+        },
+        {
+          "name": "hide-footer-border",
+          "description": "Whether to hide footer separation border"
+        },
+        {
+          "name": "hide-header-border",
+          "description": "Whether to hide header separation border"
+        },
+        {
+          "name": "hide-movement-actions",
+          "description": "Whether movement menu items should be shown"
+        },
+        {
+          "name": "name",
+          "description": "The name of the input element (if card is selectable)"
+        },
+        {
+          "name": "selectable",
+          "description": "Whether card is selectable"
+        },
+        {
+          "name": "sortable-disabled",
+          "description": "Whether sorting should be disabled"
+        },
+        {
+          "name": "starrable",
+          "description": "Whether card star is displayed"
+        },
+        {
+          "name": "starred",
+          "description": "Whether card was starred"
+        },
+        {
+          "name": "subtitle",
+          "description": "Subtitle"
+        },
+        {
+          "name": "subtitle-interactive",
+          "description": "Whether subtitle should be rendered as button and event `stzhSubtitleClick` executed on click"
+        },
+        {
+          "name": "type",
+          "description": "Type",
+          "values": [
+            {
+              "name": "alert"
+            },
+            {
+              "name": "default"
+            }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "The value of the input element (if card is selectable)"
+        }
+      ]
+    },
+    {
+      "name": "stzh-card-list",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH card list component."
+      },
+      "attributes": [
+        {
+          "name": "show-toggle-link",
+          "description": "Whether collapse/expand toggle link"
+        },
+        {
+          "name": "sortable-data-id-attribute",
+          "description": "HTML attribute that is used by the `toArray()` of sortable method"
+        },
+        {
+          "name": "sortable-disabled",
+          "description": "Whether sorting should be disabled"
+        }
+      ]
+    },
     {
       "name": "stzh-cell",
       "description": {
@@ -677,11 +906,100 @@
       },
       "attributes": []
     },
+    {
+      "name": "stzh-datalist",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH datalist component."
+      },
+      "attributes": [
+        {
+          "name": "direction",
+          "description": "Direction",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        },
+        {
+          "name": "direction-large",
+          "description": "Direction above large breakpoint",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        },
+        {
+          "name": "direction-medium",
+          "description": "Direction above medium breakpoint",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        },
+        {
+          "name": "direction-small",
+          "description": "Direction above small breakpoint",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        },
+        {
+          "name": "direction-ultra",
+          "description": "Direction above ultra breakpoint",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        },
+        {
+          "name": "hide-border",
+          "description": "Hide border lines between items"
+        },
+        {
+          "name": "items",
+          "description": "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\"}]`"
+        }
+      ]
+    },
     {
       "name": "stzh-datamessagelist",
       "description": {
         "kind": "markdown",
-        "value": "The STZH datemessagelist component."
+        "value": "The STZH datamessagelist component."
       },
       "attributes": []
     },
@@ -844,10 +1162,6 @@
           "name": "name",
           "description": "Name of the hidden date picker input."
         },
-        {
-          "name": "placeholder",
-          "description": "Placeholder text"
-        },
         {
           "name": "readonly",
           "description": "Whether the element is readonly or not"
@@ -1054,10 +1368,6 @@
           "name": "options",
           "description": "Available options"
         },
-        {
-          "name": "placeholder",
-          "description": "Placeholder option"
-        },
         {
           "name": "popover-placement",
           "description": "Popover placement",
@@ -1803,10 +2113,18 @@
           "name": "label",
           "description": "Label"
         },
+        {
+          "name": "max",
+          "description": "If input type is number, this will be the maximum step number"
+        },
         {
           "name": "maxlength",
           "description": "Maxlength of characters"
         },
+        {
+          "name": "min",
+          "description": "If input type is number, this will be the minimum step number"
+        },
         {
           "name": "minlength",
           "description": "Minimum of characters"
@@ -1823,10 +2141,6 @@
           "name": "no-autocomplete",
           "description": "Whether autocomplete should be turned off"
         },
-        {
-          "name": "placeholder",
-          "description": "Placeholder text"
-        },
         {
           "name": "readonly",
           "description": "Whether the element is readonly or not"
@@ -1843,6 +2157,10 @@
           "name": "show-marker",
           "description": "Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show noting"
         },
+        {
+          "name": "show-spin",
+          "description": "If input type is number and this property is true, this will show the spin buttons on hover/focus"
+        },
         {
           "name": "size",
           "description": "Size variant",
@@ -1855,6 +2173,10 @@
             }
           ]
         },
+        {
+          "name": "step",
+          "description": "If input type is number, this will be the step size"
+        },
         {
           "name": "type",
           "description": "If input field, this defines the type (if `search`, a search icon will be displayed)",
@@ -1862,6 +2184,9 @@
             {
               "name": "email"
             },
+            {
+              "name": "number"
+            },
             {
               "name": "password"
             },
@@ -1955,6 +2280,9 @@
             {
               "name": "default"
             },
+            {
+              "name": "inherit"
+            },
             {
               "name": "small"
             }
@@ -2277,6 +2605,18 @@
           "name": "skidding",
           "description": "Shifting of popover content"
         },
+        {
+          "name": "strategy",
+          "description": "Position strategy",
+          "values": [
+            {
+              "name": "absolute"
+            },
+            {
+              "name": "fixed"
+            }
+          ]
+        },
         {
           "name": "variant",
           "description": "Variant",
@@ -2689,124 +3029,6 @@
         }
       ]
     },
-    {
-      "name": "stzh-servicecard",
-      "description": {
-        "kind": "markdown",
-        "value": "The STZH servicecard component."
-      },
-      "attributes": [
-        {
-          "name": "actions",
-          "description": "Card actions"
-        },
-        {
-          "name": "collapsed",
-          "description": "Whether card is collapsed or not"
-        },
-        {
-          "name": "collapsible",
-          "description": "Whether card is collapsible"
-        },
-        {
-          "name": "heading",
-          "description": "Heading"
-        },
-        {
-          "name": "hide-movement-actions",
-          "description": "Whether movement menu items should be shown"
-        },
-        {
-          "name": "middle-variant",
-          "description": "Middle column position variant (positioning behaviour on tablet)",
-          "values": [
-            {
-              "name": "to-left"
-            },
-            {
-              "name": "to-right"
-            }
-          ]
-        },
-        {
-          "name": "middle-vertical-spacing",
-          "description": "Set middle column vertical spacing",
-          "values": [
-            {
-              "name": "default"
-            },
-            {
-              "name": "none"
-            }
-          ]
-        },
-        {
-          "name": "right-vertical-spacing",
-          "description": "Set right column vertical spacing",
-          "values": [
-            {
-              "name": "default"
-            },
-            {
-              "name": "none"
-            }
-          ]
-        },
-        {
-          "name": "sortable-disabled",
-          "description": "Whether sorting should be disabled"
-        },
-        {
-          "name": "starrable",
-          "description": "Whether card star is displayed"
-        },
-        {
-          "name": "starred",
-          "description": "Whether card was starred"
-        },
-        {
-          "name": "subtitle",
-          "description": "Subtitle"
-        },
-        {
-          "name": "subtitle-interactive",
-          "description": "Whether subtitle should be rendered as button and event `stzhSubtitleClick` executed on click"
-        },
-        {
-          "name": "type",
-          "description": "Type",
-          "values": [
-            {
-              "name": "alert"
-            },
-            {
-              "name": "default"
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "name": "stzh-servicecard-list",
-      "description": {
-        "kind": "markdown",
-        "value": "The STZH servicecard list component."
-      },
-      "attributes": [
-        {
-          "name": "show-toggle-link",
-          "description": "Whether collapse/expand toggle link"
-        },
-        {
-          "name": "sortable-data-id-attribute",
-          "description": "HTML attribute that is used by the `toArray()` of sortable method"
-        },
-        {
-          "name": "sortable-disabled",
-          "description": "Whether sorting should be disabled"
-        }
-      ]
-    },
     {
       "name": "stzh-skiplink",
       "description": {
@@ -3357,6 +3579,18 @@
           "name": "skidding",
           "description": "Shifting of tooltip content"
         },
+        {
+          "name": "strategy",
+          "description": "Position strategy",
+          "values": [
+            {
+              "name": "absolute"
+            },
+            {
+              "name": "fixed"
+            }
+          ]
+        },
         {
           "name": "trigger",
           "description": "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically."
@@ -3408,7 +3642,7 @@
         },
         {
           "name": "existing-files",
-          "description": ""
+          "description": "Initially pre existing files (e.g. already uploaded by the user).\nArray of objects that must at least include `name` and `size` attribute:\n`[{\"name\":\"file1.txt\", \"size\": 12345}, {\"name\":\"file2.txt\", \"size\": 12345}]`"
         },
         {
           "name": "filesize-base",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oiz/stzh-components",
-    "version": "1.4.0-npmjstest",
+    "version": "2.0.0-beta",
     "description": "STZH Web Components Library",
     "main": "dist/index.cjs.js",
     "module": "dist/index.js",

package/dist/cjs/stzh-servicecard-list.cjs.entry.js

@@ -1,56 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ac9bdc7f.js');
-const translationUtils = require('./translation-utils-73073e44.js');
-
-const stzhServicecardListCss = ".sc-stzh-servicecard-list-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-servicecard-list-h{display:none}.sc-stzh-servicecard-list-h *.sc-stzh-servicecard-list,.sc-stzh-servicecard-list-h *.sc-stzh-servicecard-list::before,.sc-stzh-servicecard-list-h *.sc-stzh-servicecard-list::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-servicecard-list-h .sc-stzh-servicecard-list-s>*:not(:last-child):not([slot]){margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.sc-stzh-servicecard-list-h .sc-stzh-servicecard-list-s>*:not(:last-child):not([slot]){margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.sc-stzh-servicecard-list-h .sc-stzh-servicecard-list-s>*:not(:last-child):not([slot]){margin-bottom:var(--stzh-space-xlarge)}}.sc-stzh-servicecard-list-h .sc-stzh-servicecard-list-s>[slot=description] stzh-icon{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.sc-stzh-servicecard-list-h .sc-stzh-servicecard-list-s>stzh-text[slot=description]{--color:inherit}.stzh-servicecard-list__header.sc-stzh-servicecard-list{margin-bottom:var(--stzh-space-medium);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}@media screen and (min-width: 1024px){.stzh-servicecard-list__header.sc-stzh-servicecard-list{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-servicecard-list__header.sc-stzh-servicecard-list{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 800px){.stzh-servicecard-list__header.sc-stzh-servicecard-list{-ms-flex-direction:row;flex-direction:row}}.stzh-servicecard-list__description.sc-stzh-servicecard-list{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);color:var(--stzh-base-lead-color)}@media screen and (min-width: 1024px){.stzh-servicecard-list__description.sc-stzh-servicecard-list{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-servicecard-list__description.sc-stzh-servicecard-list:not(:empty){margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 800px){.stzh-servicecard-list__description.sc-stzh-servicecard-list:not(:empty){margin-bottom:0}}.stzh-servicecard-list__switch.sc-stzh-servicecard-list{--color:var(--stzh-base-lead-color);-ms-flex-item-align:end;align-self:end}";
-
-const StzhServicecardList = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** Whether sorting should be disabled */
-    this.sortableDisabled = false;
-    /** Whether collapse/expand toggle link */
-    this.showToggleLink = false;
-    /** HTML attribute that is used by the `toArray()` of sortable method */
-    this.sortableDataIdAttribute = "data-id";
-    this.allCollapsed = false;
-    this.collapseClick = () => {
-      const cards = Array.from(this.element.querySelectorAll("stzh-servicecard"));
-      cards.forEach(card => {
-        if (card.collapsible) {
-          card.collapsed = !this.allCollapsed;
-        }
-      });
-      this.allCollapsed = !this.allCollapsed;
-    };
-    this.updateCollapsedState = () => {
-      const cards = Array.from(this.element.querySelectorAll("stzh-servicecard"));
-      this.allCollapsed = !cards.some(card => !card.collapsed);
-    };
-  }
-  collapseListener() {
-    this.updateCollapsedState();
-  }
-  async componentWillLoad() {
-    if (!this.localization) {
-      this.localization = await translationUtils.fetchTranslations(this.element, "servicecard-list");
-    }
-  }
-  componentDidLoad() {
-    this.updateCollapsedState();
-  }
-  render() {
-    const classes = {
-      "stzh-servicecard-list": true
-    };
-    return (index.h(index.Host, null, index.h("div", { class: classes }, index.h("div", { class: "stzh-servicecard-list__header" }, index.h("div", { class: "stzh-servicecard-list__description" }, index.h("slot", { name: "description" })), this.showToggleLink &&
-      index.h("stzh-link", { class: "stzh-servicecard-list__switch", icon: this.allCollapsed ? "list-expanded" : "list-shrinked", label: this.allCollapsed ? this.localization.expandAll : this.localization.collapseAll, onClick: this.collapseClick })), index.h("stzh-sortable", { disabled: this.sortableDisabled, dataIdAttribute: this.sortableDataIdAttribute }, index.h("div", { class: "stzh-servicecard-list__cards", role: "list" }, index.h("slot", null))))));
-  }
-  get element() { return index.getElement(this); }
-};
-StzhServicecardList.style = stzhServicecardListCss;
-
-exports.stzh_servicecard_list = StzhServicecardList;