@material/web 0.1.0-alpha.0

package/controller/form-controller.js

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { bound } from '@material/web/decorators/bound.js';
+/**
+ * A unique symbol key for `FormController` elements to implement their
+ * `getFormValue()` function.
+ */
+export const getFormValue = Symbol('getFormValue');
+/**
+ * A `ReactiveController` that adds `<form>` support to an element.
+ */
+export class FormController {
+    /**
+     * Creates a new `FormController` for the given element.
+     *
+     * @param element The element to add `<form>` support to.
+     */
+    constructor(element) {
+        this.element = element;
+    }
+    hostConnected() {
+        // If the component internals are not in Shadow DOM, subscribing to form
+        // data events could lead to duplicated data, which may not work correctly
+        // on the server side.
+        if (!this.element.shadowRoot || window.ShadyDOM?.inUse) {
+            return;
+        }
+        // Preserve a reference to the form, since on hostDisconnected it may be
+        // null if the child was removed.
+        this.form = this.element.form;
+        this.form?.addEventListener('formdata', this.formDataListener);
+    }
+    hostDisconnected() {
+        this.form?.removeEventListener('formdata', this.formDataListener);
+    }
+    formDataListener(event) {
+        if (this.element.disabled) {
+            // Check for truthiness since some elements may not support disabling.
+            return;
+        }
+        const value = this.element[getFormValue]();
+        // If given a `FormData` instance, append all values to the form. This
+        // allows elements to customize what is added beyond a single name/value
+        // pair.
+        if (value instanceof FormData) {
+            for (const [key, dataValue] of value) {
+                event.formData.append(key, dataValue);
+            }
+            return;
+        }
+        // Do not associate the value with the form if there is no value or no name.
+        if (value === null || !this.element.name) {
+            return;
+        }
+        event.formData.append(this.element.name, value);
+    }
+}
+__decorate([
+    bound,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [FormDataEvent]),
+    __metadata("design:returntype", void 0)
+], FormController.prototype, "formDataListener", null);
+//# sourceMappingURL=form-controller.js.map

