@universal-material/web 3.0.140 → 3.0.141

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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