@universal-material/web 3.0.139 → 3.0.140

package/src/shared/menu-field/menu-field-navigation-controller.ts

@@ -0,0 +1,152 @@
+import { UmMenuItem } from '../../menu/menu-item.js';
+import { UmMenuField } from './menu-field.js';
+
+export class MenuFieldNavigationController<TField extends UmMenuField, TMenuItem extends UmMenuItem> {
+  #element: HTMLElement | null = null;
+  protected focusedMenu: TMenuItem | null = null;
+  protected readonly host: TField;
+
+  private readonly _bindHandleKeyDown: (event: KeyboardEvent) => void;
+
+  constructor(host: TField) {
+    this.host = host;
+    this._bindHandleKeyDown = this.handleKeyDown.bind(this);
+  }
+
+  attach(element: HTMLElement) {
+    this.detach();
+
+    element?.addEventListener('keydown', this._bindHandleKeyDown, { capture: true });
+    this.host._menu?.addEventListener('close', this.#handleMenuClose);
+    this.#element = element;
+  }
+
+  detach() {
+    this.#element?.removeEventListener('keydown', this._bindHandleKeyDown);
+    this.host._menu?.removeEventListener('close', this.#handleMenuClose);
+    this.#element = null;
+  }
+
+  readonly #handleMenuClose = () => this.blurMenu();
+
+  protected handleKeyDown(event: KeyboardEvent): boolean {
+    if (this.host._menu?.open !== true) {
+      return false;
+    }
+
+    const isEscape = event.key === 'Escape';
+
+    if (isEscape) {
+      this.host._menu.close();
+    }
+
+    if (event.key === 'Home') {
+      this.navigateTo(event, (this.host._menuItems[0] as TMenuItem), 0);
+      return true;
+    }
+
+    if (event.key === 'End') {
+      this.navigateTo(
+        event,
+        (this.host._menuItems[this.host._menuItems.length - 1] as TMenuItem),
+        this.host._menuItems.length - 1,
+      );
+      return true;
+    }
+
+    const isDown = event.key === 'ArrowDown';
+    const isUp = event.key === 'ArrowUp';
+
+    if (isDown || isUp) {
+      this.navigate(event, isDown);
+      return true;
+    }
+
+    const isEnter = event.key === 'Enter';
+    const isTab = event.key === 'Tab';
+
+    if (isEnter || isTab) {
+      this.selectActiveItem(event);
+      return true;
+    }
+
+    return false;
+  }
+
+  private navigate(event: KeyboardEvent, forwards: boolean) {
+    const menuItems = this.host._menuItems;
+
+    if (!menuItems.length) {
+      return;
+    }
+
+    event.preventDefault();
+
+    const activeMenu = this.focusedMenu;
+
+    const activeMenuIndex = activeMenu ? menuItems.indexOf(activeMenu) : -1;
+
+    const nextMenu = forwards
+      ? menuItems[activeMenuIndex + 1] as TMenuItem ?? menuItems[0]
+      : menuItems[activeMenuIndex - 1] as TMenuItem ?? menuItems[menuItems.length - 1];
+
+    if (!nextMenu) {
+      return;
+    }
+
+    this.navigateTo(event, nextMenu, menuItems.indexOf(nextMenu));
+  }
+
+  protected navigateTo(event: KeyboardEvent, menu: TMenuItem | undefined, index: number) {
+    event.preventDefault();
+
+    this.blurMenu();
+
+    if (!menu) {
+      return;
+    }
+
+    this.focusMenu(menu, index);
+  }
+
+  focusMenu(menu: TMenuItem, index: number, active = true, scroll = true) {
+    if (this.focusedMenu) {
+      this.focusedMenu.active = false;
+    }
+
+    this.focusedMenu = menu;
+    menu.active = active;
+
+    if (scroll) {
+      menu.scrollIntoView({ block: 'nearest' });
+    }
+
+    this.afterFocus(menu, index);
+  }
+
+  blurMenu() {
+    if (!this.focusedMenu) {
+      return;
+    }
+
+    this.focusedMenu.active = false;
+    this.focusedMenu = null;
+    this.afterBlur();
+  }
+
+  private selectActiveItem(event: KeyboardEvent) {
+    if (!this.focusedMenu) {
+      return;
+    }
+
+    event.preventDefault();
+    this.focusedMenu.click();
+    this.host._menu.open = false;
+  }
+
+  protected afterFocus(_: TMenuItem, __: number) {
+  }
+
+  protected afterBlur() {
+  }
+}

package/src/shared/menu-field/menu-field.ts

@@ -0,0 +1,7 @@
+import { UmMenuItem } from '../../menu/menu-item.js';
+import { UmMenu } from '../../menu/menu.js';
+
+export interface UmMenuField {
+  _menu: UmMenu;
+  get _menuItems(): UmMenuItem[];
+}

package/src/shared/mixin-attribute-properties.ts

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+
+import { MixinBase, MixinReturn } from './mixin.js';
+
+// @ts-ignore
+export const mixinAttributeProperties = <T extends MixinBase<LitElement>>(base: T, ...properties: string[]): MixinReturn<T> => {
+  // @ts-ignore
+  abstract class AttributeProperties extends base {
+    constructor() {
+      super();
+
+      for (const property of properties) {
+        const propertyKey = property
+          .split('-')
+          .map((segment, index) => index
+            ? `${segment[0].toUpperCase()}${segment.substring(1)}`
+            : segment)
+          .join('');
+
+        Object.defineProperty(this, property, {
+          get() {
+            return this[propertyKey];
+          },
+          set(value: any) {
+            this[propertyKey] = value;
+          },
+        });
+      }
+    }
+  }
+
+  return AttributeProperties;
+};

package/src/shared/mixin.ts

@@ -0,0 +1,11 @@
+export type MixinBase<ExpectedBase = object> = abstract new (
+  // Mixins must have a constructor with `...args: any[]`
+  // @ts-ignore
+  ...args: any[]
+) => ExpectedBase;
+
+// eslint-disable-next-line @typescript-eslint/no-shadow
+export type MixinReturn<MixinBase, MixinClass = object> =
+// Mixins must have a constructor with `...args: any[]`
+// tslint:disable-next-line:no-any
+  (abstract new (...args: any[]) => MixinClass) & MixinBase;

package/src/shared/normalize-text.ts

@@ -0,0 +1,9 @@
+export const normalizeText = (text: string | null): string => {
+  if (!text) {
+    return text ?? '';
+  }
+
+  return text
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '');
+};

package/src/shared/selection-control/checkbox-base.ts

@@ -0,0 +1,5 @@
+// import { UmSelectionControl } from './selection-control.js';
+//
+// export abstract class UmCheckboxBase extends UmSelectionControl {
+//   @property({ type: Boolean }) checked;
+// }

package/src/shared/selection-control/selection-control-list-item.ts

@@ -0,0 +1,44 @@
+import { css, html, HTMLTemplateResult, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+
+import { MixinBase, MixinReturn } from '../mixin.js';
+import { UmSelectionControl } from './selection-control.js';
+
+// @ts-ignore
+export const mixinSelectionControlListItem = <T extends MixinBase<UmSelectionControl>>(base: T): MixinReturn<T> => {
+  // @ts-ignore
+  abstract class SelectionControlListItem extends base {
+    static styles = [
+      (base as unknown as typeof LitElement).styles ?? [],
+      css`
+        :host {
+          --u-list-item-block-padding: 0;
+          display: block;
+        }
+
+        :host(:not([disabled])) {
+          cursor: pointer;
+        }
+      `,
+    ];
+
+    @property({ type: Boolean }) leading = false;
+
+    protected override inputDescribedById = 'description';
+    protected override inputLabelledById = 'label';
+
+    override render(): HTMLTemplateResult {
+      return html`
+        <label>
+          <u-list-item ?selectable=${!this.disabled}>
+            <div slot="${this.leading ? 'leading' : 'trailing'}">${super.render()}</div>
+            <span id="label"><slot></slot></span>
+            <span id="description" slot="supporting-text"><slot name="supporting-text"></slot></span>
+          </u-list-item>
+        </label>
+      `;
+    }
+  }
+
+  return SelectionControlListItem;
+};

package/src/shared/selection-control/selection-control.styles.scss

@@ -0,0 +1,74 @@
+@use "../../scss/api";
+
+$control-name: '' !default;
+
+:host {
+  --_state-layer-padding: var(--u-#{$control-name}-state-layer-padding, 4px);
+  --_input-size: calc(var(--_width) - var(--_state-layer-padding) * 2);
+  --_indicator-color: var(--u-#{$control-name}-indicator-unselected-color, #{api.get-color-var(on-surface-variant)});
+
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.container {
+  cursor: pointer;
+  position: relative;
+  width: var(--_width);
+  height: var(--_height);
+  padding: var(--_state-layer-padding);
+  border-radius: #{api.get-shape-corner-var(full)};
+}
+
+:host([hide-state-layer]) {
+  .container {
+    width: var(--_indicator-size);
+    height: var(--_indicator-size);
+    padding: 0;
+  }
+
+  u-ripple {
+    display: none;
+  }
+}
+
+input {
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  border-radius: inherit;
+  appearance: none;
+}
+
+u-ripple {
+  padding: var(--_state-layer-padding);
+}
+
+.indicator-container {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inset: 0;
+  pointer-events: none
+}
+
+input:checked ~ .indicator-container {
+  --_indicator-color: var(--u-#{$control-name}-indicator-selected-color, #{api.get-color-var(primary)});
+}
+
+:host([disabled]) {
+
+  opacity: var(--u-#{$control-name}-disabled-state-opacity, .38);
+
+  input,
+  .container {
+    cursor: default;
+  }
+
+  .indicator-container {
+    --_indicator-color: var(--u-#{$control-name}-indicator-disabled-color, #{api.get-color-var(on-surface)});
+  }
+}

package/src/shared/selection-control/selection-control.ts

@@ -0,0 +1,180 @@
+import { PropertyValues } from '@lit/reactive-element';
+import { CSSResultGroup } from '@lit/reactive-element/css-tag';
+
+import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';
+import { property, query } from 'lit/decorators.js';
+
+import { styles as baseStyles } from '../base.styles.js';
+import { redispatchEvent } from '../events/redispatch-event.js';
+import { styles } from './selection-control.styles.js';
+
+import '../../ripple/ripple.js';
+
+export const isActivationClick = (event: Event) => {
+  // Event must start at the event target.
+  if (event.currentTarget !== event.target) {
+    return false;
+  }
+
+  // Event must not be retargeted from shadowRoot.
+  if (event.composedPath()[0] !== event.target) {
+    return false;
+  }
+
+  // Target must not be disabled; this should only occur for a synthetically
+  // dispatched click.
+  if ((event.target as EventTarget & { disabled: boolean }).disabled) {
+    return false;
+  }
+
+  // This is an activation if the event should not be squelched.
+  return !squelchEvent(event);
+};
+
+// TODO(https://bugzilla.mozilla.org/show_bug.cgi?id=1804576)
+//  Remove when Firefox bug is addressed.
+const squelchEvent = (event: Event) => {
+  const squelched = isSquelchingEvents;
+
+  if (squelched) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }
+
+  squelchEventsForMicrotask();
+  return squelched;
+};
+
+// Ignore events for one microtask only.
+let isSquelchingEvents = false;
+
+const squelchEventsForMicrotask = async () => {
+  isSquelchingEvents = true;
+  // Need to pause for just one microtask.
+  /* eslint-disable @typescript-eslint/await-thenable */
+  await null;
+  isSquelchingEvents = false;
+};
+
+export abstract class UmSelectionControl extends LitElement {
+  static override styles: CSSResultGroup = [baseStyles, styles];
+
+  static readonly formAssociated = true;
+
+  static override shadowRootOptions: ShadowRootInit = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+
+  protected readonly elementInternals: ElementInternals;
+
+  @property({ reflect: true }) name: string | undefined = '';
+  @property({ type: Boolean, reflect: true }) disabled = false;
+  @query('input') input!: HTMLInputElement;
+
+  get form(): HTMLFormElement | null {
+    return this.elementInternals.form;
+  }
+
+  override focus(options?: FocusOptions) {
+    this.input.focus(options);
+  }
+
+  #checked = false;
+
+  protected inputType: 'checkbox' | 'radio' = 'checkbox';
+  protected renderRipple = true;
+  protected inputDescribedById: string | undefined = undefined;
+  protected inputLabelledById: string | undefined = undefined;
+
+  protected abstract renderIndicator(): HTMLTemplateResult;
+
+  /**
+   * The element value to use in form submission when checked.
+   */
+  @property() value = 'on';
+
+  @property({ type: Boolean })
+  get checked() {
+    return this.input ? this.input.checked : this.#checked;
+  }
+
+  set checked(checked: boolean) {
+    this.#checked = checked;
+
+    if (this.input) {
+      this.input.checked = checked;
+    }
+
+    this.elementInternals.setFormValue(checked ? this.value : null);
+  }
+
+  @property({ type: Boolean, attribute: 'checked' }) private readonly _checkedAttribute = false;
+
+  protected constructor() {
+    super();
+    this.elementInternals = this.attachInternals();
+  }
+
+  override firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+
+    this.input.checked = this.#checked;
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+
+    this.addEventListener('click', this._handleClick);
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('click', this._handleClick);
+  }
+
+  protected override render(): HTMLTemplateResult {
+    const ripple = html`
+      <u-ripple ?disabled=${this.disabled} @click=${this.#handleRippleClick}></u-ripple>
+    `;
+
+    return html`
+      <div class="container">
+        ${this.renderRipple ? ripple : nothing}
+        <input
+          id="input"
+          type=${this.inputType}
+          class="focus-ring"
+          .checked=${this._checkedAttribute}
+          .disabled=${this.disabled}
+          aria-labelledby="${this.inputLabelledById || nothing}"
+          aria-describedby="${this.inputDescribedById || nothing}"
+          @input=${this.#handleInput}
+          @change=${this.#handleChange} />
+        <div class="indicator-container">${this.renderIndicator()}</div>
+      </div>
+    `;
+  }
+
+  #handleInput(event: Event) {
+    const target = event.target as HTMLInputElement;
+    this.checked = target.checked;
+    // <input> 'input' event bubbles and is composed, don't re-dispatch it.
+  }
+
+  #handleChange(event: Event) {
+    // <input> 'change' event is not composed, re-dispatch it.
+    redispatchEvent(this, event);
+  }
+
+  #handleRippleClick(e: Event) {
+    e.preventDefault();
+    this.input.click();
+  }
+
+  protected _handleClick(e: Event) {
+    if (isActivationClick(e)) {
+      this.input.click();
+    }
+  }
+}

package/src/shared/sets/set-base.styles.scss

@@ -0,0 +1,18 @@
+:host {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+:host([alignment=start]) {
+  justify-content: flex-start;
+}
+
+:host([alignment=center]) {
+  justify-content: center;
+}
+
+:host([alignment=end]) {
+  justify-content: flex-end;
+}

package/src/shared/sets/set-base.ts

@@ -0,0 +1,21 @@
+import { CSSResultGroup } from '@lit/reactive-element/css-tag';
+
+import { html, HTMLTemplateResult, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+
+import { styles } from './set-base.styles.js';
+
+export abstract class UmSetBase extends LitElement {
+
+  static override styles: CSSResultGroup = [styles];
+
+  /**
+   * Set the alignment of the set at the `start`, `center` or at the `end`.
+   */
+  @property({ reflect: true }) alignment: 'start' | 'center' | 'end' = 'start';
+
+  override render(): HTMLTemplateResult {
+    return html`
+      <slot></slot>`;
+  }
+}

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

@@ -0,0 +1,11 @@
+@use "../../scss/api";
+
+.container {
+  cursor: text;
+}
+
+:host([disabled]) {
+  .container {
+    cursor: default;
+  }
+}

package/src/shared/text-field-base/text-field-base.ts

@@ -0,0 +1,36 @@
+import { CSSResultGroup } from '@lit/reactive-element/css-tag';
+
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+
+import { UmFieldBase } from '../../field/field-base.js';
+import { styles } from './text-field-base.styles.js';
+
+export abstract class UmTextFieldBase extends UmFieldBase {
+  static readonly formAssociated = true;
+
+  static override styles: CSSResultGroup = [UmFieldBase.styles, styles];
+
+  static override shadowRootOptions: ShadowRootInit = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+
+  /**
+   * Whether the field is empty or not. This changes the behavior of the floating label when the field is not focused.
+   */
+  override empty = true;
+
+  @property({ reflect: true }) placeholder = '';
+
+  get form(): HTMLFormElement | null {
+    return this.elementInternals.form;
+  }
+
+  protected readonly elementInternals: ElementInternals;
+
+  constructor() {
+    super();
+    this.elementInternals = this.attachInternals();
+  }
+}

package/src/snackbar/snackbar.styles.scss

@@ -0,0 +1,88 @@
+@use "../scss/variables";
+@use "../scss/api";
+
+:host {
+  --u-elevation-level: var(--u-snackbar-elevation-level, 3);
+  --_snackbar-margin: var(--u-snackbar-margin, #{api.get-spacing-var(medium)});
+
+  position: fixed;
+  inset-inline: 0;
+  inset-block-end: 0;
+  padding: var(--_snackbar-margin);
+  z-index: var(--u-snackbar-z-index, 1070);
+  display: flex;
+  justify-content: center;
+}
+
+.snackbar {
+  display: flex;
+  align-items: center;
+  min-height: var(--u-snackbar-height, 48px);
+  color: var(--u-snackbar-text-color, #{api.get-color-var(on-inverse-surface)});
+  background-color: var(--u-snackbar-bg-color, #{api.get-color-var(inverse-surface)});
+  border-radius: var(--u-snackbar-shape, #{api.get-shape-corner-var(extra-small)});
+  animation-name: snackbar-fade-in;
+  animation-duration: 450ms;
+  animation-timing-function: variables.$awesome-cubic-bezier;
+  animation-fill-mode: forwards;
+  min-width: var(--u-snackbar-min-width, 100%);
+  max-width: var(--u-snackbar-max-width, 100%);
+
+  &.dismiss {
+    animation-name: snackbar-fade-out;
+  }
+}
+
+u-button {
+  color: #{api.get-color-var(inverse-primary)};
+  margin-inline: var(--u-snackbar-text-button-margin, #{api.get-spacing-var(small)});
+}
+
+u-icon-button {
+  color: #{api.get-color-var(on-inverse-surface)};
+  margin-inline: var(--u-snackbar-close-button-margin, #{api.get-spacing-var(extra-small)});;
+}
+
+.label {
+  flex: 1;
+  overflow: hidden;
+  color: var(--u-on-inverse-surface-color);
+  padding: var(--u-snackbar-text-margin, #{api.get-spacing-var(medium)});
+  line-height: 18px;
+}
+
+@include api.media-breakpoint-up(md) {
+  :host {
+    --_snackbar-margin: var(--u-snackbar-margin, #{api.get-spacing-var(large)});
+  }
+
+  .snackbar {
+    min-width: var(--u-snackbar-min-width, 288px);
+    max-width: var(--u-snackbar-max-width, 568px);
+  }
+}
+
+@keyframes snackbar-fade-in {
+  0% {
+    opacity: 0;
+    transform: scale3d(.5, .5, 1);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes snackbar-fade-out {
+  0% {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale3d(.5, .5, 1);
+  }
+}
+