@statistikzh/leu 0.3.0 → 0.5.0

package/dist/Select.js

@@ -1,85 +1,24 @@
-import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
 import { css, LitElement, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { map } from 'lit/directives/map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { I as Icon } from './icon-03e86700.js';
-import { defineButtonElements } from './Button.js';
-import { defineMenuElements } from './Menu.js';
-import { defineMenuItemElements } from './MenuItem.js';
-import { defineInputElements } from './Input.js';
-
-/**
- * Thanks Shoelace!
- * Source: https://github.com/shoelace-style/shoelace/blob/next/src/internal/slot.ts
- */
-
-/**
- * A reactive controller that determines when slots exist.
- * @implements { import("lit").ReactiveController }
- */
-class HasSlotController {
-  constructor(host, slotNames) {
-    /**
-     * @private
-     * @param {Event} event
-     */
-    _defineProperty(this, "handleSlotChange", event => {
-      const slot = event.target;
-      if (this.slotNames.includes("[default]") && !slot.name || slot.name && this.slotNames.includes(slot.name)) {
-        this.host.requestUpdate();
-      }
-    });
-    this.host = host;
-    host.addController(this);
-    this.slotNames = slotNames;
-  }
-
-  /**
-   * @private
-   * @returns {Boolean}
-   */
-  hasDefaultSlot() {
-    return [...this.host.childNodes].some(node => {
-      if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== "") {
-        return true;
-      }
-      if (node.nodeType === node.ELEMENT_NODE) {
-        const el = node;
-
-        // If it doesn't have a slot attribute, it's part of the default slot
-        if (!el.hasAttribute("slot")) {
-          return true;
-        }
-      }
-      return false;
-    });
-  }
-
-  /**
-   * @private
-   * @param {String} name
-   * @returns {Boolean}
-   */
-  hasNamedSlot(name) {
-    return this.host.querySelector(`:scope > [slot="${name}"]`) !== null;
-  }
-
-  /**
-   * @param {String} slotName
-   * @returns {Boolean}
-   */
-  test(slotName) {
-    return slotName === "[default]" ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);
-  }
-  hostConnected() {
-    this.host.shadowRoot.addEventListener("slotchange", this.handleSlotChange);
-  }
-  hostDisconnected() {
-    this.host.shadowRoot.removeEventListener("slotchange", this.handleSlotChange);
-  }
-}
+import { H as HasSlotController } from './Button-da11d064.js';
+import './leu-button.js';
+import './leu-menu.js';
+import './leu-menu-item.js';
+import './leu-input.js';
+import './leu-popup.js';
+import './defineElement-40372b4b.js';
+import './Menu.js';
+import './MenuItem.js';
+import 'lit/static-html.js';
+import './Input.js';
+import 'lit/directives/live.js';
+import './Popup.js';
+import '@floating-ui/dom';
 
 var css_248z = css`:host,
 :host * {
@@ -109,8 +48,8 @@ var css_248z = css`:host,
 
   --select-clear-color: var(--leu-color-black-60);
 
-  --select-font-regular: var(--leu-font-regular);
-  --select-font-black: var(--leu-font-black);
+  --select-font-regular: var(--leu-font-family-regular);
+  --select-font-black: var(--leu-font-family-black);
 
   --select-apply-button-color: var(--leu-color-black-100);
   --select-apply-button-color-focus: var(--leu-color-black-80);
