@statistikzh/leu 0.0.2 → 0.2.0

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,15 @@ 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._inputRef.value.focus();
+    this.dispatchEvent(new CustomEvent("input", {
+      bubbles: true,
+      composed: true
+    }));
+    this.dispatchEvent(new CustomEvent("change", {
+      bubbles: true,
+      composed: true
+    }));
   }
 
   /**
@@ -504,17 +464,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 +488,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 +512,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 +535,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 +545,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 +594,89 @@ 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);
+/**
+ * @internal
+ */
+_defineProperty(LeuInput, "shadowRootOptions", {
+  ...LitElement.shadowRootOptions,
+  delegatesFocus: true
+});
+_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);
 }

package/dist/Menu.js

@@ -0,0 +1,40 @@
+import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { css, LitElement, html } from 'lit';
+
+var css_248z = css`:host,
+:host * {
+  box-sizing: border-box;
+}
+
+:host {
+  --menu-divider-color: var(--leu-color-black-transp-20);
+}
+
+/*
+ * Set styles with important as the hr element is part of the
+ * light dom and therefore is affected by the global styles.
+ */
+
+:host ::slotted(hr) {
+  border: 0 !important;
+  border-top: 1px solid var(--menu-divider-color) !important;
+  margin: 0.5rem 0 !important;
+  padding: 0 !important;
+  background: none !important;
+}
+`;
+
+/**
+ * @tagname leu-menu
+ */
+class LeuMenu extends LitElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+_defineProperty(LeuMenu, "styles", css_248z);
+function defineMenuElements() {
+  defineElement("menu", LeuMenu);
+}
+
+export { LeuMenu, defineMenuElements };

package/dist/MenuItem.js

@@ -0,0 +1,171 @@
+import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { css, LitElement, html, nothing } from 'lit';
+import { a as ICON_NAMES, I as Icon } from './icon-03e86700.js';
+
+var css_248z = css`:host,
+:host * {
+  box-sizing: border-box;
+}
+
+:host {
+  --background: var(--leu-color-black-0);
+  --background-hover: var(--leu-color-black-10);
+  --background-active: var(--leu-color-func-cyan);
+  --background-disabled: var(--leu-color-black-0);
+  --color: var(--leu-color-black-transp-60);
+  --font-regular: var(--leu-font-regular);
+  --font-black: var(--leu-font-black);
+
+  font-family: var(--chip-font-regular);
+}
+
+.button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: none;
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+
+  padding: 0.75rem;
+
+  font-size: 1rem;
+  line-height: 1.5;
+  text-align: left;
+
+  background: var(--background);
+  color: var(--color);
+}
+
+.button:focus-visible {
+  outline: 2px solid var(--leu-color-func-cyan);
+  outline-offset: 2px;
+}
+
+.button:hover,
+:host([highlighted]) .button {
+  --background: var(--background-hover);
+}
+
+:host([active]) .button {
+  --background: var(--background-active);
+}
+
+:host([disabled]) .button {
+  --background: var(--background-disabled);
+  cursor: default;
+}
+
+.before svg, .after svg {
+  display: block;
+}
+
+.label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.icon-placeholder {
+  display: block;
+  width: 1.5rem;
+  aspect-ratio: 1;
+}
+`;
+
+/**
+ * @tagname leu-menu-item
+ * @slot - The label of the menu item
+ */
+class LeuMenuItem extends LitElement {
+  constructor() {
+    super();
+    this.active = false;
+    this.disabled = false;
+    this.before = "";
+    this.after = "";
+
+    /**
+     * 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.
+     */
+    this.highlighted = false;
+  }
+  static getIconOrText(name) {
+    if (ICON_NAMES.includes(name)) {
+      return Icon(name);
+    }
+    if (name === "EMPTY") {
+      return html`<div class="icon-placeholder"></div>`;
+    }
+    return name;
+  }
+  renderBefore() {
+    if (this.before !== "") {
+      const content = LeuMenuItem.getIconOrText(this.before);
+      return html`<span class="before">${content}</span>`;
+    }
+    return nothing;
+  }
+  renderAfter() {
+    if (this.after !== "") {
+      const content = LeuMenuItem.getIconOrText(this.after);
+      return html`<span class="after">${content}</span>`;
+    }
+    return nothing;
+  }
+  render() {
+    return html`<button class="button" ?disabled=${this.disabled}>
+      ${this.renderBefore()}<span class="label"><slot></slot></span
+      >${this.renderAfter()}
+    </button>`;
+  }
+}
+_defineProperty(LeuMenuItem, "styles", css_248z);
+/**
+ * @internal
+ */
+_defineProperty(LeuMenuItem, "shadowRootOptions", {
+  ...LitElement.shadowRootOptions,
+  delegatesFocus: true
+});
+_defineProperty(LeuMenuItem, "properties", {
+  /**
+   * Can be either an icon name or a text
+   * If no icon with this value is found, it will be displayed as text.
+   * If the value is "EMPTY", an empty placeholder with the size of an icon will be displayed.
+   */
+  before: {
+    type: String
+  },
+  /**
+   * Can be either an icon name or a text
+   * If no icon with this value is found, it will be displayed as text
+   * If the value is "EMPTY", an empty placeholder with the size of an icon will be displayed.
+   */
+  after: {
+    type: String
+  },
+  active: {
+    type: Boolean,
+    reflect: true
+  },
+  highlighted: {
+    type: Boolean,
+    reflect: true
+  },
+  disabled: {
+    type: Boolean,
+    reflect: true
+  }
+});
+function defineMenuItemElements() {
+  defineElement("menu-item", LeuMenuItem);
+}
+
+export { LeuMenuItem, defineMenuItemElements };