@statistikzh/leu 0.3.0 → 0.5.0

package/dist/ChipSelectable.js

@@ -1,13 +1,13 @@
-import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
 import { html } from 'lit';
-import { L as LeuChipBase } from './Chip-5f70d04f.js';
+import { LeuChipBase } from './Chip.js';
 
 const SIZES = {
   small: "small",
   regular: "regular"
 };
 const VARIANTS = {
-  default: "default",
+  toggle: "toggle",
   radio: "radio"
 };
 
@@ -48,9 +48,9 @@ class LeuChipSelectable extends LeuChipBase {
     return html`<button
       @click=${e => this.handleClick(e)}
       class="button"
-      aria-selected=${this.selected ? "true" : "false"}
+      aria-pressed=${this.selected ? "true" : "false"}
     >
-      <span class="label"><slot></slot></span>
+      <span class="label">${this.label}</span>
     </button>`;
   }
 }
@@ -67,11 +67,11 @@ _defineProperty(LeuChipSelectable, "properties", {
   },
   /**
    * The variant of the chip. Has an effect not only on the visual appearance but also on the behavior.
-   * - `default`: The chip behaves like a toggle button.
+   * - `toggle`: The chip behaves like a toggle button.
    * - `radio`: The chip behaves like a radio button.
    *
    * @type {keyof typeof VARIANTS}
-   * @default "default"
+   * @default "toggle"
    */
   variant: {
     type: String,
@@ -86,8 +86,5 @@ _defineProperty(LeuChipSelectable, "properties", {
     reflect: true
   }
 });
-function defineChipSelectableElements() {
-  defineElement("chip-selectable", LeuChipSelectable);
-}
 
-export { LeuChipSelectable, SIZES, VARIANTS, defineChipSelectableElements };
+export { LeuChipSelectable, SIZES, VARIANTS };

package/dist/Dropdown.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @tagname leu-dropdown
+ */
+export class LeuDropdown extends LitElement {
+    expanded: boolean;
+    label: string;
+    menuItems: any[];
+    _keyUpHandler(event: any): void;
+    _handleSlotChange(): void;
+    _removeMenuItemListeners(): void;
+    _handleToggleClick(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+import { LitElement } from 'lit';
+//# sourceMappingURL=Dropdown.d.ts.map

package/dist/Dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["Dropdown.js"],"names":[],"mappings":"AAmCA;;GAEG;AACH;IAKQ,kBAAqB;IAMzB,cAAe;IAEf,iBAAmB;IAarB,gCAIC;IACD,0BAIC;IACD,iCAIC;IACD,2BAEC;IACD,+CA0BC;CACF;2BA5GqC,KAAK"}

package/dist/Dropdown.js

@@ -1,10 +1,19 @@
-import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
 import { css, LitElement, html } from 'lit';
-import { defineButtonElements } from './Button.js';
-import { defineMenuElements } from './Menu.js';
-import { defineMenuItemElements } from './MenuItem.js';
+import './leu-button.js';
+import './leu-menu.js';
+import './leu-menu-item.js';
+import './leu-popup.js';
+import './defineElement-40372b4b.js';
+import './Button-da11d064.js';
 import 'lit/directives/class-map.js';
+import 'lit/directives/if-defined.js';
 import './icon-03e86700.js';
+import './Menu.js';
+import './MenuItem.js';
+import 'lit/static-html.js';
+import './Popup.js';
+import '@floating-ui/dom';
 
 var css_248z = css`:host,
 :host * {
@@ -20,8 +29,7 @@ var css_248z = css`:host,
   box-shadow: var(--leu-box-shadow-short);
   border-radius: 2px;
 
-  position: absolute;
-  top: calc(100% + 0.5rem);
+  margin-top: 0.5rem;
 }
 `;
 
@@ -31,27 +39,72 @@ var css_248z = css`:host,
 class LeuDropdown extends LitElement {
   constructor() {
     super();
+    _defineProperty(this, "_documentClickHandler", event => {
+      if (!this.contains(event.target)) {
+        this.expanded = false;
+      }
+    });
+    _defineProperty(this, "_handleMenuItemClick", () => {
+      this.expanded = false;
+    });
     this.label = "";
     this.expanded = false;
+    this.menuItems = [];
   }
-  handleClick() {
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("keyup", this._keyUpHandler);
+    document.addEventListener("click", this._documentClickHandler);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._removeMenuItemListeners();
+    this.removeEventListener("keyup", this._keyUpHandler);
+    document.removeEventListener("click", this._documentClickHandler);
+  }
+  _keyUpHandler(event) {
+    if (event.key === "Escape") {
+      this.expanded = false;
+    }
+  }
+  _handleSlotChange() {
+    this._removeMenuItemListeners();
+    this.menuItems = [...this.querySelectorAll("leu-menu > leu-menu-item")];
+    this.menuItems.forEach(item => item.addEventListener("click", this._handleMenuItemClick));
+  }
+  _removeMenuItemListeners() {
+    this.menuItems.forEach(item => {
+      item.removeEventListener("click", this._handleMenuItemClick);
+    });
+  }
+  _handleToggleClick() {
     this.expanded = !this.expanded;
   }
   render() {
     return html`
-      <leu-button
-        icon="download"
-        variant="ghost"
-        label=${this.label}
-        expanded=${this.expanded ? "open" : "closed"}
-        aria-expanded=${this.expanded ? "true" : "false"}
-        aria-controls="content"
+      <leu-popup
         ?active=${this.expanded}
-        @click=${this.handleClick}
-      ></leu-button>
-      <div id="content" class="content" ?hidden=${!this.expanded}>
-        <slot></slot>
-      </div>
+        placement="bottom-start"
+        shift
+        shiftPadding="8"
+        autoSize="width"
+        autoSizePadding="8"
+      >
+        <leu-button
+          slot="anchor"
+          icon="download"
+          variant="ghost"
+          expanded=${this.expanded ? "true" : "false"}
+          aria-expanded=${this.expanded ? "true" : "false"}
+          aria-controls="content"
+          ?active=${this.expanded}
+          @click=${this._handleToggleClick}
+          >${this.label}</leu-button
+        >
+        <div id="content" class="content" ?hidden=${!this.expanded}>
+          <slot @slotchange=${this._handleSlotChange}></slot>
+        </div>
+      </leu-popup>
     `;
   }
 }
@@ -66,11 +119,5 @@ _defineProperty(LeuDropdown, "properties", {
     reflect: true
   }
 });