package/controller/form-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-controller.js","sourceRoot":"","sources":["form-controller.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,KAAK,EAAC,MAAM,mCAAmC,CAAC;AAmCxD;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;AAEnD;;GAEG;AACH,MAAM,OAAO,cAAc;IAGzB;;;;OAIG;IACH,YAA6B,OAAoB;QAApB,YAAO,GAAP,OAAO,CAAa;IAAG,CAAC;IAErD,aAAa;QACX,wEAAwE;QACxE,0EAA0E;QAC1E,sBAAsB;QACtB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,IAAI,MAAM,CAAC,QAAQ,EAAE,KAAK,EAAE;YACtD,OAAO;SACR;QAED,wEAAwE;QACxE,iCAAiC;QACjC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;QAC9B,IAAI,CAAC,IAAI,EAAE,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACjE,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,IAAI,EAAE,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACpE,CAAC;IAGO,gBAAgB,CAAC,KAAoB;QAC3C,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE;YACzB,sEAAsE;YACtE,OAAO;SACR;QAED,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;QAC3C,sEAAsE;QACtE,wEAAwE;QACxE,QAAQ;QACR,IAAI,KAAK,YAAY,QAAQ,EAAE;YAC7B,KAAK,MAAM,CAAC,GAAG,EAAE,SAAS,CAAC,IAAI,KAAK,EAAE;gBACpC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;aACvC;YACD,OAAO;SACR;QAED,4EAA4E;QAC5E,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;YACxC,OAAO;SACR;QAED,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAClD,CAAC;CACF;AAxBC;IADC,KAAK;;qCAC0B,aAAa;;sDAuB5C","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {bound} from '@material/web/decorators/bound.js';\nimport {ReactiveController, ReactiveControllerHost} from 'lit';\n\ndeclare global {\n  interface Window {\n    ShadyDOM?: {inUse: boolean;};\n  }\n}\n\n/**\n * An element that `FormController` may use.\n */\nexport interface FormElement extends ReactiveControllerHost, HTMLElement {\n  /**\n   * The `<form>` that this element is associated with.\n   */\n  readonly form: HTMLFormElement|null;\n  /**\n   * The name of the element in the form. This property should reflect to a\n   * `name` attribute.\n   */\n  name: string;\n  /**\n   * Whether or not this element is disabled. If present, this property should\n   * reflect to a `disabled` attribute.\n   */\n  disabled?: boolean;\n  /**\n   * A function that retrieves the current form value for this element.\n   *\n   * @return The current form value, or `null` if there is no value.\n   */\n  [getFormValue](): string|File|FormData|null;\n}\n\n/**\n * A unique symbol key for `FormController` elements to implement their\n * `getFormValue()` function.\n */\nexport const getFormValue = Symbol('getFormValue');\n\n/**\n * A `ReactiveController` that adds `<form>` support to an element.\n */\nexport class FormController implements ReactiveController {\n  private form?: HTMLFormElement|null;\n\n  /**\n   * Creates a new `FormController` for the given element.\n   *\n   * @param element The element to add `<form>` support to.\n   */\n  constructor(private readonly element: FormElement) {}\n\n  hostConnected() {\n    // If the component internals are not in Shadow DOM, subscribing to form\n    // data events could lead to duplicated data, which may not work correctly\n    // on the server side.\n    if (!this.element.shadowRoot || window.ShadyDOM?.inUse) {\n      return;\n    }\n\n    // Preserve a reference to the form, since on hostDisconnected it may be\n    // null if the child was removed.\n    this.form = this.element.form;\n    this.form?.addEventListener('formdata', this.formDataListener);\n  }\n\n  hostDisconnected() {\n    this.form?.removeEventListener('formdata', this.formDataListener);\n  }\n\n  @bound\n  private formDataListener(event: FormDataEvent) {\n    if (this.element.disabled) {\n      // Check for truthiness since some elements may not support disabling.\n      return;\n    }\n\n    const value = this.element[getFormValue]();\n    // If given a `FormData` instance, append all values to the form. This\n    // allows elements to customize what is added beyond a single name/value\n    // pair.\n    if (value instanceof FormData) {\n      for (const [key, dataValue] of value) {\n        event.formData.append(key, dataValue);\n      }\n      return;\n    }\n\n    // Do not associate the value with the form if there is no value or no name.\n    if (value === null || !this.element.name) {\n      return;\n    }\n\n    event.formData.append(this.element.name, value);\n  }\n}\n"]}

package/controller/foundation.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Legacy stateful foundation class for components.
+ */
+export declare class Foundation<Adapter extends object> {
+    protected adapter: Adapter;
+    constructor(adapter: Adapter);
+    protected init(): void;
+}
+/**
+ * The constructor for a foundation.
+ */
+export interface FoundationConstructor<Adapter extends object> {
+    new (adapter: Adapter): Foundation<Adapter>;
+    readonly prototype: Foundation<Adapter>;
+}
+/**
+ * Retrieves the adapter type from the provided foundation type.
+ */
+export declare type AdapterOf<FoundationType> = FoundationType extends Foundation<infer A> ? A : never;

package/controller/foundation.js

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Legacy stateful foundation class for components.
+ */
+export class Foundation {
+    constructor(adapter) {
+        this.adapter = adapter;
+        this.init();
+    }
+    init() {
+        // Subclasses should override this method to perform initialization routines
+    }
+}
+//# sourceMappingURL=foundation.js.map

package/controller/foundation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.js","sourceRoot":"","sources":["foundation.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;GAEG;AACH,MAAM,OAAO,UAAU;IACrB,YAAsB,OAAgB;QAAhB,YAAO,GAAP,OAAO,CAAS;QACpC,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAES,IAAI;QACZ,4EAA4E;IAC9E,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * Legacy stateful foundation class for components.\n */\nexport class Foundation<Adapter extends object> {\n  constructor(protected adapter: Adapter) {\n    this.init();\n  }\n\n  protected init() {\n    // Subclasses should override this method to perform initialization routines\n  }\n}\n\n/**\n * The constructor for a foundation.\n */\nexport interface FoundationConstructor<Adapter extends object> {\n  new(adapter: Adapter): Foundation<Adapter>;\n  readonly prototype: Foundation<Adapter>;\n}\n\n/**\n * Retrieves the adapter type from the provided foundation type.\n */\nexport type AdapterOf<FoundationType> =\n    FoundationType extends Foundation<infer A>? A : never;\n"]}

package/controller/observer-foundation.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Foundation } from './foundation.js';
+import { ObserverRecord } from './observer.js';
+/**
+ * Legacy observer foundation class for components.
+ */
+export declare class ObserverFoundation<Adapter extends object> extends Foundation<Adapter> {
+    /**
+     * Observe a target's properties for changes using the provided map of
+     * property names and observer functions.
+     *
+     * @template T The target type.
+     * @param target - The target to observe.
+     * @param observers - An object whose keys are target properties and values
+     *     are observer functions that are called when the associated property
+     *     changes.
+     * @return A cleanup function that can be called to unobserve the
+     *     target.
+     */
+    protected observe<T extends object>(target: T, observers: ObserverRecord<T, this>): () => void;
+}

package/controller/observer-foundation.js

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Foundation } from './foundation.js';
+import { observeProperty } from './observer.js';
+/**
+ * Legacy observer foundation class for components.
+ */
+export class ObserverFoundation extends Foundation {
+    /**
+     * Observe a target's properties for changes using the provided map of
+     * property names and observer functions.
+     *
+     * @template T The target type.
+     * @param target - The target to observe.
+     * @param observers - An object whose keys are target properties and values
+     *     are observer functions that are called when the associated property
+     *     changes.
+     * @return A cleanup function that can be called to unobserve the
+     *     target.
+     */
+    observe(target, observers) {
+        const cleanup = [];
+        for (const property of Object.keys(observers)) {
+            const observer = observers[property].bind(this);
+            cleanup.push(observeProperty(target, property, observer));
+        }
+        return () => {
+            for (const cleanupFn of cleanup) {
+                cleanupFn();
+            }
+        };
+    }
+}
+//# sourceMappingURL=observer-foundation.js.map

package/controller/observer-foundation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"observer-foundation.js","sourceRoot":"","sources":["observer-foundation.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAC,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAC,eAAe,EAAiB,MAAM,eAAe,CAAC;AAE9D;;GAEG;AACH,MAAM,OAAO,kBAA2C,SACpD,UAAmB;IACrB;;;;;;;;;;;OAWG;IACO,OAAO,CACb,MAAS,EAAE,SAAkC;QAC/C,MAAM,OAAO,GAAe,EAAE,CAAC;QAC/B,KAAK,MAAM,QAAQ,IAAI,MAAM,CAAC,IAAI,CAAC,SAAS,CAAmB,EAAE;YAC/D,MAAM,QAAQ,GAAG,SAAS,CAAC,QAAQ,CAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACjD,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;SAC3D;QAED,OAAO,GAAG,EAAE;YACV,KAAK,MAAM,SAAS,IAAI,OAAO,EAAE;gBAC/B,SAAS,EAAE,CAAC;aACb;QACH,CAAC,CAAC;IACJ,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Foundation} from './foundation.js';\nimport {observeProperty, ObserverRecord} from './observer.js';\n\n/**\n * Legacy observer foundation class for components.\n */\nexport class ObserverFoundation<Adapter extends object> extends\n    Foundation<Adapter> {\n  /**\n   * Observe a target's properties for changes using the provided map of\n   * property names and observer functions.\n   *\n   * @template T The target type.\n   * @param target - The target to observe.\n   * @param observers - An object whose keys are target properties and values\n   *     are observer functions that are called when the associated property\n   *     changes.\n   * @return A cleanup function that can be called to unobserve the\n   *     target.\n   */\n  protected observe<T extends object>(\n      target: T, observers: ObserverRecord<T, this>) {\n    const cleanup: Function[] = [];\n    for (const property of Object.keys(observers) as Array<keyof T>) {\n      const observer = observers[property]!.bind(this);\n      cleanup.push(observeProperty(target, property, observer));\n    }\n\n    return () => {\n      for (const cleanupFn of cleanup) {\n        cleanupFn();\n      }\n    };\n  }\n}\n"]}

package/controller/observer.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A function used to observe property changes on a target.
+ *
+ * @template T The observed target type.
+ * @template K The observed property.
+ * @template This The `this` context of the observer function.
+ * @param current - The current value of the property.
+ * @param previous - The previous value of the property.
+ */
+export declare type Observer<T extends object, K extends keyof T = keyof T, This = unknown> = (this: This, current: T[K], previous: T[K]) => void;
+/**
+ * An object map whose keys are properties of a target to observe and values
+ * are `Observer` functions for each property.
+ *
+ * @template T The observed target type.
+ * @template This The `this` context of observer functions.
+ */
+export declare type ObserverRecord<T extends object, This = unknown> = {
+    [K in keyof T]?: Observer<T, K, This>;
+};
+/**
+ * Observe a target's property for changes. When a property changes, the
+ * provided `Observer` function will be invoked with the properties current and
+ * previous values.
+ *
+ * The returned cleanup function will stop listening to changes for the
+ * provided `Observer`.
+ *
+ * @template T The observed target type.
+ * @template K The observed property.
+ * @param target - The target to observe.
+ * @param property - The property of the target to observe.
+ * @param observer - An observer function to invoke each time the property
+ *     changes.
+ * @return A cleanup function that will stop observing changes for the provided
+ *     `Observer`.
+ */
+export declare function observeProperty<T extends object, K extends keyof T>(target: T, property: K, observer: Observer<T, K>): () => void;
+/**
+ * Enables or disables all observers for a provided target. Changes to observed
+ * properties will not call any observers when disabled.
+ *
+ * @template T The observed target type.
+ * @param target - The target to enable or disable observers for.
+ * @param enabled - True to enable or false to disable observers.
+ */
+export declare function setObserversEnabled<T extends object>(target: T, enabled: boolean): void;

package/controller/observer.js

@@ -0,0 +1,149 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const isTargetObservers = Symbol();
+const isEnabled = Symbol();
+const getObservers = Symbol();
+/**
+ * Observe a target's property for changes. When a property changes, the
+ * provided `Observer` function will be invoked with the properties current and
+ * previous values.
+ *
+ * The returned cleanup function will stop listening to changes for the
+ * provided `Observer`.
+ *
+ * @template T The observed target type.
+ * @template K The observed property.
+ * @param target - The target to observe.
+ * @param property - The property of the target to observe.
+ * @param observer - An observer function to invoke each time the property
+ *     changes.
+ * @return A cleanup function that will stop observing changes for the provided
+ *     `Observer`.
+ */
+export function observeProperty(target, property, observer) {
+    const observerPrototype = installObserver(target);
+    const observers = observerPrototype[getObservers](property);
+    observers.push(observer);
+    return () => {
+        observers.splice(observers.indexOf(observer), 1);
+    };
+}
+/**
+ * Installs a `TargetObservers` for the provided target (if not already
+ * installed).
+ *
+ * A target's `TargetObservers` is installed as a Proxy on the target's
+ * prototype.
+ *
+ * @template T The observed target type.
+ * @param obj - The target to observe.
+ * @return The installed `TargetObservers` for the provided target.
+ */
+function installObserver(obj) {
+    const prototype = Object.getPrototypeOf(obj);
+    if (prototype[isTargetObservers]) {
+        return prototype;
+    }
+    // Proxy prototypes will not trap plain properties (not a getter/setter) that
+    // are already defined. They only work on new plain properties.
+    // We can work around this by deleting the properties, installing the Proxy,
+    // then re-setting the properties.
+    const existingKeyValues = new Map();
+    const keys = Object.getOwnPropertyNames(obj);
+    for (const key of keys) {
+        const descriptor = getDescriptor(obj, key);
+        if (descriptor && descriptor.writable) {
+            existingKeyValues.set(key, descriptor.value);
+            delete obj[key];
+        }
+    }
+    const proxy = new Proxy(Object.create(prototype), {
+        get(target, key, receiver) {
+            return Reflect.get(target, key, receiver);
+        },
+        set(target, key, newValue, receiver) {
+            const isTargetObserversKey = key === isTargetObservers ||
+                key === isEnabled || key === getObservers;
+            const previous = Reflect.get(target, key, receiver);
+            // If a key has an existing setter, invoke it with the receiver to
+            // preserve the correct `this` context.
+            // Otherwise, the key is either a new or existing plain property and
+            // should be set on the target. Setting a plain property on the
+            // receiver will cause the proxy to no longer be able to observe it.
+            const descriptor = getDescriptor(target, key);
+            if (descriptor?.set) {
+                Reflect.set(target, key, newValue, receiver);
+            }
+            else {
+                Reflect.set(target, key, newValue);
+            }
+            if (!isTargetObserversKey && proxy[isEnabled] &&
+                newValue !== previous) {
+                for (const observer of proxy[getObservers](key)) {
+                    observer(newValue, previous);
+                }
+            }
+            return true;
+        }
+    });
+    proxy[isTargetObservers] = true;
+    proxy[isEnabled] = true;
+    const observersMap = new Map();
+    proxy[getObservers] = (key) => {
+        const observers = observersMap.get(key) || [];
+        if (!observersMap.has(key)) {
+            observersMap.set(key, observers);
+        }
+        return observers;
+    };
+    Object.setPrototypeOf(obj, proxy);
+    // Re-set plain pre-existing properties so that the Proxy can trap them
+    for (const [key, value] of existingKeyValues.entries()) {
+        obj[key] = value;
+    }
+    return proxy;
+}
+/**
+ * Enables or disables all observers for a provided target. Changes to observed
+ * properties will not call any observers when disabled.
+ *
+ * @template T The observed target type.
+ * @param target - The target to enable or disable observers for.
+ * @param enabled - True to enable or false to disable observers.
+ */
+export function setObserversEnabled(target, enabled) {
+    const prototype = Object.getPrototypeOf(target);
+    if (prototype[isTargetObservers]) {
+        prototype[isEnabled] = enabled;
+    }
+}
+/**
+ * Retrieves the descriptor for a property from the provided target. This
+ * function will walk up the target's prototype chain to search for the
+ * descriptor.
+ *
+ * @template T The target type.
+ * @template K The property type.
+ * @param target - The target to retrieve a descriptor from.
+ * @param property - The name of the property to retrieve a descriptor for.
+ * @return the descriptor, or undefined if it does not exist. Keep in mind that
+ *     plain properties may not have a descriptor defined.
+ */
+function getDescriptor(target, property) {
+    let descriptorTarget = target;
+    let descriptor;
+    while (descriptorTarget) {
+        descriptor = Object.getOwnPropertyDescriptor(descriptorTarget, property);
+        if (descriptor) {
+            break;
+        }
+        // Walk up the instance's prototype chain in case the property is declared
+        // on a superclass.
+        descriptorTarget = Object.getPrototypeOf(descriptorTarget);
+    }
+    return descriptor;
+}
+//# sourceMappingURL=observer.js.map

package/controller/observer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"observer.js","sourceRoot":"","sources":["observer.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * A function used to observe property changes on a target.\n *\n * @template T The observed target type.\n * @template K The observed property.\n * @template This The `this` context of the observer function.\n * @param current - The current value of the property.\n * @param previous - The previous value of the property.\n */\nexport type Observer<T extends object, K extends keyof T = keyof T,\n                                                 This = unknown> =\n    (this: This, current: T[K], previous: T[K]) => void;\n\n/**\n * An object map whose keys are properties of a target to observe and values\n * are `Observer` functions for each property.\n *\n * @template T The observed target type.\n * @template This The `this` context of observer functions.\n */\nexport type ObserverRecord<T extends object, This = unknown> = {\n  [K in keyof T]?: Observer<T, K, This>;\n};\n\nconst isTargetObservers = Symbol();\nconst isEnabled = Symbol();\nconst getObservers = Symbol();\n\n/**\n * A manager for observers listening to a target. A target's `prototype` is its\n * `TargetObservers` instance.\n *\n * @template T The observed target type.\n */\ninterface TargetObservers<T extends object> {\n  /**\n   * Indicates that the prototype is a `TargetObservers` instance.\n   */\n  [isTargetObservers]: true;\n\n  /**\n   * Indicates whether or not observers for this target are enabled. If\n   * disabled, observers will not be called in response to target property\n   * changes.\n   */\n  [isEnabled]: boolean;\n\n  /**\n   * Retrieves all observers for a given target property.\n   *\n   * @template K The target property key.\n   * @param key - The property to retrieve observers for.\n   * @return An array of observers for the provided target property.\n   */\n  [getObservers]: <K extends keyof T>(key: K) => Array<Observer<T, K>>;\n}\n\n/**\n * Observe a target's property for changes. When a property changes, the\n * provided `Observer` function will be invoked with the properties current and\n * previous values.\n *\n * The returned cleanup function will stop listening to changes for the\n * provided `Observer`.\n *\n * @template T The observed target type.\n * @template K The observed property.\n * @param target - The target to observe.\n * @param property - The property of the target to observe.\n * @param observer - An observer function to invoke each time the property\n *     changes.\n * @return A cleanup function that will stop observing changes for the provided\n *     `Observer`.\n */\nexport function observeProperty<T extends object, K extends keyof T>(\n    target: T, property: K, observer: Observer<T, K>) {\n  const observerPrototype = installObserver(target);\n  const observers = observerPrototype[getObservers](property);\n  observers.push(observer);\n  return () => {\n    observers.splice(observers.indexOf(observer), 1);\n  };\n}\n\n/**\n * Installs a `TargetObservers` for the provided target (if not already\n * installed).\n *\n * A target's `TargetObservers` is installed as a Proxy on the target's\n * prototype.\n *\n * @template T The observed target type.\n * @param obj - The target to observe.\n * @return The installed `TargetObservers` for the provided target.\n */\nfunction installObserver<T extends object>(obj: T): TargetObservers<T> {\n  const prototype = Object.getPrototypeOf(obj);\n  if (prototype[isTargetObservers]) {\n    return prototype as TargetObservers<T>;\n  }\n\n  // Proxy prototypes will not trap plain properties (not a getter/setter) that\n  // are already defined. They only work on new plain properties.\n  // We can work around this by deleting the properties, installing the Proxy,\n  // then re-setting the properties.\n  const existingKeyValues = new Map<keyof T, T[keyof T]>();\n  const keys = Object.getOwnPropertyNames(obj) as Array<keyof T>;\n  for (const key of keys) {\n    const descriptor = getDescriptor(obj, key);\n    if (descriptor && descriptor.writable) {\n      existingKeyValues.set(key, descriptor.value as T[keyof T]);\n      delete obj[key];\n    }\n  }\n\n  const proxy =\n      new Proxy<T>(Object.create(prototype), {\n        get(target, key, receiver) {\n          return Reflect.get(target, key, receiver);\n        },\n        set(target, key, newValue, receiver) {\n          const isTargetObserversKey = key === isTargetObservers ||\n              key === isEnabled || key === getObservers;\n          const previous = Reflect.get(target, key, receiver);\n          // If a key has an existing setter, invoke it with the receiver to\n          // preserve the correct `this` context.\n          // Otherwise, the key is either a new or existing plain property and\n          // should be set on the target. Setting a plain property on the\n          // receiver will cause the proxy to no longer be able to observe it.\n          const descriptor = getDescriptor(target, key as keyof T);\n          if (descriptor?.set) {\n            Reflect.set(target, key, newValue, receiver);\n          } else {\n            Reflect.set(target, key, newValue);\n          }\n\n          if (!isTargetObserversKey && proxy[isEnabled] &&\n              newValue !== previous) {\n            for (const observer of proxy[getObservers](key as keyof T)) {\n              observer(newValue, previous);\n            }\n          }\n\n          return true;\n        }\n      }) as TargetObservers<T>;\n\n  proxy[isTargetObservers] = true;\n  proxy[isEnabled] = true;\n  const observersMap = new Map<keyof T, Array<Observer<T>>>();\n  proxy[getObservers] = (key: keyof T) => {\n    const observers = observersMap.get(key) || [];\n    if (!observersMap.has(key)) {\n      observersMap.set(key, observers);\n    }\n\n    return observers;\n  };\n\n  Object.setPrototypeOf(obj, proxy);\n  // Re-set plain pre-existing properties so that the Proxy can trap them\n  for (const [key, value] of existingKeyValues.entries()) {\n    obj[key] = value;\n  }\n\n  return proxy;\n}\n\n/**\n * Enables or disables all observers for a provided target. Changes to observed\n * properties will not call any observers when disabled.\n *\n * @template T The observed target type.\n * @param target - The target to enable or disable observers for.\n * @param enabled - True to enable or false to disable observers.\n */\nexport function setObserversEnabled<T extends object>(\n    target: T, enabled: boolean) {\n  const prototype = Object.getPrototypeOf(target);\n  if (prototype[isTargetObservers]) {\n    (prototype as TargetObservers<T>)[isEnabled] = enabled;\n  }\n}\n\n/**\n * Retrieves the descriptor for a property from the provided target. This\n * function will walk up the target's prototype chain to search for the\n * descriptor.\n *\n * @template T The target type.\n * @template K The property type.\n * @param target - The target to retrieve a descriptor from.\n * @param property - The name of the property to retrieve a descriptor for.\n * @return the descriptor, or undefined if it does not exist. Keep in mind that\n *     plain properties may not have a descriptor defined.\n */\nfunction getDescriptor<T extends object, K extends keyof T>(\n    target: T, property: K) {\n  let descriptorTarget: object|null = target;\n  let descriptor: TypedPropertyDescriptor<T[K]>|undefined;\n  while (descriptorTarget) {\n    descriptor = Object.getOwnPropertyDescriptor(descriptorTarget, property);\n    if (descriptor) {\n      break;\n    }\n\n    // Walk up the instance's prototype chain in case the property is declared\n    // on a superclass.\n    descriptorTarget = Object.getPrototypeOf(descriptorTarget);\n  }\n\n  return descriptor;\n}\n"]}

