@universal-material/web 3.0.140 → 3.0.142

package/src/radio/radio.ts

@@ -1,164 +0,0 @@
-import { PropertyValues } from '@lit/reactive-element';
-
-import { html, HTMLTemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-
-import { UmSelectionControl } from '../shared/selection-control/selection-control.js';
-import { styles } from './radio.styles.js';
-
-@customElement('u-radio')
-export class UmRadio extends UmSelectionControl {
-  static override styles = [UmSelectionControl.styles, styles];
-
-  @property({ type: Boolean, attribute: 'hide-state-layer', reflect: true }) hideStateLayer = false;
-
-  protected override inputType: 'radio' | 'checkbox' = 'radio';
-
-  protected override renderIndicator(): HTMLTemplateResult {
-    return html`
-      <div class="indicator"></div>
-    `;
-  }
-
-  override get checked() {
-    return super.checked;
-  }
-
-  override set checked(value: boolean) {
-    super.checked = value;
-
-    if (!value) {
-      return;
-    }
-
-    this.uncheckSiblings();
-
-    if (this.input) {
-      this.input.tabIndex = 0;
-    }
-  }
-
-  get #siblings(): UmRadio[] {
-    if (!this.name) {
-      return [this];
-    }
-
-    return Array.from((this.getRootNode() as Element).querySelectorAll<UmRadio>(`${this.tagName}[name="${this.name}"]`));
-  }
-
-  constructor() {
-    super();
-  }
-
-  override firstUpdated(changedProperties: PropertyValues) {
-    super.firstUpdated(changedProperties);
-
-    this.ensureOnlyOneChecked();
-  }
-
-  override connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener('keydown', this.#handleKeyDown);
-  }
-
-  override disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener('keydown', this.#handleKeyDown);
-  }
-
-  #handleKeyDown(event: KeyboardEvent) {
-    const isDown = event.key === 'ArrowDown';
-    const isUp = event.key === 'ArrowUp';
-    const isLeft = event.key === 'ArrowLeft';
-    const isRight = event.key === 'ArrowRight';
-
-    if (!isLeft && !isRight && !isDown && !isUp) {
-      return;
-    }
-
-    // Don't try to select another sibling if there aren't any.
-    const siblings = this.#siblings;
-
-    if (!siblings.length) {
-      return;
-    }
-
-    event.preventDefault();
-
-    const isRtl = getComputedStyle(this).direction === 'rtl';
-    const forwards = isRtl ? isLeft || isDown : isRight || isDown;
-    const factor = forwards ? 1 : -1;
-
-    const thisIndex = siblings.indexOf(this);
-    let nextIndex = thisIndex + factor;
-
-    while (nextIndex !== thisIndex) {
-      if (nextIndex >= siblings.length) {
-        // Return to start if moving past the last item.
-        nextIndex = 0;
-      } else if (nextIndex < 0) {
-        // Go to end if moving before the first item.
-        nextIndex = siblings.length - 1;
-      }
-
-      const nextSibling = siblings[nextIndex];
-
-      if (nextSibling.disabled) {
-        nextIndex += factor;
-        continue;
-      }
-
-      const clickCanceled = !nextSibling.dispatchEvent(
-        new Event('click', {
-          bubbles: true,
-          cancelable: true,
-        }),
-      );
-
-      nextSibling.input.focus();
-
-      if (clickCanceled) {
-        break;
-      }
-
-      nextSibling.checked = true;
-      nextSibling.dispatchEvent(new Event('change', { bubbles: true }));
-      break;
-    }
-  }
-
-  private ensureOnlyOneChecked() {
-    if (!this.name) {
-      return;
-    }
-
-    const radios = Array.from(document.querySelectorAll<UmRadio>(`${this.tagName}[name="${this.name}"]`));
-    const lastChecked = radios.reverse().find(r => r.checked);
-
-    if (!lastChecked) {
-      return;
-    }
-
-    lastChecked.checked = true;
-  }
-
-  private uncheckSiblings() {
-    for (const radio of this.#siblings) {
-      if (radio === this) {
-        continue;
-      }
-
-      if (radio.input) {
-        radio.input.tabIndex = -1;
-      }
-
-      radio.checked = false;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-radio': UmRadio;
-  }
-}

