@universal-material/web 3.0.139 → 3.0.140

package/src/radio/radio.ts

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

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

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

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

package/src/select/extended-select.ts

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

package/src/select/option.styles.scss

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

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

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