@statistikzh/leu 0.5.1 → 0.7.0

package/dist/Input.js

@@ -1,10 +1,10 @@
-import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
-import { css, LitElement, nothing, html } from 'lit';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { css, 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';
+import { LeuIcon } from './Icon.js';
 
 var css_248z = css`:host,
 :host * {
@@ -181,7 +181,9 @@ var css_248z = css`:host,
 
 /* is size small AND has no focus AND is empty */
 
-:host(:not(:focus-within)[size="small"]) .input-wrapper--empty .label {
+:host(:not(:focus-within)[size="small"])
+  .input-wrapper--empty:not(.input-wrapper--invalid)
+  .label {
   top: calc(0.75rem - var(--input-border-width));
   opacity: 1;
   visibility: visible;
@@ -270,15 +272,15 @@ var css_248z = css`:host,
   color: var(--input-color-invalid);
 }
 
-.icon svg, .error-icon svg {
+.icon leu-icon, .error-icon leu-icon {
   display: block;
 }
 `;
 
-const SIZE_TYPES = {
+const SIZES = Object.freeze({
   SMALL: "small",
   REGULAR: "regular"
-};
+});
 
 /**
  * TODO:
@@ -328,7 +330,7 @@ const VALIDATION_MESSAGES = {
  *
  * @tagname leu-input
  */
-class LeuInput extends LitElement {
+class LeuInput extends LeuElement {
   static resolveErrorMessage(message, refernceValue) {
     if (typeof message === "function") {
       return message(refernceValue);
@@ -341,25 +343,29 @@ class LeuInput extends LitElement {
     this.required = false;
     this.clearable = false;
 
-    /** @type {keyof typeof SIZE_TYPES} */
-    this.size = SIZE_TYPES.REGULAR;
+    /** @type {"small" | "regular"} */
+    this.size = SIZES.REGULAR;
     this.type = "text";
     this._validity = null;
     this.validationMessages = {};
     this.novalidate = false;
+    this.value = "";
 
     /** @internal */
     this._identifier = "";
 
-    /** @internal */
-    this._clearIcon = Icon("clear");
-
     /**
      * @internal
      * @type {import("lit/directives/ref.js").Ref<HTMLInputElement>}
      */
     this._inputRef = createRef();
   }
+  get valueAsNumber() {
+    if (this.value === "") {
+      return NaN;
+    }
+    return Number(this.value);
+  }
 
   /**
    * Method for handling the click event of the wrapper element.
@@ -510,10 +516,7 @@ class LeuInput extends LitElement {
 
   /**
    * Creates an error list with an item for the given validity state.
-   * @param {ValidityState} validityState
-   * @param {Object} validationMessages
-   * @param {String} idRef
-   * @returns
+   * @returns {import("lit").TemplateResult | nothing}
    */
   renderErrorMessages() {
     if (!this.isInvalid()) {
@@ -536,11 +539,13 @@ class LeuInput extends LitElement {
    * This can be either an icon, a clear button or an error indicator icon.
    *
    * @private
-   * @returns {TemplateResult}
+   * @returns {import("lit").TemplateResult | nothing}
    */
   renderAfterContent() {
     if (this.isInvalid()) {
-      return html`<div class="error-icon">${Icon("caution")}</div>`;
+      return html`<div class="error-icon">
+        <leu-icon name="caution"></leu-icon>
+      </div>`;
     }
     if (this.clearable && this.value) {
       return html`<button
@@ -549,11 +554,13 @@ class LeuInput extends LitElement {
         aria-label="Eingabefeld zurücksetzen"
         ?disabled=${this.disabled}
       >
-        ${this._clearIcon}
+        <leu-icon name="clear"></leu-icon>
       </button>`;
     }
     if (this.icon) {
-      return html`<div class="icon">${Icon(this.icon)}</div>`;
+      return html`<div class="icon">
+        <leu-icon name=${this.icon}></leu-icon>
+      </div>`;
     }
     return nothing;
   }
@@ -608,12 +615,15 @@ class LeuInput extends LitElement {
     `;
   }
 }
+_defineProperty(LeuInput, "dependencies", {
+  "leu-icon": LeuIcon
+});
 _defineProperty(LeuInput, "styles", css_248z);
 /**
  * @internal
  */
 _defineProperty(LeuInput, "shadowRootOptions", {
-  ...LitElement.shadowRootOptions,
+  ...LeuElement.shadowRootOptions,
   delegatesFocus: true
 });
 _defineProperty(LeuInput, "properties", {
@@ -697,10 +707,9 @@ _defineProperty(LeuInput, "properties", {
     type: String,
     reflect: true
   },
-  /** @type {ValidityState} */
   _validity: {
     state: true
   }
 });
 
-export { LeuInput, SIZE_TYPES };
+export { LeuInput, SIZES };

package/dist/LeuElement-ba5ea33d.d.ts

@@ -0,0 +1,7 @@
+declare class LeuElement extends LitElement {
+    static define(name: any, constructor?: typeof LeuElement, options?: {}): void;
+}
+declare function _defineProperty(obj: any, key: any, value: any): any;
+import { LitElement } from 'lit';
+export { LeuElement as L, _defineProperty as _ };
+//# sourceMappingURL=LeuElement-ba5ea33d.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LeuElement-ba5ea33d.d.ts","sourceRoot":"","sources":["LeuElement-ba5ea33d.js"],"names":[],"mappings":"AA+BA;IACE,8EAMC;CAOF;AA3CD,sEAaC;2BAf0B,KAAK"}

package/dist/{_rollupPluginBabelHelpers-20f659f4.js → LeuElement-ba5ea33d.js}

@@ -1,3 +1,5 @@
+import { LitElement } from 'lit';
+
 function _defineProperty(obj, key, value) {
   key = _toPropertyKey(key);
   if (key in obj) {
@@ -27,4 +29,21 @@ function _toPropertyKey(arg) {
   return typeof key === "symbol" ? key : String(key);
 }
 
-export { _defineProperty as _ };
+class LeuElement extends LitElement {
+  static define(name, constructor = this, options = {}) {
+    if (!customElements.get(name)) {
+      customElements.define(name, constructor, options);
+    } else {
+      console.info(`${name} is already defined`);
+    }
+  }
+  constructor() {
+    super();
+    Object.entries(this.constructor.dependencies).forEach(([name, component]) => {
+      this.constructor.define(name, component);
+    });
+  }
+}
+_defineProperty(LeuElement, "dependencies", {});
+
+export { LeuElement as L, _defineProperty as _ };

package/dist/Menu.d.ts

@@ -1,8 +1,30 @@
+export type SelectsType = 'single' | 'multiple' | 'none';
+/**
+ * @typedef {'single' | 'multiple' | 'none'} SelectsType
+ */
 /**
  * @tagname leu-menu
+ * @property {SelectsType} selects - This has only an effect when the role is 'menu'. It defines which role the menu items will get. Default is 'none'.
  */
-export class LeuMenu extends LitElement {
+export class LeuMenu extends LeuElement {
+    /** @type {SelectsType} */
+    selects: SelectsType;
+    value: any;
+    _handleSlotChange(): void;
+    _setMenuItemRoles(): void;
+    /**
+     *
+     * @returns {import("./MenuItem").LeuMenuItem[]}
+     */
+    getMenuItems(): import("./MenuItem").LeuMenuItem[];
+    getVisibleMenuItems(): LeuMenuItem[];
+    _handleKeyDown(event: any): void;
+    setCurrentItem(index: any): any;
+    focusItem(index: any): void;
+    firstUpdated(): void;
+    updated(changedProperties: any): void;
     render(): import("lit-html").TemplateResult<1>;
 }
-import { LitElement } from 'lit';
+import { L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { LeuMenuItem } from './MenuItem.js';
 //# sourceMappingURL=Menu.d.ts.map

package/dist/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["Menu.js"],"names":[],"mappings":"AA0BA;;GAEG;AACH;IACE,+CAEC;CACF;2BAhCqC,KAAK"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["Menu.js"],"names":[],"mappings":"0BA8Ba,QAAQ,GAAG,UAAU,GAAG,MAAM;AAD3C;;GAEG;AAEH;;;GAGG;AACH;IAII,0BAA0B;IAC1B,SADW,WAAW,CACD;IACrB,WAAsB;IAaxB,0BAGC;IACD,0BAmBC;IAED;;;OAGG;IACH,gBAFa,OAAO,YAAY,EAAE,WAAW,EAAE,CAO9C;IACD,qCAEC;IACD,iCAgBC;IACD,gCAaC;IACD,4BAGC;IACD,qBAEC;IACD,sCAIC;IACD,+CAEC;CACF;gCA5IqD,0BAA0B;4BAEpD,eAAe"}

package/dist/Menu.js

@@ -1,5 +1,8 @@
-import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
-import { css, LitElement, html } from 'lit';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-ba5ea33d.js';
+import { css, html } from 'lit';
+import { LeuMenuItem } from './MenuItem.js';
+import 'lit/directives/if-defined.js';
+import './Icon.js';
 
 var css_248z = css`:host,
 :host * {
@@ -24,14 +27,128 @@ var css_248z = css`:host,
 }
 `;
 
+/**
+ * @typedef {'single' | 'multiple' | 'none'} SelectsType
+ */
+
 /**
  * @tagname leu-menu
+ * @property {SelectsType} selects - This has only an effect when the role is 'menu'. It defines which role the menu items will get. Default is 'none'.
  */
-class LeuMenu extends LitElement {
+class LeuMenu extends LeuElement {
+  constructor() {
+    super();
+
+    /** @type {SelectsType} */
+    this.selects = "none";
+    this.value = undefined;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.getAttribute("role")) {
+      this.setAttribute("role", "menu");
+    }
+    this.addEventListener("keydown", this._handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", this._handleKeyDown);
+  }
+  _handleSlotChange() {
+    this.setCurrentItem(0);
+    this._setMenuItemRoles();
+  }
+  _setMenuItemRoles() {
+    const menuRole = this.getAttribute("role");
+    let menuItemRole;
+    if (menuRole === "menu") {
+      if (this.selects === "multiple") {
+        menuItemRole = "menuitemcheckbox";
+      } else if (this.selects === "single") {
+        menuItemRole = "menuitemradio";
+      } else {
+        menuItemRole = "menuitem";
+      }
+    } else if (menuRole === "listbox") {
+      menuItemRole = "option";
+    }
+    if (menuItemRole) {
+      this.getMenuItems().forEach(menuItem => {
+        menuItem.componentRole = menuItemRole; // eslint-disable-line no-param-reassign
+      });
+    }
+  }
+
+  /**
+   *
+   * @returns {import("./MenuItem").LeuMenuItem[]}
+   */
+  getMenuItems() {
+    const slot = this.shadowRoot.querySelector("slot");
+    return slot.assignedElements({
+      flatten: true
+    }).filter(el => el instanceof LeuMenuItem);
+  }
+  getVisibleMenuItems() {
+    return this.getMenuItems().filter(menuItem => !menuItem.hidden);
+  }
+  _handleKeyDown(event) {
+    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+      event.preventDefault();
+      const menuItems = this.getVisibleMenuItems();
+      let index = menuItems.findIndex(menuItem => menuItem.tabbable);
+      if (event.key === "ArrowDown") {
+        index += 1;
+      } else if (event.key === "ArrowUp") {
+        index -= 1;
+      } else if (event.key === "Home") {
+        index = 0;
+      } else if (event.key === "End") {
+        index = menuItems.length - 1;
+      }
+      this.focusItem(index);
+    }
+  }
+  setCurrentItem(index) {
+    const menuItems = this.getVisibleMenuItems();
+    let currentItem = null;
+    const currentItemIndex = (index + menuItems.length) % menuItems.length;
+    menuItems.forEach((menuItem, i) => {
+      if (i === currentItemIndex) {
+        currentItem = menuItem;
+        menuItem.tabbable = true; // eslint-disable-line no-param-reassign
+      } else {
+        menuItem.tabbable = false; // eslint-disable-line no-param-reassign
+      }
+    });
+    return currentItem;
+  }
+  focusItem(index) {
+    const currentItem = this.setCurrentItem(index);
+    currentItem.focus();
+  }
+  firstUpdated() {
+    this.setCurrentItem(0);
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("selects")) {
+      this._setMenuItemRoles();
+    }
+  }
   render() {
     return html`<slot></slot>`;
   }
 }
 _defineProperty(LeuMenu, "styles", css_248z);
+_defineProperty(LeuMenu, "shadowRootOptions", {
+  ...LeuElement.shadowRootOptions,
+  delegatesFocus: true
+});
+_defineProperty(LeuMenu, "properties", {
+  selects: {
+    type: String,
+    reflect: true
+  }
+});
 
 export { LeuMenu };

package/dist/MenuItem.d.ts

@@ -1,21 +1,38 @@
+export type MenuItemRole = 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'none';
+/**
+ * @typedef {'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'none'} MenuItemRole
+ */
 /**
  * @tagname leu-menu-item
  * @slot - The label of the menu item
+ * @property {boolean} active - Defines if the item is selected or checked
+ * @property {boolean} disabled - Disables the underlying button or link
+ * @property {string} value - The value of the item. It must not contain commas. See `getValue()`
+ * @property {string} href - The href of the underlying link
+ * @property {boolean} tabbable - If the item should be focusable. Will be reflected as `tabindex` to the underlying button or link
+ * @property {MenuItemRole} componentRole - The role of the item. This will be reflected as `role` to the underlying button or link. Default is `'menuitem'.`
  */
-export class LeuMenuItem extends LitElement {
-    static getIconOrText(name: any): any;
+export class LeuMenuItem extends LeuElement {
     active: boolean;
     disabled: boolean;
+    value: any;
+    href: any;
+    tabbable: any;
+    /** @type {MenuItemRole} */
+    componentRole: MenuItemRole;
+    _handleClick(event: any): void;
     /**
-     * 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.
+     * Returns the value of the item. If `value` is not set, it will return the inner text
+     * @returns {string}
      */
-    highlighted: boolean;
-    renderBefore(): typeof nothing | import("lit-html").TemplateResult;
-    renderAfter(): typeof nothing | import("lit-html").TemplateResult;
-    getTagName(): "button" | "a";
-    render(): import("lit-html").TemplateResult;
+    getValue(): string;
+    _getAria(): {
+        disabled: boolean;
+    };
+    _getTabIndex(): 0 | -1;
+    _renderLink(content: any): import("lit-html").TemplateResult<1>;
+    _renderButton(content: any): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }
-import { LitElement } from 'lit';
-import { nothing } from 'lit';
+import { L as LeuElement } from './LeuElement-ba5ea33d.js';
 //# sourceMappingURL=MenuItem.d.ts.map

package/dist/MenuItem.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["MenuItem.js"],"names":[],"mappings":"2BA8Fa,UAAU,GAAG,kBAAkB,GAAG,eAAe,GAAG,QAAQ,GAAG,MAAM;AADlF;;GAEG;AAEH;;;;;;;;;GASG;AACH;IAGI,gBAAmB;IACnB,kBAAqB;IACrB,WAAsB;IACtB,UAAqB;IACrB,cAAyB;IAEzB,2BAA2B;IAC3B,eADW,YAAY,CACQ;IAUjC,+BAKC;IAED;;;OAGG;IACH,YAFa,MAAM,CAIlB;IACD;;MAaC;IACD,uBAKC;IACD,gEAYC;IACD,kEAYC;IACD,+CAOC;CACF;gCAnMqD,0BAA0B"}