package/controller/string-converter.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export declare const stringConverter: {
+    fromAttribute(value: string | null): string;
+    toAttribute(value: string): string | null;
+};

package/controller/string-converter.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export const stringConverter = {
+    fromAttribute(value) {
+        return value ?? '';
+    },
+    toAttribute(value) {
+        return value || null;
+    }
+};
+//# sourceMappingURL=string-converter.js.map

package/controller/string-converter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"string-converter.js","sourceRoot":"","sources":["string-converter.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,aAAa,CAAC,KAAkB;QAC9B,OAAO,KAAK,IAAI,EAAE,CAAC;IACrB,CAAC;IACD,WAAW,CAAC,KAAa;QACvB,OAAO,KAAK,IAAI,IAAI,CAAC;IACvB,CAAC;CACF,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport const stringConverter = {\n  fromAttribute(value: string|null): string {\n    return value ?? '';\n  },\n  toAttribute(value: string): string|null {\n    return value || null;\n  }\n};\n"]}

package/decorators/aria-property.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ReactiveElement } from 'lit';
+/**
+ * A property decorator that helps proxy an aria attribute to an internal node.
+ *
+ * This decorator is only intended for use with ARIAMixin properties,
+ * such as `ariaLabel`, to help with screen readers.
+ *
+ * This decorator will remove the host `aria-*` attribute at runtime and add it
+ * to a `data-aria-*` attribute to avoid screenreader conflicts between the
+ * host and internal node.
+ *
+ * `@ariaProperty` decorated properties should sync with LitElement to the
+ * `data-aria-*` attribute, not the native `aria-*` attribute.
+ *
+ * @example
+ * ```ts
+ * class MyElement extends LitElement {
+ *   \@ariaProperty
+ *   // TODO(b/210730484): replace with @soyParam annotation
+ *   \@property({ type: String, attribute: 'data-aria-label', noAccessor: true})
+ *   ariaLabel!: string;
+ * }
+ * ```
+ * @category Decorator
+ * @ExportDecoratedItems
+ */
+export declare function ariaProperty<E extends ReactiveElement, K extends keyof E & (`aria${string}` | 'role')>(prototype: E, property: K): void;

