@material/web 0.1.0-alpha.1 → 1.0.0-pre.0

package/radio/lib/radio.d.ts

@@ -5,86 +5,47 @@
  */
 import '../../focus/focus-ring.js';
 import '../../ripple/ripple.js';
-import { PropertyValues, TemplateResult } from 'lit';
-import { ActionElement, BeginPressConfig, EndPressConfig } from '../../actionelement/action-element.js';
-import { MdRipple } from '../../ripple/ripple.js';
-import { SingleSelectionController } from './single-selection-controller.js';
+import { LitElement, TemplateResult } from 'lit';
+import { getFormValue } from '../../controller/form-controller.js';
+declare const CHECKED: unique symbol;
 /**
  * @fires checked
- * @soyCompatible
  */
-export declare class Radio extends ActionElement {
-    protected formElement: HTMLInputElement;
-    ripple: MdRipple;
-    protected _checked: boolean;
-    protected showFocusRing: boolean;
-    global: boolean;
+export declare class Radio extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static formAssociated: boolean;
     get checked(): boolean;
-    protected getChecked(): boolean;
-    /**
-     * We define our own getter/setter for `checked` because we need to track
-     * changes to it synchronously.
-     *
-     * The order in which the `checked` property is set across radio buttons
-     * within the same group is very important. However, we can't rely on
-     * UpdatingElement's `updated` callback to observe these changes (which is
-     * also what the `@observer` decorator uses), because it batches changes to
-     * all properties.
-     *
-     * Consider:
-     *
-     *   radio1.disabled = true;
-     *   radio2.checked = true;
-     *   radio1.checked = true;
-     *
-     * In this case we'd first see all changes for radio1, and then for radio2,
-     * and we couldn't tell that radio1 was the most recently checked.
-     */
-    set checked(isChecked: boolean);
-    protected setChecked(isChecked: boolean): void;
+    set checked(checked: boolean);
+    [CHECKED]: boolean;
     disabled: boolean;
-    value: string;
-    name: string;
     /**
-     * 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
+     * The element value to use in form submission when checked.
      */
-    reducedTouchTarget: boolean;
-    protected selectionController?: SingleSelectionController;
+    value: string;
     /**
-     * input's tabindex is updated based on checked status.
-     * Tab navigation will be removed from unchecked radios.
+     * The HTML name to use in form submission.
      */
-    formElementTabIndex: number;
-    protected focused: boolean;
+    name: string;
     ariaLabel: string;
-    ariaLabelledBy: string;
-    ariaDescribedBy: undefined | string;
-    protected rippleElement: MdRipple | null;
-    /** @soyTemplate */
-    protected renderRipple(): TemplateResult | string;
-    /** @soyTemplate */
-    protected renderFocusRing(): TemplateResult;
-    get isRippleActive(): boolean;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    updated(changedProperties: PropertyValues): void;
-    protected createAdapter(): void;
-    beginPress({ positionEvent }: BeginPressConfig): void;
-    endPress({ cancelled }: EndPressConfig): void;
-    click(): void;
-    protected handleFocus(): void;
-    protected handleBlur(): void;
-    protected setFormData(formData: FormData): void;
     /**
-     * @soyTemplate
-     * @soyAttributes radioAttributes: input
-     * @soyClasses radioClasses: .md3-radio
+     * The associated form element with which this element's value will submit.
      */
+    get form(): HTMLFormElement;
+    private readonly input;
+    private readonly ripple;
+    private readonly selectionController;
+    private showFocusRing;
+    private showRipple;
+    constructor();
+    [getFormValue](): string;
+    focus(): void;
     protected render(): TemplateResult;
-    protected handlePointerEnter(): void;
-    handlePointerDown(event: PointerEvent): void;
-    handlePointerLeave(e: PointerEvent): void;
-    protected changeHandler(): void;
+    private handleBlur;
+    private handleFocus;
+    private handleChange;
+    private handlePointerDown;
+    private readonly getRipple;
+    private readonly renderRipple;
+    private renderFocusRing;
 }
+export {};

package/radio/lib/radio.js

@@ -3,261 +3,138 @@
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+var _a;
 import { __decorate, __metadata } from "tslib";
