@universal-material/web 3.0.140 → 3.0.142

package/src/typeahead/typeahead.ts

@@ -1,440 +0,0 @@
-import { html, HTMLTemplateResult, LitElement } from 'lit';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-import { customElement, property, query, queryAll, state } from 'lit/decorators.js';
-
-import { UmMenuItem } from '../menu/menu-item.js';
-import { UmMenu } from '../menu/menu.js';
-import { MenuFieldNavigationController } from '../shared/menu-field/menu-field-navigation-controller.js';
-import { normalizeText } from '../shared/normalize-text.js';
-import { styles } from './typeahead.styles.js';
-
-import '../menu/menu.js';
-import '../menu/menu-item.js';
-import './highlight.js';
-
-export interface Data {
-  label: string;
-  value: any;
-}
-
-@customElement('u-typeahead')
-export class UmTypeahead extends LitElement {
-  static readonly formAssociated = true;
-
-  static override styles = styles;
-
-  #targetId: string | undefined;
-
-  #connected = false;
-  private target:
-    | (HTMLElement & {
-      autocomplete: 'on' | 'off' | string | null;
-      input?: HTMLInputElement;
-      container?: HTMLElement;
-      value: string;
-    })
-    | null = null;
-  #documentMutationObserver: MutationObserver | null = null;
-  readonly #navigationController = new MenuFieldNavigationController(this);
-  #termNormalized = '';
-  #debounceTimeout: number | null = null;
-  #value: any;
-  readonly #elementInternals: ElementInternals;
-
-  // @ts-ignore
-  @state() private results: Data[];
-
-  /**
-   * The datasource of the typeahead. Accepts an `Array` or a `Promise<[]>`.
-   */
-  @state() source: (any[] | ((term: string) => Promise<any[]>)) | undefined;
-
-  /**
-   * A function return a string based on a result from the `source`. Useful when the source results are objects.
-   */
-  formatter: ((value: any) => string) | undefined;
-
-  /**
-   * A string representing an HTML to be rendered inside the menu item. If set, it will replace the `u-highlight`.
-   *
-   * _Note:_ Subject to signature change
-   */
-  template: ((term: string, value: any) => string) | undefined;
-
-  /**
-   * The time in milliseconds before triggering an update in the results.
-   */
-  @property({ type: Number, reflect: true }) debounce = 300;
-
-  /**
-   * The number of suggestions to show
-   */
-  @property({ type: Number, reflect: true }) limit = 10;
-
-  /**
-   * How many characters must be typed before show suggestions
-   *
-   * _Note:_ Not used when the source is a `Promise`
-   */
-  @property({ type: Number, reflect: true }) minLength = 2;
-
-  /**
-   * Whether the menu will be show when the target get focus.
-   *
-   * _Note:_ The `minLength` will still be applied
-   */
-  @property({ type: Boolean, attribute: 'open-on-focus', reflect: true })
-  openOnFocus = false;
-
-  /**
-   * If `true`, model values will not be restricted only to items selected from the menu.
-   */
-  @property({ type: Boolean, reflect: true }) editable = false;
-
-  /**
-   * The value for the `autocomplete` attribute for the target element.
-   */
-  @property({ reflect: true }) autocomplete: 'on' | 'off' | string = 'off';
-
-  /**
-   * The value for the `spellcheck` attribute for the target element.
-   */
-  @property({ reflect: true }) override spellcheck = false;
-
-  get form(): HTMLFormElement | null {
-    return this.#elementInternals.form;
-  }
-
-  /**
-   * Gets or sets the current value of the typeahead.
-   */
-  get value(): any {
-    return this.#value;
-  }
-
-  set value(value: any) {
-    this.#value = value;
-    this.#elementInternals.setFormValue(value);
-
-    if (this.#connected) {
-      this.#setValueOnTarget();
-    }
-  }
-
-  override focus() {
-    this.target?.focus();
-  }
-
-  clear() {
-    if (!this.target) {
-      return;
-    }
-
-    this.#termNormalized = '';
-    this.setTargetValue('');
-  }
-
-  /**
-   * The id of the target element to attach the typeahead.
-   */
-  @property({ reflect: true, attribute: 'target-id' })
-  get targetId(): string | undefined {
-    return this.#targetId;
-  }
-
-  set targetId(value: string | undefined) {
-    this.#targetId = value;
-
-    if (this.#connected) {
-      this.#attach();
-    }
-  }
-
-  @query('u-menu') _menu!: UmMenu;
-  @queryAll('u-menu-item') menuItems!: NodeListOf<UmMenuItem>;
-
-  get _menuItems(): UmMenuItem[] {
-    return Array.from(this.menuItems);
-  }
-
-  constructor() {
-    super();
-    this.#elementInternals = this.attachInternals();
-  }
-
-  override attributeChangedCallback(name: string, _old: string | null, value: string | null) {
-    super.attributeChangedCallback(name, _old, value);
-
-    if (!this.target) {
-      return;
-    }
-
-    if (name === 'autocomplete') {
-      this.target.autocomplete = value;
-    }
-
-    if (name === 'spellcheck') {
-      this.target.spellcheck = value === 'true';
-    }
-  }
-
-  override connectedCallback() {
-    super.connectedCallback();
-    this.#connected = true;
-    this.#attach();
-    this.#documentMutationObserver = new MutationObserver(() => this.#attach());
-    this.#documentMutationObserver.observe(document, {
-      attributes: true,
-      childList: true,
-    });
-  }
-
-  override disconnectedCallback() {
-    super.disconnectedCallback();
-    this.#connected = false;
-    this.#detach();
-    this.#documentMutationObserver!.disconnect();
-    this.#documentMutationObserver = null;
-  }
-
-  #attach() {
-    if (!this.targetId) {
-      this.#detach();
-      return;
-    }
-
-    const newTarget = document.getElementById(this.targetId) as HTMLInputElement;
-
-    if (newTarget === this.target) {
-      return;
-    }
-
-    this.#detach();
-
-    if (!newTarget) {
-      return;
-    }
-
-    // @ts-ignore
-    this.target = newTarget;
-    newTarget.role = 'combobox';
-    newTarget.autocomplete = this.autocomplete as any;
-    newTarget.spellcheck = this.spellcheck;
-    newTarget.autocapitalize = 'off';
-
-    newTarget.addEventListener('click', this.#handleClick);
-    newTarget.addEventListener('input', this.#handleInput);
-    this.#navigationController.attach(newTarget);
-    newTarget.addEventListener('focus', this.#handleFocus);
-
-    if (this.value) {
-      this.#setValueOnTarget();
-    }
-  }
-
-  #detach() {
-    this.target?.removeEventListener('click', this.#handleClick);
-    this.target?.removeEventListener('input', this.#handleInput);
-    this.#navigationController.detach();
-    this.target?.removeEventListener('focus', this.#handleFocus);
-  }
-
-  #handleItemMouseDown(e: Event) {
-    e.preventDefault();
-  }
-
-  #handleClick(e: Event) {
-    e.stopPropagation();
-  }
-
-  readonly #handleFocus = async () => {
-    if (this.openOnFocus) {
-      await this.#updateResults();
-    }
-  };
-
-  readonly #handleInput = () => {
-    if (this.#debounceTimeout) {
-      clearTimeout(this.#debounceTimeout);
-    }
-
-    this.#setValueAndDispatchEvents(this.editable ? this.getTargetValue() : null, true);
-
-    this.#debounceTimeout = setTimeout(async () => await this.#updateResults(true), this.debounce);
-  };
-
-  #getItemClickHandler(data: Data) {
-    return () => {
-      const selectedEvent = new CustomEvent('selected', {
-        cancelable: true,
-        detail: data.value,
-      });
-
-      this.dispatchEvent(selectedEvent);
-
-      if (selectedEvent.defaultPrevented) {
-        return;
-      }
-
-      this.#setValueAndDispatchEvents(data.value);
-    };
-  }
-
-  #setValueAndDispatchEvents(value: any, direct = false) {
-    if (!direct) {
-      this.value = value;
-    } else {
-      this.#value = value;
-      this.#elementInternals.setFormValue(value);
-    }
-
-    this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
-    this.dispatchEvent(new Event('change', { bubbles: true }));
-  }
-
-  protected override render(): HTMLTemplateResult {
-    if (!this.results?.length) {
-      return html``;
-    }
-
-    setTimeout(() => {
-      this._menu.anchorElement = this.getMenuAnchor();
-      this._menu.open = true;
-      this.#navigationController.focusMenu(this._menuItems[0], 0);
-    });
-
-    return html`
-      <u-menu manualFocus manualClose anchor-corner="auto-start">
-        ${this.results.map(result => {
-          const content = this.template
-            ? unsafeHTML(this.template(this.#termNormalized, result.value))
-            : html`
-                <u-highlight .term=${this.#termNormalized} .result=${result.label}></u-highlight>
-              `;
-
-          return html`
-            <u-menu-item
-              @mousedown=${this.#handleItemMouseDown}
-              @click=${this.#getItemClickHandler(result)}
-              tabindex="-1">
-              ${content}
-            </u-menu-item>
-          `;
-        })}
-      </u-menu>
-    `;
-  }
-
-  async #updateResults(lazy = false) {
-    const term = this.getTargetValue();
-
-    const termNormalized = normalizeText(term).toLowerCase();
-
-    if (lazy && termNormalized === this.#termNormalized && this._menu?.open === true) {
-      return;
-    }
-
-    this.#termNormalized = termNormalized;
-
-    if (termNormalized.length < this.minLength) {
-      this.results = [];
-      return;
-    }
-
-    this.results = await this.#getData();
-    this.results = this.results.slice(0, this.limit || this.results.length);
-  }
-
-  async #getData(): Promise<Data[]> {
-    if (!this.source) {
-      return [];
-    }
-
-    let values: any[];
-
-    let filter = false;
-
-    if (this.source instanceof Array) {
-      values = this.source;
-      filter = true;
-    } else {
-      const source = this.source as (term: string) => Promise<any[]>;
-      values = await source(this.#termNormalized);
-    }
-
-    const result = values.map(source => ({
-      label: this.formatter ? this.formatter(source) : source.toString(),
-      value: source,
-    }));
-
-    if (!filter) {
-      return result;
-    }
-
-    return result.filter(t => normalizeText(t.label).toLowerCase()
-      .includes(this.#termNormalized));
-  }
-
-  #setValueOnTarget() {
-    if (!this.target) {
-      return;
-    }
-
-    const textValue = this.getTextValue();
-    this.#termNormalized = normalizeText(textValue)?.toLowerCase();
-
-    if (this.target.tagName === 'U-TEXT-FIELD') {
-      this.target.value = textValue;
-      return;
-    }
-
-    if (this.target.input) {
-      this.target.input.value = textValue;
-      return;
-    }
-
-    this.target.value = textValue;
-  }
-
-  private getTargetValue(): string {
-    return this.target!.input?.value ?? this.target!.value;
-  }
-
-  private setTargetValue(value: string): void {
-    const targetInput = this.target?.input ?? this.target;
-
-    if (targetInput) {
-      targetInput.value = value;
-    }
-  }
-
-  private getMenuAnchor() {
-    if (!this.target) {
-      return null;
-    }
-
-    if (this.target.tagName === 'U-CHIP-FIELD') {
-      return this.target.input;
-    }
-
-    if (this.target.tagName === 'U-TEXT-FIELD') {
-      return this.target.container;
-    }
-
-    return this.target;
-  }
-
-  private getTextValue(): string {
-    if (!this.value) {
-      return '';
-    }
-
-    return this.formatter ? this.formatter(this.value) : this.value;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-typeahead': UmTypeahead;
-  }
-}

package/tsconfig.json

@@ -1,49 +0,0 @@
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "lib": ["es2021", "DOM", "DOM.Iterable"],
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true,
-    "inlineSources": true,
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "strict": true,
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "noImplicitAny": true,
-    "noImplicitThis": true,
-    "skipLibCheck": true,
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "experimentalDecorators": true,
-    "moduleResolution": "node",
-    "importHelpers": true,
-    "target": "ES2022",
-    "module": "ES2022",
-    "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true,
-    "useDefineForClassFields": false,
-    "plugins": [
-      {
-        "name": "ts-lit-plugin",
-        "strict": true
-      }
-    ],
-    "types": ["mocha"]
-  },
-  "include": ["src/**/*.ts"],
-  "exclude": [
-    "./node_modules/lit/decorators.d.ts"
-  ],
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
-  }
-}

