material-web-evo 10002.10001.10000

package/labs/behaviors/validators/text-field-validator.d.ts

@@ -0,0 +1,110 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Validator } from './validator.js';
+/**
+ * Constraint validation for a text field.
+ */
+export interface TextFieldState {
+    /**
+     * The input or textarea state to validate.
+     */
+    state: InputState | TextAreaState;
+    /**
+     * The `<input>` or `<textarea>` that is rendered on the page.
+     *
+     * `minlength` and `maxlength` validation do not apply until a user has
+     * interacted with the control and the element is internally marked as dirty.
+     * This is a spec quirk, the two properties behave differently from other
+     * constraint validation.
+     *
+     * This means we need an actual rendered element instead of a virtual one,
+     * since the virtual element will never be marked as dirty.
+     *
+     * This can be `null` if the element has not yet rendered, and the validator
+     * will fall back to virtual elements for other constraint validation
+     * properties, which do apply even if the control is not dirty.
+     */
+    renderedControl: HTMLInputElement | HTMLTextAreaElement | null;
+}
+/**
+ * Constraint validation properties for an `<input>`.
+ */
+export interface InputState extends SharedInputAndTextAreaState {
+    /**
+     * The `<input>` type.
+     *
+     * Not all constraint validation properties apply to every type. See
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#validation-related_attributes
+     * for which properties will apply to which types.
+     */
+    readonly type: string;
+    /**
+     * The regex pattern a value must match.
+     */
+    readonly pattern: string;
+    /**
+     * The minimum value.
+     */
+    readonly min: string;
+    /**
+     * The maximum value.
+     */
+    readonly max: string;
+    /**
+     * The step interval of the value.
+     */
+    readonly step: string;
+}
+/**
+ * Constraint validation properties for a `<textarea>`.
+ */
+export interface TextAreaState extends SharedInputAndTextAreaState {
+    /**
+     * The type, must be "textarea" to inform the validator to use `<textarea>`
+     * instead of `<input>`.
+     */
+    readonly type: 'textarea';
+}
+/**
+ * Constraint validation properties shared between an `<input>` and
+ * `<textarea>`.
+ */
+interface SharedInputAndTextAreaState {
+    /**
+     * The current value.
+     */
+    readonly value: string;
+    /**
+     * Whether the textarea is required.
+     */
+    readonly required: boolean;
+    /**
+     * The minimum length of the value.
+     */
+    readonly minLength: number;
+    /**
+     * The maximum length of the value.
+     */
+    readonly maxLength: number;
+}
+/**
+ * A validator that provides constraint validation that emulates `<input>` and
+ * `<textarea>` validation.
+ */
+export declare class TextFieldValidator extends Validator<TextFieldState> {
+    private inputControl?;
+    private textAreaControl?;
+    protected computeValidity({ state, renderedControl }: TextFieldState): {
+        validity: ValidityState;
+        validationMessage: string;
+    };
+    protected equals({ state: prev }: TextFieldState, { state: next }: TextFieldState): boolean;
+    protected copy({ state }: TextFieldState): TextFieldState;
+    private copyInput;
+    private copyTextArea;
+    private copySharedState;
+}
+export {};

package/labs/behaviors/validators/text-field-validator.js