@@ -122,7 +61,7 @@ var css_248z = css`:host,
   position: relative;
   display: block;
 
-  font-family: var(--leu-font-regular);
+  font-family: var(--leu-font-family-regular);
 
   font-family: var(--select-font-regular);
 }
@@ -262,18 +201,22 @@ var css_248z = css`:host,
 }
 
 .select-menu-container {
-  border-radius: 1px;
-  position: absolute;
-  left: 0;
+  position: static;
+  overflow: auto;
+
+  display: flex;
+  flex-direction: column;
+
   width: 100%;
-  background-color: white;
-  border: 0 solid black;
+  max-height: var(--auto-size-available-height);
+
   padding: 0;
   margin: 0;
-  top: calc(100% + 2px);
-  z-index: 10;
+
+  border: none;
+  border-radius: 1px;
+  background-color: white;
   box-shadow: var(--select-box-shadow-regular), var(--select-box-shadow-short);
-  overflow: auto;
 }
 
 .select-menu {
@@ -281,11 +224,7 @@ var css_248z = css`:host,
   padding: 0;
   margin: 0;
   overflow: auto;
-  max-height: 24rem;
-}
-
-.select-menu.multiple {
-  max-height: 21rem;
+  max-height: 100%;
 }
 
 .before,
@@ -322,7 +261,7 @@ class LeuSelect extends LitElement {
     return {
       open: {
         type: Boolean,
-        attribute: "open"
+        reflect: true
       },
       label: {
         type: String,
@@ -351,7 +290,6 @@ class LeuSelect extends LitElement {
         reflect: true
       },
       optionFilter: {
-        type: String,
         state: true
       }
     };
@@ -376,7 +314,7 @@ class LeuSelect extends LitElement {
      * @param {MouseEvent} event
      */
     _defineProperty(this, "handleDocumentClick", event => {
-      if (!this.contains(event.target) && this.open) {
+      if (event.target instanceof Node && !this.contains(event.target) && this.open) {
         this.closeDropdown();
       }
     });
@@ -390,9 +328,14 @@ class LeuSelect extends LitElement {
       }
     });
     this.open = false;
+    this.disabled = false;
+    this.open = false;
+    this.multiple = false;
     this.clearable = false;
+    this.filterable = false;
     this.value = [];
     this.options = [];
+    this.label = "";
 
     /** @internal */
     this._arrowIcon = Icon("angleDropDown");
@@ -405,8 +348,18 @@ class LeuSelect extends LitElement {
 
     /** @internal */
     this.deferedChangeEvent = false;
+
+    /**
+     * @type {import("lit/directives/ref").Ref<import("../menu/Menu").LeuMenu>}
+     */
     this.menuRef = createRef();
+    /**
+     * @type {import("lit/directives/ref").Ref<import("../input/Input").LeuInput>}
+     */
     this.optionFilterRef = createRef();
+    /**
+     * @type {import("lit/directives/ref").Ref<HTMLButtonElement>}
+     */
     this.toggleButtonRef = createRef();
   }
   connectedCallback() {
@@ -534,14 +487,15 @@ class LeuSelect extends LitElement {
                 before=${ifDefined(beforeIcon)}
                 @click=${() => this.selectOption(option)}
                 role="option"
+                label=${LeuSelect.getOptionLabel(option)}
                 ?active=${isSelected}
                 aria-selected=${isSelected}
               >
-                ${LeuSelect.getOptionLabel(option)}
               </leu-menu-item>`;
-    }) : html`<leu-menu-item disabled
-              >${this.optionFilter === "" ? "Keine Optionen" : "Keine Resultate"}</leu-menu-item
-            >`}
+    }) : html`<leu-menu-item
+              label=${this.optionFilter === "" ? "Keine Optionen" : "Keine Resultate"}
+              disabled
+            ></leu-menu-item>`}
       </leu-menu>
     `;
   }
@@ -553,8 +507,8 @@ class LeuSelect extends LitElement {
         @input=${this.handleFilterInput}
         clearable
         ref=${ref(this.optionFilterRef)}
-        >Nach Stichwort filtern</leu-input
-      >`;
+        label="Nach Stichwort filtern"
+      ></leu-input>`;
     }
     return nothing;
   }
@@ -565,9 +519,9 @@ class LeuSelect extends LitElement {
           type="button"
           class="apply-button"
           @click=${this.handleApplyClick}
-          label="Anwenden"
           fluid
-        ></leu-button>
+          >Anwenden</leu-button
+        >
       `;
     }
     return nothing;
