@statistikzh/leu 0.11.1 → 0.12.1

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@statistikzh/leu",
-  "version": "0.11.1",
+  "version": "0.12.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -66,91 +66,44 @@
           }
         },
         {
-          "name": "leu-checkbox",
-          "description": "\n---\n",
+          "name": "leu-breadcrumb",
+          "description": "A Breadcrumb Navigation.\n\nThe breadcrumbs can be displayed in two different layouts.\nOnly the back link (the last item / parent of the current page)\nis displayed when…\n-  … the width of the container is smaller\n     than the BACK_ONLY_BREAKPOINT.\n-  … less then two breadcrumb items could be displayed\n     without overflowing the container.\n\nOtherwise as many items as possible are displayed in an inline list\nwithout overflowing the container. The remaining items are displayed\nin a dropdown menu.\n\nIn order to determine the exact numbers of items that have to be\nhidden inside the dropdown, all of them have to be rendered first.\n1. Render all items\n2. Calculate (measure) the number of items that can be displayed\n   without overflowing the container.\n3. Updating the state (_hiddeItems) which will trigger a rerender\n4. Render the items again with the new state.\n\nThis results in multiple updates scheduled one after another. Lit\nwill also print a waring in the console beacause of that.\nIt's no a nice behaviour but the only one that works without\nhaving duplicate and hidden markup to derive the sizes from that.\n---\n\n\n### **Methods:**\n - **renderDropdown(): __** - Render the dropdown menu",
           "doc-url": "",
           "attributes": [
             {
-              "name": "checked",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "items",
+              "description": "Object array with { label, href }",
+              "value": { "type": "Array", "default": "[]" }
             },
             {
-              "name": "disabled",
+              "name": "inverted",
+              "description": "invert color on dark background",
               "value": { "type": "boolean", "default": "false" }
             },
-            {
-              "name": "value",
-              "value": { "type": "string", "default": "\"\"" }
-            },
-            { "name": "name", "value": { "type": "string", "default": "\"\"" } }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "checked", "value": { "type": "boolean" } },
-              { "name": "disabled", "value": { "type": "boolean" } },
-              { "name": "value", "value": { "type": "string" } },
-              { "name": "name", "value": { "type": "string" } }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "leu-checkbox-group",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "orientation",
-              "value": {
-                "type": "\"horizontal\" | \"vertical\"",
-                "default": "\"horizontal\""
-              }
-            },
-            { "name": "label", "value": { "type": "string" } }
+            { "name": "_hiddenItems", "value": { "type": "string" } },
+            { "name": "_showBackOnly", "value": { "type": "string" } },
+            { "name": "_isRecalculating", "value": { "type": "string" } },
+            { "name": "_isDropdownOpen", "value": { "type": "string" } }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "orientation",
-                "value": { "type": "\"horizontal\" | \"vertical\"" }
+                "name": "items",
+                "description": "Object array with { label, href }",
+                "value": { "type": "Array" }
               },
-              { "name": "label", "value": { "type": "string" } }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "leu-button-group",
-          "description": "\n---\n\n\n### **Events:**\n - **input** - When the value of the group changes by clicking a button\n\n### **Slots:**\n - _default_ - Slot for the buttons",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [{ "name": "", "description": "Slot for the buttons" }],
-          "events": [
-            {
-              "name": "input",
-              "description": "When the value of the group changes by clicking a button"
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "getButtonValue", "value": {} },
               {
-                "name": "value",
-                "description": "The value of the currenty selected (active) button",
-                "value": { "type": "string" }
+                "name": "inverted",
+                "description": "invert color on dark background",
+                "value": { "type": "boolean" }
               },
-              { "name": "_handleSlotChange", "value": {} },
-              { "name": "_handleButtonClick", "value": {} },
-              { "name": "_items", "value": { "type": "array" } }
+              { "name": "_hiddenItems", "value": {} },
+              { "name": "_showBackOnly", "value": {} },
+              { "name": "_isRecalculating", "value": {} },
+              { "name": "_isDropdownOpen", "value": {} }
             ],
