@material/web 0.1.0-alpha.0

package/checkbox/lib/checkbox.js

@@ -0,0 +1,238 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import '@material/web/focus/focus-ring.js';
+import '@material/web/ripple/ripple.js';
+import { ActionElement } from '@material/web/actionelement/action-element.js';
+import { ariaProperty as legacyAriaProperty } from '@material/web/compat/base/aria-property.js';
+import { ariaProperty } from '@material/web/decorators/aria-property.js';
+import { pointerPress, shouldShowStrongFocus } from '@material/web/focus/strong-focus.js';
+import { MdRipple } from '@material/web/ripple/ripple.js';
+import { html } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+/** @soyCompatible */
+export class Checkbox extends ActionElement {
+    constructor() {
+        super(...arguments);
+        this.checked = false;
+        this.indeterminate = false;
+        this.disabled = false;
+        this.name = '';
+        this.value = 'on';
+        /**
+         * Touch target extends beyond visual boundary of a component by default.
+         * Set to `true` to remove touch target added to the component.
+         * @see https://material.io/design/usability/accessibility.html
+         */
+        this.reducedTouchTarget = false;
+        this.animationClass = '';
+        this.showFocusRing = false;
+    }
+    update(changedProperties) {
+        const oldIndeterminate = changedProperties.get('indeterminate');
+        const oldChecked = changedProperties.get('checked');
+        const oldDisabled = changedProperties.get('disabled');
+        if (oldIndeterminate !== undefined || oldChecked !== undefined ||
+            oldDisabled !== undefined) {
+            const oldState = this.calculateAnimationStateName(!!oldChecked, !!oldIndeterminate, !!oldDisabled);
+            const newState = this.calculateAnimationStateName(this.checked, this.indeterminate, this.disabled);
+            this.animationClass = `${oldState}-${newState}`;
+        }
+        super.update(changedProperties);
+    }
+    calculateAnimationStateName(checked, indeterminate, disabled) {
+        if (disabled) {
+            return 'disabled';
+        }
+        else if (indeterminate) {
+            return 'indeterminate';
+        }
+        else if (checked) {
+            return 'checked';
+        }
+        else {
+            return 'unchecked';
+        }
+    }
+    /** @soyTemplate */
+    renderRipple() {
+        return html `<md-ripple
+        ?disabled="${this.disabled}"
+        unbounded></md-ripple>`;
+    }
+    /** @soyTemplate */
+    renderFocusRing() {
+        return html `<md-focus-ring .visible="${this.showFocusRing}"></md-focus-ring>`;
+    }
+    /**
+     * @soyTemplate
+     * @soyAttributes checkboxAttributes: input
+     * @soyClasses checkboxClasses: .md3-checkbox
+     */
+    render() {
+        /** @classMap */
+        const classes = {
+            'md3-checkbox--disabled': this.disabled,
+            'md3-checkbox--touch': !this.reducedTouchTarget,
+            // transition animiation classes
+            'md3-checkbox--anim-checked-indeterminate': this.animationClass === 'checked-indeterminate',
+            'md3-checkbox--anim-checked-unchecked': this.animationClass === 'checked-unchecked',
+            'md3-checkbox--anim-indeterminate-checked': this.animationClass === 'indeterminate-checked',
+            'md3-checkbox--anim-indeterminate-unchecked': this.animationClass === 'indeterminate-unchecked',
+            'md3-checkbox--anim-unchecked-checked': this.animationClass === 'unchecked-checked',
+            'md3-checkbox--anim-unchecked-indeterminate': this.animationClass === 'unchecked-indeterminate',
+        };
+        const ariaChecked = this.indeterminate ? 'mixed' : undefined;
+        return html `
+      <div class="md3-checkbox ${classMap(classes)}">
+        ${this.renderFocusRing()}
+        <input type="checkbox"
+              class="md3-checkbox__native-control"
+              name="${ifDefined(this.name)}"
+              aria-checked="${ifDefined(ariaChecked)}"
+              aria-label="${ifDefined(this.ariaLabel)}"
+              aria-labelledby="${ifDefined(this.ariaLabelledBy)}"
+              aria-describedby="${ifDefined(this.ariaDescribedBy)}"
+              data-indeterminate="${this.indeterminate ? 'true' : 'false'}"
+              ?disabled="${this.disabled}"
+              .indeterminate="${this.indeterminate}"
+              ?checked="${this.checked}"
+              .value="${this.value}"
+              @change="${this.handleChange}"
+              @focus="${this.handleFocus}"
+              @blur="${this.handleBlur}"
+              @pointerdown=${this.handlePointerDown}
+              @pointerenter=${this.handlePointerEnter}
+              @pointerup=${this.handlePointerUp}
+              @pointercancel=${this.handlePointerCancel}
+              @pointerleave=${this.handlePointerLeave}
+              @click=${this.handleClick}
+              @contextmenu=${this.handleContextMenu}
+              >
+        <div class="md3-checkbox__background"
+          @animationend="${this.resetAnimationClass}">
+          <svg class="md3-checkbox__checkmark"
+              viewBox="0 0 24 24" aria-hidden="true">
+            <path class="md3-checkbox__checkmark-path"
+                  fill="none"
+                  d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
+          </svg>
+          <div class="md3-checkbox__mixedmark"></div>
+        </div>
+        <div class="md3-checkbox__ripple">
+          ${this.renderRipple()}
+        </div>
+      </div>`;
+    }
+    setFormData(formData) {
+        if (this.name && this.checked) {
+            formData.append(this.name, this.value);
+        }
+    }
+    beginPress({ positionEvent }) {
+        this.ripple.beginPress(positionEvent);
+    }
+    endPress({ cancelled }) {
+        this.ripple.endPress();
+        if (cancelled) {
+            return;
+        }
+        super.endPress({
+            cancelled,
+            actionData: { checked: this.formElement.checked, value: this.formElement.value }
+        });
+    }
+    handleFocus() {
+        this.showFocusRing = shouldShowStrongFocus();
+    }
+    handleBlur() {
+        this.showFocusRing = false;
+    }
+    handlePointerEnter(e) {
+        this.ripple.beginHover(e);
+    }
+    handlePointerLeave(e) {
+        super.handlePointerLeave(e);
+        this.ripple.endHover();
+    }
+    handlePointerDown(e) {
+        super.handlePointerDown(e);
+        pointerPress();
+        this.showFocusRing = shouldShowStrongFocus();
+    }
+    handleChange() {
+        this.checked = this.formElement.checked;
+        this.indeterminate = this.formElement.indeterminate;
+        this.dispatchEvent(new Event('change', {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    resetAnimationClass() {
+        this.animationClass = '';
+    }
+}
+__decorate([
+    query('input'),
+    __metadata("design:type", HTMLInputElement)
+], Checkbox.prototype, "formElement", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], Checkbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], Checkbox.prototype, "indeterminate", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], Checkbox.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", Object)
+], Checkbox.prototype, "name", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], Checkbox.prototype, "value", void 0);
+__decorate([
+    ariaProperty // tslint:disable-line:no-new-decorators
+    ,
+    property({ type: String, attribute: 'aria-label' }),
+    __metadata("design:type", String)
+], Checkbox.prototype, "ariaLabel", void 0);
+__decorate([
+    legacyAriaProperty // tslint:disable-line:no-new-decorators
+    ,
+    property({ type: String, attribute: 'aria-labelledby' }),
+    __metadata("design:type", String)
+], Checkbox.prototype, "ariaLabelledBy", void 0);
+__decorate([
+    legacyAriaProperty // tslint:disable-line:no-new-decorators
+    ,
+    property({ type: String, attribute: 'aria-describedby' }),
+    __metadata("design:type", String)
+], Checkbox.prototype, "ariaDescribedBy", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], Checkbox.prototype, "reducedTouchTarget", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Checkbox.prototype, "animationClass", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Checkbox.prototype, "showFocusRing", void 0);
+__decorate([
+    query('md-ripple'),
+    __metadata("design:type", MdRipple)
+], Checkbox.prototype, "ripple", void 0);
+//# sourceMappingURL=checkbox.js.map