package/src/ripple/ripple.styles.scss

@@ -1,81 +0,0 @@
-@use '../scss/variables';
-@use '../scss/api';
-
-:host,
-.ripple-container::before {
-  --_ripple-hover-color: var(--u-ripple-hover-color, var(--u-ripple-color, var(--u-state-layer-color, currentColor)));
-  --_ripple-pressed-color: var(--u-ripple-pressed-color, var(--u-ripple-color, var(--u-state-layer-color, currentColor)));
-  --_ripple-hover-opacity: var(--u-ripple-pressed-opacity, #{api.get-state-layer-opacity-var(hover)});
-  --_ripple-pressed-opacity: var(--u-ripple-pressed-opacity, .2);
-
-  display: block;
-  inset: 0;
-  isolation: isolate;
-}
-
-.ripple-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  border-radius: var(--u-ripple-border-radius, inherit);
-}
-
-.ripple-container::before {
-  content: '';
-  background: var(--_ripple-hover-color);
-  opacity: 0;
-  transition: opacity 200ms;
-}
-
-@media (hover: hover) {
-  :host(:not([disabled]):hover) .ripple-container::before {
-    content: '';
-    background: var(--_ripple-hover-color);
-    opacity: var(--_ripple-hover-opacity);
-  }
-}
-
-:host,
-.ripple-container::before,
-.ripple {
-  position: absolute;
-  border-radius: inherit;
-}
-
-.ripple {
-  top: 50%;
-  left: 50%;
-  background: var(--_ripple-pressed-color);
-  border-radius: 50%;
-  box-shadow: 0 0 64px 64px var(--_ripple-pressed-color);
-  opacity: var(--_ripple-pressed-opacity);
-  transform: scale3d(0, 0, 1);
-  pointer-events: none;
-  will-change: transform;
-
-  &.show {
-    transition:
-      transform calc(var(--_ripple-transition-duration) / var(--u-ripple-speed, 1)) variables.$awesome-cubic-bezier,
-      opacity calc(750ms / var(--u-ripple-speed, 1));
-    transform: scale3d(1, 1, 1);
-  }
-  &.show-forced {
-    transition:
-      transform calc(var(--_ripple-transition-duration) / var(--u-ripple-speed, 1)) variables.$awesome-cubic-bezier,
-      opacity calc(200ms / var(--u-ripple-speed, 1)) 300ms;
-    transform: scale3d(2, 2, 1);
-    opacity: 0;
-  }
-
-  &.dismiss {
-    opacity: 0;
-    transform: scale3d(2, 2, 1);
-  }
-}
-
-::slotted(*) {
-  position: absolute !important;
-  inset: 0;
-  border-radius: inherit;
-}

package/src/ripple/ripple.ts

