@universal-material/web 3.0.140 → 3.0.142

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

@@ -1,429 +0,0 @@
-@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

@@ -1,184 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

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

package/src/field/field-variant.ts

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

package/src/field/field.ts

@@ -1,48 +0,0 @@
-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;
-  }
-}