package/checkbox/lib/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/focus/focus-ring.js';\nimport '@material/web/ripple/ripple.js';\n\nimport {ActionElement, BeginPressConfig, EndPressConfig} from '@material/web/actionelement/action-element.js';\nimport {ariaProperty as legacyAriaProperty} from '@material/web/compat/base/aria-property.js';\nimport {ariaProperty} from '@material/web/decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '@material/web/focus/strong-focus.js';\nimport {MdRipple} from '@material/web/ripple/ripple.js';\nimport {html, PropertyValues, TemplateResult} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\n/** @soyCompatible */\nexport class Checkbox extends ActionElement {\n  @query('input') protected formElement!: HTMLInputElement;\n\n  @property({type: Boolean, reflect: true}) checked = false;\n\n  @property({type: Boolean, reflect: true}) indeterminate = false;\n\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  @property({type: String, reflect: true}) name = '';\n\n  @property({type: String}) value = 'on';\n\n  /** @soyPrefixAttribute */\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'aria-label'})\n  override ariaLabel!: string;\n\n  /** @soyPrefixAttribute */\n  @legacyAriaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'aria-labelledby'})\n  ariaLabelledBy!: undefined|string;\n\n  /** @soyPrefixAttribute */\n  @legacyAriaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'aria-describedby'})\n  ariaDescribedBy!: undefined|string;\n\n  /**\n   * Touch target extends beyond visual boundary of a component by default.\n   * Set to `true` to remove touch target added to the component.\n   * @see https://material.io/design/usability/accessibility.html\n   */\n  @property({type: Boolean}) reducedTouchTarget = false;\n\n  @state() protected animationClass = '';\n\n  @state() protected showFocusRing = false;\n\n  @query('md-ripple') ripple!: MdRipple;\n\n  protected override update(changedProperties: PropertyValues) {\n    const oldIndeterminate = changedProperties.get('indeterminate');\n    const oldChecked = changedProperties.get('checked');\n    const oldDisabled = changedProperties.get('disabled');\n    if (oldIndeterminate !== undefined || oldChecked !== undefined ||\n        oldDisabled !== undefined) {\n      const oldState = this.calculateAnimationStateName(\n          !!oldChecked, !!oldIndeterminate, !!oldDisabled);\n      const newState = this.calculateAnimationStateName(\n          this.checked, this.indeterminate, this.disabled);\n      this.animationClass = `${oldState}-${newState}`;\n    }\n    super.update(changedProperties);\n  }\n\n  protected calculateAnimationStateName(\n      checked: boolean, indeterminate: boolean, disabled: boolean): string {\n    if (disabled) {\n      return 'disabled';\n    } else if (indeterminate) {\n      return 'indeterminate';\n    } else if (checked) {\n      return 'checked';\n    } else {\n      return 'unchecked';\n    }\n  }\n\n  /** @soyTemplate */\n  protected renderRipple(): TemplateResult {\n    return html`<md-ripple\n        ?disabled=\"${this.disabled}\"\n        unbounded></md-ripple>`;\n  }\n\n  /** @soyTemplate */\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring .visible=\"${\n        this.showFocusRing}\"></md-focus-ring>`;\n  }\n\n  /**\n   * @soyTemplate\n   * @soyAttributes checkboxAttributes: input\n   * @soyClasses checkboxClasses: .md3-checkbox\n   */\n  protected override render(): TemplateResult {\n    /** @classMap */\n    const classes = {\n      'md3-checkbox--disabled': this.disabled,\n      'md3-checkbox--touch': !this.reducedTouchTarget,\n      // transition animiation classes\n      'md3-checkbox--anim-checked-indeterminate':\n          this.animationClass === 'checked-indeterminate',\n      'md3-checkbox--anim-checked-unchecked':\n          this.animationClass === 'checked-unchecked',\n      'md3-checkbox--anim-indeterminate-checked':\n          this.animationClass === 'indeterminate-checked',\n      'md3-checkbox--anim-indeterminate-unchecked':\n          this.animationClass === 'indeterminate-unchecked',\n      'md3-checkbox--anim-unchecked-checked':\n          this.animationClass === 'unchecked-checked',\n      'md3-checkbox--anim-unchecked-indeterminate':\n          this.animationClass === 'unchecked-indeterminate',\n    };\n    const ariaChecked = this.indeterminate ? 'mixed' : undefined;\n    return html`\n      <div class=\"md3-checkbox ${classMap(classes)}\">\n        ${this.renderFocusRing()}\n        <input type=\"checkbox\"\n              class=\"md3-checkbox__native-control\"\n              name=\"${ifDefined(this.name)}\"\n              aria-checked=\"${ifDefined(ariaChecked)}\"\n              aria-label=\"${ifDefined(this.ariaLabel)}\"\n              aria-labelledby=\"${ifDefined(this.ariaLabelledBy)}\"\n              aria-describedby=\"${ifDefined(this.ariaDescribedBy)}\"\n              data-indeterminate=\"${this.indeterminate ? 'true' : 'false'}\"\n              ?disabled=\"${this.disabled}\"\n              .indeterminate=\"${this.indeterminate}\"\n              ?checked=\"${this.checked}\"\n              .value=\"${this.value}\"\n              @change=\"${this.handleChange}\"\n              @focus=\"${this.handleFocus}\"\n              @blur=\"${this.handleBlur}\"\n              @pointerdown=${this.handlePointerDown}\n              @pointerenter=${this.handlePointerEnter}\n              @pointerup=${this.handlePointerUp}\n              @pointercancel=${this.handlePointerCancel}\n              @pointerleave=${this.handlePointerLeave}\n              @click=${this.handleClick}\n              @contextmenu=${this.handleContextMenu}\n              >\n        <div class=\"md3-checkbox__background\"\n          @animationend=\"${this.resetAnimationClass}\">\n          <svg class=\"md3-checkbox__checkmark\"\n              viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path class=\"md3-checkbox__checkmark-path\"\n                  fill=\"none\"\n                  d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"></path>\n          </svg>\n          <div class=\"md3-checkbox__mixedmark\"></div>\n        </div>\n        <div class=\"md3-checkbox__ripple\">\n          ${this.renderRipple()}\n        </div>\n      </div>`;\n  }\n\n  protected setFormData(formData: FormData) {\n    if (this.name && this.checked) {\n      formData.append(this.name, this.value);\n    }\n  }\n\n  override beginPress({positionEvent}: BeginPressConfig) {\n    this.ripple.beginPress(positionEvent);\n  }\n\n  override endPress({cancelled}: EndPressConfig) {\n    this.ripple.endPress();\n\n    if (cancelled) {\n      return;\n    }\n\n    super.endPress({\n      cancelled,\n      actionData:\n          {checked: this.formElement.checked, value: this.formElement.value}\n    });\n  }\n\n  protected handleFocus() {\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleBlur() {\n    this.showFocusRing = false;\n  }\n\n  protected handlePointerEnter(e: PointerEvent) {\n    this.ripple.beginHover(e);\n  }\n\n  override handlePointerLeave(e: PointerEvent) {\n    super.handlePointerLeave(e);\n    this.ripple.endHover();\n  }\n\n  override handlePointerDown(e: PointerEvent) {\n    super.handlePointerDown(e);\n\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleChange() {\n    this.checked = this.formElement.checked;\n    this.indeterminate = this.formElement.indeterminate;\n\n    this.dispatchEvent(new Event('change', {\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  protected resetAnimationClass() {\n    this.animationClass = '';\n  }\n}\n"]}