-function defineDropdownElements() {
-  defineElement("dropdown", LeuDropdown);
-  defineButtonElements();
-  defineMenuElements();
-  defineMenuItemElements();
-}
 
-export { LeuDropdown, defineDropdownElements };
+export { LeuDropdown };

package/dist/Input.d.ts

@@ -0,0 +1,154 @@
+/**
+ * A text input element.
+ *
+ * @prop {boolean} disabled - Disables the input element.
+ * @prop {boolean} required - Marks the input element as required.
+ * @prop {boolean} clearable - Adds a button to clear the input element.
+ * @prop {string} value - The value of the input element.
+ * @prop {string} name - The name of the input element.
+ * @prop {string} label - The label of the input element.
+ * @prop {string} error - A custom error that is completely independent of the validity state. Useful for displaying server side errors.
+ * @prop {string} size - The size of the input element.
+ * @prop {string} icon - The icon that is displayed at the end of the input element.
+ * @prop {string} prefix - A prefix that relates to the value of the input (e.g. CHF).
+ * @prop {string} suffix - A suffix that relates to the value of the input (e.g. mm).
+ * @prop {string} pattern - A regular expression that the value is checked against.
+ * @prop {string} type - The type of the input element.
+ * @prop {string} min - The minimum value of the input element.
+ * @prop {string} max - The maximum value of the input element.
+ * @prop {string} minlength - The minimum length of the input element.
+ * @prop {string} maxlength - The maximum length of the input element.
+ * @prop {object} validationMessages - Custom validation messages. The key is the name of the validity state and the value is the message.
+ * @prop {boolean} novalidate - Disables the browser's validation.
+ * @prop {string} step - The step value of the input element.
+ *
+ * @fires {CustomEvent} input - Dispatched when the value of the input element changes.
+ * @fires {CustomEvent} change - Dispatched when the value of the input element changes and the input element loses focus.
+ *
+ * @tagname leu-input
+ */
+export class LeuInput extends LitElement {
+    static resolveErrorMessage(message: any, refernceValue: any): any;
+    disabled: boolean;
+    required: boolean;
+    clearable: boolean;
+    /** @type {keyof typeof SIZE_TYPES} */
+    size: keyof typeof SIZE_TYPES;
+    type: string;
+    _validity: any;
+    validationMessages: {};
+    novalidate: boolean;
+    /** @internal */
+    _identifier: string;
+    /** @internal */
+    _clearIcon: import("lit-html").TemplateResult<1>;
+    /**
+     * @internal
+     * @type {import("lit/directives/ref.js").Ref<HTMLInputElement>}
+     */
+    _inputRef: import("lit/directives/ref.js").Ref<HTMLInputElement>;
+    /**
+     * Method for handling the click event of the wrapper element.
+     * Redirect every click on the wrapper to the input element.
+     * This is only necessary for click events because the wrapper element
+     * looks like the input element. But the actual input field does not
+     * completely fill the wrapper element. Keyboard events don't need to be
+     * handled because the actual input element is focusable.
+     * @private
+     * @param {MouseEvent|PointerEvent} event
+     * @returns {void}
+     */
+    private handleWrapperClick;
+    /**
+     * Method for handling the blur event of the input element.
+     * Checks validity of the input element and sets the validity state.
+     * @private
+     * @param {FocusEvent} event
+     * @returns {void}
+     */
+    private handleBlur;
+    /**
+     * Method for handling the invalid event of the input element.
+     * Sets the validity state.
+     * @private
+     * @param {Event} event
+     * @returns {void}
+     */
+    private handleInvalid;
+    /**
+     * Method for handling the change event of the input element.
+     * Sets the value property and dispatches a change event so that
+     * the event can be handled outside the shadow DOM.
+     * @private
+     * @param {Event} event
+     * @fires {CustomEvent} change
+     * @returns {void}
+     */
+    private handleChange;
+    value: any;
+    /**
+     * Method for handling the input event of the input element.
+     * Sets the value property and dispatches an input event so that
+     * the event can be handled outside the shadow DOM.
+     * @private
+     * @param {Event} event
+     * @returns {void}
+     */
+    private handleInput;
+    /**
+     * Method for clearing the input element.
+     * Sets the value property to an empty string and dispatches
+     * an input and a change event.
+     * @private
+     * @returns {void}
+     * @fires {CustomEvent} input
+     * @fires {CustomEvent} change
+     */
+    private clear;
+    /**
+     * Method for getting the id of the input element.
+     * If the id attribute is set, the value of the id attribute is returned.
+     * Otherwise a random id is generated and returned.
+     *
+     * @private
+     * @returns {string} id
+     */
+    private getId;
+    /**
+     * Merge custom and default validation messages.
+     * A validation message can be a function or a string.
+     * If it s a function, the function is called with the corresponding
+     * attribute value as argument.
+     * e.g.
+     * `tooLong(this.maxlength)`
+     * This way the framework user can create reasonable validation messages
+     *
+     * @returns {Object} validationMessages
+     */
+    getValidationMessages(): any;
+    /**
+     * Creates an error list with an item for the given validity state.
+     * @param {ValidityState} validityState
+     * @param {Object} validationMessages
+     * @param {String} idRef
+     * @returns
+     */
+    renderErrorMessages(): import("lit-html").TemplateResult<1> | typeof nothing;
+    /**
+     * Determines the content that is displayed after the input element.
+     * This can be either an icon, a clear button or an error indicator icon.
+     *
+     * @private
+     * @returns {TemplateResult}
+     */
+    private renderAfterContent;
+    isInvalid(): boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export namespace SIZE_TYPES {
+    let SMALL: string;
+    let REGULAR: string;
+}
+import { LitElement } from 'lit';
+import { nothing } from 'lit';
+//# sourceMappingURL=Input.d.ts.map

package/dist/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["Input.js"],"names":[],"mappings":"AA6SA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH;IACE,kEAKC;IAGC,kBAAqB;IACrB,kBAAqB;IACrB,mBAAsB;IAEtB,sCAAsC;IACtC,MADW,MAAM,iBAAiB,CACJ;IAC9B,aAAkB;IAClB,eAAqB;IACrB,uBAA4B;IAC5B,oBAAuB;IAEvB,gBAAgB;IAChB,oBAAqB;IAErB,gBAAgB;IAChB,iDAA+B;IAE/B;;;OAGG;IACH,WAFU,OAAO,uBAAuB,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAEnC;IAG9B;;;;;;;;;;OAUG;IACH,2BAIC;IAED;;;;;;OAMG;IACH,mBAKC;IAED;;;;;;OAMG;IACH,sBAEC;IAED;;;;;;;;OAQG;IACH,qBAMC;IAJG,WAA+B;IAMnC;;;;;;;OAOG;IACH,oBAOC;IAED;;;;;;;;OAQG;IACH,cAWC;IAED;;;;;;;OAOG;IACH,cAUC;IAED;;;;;;;;;;OAUG;IACH,6BAgBC;IAED;;;;;;OAMG;IACH,6EAcC;IAED;;;;;;OAMG;IACH,2BAkBC;IACD,qBAKC;IACD,+CA2CC;CACF;;;;;2BAhmB8C,KAAK;wBAAL,KAAK"}

