@statistikzh/leu 0.28.0 → 0.28.2

package/src/components/input/Input.ts

@@ -1,469 +0,0 @@
-import { html, nothing, PropertyValues } 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 { LeuElement } from "../../lib/LeuElement.js"
-import { LeuIcon } from "../icon/Icon.js"
-
-import styles from "./input.css?inline"
-import { IconPathName } from "../icon/paths.js"
-import { FormAssociatedMixin } from "../../lib/mixins/FormAssociatedMixin.js"
-
-export const SIZES = Object.freeze({
-  SMALL: "small",
-  REGULAR: "regular",
-})
-
-type InputType =
-  | "date"
-  | "datetime-local"
-  | "email"
-  | "month"
-  | "number"
-  | "password"
-  | "search"
-  | "tel"
-  | "text"
-  | "time"
-  | "week"
-
-/**
- * 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
- */
-export class LeuInput extends FormAssociatedMixin(LeuElement) {
-  static dependencies = {
-    "leu-icon": LeuIcon,
-  }
-
-  static styles = [LeuElement.styles, styles]
-
-  /**
-   * @internal
-   */
-  static shadowRootOptions = {
-    ...LeuElement.shadowRootOptions,
-    delegatesFocus: true,
-  }
-
-  /** Disables the input element. */
-  @property({ type: Boolean, reflect: true })
-  disabled: boolean = false
-
-  /** Marks the input element as required */
-  @property({ type: Boolean, reflect: true })
-  required: boolean = false
-
-  /** Adds a button to clear the input element */
-  @property({ type: Boolean, reflect: true })
-  clearable: boolean = false
-
-  /** A custom error that is completely independent of the validity state. Useful for displaying server side errors. */
-  @property({ type: String, reflect: true })
-  error: string = ""
-
-  /** The label of the input element */
-  @property({ type: String, reflect: true })
-  label: string = ""
-
-  /** A prefix that relates to the value of the input (e.g. CHF)  */
-  @property({ type: String, reflect: true })
-  prefix: string
-
-  /** A suffix that relates to the value of the input (e.g. mm). */
-  @property({ type: String, reflect: true })
-  suffix: string
-
-  /** The size of the input element */
-  @property({ type: String, reflect: true })
-  size: "small" | "regular" = "regular"
-
-  /** The icon that is displayed at the end of the input element */
-  @property({ type: String, reflect: true })
-  icon: IconPathName
-
-  /** A regular expression that the value is checked against. */
-  @property({ type: String, reflect: true })
-  pattern: string
-
-  /** The type of the input element. */
-  @property({ type: String, reflect: true })
-  type: InputType = "text"
-
-  /** The minimum value of the input element. */
-  @property({ type: Number, reflect: true })
-  min: number
-
-  /** The maximum value of the input element. */
-  @property({ type: Number, reflect: true })
-  max: number
-
-  /** The step value of the input element. */
-  @property({ type: Number, reflect: true })
-  step: number
-
-  /** The maximum length of the input element. */
-  @property({ type: Number, reflect: true })
-  maxlength: number
-
-  /** The minimum length of the input element. */
-  @property({ type: Number, reflect: true })
-  minlength: number
-
-  /** Custom validation messages. The key is the name of the validity state and the value is the message. */
-  @property({ type: Object })
-  validationMessages: Record<string, string> = {}
-
-  /** Disables the browser's validation. */
-  @property({ type: Boolean, reflect: true })
-  novalidate: boolean = false
-
-  /** The default value of the input element. */
-  @property({ type: String, reflect: true, attribute: "value" })
-  defaultValue: string = ""
-
-  protected _value: string
-
-  /** The value of the input element. */
-  @property({ type: String, attribute: false })
-  set value(value: string) {
-    this._value = value
-  }
-
-  get value(): string {
-    if (typeof this._value === "string") {
-      return this._value
-    }
-
-    return this.defaultValue
-  }
-
-  @state()
-  _validity: ValidityState | null = null
-
-  static resolveErrorMessage(message, refernceValue) {
-    if (typeof message === "function") {
-      return message(refernceValue)
-    }
-
-    return message
-  }
-
-  protected _inputRef = createRef<HTMLInputElement>()
-
-  get valueAsNumber() {
-    if (this.value === "") {
-      return NaN
-    }
-    return Number(this.value)
-  }
-
-  formResetCallback() {
-    this.value = this.defaultValue
-  }
-
-  protected setFormValue(): void {
-    this.internals.setFormValue(this.disabled ? null : this.value)
-  }
-
-  protected willUpdate(changedProperties: PropertyValues<this>): void {
-    super.willUpdate(changedProperties)
-    let valueChanged = false
-
-    if (
-      changedProperties.has("defaultValue") &&
-      !changedProperties.has("value") &&
-      !this.hasInteracted
-    ) {
-      this.value = this.defaultValue
-      valueChanged = true
-    }
-
-    if (
-      valueChanged ||
-      changedProperties.has("value") ||
-      changedProperties.has("name") ||
-      changedProperties.has("disabled")
-    ) {
-      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.
-   */
-  protected handleWrapperClick(event: MouseEvent | PointerEvent) {
-    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.
-   */
-  protected handleBlur(event: FocusEvent & { target: HTMLInputElement }) {
-    this._validity = null
-
-    if (!this.novalidate) {
-      event.target.checkValidity()
-    }
-  }
-
-  /**
-   * Method for handling the invalid event of the input element.
-   * Sets the validity state.
-   */
-  protected handleInvalid(event: Event & { target: HTMLInputElement }) {
-    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
-   */
-  protected handleChange(event: Event & { target: HTMLInputElement }) {
-    this.hasInteracted = true
-    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.
-   */
-  protected handleInput(event: Event & { target: HTMLInputElement }) {
-    this.hasInteracted = true
-    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
-   */
-  protected 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
-   */
-  protected 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 || this.disabled
-      ? 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.
-   */
-  protected 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.
-   */
-  protected 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()}
-    `
-  }
-}

package/src/components/input/input.css

@@ -1,238 +0,0 @@
-: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-inline: 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,
-.input-wrapper--invalid:is(:hover, :focus-within) {
-  --input-border-color: var(--input-border-color-invalid);
-  border-radius: 2px 2px 0 0;
-}
-
-.input {
-  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-block: 2rem 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-block: 0.75rem;
-}
-
-.prefix,
-.suffix {
-  padding-block: calc(2rem - var(--input-border-width))
-    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], :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(:is([suffix], [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: var(--_length);
-  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], :focus-within)) .input-wrapper--empty .icon {
-  color: var(--input-label-color-empty);
-}
-
-.error-icon {
-  align-self: center;
-  color: var(--input-color-invalid);
-}
-
-:is(.icon, .error-icon) leu-icon {
-  display: block;
-}

package/src/components/input/leu-input.ts

@@ -1,11 +0,0 @@
-import { LeuInput } from "./Input.js"
-
-export { LeuInput }
-
-LeuInput.define("leu-input")
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "leu-input": LeuInput
-  }
-}