@statistikzh/leu 0.24.2 → 0.25.0

package/dist/Input.js

@@ -1,627 +1,5 @@
-import { _ as __decorate } from './_tslib-CNEFicEt.js';
-import { css, nothing, html } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { live } from 'lit/directives/live.js';
-import { createRef, ref } from 'lit/directives/ref.js';
-import { property, state } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-BfXSO7MN.js';
-import { LeuIcon } from './Icon.js';
-
-var css_248z = css`:host {
-  --input-color: var(--leu-color-black-100);
-  --input-color-disabled: var(--leu-color-black-20);
-  --input-color-invalid: var(--leu-color-func-red);
-  --input-color-focus: var(--leu-color-func-cyan);
-  --input-border-width: 2px;
-
-  --input-label-color: var(--leu-color-black-100);
-  --input-label-color-disabled: var(--input-color-disabled);
-  --input-label-color-empty: var(--leu-color-black-60);
-
-  --input-affix-color: var(--leu-color-black-60);
-  --input-affix-color-disabled: var(--input-color-disabled);
-
-  --input-border-color: var(--leu-color-black-40);
-  --input-border-color-focus: var(--input-color-focus);
-  --input-border-color-disabled: var(--leu-color-black-20);
-  --input-border-color-invalid: var(--input-color-invalid);
-
-  --input-error-color: var(--leu-color-black-0);
-
-  --input-clear-color: var(--leu-color-black-60);
-
-  --input-font-regular: var(--leu-font-family-regular);
-  --input-font-black: var(--leu-font-family-black);
-
-  --input-height: 4.5rem;
-  --input-height-small: 3rem;
-
-  display: block;
-  font-family: var(--input-font-regular);
-}
-
-:host([disabled]) {
-  --input-color: var(--input-color-disabled);
-  --input-border-color: var(--input-border-color-disabled);
-  --input-label-color: var(--input-color-disabled);
-  --input-color-focus: var(--input-color-disabled);
-  --input-affix-color: var(--input-color-disabled);
-}
-
-:host(:focus-within) {
-  outline: 2px solid var(--input-color-focus);
-  outline-offset: 2px;
-}
-
-.input-wrapper {
-  position: relative;
-  display: flex;
-  gap: 0.5rem;
-  padding-left: 0.875rem;
-  padding-right: 0.875rem;
-
-  border: var(--input-border-width) solid var(--input-border-color);
-  border-radius: 2px;
-  background: var(--leu-color-black-0);
-
-  line-height: 1;
-}
-
-.input-wrapper:focus-within,
-.input-wrapper:hover {
-  --input-border-color: var(--input-border-color-focus);
-}
-
-.input-wrapper--invalid:focus-within {
-  --input-border-color: var(--input-border-color-invalid);
-  border-radius: 2px 2px 0 0;
-}
-
-.input-wrapper--invalid,
-.input-wrapper--invalid:hover {
-  --input-border-color: var(--input-border-color-invalid);
-  border-radius: 2px 2px 0 0;
-}
-
-.input {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  display: block;
-  width: 100%;
-
-  font-size: 1rem;
-  line-height: 1;
-  color: var(--input-color);
-
-  border: 0;
-  background: var(--leu-color-black-0);
-
-  padding-top: 2rem;
-
-  padding-bottom: 1rem;
-  height: calc(var(--input-height) - var(--input-border-width) * 2);
-}
-
-.input:focus-visible {
-  outline: none;
-}
-
-:host([size="small"]) .input {
-  --input-height: var(--input-height-small);
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-}
-
-.prefix,
-.suffix {
-  padding-top: calc(2rem - var(--input-border-width));
-  padding-bottom: calc(1rem - var(--input-border-width));
-  font-size: 1rem;
-  line-height: 1.5;
-  color: var(--input-affix-color);
-  pointer-events: none;
-}
-
-.prefix {
-  order: -1;
-}
-
-/* Label styles for when the input has focus OR contains a value */
-
-.label {
-  position: absolute;
-  left: 1rem;
-
-  line-height: 1.5;
-  color: var(--input-label-color);
-}
-
-/* is size regular AND (has focus OR contains a value) */
-
-.input-wrapper--invalid .label,
-:host(:not([size])) .label,
-:host([size="regular"]) .label {
-  top: calc(0.75rem - var(--input-border-width));
-
-  font-size: 0.75rem;
-  font-family: var(--input-font-black);
-
-  transition: 0.15s ease-out;
-  transition-property: font-size, top;
-}
-
-/* is size small AND (has focus OR contains a value) */
-
-:host([size="small"]) .label {
-  opacity: 0;
-  visibility: hidden;
-
-  font-size: 1rem;
-}
-
-:host([required]) .label::after {
-  content: "*";
-}
-
-/* is not disabled AND has focus AND is empty */
-
-:host(:not([disabled]):not(:focus-within)) .input-wrapper--empty .label {
-  --input-label-color: var(--input-label-color-empty);
-}
-
-/* is empty AND has no focus */
-
-:host(:not(:focus-within))
-  .input-wrapper--empty:not(.input-wrapper--invalid)
-  .label {
-  font-family: var(--input-font-regular);
-  font-size: 1rem;
-  top: calc(1.5rem - var(--input-border-width));
-}
-
-/* is size small AND has no focus AND is empty */
-
-:host(:not(:focus-within)[size="small"])
-  .input-wrapper--empty:not(.input-wrapper--invalid)
-  .label {
-  top: calc(0.75rem - var(--input-border-width));
-  opacity: 1;
-  visibility: visible;
-}
-
-/* The label has to behave a bit different when the input has a suffix or a prefix */
-
-:host([suffix])
-  .input-wrapper--empty
-  .input:not(:focus)
-  + .label {
-  top: calc(0.75rem - var(--input-border-width));
-
-  font-family: var(--input-font-black);
-  font-size: 0.75rem;
-}
-
-:host([prefix])
-  .input-wrapper--empty
-  .input:not(:focus)
-  + .label {
-  top: calc(0.75rem - var(--input-border-width));
-
-  font-family: var(--input-font-black);
-  font-size: 0.75rem;
-}
-
-.error {
-  list-style: none;
-  padding: 0.0625rem 1rem 0.1875rem;
-  margin: 0;
-
-  color: var(--input-error-color);
-  font-size: 0.75rem;
-  line-height: 1.5;
-
-  border: 2px solid var(--input-color-invalid);
-  border-radius: 0 0 2px 2px;
-
-  background-color: var(--input-color-invalid);
-}
-
-.clear-button {
-  --_length: 1.5rem;
-
-  align-self: center;
-
-  width: 1.5rem;
-
-  width: var(--_length);
-  height: 1.5rem;
-  height: var(--_length);
-  padding: 0;
-
-  cursor: pointer;
-
-  background: none;
-  color: var(--input-clear-color);
-  border: none;
-
-  /* border-radius is only defined for a nice focus outline */
-  border-radius: 2px;
-}
-
-.clear-button:focus-visible {
-  outline: 2px solid var(--input-color-focus);
-  outline-offset: 2px;
-}
-
-.clear-button:disabled {
-  cursor: default;
-  color: var(--input-color-disabled);
-}
-
-.icon {
-  align-self: center;
-  color: var(--input-color);
-}
-
-:host(:not([disabled]):not(:focus-within)) .input-wrapper--empty .icon {
-  color: var(--input-label-color-empty);
-}
-
-.error-icon {
-  align-self: center;
-  color: var(--input-color-invalid);
-}
-
-.icon leu-icon, .error-icon leu-icon {
-  display: block;
-}
-`;
-
-const SIZES = Object.freeze({
-    SMALL: "small",
-    REGULAR: "regular",
-});
-/**
- * TODO:
- * - Add section to docs about how to mark up suffix and prefix for screenreaders
- * - Handle validation
- * - Infotext attribute or slot?
- */
-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.`,
-    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.`,
-    typeMismatch: "Bitte überprüfen Sie das Format.",
-    valueMissing: "Bitte füllen Sie das Feld aus.",
-};
-/**
- * A text input element.
- *
- * @fires {CustomEvent} input - Dispatched when the value of the input element changes.
- * @fires {CustomEvent} change - Dispatched when the value of the input element changes and the input element loses focus.
- *
- * @tagname leu-input
- */
-class LeuInput extends LeuElement {
-    constructor() {
-        super(...arguments);
-        /** Disables the input element. */
-        this.disabled = false;
-        /** Marks the input element as required */
-        this.required = false;
-        /** Adds a button to clear the input element */
-        this.clearable = false;
-        /** The value of the input element. */
-        this.value = "";
-        /** The name of the input element. */
-        this.name = "";
-        /** A custom error that is completely independent of the validity state. Useful for displaying server side errors. */
-        this.error = "";
-        /** The label of the input element */
-        this.label = "";
-        /** The size of the input element */
-        this.size = "regular";
-        /** The type of the input element. */
-        this.type = "text";
-        /** Custom validation messages. The key is the name of the validity state and the value is the message. */
-        this.validationMessages = {};
-        /** Disables the browser's validation. */
-        this.novalidate = false;
-        this._validity = null;
-        this._inputRef = createRef();
-    }
-    static resolveErrorMessage(message, refernceValue) {
-        if (typeof message === "function") {
-            return message(refernceValue);
-        }
-        return message;
-    }
-    get valueAsNumber() {
-        if (this.value === "") {
-            return NaN;
-        }
-        return Number(this.value);
-    }
-    /**
-     * Method for handling the click event of the wrapper element.
-     * Redirect every click on the wrapper to the input element.
-     * This is only necessary for click events because the wrapper element
-     * looks like the input element. But the actual input field does not
-     * completely fill the wrapper element. Keyboard events don't need to be
-     * handled because the actual input element is focusable.
-     */
-    handleWrapperClick(event) {
-        if (event.target === event.currentTarget) {
-            this._inputRef.value.focus();
-        }
-    }
-    /**
-     * Method for handling the blur event of the input element.
-     * Checks validity of the input element and sets the validity state.
-     */
-    handleBlur(event) {
-        this._validity = null;
-        if (!this.novalidate) {
-            event.target.checkValidity();
-        }
-    }
-    /**
-     * Method for handling the invalid event of the input element.
-     * Sets the validity state.
-     */
-    handleInvalid(event) {
-        this._validity = event.target.validity;
-    }
-    /**
-     * Method for handling the change event of the input element.
-     * Sets the value property and dispatches a change event so that
-     * the event can be handled outside the shadow DOM.
-     * @fires {CustomEvent} change
-     */
-    handleChange(event) {
-        if (event.target.validity.valid) {
-            this.value = event.target.value;
-        }
-        const customEvent = new CustomEvent(event.type, event);
-        this.dispatchEvent(customEvent);
-    }
-    /**
-     * Method for handling the input event of the input element.
-     * Sets the value property and dispatches an input event so that
-     * the event can be handled outside the shadow DOM.
-     */
-    handleInput(event) {
-        this.value = event.target.value;
-        const customEvent = new CustomEvent("input", {
-            bubbles: true,
-            composed: true,
-        });
-        this.dispatchEvent(customEvent);
-    }
-    /**
-     * Method for clearing the input element.
-     * Sets the value property to an empty string and dispatches
-     * an input and a change event.
-     * @fires {CustomEvent} input
-     * @fires {CustomEvent} change
-     */
-    clear() {
-        this.value = "";
-        this._inputRef.value.focus();
-        this.dispatchEvent(new CustomEvent("input", { bubbles: true, composed: true }));
-        this.dispatchEvent(new CustomEvent("change", { bubbles: true, composed: true }));
-    }
-    /**
-     * Merge custom and default validation messages.
-     * A validation message can be a function or a string.
-     * If it s a function, the function is called with the corresponding
-     * attribute value as argument.
-     * e.g.
-     * `tooLong(this.maxlength)`
-     * This way the framework user can create reasonable validation messages
-     */
-    getValidationMessages() {
-        const validationMessages = {
-            ...VALIDATION_MESSAGES,
-            ...this.validationMessages,
-        };
-        const { tooLong, tooShort, rangeOverflow, 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;
-    }
-    isInvalid() {
-        if (this.error) {
-            return true;
-        }
-        return this._validity === null || this.novalidate
-            ? false
-            : !this._validity.valid;
-    }
-    /**
-     * Check input validation
-     */
-    checkValidity() {
-        return this._inputRef.value?.checkValidity() ?? false;
-    }
-    /**
-     * Creates an error list with an item for the given validity state.
-     */
-    renderErrorMessages() {
-        if (!this.isInvalid()) {
-            return nothing;
-        }
-        const validationMessages = this.getValidationMessages();
-        let errorMessages = this._validity
-            ? Object.entries(validationMessages)
-                .filter(([prop]) => this._validity[prop])
-                .map(([_, message]) => message)
-            : [];
-        if (this.error !== "") {
-            errorMessages = [this.error, errorMessages];
-        }
-        return html `
-      <ul class="error" aria-errormessage="input">
-        ${errorMessages.map((message) => html `<li class="error-message">${message}</li>`)}
-      </ul>
-    `;
-    }
-    /**
-     * Determines the content that is displayed after the input element.
-     * This can be either an icon, a clear button or an error indicator icon.
-     */
-    renderAfterContent() {
-        if (this.isInvalid()) {
-            return html `<div class="error-icon">
-        <leu-icon name="caution"></leu-icon>
-      </div>`;
-        }
-        if (this.clearable && this.value) {
-            return html `<button
-        class="clear-button"
-        @click=${this.clear}
-        aria-label="Eingabefeld zurücksetzen"
-        ?disabled=${this.disabled}
-      >
-        <leu-icon name="clear"></leu-icon>
-      </button>`;
-        }
-        if (this.icon) {
-            return html `<div class="icon">
-        <leu-icon name=${this.icon}></leu-icon>
-      </div>`;
-        }
-        return nothing;
-    }
-    render() {
-        const isInvalid = this.isInvalid();
-        const inputWrapperClasses = {
-            "input-wrapper": true,
-            "input-wrapper--empty": !this.value,
-            "input-wrapper--invalid": isInvalid,
-        };
-        /* See the description of the handleWrapperClick method on why this rule is disabled */
-        /* eslint-disable lit-a11y/click-events-have-key-events */
-        return html `
-      <div
-        @click=${this.handleWrapperClick}
-        class=${classMap(inputWrapperClasses)}
-      >
-        <input
-          class="input"
-          id="input"
-          type=${this.type}
-          name=${this.name}
-          @change=${this.handleChange}
-          @blur=${this.handleBlur}
-          @input=${this.handleInput}
-          @invalid=${this.handleInvalid}
-          ?disabled=${this.disabled}
-          ?required=${this.required}
-          .value=${live(this.value ?? "")}
-          pattern=${ifDefined(this.pattern)}
-          min=${ifDefined(this.min)}
-          max=${ifDefined(this.max)}
-          maxlength=${ifDefined(this.maxlength)}
-          minlength=${ifDefined(this.minlength)}
-          step=${ifDefined(this.step)}
-          ref=${ref(this._inputRef)}
-          aria-invalid=${isInvalid}
-        />
-        <label for="input" class="label">${this.label}</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.renderAfterContent()}
-      </div>
-      ${this.renderErrorMessages()}
-    `;
-    }
-}
-LeuInput.dependencies = {
-    "leu-icon": LeuIcon,
-};
-LeuInput.styles = [LeuElement.styles, css_248z];
-/**
- * @internal
- */
-LeuInput.shadowRootOptions = {
-    ...LeuElement.shadowRootOptions,
-    delegatesFocus: true,
-};
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LeuInput.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LeuInput.prototype, "required", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LeuInput.prototype, "clearable", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuInput.prototype, "value", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuInput.prototype, "name", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuInput.prototype, "error", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuInput.prototype, "label", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuInput.prototype, "prefix", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuInput.prototype, "suffix", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuInput.prototype, "size", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuInput.prototype, "icon", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuInput.prototype, "pattern", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuInput.prototype, "type", void 0);
-__decorate([
-    property({ type: Number, reflect: true })
-], LeuInput.prototype, "min", void 0);
-__decorate([
-    property({ type: Number, reflect: true })
-], LeuInput.prototype, "max", void 0);
-__decorate([
-    property({ type: Number, reflect: true })
-], LeuInput.prototype, "step", void 0);
-__decorate([
-    property({ type: Number, reflect: true })
-], LeuInput.prototype, "maxlength", void 0);
-__decorate([
-    property({ type: Number, reflect: true })
-], LeuInput.prototype, "minlength", void 0);
-__decorate([
-    property({ type: Object })
-], LeuInput.prototype, "validationMessages", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LeuInput.prototype, "novalidate", void 0);
-__decorate([
-    state()
-], LeuInput.prototype, "_validity", void 0);
-
+import "./LeuElement-B7NJzWwP.js";
+import "./Icon-DhAvH0XM.js";
+import "./FormAssociatedMixin-BbFlza53.js";
+import { n as SIZES, t as LeuInput } from "./Input-CnEz-2dK.js";
 export { LeuInput, SIZES };

