@material/web 0.1.0-alpha.0

package/radio/lib/radio.js

@@ -0,0 +1,302 @@
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate, __metadata } from "tslib";
+// Style preference for leading underscores.
+// tslint:disable:strip-private-property-underscore
+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';
+import { SingleSelectionController } from './single-selection-controller.js';
+/**
+ * @fires checked
+ * @soyCompatible
+ */
+export class Radio extends ActionElement {
+    constructor() {
+        super(...arguments);
+        this._checked = false;
+        this.showFocusRing = false;
+        this.global = 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
+         */
+        this.reducedTouchTarget = false;
+        /**
+         * input's tabindex is updated based on checked status.
+         * Tab navigation will be removed from unchecked radios.
+         */
+        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();
+            }
+        }
+    }
+    createAdapter() { }
+    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 }
+        });
+    }
+    click() {
+        this.formElement.focus();
+        this.formElement.click();
+    }
+    handleFocus() {
+        this.focused = true;
+        this.showFocusRing = shouldShowStrongFocus();
+    }
+    handleBlur() {
+        this.focused = false;
+        this.showFocusRing = false;
+    }
+    setFormData(formData) {
+        if (this.name && this.checked) {
+            formData.append(this.name, this.value);
+        }
+    }
+    /**
+     * @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>`;
+    }
+    handlePointerEnter() {
+        this.ripple.beginHover();
+    }
+    handlePointerDown(event) {
+        super.handlePointerDown(event);
+        pointerPress();
+        this.showFocusRing = shouldShowStrongFocus();
+    }
+    handlePointerLeave(e) {
+        super.handlePointerLeave(e);
+        this.ripple.endHover();
+    }
+    changeHandler() {
+        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,
+        }));
+    }
+}
+__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);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], Radio.prototype, "checked", null);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], Radio.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], Radio.prototype, "value", void 0);
+__decorate([
+    property({ type: String }),
+    __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
+    ,
+    property({ attribute: 'aria-label' }),
+    __metadata("design:type", String)
+], Radio.prototype, "ariaLabel", void 0);
+__decorate([
+    legacyAriaProperty // tslint:disable-line:no-new-decorators
+    ,
+    property({ attribute: 'aria-labelledby' }),
+    __metadata("design:type", String)
+], Radio.prototype, "ariaLabelledBy", void 0);
+__decorate([
+    legacyAriaProperty // tslint:disable-line:no-new-decorators
+    ,
+    property({ type: String, attribute: 'aria-describedby' }),
+    __metadata("design:type", String)
+], Radio.prototype, "ariaDescribedBy", void 0);
+//# sourceMappingURL=radio.js.map

package/radio/lib/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["radio.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,4CAA4C;AAC5C,mDAAmD;AAEnD,OAAO,mCAAmC,CAAC;AAC3C,OAAO,gCAAgC,CAAC;AAExC,OAAO,EAAC,aAAa,EAAmC,MAAM,+CAA+C,CAAC;AAC9G,OAAO,EAAC,YAAY,IAAI,kBAAkB,EAAC,MAAM,4CAA4C,CAAC;AAC9F,OAAO,EAAC,YAAY,EAAC,MAAM,2CAA2C,CAAC;AACvE,OAAO,EAAC,YAAY,EAAE,qBAAqB,EAAC,MAAM,qCAAqC,CAAC;AACxF,OAAO,EAAC,QAAQ,EAAC,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAC,IAAI,EAAiC,MAAM,KAAK,CAAC;AACzD,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAC,SAAS,EAAC,MAAM,8BAA8B,CAAC;AAEvD,OAAO,EAAC,yBAAyB,EAAC,MAAM,kCAAkC,CAAC;AAE3E;;;GAGG;AACH,MAAM,OAAO,KAAM,SAAQ,aAAa;IAAxC;;QAKY,aAAQ,GAAG,KAAK,CAAC;QAER,kBAAa,GAAG,KAAK,CAAC;QAEd,WAAM,GAAG,KAAK,CAAC;QAiDN,aAAQ,GAAG,KAAK,CAAC;QAE3B,UAAK,GAAG,IAAI,CAAC;QAEb,SAAI,GAAG,EAAE,CAAC;QAEpC;;;;WAIG;QACwB,uBAAkB,GAAG,KAAK,CAAC;QAItD;;;WAGG;QACuB,wBAAmB,GAAG,CAAC,CAAC;QAE/B,YAAO,GAAG,KAAK,CAAC;QAiBzB,kBAAa,GAAkB,IAAI,CAAC;IAiLhD,CAAC;IArQC,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3B,CAAC;IAES,UAAU;QAClB,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAED;;;;;;;;;;;;;;;;;;OAkBG;IACH,IAAI,OAAO,CAAC,SAAkB;QAC5B,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;IAC7B,CAAC;IAES,UAAU,CAAC,SAAkB;QACrC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,SAAS,KAAK,QAAQ,EAAE;YAC1B,OAAO;SACR;QACD,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;QAC1B,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;QAEvC,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QAExC,sEAAsE;QACtE,uEAAuE;QACvE,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,SAAS,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;IAC5E,CAAC;IA0CD,mBAAmB;IACT,YAAY;QACpB,OAAO,IAAI,CAAA;qBACM,IAAI,CAAC,QAAQ,gBAAgB,CAAC;IACjD,CAAC;IAED,mBAAmB;IACT,eAAe;QACvB,OAAO,IAAI,CAAA,4BACP,IAAI,CAAC,aAAa,oBAAoB,CAAC;IAC7C,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,KAAK,CAAC;IACf,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,sEAAsE;QACtE,wEAAwE;QACxE,mEAAmE;QACnE,0EAA0E;QAC1E,EAAE;QACF,kEAAkE;QAClE,wEAAwE;QACxE,iEAAiE;QACjE,sDAAsD;QACtD,EAAE;QACF,mEAAmE;QACnE,IAAI,CAAC,mBAAmB,GAAG,yBAAyB,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QACzE,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QAExC,wEAAwE;QACxE,2EAA2E;QAC3E,EAAE;QACF,4EAA4E;QAC5E,0DAA0D;QAC1D,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC;IAEQ,oBAAoB;QAC3B,sEAAsE;QACtE,oDAAoD;QACpD,oEAAoE;QACpE,IAAI,CAAC,mBAAoB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QAC3C,IAAI,CAAC,mBAAmB,GAAG,SAAS,CAAC;IACvC,CAAC;IAEQ,OAAO,CAAC,iBAAiC;QAChD,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,WAAW,EAAE;YACxD,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;YACxC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;gBACjB,oEAAoE;gBACpE,uDAAuD;gBACvD,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;aAC1B;SACF;IACH,CAAC;IAES,aAAa,KAAI,CAAC;IAEnB,UAAU,CAAC,EAAC,aAAa,EAAmB;QACnD,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IACxC,CAAC;IAEQ,QAAQ,CAAC,EAAC,SAAS,EAAiB;QAC3C,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;QAEvB,IAAI,SAAS,EAAE;YACb,OAAO;SACR;QAED,KAAK,CAAC,QAAQ,CAAC;YACb,SAAS;YACT,UAAU,EACN,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,EAAC;SACvE,CAAC,CAAC;IACL,CAAC;IAEQ,KAAK;QACZ,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;QACzB,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;IAC3B,CAAC;IAES,WAAW;QACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,aAAa,GAAG,qBAAqB,EAAE,CAAC;IAC/C,CAAC;IAES,UAAU;QAClB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC7B,CAAC;IAES,WAAW,CAAC,QAAkB;QACtC,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE;YAC7B,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;SACxC;IACH,CAAC;IAED;;;;OAIG;IACgB,MAAM;QACvB,gBAAgB;QAChB,MAAM,OAAO,GAAG;YACd,kBAAkB,EAAE,CAAC,IAAI,CAAC,kBAAkB;YAC5C,yCAAyC,EAAE,IAAI,CAAC,OAAO;YACvD,qBAAqB,EAAE,IAAI,CAAC,QAAQ;SACrC,CAAC;QAEF,OAAO,IAAI,CAAA;8BACe,QAAQ,CAAC,OAAO,CAAC;UACrC,IAAI,CAAC,eAAe,EAAE;;sBAEV,IAAI,CAAC,mBAAmB;;;kBAG5B,IAAI,CAAC,IAAI;wBACH,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;6BACpB,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC;8BAC7B,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC;sBACvC,IAAI,CAAC,OAAO;oBACd,IAAI,CAAC,KAAK;uBACP,IAAI,CAAC,QAAQ;qBACf,IAAI,CAAC,aAAa;oBACnB,IAAI,CAAC,WAAW;oBAChB,IAAI,CAAC,WAAW;mBACjB,IAAI,CAAC,UAAU;0BACR,IAAI,CAAC,kBAAkB;yBACxB,IAAI,CAAC,iBAAiB;uBACxB,IAAI,CAAC,eAAe;2BAChB,IAAI,CAAC,mBAAmB;0BACzB,IAAI,CAAC,kBAAkB;;;;;;;YAOrC,IAAI,CAAC,YAAY,EAAE;;aAElB,CAAC;IACZ,CAAC;IAES,kBAAkB;QAC1B,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC;IAC3B,CAAC;IAEQ,iBAAiB,CAAC,KAAmB;QAC5C,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAE/B,YAAY,EAAE,CAAC;QACf,IAAI,CAAC,aAAa,GAAG,qBAAqB,EAAE,CAAC;IAC/C,CAAC;IAEQ,kBAAkB,CAAC,CAAe;QACzC,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC;QAC5B,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;IACzB,CAAC;IAES,aAAa;QACrB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,yEAAyE;QACzE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE;YACrC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC,CAAC;IACN,CAAC;CACF;AAhRiB;IAAf,KAAK,CAAC,OAAO,CAAC;8BAAyB,gBAAgB;0CAAC;AAErC;IAAnB,KAAK,CAAC,WAAW,CAAC;8BAAU,QAAQ;qCAAC;AAI7B;IAAR,KAAK,EAAE;;4CAAiC;AAEd;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;;qCAAgB;AAG1C;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;;;oCAGxC;AA4C0B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;;uCAA2B;AAE3B;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;;oCAAc;AAEb;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;;mCAAW;AAOT;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;;iDAA4B;AAQ5B;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;;kDAAyB;AAEzC;IAAR,KAAK,EAAE;;sCAA2B;AAKnC;IAFC,YAAY,CAAE,wCAAwC;;IACtD,QAAQ,CAAC,EAAC,SAAS,EAAE,YAAY,EAAC,CAAC;;wCACR;AAK5B;IAFC,kBAAkB,CAAE,wCAAwC;;IAC5D,QAAQ,CAAC,EAAC,SAAS,EAAE,iBAAiB,EAAC,CAAC;;6CACjB;AAKxB;IAFC,kBAAkB,CAAE,wCAAwC;;IAC5D,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAC,CAAC;;8CACrB","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 '@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\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  /** @soyPrefixAttribute */\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({attribute: 'aria-label'})\n  override ariaLabel!: string;\n\n  /** @soyPrefixAttribute */\n  @legacyAriaProperty  // tslint:disable-line:no-new-decorators\n  @property({attribute: 'aria-labelledby'})\n  ariaLabelledBy!: 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  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"]}