package/decorators/aria-property.js

@@ -0,0 +1,99 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A property decorator that helps proxy an aria attribute to an internal node.
+ *
+ * This decorator is only intended for use with ARIAMixin properties,
+ * such as `ariaLabel`, to help with screen readers.
+ *
+ * This decorator will remove the host `aria-*` attribute at runtime and add it
+ * to a `data-aria-*` attribute to avoid screenreader conflicts between the
+ * host and internal node.
+ *
+ * `@ariaProperty` decorated properties should sync with LitElement to the
+ * `data-aria-*` attribute, not the native `aria-*` attribute.
+ *
+ * @example
+ * ```ts
+ * class MyElement extends LitElement {
+ *   \@ariaProperty
+ *   // TODO(b/210730484): replace with @soyParam annotation
+ *   \@property({ type: String, attribute: 'data-aria-label', noAccessor: true})
+ *   ariaLabel!: string;
+ * }
+ * ```
+ * @category Decorator
+ * @ExportDecoratedItems
+ */
+export function ariaProperty(prototype, property) {
+    // Replace the ARIAMixin property with data-* attribute syncing instead of
+    // using the native aria-* attribute reflection. This preserves the attribute
+    // for SSR and avoids screenreader conflicts after delegating the attribute
+    // to a child node.
+    Object.defineProperty(prototype, property, {
+        configurable: true,
+        enumerable: true,
+        get() {
+            return this.dataset[property] ?? '';
+        },
+        set(value) {
+            // Coerce non-string values to a string
+            const strValue = String(value ?? '');
+            if (strValue) {
+                this.dataset[property] = strValue;
+            }
+            else {
+                delete this.dataset[property];
+            }
+            // lit will call this setter whenever the data-* attribute changes.
+            // However, this.dataset[property] will automatically be updated to the
+            // current value. To avoid bugs, always request an update regardless of
+            // the old value.
+            this.requestUpdate();
+        }
+    });
+    // Define an internal property that syncs from the `aria-*` attribute with lit
+    // and delegates to the real ARIAMixin property, which renders an update.
+    // This property will immediately remove the `aria-*` attribute, which doesn't
+    // work well with SSR (which is why there's a separate synced property).
+    const internalAriaProperty = Symbol(property);
+    // "ariaLabel" -> "aria-label" / "ariaLabelledBy" -> "aria-labelledby"
+    const ariaAttribute = property.replace('aria', 'aria-').toLowerCase();
+    const constructor = prototype.constructor;
+    let removingAttribute = false;
+    Object.defineProperty(prototype, internalAriaProperty, {
+        get() {
+            // tslint is failing here, but the types are correct (ARIAMixin
+            // properties do not obfuscate with closure)
+            // tslint:disable-next-line:no-dict-access-on-struct-type
+            return this[property];
+        },
+        set(value) {
+            if (removingAttribute) {
+                // Ignore this update, which is triggered below
+                return;
+            }
+            // Set the ARIAMixin property, which will sync the `data-*` attribute
+            // and trigger rendering if the value changed.
+            // tslint is failing here, but the types are correct (ARIAMixin
+            // properties do not obfuscate with closure)
+            // tslint:disable-next-line:no-dict-access-on-struct-type
+            this[property] = value;
+            // Remove the `aria-*` attribute, which will call this setter again with
+            // the incorrect value. Ignore these updates.
+            removingAttribute = true;
+            this.removeAttribute(ariaAttribute);
+            removingAttribute = false;
+        }
+    });
+    // Tell lit to observe the `aria-*` attribute and set the internal property,
+    // which acts as a "aria-* attribute changed" observer.
+    constructor.createProperty(internalAriaProperty, {
+        attribute: ariaAttribute,
+        noAccessor: true,
+    });
+}
+//# sourceMappingURL=aria-property.js.map

