@universal-material/web 3.0.138 → 3.0.140

package/src/field/field-base.styles.scss

@@ -0,0 +1,429 @@
+@use "../scss/api";
+
+:host {
+
+  --_control-line-height: var(--u-field-control-line-height, 1.5rem);
+  --_label-line-height: var(--u-field-label-line-height, 1rem);
+  --_field-icon-size: var(--u-field-icon-size, 1.5rem);
+  --_field-control-padding: var(--u-field-control-padding, 16px);
+  --_field-control-inline-padding: var(--u-field-control-inline-padding, var(--_field-control-padding));
+  --_field-control-block-padding: var(--u-field-control-block-padding, var(--_field-control-padding));
+  --_field-min-height: var(--u-field-min-height, 56px);
+  --_field-placeholder-color: var(--u-field-placeholder-color, #{api.get-color-var(on-surface-variant)});
+  --_disabled-color: var(--u-field-disabled-color, #{api.get-color-transparency-mix(api.get-color-var(on-surface), var(--u-field-disabled-opacity, 38%))});
+  --_disabled-bg-color: var(--u-filled-field-disabled-bg-color, #{api.get-color-transparency-mix(api.get-color-var(on-surface), var(--u-filled-field-background-disabled-opacity, 12%))});
+  --_color-primary: #{api.get-color-var(primary)};
+  --_color-error: var(--u-field-error-color, #{api.get-color-var(error)});
+  --_active-indicator-opacity: 1;
+  --_vertical-padding: var(--u-field-vertical-padding, 8px);
+  --_icon-size: var(--u-field-icon-size, 1.5rem);
+  --_icon-padding: var(--u-field-icon-padding, 12px);
+  --_icon-color: var(--u-icon-color, #{api.get-color-var(on-surface-variant)});
+
+  --_border-width: var(--u-field-border-width, 1px);
+  --_border-color: var(--u-field-border-color, #{api.get-color-var(on-surface-variant)});
+
+  --_field-control-leading-padding: var(--_field-control-inline-padding);
+
+  --_outlined-label-margin: var(--u-outlined-field-label-margin, 12px);
+  --_outlined-label-padding: var(--u-outlined-field-label-padding, 4px);
+
+  --u-label-input-start: auto;
+  --u-label-input-span-leading-offset: 0;
+  --u-label-input-span-trailing-offset: 0;
+  --u-text-field-horizontal-padding: 12px;
+
+  display: block;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    pointer-events: none;
+  }
+
+  &::before {
+    background: #{api.get-color-var(on-surface)};
+    transition: opacity 150ms;
+    opacity: 0;
+  }
+
+  &::after {
+    border-width: var(--_border-width);
+    border-color: var(--_border-color);
+  }
+}
+
+@media (hover: hover) {
+  :host(:not([disabled]):not([invalid]):hover) {
+    .container.filled::before {
+      opacity: #{api.get-state-layer-opacity-var(hover)};
+    }
+  }
+
+  :host(:not([disabled]):not([invalid]):not(:focus-within):hover) {
+    --_border-color: var(--u-field-hover-border-color, #{api.get-color-var(on-surface)});
+  }
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--_icon-size);
+  color: var(--_icon-color);
+  font-size: var(--_icon-size);
+  line-height: var(--_icon-size);
+
+  &::slotted(*) {
+    flex-shrink: 0;
+  }
+}
+
+.leading-icon {
+  margin-inline-start: var(--_icon-padding);
+}
+
+.trailing-icon {
+  margin-inline-end: var(--_icon-padding);
+}
+
+.outline-notch-label,
+.label {
+  @include api.typo(body-l, field-label);
+  @include api.typo-prop(body-s, font-size, field-label);
+}
+
+.label {
+  display: block;
+  position: absolute;
+  inset-inline-start: var(--_field-control-leading-padding);
+  margin-bottom: 0;
+  line-height: var(--_label-line-height);
+  color: var(--u-field-label-color, #{api.get-color-var(on-surface-variant)});
+  transition: inset 200ms, font-size 200ms;
+}
+
+.input-wrapper {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  padding-block: var(--_vertical-padding);
+  padding-inline: var(--_field-control-inline-padding);
+  min-height: var(--_field-min-height);
+  transition: opacity 150ms;
+}
+
+.input {
+  color: var(--u-field-input-text-color, #{api.get-color-var(on-surface)});
+  flex: 1;
+
+  &:focus {
+    outline: 0;
+  }
+
+  textarea,
+  select,
+  input,
+  ::slotted(*) {
+    @include api.typo(body-l, field-control);
+    display: block;
+    width: 100%;
+    color: var(--u-field-input-text-color, #{api.get-color-var(on-surface)});
+    min-height: var(--_control-line-height);
+    line-height: var(--_control-line-height);
+    padding: 0;
+    margin: 0;
+    appearance: none;
+    background: transparent;
+    border: none;
+    outline: 0 !important;
+    caret-color: var(--_color-primary);
+  }
+
+  &,
+  textarea::placeholder,
+  input::placeholder,
+  ::slotted(select),
+  ::slotted(:is(input, textarea))::placeholder {
+    transition: color 150ms 100ms;
+  }
+
+  textarea::placeholder,
+  input::placeholder,
+  ::slotted(:is(input, textarea))::placeholder {
+    color: var(--_field-placeholder-color);
+  }
+}
+
+.supporting-text {
+  @include api.typo(body-s, field-supporting-text);
+
+  display: flex;
+  color: var(--u-field-supporting-text, #{api.get-color-var(on-surface-variant)});
+  padding-inline: 16px;
+  gap: 16px;
+
+  div:empty {
+    display: none;
+  }
+
+  div,
+  ::slotted(*) {
+    display: inline-block;
+    margin-top: 4px;
+  }
+}
+
+.error-text {
+  display: none;
+}
+
+.counter {
+  div,
+  &::slotted(*) {
+    margin-inline-start: auto;
+  }
+}
+
+:host([has-leading-icon]) {
+  --_field-control-leading-padding: calc(var(--_icon-padding) + var(--_icon-size) + var(--_field-control-inline-padding))
+}
+
+:host(:not([has-leading-icon])) {
+  .leading-icon {
+    display: none;
+  }
+}
+
+:host(:not([has-trailing-icon])) .container:has(slot[name=trailing-icon] span:empty) {
+  .trailing-icon {
+    display: none;
+  }
+}
+
+:host(:focus-within) {
+  --_border-width: var(--u-text-field-focus-border-width, 2px);
+  --_border-color: var(--u-field-focused-border-color, var(--_color-primary));
+
+  .label {
+    color: var(--u-field-label-focused-color, var(--_color-primary));
+  }
+}
+
+:host([invalid]) {
+  --_border-color: var(--u-field-error-border-color, var(--_color-error));
+
+  .label {
+    color: var(--u-field-label-error-color, var(--_color-error));
+  }
+
+  .supporting-text {
+    color: var(--u-field-supporting-text-error-color, var(--_color-error));
+  }
+
+  .trailing-icon {
+    color: var(--u-field-trailing-icon-error-color, var(--_color-error));
+  }
+
+  .leading-icon {
+    color: var(--u-field-leading-icon-error-color, var(--_icon-color));
+  }
+}
+
+:host([invalid]) .supporting-text:has(.error-text div:not(:empty)),
+:host([invalid][has-error-text]) {
+
+  .error-text {
+    display: contents;
+  }
+
+  slot[name=supporting-text] {
+    display: none;
+  }
+}
+
+.container {
+  &.filled {
+    border-radius: var(--u-field-filled-border-radius, 4px 4px 0 0);
+    background-color: #{api.get-color-var(surface-container-highest)};
+
+    &::after {
+      border-bottom-style: solid;
+    }
+
+    &:not(.no-label) {
+      .input-wrapper {
+        padding-top: calc(var(--_vertical-padding) + var(--_label-line-height));
+        padding-bottom: var(--_vertical-padding);
+      }
+    }
+
+    .label {
+      top: var(--_vertical-padding);
+    }
+
+    .input {
+      ::slotted(:is(input, textarea, select, button)) {
+        display: block;
+      }
+    }
+  }
+
+  &.outlined {
+    .label {
+      top: calc(var(--_label-line-height) / -2);
+    }
+  }
+}
+
+.container.outlined:focus-within,
+:host(:not([empty])) .container.outlined {
+  .label {
+    inset-inline-start: calc(var(--_outlined-label-margin) + var(--_outlined-label-padding));
+  }
+}
+
+:host([empty]) {
+  ::slotted(select) {
+    color: var(--_field-placeholder-color);
+  }
+}
+
+:host([empty]:not(:focus-within)) {
+
+  .label {
+    @include api.typo-prop(body-l, font-size, field-label);
+    pointer-events: none;
+    top: calc(var(--_field-min-height) / 2 - var(--_label-line-height) / 2);
+  }
+
+  .container:not(.no-label) {
+    .input-wrapper,
+    .input,
+    .input input::placeholder,
+    .input textarea::placeholder,
+    ::slotted(:is(input, textarea))::placeholder,
+    ::slotted(select) {
+      color: transparent;
+      transition: color 150ms;
+    }
+  }
+}
+
+:host([disabled]) {
+  --_border-color: var(--u-field-disabled-border-color, var(--_disabled-color));
+
+  .container {
+    .filled {
+      background-color: var(--u-filled-field-disabled-bg-color, #{api.get-color-transparency-mix(api.get-color-var(on-surface), var(--u-filled-field-background-disabled-opacity, 04%))});
+    }
+  }
+
+  .supporting-text {
+    color: var(--u-field-supporting-text-disabled-color, var(--_disabled-color));
+  }
+
+  .label {
+    color: var(--u-field-label-disabled-color, var(--_disabled-color));
+  }
+
+  .input {
+    &,
+    select,
+    select::placeholder,
+    textarea,
+    textarea::placeholder,
+    input,
+    input::placeholder,
+    ::slotted(*),
+    ::slotted(:is(input, textarea))::placeholder {
+      color: var(--u-field-input-disabled-color, var(--_disabled-color));
+    }
+  }
+
+  .trailing-icon {
+    color: var(--u-field-trailing-icon-disabled-color, var(--_disabled-color));
+  }
+
+  .leading-icon {
+    color: var(--u-field-leading-icon-disabled-color, var(--_disabled-color));
+  }
+}
+
+.outline {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  border-radius: var(--u-outlined-field-shape-corder, #{api.get-shape-corner-var(small)});
+  pointer-events: none;
+}
+
+.outline-start,
+.outline-end {
+  border: var(--_border-width) solid var(--_border-color);
+  border-radius: inherit;
+  flex-basis: var(--_outlined-label-margin);
+}
+
+.outline-start {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  border-inline-end: none;
+}
+
+.outline-end {
+  flex: 1;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-inline-start: none;
+}
+
+.outline-notch {
+  min-width: 0;
+  border-bottom: var(--_border-width) solid var(--_border-color);
+}
+
+.outline-notch-label {
+  position: relative;
+  color: transparent;
+  padding-inline: var(--_outlined-label-padding);
+  user-select: none;
+}
+
+.outline-notch-label::before,
+.outline-notch-label::after {
+  content: "";
+  position: absolute;
+  border-top: var(--_border-width) solid var(--_border-color);
+  width: 50%;
+  transition: width 100ms;
+}
+
+.outline-notch-label::before {
+  left: 0;
+}
+
+.outline-notch-label::after {
+  right: 0;
+}
+
+.container:not(.no-label):focus-within,
+:host(:not([empty])) .container:not(.no-label) {
+  .outline-notch-label::before,
+  .outline-notch-label::after {
+    width: 0;
+  }
+}

package/src/field/field-base.ts

@@ -0,0 +1,184 @@
+import { consume, Context, ContextProvider } from '@lit/context';
+import { CSSResultGroup } from '@lit/reactive-element/css-tag';
+
+import { html, LitElement, nothing, TemplateResult } from 'lit';
+import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+
+import { styles as baseStyles } from '../shared/base.styles.js';
+import { styles } from './field-base.styles.js';
+import { fieldDefaultsContext } from './field-defaults-context.js';
+import { UmFieldDefaults } from './field-defaults.js';
+
+export abstract class UmFieldBase extends LitElement {
+  static override styles: CSSResultGroup = [baseStyles, styles];
+
+  @consume({ context: fieldDefaultsContext, subscribe: true })
+  @state()
+  private readonly config: UmFieldDefaults | undefined;
+
+  @property() variant: 'filled' | 'outlined' | undefined = 'filled';
+
+  /**
+   * The floating label for the field
+   */
+  @property()
+  label: string | undefined;
+
+  @state() protected _innerCounter: string | undefined;
+  @property() counter: string | undefined;
+
+  @property({ type: Boolean, attribute: 'hide-counter' }) hideCounter = false;
+
+  /**
+   * Supporting text conveys additional information about the field, such as how it will be used
+   */
+  @property({ attribute: 'supporting-text' }) supportingText: string | undefined;
+
+  /**
+   * For text fields that validate their content (such as passwords), replace supporting text with error text when applicable.
+   * If `errorText` is not an empty string, changing the property `invalid` to `true` will show the `errorText` instead of `supportingText`
+   */
+  @property({ attribute: 'error-text' }) errorText: string | undefined;
+
+  /**
+   * Whether the field is empty or not. This changes the behavior of the floating label when the field is not focused.
+   */
+  @property({ type: Boolean, reflect: true }) empty = false;
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /**
+   * Get or sets where or not the field is in a visually invalid state.
+   */
+  @property({ type: Boolean, reflect: true }) invalid = false;
+
+  static setDefaults(
+    contextRoot: HTMLElement,
+    config: UmFieldDefaults,
+  ): ContextProvider<Context<HTMLElement, UmFieldDefaults>> {
+    return new ContextProvider(contextRoot, {
+      context: fieldDefaultsContext,
+      initialValue: config,
+    });
+  }
+
+  /**
+   * Whether the field has a leading icon or not
+   *
+   * _Note:_ Readonly
+   */
+  @property({ type: Boolean, attribute: 'has-leading-icon', reflect: true })
+  hasLeadingIcon = false;
+
+  /**
+   * Whether the field has a trailing icon or not
+   *
+   * _Note:_ Readonly
+   */
+  @property({ type: Boolean, attribute: 'has-trailing-icon', reflect: true })
+  hasTrailingIcon = false;
+
+  /**
+   * Whether the field has an error text or not
+   *
+   * _Note:_ Readonly
+   */
+  @property({ type: Boolean, attribute: 'has-error-text', reflect: true })
+  hasErrorText = false;
+
+  @queryAssignedElements({ slot: 'leading-icon', flatten: true })
+  private readonly assignedLeadingIcons!: HTMLElement[];
+
+  @queryAssignedElements({ slot: 'trailing-icon', flatten: true })
+  private readonly assignedTrailingIcons!: HTMLElement[];
+
+  @queryAssignedElements({ slot: 'error-text', flatten: true })
+  private readonly assignedErrorTexts!: HTMLElement[];
+
+  @query('.label', true) private readonly _labelElement!: HTMLElement;
+  @query('.container', true) protected _container!: HTMLElement;
+
+  constructor() {
+    super();
+    this.variant = undefined;
+  }
+
+  protected override render(): TemplateResult {
+    const variant = this.variant ?? this.config?.variant ?? 'filled';
+
+    const classes = {
+      [variant]: true,
+      'no-label': !this.label,
+    };
+
+    const counter = html`
+      <slot class="counter" name="counter">
+        <div>${this.counter ?? this._innerCounter}</div>
+      </slot>
+    `;
+
+    const outline = html`
+      <div class="outline">
+        <div class="outline-start"></div>
+        <div class="outline-notch">
+          <div class="outline-notch-label">${this.label}</div>
+        </div>
+        <div class="outline-end"></div>
+      </div>
+    `;
+
+    return html`
+      <div class="container ${classMap(classes)}">
+        ${variant === 'outlined' ? outline : nothing}
+        <slot class="icon leading-icon" name="leading-icon" @slotchange="${this.handleLeadingIconSlotChange}"></slot>
+        <label class="label" id="label">${this.label}</label>
+        <div class="input-wrapper" part="wrapper">${this.renderControl()}</div>
+        <slot class="icon trailing-icon" name="trailing-icon" @slotchange="${this.handleTrailingIconSlotChange}">
+          <span>${this.renderDefaultTrailingIcon()}</span>
+        </slot>
+      </div>
+      <div class="supporting-text" id="supporting-text">
+        <slot class="error-text" name="error-text" @slotchange="${this.handleErrorTextSlotChange}">
+          <div>${this.errorText}</div>
+        </slot>
+        <slot name="supporting-text" id="supporting-text">
+          <div>${this.supportingText}</div>
+        </slot>
+        ${this.hideCounter ? nothing : counter}
+      </div>
+      ${this.renderAfterContent()}
+    `;
+  }
+
+  protected abstract renderControl(): TemplateResult;
+
+  protected renderAfterContent(): TemplateResult {
+    return html``;
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.hasLeadingIcon = !!this.assignedLeadingIcons.length;
+  }
+
+  private handleLeadingIconSlotChange() {
+    this._labelElement.style.transition = 'none';
+    this.hasLeadingIcon = this.assignedLeadingIcons.length > 0;
+
+    setTimeout(() => {
+      this._labelElement.style.transition = '';
+    });
+  }
+
+  private handleTrailingIconSlotChange() {
+    this.hasTrailingIcon = this.assignedTrailingIcons.length > 0;
+  }
+
+  private handleErrorTextSlotChange() {
+    this.hasErrorText = this.assignedErrorTexts.length > 0;
+  }
+
+  protected renderDefaultTrailingIcon(): TemplateResult | typeof nothing {
+    return nothing;
+  }
+}

package/src/field/field-defaults-context.ts

@@ -0,0 +1,5 @@
+import { createContext } from '@lit/context';
+
+import { UmFieldDefaults } from './field-defaults.js';
+
+export const fieldDefaultsContext = createContext<UmFieldDefaults>('u-field-defaults-context');

package/src/field/field-defaults.ts

@@ -0,0 +1,5 @@
+import { UmFieldVariant } from './field-variant.js';
+
+export interface UmFieldDefaults {
+  variant: UmFieldVariant;
+}

package/src/field/field-variant.ts

@@ -0,0 +1 @@
+export type UmFieldVariant = 'filled' | 'outlined';

package/src/field/field.ts

@@ -0,0 +1,48 @@
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { UmFieldBase } from './field-base.js';
+
+@customElement('u-field')
+export class UmField extends UmFieldBase {
+
+  @property({ type: Boolean }) autoEmpty = false;
+
+  private control: HTMLInputElement | null = null;
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.control = this.querySelector('input, select, button, textarea');
+    this.control?.addEventListener('input', this.handleControlInput);
+
+    if (this.autoEmpty) {
+      this.empty = !this.control?.value;
+    }
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this.control?.removeEventListener('input', this.handleControlInput);
+    this.control = null;
+  }
+
+  private readonly handleControlInput = () => {
+    if (this.autoEmpty) {
+      this.empty = !this.control?.value;
+    }
+  };
+
+  protected override renderControl() {
+    return html`
+      <slot name="prefix"></slot>
+      <div class="input"><slot></slot></div>
+      <slot name="suffix"></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'u-field': UmField;
+  }
+}