@@ -1,158 +0,0 @@
-import { html, HTMLTemplateResult, LitElement } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-
-import { styles } from './ripple.styles.js';
-
-@customElement('u-ripple')
-export class UmRipple extends LitElement {
-
-  static override styles = styles;
-
-  private isTouching = false;
-
-  /**
-   * Disables the ripple.
-   */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  @query('.ripple-container') private readonly rippleContainer!: HTMLElement;
-
-  constructor() {
-    super();
-  }
-
-  override render(): HTMLTemplateResult {
-    return html`<div class="ripple-container"></div><slot></slot>`;
-  }
-
-  override connectedCallback() {
-    super.connectedCallback();
-
-    this.attachEvents();
-    this.ariaHidden = 'true';
-  }
-
-  override disconnectedCallback() {
-    super.disconnectedCallback();
-
-    this.dettachEvents();
-  }
-
-  private attachEvents(): void {
-
-    this.addEventListener('mousedown', this.handleMouseDown);
-    this.addEventListener('touchstart', this.handleTouchStart);
-  }
-
-  private dettachEvents(): void {
-
-    this.removeEventListener('mousedown', this.handleMouseDown);
-    this.removeEventListener('touchstart', this.handleTouchStart);
-  }
-
-  private handleMouseDown(e: MouseEvent): void {
-
-    if (this.isTouching || !this.canCreateRipple()) {
-      return;
-    }
-
-    this.createRipple(e.clientX, e.clientY, 'mouseup');
-  }
-
-  private handleTouchStart(e: TouchEvent): void {
-
-    if (!this.canCreateRipple()) {
-      return;
-    }
-
-    this.isTouching = true;
-
-    const dismiss = this.createRipple(e.touches[0].clientX, e.touches[0].clientY, 'touchend')!;
-
-    this.addEventListener('touchmove', dismiss);
-  }
-
-  private canCreateRipple(): boolean {
-    return !this.disabled;
-  }
-
-  createRipple(targetX: number | null = null, targetY: number | null = null, releaseEventName: string | null = null): (() => void) | null {
-    const preClientRect = this.rippleContainer.getBoundingClientRect();
-    targetX ??= preClientRect.x + this.rippleContainer.clientWidth / 2;
-    targetY ??= preClientRect.y + this.rippleContainer.clientHeight / 2;
-
-    const ripple = document.createElement('DIV');
-    ripple.classList.add('ripple');
-    this.rippleContainer.appendChild(ripple);
-
-    requestAnimationFrame(() => {
-      const clientRect = this.getBoundingClientRect();
-      const largestDimensionSize = Math.max(this.clientWidth, this.clientHeight);
-      const rippleSize = largestDimensionSize * 2;
-
-      UmRipple._setElementSquareSizeAndCenter(ripple, rippleSize);
-      ripple.style.setProperty('--_ripple-transition-duration', `${1080 * Math.pow(rippleSize, 0.3)}ms`);
-
-      const x = (targetX - clientRect.left) + ((rippleSize - this.rippleContainer.clientWidth) / 2);
-      const y = (targetY - clientRect.top) + ((rippleSize - this.rippleContainer.clientHeight) / 2);
-
-      ripple.style.transformOrigin = `${x}px ${y}px`;
-      ripple.classList.add(releaseEventName ? 'show' : 'show-forced');
-    });
-
-    const interval = setInterval(() => {
-
-      if (!ripple.classList.contains('dismiss') && !ripple.classList.contains('show-forced')) {
-        return;
-      }
-
-      const animations = ripple.getAnimations();
-
-      if (animations.length) {
-        return;
-      }
-
-      clearInterval(interval);
-      ripple.remove();
-    }, 1000);
-
-    if (!releaseEventName) {
-      return null;
-    }
-
-    return this.createDismissEvent(ripple, releaseEventName);
-  }
-
-  private createDismissEvent(ripple: HTMLElement, releaseEventName: string): () => void {
-    const dismiss = () => {
-      ripple.classList.add('dismiss');
-
-      this.isTouching = false;
-
-      this.removeEventListener('dragover', dismiss);
-      this.removeEventListener('mouseleave', dismiss);
-      window.removeEventListener(releaseEventName, dismiss);
-    };
-
-    this.addEventListener('dragover', dismiss);
-    this.addEventListener('mouseleave', dismiss);
-    window.addEventListener(releaseEventName, dismiss);
-
-    return dismiss;
-  }
-
-  private static _setElementSquareSizeAndCenter(element: HTMLElement, size: number) {
-    element.style.top = '50%';
-    element.style.left = '50%';
-    element.style.width = `${size}px`;
-    element.style.height = `${size}px`;
-    element.style.marginLeft = `${-size / 2}px`;
-    element.style.marginTop = `${-size / 2}px`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-ripple': UmRipple;
-  }
-}

package/src/select/extended-option.ts

@@ -1,3 +0,0 @@
-import { UmOption } from './option.js';
-
-export type ExtendedOption = HTMLOptionElement & { _parent: UmOption };

package/src/select/extended-select.ts

@@ -1,6 +0,0 @@
-import { ExtendedOption } from './extended-option.js';
-
-export type ExtendedSelect = HTMLSelectElement & {
-  options: ExtendedOption[];
-  selectedOptions: ExtendedOption[];
-};

package/src/select/option.styles.scss