@@ -0,0 +1,154 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Validator } from './validator.js';
+/**
+ * A validator that provides constraint validation that emulates `<input>` and
+ * `<textarea>` validation.
+ */
+export class TextFieldValidator extends Validator {
+    computeValidity({ state, renderedControl }) {
+        let inputOrTextArea = renderedControl;
+        if (isInputState(state) && !inputOrTextArea) {
+            // Get cached <input> or create it.
+            inputOrTextArea = this.inputControl || document.createElement('input');
+            // Cache the <input> to re-use it next time.
+            this.inputControl = inputOrTextArea;
+        }
+        else if (!inputOrTextArea) {
+            // Get cached <textarea> or create it.
+            inputOrTextArea =
+                this.textAreaControl || document.createElement('textarea');
+            // Cache the <textarea> to re-use it next time.
+            this.textAreaControl = inputOrTextArea;
+        }
+        // Set this variable so we can check it for input-specific properties.
+        const input = isInputState(state)
+            ? inputOrTextArea
+            : null;
+        // Set input's "type" first, since this can change the other properties
+        if (input) {
+            input.type = state.type;
+        }
+        if (inputOrTextArea.value !== state.value) {
+            // Only programmatically set the value if there's a difference. When using
+            // the rendered control, the value will always be up to date. Setting the
+            // property (even if it's the same string) will reset the internal <input>
+            // dirty flag, making minlength and maxlength validation reset.
+            inputOrTextArea.value = state.value;
+        }
+        inputOrTextArea.required = state.required;
+        // The following IDLAttribute properties will always hydrate an attribute,
+        // even if set to a the default value ('' or -1). The presence of the
+        // attribute triggers constraint validation, so we must remove the attribute
+        // when empty.
+        if (input) {
+            const inputState = state;
+            if (inputState.pattern) {
+                input.pattern = inputState.pattern;
+            }
+            else {
+                input.removeAttribute('pattern');
+            }
+            if (inputState.min) {
+                input.min = inputState.min;
+            }
+            else {
+                input.removeAttribute('min');
+            }
+            if (inputState.max) {
+                input.max = inputState.max;
+            }
+            else {
+                input.removeAttribute('max');
+            }
+            if (inputState.step) {
+                input.step = inputState.step;
+            }
+            else {
+                input.removeAttribute('step');
+            }
+        }
+        // Use -1 to represent no minlength and maxlength, which is what the
+        // platform input returns. However, it will throw an error if you try to
+        // manually set it to -1.
+        //
+        // While the type is `number`, it may actually be `null` at runtime.
+        // `null > -1` is true since `null` coerces to `0`, so we default null and
+        // undefined to -1.
+        //
+        // We set attributes instead of properties since setting a property may
+        // throw an out of bounds error in relation to the other property.
+        // Attributes will not throw errors while the state is updating.
+        if ((state.minLength ?? -1) > -1) {
+            inputOrTextArea.setAttribute('minlength', String(state.minLength));
+        }
+        else {
+            inputOrTextArea.removeAttribute('minlength');
+        }
+        if ((state.maxLength ?? -1) > -1) {
+            inputOrTextArea.setAttribute('maxlength', String(state.maxLength));
+        }
+        else {
+            inputOrTextArea.removeAttribute('maxlength');
+        }
+        return {
+            validity: inputOrTextArea.validity,
+            validationMessage: inputOrTextArea.validationMessage,
+        };
+    }
+    equals({ state: prev }, { state: next }) {
+        // Check shared input and textarea properties
+        const inputOrTextAreaEqual = prev.type === next.type &&
+            prev.value === next.value &&
+            prev.required === next.required &&
+            prev.minLength === next.minLength &&
+            prev.maxLength === next.maxLength;
+        if (!isInputState(prev) || !isInputState(next)) {
+            // Both are textareas, all relevant properties are equal.
+            return inputOrTextAreaEqual;
+        }
+        // Check additional input-specific properties.
+        return (inputOrTextAreaEqual &&
+            prev.pattern === next.pattern &&
+            prev.min === next.min &&
+            prev.max === next.max &&
+            prev.step === next.step);
+    }
+    copy({ state }) {
+        // Don't hold a reference to the rendered control when copying since we
+        // don't use it when checking if the state changed.
+        return {
+            state: isInputState(state)
+                ? this.copyInput(state)
+                : this.copyTextArea(state),
+            renderedControl: null,
+        };
+    }
+    copyInput(state) {
+        const { type, pattern, min, max, step } = state;
+        return {
+            ...this.copySharedState(state),
+            type,
+            pattern,
+            min,
+            max,
+            step,
+        };
+    }
+    copyTextArea(state) {
+        return {
+            ...this.copySharedState(state),
+            type: state.type,
+        };
+    }
+    copySharedState({ value, required, minLength, maxLength, }) {
+        return { value, required, minLength, maxLength };
+    }
+}
+function isInputState(state) {
+    return state.type !== 'textarea';
+}
+//# sourceMappingURL=text-field-validator.js.map