package/chips/action/lib/action.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '@material/web/focus/focus-ring.js';
+import '@material/web/ripple/ripple.js';
+import { ActionElement } from '@material/web/actionelement/action-element.js';
+import { MdRipple } from '@material/web/ripple/ripple.js';
+import { TemplateResult } from 'lit';
+import { ClassInfo } from 'lit/directives/class-map.js';
+/**
+ * Base class for all actions.
+ * @soyCompatible
+ */
+export declare abstract class Action extends ActionElement {
+    isFocusable: boolean;
+    isTouchable: boolean;
+    disabled: boolean;
+    showFocusRing: boolean;
+    ripple?: MdRipple | null;
+    /** @soyPrefixAttribute */
+    ariaLabel: string;
+    /** @soyTemplate */
+    protected getRootClasses(): ClassInfo;
+    /** @soyTemplate */
+    protected getRippleClasses(): ClassInfo;
+    /** @soyTemplate */
+    protected renderTouchTarget(): TemplateResult;
+    /** @soyTemplate */
+    protected renderRipple(): TemplateResult;
+    /** @soyTemplate */
+    protected renderFocusRing(): TemplateResult;
+}

package/chips/action/lib/action.js

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import '@material/web/focus/focus-ring.js';
+import '@material/web/ripple/ripple.js';
+import { ActionElement } from '@material/web/actionelement/action-element.js';
+import { ariaProperty } from '@material/web/decorators/aria-property.js';
+import { MdRipple } from '@material/web/ripple/ripple.js';
+import { html } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+/**
+ * Base class for all actions.
+ * @soyCompatible
+ */
+export class Action extends ActionElement {
+    constructor() {
+        super(...arguments);
+        this.isFocusable = false;
+        this.isTouchable = false;
+        this.disabled = false;
+        this.showFocusRing = false;
+    }
+    /** @soyTemplate */
+    getRootClasses() {
+        return {
+            'md3-chip__action': true,
+        };
+    }
+    /** @soyTemplate */
+    getRippleClasses() {
+        return {
+            'md3-chip__ripple': true,
+        };
+    }
+    /** @soyTemplate */
+    renderTouchTarget() {
+        return this.isTouchable ?
+            html `<span class="md3-chip__action-touch"></span>` : html ``;
+    }
+    /** @soyTemplate */
+    renderRipple() {
+        return html `
+      <md-ripple class="${classMap(this.getRippleClasses())}"
+          ?disabled="${this.disabled}">
+      </md-ripple>`;
+    }
+    /** @soyTemplate */
+    renderFocusRing() {
+        return html `
+      <md-focus-ring .visible="${this.showFocusRing}"></md-focus-ring>`;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], Action.prototype, "isFocusable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], Action.prototype, "isTouchable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], Action.prototype, "disabled", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Action.prototype, "showFocusRing", void 0);
+__decorate([
+    query('md-ripple'),
+    __metadata("design:type", MdRipple)
+], Action.prototype, "ripple", void 0);
+__decorate([
+    ariaProperty // tslint:disable-line:no-new-decorators
+    ,
+    property({ type: String, attribute: 'aria-label' }),
+    __metadata("design:type", String)
+], Action.prototype, "ariaLabel", void 0);
+//# sourceMappingURL=action.js.map

