@statistikzh/leu 0.25.0 → 0.27.0

package/dist/vscode.html-custom-data.json

@@ -100,6 +100,11 @@
           "name": "fluid",
           "description": "Alters the shape of the button to be full width of its parent container",
           "values": []
+        },
+        {
+          "name": "loading",
+          "description": "Replaces the content with a spinner",
+          "values": []
         }
       ],
       "references": [
@@ -303,7 +308,7 @@
     },
     {
       "name": "leu-file-input",
-      "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**",
+      "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**\n\n### **Methods:**\n ",
       "attributes": [
         { "name": "label", "values": [] },
         {
@@ -375,11 +380,6 @@
           "description": "Adds a button to clear the input element",
           "values": []
         },
-        {
-          "name": "value",
-          "description": "The value of the input element.",
-          "values": []
-        },
         {
           "name": "error",
           "description": "A custom error that is completely independent of the validity state. Useful for displaying server side errors.",
@@ -454,6 +454,11 @@
           "name": "novalidate",
           "description": "Disables the browser's validation.",
           "values": []
+        },
+        {
+          "name": "value",
+          "description": "The default value of the input element.",
+          "values": []
         }
       ],
       "references": [
@@ -803,22 +808,12 @@
     },
     {
       "name": "leu-select",
-      "description": "\n---\n\n\n### **Methods:**\n - **_updateMenuItems(changed)** - Apply the current state to the menu items.\n- Set the active property when the value property has changed.\n- Hide menu items that do not match the filter.\n- **_getDisplayValue(): _String | nothing_** - Determines the value or label that should be displayed inside the toggle button.\n- **_isSelected(menuItemValue: _String_): _Boolean_** - Checks if the given value is selected.\n\n### **Slots:**\n - **before** - Optional content the appears before the option list\n- **after** - Optional content the appears after the option list",
+      "description": "\n---\n\n\n### **Methods:**\n - **_updateMenuItems(changed)** - Apply the current state to the menu items.\n- Set the active property when the value property has changed.\n- Hide menu items that do not match the filter.\n- **_getDisplayValue()** - Determines the value or label that should be displayed inside the toggle button.\n- **_isSelected(menuItemValue: _string_)** - Checks if the given value is selected.\n\n### **Slots:**\n - **before** - Optional content the appears before the option list\n- **after** - Optional content the appears after the option list",
       "attributes": [
         {
           "name": "value",
-          "description": "List of selected values. If they're set from outside the component, the select element tries to find all the options with the given values and selects them.",
-          "values": [{ "name": "array" }]
-        },
-        {
-          "name": "name",
-          "description": "Reflects to the name attribute of the hidden input field that would be used in a form",
-          "values": []
-        },
-        {
-          "name": "open",
-          "description": "The expanded state of the popup",
-          "values": []
+          "description": "The default value of the select. Corresponds to the `value` HTML attribute.",
+          "values": [{ "name": "Array<string>" }]
         },
         {
           "name": "label",
@@ -830,11 +825,6 @@
           "description": "Show a clearable button to reset the value",
           "values": []
         },
-        {
-          "name": "disabled",
-          "description": "If the select should be disabled",
-          "values": []
-        },
         {
           "name": "filterable",
           "description": "Show an input field to filter the options inside the popup",
@@ -845,9 +835,11 @@
           "description": "Allow multiple selections",
           "values": []
         },
-        { "name": "_optionFilter", "values": [] },
-        { "name": "_hasFilterResults", "values": [] },
-        { "name": "_displayValue", "values": [] }
+        {
+          "name": "required",
+          "description": "Marks the input element as required",
+          "values": []
+        }
       ],
       "references": [
         {

package/dist/vue/index.d.ts

@@ -72,6 +72,8 @@ If it is set, the icon will either show an expanded or collapsed state. */
   expanded?: LeuButton["expanded"];
   /** Alters the shape of the button to be full width of its parent container */
   fluid?: LeuButton["fluid"];
+  /** Replaces the content with a spinner */
+  loading?: LeuButton["loading"];
 };
 
 type LeuButtonGroupProps = {
@@ -211,8 +213,6 @@ type LeuInputProps = {
   required?: LeuInput["required"];
   /** Adds a button to clear the input element */
   clearable?: LeuInput["clearable"];
-  /** The value of the input element. */
-  value?: LeuInput["value"];
   /** A custom error that is completely independent of the validity state. Useful for displaying server side errors. */
   error?: LeuInput["error"];
   /** The label of the input element */
@@ -243,6 +243,10 @@ type LeuInputProps = {
   validationMessages?: LeuInput["validationMessages"];
   /** Disables the browser's validation. */
   novalidate?: LeuInput["novalidate"];
+  /** The default value of the input element. */
+  value?: LeuInput["defaultValue"];
+  /** The value of the input element. */
+  value?: LeuInput["value"];
   /**  */
   _validity?: LeuInput["_validity"];
   /**  */
@@ -427,34 +431,21 @@ type LeuScrollTopProps = {
 };
 
 type LeuSelectProps = {
-  /** List of selected values. If they're set from outside the component, the select element tries to find all the options with the given values and selects them. */
-  value?: LeuSelect["value"];
-  /** Reflects to the name attribute of the hidden input field that would be used in a form */
-  name?: LeuSelect["name"];
-  /** The expanded state of the popup */
-  open?: LeuSelect["open"];
+  /** The default value of the select. Corresponds to the `value` HTML attribute. */
+  value?: LeuSelect["defaultValue"];
   /** The label of the select */
   label?: LeuSelect["label"];
   /** Show a clearable button to reset the value */
   clearable?: LeuSelect["clearable"];
-  /** If the select should be disabled */
-  disabled?: LeuSelect["disabled"];
   /** Show an input field to filter the options inside the popup */
   filterable?: LeuSelect["filterable"];
   /** Allow multiple selections */
   multiple?: LeuSelect["multiple"];
-  /**  */
-  _optionFilter?: LeuSelect["_optionFilter"];
-  /**  */
-  _hasFilterResults?: LeuSelect["_hasFilterResults"];
-  /**  */
-  _displayValue?: LeuSelect["_displayValue"];
-  /**  */
-  _optionFilterRef?: LeuSelect["_optionFilterRef"];
-  /**  */
-  _toggleButtonRef?: LeuSelect["_toggleButtonRef"];
-  /**  */
-  _menuRef?: LeuSelect["_menuRef"];
+  /** Marks the input element as required */
+  required?: LeuSelect["required"];
+  /** List of selected values. If they're set from outside the component, the select element
+finds all the options that match the given values and selects them. */
+  value?: LeuSelect["value"];
 };
 
 type LeuSpinnerProps = {};
@@ -642,6 +633,9 @@ export type CustomElements = {
    * ### **Events:**
    *  - **input**
    * - **change**
+   *
+   * ### **Methods:**
+   *
    */
   "leu-file-input": DefineComponent<LeuFileInputProps>;
 
@@ -800,8 +794,8 @@ export type CustomElements = {
    *  - **_updateMenuItems(changed)** - Apply the current state to the menu items.
    * - Set the active property when the value property has changed.
    * - Hide menu items that do not match the filter.
-   * - **_getDisplayValue(): _String | nothing_** - Determines the value or label that should be displayed inside the toggle button.
-   * - **_isSelected(menuItemValue: _String_): _Boolean_** - Checks if the given value is selected.
+   * - **_getDisplayValue()** - Determines the value or label that should be displayed inside the toggle button.
+   * - **_isSelected(menuItemValue: _string_)** - Checks if the given value is selected.
    *
    * ### **Slots:**
    *  - **before** - Optional content the appears before the option list

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.25.0",
+  "version": "0.27.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -133,6 +133,11 @@
               "name": "fluid",
               "description": "Alters the shape of the button to be full width of its parent container",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "loading",
+              "description": "Replaces the content with a spinner",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
@@ -206,6 +211,11 @@
                 "name": "fluid",
                 "description": "Alters the shape of the button to be full width of its parent container",
                 "type": "boolean"
+              },
+              {
+                "name": "loading",
+                "description": "Replaces the content with a spinner",
+                "type": "boolean"
               }
             ],
             "events": []
@@ -603,7 +613,7 @@
         },
         {
           "name": "leu-file-input",
-          "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**",
+          "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**\n\n### **Methods:**\n ",
           "doc-url": "",
           "attributes": [
             {
@@ -723,11 +733,6 @@
               "description": "Adds a button to clear the input element",
               "value": { "type": "boolean", "default": "false" }
             },
-            {
-              "name": "value",
-              "description": "The value of the input element.",
-              "value": { "type": "string", "default": "\"\"" }
-            },
             {
               "name": "error",
               "description": "A custom error that is completely independent of the validity state. Useful for displaying server side errors.",
@@ -805,6 +810,11 @@
               "name": "novalidate",
               "description": "Disables the browser's validation.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "value",
+              "description": "The default value of the input element.",
+              "value": { "type": "string", "default": "\"\"" }
             }
           ],
           "events": [
@@ -836,11 +846,6 @@
                 "description": "Adds a button to clear the input element",
                 "type": "boolean"
               },
-              {
-                "name": "value",
-                "description": "The value of the input element.",
-                "type": "string"
-              },
               {
                 "name": "error",
                 "description": "A custom error that is completely independent of the validity state. Useful for displaying server side errors.",
@@ -916,6 +921,16 @@
                 "description": "Disables the browser's validation.",
                 "type": "boolean"
               },
+              {
+                "name": "defaultValue",
+                "description": "The default value of the input element.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The value of the input element.",
+                "type": "string"
+              },
               { "name": "_validity", "type": "ValidityState | null" },
               { "name": "valueAsNumber" }
             ],
@@ -1571,23 +1586,13 @@
         },
         {
           "name": "leu-select",
-          "description": "\n---\n\n\n### **Methods:**\n - **_updateMenuItems(changed)** - Apply the current state to the menu items.\n- Set the active property when the value property has changed.\n- Hide menu items that do not match the filter.\n- **_getDisplayValue(): _String | nothing_** - Determines the value or label that should be displayed inside the toggle button.\n- **_isSelected(menuItemValue: _String_): _Boolean_** - Checks if the given value is selected.\n\n### **Slots:**\n - **before** - Optional content the appears before the option list\n- **after** - Optional content the appears after the option list",
+          "description": "\n---\n\n\n### **Methods:**\n - **_updateMenuItems(changed)** - Apply the current state to the menu items.\n- Set the active property when the value property has changed.\n- Hide menu items that do not match the filter.\n- **_getDisplayValue()** - Determines the value or label that should be displayed inside the toggle button.\n- **_isSelected(menuItemValue: _string_)** - Checks if the given value is selected.\n\n### **Slots:**\n - **before** - Optional content the appears before the option list\n- **after** - Optional content the appears after the option list",
           "doc-url": "",
           "attributes": [
             {
               "name": "value",
-              "description": "List of selected values. If they're set from outside the component, the select element tries to find all the options with the given values and selects them.",
-              "value": { "type": "array", "default": "[]" }
-            },
-            {
-              "name": "name",
-              "description": "Reflects to the name attribute of the hidden input field that would be used in a form",
-              "value": { "type": "string", "default": "\"\"" }
-            },
-            {
-              "name": "open",
-              "description": "The expanded state of the popup",
-              "value": { "type": "boolean", "default": "false" }
+              "description": "The default value of the select. Corresponds to the `value` HTML attribute.",
+              "value": { "type": "Array<string>", "default": "[]" }
             },
             {
               "name": "label",
@@ -1599,11 +1604,6 @@
               "description": "Show a clearable button to reset the value",
               "value": { "type": "boolean", "default": "false" }
             },
-            {
-              "name": "disabled",
-              "description": "If the select should be disabled",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "filterable",
               "description": "Show an input field to filter the options inside the popup",
@@ -1614,9 +1614,11 @@
               "description": "Allow multiple selections",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "_optionFilter", "value": { "type": "string" } },
-            { "name": "_hasFilterResults", "value": { "type": "string" } },
-            { "name": "_displayValue", "value": { "type": "string" } }
+            {
+              "name": "required",
+              "description": "Marks the input element as required",
+              "value": { "type": "boolean", "default": "false" }
+            }
           ],
           "slots": [
             {
@@ -1632,19 +1634,19 @@
           "js": {
             "properties": [
               {
-                "name": "open",
-                "description": "The expanded state of the popup",
-                "type": "boolean"
+                "name": "label",
+                "description": "The label of the select",
+                "type": "string"
               },
               {
-                "name": "disabled",
-                "description": "If the select should be disabled",
-                "type": "boolean"
+                "name": "defaultValue",
+                "description": "The default value of the select. Corresponds to the `value` HTML attribute.",
+                "type": "Array<string>"
               },
               {
-                "name": "multiple",
-                "description": "Allow multiple selections",
-                "type": "boolean"
+                "name": "value",
+                "description": "List of selected values. If they're set from outside the component, the select element\nfinds all the options that match the given values and selects them.",
+                "type": "Array<string>"
               },
               {
                 "name": "clearable",
@@ -1657,26 +1659,15 @@
                 "type": "boolean"
               },
               {
-                "name": "value",
-                "description": "List of selected values. If they're set from outside the component, the select element tries to find all the options with the given values and selects them.",
-                "type": "array"
-              },
-              {
-                "name": "label",
-                "description": "The label of the select",
-                "type": "string"
+                "name": "multiple",
+                "description": "Allow multiple selections",
+                "type": "boolean"
               },
               {
-                "name": "name",
-                "description": "Reflects to the name attribute of the hidden input field that would be used in a form",
-                "type": "string"
-              },
-              { "name": "_optionFilterRef", "type": "Ref<LeuInput>" },
-              { "name": "_toggleButtonRef", "type": "Ref<HTMLButtonElement>" },
-              { "name": "_menuRef", "type": "Ref<LeuMenu>" },
-              { "name": "_optionFilter", "type": "string" },
-              { "name": "_hasFilterResults", "type": "boolean" },
-              { "name": "_displayValue", "type": "string" }
+                "name": "required",
+                "description": "Marks the input element as required",
+                "type": "boolean"
+              }
             ],
             "events": []
           }

package/package.json

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

package/src/components/button/Button.ts

@@ -4,6 +4,7 @@ import { ifDefined } from "lit/directives/if-defined.js"
 import { property, query } from "lit/decorators.js"
 
 import { LeuIcon } from "../icon/Icon.js"
+import { LeuSpinner } from "../spinner/Spinner.js"
 import { LeuElement } from "../../lib/LeuElement.js"
 import { HasSlotController } from "../../lib/hasSlotController.js"
 import { ARIA_CHECKED_ROLES, ARIA_SELECTED_ROLES } from "../../lib/a11y.js"
@@ -21,6 +22,7 @@ import { FormAssociatedMixin } from "../../lib/mixins/FormAssociatedMixin.js"
 export class LeuButton extends FormAssociatedMixin(LeuElement) {
   static dependencies = {
     "leu-icon": LeuIcon,
+    "leu-spinner": LeuSpinner,
   }
 
   static styles = [LeuElement.styles, styles]
@@ -110,6 +112,12 @@ export class LeuButton extends FormAssociatedMixin(LeuElement) {
   @property({ type: Boolean, reflect: true })
   fluid: boolean = false
 
+  /**
+   * Replaces the content with a spinner
+   */
+  @property({ type: Boolean, reflect: true })
+  loading: boolean = false
+
   @query(".button")
   private button!: HTMLButtonElement
 
@@ -166,7 +174,7 @@ export class LeuButton extends FormAssociatedMixin(LeuElement) {
   setFormValue() {}
 
   protected handleClick(e: PointerEvent) {
-    if (this.disabled) {
+    if (this.disabled || this.loading) {
       e.preventDefault()
       e.stopImmediatePropagation()
       return
@@ -228,7 +236,9 @@ export class LeuButton extends FormAssociatedMixin(LeuElement) {
       "icon-after": hasIconAfter,
       round: this.round,
       active: this.active,
+      disabled: this.disabled,
       inverted: this.inverted,
+      loading: this.loading,
       [this.variant]: true,
       [this.size]: true,
     }
@@ -241,7 +251,7 @@ export class LeuButton extends FormAssociatedMixin(LeuElement) {
         aria-expanded=${ifDefined(this.expanded)}
         role=${ifDefined(aria.role)}
         class=${classMap(cssClasses)}
-        ?disabled=${this.disabled}
+        ?disabled=${this.disabled || this.loading}
         type=${this.type}
       >
         <div class="icon-wrapper icon-wrapper--before">
@@ -251,7 +261,9 @@ export class LeuButton extends FormAssociatedMixin(LeuElement) {
         <div class="icon-wrapper icon-wrapper--after">
           <slot name="after" class="icon-wrapper__slot"></slot>
         </div>
-
+        ${this.loading
+          ? html`<leu-spinner class="spinner"></leu-spinner>`
+          : nothing}
         ${this.renderExpandingIcon()}
       </button>
     `

package/src/components/button/button.css

@@ -2,7 +2,12 @@
   display: inline-block;
 }
 
+/*
+ * @todo : Disable hover styles for loading state
+ */
 button {
+  position: relative;
+
   font-family: var(--leu-font-family-black);
   text-align: center;
   appearance: none;
@@ -28,10 +33,14 @@ button.round {
   border-radius: 50%;
 }
 
-button:disabled {
+button.disabled {
   cursor: not-allowed;
 }
 
+button.loading {
+  cursor: wait;
+}
+
 button:focus-visible {
   outline: 2px solid var(--leu-color-func-cyan);
   outline-offset: 2px;
@@ -46,6 +55,10 @@ button.inverted:focus-visible {
   justify-content: center;
 }
 
+button.loading :where(.content, .icon-wrapper) {
+  visibility: hidden;
+}
+
 /* size - regular */
 button.regular {
   padding: 12px 24px;
@@ -90,7 +103,7 @@ button.primary.active:hover {
   background: var(--leu-color-black-transp-80);
 }
 
-button.primary:disabled {
+button.primary.disabled {
   color: var(--leu-color-black-0);
   background: var(--leu-color-black-transp-20);
 }
@@ -115,7 +128,7 @@ button.secondary.active:hover {
   background: var(--leu-color-black-transp-80);
 }
 
-button.secondary:disabled {
+button.secondary.disabled {
   color: var(--leu-color-black-transp-20);
   background: var(--leu-color-black-transp-5);
 }
@@ -139,7 +152,7 @@ button.ghost.active {
   color: var(--leu-color-black-100);
 }
 
-button.ghost:disabled {
+button.ghost.disabled {
   color: var(--leu-color-black-20);
 }
 
@@ -159,7 +172,7 @@ button.primary.inverted.active {
   background: var(--leu-color-black-100);
 }
 
-button.primary.inverted:disabled {
+button.primary.inverted.disabled {
   color: var(--leu-color-black-40);
   background: var(--leu-color-white-transp-70);
 }
@@ -180,7 +193,7 @@ button.secondary.inverted.active {
   background: var(--leu-color-black-0);
 }
 
-button.secondary.inverted:disabled {
+button.secondary.inverted.disabled {
   color: var(--leu-color-white-transp-70);
   background: var(--leu-color-black-transp-10);
 }
@@ -198,7 +211,7 @@ button.ghost.inverted.active {
   color: var(--leu-color-black-0);
 }
 
-button.ghost.inverted:disabled {
+button.ghost.inverted.disabled {
   color: var(--leu-color-black-20);
 }
 
@@ -249,7 +262,7 @@ button.ghost.inverted:disabled {
   --_color: var(--leu-color-black-0);
 }
 
-.ghost:disabled .icon-wrapper {
+.ghost.disabled .icon-wrapper {
   --_bg: var(--leu-color-black-transp-5);
 }
 
@@ -264,7 +277,7 @@ button.ghost.inverted:disabled {
   --_color: var(--leu-color-black-0);
 }
 
-.ghost.inverted:disabled .icon-wrapper {
+.ghost.inverted.disabled .icon-wrapper {
   --_bg: var(--leu-color-black-transp-20);
   --_color: var(--leu-color-white-transp-70);
 }
@@ -286,3 +299,18 @@ button.ghost.inverted:disabled {
 :host([expanded="true"]) .icon-expanded {
   transform: rotate(180deg);
 }
+
+.spinner {
+  --leu-spinner-size: 1.75rem;
+  padding: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: currentcolor;
+  display: block;
+}
+
+button.small .spinner {
+  --leu-spinner-size: 1.25rem;
+}

package/src/components/button/stories/button.stories.ts

@@ -41,6 +41,7 @@ function Template(args = {}) {
         ?active=${args.active}
         ?inverted=${args.inverted}
         ?disabled=${args.disabled}
+        ?loading=${args.loading}
         @click=${copyContent}
       >
         ${args.icon
@@ -87,6 +88,7 @@ Regular.argTypes = {
   disabled: { control: "boolean" },
   round: { control: "boolean" },
   active: { control: "boolean" },
+  loading: { control: "boolean" },
 }
 Regular.args = {
   content: "Click Mich...",
@@ -125,6 +127,22 @@ const items = [
     disabled: true,
   },
 
+  { content: "Normal", icon: "calendar", iconPosition: "after", loading: true },
+  {
+    content: "Active",
+    icon: "calendar",
+    iconPosition: "after",
+    active: true,
+    loading: true,
+  },
+  {
+    content: "Disabled",
+    icon: "calendar",
+    iconPosition: "after",
+    disabled: true,
+    loading: true,
+  },
+
   { icon: "calendar" },
   { icon: "calendar", active: true },
   { icon: "calendar", disabled: true },
@@ -132,6 +150,10 @@ const items = [
   { icon: "calendar", round: true },
   { icon: "calendar", round: true, active: true },
   { icon: "calendar", round: true, disabled: true },
+
+  { icon: "calendar", round: true, loading: true },
+  { icon: "calendar", round: true, active: true, loading: true },
+  { icon: "calendar", round: true, disabled: true, loading: true },
 ]
 
 const ghostItems = [
@@ -309,6 +331,7 @@ function TemplateOverview() {
                         ?active=${item.active}
                         ?disabled=${item.disabled}
                         ?inverted=${group.inverted}
+                        ?loading=${item.loading}
                         @click=${copyContent}
                       >
                         ${item.icon