@statistikzh/leu 0.5.0 → 0.6.0

package/dist/Popup.js

@@ -1,5 +1,5 @@
-import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
-import { css, LitElement, html } from 'lit';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-6de6f209.js';
+import { css, html } from 'lit';
 import { autoUpdate, size, flip, shift, computePosition } from '@floating-ui/dom';
 
 var css_248z = css`:host,
@@ -11,8 +11,6 @@ var css_248z = css`:host,
   --popup-font-regular: var(--leu-font-family-regular);
   --popup-font-black: var(--leu-font-family-black);
 
-  font-family: var(--leu-font-family-regular);
-
   font-family: var(--popup-font-regular);
 }
 
@@ -28,6 +26,7 @@ var css_248z = css`:host,
   position: absolute;
   top: 0;
   left: 0;
+  z-index: var(--leu-z-index-popup);
 }
 
 /* TODO: Should visibility be a matter of the popup component? */
@@ -37,16 +36,35 @@ var css_248z = css`:host,
 }
 `;
 
+/**
+ * @typedef {"top"|"top-start"|"top-end"|"bottom"|"bottom-start"|"bottom-end"|"left"|"left-start"|"left-end"|"right"|"right-start"|"right-end"} Placement
+ */
+
 /**
  * @tagname leu-popup
  */
-class LeuPopup extends LitElement {
+class LeuPopup extends LeuElement {
   constructor() {
     super();
     this.anchorEl = null;
     this.cleanup = undefined;
     this.flip = false;
     this.shift = false;
+    this.active = false;
+
+    /** @type {Placement} */
+    this.placement = undefined;
+
+    /** @type {"width" | "height" | "both"} */
+    this.matchSize = undefined;
+
+    /** @type {"width" | "height" | "both"} */
+    this.autoSize = undefined;
+    this.shiftPadding = 0;
+    this.autoSizePadding = 0;
+
+    /** @type {string | HTMLElement} */
+    this.anchor = undefined;
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -67,6 +85,10 @@ class LeuPopup extends LitElement {
       this.reposition();
     }
   }
+
+  /**
+   * @returns {HTMLElement | null}
+   */
   get popupEl() {
     return this.renderRoot?.querySelector(".popup") ?? null;
   }
@@ -176,39 +198,42 @@ class LeuPopup extends LitElement {
 }
 _defineProperty(LeuPopup, "styles", css_248z);
 _defineProperty(LeuPopup, "shadowRootOptions", {
-  ...LitElement.shadowRootOptions,
+  ...LeuElement.shadowRootOptions,
   delegatesFocus: true
 });
 _defineProperty(LeuPopup, "properties", {
   anchor: {},
   active: {
-    type: Boolean
+    type: Boolean,
+    reflect: true
   },
-  /**
-   * @type {"top"|"top-start"|"top-end"|"bottom"|"bottom-start"|"bottom-end"|"left"|"left-start"|"left-end"|"right"|"right-start"|"right-end"}
-   */
   placement: {
-    type: String
+    type: String,
+    reflect: true
   },
   flip: {
-    type: Boolean
+    type: Boolean,
+    reflect: true
   },
   shift: {
-    type: Boolean
+    type: Boolean,
+    reflect: true
   },
   shiftPadding: {
-    type: Number
+    type: Number,
+    reflect: true
   },
-  /** @type {"width" | "height" | "both"} */
   matchSize: {
-    type: String
+    type: String,
+    reflect: true
   },
-  /** @type {"width" | "height" | "both"} */
   autoSize: {
-    type: String
+    type: String,
+    reflect: true
   },
   autoSizePadding: {
-    type: Number
+    type: Number,
+    reflect: true
   }
 });
 

package/dist/Radio.d.ts

@@ -1,12 +1,14 @@
 /**
  * @tagname leu-radio
  */
-export class LeuRadio extends LitElement {
+export class LeuRadio extends LeuElement {
     checked: boolean;
     disabled: boolean;
+    name: string;
+    value: string;
     handleChange(event: any): void;
     handleInput(event: any): void;
     render(): import("lit-html").TemplateResult<1>;
 }
-import { LitElement } from 'lit';
+import { L as LeuElement } from './LeuElement-6de6f209.js';
 //# sourceMappingURL=Radio.d.ts.map

package/dist/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["Radio.js"],"names":[],"mappings":"AAgGA;;GAEG;AACH;IAGI,iBAAoB;IACpB,kBAAqB;IAEvB,+BAIC;IACD,8BAEC;IACD,+CAeC;CACF;2BAhIqC,KAAK"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["Radio.js"],"names":[],"mappings":"AA8FA;;GAEG;AACH;IAGI,iBAAoB;IACpB,kBAAqB;IACrB,aAAc;IACd,cAAe;IAEjB,+BAIC;IACD,8BAEC;IACD,+CAeC;CACF;gCAjIqD,0BAA0B"}

package/dist/Radio.js

@@ -1,5 +1,5 @@
-import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
-import { css, LitElement, html } from 'lit';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-6de6f209.js';
+import { css, html } from 'lit';
 
 var css_248z = css`:host {
   --radio-color: var(--leu-color-black-40);
@@ -15,8 +15,6 @@ var css_248z = css`:host {
   align-items: flex-start;
   gap: 0.5rem;
 
-  font-family: var(--leu-font-family-regular);
-
   font-family: var(--radio-font-regular);
 }
 
@@ -97,11 +95,13 @@ var css_248z = css`:host {
 /**
  * @tagname leu-radio
  */
-class LeuRadio extends LitElement {
+class LeuRadio extends LeuElement {
   constructor() {
     super();
     this.checked = false;
     this.disabled = false;
+    this.name = "";
+    this.value = "";
   }
   handleChange(event) {
     this.checked = event.target.checked;
@@ -114,7 +114,7 @@ class LeuRadio extends LitElement {
   render() {
     return html`
       <input
-        id=${this.identifier}
+        id=${`radio-${this.name}`}
         class="radio"
         type="radio"
         name="${this.name}"
@@ -124,13 +124,14 @@ class LeuRadio extends LitElement {
         ?disabled=${this.disabled}
         .value=${this.value}
       />
-      <label for=${this.identifier} class="label">${this.label}</label>
+      <label for=${`radio-${this.name}`} class="label"><slot></slot></label>
     `;
   }
 }
 _defineProperty(LeuRadio, "styles", css_248z);
+/** @internal */
 _defineProperty(LeuRadio, "shadowRootOptions", {
-  ...LitElement.shadowRootOptions,
+  ...LeuElement.shadowRootOptions,
   delegatesFocus: true
 });
 _defineProperty(LeuRadio, "properties", {
@@ -142,10 +143,6 @@ _defineProperty(LeuRadio, "properties", {
     type: Boolean,
     reflect: true
   },
-  identifier: {
-    type: String,
-    reflect: true
-  },
   value: {
     type: String,
     reflect: true
@@ -153,10 +150,6 @@ _defineProperty(LeuRadio, "properties", {
   name: {
     type: String,
     reflect: true
-  },
-  label: {
-    type: String,
-    reflect: true
   }
 });
 

package/dist/RadioGroup.d.ts

@@ -1,7 +1,7 @@
 /**
  * @tagname leu-radio-group
  */
-export class LeuRadioGroup extends LitElement {
+export class LeuRadioGroup extends LeuElement {
     _currentIndex: number;
     orientation: string;
     items: any[];
@@ -16,5 +16,5 @@ export class LeuRadioGroup extends LitElement {
     initializeIndex(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
-import { LitElement } from 'lit';
+import { L as LeuElement } from './LeuElement-6de6f209.js';
 //# sourceMappingURL=RadioGroup.d.ts.map

package/dist/RadioGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["RadioGroup.js"],"names":[],"mappings":"AAqCA;;GAEG;AACH;IAIM,sBAAiD;IA6BnD,oBAA+B;IAE/B,aAAe;IAEjB,iBAGC;IAUD,0BAIC;IACD,6BAIC;IACD,yBAEC;IACD,qCAIC;IACD,yDAaC;IACD,oBAQC;IACD,oBAIC;IACD,wBAIC;IACD,+CAWC;CACF;2BAxJqC,KAAK"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["RadioGroup.js"],"names":[],"mappings":"AAmCA;;GAEG;AACH;IAIM,sBAAiD;IA6BnD,oBAA+B;IAE/B,aAAe;IAEjB,iBAGC;IAUD,0BAIC;IACD,6BAIC;IACD,yBAEC;IACD,qCAIC;IACD,yDAaC;IACD,oBAQC;IACD,oBAIC;IACD,wBAIC;IACD,+CAWC;CACF;gCAvJqD,0BAA0B"}

package/dist/RadioGroup.js

@@ -1,13 +1,11 @@
-import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
-import { css, LitElement, html } from 'lit';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-6de6f209.js';
+import { css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 
 var css_248z = css`:host {
   --group-font-regular: var(--leu-font-family-regular);
   --group-font-black: var(--leu-font-family-black);
 
-  font-family: var(--leu-font-family-regular);
-
   font-family: var(--group-font-regular);
 }
 
@@ -38,7 +36,7 @@ var css_248z = css`:host {
 /**
  * @tagname leu-radio-group
  */
-class LeuRadioGroup extends LitElement {
+class LeuRadioGroup extends LeuElement {
   constructor() {
     super();
     _defineProperty(this, "handleFocusIn", e => {
@@ -130,7 +128,7 @@ class LeuRadioGroup extends LitElement {
     });
   }
   handleItems() {
-    this.items = [...this.querySelectorAll(":scope > *:not([slot])")];
+    this.items = Array.from(this.querySelectorAll(":scope > *:not([slot])"));
     this.initializeIndex();
     this.setTabIndex();
   }

package/dist/ScrollTop.d.ts

@@ -1,7 +1,7 @@
 /**
  * @tagname leu-scroll-top
  */
-export class LeuScrollTop extends LitElement {
+export class LeuScrollTop extends LeuElement {
     static scrollToTop(): void;
     _scrollDown: boolean;
     /**
@@ -15,5 +15,5 @@ export class LeuScrollTop extends LitElement {
     _scrollListener: Function;
     render(): import("lit-html").TemplateResult<1>;
 }
-import { LitElement } from 'lit';
+import { L as LeuElement } from './LeuElement-6de6f209.js';
 //# sourceMappingURL=ScrollTop.d.ts.map

package/dist/ScrollTop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollTop.d.ts","sourceRoot":"","sources":["ScrollTop.js"],"names":[],"mappings":"AA8CA;;GAEG;AACH;IAwCE,2BAMC;IAtCO,qBAAwB;IAM5B;;;;OAIG;IACH,qBAA2E;IAC3E,kBAA+B;IAQjC,gBAAgB;IAChB,0BAAgC;IAkBlC,+CAgBC;CACF;2BAhHqC,KAAK"}
+{"version":3,"file":"ScrollTop.d.ts","sourceRoot":"","sources":["ScrollTop.js"],"names":[],"mappings":"AA4CA;;GAEG;AACH;IAwCE,2BAMC;IAtCO,qBAAwB;IAM5B;;;;OAIG;IACH,qBAA2E;IAC3E,kBAA+B;IAQjC,gBAAgB;IAChB,0BAAgC;IAkBlC,+CAgBC;CACF;gCA/GqD,0BAA0B"}

package/dist/ScrollTop.js

@@ -1,12 +1,10 @@
-import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
-import { css, LitElement, html } from 'lit';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-6de6f209.js';
+import { css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import './leu-button.js';
+import { L as LeuButton } from './Button-9692e403.js';
+import { LeuIcon } from './Icon.js';
 import { t as throttle } from './utils-65469421.js';
-import './defineElement-40372b4b.js';
-import './Button-da11d064.js';
 import 'lit/directives/if-defined.js';
-import './icon-03e86700.js';
 
 var css_248z = css`.scroll-top {
   overflow: hidden;
@@ -47,7 +45,7 @@ var css_248z = css`.scroll-top {
 /**
  * @tagname leu-scroll-top
  */
-class LeuScrollTop extends LitElement {
+class LeuScrollTop extends LeuElement {
   constructor() {
     super();
     /** @internal */
@@ -102,16 +100,20 @@ class LeuScrollTop extends LitElement {
     return html`
       <div class=${classMap(cssClasses)}>
         <leu-button
-          icon="arrowUp"
           label="Zum Seitenanfang"
           round
           @click="${() => LeuScrollTop.scrollToTop()}"
         >
+          <leu-icon name="arrowUp"></leu-icon>
         </leu-button>
       </div>
     `;
   }
 }
+_defineProperty(LeuScrollTop, "dependencies", {
+  "leu-button": LeuButton,
+  "leu-icon": LeuIcon
+});
 _defineProperty(LeuScrollTop, "styles", css_248z);
 _defineProperty(LeuScrollTop, "properties", {
   _showButton: {

package/dist/Select.d.ts

@@ -2,9 +2,22 @@
  * @tagname leu-select
  * @slot before - Optional content the appears before the option list
  * @slot after - Optional content the appears after the option list
+ * @property {string} name - Reflects to the name attribute of the hidden input field that would be used in a form
+ * @property {boolean} open - The expanded state of the popup
+ * @property {string} label - The label of the select
+ * @property {array} value - 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.
+ * @property {boolean} clearable - Show a clearable button to reset the value
+ * @property {boolean} disabled - If the select should be disabled
+ * @property {boolean} filterable - Show an input field to filter the options inside the popup
+ * @property {boolean} multiple - Allow multiple selections
+ * @attribute {string} value - The selected values separated by commas.
  */
-export class LeuSelect extends LitElement {
+export class LeuSelect extends LeuElement {
     static get properties(): {
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         open: {
             type: BooleanConstructor;
             reflect: boolean;
@@ -13,11 +26,11 @@ export class LeuSelect extends LitElement {
             type: StringConstructor;
             reflect: boolean;
         };
-        options: {
-            type: ArrayConstructor;
-        };
         value: {
             type: ArrayConstructor;
+            converter: {
+                fromAttribute(value: any): any;
+            };
         };
         clearable: {
             type: BooleanConstructor;
@@ -35,7 +48,13 @@ export class LeuSelect extends LitElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        optionFilter: {
+        _optionFilter: {
+            state: boolean;
+        };
+        _hasFilterResults: {
+            state: boolean;
+        };
+        _displayValue: {
             state: boolean;
         };
     };
@@ -46,53 +65,72 @@ export class LeuSelect extends LitElement {
     clearable: boolean;
     filterable: boolean;
     value: any[];
-    options: any[];
     label: string;
+    name: string;
     /** @internal */
-    _arrowIcon: import("lit-html").TemplateResult<1>;
+    _optionFilter: string;
     /** @internal */
-    _clearIcon: import("lit-html").TemplateResult<1>;
+    _hasFilterResults: boolean;
     /** @internal */
-    optionFilter: string;
+    _deferedChangeEvent: boolean;
     /** @internal */
-    deferedChangeEvent: boolean;
-    /**
-     * @type {import("lit/directives/ref").Ref<import("../menu/Menu").LeuMenu>}
-     */
-    menuRef: import("lit/directives/ref").Ref<any>;
+    _displayValue: string;
     /**
      * @type {import("lit/directives/ref").Ref<import("../input/Input").LeuInput>}
      */
-    optionFilterRef: import("lit/directives/ref").Ref<any>;
+    _optionFilterRef: import("lit/directives/ref").Ref<any>;
     /**
      * @type {import("lit/directives/ref").Ref<HTMLButtonElement>}
      */
-    toggleButtonRef: import("lit/directives/ref").Ref<HTMLButtonElement>;
+    _toggleButtonRef: import("lit/directives/ref").Ref<HTMLButtonElement>;
+    /**
+     * @type {import("lit/directives/ref").Ref<import("../menu/Menu").LeuMenu>}
+     */
+    _menuRef: import("lit/directives/ref").Ref<any>;
     updated(changedProperties: any): void;
-    getDisplayValue(value: any): any;
-    getFilteredOptions(): any[];
-    emitUpdateEvents(): void;
-    emitInputEvent(): void;
-    emitChangeEvent(): void;
-    clearValue(event: any): void;
-    toggleDropdown(): void;
-    openDropdown(): void;
-    closeDropdown(): void;
     /**
-     * Adds or replaces the given option in the options array.
-     *
-     * @param {*} option
+     * 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.
+     */
+    _updateMenuItems(changed: any): Promise<void>;
+    /**
+     * @internal
+     * @param {KeyboardEvent} event
+     */
+    _handleToggleKeyDown(event: KeyboardEvent): Promise<void>;
+    /**
+     * @internal
+     * @param {KeyboardEvent} event
+     */
+    _handleFilterInputKeyDown(event: KeyboardEvent): void;
+    /**
+     * Determines the value or label that should be displayed inside the toggle button.
+     * @returns {String | nothing}
+     */
+    _getDisplayValue(): string | typeof nothing;
+    _emitInputEvent(): void;
+    _emitChangeEvent(): void;
+    _clearValue(event: any): void;
+    _toggleDropdown(): void;
+    _closeDropdown(): void;
+    _handleFilterInput(event: any): void;
+    /**
+     * Checks if the given value is selected.
+     * @param {String} menuItemValue
+     * @returns {Boolean}
+     */
+    _isSelected(menuItemValue: string): boolean;
+    _handleMenuItemClick(event: any): void;
+    /**
+     * Close the dropdown if the focus moves outside the component.
      */
-    selectOption(option: any): void;
-    handleApplyClick(): void;
-    handleFilterInput(event: any): void;
-    isSelected(option: any): boolean;
-    renderMenu(): import("lit-html").TemplateResult<1>;
-    renderFilterInput(): import("lit-html").TemplateResult<1> | typeof nothing;
-    renderApplyButton(): import("lit-html").TemplateResult<1> | typeof nothing;
-    renderToggleButton(): import("lit-html").TemplateResult<1>;
+    _handlePopupFocusOut(event: any): void;
+    _renderFilterInput(): import("lit-html").TemplateResult<1> | typeof nothing;
+    _renderApplyButton(): import("lit-html").TemplateResult<1> | typeof nothing;
+    _renderToggleButton(): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1>;
 }
-import { LitElement } from 'lit';
+import { L as LeuElement } from './LeuElement-6de6f209.js';
 import { nothing } from 'lit';
 //# sourceMappingURL=Select.d.ts.map

package/dist/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["Select.js"],"names":[],"mappings":"AA6PA;;;;GAIG;AACH;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAoCC;IACD,wCAKC;IA4BC,cAAiB;IACjB,kBAAqB;IAErB,kBAAqB;IACrB,mBAAsB;IACtB,oBAAuB;IACvB,aAAe;IACf,eAAiB;IACjB,cAAe;IAEf,gBAAgB;IAChB,iDAAuC;IAEvC,gBAAgB;IAChB,iDAA+B;IAE/B,gBAAgB;IAChB,qBAAsB;IAEtB,gBAAgB;IAChB,4BAA+B;IAE/B;;OAEG;IACH,SAFU,OAAO,oBAAoB,EAAE,GAAG,KAAgC,CAEhD;IAC1B;;OAEG;IACH,iBAFU,OAAO,oBAAoB,EAAE,GAAG,KAAmC,CAE3C;IAClC;;OAEG;IACH,iBAFU,OAAO,oBAAoB,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAE3B;IAUpC,sCAUC;IACD,iCAKC;IACD,4BAKC;IACD,yBAGC;IACD,uBAMC;IACD,wBAMC;IACD,6BAMC;IACD,uBAIC;IACD,qBAEC;IACD,sBAMC;IAED;;;;OAIG;IACH,gCAYC;IACD,yBAEC;IACD,oCAEC;IACD,iCAEC;IACD,mDAqCC;IACD,2EAYC;IACD,2EAaC;IACD,2DA+BC;IACD,+CAkCC;CACF;2BAllB8C,KAAK;wBAAL,KAAK"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["Select.js"],"names":[],"mappings":"AA2PA;;;;;;;;;;;;;GAaG;AACH;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAmDC;IACD,wCAKC;IA4BC,cAAiB;IACjB,kBAAqB;IAErB,kBAAqB;IACrB,mBAAsB;IACtB,oBAAuB;IACvB,aAAe;IACf,cAAe;IACf,aAAc;IAEd,gBAAgB;IAChB,sBAAuB;IAEvB,gBAAgB;IAChB,2BAA6B;IAE7B,gBAAgB;IAChB,6BAAgC;IAEhC,gBAAgB;IAChB,sBAAuB;IAEvB;;OAEG;IACH,kBAFU,OAAO,oBAAoB,EAAE,GAAG,CAAC,GAAiC,CAAC,CAE1C;IACnC;;OAEG;IACH,kBAFU,OAAO,oBAAoB,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAE1B;IAEnC;;OAEG;IACH,UAFU,OAAO,oBAAoB,EAAE,GAAG,CAAC,GAA8B,CAAC,CAE/C;IAU7B,sCAoBC;IAED;;;;OAIG;IACH,8CA0BC;IACD;;;OAGG;IACH,4BAFW,aAAa,iBAcvB;IAED;;;OAGG;IACH,iCAFW,aAAa,QAQvB;IAED;;;OAGG;IACH,oBAFa,uBAAgB,CAO5B;IACD,wBAMC;IACD,yBAMC;IACD,8BAOC;IACD,wBAIC;IACD,uBAMC;IACD,qCAEC;IAED;;;;OAIG;IACH,4CAEC;IACD,uCAoBC;IAED;;OAEG;IACH,uCAIC;IACD,4EAaC;IACD,4EAeC;IACD,4DAmCC;IACD,+CAmDC;CACF;gCA3qBqD,0BAA0B;wBAC7C,KAAK"}