@@ -1,16 +0,0 @@
-@use "../scss/api";
-
-:host(.selected) {
-  background-color: var(--u-select-option-selected-bg-color, #{api.get-color-transparency-mix(api.get-color-var(primary), 12%)});
-
-  .icon,
-  .content {
-    color: var(--u-select-option-selected-text-color, #{api.get-color-var(primary)});
-  }
-}
-
-:host(:not(.selected):not([has-trailing-icon])) {
-  .trailing {
-    display: none;
-  }
-}

package/src/select/option.ts

@@ -1,165 +0,0 @@
-import { svg, TemplateResult } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-
-import { UmMenuItem } from '../menu/menu-item.js';
-import { ExtendedOption } from './extended-option.js';
-import { styles } from './option.styles.js';
-import { UmSelect } from './select.js';
-
-import './select.js';
-
-@customElement('u-option')
-export class UmOption extends UmMenuItem {
-  static override styles = [UmMenuItem.styles, styles];
-
-  _nativeOption: ExtendedOption = (() => {
-    const option = document.createElement('option') as ExtendedOption;
-    option._parent = this;
-
-    if (this.hasAttribute('selected')) {
-      option.setAttribute('selected', '');
-    }
-
-    option.textContent = this.textContent;
-
-    return option;
-  })();
-
-  @property({ reflect: true })
-  get value(): string {
-    return this._nativeOption.value;
-  }
-
-  set value(value: string) {
-    this._nativeOption.value = value;
-  }
-
-  @state()
-  get selected(): boolean {
-    return this._nativeOption.selected;
-  }
-
-  set selected(selected: boolean) {
-    if (this.selected === selected) {
-      return;
-    }
-
-    this._nativeOption.selected = selected;
-
-    if (selected) {
-      this.classList.add('selected');
-    } else {
-      this.classList.remove('selected');
-    }
-
-    if (!this._select) {
-      return;
-    }
-
-    // this._select._button.setAttribute('aria-labelledby', this._listItem.id);
-    this._select.empty = !this._nativeOption.textContent?.trim();
-  }
-
-  protected override renderDefaultTrailingIcon(): TemplateResult {
-    return svg`
-      <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor">
-        <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/>
-      </svg>`;
-  }
-
-  @property({ type: Boolean, attribute: 'selected' })
-  // @ts-ignore
-  private get _selectedAttribute(): boolean {
-    return this._nativeOption.hasAttribute('selected');
-  }
-
-  // @ts-ignore
-  private set _selectedAttribute(selected: boolean) {
-    if (selected) {
-      this._nativeOption.setAttribute('selected', '');
-      return;
-    }
-
-    this._nativeOption.removeAttribute('selected');
-  }
-
-  _select!: UmSelect | null;
-
-  override connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener('click', this.#handleClick);
-    this.setAttribute('tabindex', '-1');
-
-    this.#attach();
-  }
-
-  override disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener('click', this.#handleClick);
-
-    if (this._select === this.parentElement) {
-      return;
-    }
-
-    this._nativeOption.remove();
-
-    if (!this._select) {
-      return;
-    }
-
-    this._select.value = this._select.value;
-    this._select = null;
-  }
-
-  async #attach(): Promise<void> {
-    if (this._select === this.parentElement) {
-      return;
-    }
-
-    this._select = this.parentElement instanceof UmSelect ? this.parentElement : null;
-
-    await this.#setNativeOption();
-  }
-
-  #handleClick(e: Event) {
-    if (!this._select) {
-      return;
-    }
-
-    e.stopPropagation();
-
-    this.setSelectedByUser();
-  }
-
-  setSelectedByUser() {
-    if (!this._select) {
-      return;
-    }
-
-    this._select.selectedOptions[0]?.classList.remove('selected');
-    this.selected = true;
-
-    this._select.value = this._select.value;
-    this._select.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
-    this._select.dispatchEvent(new Event('change', { bubbles: true }));
-
-    this._select._menu?.close();
-  }
-
-  #updateContent() {
-    this._nativeOption.textContent = this.textContent;
-  }
-
-  async #setNativeOption(): Promise<void> {
-    await this.updateComplete;
-    this.#updateContent();
-
-    this._select?._updateOptions();
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-option': UmOption;
-  }
-}

