@statistikzh/leu 0.0.2 → 0.1.0

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 };

package/dist/Input.js

@@ -1,9 +1,9 @@
+import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.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 { createRef, ref } from 'lit/directives/ref.js';
-import { I as Icon } from './icon-b68c7e1e.js';
-import { d as defineElement } from './defineElement-47d4f665.js';
+import { I as Icon } from './icon-03e86700.js';
 
 var css_248z = css`:host,
 :host * {
@@ -273,7 +273,7 @@ var css_248z = css`:host,
 
 const SIZE_TYPES = {
   SMALL: "small",
-  REGULAR: "regular",
+  REGULAR: "regular"
 };
 
 /**
@@ -286,15 +286,13 @@ const SIZE_TYPES = {
 const VALIDATION_MESSAGES = {
   badInput: "Bitte überprüfen Sie das Format.",
   patternMismatch: "Bitte überprüfen Sie das Format.",
-  rangeOverflow: (max) => `Der Wert darf nicht grösser als ${max} sein.`,
-  rangeUnderflow: (min) => `Der Wert darf nicht kleiner als ${min} sein.`,
+  rangeOverflow: max => `Der Wert darf nicht grösser als ${max} sein.`,
+  rangeUnderflow: min => `Der Wert darf nicht kleiner als ${min} sein.`,
   stepMismatch: "Bitte überprüfen Sie das Format.",
-  tooLong: (maxlength) =>
-    `Die Eingabe muss kürzer als ${maxlength} Zeichen sein.`,
-  tooShort: (minlength) =>
-    `Die Eingabe muss länger als ${minlength} Zeichen sein.`,
+  tooLong: maxlength => `Die Eingabe muss kürzer als ${maxlength} Zeichen sein.`,
+  tooShort: minlength => `Die Eingabe muss länger als ${minlength} Zeichen sein.`,
   typeMismatch: "Bitte überprüfen Sie das Format.",
-  valueMissing: "Bitte füllen Sie das Feld aus.",
+  valueMissing: "Bitte füllen Sie das Feld aus."
 };
 
 /**
@@ -326,65 +324,27 @@ const VALIDATION_MESSAGES = {
  * @tagname leu-input
  */
 class LeuInput extends LitElement {
-  static styles = css_248z
-
-  static properties = {
-    disabled: { type: Boolean, reflect: true },
-    required: { type: Boolean, reflect: true },
-    clearable: { type: Boolean, reflect: true },
-
-    value: { type: String },
-    name: { type: String },
-    error: { type: String },
-
-    label: { type: String },
-    prefix: { type: String },
-    suffix: { type: String },
-    size: { type: String },
-    icon: { type: String },
-
-    /* Validation attributes */
-    pattern: { type: String },
-    type: { type: String },
-    min: { type: Number },
-    max: { type: Number },
-    maxlength: { type: Number },
-    minlength: { type: Number },
-    validationMessages: { type: Object },
-    novalidate: { type: Boolean },
-
-    /** @type {ValidityState} */
-    _validity: { state: true },
-  }
-
   static resolveErrorMessage(message, refernceValue) {
     if (typeof message === "function") {
-      return message(refernceValue)
+      return message(refernceValue);
     }
-
-    return message
+    return message;
   }
-
   constructor() {
     super();
-
     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 = {};
@@ -429,7 +389,6 @@ class LeuInput extends LitElement {
    */
   handleBlur(event) {
     this._validity = null;
-
     if (!this.novalidate) {
       event.target.checkValidity();
     }
@@ -457,7 +416,6 @@ class LeuInput extends LitElement {
    */
   handleChange(event) {
     this.value = event.target.value;
-
     const customEvent = new CustomEvent(event.type, event);
     this.dispatchEvent(customEvent);
   }
@@ -485,13 +443,14 @@ class LeuInput extends LitElement {
    */
   clear() {
     this.value = "";
-
-    this.dispatchEvent(
-      new CustomEvent("input", { bubbles: true, composed: true })
-    );
-    this.dispatchEvent(
-      new CustomEvent("change", { bubbles: true, composed: true })
-    );
+    this.dispatchEvent(new CustomEvent("input", {
+      bubbles: true,
+      composed: true
+    }));
+    this.dispatchEvent(new CustomEvent("change", {
+      bubbles: true,
+      composed: true
+    }));
   }
 
   /**
@@ -504,17 +463,14 @@ class LeuInput extends LitElement {
    */
   getId() {
     const id = this.getAttribute("id");
-
     if (id !== null && id !== "") {
-      return id
+      return id;
     }
-
     if (this._identifier !== "") {
-      return this._identifier
+      return this._identifier;
     }
-
     this._identifier = crypto.randomUUID();
-    return this._identifier
+    return this._identifier;
   }
 
   /**
@@ -531,30 +487,19 @@ class LeuInput extends LitElement {
   getValidationMessages() {
     const validationMessages = {
       ...VALIDATION_MESSAGES,
-      ...this.validationMessages,
+      ...this.validationMessages
     };
-
-    const { tooLong, tooShort, rangeOverflow, rangeUnderflow } =
-      validationMessages;
-
-    validationMessages.tooLong = LeuInput.resolveErrorMessage(
+    const {
       tooLong,
-      this.maxlength
-    );
-    validationMessages.tooShort = LeuInput.resolveErrorMessage(
       tooShort,
-      this.minlength
-    );
-    validationMessages.rangeOverflow = LeuInput.resolveErrorMessage(
       rangeOverflow,
-      this.max
-    );
-    validationMessages.rangeUnderflow = LeuInput.resolveErrorMessage(
-      rangeUnderflow,
-      this.min
-    );
-
-    return validationMessages
+      rangeUnderflow
+    } = validationMessages;
+    validationMessages.tooLong = LeuInput.resolveErrorMessage(tooLong, this.maxlength);
+    validationMessages.tooShort = LeuInput.resolveErrorMessage(tooShort, this.minlength);
+    validationMessages.rangeOverflow = LeuInput.resolveErrorMessage(rangeOverflow, this.max);
+    validationMessages.rangeUnderflow = LeuInput.resolveErrorMessage(rangeUnderflow, this.min);
+    return validationMessages;
   }
 
   /**
@@ -566,27 +511,18 @@ class LeuInput extends LitElement {
    */
   renderErrorMessages() {
     if (!this.isInvalid()) {
-      return nothing
+      return nothing;
     }
-
     const validationMessages = this.getValidationMessages();
-    let errorMessages = this._validity
-      ? Object.entries(validationMessages)
-          .filter(([property]) => this._validity[property])
-          .map(([_, message]) => message)
-      : [];
-
+    let errorMessages = this._validity ? Object.entries(validationMessages).filter(([property]) => this._validity[property]).map(([_, message]) => message) : [];
     if (this.error !== "") {
       errorMessages = [this.error, errorMessages];
     }
-
     return html`
       <ul class="error" aria-errormessage=${`input-${this.getId()}`}>
-        ${errorMessages.map(
-          (message) => html`<li class="error-message">${message}</li>`
-        )}
+        ${errorMessages.map(message => html`<li class="error-message">${message}</li>`)}
       </ul>
-    `
+    `;
   }
 
   /**
@@ -598,9 +534,8 @@ class LeuInput extends LitElement {
    */
   renderAfterContent() {
     if (this.isInvalid()) {
-      return html`<div class="error-icon">${Icon("caution")}</div>`
+      return html`<div class="error-icon">${Icon("caution")}</div>`;
     }
-
     if (this.clearable && this.value !== "") {
       return html`<button
         class="clear-button"
@@ -609,33 +544,25 @@ class LeuInput extends LitElement {
         ?disabled=${this.disabled}
       >
         ${this._clearIcon}
-      </button>`
+      </button>`;
     }
-
     if (this.icon !== "") {
-      return html`<div class="icon">${Icon(this.icon)}</div>`
+      return html`<div class="icon">${Icon(this.icon)}</div>`;
     }
-
-    return nothing
+    return nothing;
   }
-
   isInvalid() {
     if (this.error !== "") {
-      return true
+      return true;
     }
-
-    return this._validity === null || this.novalidate
-      ? false
-      : !this._validity.valid
+    return this._validity === null || this.novalidate ? false : !this._validity.valid;
   }
-
   render() {
     const isInvalid = this.isInvalid();
-
     const inputWrapperClasses = {
       "input-wrapper": true,
       "input-wrapper--empty": this.value === "",
-      "input-wrapper--invalid": isInvalid,
+      "input-wrapper--invalid": isInvalid
     };
 
     /* See the description of the handleWrapperClick method on why this rule is disabled */
@@ -666,19 +593,82 @@ class LeuInput extends LitElement {
           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}
+        ${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()}
-    `
+    `;
   }
 }
-
+_defineProperty(LeuInput, "styles", css_248z);
+_defineProperty(LeuInput, "properties", {
+  disabled: {
+    type: Boolean,
+    reflect: true
+  },
+  required: {
+    type: Boolean,
+    reflect: true
+  },
+  clearable: {
+    type: Boolean,
+    reflect: true
+  },
+  value: {
+    type: String
+  },
+  name: {
+    type: String
+  },
+  error: {
+    type: String
+  },
+  label: {
+    type: String
+  },
+  prefix: {
+    type: String
+  },
+  suffix: {
+    type: String
+  },
+  size: {
+    type: String
+  },
+  icon: {
+    type: String
+  },
+  /* Validation attributes */
+  pattern: {
+    type: String
+  },
+  type: {
+    type: String
+  },
+  min: {
+    type: Number
+  },
+  max: {
+    type: Number
+  },
+  maxlength: {
+    type: Number
+  },
+  minlength: {
+    type: Number
+  },
+  validationMessages: {
+    type: Object
+  },
+  novalidate: {
+    type: Boolean
+  },
+  /** @type {ValidityState} */
+  _validity: {
+    state: true
+  }
+});
 function defineInputElements() {
   defineElement("input", LeuInput);
 }