package/decorators/aria-property.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aria-property.js","sourceRoot":"","sources":["aria-property.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,UAAU,YAAY,CAExB,SAAY,EAAE,QAAW;IAC3B,0EAA0E;IAC1E,6EAA6E;IAC7E,2EAA2E;IAC3E,mBAAmB;IACnB,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,QAAQ,EAAE;QACzC,YAAY,EAAE,IAAI;QAClB,UAAU,EAAE,IAAI;QAChB,GAAG;YACD,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACtC,CAAC;QACD,GAAG,CAAwB,KAAc;YACvC,uCAAuC;YACvC,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;YACrC,IAAI,QAAQ,EAAE;gBACZ,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,QAAQ,CAAC;aACnC;iBAAM;gBACL,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;aAC/B;YAED,mEAAmE;YACnE,uEAAuE;YACvE,uEAAuE;YACvE,iBAAiB;YACjB,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;KACF,CAAC,CAAC;IAEH,8EAA8E;IAC9E,yEAAyE;IACzE,8EAA8E;IAC9E,wEAAwE;IACxE,MAAM,oBAAoB,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC9C,sEAAsE;IACtE,MAAM,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;IACtE,MAAM,WAAW,GAAI,SAAS,CAAC,WAAsC,CAAC;IACtE,IAAI,iBAAiB,GAAG,KAAK,CAAC;IAC9B,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,oBAAoB,EAAE;QACrD,GAAG;YACD,+DAA+D;YAC/D,4CAA4C;YAC5C,yDAAyD;YACzD,OAAQ,IAAU,CAAC,QAAQ,CAAC,CAAC;QAC/B,CAAC;QACD,GAAG,CAAwB,KAAW;YACpC,IAAI,iBAAiB,EAAE;gBACrB,+CAA+C;gBAC/C,OAAO;aACR;YAED,qEAAqE;YACrE,8CAA8C;YAC9C,+DAA+D;YAC/D,4CAA4C;YAC5C,yDAAyD;YACxD,IAAU,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC;YAC9B,wEAAwE;YACxE,6CAA6C;YAC7C,iBAAiB,GAAG,IAAI,CAAC;YACzB,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;YACpC,iBAAiB,GAAG,KAAK,CAAC;QAC5B,CAAC;KACF,CAAC,CAAC;IAEH,4EAA4E;IAC5E,uDAAuD;IACvD,WAAW,CAAC,cAAc,CAAC,oBAAoB,EAAE;QAC/C,SAAS,EAAE,aAAa;QACxB,UAAU,EAAE,IAAI;KACjB,CAAC,CAAC;AACL,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ReactiveElement} from 'lit';\n\n/**\n * A property decorator that helps proxy an aria attribute to an internal node.\n *\n * This decorator is only intended for use with ARIAMixin properties,\n * such as `ariaLabel`, to help with screen readers.\n *\n * This decorator will remove the host `aria-*` attribute at runtime and add it\n * to a `data-aria-*` attribute to avoid screenreader conflicts between the\n * host and internal node.\n *\n * `@ariaProperty` decorated properties should sync with LitElement to the\n * `data-aria-*` attribute, not the native `aria-*` attribute.\n *\n * @example\n * ```ts\n * class MyElement extends LitElement {\n *   \\@ariaProperty\n *   // TODO(b/210730484): replace with @soyParam annotation\n *   \\@property({ type: String, attribute: 'data-aria-label', noAccessor: true})\n *   ariaLabel!: string;\n * }\n * ```\n * @category Decorator\n * @ExportDecoratedItems\n */\nexport function ariaProperty<E extends ReactiveElement, K extends keyof E&\n                             (`aria${string}` | 'role')>(\n    prototype: E, property: K) {\n  // Replace the ARIAMixin property with data-* attribute syncing instead of\n  // using the native aria-* attribute reflection. This preserves the attribute\n  // for SSR and avoids screenreader conflicts after delegating the attribute\n  // to a child node.\n  Object.defineProperty(prototype, property, {\n    configurable: true,\n    enumerable: true,\n    get(this: ReactiveElement) {\n      return this.dataset[property] ?? '';\n    },\n    set(this: ReactiveElement, value: unknown) {\n      // Coerce non-string values to a string\n      const strValue = String(value ?? '');\n      if (strValue) {\n        this.dataset[property] = strValue;\n      } else {\n        delete this.dataset[property];\n      }\n\n      // lit will call this setter whenever the data-* attribute changes.\n      // However, this.dataset[property] will automatically be updated to the\n      // current value. To avoid bugs, always request an update regardless of\n      // the old value.\n      this.requestUpdate();\n    }\n  });\n\n  // Define an internal property that syncs from the `aria-*` attribute with lit\n  // and delegates to the real ARIAMixin property, which renders an update.\n  // This property will immediately remove the `aria-*` attribute, which doesn't\n  // work well with SSR (which is why there's a separate synced property).\n  const internalAriaProperty = Symbol(property);\n  // \"ariaLabel\" -> \"aria-label\" / \"ariaLabelledBy\" -> \"aria-labelledby\"\n  const ariaAttribute = property.replace('aria', 'aria-').toLowerCase();\n  const constructor = (prototype.constructor as typeof ReactiveElement);\n  let removingAttribute = false;\n  Object.defineProperty(prototype, internalAriaProperty, {\n    get(this: ReactiveElement) {\n      // tslint is failing here, but the types are correct (ARIAMixin\n      // properties do not obfuscate with closure)\n      // tslint:disable-next-line:no-dict-access-on-struct-type\n      return (this as E)[property];\n    },\n    set(this: ReactiveElement, value: E[K]) {\n      if (removingAttribute) {\n        // Ignore this update, which is triggered below\n        return;\n      }\n\n      // Set the ARIAMixin property, which will sync the `data-*` attribute\n      // and trigger rendering if the value changed.\n      // tslint is failing here, but the types are correct (ARIAMixin\n      // properties do not obfuscate with closure)\n      // tslint:disable-next-line:no-dict-access-on-struct-type\n      (this as E)[property] = value;\n      // Remove the `aria-*` attribute, which will call this setter again with\n      // the incorrect value. Ignore these updates.\n      removingAttribute = true;\n      this.removeAttribute(ariaAttribute);\n      removingAttribute = false;\n    }\n  });\n\n  // Tell lit to observe the `aria-*` attribute and set the internal property,\n  // which acts as a \"aria-* attribute changed\" observer.\n  constructor.createProperty(internalAriaProperty, {\n    attribute: ariaAttribute,\n    noAccessor: true,\n  });\n}\n"]}

package/decorators/bound.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { FunctionKeys } from '@material/web/types/keys.js';
+/**
+ * Binds a class's method to its instance.
+ *
+ * @example
+ * class MyClass {
+ *   \@bound
+ *   foo() { return this; }
+ * }
+ *
+ * const instance = new MyClass();
+ * const reference = instance.foo;
+ * foo(); // MyClass
+ *
+ * @category Decorator
+ * @ExportDecoratedItems
+ */
+export declare function bound<V extends Function>(target: object, propertyKey: string | symbol, methodDescriptor: TypedPropertyDescriptor<V>): TypedPropertyDescriptor<V>;
+/**
+ * Binds a class's function property to its instance.
+ *
+ * @example
+ * class MyClass {
+ *   \@bound
+ *   foo = function(this: MyClass) { return this; }
+ * }
+ *
+ * const instance = new MyClass();
+ * const reference = instance.foo;
+ * foo(); // MyClass
+ *
+ * @category Decorator
+ * @ExportDecoratedItems
+ */
+export declare function bound<T extends object>(target: T, propertyKey: FunctionKeys<T>): any;