package/chips/action/lib/action.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action.js","sourceRoot":"","sources":["action.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,mCAAmC,CAAC;AAC3C,OAAO,gCAAgC,CAAC;AAExC,OAAO,EAAC,aAAa,EAAC,MAAM,+CAA+C,CAAC;AAC5E,OAAO,EAAC,YAAY,EAAC,MAAM,2CAA2C,CAAC;AACvE,OAAO,EAAC,QAAQ,EAAC,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AACzC,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAY,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAEhE;;;GAGG;AACH,MAAM,OAAgB,MAAO,SAAQ,aAAa;IAAlD;;QAC4C,gBAAW,GAAG,KAAK,CAAC;QAEpB,gBAAW,GAAG,KAAK,CAAC;QAEpB,aAAQ,GAAG,KAAK,CAAC;QAElD,kBAAa,GAAG,KAAK,CAAC;IA0CjC,CAAC;IAjCC,mBAAmB;IACT,cAAc;QACtB,OAAO;YACL,kBAAkB,EAAE,IAAI;SACzB,CAAC;IACJ,CAAC;IAED,mBAAmB;IACT,gBAAgB;QACxB,OAAO;YACL,kBAAkB,EAAE,IAAI;SACzB,CAAC;IACJ,CAAC;IAED,mBAAmB;IACT,iBAAiB;QACzB,OAAQ,IAAI,CAAC,WAAW,CAAC,CAAC;YACtB,IAAI,CAAA,8CAA8C,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE,CAAE;IACnE,CAAC;IAED,mBAAmB;IACT,YAAY;QACpB,OAAO,IAAI,CAAA;0BACW,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;uBACpC,IAAI,CAAC,QAAQ;mBACjB,CAAC;IAClB,CAAC;IAED,mBAAmB;IACT,eAAe;QACvB,OAAO,IAAI,CAAA;iCACkB,IAAI,CAAC,aAAa,oBAAoB,CAAC;IACtE,CAAC;CACF;AAhD2C;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;;2CAAqB;AAEpB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;;2CAAqB;AAEpB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;;wCAAkB;AAElD;IAAR,KAAK,EAAE;;6CAAuB;AAEX;IAAnB,KAAK,CAAC,WAAW,CAAC;8BAAU,QAAQ;sCAAM;AAK3C;IAFC,YAAY,CAAE,wCAAwC;;IACtD,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAC,CAAC;;yCACtB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/focus/focus-ring.js';\nimport '@material/web/ripple/ripple.js';\n\nimport {ActionElement} from '@material/web/actionelement/action-element.js';\nimport {ariaProperty} from '@material/web/decorators/aria-property.js';\nimport {MdRipple} from '@material/web/ripple/ripple.js';\nimport {html, TemplateResult} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\n/**\n * Base class for all actions.\n * @soyCompatible\n */\nexport abstract class Action extends ActionElement {\n  @property({type: Boolean, reflect: true}) isFocusable = false;\n\n  @property({type: Boolean, reflect: true}) isTouchable = false;\n\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  @state() showFocusRing = false;\n\n  @query('md-ripple') ripple?: MdRipple|null;\n\n  /** @soyPrefixAttribute */\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'aria-label'})\n  override ariaLabel!: string;\n\n  /** @soyTemplate */\n  protected getRootClasses(): ClassInfo {\n    return {\n      'md3-chip__action': true,\n    };\n  }\n\n  /** @soyTemplate */\n  protected getRippleClasses(): ClassInfo {\n    return {\n      'md3-chip__ripple': true,\n    };\n  }\n\n  /** @soyTemplate */\n  protected renderTouchTarget(): TemplateResult {\n    return  this.isTouchable ?\n        html`<span class=\"md3-chip__action-touch\"></span>` : html`` ;\n  }\n\n  /** @soyTemplate */\n  protected renderRipple(): TemplateResult {\n    return html`\n      <md-ripple class=\"${classMap(this.getRippleClasses())}\"\n          ?disabled=\"${this.disabled}\">\n      </md-ripple>`;\n  }\n\n  /** @soyTemplate */\n  protected renderFocusRing(): TemplateResult {\n    return html`\n      <md-focus-ring .visible=\"${this.showFocusRing}\"></md-focus-ring>`;\n  }\n}\n"]}