package/dist/LeuElement-B7NJzWwP.js

@@ -0,0 +1,46 @@
+import { LitElement, css } from "lit";
+//#region src/styles/common-styles.css?inline
+var common_styles_default = css`:host,
+:host * {
+  box-sizing: border-box;
+  font-feature-settings: var(--leu-t-font-feature-settings);
+}
+
+/**
+ * If a custom element sets the display property to any value
+ * it will not be hidden by the [hidden] attribute.
+ * That's why we need to specify this rule.
+ */
+
+:host([hidden]) {
+  display: none;
+}
+`;
+//#endregion
+//#region src/lib/LeuElement.ts
+var LeuElement = class extends LitElement {
+	static {
+		this.version = "0.25.0";
+	}
+	static {
+		this.dependencies = {};
+	}
+	static {
+		this.styles = common_styles_default;
+	}
+	static define(name, constructor = this, options = {}) {
+		Object.entries(this.dependencies).forEach(([n, c]) => c.define(n));
+		const currentlyRegisteredConstructor = customElements.get(name);
+		if (currentlyRegisteredConstructor === void 0) {
+			customElements.define(name, constructor, options);
+			return;
+		}
+		if (currentlyRegisteredConstructor !== constructor) {
+			console.warn(`The custom element with the name <${name}> is already registered with a different constructor. This can happen when the same element has been loaded from different modules (e.g. multiple CDN requests or bundles).`);
+			return;
+		}
+		if ("version" in currentlyRegisteredConstructor && currentlyRegisteredConstructor.version !== constructor.version) console.warn(`The custom element with the name <${name}> is already defined with the same constructor but a different version (${currentlyRegisteredConstructor.version}).`);
+	}
+};
+//#endregion
+export { LeuElement as t };

package/dist/LeuElement-pJFU18Xm.d.ts

@@ -0,0 +1,11 @@
+import { CSSResultGroup, LitElement } from "lit";
+
+//#region src/lib/LeuElement.d.ts
+declare class LeuElement extends LitElement {
+  static version: any;
+  static dependencies: Record<string, typeof LeuElement>;
+  static styles: CSSResultGroup;
+  static define(name: string, constructor?: typeof LeuElement, options?: ElementDefinitionOptions): void;
+}
+//#endregion
+export { LeuElement as t };