@universal-material/web 3.0.140 → 3.0.142

package/src/select/select.styles.scss

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

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

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

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

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

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

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

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

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