@statistikzh/leu 0.0.2 → 0.2.0

package/dist/ChipGroup.js

@@ -1,5 +1,5 @@
+import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
 import { css, LitElement, html } from 'lit';
-import { d as defineElement } from './defineElement-47d4f665.js';
 
 var css_248z = css`:host {
   display: flex;
@@ -13,7 +13,7 @@ var css_248z = css`:host {
 const SELECTION_MODES = {
   single: "single",
   multiple: "multiple",
-  none: "none",
+  none: "none"
 };
 
 /**
@@ -21,57 +21,50 @@ const SELECTION_MODES = {
  * @tagname leu-chip-group
  */
 class LeuChipGroup extends LitElement {
-  static styles = css_248z
-
-  static properties = {
-    selectionMode: { type: String, attribute: "selection-mode" },
-  }
-
   constructor() {
     super();
 
     /** @internal */
+    /** @internal */
+    _defineProperty(this, "handleInput", e => {
+      if (this.selectionMode === SELECTION_MODES.single) {
+        this.items.forEach(item => {
+          item.selected = item === e.target; // eslint-disable-line no-param-reassign
+        });
+      }
+    });
+    /** @internal */
+    _defineProperty(this, "handleSlotChange", e => {
+      const slot = e.target;
+      const items = slot.assignedElements({
+        flatten: true
+      });
+      this.items = items;
+    });
     this.items = [];
   }
-
   connectedCallback() {
     super.connectedCallback();
-
     this.addEventListener("input", this.handleInput);
   }
-
   disconnectedCallback() {
     super.disconnectedCallback();
-
     this.removeEventListener("input", this.handleInput);
   }
-
   get value() {
-    return this.items.filter((i) => i.selected).map((i) => i.value)
-  }
-
-  /** @internal */
-  handleInput = (e) => {
-    if (this.selectionMode === SELECTION_MODES.single) {
-      this.items.forEach((item) => {
-        item.selected = item === e.target; // eslint-disable-line no-param-reassign
-      });
-    }
-  }
-
-  /** @internal */
-  handleSlotChange = (e) => {
-    const slot = e.target;
-    const items = slot.assignedElements({ flatten: true });
-
-    this.items = items;
+    return this.items.filter(i => i.selected).map(i => i.value);
   }
-
   render() {
-    return html`<slot @slotchange=${this.handleSlotChange}></slot>`
+    return html`<slot @slotchange=${this.handleSlotChange}></slot>`;
   }
 }
-
+_defineProperty(LeuChipGroup, "styles", css_248z);
+_defineProperty(LeuChipGroup, "properties", {
+  selectionMode: {
+    type: String,
+    attribute: "selection-mode"
+  }
+});
 function defineChipGroupElements() {
   defineElement("chip-group", LeuChipGroup);
 }

package/dist/ChipLink.js

@@ -1,10 +1,10 @@
+import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
 import { html } from 'lit';
-import { d as defineElement } from './defineElement-47d4f665.js';
-import { L as LeuChipBase } from './Chip-60af1402.js';
+import { L as LeuChipBase } from './Chip-389013ff.js';
 
 const SIZES = {
   regular: "regular",
-  large: "large",
+  large: "large"
 };
 
 /**
@@ -12,33 +12,32 @@ const SIZES = {
  * @tagname leu-chip-link
  */
 class LeuChipLink extends LeuChipBase {
-  static properties = {
-    ...LeuChipBase.properties,
-
-    /**
-     * The size of the chip
-     * @type {keyof typeof SIZES}
-     */
-    size: { type: String },
-
-    href: { type: String, reflect: true },
-  }
-
   constructor() {
     super();
-
     this.inverted = false;
     this.size = SIZES.regular;
     this.href = "";
   }
-
   render() {
     return html`<a href=${this.href} class="button">
       <span class="label"><slot></slot></span>
-    </a>`
+    </a>`;
   }
 }
-
+_defineProperty(LeuChipLink, "properties", {
+  ...LeuChipBase.properties,
+  /**
+   * The size of the chip
+   * @type {keyof typeof SIZES}
+   */
+  size: {
+    type: String
+  },
+  href: {
+    type: String,
+    reflect: true
+  }
+});
 function defineChipLinkElements() {
   defineElement("chip-link", LeuChipLink);
 }

package/dist/ChipRemovable.js

@@ -1,7 +1,7 @@
+import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
 import { html } from 'lit';
-import { d as defineElement } from './defineElement-47d4f665.js';
-import { L as LeuChipBase } from './Chip-60af1402.js';
-import { I as Icon } from './icon-b68c7e1e.js';
+import { L as LeuChipBase } from './Chip-389013ff.js';
+import { I as Icon } from './icon-03e86700.js';
 
 /**
  * @slot - The content of the chip
@@ -9,33 +9,29 @@ import { I as Icon } from './icon-b68c7e1e.js';
  * @fires remove - Dispatched when the user clicks on the chip
  */
 class LeuChipRemovable extends LeuChipBase {
-  static properties = {
-    ...LeuChipBase.properties,
-  }
-
   constructor() {
     super();
 
     /** @internal */
     this._removeIcon = Icon("close", 16);
   }
-
   handleClick() {
     const customEvent = new CustomEvent("remove", {
       bubble: true,
-      composed: true,
+      composed: true
     });
     this.dispatchEvent(customEvent);
   }
-
   render() {
-    return html`<button @click=${(e) => this.handleClick(e)} class="button">
+    return html`<button @click=${e => this.handleClick(e)} class="button">
       <span class="label"><slot></slot></span>
       <div class="icon">${this._removeIcon}</div>
-    </button>`
+    </button>`;
   }
 }
-
+_defineProperty(LeuChipRemovable, "properties", {
+  ...LeuChipBase.properties
+});
 function defineChipRemovableElements() {
   defineElement("chip-removable", LeuChipRemovable);
 }

package/dist/ChipSelectable.js

@@ -1,15 +1,14 @@
+import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
 import { html } from 'lit';
-import { d as defineElement } from './defineElement-47d4f665.js';
-import { L as LeuChipBase } from './Chip-60af1402.js';
+import { L as LeuChipBase } from './Chip-389013ff.js';
 
 const SIZES = {
   small: "small",
-  regular: "regular",
+  regular: "regular"
 };
-
 const VARIANTS = {
   default: "default",
-  radio: "radio",
+  radio: "radio"
 };
 
 /**
@@ -18,73 +17,72 @@ const VARIANTS = {
  * @tagname leu-chip-selectable
  */
 class LeuChipSelectable extends LeuChipBase {
-  static properties = {
-    ...LeuChipBase.properties,
-
-    /**
-     * The size of the chip. Not supported for radio variant.
-     * @type {keyof typeof SIZES}
-     * @default "regular"
-     */
-    size: { type: String },
-
-    /**
-     * 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.
-     * - `radio`: The chip behaves like a radio button.
-     *
-     * @type {keyof typeof VARIANTS}
-     * @default "default"
-     */
-    variant: { type: String },
-
-    selected: { type: Boolean, reflect: true },
-    value: { type: String },
-  }
-
   constructor() {
     super();
     this.size = SIZES.regular;
     this.variant = VARIANTS.toggle;
     this.selected = false;
-
     if (this.variant === VARIANTS.radio && this.size === SIZES.small) {
       console.warn("Small size has no effect on radio variant");
     }
   }
-
   handleClick() {
     let nextSelectedState = this.selected;
-
     if (this.variant === VARIANTS.radio) {
       nextSelectedState = true;
     } else {
       nextSelectedState = !this.selected;
     }
-
     if (nextSelectedState !== this.selected) {
       this.selected = nextSelectedState;
-      this.dispatchEvent(
-        new CustomEvent("input", {
-          detail: { selected: this.selected },
-          bubbles: true,
-          composed: true,
-        })
-      );
+      this.dispatchEvent(new CustomEvent("input", {
+        detail: {
+          selected: this.selected
+        },
+        bubbles: true,
+        composed: true
+      }));
     }
   }
-
   render() {
     return html`<button
-      @click=${(e) => this.handleClick(e)}
+      @click=${e => this.handleClick(e)}
       class="button"
       aria-selected=${this.selected ? "true" : "false"}
     >
       <span class="label"><slot></slot></span>
-    </button>`
+    </button>`;
   }
 }
-
+_defineProperty(LeuChipSelectable, "properties", {
+  ...LeuChipBase.properties,
+  /**
+   * The size of the chip. Not supported for radio variant.
+   * @type {keyof typeof SIZES}
+   * @default "regular"
+   */
+  size: {
+    type: String
+  },
+  /**
+   * 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.
+   * - `radio`: The chip behaves like a radio button.
+   *
+   * @type {keyof typeof VARIANTS}
+   * @default "default"
+   */
+  variant: {
+    type: String
+  },
+  selected: {
+    type: Boolean,
+    reflect: true
+  },
+  value: {
+    type: String
+  }
+});
 function defineChipSelectableElements() {
   defineElement("chip-selectable", LeuChipSelectable);
 }

package/dist/Dropdown.js

@@ -0,0 +1,75 @@
+import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { css, LitElement, html } from 'lit';
+import { defineButtonElements } from './Button.js';
+import { defineMenuElements } from './Menu.js';
+import { defineMenuItemElements } from './MenuItem.js';
+import 'lit/directives/class-map.js';
+import './icon-03e86700.js';
+
+var css_248z = css`:host,
+:host * {
+  box-sizing: border-box;
+}
+
+:host {
+  position: relative;
+}
+
+.content {
+  overflow: hidden;
+  box-shadow: var(--leu-box-shadow-short);
+  border-radius: 2px;
+
+  position: absolute;
+  top: calc(100% + 0.5rem);
+}
+`;
+
+/**
+ * @tagname leu-dropdown
+ */
+class LeuDropdown extends LitElement {
+  constructor() {
+    super();
+    this.label = "";
+    this.expanded = false;
+  }
+  handleClick() {
+    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"
+        ?active=${this.expanded}
+        @click=${this.handleClick}
+      ></leu-button>
+      <div id="content" class="content" ?hidden=${!this.expanded}>
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+_defineProperty(LeuDropdown, "styles", css_248z);
+_defineProperty(LeuDropdown, "properties", {
+  label: {
+    type: String
+  },
+  expanded: {
+    type: Boolean,
+    reflect: true
+  }
+});
+function defineDropdownElements() {
+  defineElement("dropdown", LeuDropdown);
+  defineButtonElements();
+  defineMenuElements();
+  defineMenuItemElements();
+}
+
+export { LeuDropdown, defineDropdownElements };