@@ -588,11 +542,12 @@ class LeuSelect extends LitElement {
       aria-expanded="${this.open}"
       role="combobox"
       ref=${ref(this.toggleButtonRef)}
+      slot="anchor"
     >
       <span class="label" id="select-label">${this.label}</span>
       <span class="value"> ${this.getDisplayValue(this.value)} </span>
       <span class="arrow-icon"> ${this._arrowIcon} </span>
-      ${this.clearable && this.value !== "" && this.value.length !== 0 ? html`<button
+      ${this.clearable && this.value.length !== 0 ? html`<button
             type="button"
             class="clear-button"
             @click=${this.clearValue}
@@ -616,27 +571,29 @@ class LeuSelect extends LitElement {
       aria-labelledby="select-label"
       @keydown=${this.handleKeyDown}
     >
-      ${this.renderToggleButton()}
-      <dialog
-        id="select-dialog"
-        class="select-menu-container"
-        ?open=${this.open}
+      <leu-popup
+        ?active=${this.open}
+        placement="bottom-start"
+        flip
+        matchSize="width"
+        autoSize="height"
+        autoSizePadding="8"
       >
-        <slot name="before" class="before"></slot>
-        ${this.renderFilterInput()} ${this.renderMenu()}
-        ${this.renderApplyButton()}
-        <slot name="after" class="after"></slot>
-      </dialog>
+        ${this.renderToggleButton()}
+        <dialog
+          id="select-dialog"
+          class="select-menu-container"
+          ?open=${this.open}
+        >
+          <slot name="before" class="before"></slot>
+          ${this.renderFilterInput()} ${this.renderMenu()}
+          ${this.renderApplyButton()}
+          <slot name="after" class="after"></slot>
+        </dialog>
+      </leu-popup>
     </div> `;
   }
 }
 _defineProperty(LeuSelect, "styles", css_248z);
-function defineSelectElements() {
-  defineButtonElements();
-  defineMenuElements();
-  defineMenuItemElements();
-  defineInputElements();
-  defineElement("select", LeuSelect);
-}
 
-export { LeuSelect, defineSelectElements };
+export { LeuSelect };

package/dist/Table.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @tagname leu-table
+ */
+export class LeuTable extends LitElement {
+    /** @type {array} */
+    columns: any[];
+    /** @type {array} */
+    data: any[];
+    /** @type {boolean} */
+    firstColumnSticky: boolean;
+    /** @type {number} */
+    itemsPerPage: number;
+    /** @type {number} */
+    sortIndex: number;
+    /** @type {boolean} */
+    sortOrderAsc: boolean;
+    /** @type {number} */
+    width: number;
+    /** @internal */
+    _sortArrowDown: import("lit-html").TemplateResult<1>;
+    /** @internal */
+    _sortArrowUp: import("lit-html").TemplateResult<1>;
+    /** @internal */
+    _shadowLeft: boolean;
+    /** @internal */
+    _shadowRight: boolean;
+    /** @internal */
+    _scrollRef: import("lit-html/directives/ref.js").Ref<Element>;
+    /** @internal */
+    _page: number;
+    _resizeObserver: ResizeObserver;
+    attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
+    firstUpdated(): void;
+    shadowToggle(target: any): void;
+    scrollEvent(event: any): void;
+    isOnePropNotValid(): "Der Parameter 'columns' ist erforderlich !" | "Der Parameter 'data' ist erforderlich !";
+    isSorted(col: any): boolean;
+    sortClick(col: any): void;
+    sortOrder: string;
+    sortArrowIcon(): import("lit-html").TemplateResult<1>;
+    sortArrow(col: any): import("lit-html").TemplateResult<1>;
+    get _columns(): any[];
+    get _sortedData(): any[];
+    get _data(): any[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+import { LitElement } from 'lit';
+//# sourceMappingURL=Table.d.ts.map

package/dist/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["Table.js"],"names":[],"mappings":"AAsHA;;GAEG;AACH;IAGI,oBAAoB;IACpB,eAAiB;IACjB,oBAAoB;IACpB,YAAc;IACd,sBAAsB;IACtB,mBADW,OAAO,CACY;IAC9B,qBAAqB;IACrB,cADW,MAAM,CACO;IACxB,qBAAqB;IACrB,WADW,MAAM,CACI;IACrB,sBAAsB;IACtB,cADW,OAAO,CACO;IACzB,qBAAqB;IACrB,OADW,MAAM,CACA;IAEjB,gBAAgB;IAChB,qDAA2C;IAC3C,gBAAgB;IAChB,mDAAuC;IACvC,gBAAgB;IAChB,qBAAwB;IACxB,gBAAgB;IAChB,sBAAyB;IACzB,gBAAgB;IAChB,8DAA6B;IAE7B,gBAAgB;IAChB,cAAc;IACd,gCAEE;IAKJ,oEAKC;IACD,qBAGC;IACD,gCAGC;IACD,8BAEC;IACD,8GAQC;IACD,4BAEC;IACD,0BAQC;IAFG,kBAAsB;IAG1B,sDAEC;IACD,0DAEC;IACD,sBAEC;IACD,yBAMC;IACD,mBAEC;IACD,+CA6DC;CACF;2BArR8C,KAAK"}