@statistikzh/leu 0.0.2

package/dist/Input.js

@@ -0,0 +1,686 @@
+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';
+
+var css_248z = css`:host,
+:host * {
+  box-sizing: border-box;
+}
+
+: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-regular);
+  --input-font-black: var(--leu-font-black);
+
+  display: block;
+  font-family: var(--leu-font-regular);
+  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;
+
+  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;
+
+  padding-top: 2rem;
+
+  padding-bottom: 1rem;
+}
+
+.input:focus-visible {
+  outline: none;
+}
+
+:host([size="small"]) .input {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.prefix,
+.suffix {
+  padding-top: 2rem;
+  padding-bottom: 1rem;
+
+  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) */
+
+: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 empty AND has no focus */
+
+:host(:not(:focus-within)) .input-wrapper--empty .label {
+  font-family: var(--input-font-regular);
+  font-size: 1rem;
+  top: calc(1.5rem - var(--input-border-width));
+}
+
+/* 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 size small AND has no focus AND is empty */
+
+:host(:not(:focus-within)[size="small"]) .input-wrapper--empty .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 svg, .error-icon svg {
+  display: block;
+}
+`;
+
+const SIZE_TYPES = {
+  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.
+ *
+ * @prop {boolean} disabled - Disables the input element.
+ * @prop {boolean} required - Marks the input element as required.
+ * @prop {boolean} clearable - Adds a button to clear the input element.
+ * @prop {string} value - The value of the input element.
+ * @prop {string} name - The name of the input element.
+ * @prop {string} label - The label of the input element.
+ * @prop {string} error - A custom error that is completely independent of the validity state. Useful for displaying server side errors.
+ * @prop {string} size - The size of the input element.
+ * @prop {string} icon - The icon that is displayed at the end of the input element.
+ * @prop {string} prefix - A prefix that relates to the value of the input (e.g. CHF).
+ * @prop {string} suffix - A suffix that relates to the value of the input (e.g. mm).
+ * @prop {string} pattern - A regular expression that the value is checked against.
+ * @prop {string} type - The type of the input element.
+ * @prop {string} min - The minimum value of the input element.
+ * @prop {string} max - The maximum value of the input element.
+ * @prop {string} minlength - The minimum length of the input element.
+ * @prop {string} maxlength - The maximum length of the input element.
+ * @prop {object} validationMessages - Custom validation messages. The key is the name of the validity state and the value is the message.
+ * @prop {boolean} novalidate - Disables the browser's validation.
+ *
+ * @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 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
+  }
+
+  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 = {};
+    this.novalidate = false;
+
+    /** @internal */
+    this._identifier = "";
+
+    /** @internal */
+    this._clearIcon = Icon("clear");
+
+    /**
+     * @internal
+     * @type {import("lit/directives/ref.js").Ref<HTMLInputElement>}
+     */
+    this._inputRef = createRef();
+  }
+
+  /**
+   * 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.
+   * @private
+   * @param {MouseEvent|PointerEvent} event
+   * @returns {void}
+   */
+  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.
+   * @private
+   * @param {FocusEvent} event
+   * @returns {void}
+   */
+  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.
+   * @private
+   * @param {Event} event
+   * @returns {void}
+   */
+  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.
+   * @private
+   * @param {Event} event
+   * @fires {CustomEvent} change
+   * @returns {void}
+   */
+  handleChange(event) {
+    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.
+   * @private
+   * @param {Event} event
+   * @returns {void}
+   */
+  handleInput(event) {
+    this.value = event.target.value;
+  }
+
+  /**
+   * Method for clearing the input element.
+   * Sets the value property to an empty string and dispatches
+   * an input and a change event.
+   * @private
+   * @returns {void}
+   * @fires {CustomEvent} input
+   * @fires {CustomEvent} change
+   */
+  clear() {
+    this.value = "";
+
+    this.dispatchEvent(
+      new CustomEvent("input", { bubbles: true, composed: true })
+    );
+    this.dispatchEvent(
+      new CustomEvent("change", { bubbles: true, composed: true })
+    );
+  }
+
+  /**
+   * Method for getting the id of the input element.
+   * If the id attribute is set, the value of the id attribute is returned.
+   * Otherwise a random id is generated and returned.
+   *
+   * @private
+   * @returns {string} id
+   */
+  getId() {
+    const id = this.getAttribute("id");
+
+    if (id !== null && id !== "") {
+      return id
+    }
+
+    if (this._identifier !== "") {
+      return this._identifier
+    }
+
+    this._identifier = crypto.randomUUID();
+    return this._identifier
+  }
+
+  /**
+   * 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
+   *
+   * @returns {Object} validationMessages
+   */
+  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
+  }
+
+  /**
+   * Creates an error list with an item for the given validity state.
+   * @param {ValidityState} validityState
+   * @param {Object} validationMessages
+   * @param {String} idRef
+   * @returns
+   */
+  renderErrorMessages() {
+    if (!this.isInvalid()) {
+      return nothing
+    }
+
+    const validationMessages = this.getValidationMessages();
+    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>`
+        )}
+      </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.
+   *
+   * @private
+   * @returns {TemplateResult}
+   */
+  renderAfterContent() {
+    if (this.isInvalid()) {
+      return html`<div class="error-icon">${Icon("caution")}</div>`
+    }
+
+    if (this.clearable && this.value !== "") {
+      return html`<button
+        class="clear-button"
+        @click=${this.clear}
+        aria-label="Eingabefeld zurücksetzen"
+        ?disabled=${this.disabled}
+      >
+        ${this._clearIcon}
+      </button>`
+    }
+
+    if (this.icon !== "") {
+      return html`<div class="icon">${Icon(this.icon)}</div>`
+    }
+
+    return nothing
+  }
+
+  isInvalid() {
+    if (this.error !== "") {
+      return true
+    }
+
+    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,
+    };
+
+    /* 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-${this.getId()}"
+          type=${this.type}
+          name=${this.name}
+          @change=${this.handleChange}
+          @blur=${this.handleBlur}
+          @input=${this.handleInput}
+          @invalid=${this.handleInvalid}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          pattern=${ifDefined(this.pattern)}
+          min=${ifDefined(this.min)}
+          max=${ifDefined(this.max)}
+          maxlength=${ifDefined(this.maxlength)}
+          minlength=${ifDefined(this.minlength)}
+          .value=${this.value}
+          ref=${ref(this._inputRef)}
+          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.renderAfterContent()}
+      </div>
+      ${this.renderErrorMessages()}
+    `
+  }
+}
+
+function defineInputElements() {
+  defineElement("input", LeuInput);
+}
+
+export { LeuInput, SIZE_TYPES, defineInputElements };