@digital-realty/ix-radio 1.0.1

package/src/IxRadio.ts

@@ -0,0 +1,153 @@
+import { html, LitElement, isServer } from 'lit';
+import {ifDefined} from 'lit/directives/if-defined.js';
+import { property } from 'lit/decorators.js';
+import '@material/web/radio/radio.js';
+import {isActivationClick} from '@material/web/internal/controller/events.js';
+import { IxRadioStyles } from './ix-radio-styles.js';
+import {SingleSelectionController} from './single-selection-controller.js';
+import {polyfillElementInternalsAria, setupHostAria} from '@material/web/internal/aria/aria.js';
+
+const CHECKED = Symbol('checked');
+
+export class IxRadio extends LitElement {
+  static get styles() {
+    return [IxRadioStyles];
+  }
+
+  /** @nocollapse */
+  static readonly formAssociated = true;
+
+  /**
+   * Whether or not the radio is selected.
+   */
+  @property({type: Boolean})
+  get checked() {
+    return this[CHECKED];
+  }
+  set checked(checked: boolean) {
+    const wasChecked = this.checked;
+    if (wasChecked === checked) {
+      return;
+    }
+
+    this[CHECKED] = checked;
+    const state = String(checked);
+    this.internals.setFormValue(this.checked ? this.value : null, state);
+    this.requestUpdate('checked', wasChecked);
+    this.selectionController.handleCheckedChange();
+  }
+
+  [CHECKED] = false;
+
+  @property({type: Boolean, reflect: true}) disabled = false;
+
+  @property() label: string = '';
+
+  /**
+   * The element value to use in form submission when checked.
+   */
+  @property() value = 'on';
+
+  @property() ariaLabel: string = '';
+
+  @property() target: 'wrapper' | '' = '';
+
+  @property() htmlId: string | undefined;
+
+  /**
+   * The HTML name to use in form submission.
+   */
+  get name() {
+    return this.getAttribute('name') ?? '';
+  }
+  set name(name: string) {
+    this.setAttribute('name', name);
+  }
+
+  /**
+   * The associated form element with which this element's value will submit.
+   */
+  get form() {
+    return this.internals.form;
+  }
+
+  /**
+   * The labels this element is associated with.
+   */
+  get labels() {
+    return this.internals.labels;
+  }
+
+  private readonly selectionController = new SingleSelectionController(this);
+
+  private readonly internals = polyfillElementInternalsAria(
+      this, (this as HTMLElement /* needed for closure */).attachInternals());
+
+  private async handleClick(event: Event) {
+    if (this.disabled) {
+      return;
+    }
+
+    // allow event to propagate to user code after a microtask.
+    await 0;
+    if (event.defaultPrevented) {
+      return;
+    }
+
+    if (isActivationClick(event)) {
+      this.focus();
+    }
+
+    // Per spec, clicking on a radio input always selects it.
+    this.checked = true;
+    this.dispatchEvent(new Event('change', {bubbles: true}));
+    this.dispatchEvent(
+        new InputEvent('input', {bubbles: true, composed: true}));
+  }
+
+  private async handleKeydown(event: KeyboardEvent) {
+    // allow event to propagate to user code after a microtask.
+    await 0;
+    if (event.key !== ' ' || event.defaultPrevented) {
+      return;
+    }
+
+    this.click();
+  }
+
+  constructor() {
+    super();
+    this.addController(this.selectionController);
+    if (!isServer) {
+      this.internals.role = 'radio';
+      this.addEventListener('click', this.handleClick.bind(this));
+      this.addEventListener('keydown', this.handleKeydown.bind(this));
+    }
+  }
+
+  protected override updated() {
+    this.internals.ariaChecked = String(this.checked);
+  }
+
+  get renderRadio() {
+    return html`
+      <md-radio
+        aria-label=${this.ariaLabel || this.label }
+        name=${this.name}
+        value=${this.value}
+        ?checked=${this.checked}
+        ?disabled=${this.disabled}
+        id=${ifDefined(this.htmlId)}
+        touch-target=${this.target}
+      ></md-radio>
+    `;
+  }
+
+  render() {
+    if (this.label)
+      return html`<label>${this.renderRadio}
+        <span> ${this.label}</span> </label>`;
+
+    return this.renderRadio;
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { IxRadio } from './IxRadio.js';

package/src/ix-radio-styles.ts

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+
+export const IxRadioStyles = css``;

package/src/ix-radio.ts

@@ -0,0 +1,3 @@
+import { IxRadio } from './IxRadio.js';
+
+window.customElements.define('ix-radio', IxRadio);

package/src/react/IxRadio.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { createComponent } from '@lit-labs/react';
+import { IxRadio as IxRadioLit } from '../IxRadio.js';
+
+window.customElements.define('ix-button', IxRadioLit);
+
+export const IxButton = createComponent({
+  tagName: 'ix-radio',
+  elementClass: IxRadioLit,
+  react: React,
+  events: {
+    onclick: 'onClick',
+    onkeydown: 'keydown'
+  },
+});

package/src/single-selection-controller.ts

@@ -0,0 +1,231 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {ReactiveController} from 'lit';
+
+/**
+ * An element that supports single-selection with `SingleSelectionController`.
+ */
+export interface SingleSelectionElement extends HTMLElement {
+  /**
+   * Whether or not the element is selected.
+   */
+  checked: boolean;
+}
+
+/**
+ * A `ReactiveController` that provides root node-scoped single selection for
+ * elements, similar to native `<input type="radio">` selection.
+ *
+ * To use, elements should add the controller and call
+ * `selectionController.handleCheckedChange()` in a getter/setter. This must
+ * be synchronous to match native behavior.
+ *
+ * @example
+ * const CHECKED = Symbol('checked');
+ *
+ * class MyToggle extends LitElement {
+ *   get checked() { return this[CHECKED]; }
+ *   set checked(checked: boolean) {
+ *     const oldValue = this.checked;
+ *     if (oldValue === checked) {
+ *       return;
+ *     }
+ *
+ *     this[CHECKED] = checked;
+ *     this.selectionController.handleCheckedChange();
+ *     this.requestUpdate('checked', oldValue);
+ *   }
+ *
+ *   [CHECKED] = false;
+ *
+ *   private selectionController = new SingleSelectionController(this);
+ *
+ *   constructor() {
+ *     super();
+ *     this.addController(this.selectionController);
+ *   }
+ * }
+ */
+export class SingleSelectionController implements ReactiveController {
+  private focused = false;
+
+  private root: ParentNode|null = null;
+
+  constructor(private readonly host: SingleSelectionElement) {}
+
+  hostConnected() {
+    this.root = this.host.getRootNode() as ParentNode;
+    this.host.addEventListener('keydown', this.handleKeyDown);
+    this.host.addEventListener('focusin', this.handleFocusIn);
+    this.host.addEventListener('focusout', this.handleFocusOut);
+    if (this.host.checked) {
+      // Uncheck other siblings when attached if already checked. This mimics
+      // native <input type="radio"> behavior.
+      this.uncheckSiblings();
+    }
+
+    // Update for the newly added host.
+    this.updateTabIndices();
+  }
+
+  hostDisconnected() {
+    this.host.removeEventListener('keydown', this.handleKeyDown);
+    this.host.removeEventListener('focusin', this.handleFocusIn);
+    this.host.removeEventListener('focusout', this.handleFocusOut);
+    // Update for siblings that are still connected.
+    this.updateTabIndices();
+    this.root = null;
+  }
+
+  /**
+   * Should be called whenever the host's `checked` property changes
+   * synchronously.
+   */
+  handleCheckedChange() {
+    if (!this.host.checked) {
+      return;
+    }
+
+    this.uncheckSiblings();
+    this.updateTabIndices();
+  }
+
+  private readonly handleFocusIn = () => {
+    this.focused = true;
+    this.updateTabIndices();
+  };
+
+  private readonly handleFocusOut = () => {
+    this.focused = false;
+    this.updateTabIndices();
+  };
+
+  private uncheckSiblings() {
+    for (const sibling of this.getNamedSiblings()) {
+      if (sibling !== this.host) {
+        sibling.checked = false;
+      }
+    }
+  }
+
+  /**
+   * Updates the `tabindex` of the host and its siblings.
+   */
+  private updateTabIndices() {
+    // There are three tabindex states for a group of elements:
+    // 1. If any are checked, that element is focusable.
+    const siblings = this.getNamedSiblings();
+    const checkedSibling = siblings.find(sibling => sibling.checked);
+    // 2. If an element is focused, the others are no longer focusable.
+    if (checkedSibling || this.focused) {
+      const focusable = checkedSibling || this.host;
+      focusable.tabIndex = 0;
+
+      for (const sibling of siblings) {
+        if (sibling !== focusable) {
+          sibling.tabIndex = -1;
+        }
+      }
+      return;
+    }
+
+    // 3. If none are checked or focused, all are focusable.
+    for (const sibling of siblings) {
+      sibling.tabIndex = 0;
+    }
+  }
+
+  /**
+   * Retrieves all siblings in the host element's root with the same `name`
+   * attribute.
+   */
+  private getNamedSiblings() {
+    const name = this.host.getAttribute('name');
+    if (!name || !this.root) {
+      return [];
+    }
+
+    return Array.from(
+        this.root.querySelectorAll<SingleSelectionElement>(`[name="${name}"]`));
+  }
+
+  /**
+   * Handles arrow key events from the host. Using the arrow keys will
+   * select and check the next or previous sibling with the host's
+   * `name` attribute.
+   */
+  private readonly handleKeyDown = (event: KeyboardEvent) => {
+    const isDown = event.key === 'ArrowDown';
+    const isUp = event.key === 'ArrowUp';
+    const isLeft = event.key === 'ArrowLeft';
+    const isRight = event.key === 'ArrowRight';
+    // Ignore non-arrow keys
+    if (!isLeft && !isRight && !isDown && !isUp) {
+      return;
+    }
+
+    // Don't try to select another sibling if there aren't any.
+    const siblings = this.getNamedSiblings();
+    if (!siblings.length) {
+      return;
+    }
+
+    // Prevent default interactions on the element for arrow keys,
+    // since this controller will introduce new behavior.
+    event.preventDefault();
+
+    // Check if moving forwards or backwards
+    const isRtl = getComputedStyle(this.host).direction === 'rtl';
+    const forwards = isRtl ? isLeft || isDown : isRight || isDown;
+
+    const hostIndex = siblings.indexOf(this.host);
+    let nextIndex = forwards ? hostIndex + 1 : hostIndex - 1;
+    // Search for the next sibling that is not disabled to select.
+    // If we return to the host index, there is nothing to select.
+    while (nextIndex !== hostIndex) {
+      if (nextIndex >= siblings.length) {
+        // Return to start if moving past the last item.
+        nextIndex = 0;
+      } else if (nextIndex < 0) {
+        // Go to end if moving before the first item.
+        nextIndex = siblings.length - 1;
+      }
+
+      // Check if the next sibling is disabled. If so,
+      // move the index and continue searching.
+      const nextSibling = siblings[nextIndex];
+      if (nextSibling.hasAttribute('disabled')) {
+        if (forwards) {
+          nextIndex++;
+        } else {
+          nextIndex--;
+        }
+
+        continue;
+      }
+
+      // Uncheck and remove focusability from other siblings.
+      for (const sibling of siblings) {
+        if (sibling !== nextSibling) {
+          sibling.checked = false;
+          sibling.tabIndex = -1;
+          sibling.blur();
+        }
+      }
+
+      // The next sibling should be checked, focused and dispatch a change event
+      nextSibling.checked = true;
+      nextSibling.tabIndex = 0;
+      nextSibling.focus();
+      // Fire a change event since the change is triggered by a user action.
+      // This matches native <input type="radio"> behavior.
+      nextSibling.dispatchEvent(new Event('change', {bubbles: true}));
+
+      break;
+    }
+  };
+}

package/test/ix-radio.test.ts

@@ -0,0 +1,50 @@
+import { html } from 'lit';
+import { fixture, expect } from '@open-wc/testing';
+import { IxRadio } from '../src/IxRadio.js';
+import '../src/ix-radio.js';
+import { triggerBlurFor } from '@open-wc/testing';
+
+describe('IxRadio', () => {
+  it('should render with label and id', async () => {
+    const props = {
+      label: 'Red',
+      ariaLabel: 'Red',
+      value: 'Red',
+      target: '',
+    };
+    const el = await fixture<IxRadio>(html`
+      <ix-radio
+        .label=${props.label}
+        .ariaLabel=${props.ariaLabel}
+        .value=${props.value}
+        htmlId="test-id"
+      ></ix-radio>
+    `);
+
+    const radio = el.shadowRoot?.querySelector('md-radio');
+    const label = el.shadowRoot?.querySelector('label');
+    expect(radio).to.be.not.null;
+    expect(radio?.id).to.equal("test-id");
+    expect(label).to.be.not.null;
+    expect(label?.innerText.trim()).to.equal('Red');
+  });
+
+  it('should not render the label or id if none are specified', async () => {
+    const props = {
+      ariaLabel: 'Red',
+      value: 'Red',
+    };
+    const el = await fixture<IxRadio>(html`
+      <ix-radio
+        .ariaLabel=${props.ariaLabel}
+        .value=${props.value}
+      ></ix-radio>
+    `);
+
+    const radio = el.shadowRoot?.querySelector('md-radio');
+    const label = el.shadowRoot?.querySelector('label');
+    expect(radio?.id).to.equal("");
+    expect(radio).to.be.not.null;
+    expect(label).to.be.null;
+  });
+});

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": ["es2017", "dom"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "incremental": true
+  },
+  "include": ["**/*.ts"]
+}

package/web-dev-server.config.mjs

@@ -0,0 +1,27 @@
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  open: '/demo/',
+  /** Use regular watch mode if HMR is not enabled. */
+  watch: !hmr,
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  /** Set appIndex to enable SPA routing */
+  // appIndex: 'demo/index.html',
+
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
+  ],
+
+  // See documentation for all available options
+});

package/web-test-runner.config.mjs

@@ -0,0 +1,41 @@
+// import { playwrightLauncher } from '@web/test-runner-playwright';
+
+const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
+
+export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+  /** Test files to run */
+  files: 'dist/test/**/*.test.js',
+
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Filter out lit dev mode logs */
+  filterBrowserLogs(log) {
+    for (const arg of log.args) {
+      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto',
+
+  /** Amount of browsers to run concurrently */
+  // concurrentBrowsers: 2,
+
+  /** Amount of test files per browser to test concurrently */
+  // concurrency: 1,
+
+  /** Browsers to run tests on */
+  // browsers: [
+  //   playwrightLauncher({ product: 'chromium' }),
+  //   playwrightLauncher({ product: 'firefox' }),
+  //   playwrightLauncher({ product: 'webkit' }),
+  // ],
+
+  // See documentation for all available options
+});