package/chips/action/lib/adapter.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { MDCChipActionAttributes, MDCChipActionEvents } from './constants.js';
+/**
+ * Defines the shape of the adapter expected by the foundation.
+ * Implement this adapter for your framework of choice to delegate updates to
+ * the component in your framework of choice. See architecture documentation
+ * for more details.
+ * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md
+ */
+export interface MDCChipActionAdapter {
+    emitEvent<D extends object>(name: MDCChipActionEvents, detail: D): void;
+    focus(): void;
+    getAttribute(attr: MDCChipActionAttributes): string | null;
+    getElementID(): string;
+    removeAttribute(attr: MDCChipActionAttributes): void;
+    setAttribute(attr: MDCChipActionAttributes, value: string): void;
+}

package/chips/action/lib/adapter.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export {};
+//# sourceMappingURL=adapter.js.map

package/chips/action/lib/adapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","sourceRoot":"","sources":["adapter.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {MDCChipActionAttributes, MDCChipActionEvents} from './constants.js';\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCChipActionAdapter {\n  emitEvent<D extends object>(name: MDCChipActionEvents, detail: D): void;\n\n  focus(): void;\n\n  getAttribute(attr: MDCChipActionAttributes): string|null;\n\n  getElementID(): string;\n\n  removeAttribute(attr: MDCChipActionAttributes): void;\n\n  setAttribute(attr: MDCChipActionAttributes, value: string): void;\n}\n"]}