-            "events": [
-              {
-                "name": "input",
-                "description": "When the value of the group changes by clicking a button"
-              }
-            ]
+            "events": []
           }
         },
         {
@@ -265,116 +218,89 @@
           }
         },
         {
-          "name": "leu-dialog",
-          "description": "\n---\n",
+          "name": "leu-button-group",
+          "description": "\n---\n\n\n### **Events:**\n - **input** - When the value of the group changes by clicking a button\n\n### **Slots:**\n - _default_ - Slot for the buttons",
           "doc-url": "",
-          "attributes": [
-            {
-              "name": "label",
-              "value": { "type": "string", "default": "\"\"" }
-            },
-            {
-              "name": "sublabel",
-              "value": { "type": "string", "default": "\"\"" }
-            },
+          "attributes": [],
+          "slots": [{ "name": "", "description": "Slot for the buttons" }],
+          "events": [
             {
-              "name": "open",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "input",
+              "description": "When the value of the group changes by clicking a button"
             }
           ],
-          "events": [],
           "js": {
             "properties": [
-              { "name": "label", "value": { "type": "string" } },
-              { "name": "sublabel", "value": { "type": "string" } },
-              { "name": "open", "value": { "type": "boolean" } }
+              { "name": "getButtonValue", "value": {} },
+              {
+                "name": "value",
+                "description": "The value of the currenty selected (active) button",
+                "value": { "type": "string" }
+              },
+              { "name": "_handleSlotChange", "value": {} },
+              { "name": "_handleButtonClick", "value": {} },
+              { "name": "_items", "value": { "type": "array" } }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "input",
+                "description": "When the value of the group changes by clicking a button"
+              }
+            ]
           }
         },
         {
-          "name": "leu-breadcrumb",
-          "description": "A Breadcrumb Navigation.\n\nThe breadcrumbs can be displayed in two different layouts.\nOnly the back link (the last item / parent of the current page)\nis displayed when…\n-  … the width of the container is smaller\n     than the BACK_ONLY_BREAKPOINT.\n-  … less then two breadcrumb items could be displayed\n     without overflowing the container.\n\nOtherwise as many items as possible are displayed in an inline list\nwithout overflowing the container. The remaining items are displayed\nin a dropdown menu.\n\nIn order to determine the exact numbers of items that have to be\nhidden inside the dropdown, all of them have to be rendered first.\n1. Render all items\n2. Calculate (measure) the number of items that can be displayed\n   without overflowing the container.\n3. Updating the state (_hiddeItems) which will trigger a rerender\n4. Render the items again with the new state.\n\nThis results in multiple updates scheduled one after another. Lit\nwill also print a waring in the console beacause of that.\nIt's no a nice behaviour but the only one that works without\nhaving duplicate and hidden markup to derive the sizes from that.\n---\n\n\n### **Methods:**\n - **renderDropdown(): __** - Render the dropdown menu",
+          "name": "leu-checkbox",
+          "description": "\n---\n",
           "doc-url": "",
           "attributes": [
             {
-              "name": "items",
-              "description": "Object array with { label, href }",
-              "value": { "type": "Array", "default": "[]" }
+              "name": "checked",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "inverted",
-              "description": "invert color on dark background",
+              "name": "disabled",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "_hiddenItems", "value": { "type": "string" } },
-            { "name": "_showBackOnly", "value": { "type": "string" } },
-            { "name": "_isRecalculating", "value": { "type": "string" } },
-            { "name": "_isDropdownOpen", "value": { "type": "string" } }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "items",
-                "description": "Object array with { label, href }",
-                "value": { "type": "Array" }
-              },
-              {
-                "name": "inverted",
-                "description": "invert color on dark background",
-                "value": { "type": "boolean" }
-              },
-              { "name": "_hiddenItems", "value": {} },
-              { "name": "_showBackOnly", "value": {} },
-              { "name": "_isRecalculating", "value": {} },
-              { "name": "_isDropdownOpen", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "leu-dropdown",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [
             {
-              "name": "label",
+              "name": "value",
               "value": { "type": "string", "default": "\"\"" }
             },
-            {
-              "name": "expanded",
-              "value": { "type": "boolean", "default": "false" }
-            }
+            { "name": "name", "value": { "type": "string", "default": "\"\"" } }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "label", "value": { "type": "string" } },
-              { "name": "expanded", "value": { "type": "boolean" } }
+              { "name": "checked", "value": { "type": "boolean" } },
+              { "name": "disabled", "value": { "type": "boolean" } },
+              { "name": "value", "value": { "type": "string" } },
+              { "name": "name", "value": { "type": "string" } }
             ],
             "events": []
           }
         },
         {
-          "name": "leu-icon",
-          "description": "A component to render all defined zhWeb icons.\nThe `fill` of the icon is set to `currentColor` and\ncan be overriden by setting the css `color` property.\nIf the icon name is not found, a placeholder will be displayed.\n---\n\n\n### **CSS Properties:**\n - **--leu-icon-size** - The size of the icon. _(default: undefined)_",
+          "name": "leu-checkbox-group",
+          "description": "\n---\n",
           "doc-url": "",
           "attributes": [
             {
-              "name": "name",
-              "description": "The name of the icon to display.",
-              "value": { "type": "IconPathName", "default": "\"\"" }
-            }
+              "name": "orientation",
+              "value": {
+                "type": "\"horizontal\" | \"vertical\"",
+                "default": "\"horizontal\""
+              }
+            },
+            { "name": "label", "value": { "type": "string" } }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "name",
-                "description": "The name of the icon to display.",
-                "value": { "type": "IconPathName" }
-              }
+                "name": "orientation",
+                "value": { "type": "\"horizontal\" | \"vertical\"" }
+              },
+              { "name": "label", "value": { "type": "string" } }
             ],
             "events": []
           }