-// Style preference for leading underscores.
-// tslint:disable:strip-private-property-underscore
 import '../../focus/focus-ring.js';
 import '../../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';
-import { ActionElement } from '../../actionelement/action-element.js';
+import { html, LitElement, nothing } from 'lit';
+import { property, query, queryAsync, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import { dispatchActivationClick, isActivationClick, redispatchEvent } from '../../controller/events.js';
+import { FormController, getFormValue } from '../../controller/form-controller.js';
 import { ariaProperty } from '../../decorators/aria-property.js';
 import { pointerPress, shouldShowStrongFocus } from '../../focus/strong-focus.js';
-import { MdRipple } from '../../ripple/ripple.js';
+import { ripple } from '../../ripple/directive.js';
 import { SingleSelectionController } from './single-selection-controller.js';
+const CHECKED = Symbol('checked');
 /**
  * @fires checked
- * @soyCompatible
  */
-export class Radio extends ActionElement {
+export class Radio extends LitElement {
     constructor() {
-        super(...arguments);
-        this._checked = false;
-        this.showFocusRing = false;
-        this.global = false;
+        super();
+        this[_a] = false;
         this.disabled = false;
-        this.value = 'on';
-        this.name = '';
         /**
-         * 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
+         * The element value to use in form submission when checked.
          */
-        this.reducedTouchTarget = false;
+        this.value = 'on';
         /**
-         * input's tabindex is updated based on checked status.
-         * Tab navigation will be removed from unchecked radios.
+         * The HTML name to use in form submission.
          */
-        this.formElementTabIndex = 0;
-        this.focused = false;
-        this.rippleElement = null;
-    }
-    get checked() {
-        return this.getChecked();
-    }
-    getChecked() {
-        return this._checked;
-    }
-    /**
-     * We define our own getter/setter for `checked` because we need to track
-     * changes to it synchronously.
-     *
-     * The order in which the `checked` property is set across radio buttons
-     * within the same group is very important. However, we can't rely on
-     * UpdatingElement's `updated` callback to observe these changes (which is
-     * also what the `@observer` decorator uses), because it batches changes to
-     * all properties.
-     *
-     * Consider:
-     *
-     *   radio1.disabled = true;
-     *   radio2.checked = true;
-     *   radio1.checked = true;
-     *
-     * In this case we'd first see all changes for radio1, and then for radio2,
-     * and we couldn't tell that radio1 was the most recently checked.
-     */
-    set checked(isChecked) {
-        this.setChecked(isChecked);
-    }
-    setChecked(isChecked) {
-        const oldValue = this._checked;
-        if (isChecked === oldValue) {
-            return;
-        }
-        this._checked = isChecked;
-        this.selectionController?.update(this);
-        this.requestUpdate('checked', oldValue);
-        // useful when unchecks self and wrapping element needs to synchronize
-        // TODO(b/168543810): Remove triggering event on programmatic API call.
-        this.dispatchEvent(new Event('checked', { bubbles: true, composed: true }));
-    }
-    /** @soyTemplate */
-    renderRipple() {
-        return html `<md-ripple unbounded
-        ?disabled="${this.disabled}"></md-ripple>`;
-    }
-    /** @soyTemplate */
-    renderFocusRing() {
-        return html `<md-focus-ring .visible="${this.showFocusRing}"></md-focus-ring>`;
-    }
-    get isRippleActive() {
-        return false;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        // Note that we must defer creating the selection controller until the
-        // element has connected, because selection controllers are keyed by the
-        // radio's shadow root. For example, if we're stamping in a lit map
-        // or repeat, then we'll be constructed before we're added to a root node.
-        //
-        // Also note if we aren't using native shadow DOM, we still need a
-        // SelectionController, because we should update checked status of other
-        // radios in the group when selection changes. It also simplifies
-        // implementation and testing to use one in all cases.
-        //
-        // eslint-disable-next-line @typescript-eslint/no-use-before-define
-        this.selectionController = SingleSelectionController.getController(this);
-        this.selectionController.register(this);
-        // Radios maybe checked before connected, update selection as soon it is
-        // connected to DOM. Last checked radio button in the DOM will be selected.
-        //
-        // NOTE: If we update selection only after firstUpdate() we might mistakenly
-        // update checked status before other radios are rendered.
-        this.selectionController.update(this);
-    }
-    disconnectedCallback() {
-        // The controller is initialized in connectedCallback, so if we are in
-        // disconnectedCallback then it must be initialized.
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        this.selectionController.unregister(this);
-        this.selectionController = undefined;
-    }
-    updated(changedProperties) {
-        if (changedProperties.has('checked') && this.formElement) {
-            this.formElement.checked = this.checked;
-            if (!this.checked) {
-                // Remove focus ring when unchecked on other radio programmatically.
-                // Blur on input since this determines the focus style.
-                this.formElement?.blur();
+        this.name = '';
+        this.selectionController = new SingleSelectionController(this);
+        this.showFocusRing = false;
+        this.showRipple = false;
+        this.getRipple = () => {
+            this.showRipple = true;
+            return this.ripple;
+        };
+        this.renderRipple = () => {
+            return html `<md-ripple unbounded ?disabled=${this.disabled}></md-ripple>`;
+        };
+        this.addController(new FormController(this));
+        this.addController(this.selectionController);
+        this.addEventListener('click', (event) => {
+            if (!isActivationClick(event)) {
+                return;
             }
-        }
+            this.focus();
+            dispatchActivationClick(this.input);
+        });
     }
-    createAdapter() { }
-    beginPress({ positionEvent }) {
-        this.ripple.beginPress(positionEvent);
+    get checked() {
+        return this[CHECKED];
     }
-    endPress({ cancelled }) {
-        this.ripple.endPress();
-        if (cancelled) {
+    set checked(checked) {
+        const wasChecked = this.checked;
+        if (wasChecked === checked) {
             return;
         }
-        super.endPress({
-            cancelled,
-            actionData: { checked: this.formElement.checked, value: this.formElement.value }
-        });
+        this[CHECKED] = checked;
+        this.requestUpdate('checked', wasChecked);
+        this.selectionController.handleCheckedChange();
     }
-    click() {
-        this.formElement.focus();
-        this.formElement.click();
+    /**
+     * The associated form element with which this element's value will submit.
+     */
+    get form() {
+        return this.closest('form');
     }
-    handleFocus() {
-        this.focused = true;
-        this.showFocusRing = shouldShowStrongFocus();
+    [(_a = CHECKED, getFormValue)]() {
+        return this.checked ? this.value : null;
     }
-    handleBlur() {
-        this.focused = false;
-        this.showFocusRing = false;
-    }
-    setFormData(formData) {
-        if (this.name && this.checked) {
-            formData.append(this.name, this.value);
-        }
+    focus() {
+        this.input?.focus();
     }
-    /**
-     * @soyTemplate
-     * @soyAttributes radioAttributes: input
-     * @soyClasses radioClasses: .md3-radio
-     */
     render() {
-        /** @classMap */
-        const classes = {
-            'md3-radio--touch': !this.reducedTouchTarget,
-            'md3-ripple-upgraded--background-focused': this.focused,
-            'md3-radio--disabled': this.disabled,
-        };
         return html `
-      <div class="md3-radio ${classMap(classes)}">
-        ${this.renderFocusRing()}
-        <input
-          tabindex="${this.formElementTabIndex}"
-          class="md3-radio__native-control"
-          type="radio"
-          name="${this.name}"
-          aria-label="${ifDefined(this.ariaLabel)}"
-          aria-labelledby="${ifDefined(this.ariaLabelledBy)}"
-          aria-describedby="${ifDefined(this.ariaDescribedBy)}"
-          ?checked="${this.checked}"
-          .value="${this.value}"
-          ?disabled="${this.disabled}"
-          @change="${this.changeHandler}"
-          @focus="${this.handleFocus}"
-          @click="${this.handleClick}"
-          @blur="${this.handleBlur}"
-          @pointerenter=${this.handlePointerEnter}
-          @pointerdown=${this.handlePointerDown}
-          @pointerup=${this.handlePointerUp}
-          @pointercancel=${this.handlePointerCancel}
-          @pointerleave=${this.handlePointerLeave}
-          >
-        <div class="md3-radio__background">
-          <div class="md3-radio__outer-circle"></div>
-          <div class="md3-radio__inner-circle"></div>
-        </div>
-        <div class="md3-radio__ripple">
-          ${this.renderRipple()}
-        </div>
-      </div>`;
+      ${when(this.showRipple, this.renderRipple)}
+      ${this.renderFocusRing()}
+      <svg class="icon" viewBox="0 0 20 20">
+        <mask id="cutout">
+          <rect width="100%" height="100%" fill="white" />
+          <circle cx="10" cy="10" r="8" fill="black" />
+        </mask>
+        <circle cx="10" cy="10" r="10" mask="url(#cutout)" />
+        <circle cx="10" cy="10" r="5" class="inner-circle" />
+      </svg>
+      <input
+        type="radio"
+        name=${this.name}
+        aria-label=${this.ariaLabel || nothing}
+        .checked=${this.checked}
+        .value=${this.value}
+        ?disabled=${this.disabled}
+        @change=${this.handleChange}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+        @pointerdown=${this.handlePointerDown}
+        ${ripple(this.getRipple)}
+      >
+    `;
     }
-    handlePointerEnter() {
-        this.ripple.beginHover();
+    handleBlur() {
+        this.showFocusRing = false;
     }
-    handlePointerDown(event) {
-        super.handlePointerDown(event);
-        pointerPress();
+    handleFocus() {
         this.showFocusRing = shouldShowStrongFocus();
     }
-    handlePointerLeave(e) {
-        super.handlePointerLeave(e);
-        this.ripple.endHover();
-    }
-    changeHandler() {
+    handleChange(event) {
         if (this.disabled) {
             return;
         }
         // Per spec, the change event on a radio input always represents checked.
         this.checked = true;
-        this.dispatchEvent(new Event('change', {
-            bubbles: true,
-            composed: true,
-        }));
+        redispatchEvent(this, event);
+    }
+    handlePointerDown() {
+        pointerPress();
+        this.showFocusRing = shouldShowStrongFocus();
+    }
+    renderFocusRing() {
+        return html `<md-focus-ring .visible=${this.showFocusRing}></md-focus-ring>`;
     }
 }
-__decorate([
-    query('input'),
-    __metadata("design:type", HTMLInputElement)
-], Radio.prototype, "formElement", void 0);
-__decorate([
-    query('md-ripple'),
-    __metadata("design:type", MdRipple)
-], Radio.prototype, "ripple", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], Radio.prototype, "showFocusRing", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
-], Radio.prototype, "global", void 0);
+Radio.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+Radio.formAssociated = true;
 __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [Boolean])
 ], Radio.prototype, "checked", null);
 __decorate([
-    property({ type: Boolean }),
+    property({ type: Boolean, reflect: true }),
     __metadata("design:type", Object)
 ], Radio.prototype, "disabled", void 0);
 __decorate([
@@ -265,21 +142,9 @@ __decorate([
     __metadata("design:type", Object)
 ], Radio.prototype, "value", void 0);
 __decorate([
-    property({ type: String }),
+    property({ type: String, reflect: true }),
     __metadata("design:type", Object)
 ], Radio.prototype, "name", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
-], Radio.prototype, "reducedTouchTarget", void 0);
-__decorate([
-    property({ type: Number }),
-    __metadata("design:type", Object)
-], Radio.prototype, "formElementTabIndex", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], Radio.prototype, "focused", void 0);
 __decorate([
     ariaProperty // tslint:disable-line:no-new-decorators
     ,
@@ -287,15 +152,19 @@ __decorate([
     __metadata("design:type", String)
 ], Radio.prototype, "ariaLabel", void 0);
 __decorate([
-    ariaProperty // tslint:disable-line:no-new-decorators
-    ,
-    property({ attribute: 'data-aria-labelledby', noAccessor: true }),
-    __metadata("design:type", String)
-], Radio.prototype, "ariaLabelledBy", void 0);
+    query('input'),
+    __metadata("design:type", HTMLInputElement)
+], Radio.prototype, "input", void 0);
 __decorate([
-    ariaProperty // tslint:disable-line:no-new-decorators
-    ,
-    property({ type: String, attribute: 'data-aria-describedby', noAccessor: true }),
-    __metadata("design:type", String)
-], Radio.prototype, "ariaDescribedBy", void 0);
+    queryAsync('md-ripple'),
+    __metadata("design:type", Promise)
+], Radio.prototype, "ripple", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Radio.prototype, "showFocusRing", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Radio.prototype, "showRipple", void 0);
 //# sourceMappingURL=radio.js.map

package/radio/lib/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["radio.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Style preference for leading underscores.\n// tslint:disable:strip-private-property-underscore\n\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\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\nimport {ActionElement, BeginPressConfig, EndPressConfig} from '../../actionelement/action-element.js';\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {MdRipple} from '../../ripple/ripple.js';\n\nimport {SingleSelectionController} from './single-selection-controller.js';\n\n/**\n * @fires checked\n * @soyCompatible\n */\nexport class Radio extends ActionElement {\n  @query('input') protected formElement!: HTMLInputElement;\n\n  @query('md-ripple') ripple!: MdRipple;\n\n  protected _checked = false;\n\n  @state() protected showFocusRing = false;\n\n  @property({type: Boolean}) global = false;\n\n  @property({type: Boolean, reflect: true})\n  get checked(): boolean {\n    return this.getChecked();\n  }\n\n  protected getChecked(): boolean {\n    return this._checked;\n  }\n\n  /**\n   * We define our own getter/setter for `checked` because we need to track\n   * changes to it synchronously.\n   *\n   * The order in which the `checked` property is set across radio buttons\n   * within the same group is very important. However, we can't rely on\n   * UpdatingElement's `updated` callback to observe these changes (which is\n   * also what the `@observer` decorator uses), because it batches changes to\n   * all properties.\n   *\n   * Consider:\n   *\n   *   radio1.disabled = true;\n   *   radio2.checked = true;\n   *   radio1.checked = true;\n   *\n   * In this case we'd first see all changes for radio1, and then for radio2,\n   * and we couldn't tell that radio1 was the most recently checked.\n   */\n  set checked(isChecked: boolean) {\n    this.setChecked(isChecked);\n  }\n\n  protected setChecked(isChecked: boolean) {\n    const oldValue = this._checked;\n    if (isChecked === oldValue) {\n      return;\n    }\n    this._checked = isChecked;\n    this.selectionController?.update(this);\n\n    this.requestUpdate('checked', oldValue);\n\n    // useful when unchecks self and wrapping element needs to synchronize\n    // TODO(b/168543810): Remove triggering event on programmatic API call.\n    this.dispatchEvent(new Event('checked', {bubbles: true, composed: true}));\n  }\n\n  @property({type: Boolean}) override disabled = false;\n\n  @property({type: String}) value = 'on';\n\n  @property({type: String}) name = '';\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  protected selectionController?: SingleSelectionController;\n\n  /**\n   * input's tabindex is updated based on checked status.\n   * Tab navigation will be removed from unchecked radios.\n   */\n  @property({type: Number}) formElementTabIndex = 0;\n\n  @state() protected focused = false;\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({attribute: 'data-aria-label', noAccessor: true})\n  override ariaLabel!: string;\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({attribute: 'data-aria-labelledby', noAccessor: true})\n  ariaLabelledBy!: string;\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property(\n      {type: String, attribute: 'data-aria-describedby', noAccessor: true})\n  ariaDescribedBy!: undefined|string;\n\n  protected rippleElement: MdRipple|null = null;\n\n  /** @soyTemplate */\n  protected renderRipple(): TemplateResult|string {\n    return html`<md-ripple unbounded\n        ?disabled=\"${this.disabled}\"></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  get isRippleActive() {\n    return false;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    // Note that we must defer creating the selection controller until the\n    // element has connected, because selection controllers are keyed by the\n    // radio's shadow root. For example, if we're stamping in a lit map\n    // or repeat, then we'll be constructed before we're added to a root node.\n    //\n    // Also note if we aren't using native shadow DOM, we still need a\n    // SelectionController, because we should update checked status of other\n    // radios in the group when selection changes. It also simplifies\n    // implementation and testing to use one in all cases.\n    //\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    this.selectionController = SingleSelectionController.getController(this);\n    this.selectionController.register(this);\n\n    // Radios maybe checked before connected, update selection as soon it is\n    // connected to DOM. Last checked radio button in the DOM will be selected.\n    //\n    // NOTE: If we update selection only after firstUpdate() we might mistakenly\n    // update checked status before other radios are rendered.\n    this.selectionController.update(this);\n  }\n\n  override disconnectedCallback() {\n    // The controller is initialized in connectedCallback, so if we are in\n    // disconnectedCallback then it must be initialized.\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    this.selectionController!.unregister(this);\n    this.selectionController = undefined;\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    if (changedProperties.has('checked') && this.formElement) {\n      this.formElement.checked = this.checked;\n      if (!this.checked) {\n        // Remove focus ring when unchecked on other radio programmatically.\n        // Blur on input since this determines the focus style.\n        this.formElement?.blur();\n      }\n    }\n  }\n\n  protected createAdapter() {}\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  override click() {\n    this.formElement.focus();\n    this.formElement.click();\n  }\n\n  protected handleFocus() {\n    this.focused = true;\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleBlur() {\n    this.focused = false;\n    this.showFocusRing = false;\n  }\n\n  protected setFormData(formData: FormData) {\n    if (this.name && this.checked) {\n      formData.append(this.name, this.value);\n    }\n  }\n\n  /**\n   * @soyTemplate\n   * @soyAttributes radioAttributes: input\n   * @soyClasses radioClasses: .md3-radio\n   */\n  protected override render(): TemplateResult {\n    /** @classMap */\n    const classes = {\n      'md3-radio--touch': !this.reducedTouchTarget,\n      'md3-ripple-upgraded--background-focused': this.focused,\n      'md3-radio--disabled': this.disabled,\n    };\n\n    return html`\n      <div class=\"md3-radio ${classMap(classes)}\">\n        ${this.renderFocusRing()}\n        <input\n          tabindex=\"${this.formElementTabIndex}\"\n          class=\"md3-radio__native-control\"\n          type=\"radio\"\n          name=\"${this.name}\"\n          aria-label=\"${ifDefined(this.ariaLabel)}\"\n          aria-labelledby=\"${ifDefined(this.ariaLabelledBy)}\"\n          aria-describedby=\"${ifDefined(this.ariaDescribedBy)}\"\n          ?checked=\"${this.checked}\"\n          .value=\"${this.value}\"\n          ?disabled=\"${this.disabled}\"\n          @change=\"${this.changeHandler}\"\n          @focus=\"${this.handleFocus}\"\n          @click=\"${this.handleClick}\"\n          @blur=\"${this.handleBlur}\"\n          @pointerenter=${this.handlePointerEnter}\n          @pointerdown=${this.handlePointerDown}\n          @pointerup=${this.handlePointerUp}\n          @pointercancel=${this.handlePointerCancel}\n          @pointerleave=${this.handlePointerLeave}\n          >\n        <div class=\"md3-radio__background\">\n          <div class=\"md3-radio__outer-circle\"></div>\n          <div class=\"md3-radio__inner-circle\"></div>\n        </div>\n        <div class=\"md3-radio__ripple\">\n          ${this.renderRipple()}\n        </div>\n      </div>`;\n  }\n\n  protected handlePointerEnter() {\n    this.ripple.beginHover();\n  }\n\n  override handlePointerDown(event: PointerEvent) {\n    super.handlePointerDown(event);\n\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  override handlePointerLeave(e: PointerEvent) {\n    super.handlePointerLeave(e);\n    this.ripple.endHover();\n  }\n\n  protected changeHandler() {\n    if (this.disabled) {\n      return;\n    }\n\n    // Per spec, the change event on a radio input always represents checked.\n    this.checked = true;\n    this.dispatchEvent(new Event('change', {\n      bubbles: true,\n      composed: true,\n    }));\n  }\n}\n"]}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["radio.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;AAEH,OAAO,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACrE,OAAO,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAC;AAE5C,OAAO,EAAC,uBAAuB,EAAE,iBAAiB,EAAE,eAAe,EAAC,MAAM,4BAA4B,CAAC;AACvG,OAAO,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,qCAAqC,CAAC;AACjF,OAAO,EAAC,YAAY,EAAC,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAC,YAAY,EAAE,qBAAqB,EAAC,MAAM,6BAA6B,CAAC;AAChF,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AAGjD,OAAO,EAAC,yBAAyB,EAAC,MAAM,kCAAkC,CAAC;AAE3E,MAAM,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;AAElC;;GAEG;AACH,MAAM,OAAO,KAAM,SAAQ,UAAU;IAoDnC;QACE,KAAK,EAAE,CAAC;QAhCV,QAAS,GAAG,KAAK,CAAC;QAEwB,aAAQ,GAAG,KAAK,CAAC;QAE3D;;WAEG;QACuB,UAAK,GAAG,IAAI,CAAC;QAEvC;;WAEG;QACsC,SAAI,GAAG,EAAE,CAAC;QAelC,wBAAmB,GAAG,IAAI,yBAAyB,CAAC,IAAI,CAAC,CAAC;QAC1D,kBAAa,GAAG,KAAK,CAAC;QACtB,eAAU,GAAG,KAAK,CAAC;QA0EnB,cAAS,GAAG,GAAG,EAAE;YAChC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,OAAO,IAAI,CAAC,MAAM,CAAC;QACrB,CAAC,CAAC;QAEe,iBAAY,GAAG,GAAG,EAAE;YACnC,OAAO,IAAI,CAAA,kCAAkC,IAAI,CAAC,QAAQ,eAAe,CAAC;QAC5E,CAAC,CAAC;QA7EA,IAAI,CAAC,aAAa,CAAC,IAAI,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC;QAC7C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAC7C,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAY,EAAE,EAAE;YAC9C,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE;gBAC7B,OAAO;aACR;YACD,IAAI,CAAC,KAAK,EAAE,CAAC;YACb,uBAAuB,CAAC,IAAI,CAAC,KAAM,CAAC,CAAC;QACvC,CAAC,CAAC,CAAC;IACL,CAAC;IAxDD,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC;IACvB,CAAC;IACD,IAAI,OAAO,CAAC,OAAgB;QAC1B,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;QAChC,IAAI,UAAU,KAAK,OAAO,EAAE;YAC1B,OAAO;SACR;QAED,IAAI,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;QACxB,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;QAC1C,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,EAAE,CAAC;IACjD,CAAC;IAoBD;;OAEG;IACH,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC9B,CAAC;IAqBD,OA5CC,OAAO,EA4CP,YAAY,EAAC;QACZ,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAC1C,CAAC;IAEQ,KAAK;QACZ,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC;IACtB,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC;QACxC,IAAI,CAAC,eAAe,EAAE;;;;;;;;;;;eAWf,IAAI,CAAC,IAAI;qBACH,IAAI,CAAC,SAAS,IAAI,OAAO;mBAC3B,IAAI,CAAC,OAAO;iBACd,IAAI,CAAC,KAAK;oBACP,IAAI,CAAC,QAAQ;kBACf,IAAI,CAAC,YAAY;iBAClB,IAAI,CAAC,WAAW;gBACjB,IAAI,CAAC,UAAU;uBACR,IAAI,CAAC,iBAAiB;UACnC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;;KAE3B,CAAC;IACJ,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC7B,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,aAAa,GAAG,qBAAqB,EAAE,CAAC;IAC/C,CAAC;IAEO,YAAY,CAAC,KAAY;QAC/B,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,yEAAyE;QACzE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAEO,iBAAiB;QACvB,YAAY,EAAE,CAAC;QACf,IAAI,CAAC,aAAa,GAAG,qBAAqB,EAAE,CAAC;IAC/C,CAAC;IAWO,eAAe;QACrB,OAAO,IAAI,CAAA,2BAA2B,IAAI,CAAC,aAAa,mBAAmB,CAAC;IAC9E,CAAC;;AAtIe,uBAAiB,GACZ,EAAC,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAC,CAAC;AAEtE,oBAAc,GAAG,IAAI,CAAC;AAG7B;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;;;oCAGxC;AAcyC;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;;uCAAkB;AAKjC;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;;oCAAc;AAKE;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;;mCAAW;AAInD;IAFC,YAAY,CAAE,wCAAwC;;IACtD,QAAQ,CAAC,EAAC,SAAS,EAAE,iBAAiB,EAAE,UAAU,EAAE,IAAI,EAAC,CAAC;;wCAC/B;AASZ;IAAf,KAAK,CAAC,OAAO,CAAC;8BAA0B,gBAAgB;oCAAM;AACtC;IAAxB,UAAU,CAAC,WAAW,CAAC;;qCAAkD;AAEjE;IAAR,KAAK,EAAE;;4CAA+B;AAC9B;IAAR,KAAK,EAAE;;yCAA4B","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {property, query, queryAsync, state} from 'lit/decorators.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {dispatchActivationClick, isActivationClick, redispatchEvent} from '../../controller/events.js';\nimport {FormController, getFormValue} from '../../controller/form-controller.js';\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\n\nimport {SingleSelectionController} from './single-selection-controller.js';\n\nconst CHECKED = Symbol('checked');\n\n/**\n * @fires checked\n */\nexport class Radio extends LitElement {\n  static override shadowRootOptions:\n      ShadowRootInit = {...LitElement.shadowRootOptions, delegatesFocus: true};\n\n  static formAssociated = true;\n\n  @property({type: Boolean, reflect: true})\n  get checked() {\n    return this[CHECKED];\n  }\n  set checked(checked: boolean) {\n    const wasChecked = this.checked;\n    if (wasChecked === checked) {\n      return;\n    }\n\n    this[CHECKED] = checked;\n    this.requestUpdate('checked', wasChecked);\n    this.selectionController.handleCheckedChange();\n  }\n\n  [CHECKED] = false;\n\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * The element value to use in form submission when checked.\n   */\n  @property({type: String}) value = 'on';\n\n  /**\n   * The HTML name to use in form submission.\n   */\n  @property({type: String, reflect: true}) name = '';\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({attribute: 'data-aria-label', noAccessor: true})\n  override ariaLabel!: string;\n\n  /**\n   * The associated form element with which this element's value will submit.\n   */\n  get form() {\n    return this.closest('form');\n  }\n\n  @query('input') private readonly input!: HTMLInputElement|null;\n  @queryAsync('md-ripple') private readonly ripple!: Promise<MdRipple|null>;\n  private readonly selectionController = new SingleSelectionController(this);\n  @state() private showFocusRing = false;\n  @state() private showRipple = false;\n\n  constructor() {\n    super();\n    this.addController(new FormController(this));\n    this.addController(this.selectionController);\n    this.addEventListener('click', (event: Event) => {\n      if (!isActivationClick(event)) {\n        return;\n      }\n      this.focus();\n      dispatchActivationClick(this.input!);\n    });\n  }\n\n  [getFormValue]() {\n    return this.checked ? this.value : null;\n  }\n\n  override focus() {\n    this.input?.focus();\n  }\n\n  protected override render(): TemplateResult {\n    return html`\n      ${when(this.showRipple, this.renderRipple)}\n      ${this.renderFocusRing()}\n      <svg class=\"icon\" viewBox=\"0 0 20 20\">\n        <mask id=\"cutout\">\n          <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n          <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"black\" />\n        </mask>\n        <circle cx=\"10\" cy=\"10\" r=\"10\" mask=\"url(#cutout)\" />\n        <circle cx=\"10\" cy=\"10\" r=\"5\" class=\"inner-circle\" />\n      </svg>\n      <input\n        type=\"radio\"\n        name=${this.name}\n        aria-label=${this.ariaLabel || nothing}\n        .checked=${this.checked}\n        .value=${this.value}\n        ?disabled=${this.disabled}\n        @change=${this.handleChange}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        @pointerdown=${this.handlePointerDown}\n        ${ripple(this.getRipple)}\n      >\n    `;\n  }\n\n  private handleBlur() {\n    this.showFocusRing = false;\n  }\n\n  private handleFocus() {\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  private handleChange(event: Event) {\n    if (this.disabled) {\n      return;\n    }\n\n    // Per spec, the change event on a radio input always represents checked.\n    this.checked = true;\n    redispatchEvent(this, event);\n  }\n\n  private handlePointerDown() {\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  private readonly getRipple = () => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  private readonly renderRipple = () => {\n    return html`<md-ripple unbounded ?disabled=${this.disabled}></md-ripple>`;\n  };\n\n  private renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring .visible=${this.showFocusRing}></md-focus-ring>`;\n  }\n}\n"]}