package/chips/action/lib/constants.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * MDCChipActionCssClasses provides the classes to be queried and manipulated on
+ * the root.
+ */
+export declare enum MDCChipActionCssClasses {
+    PRIMARY_ACTION = "md3-evolution-chip__action--primary",
+    TRAILING_ACTION = "md3-evolution-chip__action--trailing",
+    CHIP_ROOT = "md3-evolution-chip"
+}
+/**
+ * MDCChipActionInteractionTrigger provides detail of the different triggers for
+ * action interactions.
+ */
+export declare enum MDCChipActionInteractionTrigger {
+    UNSPECIFIED = 0,
+    CLICK = 1,
+    BACKSPACE_KEY = 2,
+    DELETE_KEY = 3,
+    SPACEBAR_KEY = 4,
+    ENTER_KEY = 5
+}
+/**
+ * MDCChipActionType provides the different types of available actions.
+ */
+export declare enum MDCChipActionType {
+    UNSPECIFIED = 0,
+    PRIMARY = 1,
+    TRAILING = 2
+}
+/**
+ * MDCChipActionEvents provides the different events emitted by the action.
+ */
+export declare enum MDCChipActionEvents {
+    INTERACTION = "MDCChipAction:interaction",
+    NAVIGATION = "MDCChipAction:navigation"
+}
+/**
+ * MDCChipActionFocusBehavior provides configurations for focusing or unfocusing
+ * an action.
+ */
+export declare enum MDCChipActionFocusBehavior {
+    FOCUSABLE = 0,
+    FOCUSABLE_AND_FOCUSED = 1,
+    NOT_FOCUSABLE = 2
+}
+/**
+ * MDCChipActionAttributes provides the HTML attributes used by the foundation.
+ */
+export declare enum MDCChipActionAttributes {
+    ARIA_DISABLED = "aria-disabled",
+    ARIA_HIDDEN = "aria-hidden",
+    ARIA_SELECTED = "aria-selected",
+    DATA_DELETABLE = "data-mdc-deletable",
+    DISABLED = "disabled",
+    ROLE = "role",
+    TAB_INDEX = "tabindex"
+}

package/chips/action/lib/constants.js