package/labs/behaviors/validators/text-field-validator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field-validator.js","sourceRoot":"","sources":["text-field-validator.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Validator} from './validator.js';\n\n/**\n * Constraint validation for a text field.\n */\nexport interface TextFieldState {\n  /**\n   * The input or textarea state to validate.\n   */\n  state: InputState | TextAreaState;\n\n  /**\n   * The `<input>` or `<textarea>` that is rendered on the page.\n   *\n   * `minlength` and `maxlength` validation do not apply until a user has\n   * interacted with the control and the element is internally marked as dirty.\n   * This is a spec quirk, the two properties behave differently from other\n   * constraint validation.\n   *\n   * This means we need an actual rendered element instead of a virtual one,\n   * since the virtual element will never be marked as dirty.\n   *\n   * This can be `null` if the element has not yet rendered, and the validator\n   * will fall back to virtual elements for other constraint validation\n   * properties, which do apply even if the control is not dirty.\n   */\n  renderedControl: HTMLInputElement | HTMLTextAreaElement | null;\n}\n\n/**\n * Constraint validation properties for an `<input>`.\n */\nexport interface InputState extends SharedInputAndTextAreaState {\n  /**\n   * The `<input>` type.\n   *\n   * Not all constraint validation properties apply to every type. See\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#validation-related_attributes\n   * for which properties will apply to which types.\n   */\n  readonly type: string;\n\n  /**\n   * The regex pattern a value must match.\n   */\n  readonly pattern: string;\n\n  /**\n   * The minimum value.\n   */\n  readonly min: string;\n\n  /**\n   * The maximum value.\n   */\n  readonly max: string;\n\n  /**\n   * The step interval of the value.\n   */\n  readonly step: string;\n}\n\n/**\n * Constraint validation properties for a `<textarea>`.\n */\nexport interface TextAreaState extends SharedInputAndTextAreaState {\n  /**\n   * The type, must be \"textarea\" to inform the validator to use `<textarea>`\n   * instead of `<input>`.\n   */\n  readonly type: 'textarea';\n}\n\n/**\n * Constraint validation properties shared between an `<input>` and\n * `<textarea>`.\n */\ninterface SharedInputAndTextAreaState {\n  /**\n   * The current value.\n   */\n  readonly value: string;\n\n  /**\n   * Whether the textarea is required.\n   */\n  readonly required: boolean;\n\n  /**\n   * The minimum length of the value.\n   */\n  readonly minLength: number;\n\n  /**\n   * The maximum length of the value.\n   */\n  readonly maxLength: number;\n}\n\n/**\n * A validator that provides constraint validation that emulates `<input>` and\n * `<textarea>` validation.\n */\nexport class TextFieldValidator extends Validator<TextFieldState> {\n  private inputControl?: HTMLInputElement;\n  private textAreaControl?: HTMLTextAreaElement;\n\n  protected override computeValidity({state, renderedControl}: TextFieldState) {\n    let inputOrTextArea = renderedControl;\n    if (isInputState(state) && !inputOrTextArea) {\n      // Get cached <input> or create it.\n      inputOrTextArea = this.inputControl || document.createElement('input');\n      // Cache the <input> to re-use it next time.\n      this.inputControl = inputOrTextArea;\n    } else if (!inputOrTextArea) {\n      // Get cached <textarea> or create it.\n      inputOrTextArea =\n        this.textAreaControl || document.createElement('textarea');\n      // Cache the <textarea> to re-use it next time.\n      this.textAreaControl = inputOrTextArea;\n    }\n\n    // Set this variable so we can check it for input-specific properties.\n    const input = isInputState(state)\n      ? (inputOrTextArea as HTMLInputElement)\n      : null;\n\n    // Set input's \"type\" first, since this can change the other properties\n    if (input) {\n      input.type = state.type;\n    }\n\n    if (inputOrTextArea.value !== state.value) {\n      // Only programmatically set the value if there's a difference. When using\n      // the rendered control, the value will always be up to date. Setting the\n      // property (even if it's the same string) will reset the internal <input>\n      // dirty flag, making minlength and maxlength validation reset.\n      inputOrTextArea.value = state.value;\n    }\n\n    inputOrTextArea.required = state.required;\n\n    // The following IDLAttribute properties will always hydrate an attribute,\n    // even if set to a the default value ('' or -1). The presence of the\n    // attribute triggers constraint validation, so we must remove the attribute\n    // when empty.\n    if (input) {\n      const inputState = state as InputState;\n      if (inputState.pattern) {\n        input.pattern = inputState.pattern;\n      } else {\n        input.removeAttribute('pattern');\n      }\n\n      if (inputState.min) {\n        input.min = inputState.min;\n      } else {\n        input.removeAttribute('min');\n      }\n\n      if (inputState.max) {\n        input.max = inputState.max;\n      } else {\n        input.removeAttribute('max');\n      }\n\n      if (inputState.step) {\n        input.step = inputState.step;\n      } else {\n        input.removeAttribute('step');\n      }\n    }\n\n    // Use -1 to represent no minlength and maxlength, which is what the\n    // platform input returns. However, it will throw an error if you try to\n    // manually set it to -1.\n    //\n    // While the type is `number`, it may actually be `null` at runtime.\n    // `null > -1` is true since `null` coerces to `0`, so we default null and\n    // undefined to -1.\n    //\n    // We set attributes instead of properties since setting a property may\n    // throw an out of bounds error in relation to the other property.\n    // Attributes will not throw errors while the state is updating.\n    if ((state.minLength ?? -1) > -1) {\n      inputOrTextArea.setAttribute('minlength', String(state.minLength));\n    } else {\n      inputOrTextArea.removeAttribute('minlength');\n    }\n\n    if ((state.maxLength ?? -1) > -1) {\n      inputOrTextArea.setAttribute('maxlength', String(state.maxLength));\n    } else {\n      inputOrTextArea.removeAttribute('maxlength');\n    }\n\n    return {\n      validity: inputOrTextArea.validity,\n      validationMessage: inputOrTextArea.validationMessage,\n    };\n  }\n\n  protected override equals(\n    {state: prev}: TextFieldState,\n    {state: next}: TextFieldState,\n  ) {\n    // Check shared input and textarea properties\n    const inputOrTextAreaEqual =\n      prev.type === next.type &&\n      prev.value === next.value &&\n      prev.required === next.required &&\n      prev.minLength === next.minLength &&\n      prev.maxLength === next.maxLength;\n\n    if (!isInputState(prev) || !isInputState(next)) {\n      // Both are textareas, all relevant properties are equal.\n      return inputOrTextAreaEqual;\n    }\n\n    // Check additional input-specific properties.\n    return (\n      inputOrTextAreaEqual &&\n      prev.pattern === next.pattern &&\n      prev.min === next.min &&\n      prev.max === next.max &&\n      prev.step === next.step\n    );\n  }\n\n  protected override copy({state}: TextFieldState): TextFieldState {\n    // Don't hold a reference to the rendered control when copying since we\n    // don't use it when checking if the state changed.\n    return {\n      state: isInputState(state)\n        ? this.copyInput(state)\n        : this.copyTextArea(state),\n      renderedControl: null,\n    };\n  }\n\n  private copyInput(state: InputState): InputState {\n    const {type, pattern, min, max, step} = state;\n    return {\n      ...this.copySharedState(state),\n      type,\n      pattern,\n      min,\n      max,\n      step,\n    };\n  }\n\n  private copyTextArea(state: TextAreaState): TextAreaState {\n    return {\n      ...this.copySharedState(state),\n      type: state.type,\n    };\n  }\n\n  private copySharedState({\n    value,\n    required,\n    minLength,\n    maxLength,\n  }: SharedInputAndTextAreaState): SharedInputAndTextAreaState {\n    return {value, required, minLength, maxLength};\n  }\n}\n\nfunction isInputState(state: InputState | TextAreaState): state is InputState {\n  return state.type !== 'textarea';\n}\n"]}

package/labs/behaviors/validators/validator.d.ts

@@ -0,0 +1,96 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A class that computes and caches `ValidityStateFlags` for a component with
+ * a given `State` interface.
+ *
+ * Cached performance before computing validity is important since constraint
+ * validation must be checked frequently and synchronously when properties
+ * change.
+ *
+ * @template State The expected interface of properties relevant to constraint
+ *     validation.
+ */
+export declare abstract class Validator<State> {
+    private readonly getCurrentState;
+    /**
+     * The previous state, used to determine if state changed and validation needs
+     * to be re-computed.
+     */
+    private prevState?;
+    /**
+     * The current validity state and message. This is cached and returns if
+     * constraint validation state does not change.
+     */
+    private currentValidity;
+    /**
+     * Creates a new validator.
+     *
+     * @param getCurrentState A callback that returns the current state of
+     *     constraint validation-related properties.
+     */
+    constructor(getCurrentState: () => State);
+    /**
+     * Returns the current `ValidityStateFlags` and validation message for the
+     * validator.
+     *
+     * If the constraint validation state has not changed, this will return a
+     * cached result. This is important since `getValidity()` can be called
+     * frequently in response to synchronous property changes.
+     *
+     * @return The current validity and validation message.
+     */
+    getValidity(): ValidityAndMessage;
+    /**
+     * Computes the `ValidityStateFlags` and validation message for a given set
+     * of constraint validation properties.
+     *
+     * Implementations can use platform elements like `<input>` and `<select>` to
+     * sync state and compute validation along with i18n'd messages. This function
+     * may be expensive, and is only called when state changes.
+     *
+     * @param state The new state of constraint validation properties.
+     * @return An object containing a `validity` property with
+     *     `ValidityStateFlags` and a `validationMessage` property.
+     */
+    protected abstract computeValidity(state: State): ValidityAndMessage;
+    /**
+     * Checks if two states are equal. This is used to check against cached state
+     * to see if validity needs to be re-computed.
+     *
+     * @param prev The previous state.
+     * @param next The next state.
+     * @return True if the states are equal, or false if not.
+     */
+    protected abstract equals(prev: State, next: State): boolean;
+    /**
+     * Creates a copy of a state. This is used to cache state and check if it
+     * changes.
+     *
+     * Note: do NOT spread the {...state} to copy it. The actual state object is
+     * a web component, and trying to spread its getter/setter properties won't
+     * work.
+     *
+     * @param state The state to copy.
+     * @return A copy of the state.
+     */
+    protected abstract copy(state: State): State;
+}
+/**
+ * An object containing `ValidityStateFlags` and a corresponding validation
+ * message.
+ */
+export interface ValidityAndMessage {
+    /**
+     * Validity flags.
+     */
+    validity: ValidityStateFlags;
+    /**
+     * The validation message for the associated flags. It may not be an empty
+     * string if any of the validity flags are `true`.
+     */
+    validationMessage: string;
+}

package/labs/behaviors/validators/validator.js

@@ -0,0 +1,73 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A class that computes and caches `ValidityStateFlags` for a component with
+ * a given `State` interface.
+ *
+ * Cached performance before computing validity is important since constraint
+ * validation must be checked frequently and synchronously when properties
+ * change.
+ *
+ * @template State The expected interface of properties relevant to constraint
+ *     validation.
+ */
+export class Validator {
+    /**
+     * Creates a new validator.
+     *
+     * @param getCurrentState A callback that returns the current state of
+     *     constraint validation-related properties.
+     */
+    constructor(getCurrentState) {
+        this.getCurrentState = getCurrentState;
+        /**
+         * The current validity state and message. This is cached and returns if
+         * constraint validation state does not change.
+         */
+        this.currentValidity = {
+            validity: {},
+            validationMessage: '',
+        };
+    }
+    /**
+     * Returns the current `ValidityStateFlags` and validation message for the
+     * validator.
+     *
+     * If the constraint validation state has not changed, this will return a
+     * cached result. This is important since `getValidity()` can be called
+     * frequently in response to synchronous property changes.
+     *
+     * @return The current validity and validation message.
+     */
+    getValidity() {
+        const state = this.getCurrentState();
+        const hasStateChanged = !this.prevState || !this.equals(this.prevState, state);
+        if (!hasStateChanged) {
+            return this.currentValidity;
+        }
+        const { validity, validationMessage } = this.computeValidity(state);
+        this.prevState = this.copy(state);
+        this.currentValidity = {
+            validationMessage,
+            validity: {
+                // Change any `ValidityState` instances into `ValidityStateFlags` since
+                // `ValidityState` cannot be easily `{...spread}`.
+                badInput: validity.badInput,
+                customError: validity.customError,
+                patternMismatch: validity.patternMismatch,
+                rangeOverflow: validity.rangeOverflow,
+                rangeUnderflow: validity.rangeUnderflow,
+                stepMismatch: validity.stepMismatch,
+                tooLong: validity.tooLong,
+                tooShort: validity.tooShort,
+                typeMismatch: validity.typeMismatch,
+                valueMissing: validity.valueMissing,
+            },
+        };
+        return this.currentValidity;
+    }
+}
+//# sourceMappingURL=validator.js.map

package/labs/behaviors/validators/validator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validator.js","sourceRoot":"","sources":["validator.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;GAUG;AACH,MAAM,OAAgB,SAAS;IAgB7B;;;;;OAKG;IACH,YAA6B,eAA4B;QAA5B,oBAAe,GAAf,eAAe,CAAa;QAfzD;;;WAGG;QACK,oBAAe,GAAuB;YAC5C,QAAQ,EAAE,EAAE;YACZ,iBAAiB,EAAE,EAAE;SACtB,CAAC;IAQ0D,CAAC;IAE7D;;;;;;;;;OASG;IACH,WAAW;QACT,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACrC,MAAM,eAAe,GACnB,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QACzD,IAAI,CAAC,eAAe,EAAE;YACpB,OAAO,IAAI,CAAC,eAAe,CAAC;SAC7B;QAED,MAAM,EAAC,QAAQ,EAAE,iBAAiB,EAAC,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QAClE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAClC,IAAI,CAAC,eAAe,GAAG;YACrB,iBAAiB;YACjB,QAAQ,EAAE;gBACR,uEAAuE;gBACvE,kDAAkD;gBAClD,QAAQ,EAAE,QAAQ,CAAC,QAAQ;gBAC3B,WAAW,EAAE,QAAQ,CAAC,WAAW;gBACjC,eAAe,EAAE,QAAQ,CAAC,eAAe;gBACzC,aAAa,EAAE,QAAQ,CAAC,aAAa;gBACrC,cAAc,EAAE,QAAQ,CAAC,cAAc;gBACvC,YAAY,EAAE,QAAQ,CAAC,YAAY;gBACnC,OAAO,EAAE,QAAQ,CAAC,OAAO;gBACzB,QAAQ,EAAE,QAAQ,CAAC,QAAQ;gBAC3B,YAAY,EAAE,QAAQ,CAAC,YAAY;gBACnC,YAAY,EAAE,QAAQ,CAAC,YAAY;aACpC;SACF,CAAC;QAEF,OAAO,IAAI,CAAC,eAAe,CAAC;IAC9B,CAAC;CAsCF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * A class that computes and caches `ValidityStateFlags` for a component with\n * a given `State` interface.\n *\n * Cached performance before computing validity is important since constraint\n * validation must be checked frequently and synchronously when properties\n * change.\n *\n * @template State The expected interface of properties relevant to constraint\n *     validation.\n */\nexport abstract class Validator<State> {\n  /**\n   * The previous state, used to determine if state changed and validation needs\n   * to be re-computed.\n   */\n  private prevState?: State;\n\n  /**\n   * The current validity state and message. This is cached and returns if\n   * constraint validation state does not change.\n   */\n  private currentValidity: ValidityAndMessage = {\n    validity: {},\n    validationMessage: '',\n  };\n\n  /**\n   * Creates a new validator.\n   *\n   * @param getCurrentState A callback that returns the current state of\n   *     constraint validation-related properties.\n   */\n  constructor(private readonly getCurrentState: () => State) {}\n\n  /**\n   * Returns the current `ValidityStateFlags` and validation message for the\n   * validator.\n   *\n   * If the constraint validation state has not changed, this will return a\n   * cached result. This is important since `getValidity()` can be called\n   * frequently in response to synchronous property changes.\n   *\n   * @return The current validity and validation message.\n   */\n  getValidity(): ValidityAndMessage {\n    const state = this.getCurrentState();\n    const hasStateChanged =\n      !this.prevState || !this.equals(this.prevState, state);\n    if (!hasStateChanged) {\n      return this.currentValidity;\n    }\n\n    const {validity, validationMessage} = this.computeValidity(state);\n    this.prevState = this.copy(state);\n    this.currentValidity = {\n      validationMessage,\n      validity: {\n        // Change any `ValidityState` instances into `ValidityStateFlags` since\n        // `ValidityState` cannot be easily `{...spread}`.\n        badInput: validity.badInput,\n        customError: validity.customError,\n        patternMismatch: validity.patternMismatch,\n        rangeOverflow: validity.rangeOverflow,\n        rangeUnderflow: validity.rangeUnderflow,\n        stepMismatch: validity.stepMismatch,\n        tooLong: validity.tooLong,\n        tooShort: validity.tooShort,\n        typeMismatch: validity.typeMismatch,\n        valueMissing: validity.valueMissing,\n      },\n    };\n\n    return this.currentValidity;\n  }\n\n  /**\n   * Computes the `ValidityStateFlags` and validation message for a given set\n   * of constraint validation properties.\n   *\n   * Implementations can use platform elements like `<input>` and `<select>` to\n   * sync state and compute validation along with i18n'd messages. This function\n   * may be expensive, and is only called when state changes.\n   *\n   * @param state The new state of constraint validation properties.\n   * @return An object containing a `validity` property with\n   *     `ValidityStateFlags` and a `validationMessage` property.\n   */\n  protected abstract computeValidity(state: State): ValidityAndMessage;\n\n  /**\n   * Checks if two states are equal. This is used to check against cached state\n   * to see if validity needs to be re-computed.\n   *\n   * @param prev The previous state.\n   * @param next The next state.\n   * @return True if the states are equal, or false if not.\n   */\n  protected abstract equals(prev: State, next: State): boolean;\n\n  /**\n   * Creates a copy of a state. This is used to cache state and check if it\n   * changes.\n   *\n   * Note: do NOT spread the {...state} to copy it. The actual state object is\n   * a web component, and trying to spread its getter/setter properties won't\n   * work.\n   *\n   * @param state The state to copy.\n   * @return A copy of the state.\n   */\n  protected abstract copy(state: State): State;\n}\n\n/**\n * An object containing `ValidityStateFlags` and a corresponding validation\n * message.\n */\nexport interface ValidityAndMessage {\n  /**\n   * Validity flags.\n   */\n  validity: ValidityStateFlags;\n\n  /**\n   * The validation message for the associated flags. It may not be an empty\n   * string if any of the validity flags are `true`.\n   */\n  validationMessage: string;\n}\n"]}

package/labs/card/_elevated-card.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/elevated-card' show theme;

package/labs/card/_filled-card.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/filled-card' show theme;

package/labs/card/_outlined-card.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/outlined-card' show theme;

package/labs/card/elevated-card.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative } from 'lit';
+import { Card } from './internal/card.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-elevated-card': MdElevatedCard;
+    }
+}
+/**
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdElevatedCard extends Card {
+    static styles: CSSResultOrNative[];
+}

package/labs/card/elevated-card.js

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { Card } from './internal/card.js';
+import { styles as elevatedStyles } from './internal/elevated-styles.js';
+import { styles as sharedStyles } from './internal/shared-styles.js';
+/**
+ * @final
+ * @suppress {visibility}
+ */
+export let MdElevatedCard = class MdElevatedCard extends Card {
+};
+MdElevatedCard.styles = [sharedStyles, elevatedStyles];
+MdElevatedCard = __decorate([
+    customElement('md-elevated-card')
+], MdElevatedCard);
+//# sourceMappingURL=elevated-card.js.map

package/labs/card/elevated-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elevated-card.js","sourceRoot":"","sources":["elevated-card.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAGH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,6BAA6B,CAAC;AAQnE;;;GAGG;AAEI,WAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,IAAI;;AACtB,qBAAM,GAAwB,CAAC,YAAY,EAAE,cAAc,CAAC,AAAtD,CAAuD;AADlE,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAE1B","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Card} from './internal/card.js';\nimport {styles as elevatedStyles} from './internal/elevated-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-elevated-card': MdElevatedCard;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-elevated-card')\nexport class MdElevatedCard extends Card {\n  static override styles: CSSResultOrNative[] = [sharedStyles, elevatedStyles];\n}\n"]}

package/labs/card/filled-card.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative } from 'lit';
+import { Card } from './internal/card.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-filled-card': MdFilledCard;
+    }
+}
+/**
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdFilledCard extends Card {
+    static styles: CSSResultOrNative[];
+}

package/labs/card/filled-card.js

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { Card } from './internal/card.js';
+import { styles as filledStyles } from './internal/filled-styles.js';
+import { styles as sharedStyles } from './internal/shared-styles.js';
+/**
+ * @final
+ * @suppress {visibility}
+ */
+export let MdFilledCard = class MdFilledCard extends Card {
+};
+MdFilledCard.styles = [sharedStyles, filledStyles];
+MdFilledCard = __decorate([
+    customElement('md-filled-card')
+], MdFilledCard);
+//# sourceMappingURL=filled-card.js.map

package/labs/card/filled-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filled-card.js","sourceRoot":"","sources":["filled-card.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAGH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,6BAA6B,CAAC;AAQnE;;;GAGG;AAEI,WAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,IAAI;;AACpB,mBAAM,GAAwB,CAAC,YAAY,EAAE,YAAY,CAAC,AAApD,CAAqD;AADhE,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAExB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Card} from './internal/card.js';\nimport {styles as filledStyles} from './internal/filled-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-card': MdFilledCard;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-card')\nexport class MdFilledCard extends Card {\n  static override styles: CSSResultOrNative[] = [sharedStyles, filledStyles];\n}\n"]}

package/labs/card/internal/_elevated-card.scss

@@ -0,0 +1,35 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-elevated-card-supported-tokens;
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Elevated card `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-elevated-card-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-elevated-card-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+}

package/labs/card/internal/_filled-card.scss

@@ -0,0 +1,35 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-filled-card-supported-tokens;
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Filled card `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-filled-card-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-filled-card-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+}