@@ -562,6 +488,80 @@
             "events": [{ "name": "input" }]
           }
         },
+        {
+          "name": "leu-dialog",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "sublabel",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "open",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "label", "value": { "type": "string" } },
+              { "name": "sublabel", "value": { "type": "string" } },
+              { "name": "open", "value": { "type": "boolean" } }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "leu-dropdown",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "expanded",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "label", "value": { "type": "string" } },
+              { "name": "expanded", "value": { "type": "boolean" } }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "leu-icon",
+          "description": "A component to render all defined zhWeb icons.\nThe `fill` of the icon is set to `currentColor` and\ncan be overriden by setting the css `color` property.\nIf the icon name is not found, a placeholder will be displayed.\n---\n\n\n### **CSS Properties:**\n - **--leu-icon-size** - The size of the icon. _(default: undefined)_",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "The name of the icon to display.",
+              "value": { "type": "IconPathName", "default": "\"\"" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "name",
+                "description": "The name of the icon to display.",
+                "value": { "type": "IconPathName" }
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "leu-input",
           "description": "A text input element.\n---\n\n\n### **Events:**\n - **input** - Dispatched when the value of the input element changes.\n- **change** - Dispatched when the value of the input element changes and the input element loses focus.\n\n### **Methods:**\n - **getValidationMessages(): _Object_** - Merge custom and default validation messages.\nA validation message can be a function or a string.\nIf it s a function, the function is called with the corresponding\nattribute value as argument.\ne.g.\n`tooLong(this.maxlength)`\nThis way the framework user can create reasonable validation messages\n- **renderErrorMessages(): _TemplateResult | nothing_** - Creates an error list with an item for the given validity state.",
@@ -934,6 +934,79 @@
             "events": [{ "name": "leu:pagechange" }]
           }
         },
+        {
+          "name": "leu-popup",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "anchor",
+              "value": {
+                "type": "string | HTMLElement",
+                "default": "undefined"
+              }
+            },
+            {
+              "name": "active",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "placement",
+              "value": { "type": "Placement", "default": "undefined" }
+            },
+            {
+              "name": "flip",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "shift",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "shiftPadding",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "matchSize",
+              "value": {
+                "type": "\"width\" | \"height\" | \"both\"",
+                "default": "undefined"
+              }
+            },
+            {
+              "name": "autoSize",
+              "value": {
+                "type": "\"width\" | \"height\" | \"both\"",
+                "default": "undefined"
+              }
+            },
+            {
+              "name": "autoSizePadding",
+              "value": { "type": "number", "default": "0" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "anchor", "value": { "type": "string | HTMLElement" } },
+              { "name": "active", "value": { "type": "boolean" } },
+              { "name": "placement", "value": { "type": "Placement" } },
+              { "name": "flip", "value": { "type": "boolean" } },
+              { "name": "shift", "value": { "type": "boolean" } },
+              { "name": "shiftPadding", "value": { "type": "number" } },
+              {
+                "name": "matchSize",
+                "value": { "type": "\"width\" | \"height\" | \"both\"" }
+              },
+              {
+                "name": "autoSize",
+                "value": { "type": "\"width\" | \"height\" | \"both\"" }
+              },
+              { "name": "autoSizePadding", "value": { "type": "number" } }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "leu-radio",
           "description": "\n---\n",
@@ -1034,79 +1107,6 @@
             "events": []
           }
         },