@@ -0,0 +1,69 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * MDCChipActionCssClasses provides the classes to be queried and manipulated on
+ * the root.
+ */
+export var MDCChipActionCssClasses;
+(function (MDCChipActionCssClasses) {
+    MDCChipActionCssClasses["PRIMARY_ACTION"] = "md3-evolution-chip__action--primary";
+    MDCChipActionCssClasses["TRAILING_ACTION"] = "md3-evolution-chip__action--trailing";
+    MDCChipActionCssClasses["CHIP_ROOT"] = "md3-evolution-chip";
+})(MDCChipActionCssClasses || (MDCChipActionCssClasses = {}));
+/**
+ * MDCChipActionInteractionTrigger provides detail of the different triggers for
+ * action interactions.
+ */
+export var MDCChipActionInteractionTrigger;
+(function (MDCChipActionInteractionTrigger) {
+    MDCChipActionInteractionTrigger[MDCChipActionInteractionTrigger["UNSPECIFIED"] = 0] = "UNSPECIFIED";
+    MDCChipActionInteractionTrigger[MDCChipActionInteractionTrigger["CLICK"] = 1] = "CLICK";
+    MDCChipActionInteractionTrigger[MDCChipActionInteractionTrigger["BACKSPACE_KEY"] = 2] = "BACKSPACE_KEY";
+    MDCChipActionInteractionTrigger[MDCChipActionInteractionTrigger["DELETE_KEY"] = 3] = "DELETE_KEY";
+    MDCChipActionInteractionTrigger[MDCChipActionInteractionTrigger["SPACEBAR_KEY"] = 4] = "SPACEBAR_KEY";
+    MDCChipActionInteractionTrigger[MDCChipActionInteractionTrigger["ENTER_KEY"] = 5] = "ENTER_KEY";
+})(MDCChipActionInteractionTrigger || (MDCChipActionInteractionTrigger = {}));
+/**
+ * MDCChipActionType provides the different types of available actions.
+ */
+export var MDCChipActionType;
+(function (MDCChipActionType) {
+    MDCChipActionType[MDCChipActionType["UNSPECIFIED"] = 0] = "UNSPECIFIED";
+    MDCChipActionType[MDCChipActionType["PRIMARY"] = 1] = "PRIMARY";
+    MDCChipActionType[MDCChipActionType["TRAILING"] = 2] = "TRAILING";
+})(MDCChipActionType || (MDCChipActionType = {}));
+/**
+ * MDCChipActionEvents provides the different events emitted by the action.
+ */
+export var MDCChipActionEvents;
+(function (MDCChipActionEvents) {
+    MDCChipActionEvents["INTERACTION"] = "MDCChipAction:interaction";
+    MDCChipActionEvents["NAVIGATION"] = "MDCChipAction:navigation";
+})(MDCChipActionEvents || (MDCChipActionEvents = {}));
+/**
+ * MDCChipActionFocusBehavior provides configurations for focusing or unfocusing
+ * an action.
+ */
+export var MDCChipActionFocusBehavior;
+(function (MDCChipActionFocusBehavior) {
+    MDCChipActionFocusBehavior[MDCChipActionFocusBehavior["FOCUSABLE"] = 0] = "FOCUSABLE";
+    MDCChipActionFocusBehavior[MDCChipActionFocusBehavior["FOCUSABLE_AND_FOCUSED"] = 1] = "FOCUSABLE_AND_FOCUSED";
+    MDCChipActionFocusBehavior[MDCChipActionFocusBehavior["NOT_FOCUSABLE"] = 2] = "NOT_FOCUSABLE";
+})(MDCChipActionFocusBehavior || (MDCChipActionFocusBehavior = {}));
+/**
+ * MDCChipActionAttributes provides the HTML attributes used by the foundation.
+ */
+export var MDCChipActionAttributes;
+(function (MDCChipActionAttributes) {
+    MDCChipActionAttributes["ARIA_DISABLED"] = "aria-disabled";
+    MDCChipActionAttributes["ARIA_HIDDEN"] = "aria-hidden";
+    MDCChipActionAttributes["ARIA_SELECTED"] = "aria-selected";
+    MDCChipActionAttributes["DATA_DELETABLE"] = "data-mdc-deletable";
+    MDCChipActionAttributes["DISABLED"] = "disabled";
+    MDCChipActionAttributes["ROLE"] = "role";
+    MDCChipActionAttributes["TAB_INDEX"] = "tabindex";
+})(MDCChipActionAttributes || (MDCChipActionAttributes = {}));
+//# sourceMappingURL=constants.js.map