package/src/select/select-navigation-controller.ts

@@ -1,113 +0,0 @@
-import { normalizedStartsWith } from '../shared/compare-text.js';
-import { MenuFieldNavigationController } from '../shared/menu-field/menu-field-navigation-controller.js';
-import { UmOption } from './option.js';
-import { UmSelect } from './select.js';
-
-const getCleanTypeaheadStatus = () => ({
-  typing: false,
-  repeating: false,
-  buffer: '',
-  timeoutId: 0,
-});
-
-export class SelectNavigationController extends MenuFieldNavigationController<UmSelect, UmOption> {
-  #typeaheadStatus = getCleanTypeaheadStatus();
-
-  protected override handleKeyDown(event: KeyboardEvent): boolean {
-    if (this.host._menu.open) {
-      const handled = super.handleKeyDown(event);
-
-      return handled || this.handleType(event);
-    }
-
-    const isDown = event.key === 'ArrowDown';
-    const isUp = event.key === 'ArrowUp';
-
-    if (!isDown && !isUp) {
-      return this.handleType(event);
-    }
-
-    event.preventDefault();
-    this.host._menu.show();
-
-    if (!this.host.selectedOptions.length) {
-      return true;
-    }
-
-    const option = this.host.selectedOptions[0];
-    this.navigateTo(event, option, this.host._menuItems.indexOf(option));
-    return true;
-  }
-
-  override attach(element: HTMLElement) {
-    super.attach(element);
-    this.host._menu.addEventListener('menu-item-mouseenter', this.#handleMouseFocus);
-  }
-
-  override detach() {
-    super.detach();
-    this.host._menu.removeEventListener('menu-item-mouseenter', this.#handleMouseFocus);
-  }
-
-  readonly #handleMouseFocus = (e: Event) => {
-    this.blurMenu();
-    const option = e.target as UmOption;
-    this.focusMenu(option, this.host._menuItems.indexOf(option), false, false);
-  };
-
-  protected override afterFocus(_: UmOption, index: number) {
-    this.host._button.setAttribute('aria-activedescendant', `item-${index + 1}`);
-  }
-
-  protected override afterBlur() {
-    this.host._button.removeAttribute('aria-activedescendant');
-  }
-
-  private handleType(event: KeyboardEvent) {
-    if (event.key.length > 1) {
-      return false;
-    }
-
-    if (this.#typeaheadStatus.timeoutId) {
-      clearTimeout(this.#typeaheadStatus.timeoutId);
-    }
-
-    const lastFocusedMenu = this.focusedMenu;
-
-    this.#typeaheadStatus.buffer += event.key;
-
-    this.#typeaheadStatus.timeoutId = setTimeout(() => this.#typeaheadStatus = getCleanTypeaheadStatus(), 1000);
-
-    const term =
-      this.#typeaheadStatus.buffer.replaceAll(event.key, '') === '' ? event.key : this.#typeaheadStatus.buffer;
-    this.findNextElementByTerm(term, lastFocusedMenu);
-
-    return true;
-  }
-
-  private findNextElementByTerm(term: string, lastFocusedMenu: UmOption | null): void {
-    const options = this.host._options;
-    const lastFocusedMenuIndex = lastFocusedMenu ? options.indexOf(lastFocusedMenu) : -1;
-
-    let nextMenu =
-      lastFocusedMenuIndex > -1 ? this.host._options[lastFocusedMenuIndex + 1] as UmOption | undefined : null;
-
-    if (!nextMenu || !normalizedStartsWith(nextMenu.textContent, term)) {
-      nextMenu = options.find(o => normalizedStartsWith(o.textContent, term));
-    }
-
-    if (!nextMenu) {
-      return;
-    }
-
-    const nextMenuIndex = options.indexOf(nextMenu);
-
-    if (this.host._menu.open) {
-      this.blurMenu();
-      this.focusMenu(nextMenu, nextMenuIndex);
-      return;
-    }
-
-    nextMenu.setSelectedByUser();
-  }
-}