package/dist/Input.js

@@ -1,7 +1,8 @@
-import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
 import { css, LitElement, nothing, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { I as Icon } from './icon-03e86700.js';
 
@@ -33,11 +34,11 @@ var css_248z = css`:host,
 
   --input-clear-color: var(--leu-color-black-60);
 
-  --input-font-regular: var(--leu-font-regular);
-  --input-font-black: var(--leu-font-black);
+  --input-font-regular: var(--leu-font-family-regular);
+  --input-font-black: var(--leu-font-family-black);
 
   display: block;
-  font-family: var(--leu-font-regular);
+  font-family: var(--leu-font-family-regular);
   font-family: var(--input-font-regular);
 }
 
@@ -137,6 +138,7 @@ var css_248z = css`:host,
 
 /* is size regular AND (has focus OR contains a value) */
 
+.input-wrapper--invalid .label,
 :host(:not([size])) .label,
 :host([size="regular"]) .label {
   top: calc(0.75rem - var(--input-border-width));
@@ -161,20 +163,22 @@ var css_248z = css`:host,
   content: "*";
 }
 
+/* is not disabled AND has focus AND is empty */
+
+:host(:not([disabled]):not(:focus-within)) .input-wrapper--empty .label {
+  --input-label-color: var(--input-label-color-empty);
+}
+
 /* is empty AND has no focus */
 
-:host(:not(:focus-within)) .input-wrapper--empty .label {
+:host(:not(:focus-within))
+  .input-wrapper--empty:not(.input-wrapper--invalid)
+  .label {
   font-family: var(--input-font-regular);
   font-size: 1rem;
   top: calc(1.5rem - var(--input-border-width));
 }
 
-/* is not disabled AND has focus AND is empty */
-
-:host(:not([disabled]):not(:focus-within)) .input-wrapper--empty .label {
-  --input-label-color: var(--input-label-color-empty);
-}
-
 /* is size small AND has no focus AND is empty */
 
 :host(:not(:focus-within)[size="small"]) .input-wrapper--empty .label {
@@ -317,6 +321,7 @@ const VALIDATION_MESSAGES = {
  * @prop {string} maxlength - The maximum length of the input element.
  * @prop {object} validationMessages - Custom validation messages. The key is the name of the validity state and the value is the message.
  * @prop {boolean} novalidate - Disables the browser's validation.
+ * @prop {string} step - The step value of the input element.
  *
  * @fires {CustomEvent} input - Dispatched when the value of the input element changes.
  * @fires {CustomEvent} change - Dispatched when the value of the input element changes and the input element loses focus.
@@ -335,16 +340,9 @@ class LeuInput extends LitElement {
     this.disabled = false;
     this.required = false;
     this.clearable = false;
-    this.value = "";
-    this.name = "";
-    this.error = "";
-    this.label = "";
-    this.prefix = "";
-    this.suffix = "";
 
     /** @type {keyof typeof SIZE_TYPES} */
     this.size = SIZE_TYPES.REGULAR;
-    this.icon = "";
     this.type = "text";
     this._validity = null;
     this.validationMessages = {};
@@ -415,7 +413,9 @@ class LeuInput extends LitElement {
    * @returns {void}
    */
   handleChange(event) {
-    this.value = event.target.value;
+    if (event.target.validity.valid) {
+      this.value = event.target.value;
+    }
     const customEvent = new CustomEvent(event.type, event);
     this.dispatchEvent(customEvent);
   }
@@ -430,6 +430,11 @@ class LeuInput extends LitElement {
    */
   handleInput(event) {
     this.value = event.target.value;
+    const customEvent = new CustomEvent("input", {
+      bubbles: true,
+      composed: true
+    });
+    this.dispatchEvent(customEvent);
   }
 
   /**
@@ -537,7 +542,7 @@ class LeuInput extends LitElement {
     if (this.isInvalid()) {
       return html`<div class="error-icon">${Icon("caution")}</div>`;
     }
-    if (this.clearable && this.value !== "") {
+    if (this.clearable && this.value) {
       return html`<button
         class="clear-button"
         @click=${this.clear}
@@ -547,13 +552,13 @@ class LeuInput extends LitElement {
         ${this._clearIcon}
       </button>`;
     }
-    if (this.icon !== "") {
+    if (this.icon) {
       return html`<div class="icon">${Icon(this.icon)}</div>`;
     }
     return nothing;
   }
   isInvalid() {
-    if (this.error !== "") {
+    if (this.error) {
       return true;
     }
     return this._validity === null || this.novalidate ? false : !this._validity.valid;
@@ -562,7 +567,7 @@ class LeuInput extends LitElement {
     const isInvalid = this.isInvalid();
     const inputWrapperClasses = {
       "input-wrapper": true,
-      "input-wrapper--empty": this.value === "",
+      "input-wrapper--empty": !this.value,
       "input-wrapper--invalid": isInvalid
     };
 
@@ -584,18 +589,19 @@ class LeuInput extends LitElement {
           @invalid=${this.handleInvalid}
           ?disabled=${this.disabled}
           ?required=${this.required}
+          .value=${live(this.value ?? "")}
           pattern=${ifDefined(this.pattern)}
           min=${ifDefined(this.min)}
           max=${ifDefined(this.max)}
           maxlength=${ifDefined(this.maxlength)}
           minlength=${ifDefined(this.minlength)}
-          .value=${this.value}
+          step=${ifDefined(this.step)}
           ref=${ref(this._inputRef)}
           aria-invalid=${isInvalid}
         />
-        <label for="input-${this.getId()}" class="label"><slot></slot></label>
-        ${this.prefix !== "" ? html`<div class="prefix" .aria-hidden=${true}>${this.prefix}</div>` : nothing}
-        ${this.suffix !== "" ? html`<div class="suffix" .aria-hidden=${true}>${this.suffix}</div>` : nothing}
+        <label for="input-${this.getId()}" class="label">${this.label}</label>
+        ${this.prefix ? html`<div class="prefix" .aria-hidden=${true}>${this.prefix}</div>` : nothing}
+        ${this.suffix ? html`<div class="suffix" .aria-hidden=${true}>${this.suffix}</div>` : nothing}
         ${this.renderAfterContent()}
       </div>
       ${this.renderErrorMessages()}
@@ -665,19 +671,19 @@ _defineProperty(LeuInput, "properties", {
     reflect: true
   },
   min: {
-    type: Number,
+    type: String,
     reflect: true
   },
   max: {
-    type: Number,
+    type: String,
     reflect: true
   },
   maxlength: {
-    type: Number,
+    type: String,
     reflect: true
   },
   minlength: {
-    type: Number,
+    type: String,
     reflect: true
   },
   validationMessages: {
@@ -687,13 +693,14 @@ _defineProperty(LeuInput, "properties", {
     type: Boolean,
     reflect: true
   },
+  step: {
+    type: String,
+    reflect: true
+  },
   /** @type {ValidityState} */
   _validity: {
     state: true
   }
 });
-function defineInputElements() {
-  defineElement("input", LeuInput);
-}
 
-export { LeuInput, SIZE_TYPES, defineInputElements };
+export { LeuInput, SIZE_TYPES };

package/dist/Menu.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @tagname leu-menu
+ */
+export class LeuMenu extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+}
+import { LitElement } from 'lit';
+//# sourceMappingURL=Menu.d.ts.map

package/dist/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["Menu.js"],"names":[],"mappings":"AA0BA;;GAEG;AACH;IACE,+CAEC;CACF;2BAhCqC,KAAK"}

package/dist/Menu.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
 import { css, LitElement, html } from 'lit';
 
 var css_248z = css`:host,
@@ -33,8 +33,5 @@ class LeuMenu extends LitElement {
   }
 }
 _defineProperty(LeuMenu, "styles", css_248z);
-function defineMenuElements() {
-  defineElement("menu", LeuMenu);
-}
 
-export { LeuMenu, defineMenuElements };
+export { LeuMenu };

package/dist/MenuItem.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @tagname leu-menu-item
+ * @slot - The label of the menu item
+ */
+export class LeuMenuItem extends LitElement {
+    static getIconOrText(name: any): any;
+    active: boolean;
+    disabled: boolean;
+    /**
+     * A programmatic way to highlight the menu item like it is hovered.
+     * This is just a visual effect and does not change the active state.
+     */
+    highlighted: boolean;
+    renderBefore(): typeof nothing | import("lit-html").TemplateResult;
+    renderAfter(): typeof nothing | import("lit-html").TemplateResult;
+    getTagName(): "button" | "a";
+    render(): import("lit-html").TemplateResult;
+}
+import { LitElement } from 'lit';
+import { nothing } from 'lit';
+//# sourceMappingURL=MenuItem.d.ts.map

package/dist/MenuItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["MenuItem.js"],"names":[],"mappings":"AAsFA;;;GAGG;AACH;IAYE,qCAQC;IAjBC,gBAAmB;IACnB,kBAAqB;IAErB;;;OAGG;IACH,qBAAwB;IAW1B,mEAMC;IACD,kEAMC;IACD,6BAEC;IACD,4CAQC;CACF;2BAxIwC,KAAK;wBAAL,KAAK"}