package/chips/action/lib/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["constants.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AACH,MAAM,CAAN,IAAY,uBAIX;AAJD,WAAY,uBAAuB;IACjC,iFAAsD,CAAA;IACtD,mFAAwD,CAAA;IACxD,2DAAgC,CAAA;AAClC,CAAC,EAJW,uBAAuB,KAAvB,uBAAuB,QAIlC;AAED;;;GAGG;AACH,MAAM,CAAN,IAAY,+BAOX;AAPD,WAAY,+BAA+B;IACzC,mGAAW,CAAA;IACX,uFAAK,CAAA;IACL,uGAAa,CAAA;IACb,iGAAU,CAAA;IACV,qGAAY,CAAA;IACZ,+FAAS,CAAA;AACX,CAAC,EAPW,+BAA+B,KAA/B,+BAA+B,QAO1C;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,iBAIX;AAJD,WAAY,iBAAiB;IAC3B,uEAAW,CAAA;IACX,+DAAO,CAAA;IACP,iEAAQ,CAAA;AACV,CAAC,EAJW,iBAAiB,KAAjB,iBAAiB,QAI5B;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,mBAGX;AAHD,WAAY,mBAAmB;IAC7B,gEAAyC,CAAA;IACzC,8DAAuC,CAAA;AACzC,CAAC,EAHW,mBAAmB,KAAnB,mBAAmB,QAG9B;AAED;;;GAGG;AACH,MAAM,CAAN,IAAY,0BAIX;AAJD,WAAY,0BAA0B;IACpC,qFAAS,CAAA;IACT,6GAAqB,CAAA;IACrB,6FAAa,CAAA;AACf,CAAC,EAJW,0BAA0B,KAA1B,0BAA0B,QAIrC;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,uBAQX;AARD,WAAY,uBAAuB;IACjC,0DAA+B,CAAA;IAC/B,sDAA2B,CAAA;IAC3B,0DAA+B,CAAA;IAC/B,gEAAqC,CAAA;IACrC,gDAAqB,CAAA;IACrB,wCAAa,CAAA;IACb,iDAAsB,CAAA;AACxB,CAAC,EARW,uBAAuB,KAAvB,uBAAuB,QAQlC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * MDCChipActionCssClasses provides the classes to be queried and manipulated on\n * the root.\n */\nexport enum MDCChipActionCssClasses {\n  PRIMARY_ACTION = 'md3-evolution-chip__action--primary',\n  TRAILING_ACTION = 'md3-evolution-chip__action--trailing',\n  CHIP_ROOT = 'md3-evolution-chip',\n}\n\n/**\n * MDCChipActionInteractionTrigger provides detail of the different triggers for\n * action interactions.\n */\nexport enum MDCChipActionInteractionTrigger {\n  UNSPECIFIED,  // Default type\n  CLICK,\n  BACKSPACE_KEY,\n  DELETE_KEY,\n  SPACEBAR_KEY,\n  ENTER_KEY,\n}\n\n/**\n * MDCChipActionType provides the different types of available actions.\n */\nexport enum MDCChipActionType {\n  UNSPECIFIED,  // Default type\n  PRIMARY,\n  TRAILING,\n}\n\n/**\n * MDCChipActionEvents provides the different events emitted by the action.\n */\nexport enum MDCChipActionEvents {\n  INTERACTION = 'MDCChipAction:interaction',\n  NAVIGATION = 'MDCChipAction:navigation',\n}\n\n/**\n * MDCChipActionFocusBehavior provides configurations for focusing or unfocusing\n * an action.\n */\nexport enum MDCChipActionFocusBehavior {\n  FOCUSABLE,\n  FOCUSABLE_AND_FOCUSED,\n  NOT_FOCUSABLE,\n}\n\n/**\n * MDCChipActionAttributes provides the HTML attributes used by the foundation.\n */\nexport enum MDCChipActionAttributes {\n  ARIA_DISABLED = 'aria-disabled',\n  ARIA_HIDDEN = 'aria-hidden',\n  ARIA_SELECTED = 'aria-selected',\n  DATA_DELETABLE = 'data-mdc-deletable',\n  DISABLED = 'disabled',\n  ROLE = 'role',\n  TAB_INDEX = 'tabindex',\n}\n"]}

package/chips/action/lib/foundation.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { MDCChipActionAdapter } from './adapter.js';
+import { MDCChipActionFocusBehavior, MDCChipActionType } from './constants.js';
+/**
+ * MDCChipActionFoundation provides a base abstract foundation for all chip
+ * actions.
+ */
+export declare abstract class MDCChipActionFoundation {
+    protected readonly adapter: MDCChipActionAdapter;
+    static get defaultAdapter(): MDCChipActionAdapter;
+    constructor(adapter: Partial<MDCChipActionAdapter>);
+    handleClick(): void;
+    handleKeydown(event: KeyboardEvent): void;
+    setDisabled(isDisabled: boolean): void;
+    isDisabled(): boolean;
+    setFocus(behavior: MDCChipActionFocusBehavior): void;
+    isFocusable(): boolean;
+    setSelected(isSelected: boolean): void;
+    isSelected(): boolean;
+    private emitInteraction;
+    private emitNavigation;
+    private shouldNotifyInteractionFromKey;
+    private getTriggerFromKey;
+    abstract actionType(): MDCChipActionType;
+    abstract isSelectable(): boolean;
+    protected abstract shouldEmitInteractionOnRemoveKey(): boolean;
+}