package/radio/lib/single-selection-controller.d.ts

@@ -0,0 +1,167 @@
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Set of checkable elements with added metadata
+ */
+export declare class SingleSelectionSet {
+    selected: CheckableElement | null;
+    ordered: CheckableElement[] | null;
+    readonly set: Set<CheckableElement>;
+}
+/**
+ * Element that is checkable consumed by
+ * `SingleSelectionController` and `SingleSelectionSet`
+ */
+export declare type CheckableElement = HTMLElement & {
+    name: string;
+    checked: boolean;
+    formElementTabIndex?: number;
+};
+/**
+ * Controller that provides behavior similar to a native `<input type="radio">`
+ * group.
+ *
+ * Behaviors:
+ *
+ * - Selection via key navigation (currently LTR is supported)
+ * - Deselection of other grouped, checkable controls upon selection
+ * - Grouping of checkable elements by name
+ *   - Defaults grouping scope to host shadow root
+ *   - Document-wide scoping enabled
+ * - Land focus only on checked element. Focuses leading element when none
+ *   checked.
+ *
+ * Intended Usage:
+ *
+ * ```ts
+ * class MyElement extends HTMLElement {
+ *   private selectionController: SingleSelectionController | null = null;
+ *   name = "";
+ *   global = false;
+ *
+ *   private _checked = false;
+ *   set checked(checked: boolean) {
+ *     const oldVal = this._checked;
+ *     if (checked === oldVal) return;
+ *
+ *     this._checked = checked;
+ *
+ *     if (this.selectionController) {
+ *       this.selectionController.update(this)
+ *     }
+ *   }
+ *
+ *   get checked() {
+ *     return this._checked;
+ *   }
+ *
+ *   connectedCallback() {
+ *     this.selectionController = SelectionController.getController(this);
+ *     this.selectionController.register(this);
+ *     this.selectionController.update(this);
+ *   }
+ *
+ *   disconnectedCallback() {
+ *     this.selectionController!.unregister(this);
+ *     this.selectionController = null;
+ *   }
+ * }
+ * ```
+ */
+export declare class SingleSelectionController {
+    private readonly sets;
+    private focusedSet;
+    private mouseIsDown;
+    /**
+     * Get a controller for the given element. If no controller exists, one will
+     * be created. Defaults to getting the controller scoped to the element's root
+     * node shadow root unless `element.global` is true. Then, it will get a
+     * `window.document`-scoped controller.
+     *
+     * @param element Element from which to get / create a SelectionController. If
+     *     `element.global` is true, it gets a selection controller scoped to
+     *     `window.document`.
+     */
+    static getController(element: HTMLElement | HTMLElement & {
+        global: boolean;
+    }): SingleSelectionController;
+    constructor(element: Node);
+    protected keyDownHandler(e: KeyboardEvent): void;
+    protected mousedownHandler(): void;
+    protected mouseupHandler(): void;
+    /**
+     * Whether or not the controller controls  the given element.
+     *
+     * @param element element to check
+     */
+    has(element: CheckableElement): boolean;
+    /**
+     * Selects and returns the controlled element previous to the given element in
+     * document position order. See
+     * [Node.compareDocumentPosition](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition).
+     *
+     * @param element element relative from which preceding element is fetched
+     */
+    selectPrevious(element: CheckableElement): CheckableElement;
+    /**
+     * Selects and returns the controlled element next to the given element in
+     * document position order. See
+     * [Node.compareDocumentPosition](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition).
+     *
+     * @param element element relative from which following element is fetched
+     */
+    selectNext(element: CheckableElement): CheckableElement;
+    select(element: CheckableElement): void;
+    /**
+     * Focuses the selected element in the given element's selection set. User's
+     * mouse selection will override this focus.
+     *
+     * @param element Element from which selection set is derived and subsequently
+     *     focused.
+     * @deprecated update() method now handles focus management by setting
+     *     appropriate tabindex to form element.
+     */
+    focus(element: CheckableElement): void;
+    /**
+     * @return Returns true if atleast one radio is selected in the radio group.
+     */
+    isAnySelected(element: CheckableElement): boolean;
+    /**
+     * Returns the elements in the given element's selection set in document
+     * position order.
+     * [Node.compareDocumentPosition](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition).
+     *
+     * @param element Element from which selection set is derived and subsequently
+     *     ordered.
+     */
+    getOrdered(element: CheckableElement): CheckableElement[];
+    /**
+     * Gets the selection set of the given name and creates one if it does not yet
+     * exist.
+     *
+     * @param name Name of set
+     */
+    getSet(name: string): SingleSelectionSet;
+    /**
+     * Register the element in the selection controller.
+     *
+     * @param element Element to register. Registers in set of `element.name`.
+     */
+    register(element: CheckableElement): void;
+    /**
+     * Unregister the element from selection controller.
+     *
+     * @param element Element to register. Registers in set of `element.name`.
+     */
+    unregister(element: CheckableElement): void;
+    /**
+     * Unselects other elements in element's set if element is checked. Noop
+     * otherwise.
+     *
+     * @param element Element from which to calculate selection controller update.
+     */
+    update(element: CheckableElement): void;
+}