@statistikzh/leu 0.24.1 → 0.25.0

package/dist/Input-CnEz-2dK.js

@@ -0,0 +1,610 @@
+import { t as LeuElement } from "./LeuElement-B7NJzWwP.js";
+import { t as __decorate } from "./decorate-DwpAc4D0.js";
+import { t as LeuIcon } from "./Icon-DhAvH0XM.js";
+import { t as FormAssociatedMixin } from "./FormAssociatedMixin-BbFlza53.js";
+import { css, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+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 { live } from "lit/directives/live.js";
+//#region src/components/input/input.css?inline
+var input_default = 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;
+}
+`;
+//#endregion
+//#region src/components/input/Input.ts
+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
+*/
+var LeuInput = class LeuInput extends FormAssociatedMixin(LeuElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.required = false;
+		this.clearable = false;
+		this.value = "";
+		this.error = "";
+		this.label = "";
+		this.size = "regular";
+		this.type = "text";
+		this.validationMessages = {};
+		this.novalidate = false;
+		this._validity = null;
+		this._inputRef = createRef();
+	}
+	static {
+		this.dependencies = { "leu-icon": LeuIcon };
+	}
+	static {
+		this.styles = [LeuElement.styles, input_default];
+	}
+	static {
+		this.shadowRootOptions = {
+			...LeuElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	static resolveErrorMessage(message, refernceValue) {
+		if (typeof message === "function") return message(refernceValue);
+		return message;
+	}
+	get valueAsNumber() {
+		if (this.value === "") return NaN;
+		return Number(this.value);
+	}
+	formResetCallback() {
+		this.value = "";
+	}
+	setFormValue() {
+		this.internals.setFormValue(this.value);
+	}
+	willUpdate(changedProperties) {
+		if (changedProperties.has("value")) this.setFormValue();
+	}
+	/**
+	* 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
+		};
+		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()}
+    `;
+	}
+};
+__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, "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);
+//#endregion
+export { SIZES as n, LeuInput as t };