@universal-material/web 3.0.138 → 3.0.140

package/src/select/select.styles.scss

@@ -0,0 +1,36 @@
+u-menu {
+  display: block;
+  width: 100%;
+
+  &::part(menu) {
+    min-width: 100%;
+    max-width: 50vw;
+  }
+}
+
+:host(:not([disabled])) .button {
+  cursor: pointer;
+}
+
+.button {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  appearance: none;
+}
+
+select {
+  pointer-events: none;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.list {
+  width: 2px;
+  height: 2px;
+  margin: -1px;
+  overflow: hidden;
+}

package/src/select/select.ts

@@ -0,0 +1,333 @@
+import { PropertyValues } from '@lit/reactive-element';
+
+import { html, svg, TemplateResult } from 'lit';
+import { customElement, query, state } from 'lit/decorators.js';
+import { html as staticHtml } from 'lit/static-html.js';
+
+import { UmMenu } from '../menu/menu.js';
+import { UmMenuField } from '../shared/menu-field/menu-field.js';
+import { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';
+import { ExtendedSelect } from './extended-select.js';
+import { UmOption } from './option.js';
+import { SelectNavigationController } from './select-navigation-controller.js';
+import { styles } from './select.styles.js';
+
+import './option.js';
+
+@customElement('u-select')
+export class UmSelect extends UmTextFieldBase implements UmMenuField {
+  static override styles = [UmTextFieldBase.styles, styles];
+
+  _nativeSelect: ExtendedSelect = (() => {
+    const select = document.createElement('select') as ExtendedSelect;
+    select.setAttribute('tabindex', '-1');
+    select.setAttribute('part', 'select');
+
+    return select;
+  })();
+
+  readonly #list: HTMLElement = (() => {
+    const list = document.createElement('div');
+    list.role = 'listbox';
+    list.id = 'list';
+    list.className = 'list';
+
+    return list;
+  })();
+
+  readonly #navigationController = new SelectNavigationController(this);
+  readonly #mutationObserver: MutationObserver;
+  #connected = false;
+
+  /**
+   * The `value` of the selected option
+   */
+  @state()
+  get value(): string {
+    return this._nativeSelect.value;
+  }
+
+  set value(value: string) {
+    this._nativeSelect.value = value;
+
+    if (!this.#connected) {
+      return;
+    }
+
+    this.elementInternals.setFormValue(value);
+  }
+
+  @query('u-menu', true) _menu!: UmMenu;
+  @query('.button', true) _button!: HTMLButtonElement;
+  @query('.input', true) _input!: HTMLElement;
+
+  /**
+   * The index of the selected option. When there's no selected option the value is `-1`.
+   */
+  @state()
+  get selectedIndex(): number {
+    return this._nativeSelect.selectedIndex;
+  }
+
+  set selectedIndex(index: number) {
+    this._nativeSelect.selectedIndex = index;
+  }
+
+  /**
+   * An `Array` containing the selected `UmOption` or empty if there's no selected option. Multiple selection is not supported.
+   */
+  get selectedOptions(): UmOption[] {
+    return this._nativeSelect.selectedOptions.length ? [this._nativeSelect.selectedOptions[0]._parent] : [];
+  }
+
+  get _options(): UmOption[] {
+    const options = Array.from(this.querySelectorAll<HTMLElement>('u-option'));
+
+    return options.filter(o => o instanceof UmOption);
+  }
+
+  constructor() {
+    super();
+
+    this.#mutationObserver = new MutationObserver(() => this._updateOptions());
+    this.#mutationObserver.observe(this, {
+      characterData: true,
+      childList: true,
+      subtree: true,
+    });
+  }
+
+  _updateOptions() {
+    const options = this._options;
+
+    for (const option of options) {
+      option._select = this;
+    }
+
+    this.#updateOptions(options);
+    this.#updateAccessibilityList(options);
+
+    const selectedOption = this.selectedOptions[0];
+
+    if (!selectedOption) {
+      return;
+    }
+
+    selectedOption.selected = selectedOption.selected;
+    this.empty = !selectedOption.textContent?.trim();
+    // this._button.setAttribute('aria-labelledby', selectedOption._listItem.id);
+  }
+
+  #updateOptions(options: UmOption[]) {
+    const maxLength = Math.max(options.length, this._nativeSelect.children.length);
+
+    for (let i = 0; i < maxLength; i++) {
+      const option = options[i];
+      const nativeOption = this._nativeSelect.children[i];
+
+      if (!option) {
+        nativeOption.remove();
+        continue;
+      }
+
+      option._nativeOption.textContent = option.textContent;
+
+      if (!nativeOption) {
+        this._nativeSelect.appendChild(option._nativeOption);
+        continue;
+      }
+
+      nativeOption.insertAdjacentElement('beforebegin', option._nativeOption);
+    }
+  }
+
+  #updateAccessibilityList(options: UmOption[]) {
+    const maxLength = Math.max(options.length, this.#list.children.length);
+
+    for (let i = 0; i < maxLength; i++) {
+      const option = options[i];
+      let item = this.#list.children[i];
+
+      if (!option) {
+        item.remove();
+        continue;
+      }
+
+      if (!item) {
+        item = this.#createListItem(`item-${i + 1}`);
+        this.#list.appendChild(item);
+      }
+
+      item.textContent = option.textContent;
+    }
+  }
+
+  #createListItem(id: string): HTMLElement {
+    const item = document.createElement('div');
+    item.role = 'option';
+    item.id = id;
+
+    item.textContent = this.textContent;
+
+    return item;
+  }
+
+  #setSelectedOption() {
+    const options = this._options;
+
+    const selectedClassOptions = options.filter(o => o.classList.contains('selected'));
+
+    let found = false;
+
+    for (const option of selectedClassOptions) {
+      if (option.selected) {
+        found = true;
+        continue;
+      }
+
+      option.classList.remove('selected');
+    }
+
+    if (found) {
+      return;
+    }
+
+    const selectedOption = this.selectedOptions[0];
+
+    if (selectedOption) {
+      selectedOption.classList.add('selected');
+    }
+  }
+
+  protected override renderControl(): TemplateResult {
+    return staticHtml`
+      <button 
+         class="button"
+         role="combobox"
+         aria-expanded="false"
+         aria-owns="select"
+         ?disabled=${this.disabled}></button>
+      <div class="input"></div>`;
+  }
+
+  protected override renderAfterContent(): TemplateResult {
+    return html`
+      <u-menu>
+        <slot></slot>
+      </u-menu>
+    `;
+  }
+
+  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="M480-360 280-560h400L480-360Z"/>
+      </svg>`;
+  }
+
+  protected override updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    this.empty = !this.selectedOptions[0]?.textContent?.trim();
+    this.elementInternals.setFormValue(this._nativeSelect.value || null);
+  }
+
+  override attributeChangedCallback(name: string, _old: string | null, value: string | null) {
+    super.attributeChangedCallback(name, _old, value);
+
+    if (name !== 'disabled') {
+      return;
+    }
+
+    this._nativeSelect.disabled = value === null;
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+
+    this.#connected = true;
+    this.#attach();
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.#detach();
+  }
+
+  readonly #handleClick = (e: MouseEvent) => {
+    this._menu.toggle();
+
+    if (!this._menu.open || !this.selectedOptions.length) {
+      return;
+    }
+
+    this.#navigationController.focusMenu(this.selectedOptions[0], 0, e.detail === 0, false);
+  };
+
+  #handleMenuClick(e: Event) {
+    e.stopPropagation();
+  }
+
+  readonly #handleMenuOpen = () => {
+    this._button.setAttribute('aria-expanded', 'true');
+    this.#setSelectedOption();
+  };
+
+  readonly #handleMenuOpened = () => {
+    if (!this.selectedOptions.length) {
+      return;
+    }
+
+    const option = this.selectedOptions[0];
+    option.scrollIntoView({ block: 'nearest' });
+  };
+
+  readonly #handleMenuClose = () => {
+    this._button.setAttribute('aria-expanded', 'false');
+    this.#navigationController.blurMenu();
+  };
+
+  async #attach(): Promise<void> {
+    await this.updateComplete;
+
+    this._nativeSelect.disabled = this.hasAttribute('disabled');
+
+    this.#navigationController.attach(this);
+    this._updateOptions();
+
+    if (this._nativeSelect.parentElement !== this._input) {
+      this._input.appendChild(this._nativeSelect);
+    }
+
+    this._input.appendChild(this.#list);
+    this._button.addEventListener('click', this.#handleClick);
+
+    this._menu.anchorElement = this._container;
+    this._menu.addEventListener('click', this.#handleMenuClick);
+    this._menu.addEventListener('open', this.#handleMenuOpen);
+    this._menu.addEventListener('opened', this.#handleMenuOpened);
+    this._menu.addEventListener('close', this.#handleMenuClose);
+  }
+
+  async #detach(): Promise<void> {
+    await this.updateComplete;
+
+    this.#navigationController.detach();
+    this.#connected = false;
+    this._button.removeEventListener('click', this.#handleClick);
+    this._menu.removeEventListener('click', this.#handleMenuClick);
+    this._menu.removeEventListener('open', this.#handleMenuOpen);
+    this._menu.removeEventListener('opened', this.#handleMenuOpened);
+    this._menu.removeEventListener('close', this.#handleMenuClose);
+  }
+
+  get _menuItems(): UmOption[] {
+    return this._options;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'u-select': UmSelect;
+  }
+}

package/src/shared/base.styles.scss

@@ -0,0 +1,29 @@
+@use "../scss/functions";
+
+:host,
+* {
+  --_focus-ring-outline-offset: var(--u-focus-ring-outline-offset, 2px);
+  font-family: #{functions.get-font-family-var()};
+  box-sizing: border-box;
+  outline: 0;
+}
+
+:host(.force-focus-ring) .focus-ring,
+.focus-ring:focus-visible {
+  --_color-primary: #{functions.get-color-var(primary)};
+  animation: u-focus-pulse 500ms ease;
+  animation-fill-mode: forwards;
+  outline-offset: var(--_focus-ring-outline-offset);
+}
+
+@keyframes u-focus-pulse {
+  0% {
+    outline: 0 solid var(--_color-primary);
+  }
+  50% {
+    outline: 6px solid var(--_color-primary);
+  }
+  100% {
+    outline: 4px solid var(--_color-primary);
+  }
+}

package/src/shared/button-wrapper.styles.scss

@@ -0,0 +1,64 @@
+@use '../scss/functions';
+
+:host {
+  --_color-primary: #{functions.get-color-var(primary)};
+
+  -webkit-tap-highlight-color: transparent;
+  --u-elevation-level: 0;
+
+  position: relative;
+  display: inline-block;
+  font-family: #{functions.get-font-family-var()};
+  appearance: none !important;
+}
+
+:host([disabled]) {
+  --u-elevation-level: 0 !important;
+  background-color: var(--u-button-disabled-bg-color, #{functions.get-color-transparency-mix(functions.get-color-var(on-surface), var(--u-button-disabled-background-opacity, 12%))}) !important;
+  color: var(--u-button-disabled-text-color, #{functions.get-color-transparency-mix(functions.get-color-var(on-surface), var(--u-button-disabled-opacity, 38%))}) !important;
+}
+
+:host([disabled]) .button {
+  cursor: default;
+}
+
+* {
+  color: inherit;
+}
+
+u-elevation {
+  z-index: -1;
+}
+
+.button {
+  cursor: pointer;
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  width: 100%;
+  height: 100%;
+  font-family: inherit;
+  border-radius: inherit;
+  color: inherit;
+  border: none;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  white-space: nowrap;
+  background: transparent;
+  user-select: none;
+  text-decoration: none;
+  outline: 0;
+  z-index: 0;
+}
+
+.content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  border-radius: inherit;
+  width: 100%;
+  height: 100%;
+}
+

package/src/shared/button-wrapper.ts

@@ -0,0 +1,144 @@
+import { CSSResultGroup } from '@lit/reactive-element/css-tag';
+
+import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+
+import { UmRipple } from '../ripple/ripple.js';
+import { styles as baseStyles } from './base.styles.js';
+import { styles } from './button-wrapper.styles';
+import { redispatchEvent } from './events/redispatch-event.js';
+
+import '../elevation/elevation.js';
+import '../ripple/ripple.js';
+
+export abstract class UmButtonWrapper extends LitElement {
+  static override styles: CSSResultGroup = [baseStyles, styles];
+
+  /**
+   * Whether the button is disabled or not.
+   */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  @state() renderRipple = true;
+
+  /**
+   * The URL that the link button points to.
+   */
+  @property() href: string | undefined;
+
+  /**
+   * Where to display the linked `href` URL for a link button. Common options
+   * include `_blank` to open in a new tab.
+   */
+  @property() target: string | undefined;
+
+  @property() name: string | undefined;
+
+  @query('.button') readonly buttonElement!: HTMLElement;
+  @query('u-ripple') private readonly ripple!: UmRipple;
+
+  protected innerRole: string | null = null;
+
+  get pathname(): string {
+    return (this.buttonElement as HTMLAnchorElement)?.pathname;
+  }
+
+  protected override render(): HTMLTemplateResult {
+    return typeof this.href === 'string' ? this.renderLink() : this.renderButton();
+  }
+
+  private renderButton() {
+    return html`
+      <div class="content">${this.renderContent()}</div>
+      <button
+        id="button"
+        class="button focus-ring"
+        ?disabled=${this.disabled}
+        aria-label=${this.getAriaLabel() || nothing}
+        aria-labelledby="${this.getAriaLabel() ? nothing : 'text'}"
+        .role=${this.innerRole}
+        type="button"
+        @click=${this.#innerClickHandler}>
+        <u-ripple ?disabled=${this.disabled || !this.renderRipple}></u-ripple>
+        <u-elevation></u-elevation>
+      </button>
+    `;
+  }
+
+  private renderLink() {
+    return html`
+      <div class="content">${this.renderContent()}</div>
+      <a
+        id="link"
+        class="button"
+        href=${this.disabled ? nothing : this.href}
+        aria-disabled=${this.disabled || nothing}
+        aria-label=${this.ariaLabel || nothing}
+        aria-labelledby="${this.ariaLabel ? nothing : 'text'}"
+        .role=${this.innerRole}
+        target=${this.target || nothing}
+        @click=${this.#innerClickHandler}>
+        <u-elevation></u-elevation>
+        <u-ripple ?disabled=${this.disabled || !this.renderRipple}></u-ripple>
+      </a>
+    `;
+  }
+
+  protected abstract renderContent(): HTMLTemplateResult;
+
+  override connectedCallback() {
+    super.connectedCallback();
+
+    this.addEventListener('focus', this.innerFocusHandler);
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.removeEventListener('focus', this.innerFocusHandler);
+  }
+
+  override focus() {
+    this.buttonElement?.focus();
+  }
+
+  override blur() {
+    this.buttonElement?.blur();
+  }
+
+  protected getAriaLabel(): string | null {
+    return this.ariaLabel;
+  }
+
+  private innerFocusHandler(): void {
+    const tabIndexAttributeValue = this.getAttribute('tabindex');
+
+    if (tabIndexAttributeValue !== '0') {
+      return;
+    }
+
+    this.removeAttribute('tabindex');
+    setTimeout(() => this.buttonElement?.focus());
+  }
+
+  #innerClickHandler(event: MouseEvent): void {
+    if (this.disabled) {
+      return;
+    }
+
+    const preventDefault = !redispatchEvent(this, event);
+
+    if (preventDefault) {
+      return;
+    }
+
+    if (!(event as PointerEvent).pointerType) {
+      this.ripple.createRipple();
+    }
+
+    this.handleClick(event);
+  }
+
+  protected handleClick(_: UIEvent): void {
+  }
+}

package/src/shared/char-count-text-field/native-text-field-wrapper.ts

@@ -0,0 +1,54 @@
+import { property } from 'lit/decorators.js';
+
+import { UmTextFieldBase } from '../text-field-base/text-field-base.js';
+
+export abstract class UmNativeTextFieldWrapper extends UmTextFieldBase {
+  protected _value = '';
+  @property()
+  get value() {
+    return this._value;
+  }
+
+  set value(value: string) {
+    this._value = value;
+    this.empty = !value;
+    this.elementInternals.setFormValue(value);
+    this.#updateCounter();
+  }
+
+  @property({ reflect: true }) autocomplete: 'on' | 'off' | string | undefined;
+
+  #maxlength: number | undefined;
+
+  @property({ type: Number, reflect: true })
+  get maxlength(): number | undefined {
+    return this.#maxlength;
+  }
+
+  set maxlength(value: number) {
+    this.#maxlength = value;
+    this.#updateCounter();
+  }
+
+  @property({ reflect: true }) override role: string | null = null;
+
+  override focus() {
+    this.input.focus();
+  }
+
+  abstract input: HTMLInputElement | HTMLTextAreaElement;
+
+  protected _handleInput() {
+    this.value = this.input.value;
+    this.#updateCounter();
+  }
+
+  #updateCounter() {
+    if (this.maxlength) {
+      this._innerCounter = `${this.value.length}/${this.maxlength}`;
+      return;
+    }
+
+    this._innerCounter = undefined;
+  }
+}

package/src/shared/compare-text.ts

@@ -0,0 +1,6 @@
+import { normalizeText } from './normalize-text.js';
+
+export const normalizedStartsWith = (text: string | null, term: string | null): boolean =>
+  normalizeText(text)
+    .toLowerCase()
+    .startsWith(normalizeText(term).toLowerCase());

package/src/shared/events/redispatch-event.ts

@@ -0,0 +1,16 @@
+export const redispatchEvent = (element: Element, event: Event) => {
+  // For bubbling events in SSR light DOM (or composed), stop their propagation
+  // and dispatch the copy.
+  if (event.bubbles && (!element.shadowRoot || event.composed)) {
+    event.stopPropagation();
+  }
+
+  const copy = Reflect.construct(event.constructor, [event.type, event]);
+  const dispatched = element.dispatchEvent(copy);
+
+  if (!dispatched) {
+    event.preventDefault();
+  }
+
+  return dispatched;
+};

package/src/shared/extract-template-html.ts

@@ -0,0 +1,9 @@
+export const extractTemplateHtml = (template: HTMLTemplateElement) => {
+  let html = '';
+
+  for (const child of Array.from(template.content.children)) {
+    html += child.outerHTML;
+  }
+
+  return html;
+};