package/web-dev-server.config.js

@@ -1,25 +0,0 @@
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-
-import {legacyPlugin} from '@web/dev-server-legacy';
-
-const mode = process.env.MODE || 'dev';
-if (!['dev', 'prod'].includes(mode)) {
-  throw new Error(`MODE must be "dev" or "prod", was "${mode}"`);
-}
-
-export default {
-  nodeResolve: {exportConditions: mode === 'dev' ? ['development'] : []},
-  preserveSymlinks: true,
-  plugins: [
-    legacyPlugin({
-      polyfills: {
-        // Manually imported in index.html file
-        webcomponents: false,
-      },
-    }),
-  ],
-};

package/web-test-runner.config.js

@@ -1,120 +0,0 @@
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-
-import {legacyPlugin} from '@web/dev-server-legacy';
-import {playwrightLauncher} from '@web/test-runner-playwright';
-
-const mode = process.env.MODE || 'dev';
-if (!['dev', 'prod'].includes(mode)) {
-  throw new Error(`MODE must be "dev" or "prod", was "${mode}"`);
-}
-
-// Uncomment for testing on Sauce Labs
-// Must run `npm i --save-dev @web/test-runner-saucelabs` and set
-// SAUCE_USERNAME and SAUCE_USERNAME environment variables
-// ===========
-// import {createSauceLabsLauncher} from '@web/test-runner-saucelabs';
-// const sauceLabsLauncher = createSauceLabsLauncher(
-//   {
-//     user: process.env.SAUCE_USERNAME,
-//     key: process.env.SAUCE_USERNAME,
-//   },
-//   {
-//     'sauce:options': {
-//       name: 'unit tests',
-//       build: `${process.env.GITHUB_REF ?? 'local'} build ${
-//         process.env.GITHUB_RUN_NUMBER ?? ''
-//       }`,
-//     },
-//   }
-// );
-
-// Uncomment for testing on BrowserStack
-// Must run `npm i --save-dev @web/test-runner-browserstack` and set
-// BROWSER_STACK_USERNAME and BROWSER_STACK_ACCESS_KEY environment variables
-// ===========
-// import {browserstackLauncher as createBrowserstackLauncher} from '@web/test-runner-browserstack';
-// const browserstackLauncher = (config) => createBrowserstackLauncher({
-//   capabilities: {
-//     'browserstack.user': process.env.BROWSER_STACK_USERNAME,
-//     'browserstack.key': process.env.BROWSER_STACK_ACCESS_KEY,
-//     project: 'my-element',
-//     name: 'unit tests',
-//     build: `${process.env.GITHUB_REF ?? 'local'} build ${
-//       process.env.GITHUB_RUN_NUMBER ?? ''
-//     }`,
-//     ...config,
-//   }
-// });
-
-const browsers = {
-  // Local browser testing via playwright
-  // ===========
-  chromium: playwrightLauncher({product: 'chromium'}),
-  firefox: playwrightLauncher({product: 'firefox'}),
-  webkit: playwrightLauncher({product: 'webkit'}),
-
-  // Uncomment example launchers for running on Sauce Labs
-  // ===========
-  // chromium: sauceLabsLauncher({browserName: 'chrome', browserVersion: 'latest', platformName: 'Windows 10'}),
-  // firefox: sauceLabsLauncher({browserName: 'firefox', browserVersion: 'latest', platformName: 'Windows 10'}),
-  // safari: sauceLabsLauncher({browserName: 'safari', browserVersion: 'latest', platformName: 'macOS 10.15'}),
-
-  // Uncomment example launchers for running on Sauce Labs
-  // ===========
-  // chromium: browserstackLauncher({browserName: 'Chrome', os: 'Windows', os_version: '10'}),
-  // firefox: browserstackLauncher({browserName: 'Firefox', os: 'Windows', os_version: '10'}),
-  // safari: browserstackLauncher({browserName: 'Safari', browser_version: '14.0', os: 'OS X', os_version: 'Big Sur'}),
-};
-
-// Prepend BROWSERS=x,y to `npm run test` to run a subset of browsers
-// e.g. `BROWSERS=chromium,firefox npm run test`
-const noBrowser = (b) => {
-  throw new Error(`No browser configured named '${b}'; using defaults`);
-};
-let commandLineBrowsers;
-try {
-  commandLineBrowsers = process.env.BROWSERS?.split(',').map(
-    (b) => browsers[b] ?? noBrowser(b)
-  );
-} catch (e) {
-  console.warn(e);
-}
-
-// https://modern-web.dev/docs/test-runner/cli-and-configuration/
-export default {
-  rootDir: '.',
-  files: ['./test/**/*_test.js'],
-  nodeResolve: {exportConditions: mode === 'dev' ? ['development'] : []},
-  preserveSymlinks: true,
-  browsers: commandLineBrowsers ?? Object.values(browsers),
-  testFramework: {
-    // https://mochajs.org/api/mocha
-    config: {
-      ui: 'tdd',
-      timeout: '60000',
-    },
-  },
-  plugins: [
-    // Detect browsers without modules (e.g. IE11) and transform to SystemJS
-    // (https://modern-web.dev/docs/dev-server/plugins/legacy/).
-    legacyPlugin({
-      polyfills: {
-        webcomponents: true,
-        // Inject lit's polyfill-support module into test files, which is required
-        // for interfacing with the webcomponents polyfills
-        custom: [
-          {
-            name: 'lit-polyfill-support',
-            path: 'node_modules/lit/polyfill-support.js',
-            test: "!('attachShadow' in Element.prototype) || !('getRootNode' in Element.prototype) || window.ShadyDOM && window.ShadyDOM.force",
-            module: false,
-          },
-        ],
-      },
-    }),
-  ],
-};