-        {
-          "name": "leu-popup",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "anchor",
-              "value": {
-                "type": "string | HTMLElement",
-                "default": "undefined"
-              }
-            },
-            {
-              "name": "active",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "placement",
-              "value": { "type": "Placement", "default": "undefined" }
-            },
-            {
-              "name": "flip",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "shift",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "shiftPadding",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "matchSize",
-              "value": {
-                "type": "\"width\" | \"height\" | \"both\"",
-                "default": "undefined"
-              }
-            },
-            {
-              "name": "autoSize",
-              "value": {
-                "type": "\"width\" | \"height\" | \"both\"",
-                "default": "undefined"
-              }
-            },
-            {
-              "name": "autoSizePadding",
-              "value": { "type": "number", "default": "0" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "anchor", "value": { "type": "string | HTMLElement" } },
-              { "name": "active", "value": { "type": "boolean" } },
-              { "name": "placement", "value": { "type": "Placement" } },
-              { "name": "flip", "value": { "type": "boolean" } },
-              { "name": "shift", "value": { "type": "boolean" } },
-              { "name": "shiftPadding", "value": { "type": "number" } },
-              {
-                "name": "matchSize",
-                "value": { "type": "\"width\" | \"height\" | \"both\"" }
-              },
-              {
-                "name": "autoSize",
-                "value": { "type": "\"width\" | \"height\" | \"both\"" }
-              },
-              { "name": "autoSizePadding", "value": { "type": "number" } }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "leu-scroll-top",
           "description": "\n---\n",

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.11.1",
+  "version": "0.12.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/components/input/input.css

@@ -78,6 +78,7 @@
   background: var(--leu-color-black-0);
 
   padding-block: 2rem 1rem;
+  height: calc(4.5rem - var(--input-border-width) * 2);
 }
 
 .input:focus-visible {

package/src/components/table/Table.js

@@ -183,7 +183,11 @@ export class LeuTable extends LeuElement {
             <tr>
               ${this._columns.map(
                 (col) =>
-                  html`<th>
+                  html`<th
+                    style=${col.headerStyle
+                      ? styleMap(col.headerStyle())
+                      : nothing}
+                  >
                     ${col.sort
                       ? html`<button @click=${(_) => this.sortClick(col)}>
                           <span>${col.name}</span>

package/src/components/table/stories/table.stories.js

@@ -26,6 +26,11 @@ function Template({ itemsPerPage }) {
           {
             name: "Name",
             value: (row) => row.name,
+            headerStyle: () => {
+              return {
+                color: "#0076bd",
+              }
+            },
             style: (row) => {
               return {
                 minWidth: "400px",
@@ -38,7 +43,7 @@ function Template({ itemsPerPage }) {
           },
           {
             name: "Menge",
-            value: (row) => row.menge,
+            value: (row) => row.menge + "%",
             style: (row) => {
               return {
                 color:

package/src/components/table/table.css

@@ -71,6 +71,7 @@ button {
   align-items: flex-center;
   font-size: inherit;
   font-family: inherit;
+  color: inherit;
 }
 
 thead leu-icon {

package/dist/LeuElement-e092765a.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LeuElement-e092765a.d.ts","sourceRoot":"","sources":["LeuElement-e092765a.js"],"names":[],"mappings":"AAsCA;IACE,8EAcC;CACF;AApDD,sEAaC;2BAf+B,KAAK"}