@universal-material/web 3.0.138 → 3.0.140

package/src/typeahead/typeahead.ts

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

@@ -0,0 +1,49 @@
+{
+  "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

@@ -0,0 +1,25 @@
+/**
+ * @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

@@ -0,0 +1,120 @@
+/**
+ * @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,
+          },
+        ],
+      },
+    }),
+  ],
+};

package/app-bar/top-app-bar.d.ts

@@ -1,47 +0,0 @@
-import { PropertyValues } from '@lit/reactive-element';
-import { HTMLTemplateResult, LitElement } from 'lit';
-export declare class UmTopAppBar extends LitElement {
-    #private;
-    static styles: import("lit").CSSResult[];
-    /**
-     * Whether the app bar has leading icon or not
-     *
-     * _Note:_ Readonly
-     */
-    hasLeadingIcon: boolean;
-    /**
-     * Whether the app bar has trailing icon or not
-     *
-     * _Note:_ Readonly
-     */
-    hasTrailingIcon: boolean;
-    position: 'fixed' | 'absolute' | 'static';
-    size: 'small' | 'medium' | 'large';
-    headline: string;
-    get scrollContainer(): 'none' | 'window' | string | undefined;
-    set scrollContainer(idOrElement: string | HTMLElement | undefined);
-    containerScrolled: boolean;
-    private readonly assignedLeadingIcons;
-    private readonly assignedTrailingIcons;
-    private readonly _container;
-    private readonly _extendedContent;
-    private readonly _headlineElement;
-    private containerSizeObserver;
-    private scrollContainerElement;
-    private getScrollContainer;
-    private handleLeadingIconSlotChange;
-    private handleTrailingIconSlotChange;
-    render(): HTMLTemplateResult;
-    protected updated(_changedProperties: PropertyValues): void;
-    firstUpdated(changedProperties: PropertyValues): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private static getScrollTop;
-    private setContentHeightProperty;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'u-top-app-bar': UmTopAppBar;
-    }
-}
-//# sourceMappingURL=top-app-bar.d.ts.map

package/app-bar/top-app-bar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"top-app-bar.d.ts","sourceRoot":"","sources":["../../src/app-bar/top-app-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAMpE,qBACa,WAAY,SAAQ,UAAU;;IACzC,OAAgB,MAAM,4BAAwB;IAE9C;;;;OAIG;IAEH,cAAc,UAAS;IAEvB;;;;OAIG;IAEH,eAAe,UAAS;IAGxB,QAAQ,EAAE,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAW;IAGpD,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAW;IAEjC,QAAQ,SAAM;IAE1B,IACI,eAAe,IAAI,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAE5D;IAED,IAAI,eAAe,CAAC,WAAW,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,EAShE;IAGD,iBAAiB,UAAS;IAG1B,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAiB;IAGtD,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAiB;IAE5B,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAe;IACzC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAe;IACxD,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAe;IAEpE,OAAO,CAAC,qBAAqB,CAA+B;IAE5D,OAAO,CAAC,sBAAsB,CAGd;IAEhB,OAAO,CAAC,kBAAkB;IAiB1B,OAAO,CAAC,2BAA2B;IAInC,OAAO,CAAC,4BAA4B;IAI3B,MAAM,IAAI,kBAAkB;cA6BlB,OAAO,CAAC,kBAAkB,EAAE,cAAc;IAKpD,YAAY,CAAC,iBAAiB,EAAE,cAAc;IAO9C,iBAAiB;IAMjB,oBAAoB;IAgC7B,OAAO,CAAC,MAAM,CAAC,YAAY;IAY3B,OAAO,CAAC,wBAAwB;CAGjC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}