@lion/ui 0.0.1

package/components/input-tel-dropdown/test/LionInputTelDropdown.test.js

@@ -0,0 +1,56 @@
+import { runInputTelSuite } from '@lion/ui/input-tel-test-suites.js';
+import { html } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import { ref } from 'lit/directives/ref.js';
+
+import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js';
+import { runInputTelDropdownSuite } from '@lion/ui/input-tel-dropdown-test-suites.js';
+
+import '@lion/ui/define/lion-option.js';
+import '@lion/ui/define/lion-select-rich.js';
+
+/**
+ * @typedef {import('lit').TemplateResult} TemplateResult
+ * @typedef {HTMLSelectElement|HTMLElement & {modelValue:string}} DropdownElement
+ * @typedef {import('../types/index.js').TemplateDataForDropdownInputTel} TemplateDataForDropdownInputTel
+ * @typedef {import('../types/index.js').RegionMeta} RegionMeta
+ */
+
+class WithFormControlInputTelDropdown extends LionInputTelDropdown {
+  static templates = {
+    ...(super.templates || {}),
+    /**
+     * @param {TemplateDataForDropdownInputTel} templateDataForDropdown
+     */
+    dropdown: templateDataForDropdown => {
+      const { refs, data } = templateDataForDropdown;
+      // TODO: once spread directive available, use it per ref (like ref(refs?.dropdown?.ref))
+      return html`
+        <lion-select-rich
+          ${ref(refs?.dropdown?.ref)}
+          label="${refs?.dropdown?.labels?.country}"
+          label-sr-only
+          @model-value-changed="${refs?.dropdown?.listeners['model-value-changed']}"
+          style="${refs?.dropdown?.props?.style}"
+        >
+          ${repeat(
+            data.regionMetaList,
+            regionMeta => regionMeta.regionCode,
+            regionMeta =>
+              html` <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option> `,
+          )}
+        </lion-select-rich>
+      `;
+    },
+  };
+}
+
+// @ts-expect-error
+runInputTelSuite({ klass: LionInputTelDropdown });
+runInputTelDropdownSuite();
+
+describe('WithFormControlInputTelDropdown', () => {
+  // @ts-expect-error
+  // Runs it for LionSelectRich, which uses .modelValue/@model-value-changed instead of .value/@change
+  runInputTelDropdownSuite({ klass: WithFormControlInputTelDropdown });
+});

package/components/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js

@@ -0,0 +1,413 @@
+import { PhoneUtilManager } from '@lion/ui/input-tel.js';
+import { mockPhoneUtilManager, restorePhoneUtilManager } from '@lion/ui/input-tel-test-helpers.js';
+import {
+  aTimeout,
+  defineCE,
+  expect,
+  fixture as _fixture,
+  fixtureSync as _fixtureSync,
+  html,
+  unsafeStatic,
+} from '@open-wc/testing';
+import sinon from 'sinon';
+import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js';
+
+/**
+ * @typedef {import('lit').TemplateResult} TemplateResult
+ * @typedef {HTMLSelectElement|HTMLElement & {modelValue:string}} DropdownElement
+ * @typedef {import('../types/index.js').TemplateDataForDropdownInputTel} TemplateDataForDropdownInputTel
+ */
+
+const fixture = /** @type {(arg: string | TemplateResult) => Promise<LionInputTelDropdown>} */ (
+  _fixture
+);
+const fixtureSync = /** @type {(arg: string | TemplateResult) => LionInputTelDropdown} */ (
+  _fixtureSync
+);
+
+/**
+ * @param {DropdownElement | HTMLSelectElement} dropdownEl
+ * @returns {string}
+ */
+function getDropdownValue(dropdownEl) {
+  if ('modelValue' in dropdownEl) {
+    return dropdownEl.modelValue;
+  }
+  return dropdownEl.value;
+}
+
+/**
+ * @param {DropdownElement} dropdownEl
+ * @param {string} value
+ */
+function mimicUserChangingDropdown(dropdownEl, value) {
+  if ('modelValue' in dropdownEl) {
+    // eslint-disable-next-line no-param-reassign
+    dropdownEl.modelValue = value;
+    dropdownEl.dispatchEvent(
+      new CustomEvent('model-value-changed', { detail: { isTriggeredByUser: true } }),
+    );
+  } else {
+    // eslint-disable-next-line no-param-reassign
+    dropdownEl.value = value;
+    dropdownEl.dispatchEvent(new Event('change'));
+  }
+}
+
+/**
+ * @param {{ klass:LionInputTelDropdown }} config
+ */
+// @ts-expect-error
+export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdown }) {
+  // @ts-ignore
+  const tagName = defineCE(/** @type {* & HTMLElement} */ (class extends klass {}));
+  const tag = unsafeStatic(tagName);
+
+  describe('LionInputTelDropdown', () => {
+    beforeEach(async () => {
+      // Wait till PhoneUtilManager has been loaded
+      await PhoneUtilManager.loadComplete;
+    });
+
+    it('syncs value of dropdown on init if input has no value', async () => {
+      const el = await fixture(html` <${tag}></${tag}> `);
+      expect(el.activeRegion).to.equal('GB');
+      expect(el.value).to.equal('+44');
+      expect(getDropdownValue(/** @type {DropdownElement} */ (el.refs.dropdown.value))).to.equal(
+        'GB',
+      );
+    });
+
+    it('syncs value of dropdown on reset if input has no value', async () => {
+      const el = await fixture(html` <${tag}></${tag}> `);
+      el.modelValue = '+31612345678';
+      await el.updateComplete;
+      expect(el.activeRegion).to.equal('NL');
+      el.reset();
+      await el.updateComplete;
+      expect(el.activeRegion).to.equal('GB');
+      expect(el.value).to.equal('+44');
+    });
+
+    it('syncs value of dropdown on init if input has no value does not influence interaction states', async () => {
+      const el = await fixture(html` <${tag}></${tag}> `);
+      // TODO find out why its get dirty again
+      // expect(el.dirty).to.be.false;
+      expect(el.prefilled).to.be.false;
+    });
+
+    it('syncs value of dropdown on reset also resets interaction states', async () => {
+      const el = await fixture(html` <${tag}></${tag}> `);
+      el.modelValue = '+31612345678';
+      await el.updateComplete;
+
+      expect(el.dirty).to.be.true;
+      expect(el.prefilled).to.be.false;
+      el.reset();
+      await el.updateComplete;
+      expect(el.dirty).to.be.false;
+      expect(el.prefilled).to.be.false;
+    });
+
+    it('sets correct interaction states on init if input has a value', async () => {
+      const el = await fixture(html` <${tag} .modelValue="${'+31612345678'}"></${tag}> `);
+      // TODO find out why its get dirty again
+      // expect(el.dirty).to.be.false;
+      expect(el.prefilled).to.be.true;
+    });
+
+    describe('Dropdown display', () => {
+      it('calls `templates.dropdown` with TemplateDataForDropdownInputTel object', async () => {
+        const el = fixtureSync(html` <${tag}
+          .modelValue="${'+31612345678'}"
+          .allowedRegions="${['NL', 'PH']}"
+          .preferredRegions="${['PH']}"
+          ></${tag}> `);
+        const spy = sinon.spy(
+          /** @type {typeof LionInputTelDropdown} */ (el.constructor).templates,
+          'dropdown',
+        );
+        await el.updateComplete;
+        const dropdownNode = el.refs.dropdown.value;
+        const templateDataForDropdown = /** @type {TemplateDataForDropdownInputTel} */ (
+          spy.args[0][0]
+        );
+        expect(templateDataForDropdown).to.eql(
+          /** @type {TemplateDataForDropdownInputTel} */ ({
+            data: {
+              activeRegion: 'NL',
+              regionMetaList: [
+                {
+                  countryCode: 31,
+                  flagSymbol: '🇳🇱',
+                  nameForLocale: 'Netherlands',
+                  nameForRegion: 'Nederland',
+                  regionCode: 'NL',
+                },
+              ],
+              regionMetaListPreferred: [
+                {
+                  countryCode: 63,
+                  flagSymbol: '🇵🇭',
+                  nameForLocale: 'Philippines',
+                  nameForRegion: 'Philippines',
+                  regionCode: 'PH',
+                },
+              ],
+            },
+            refs: {
+              dropdown: {
+                labels: {
+                  selectCountry: 'Select country',
+                  allCountries: 'All countries',
+                  preferredCountries: 'Suggested countries',
+                },
+                listeners: {
+                  // @ts-expect-error [allow-protected]
+                  change: el._onDropdownValueChange,
+                  // @ts-expect-error [allow-protected]
+                  'model-value-changed': el._onDropdownValueChange,
+                },
+                props: { style: 'height: 100%;' },
+                ref: { value: dropdownNode },
+              },
+            },
+          }),
+        );
+        spy.restore();
+      });
+
+      it('can override "all-countries-label"', async () => {
+        const el = fixtureSync(html` <${tag}
+          .preferredRegions="${['PH']}"
+          ></${tag}> `);
+        const spy = sinon.spy(
+          /** @type {typeof LionInputTelDropdown} */ (el.constructor).templates,
+          'dropdown',
+        );
+        // @ts-expect-error [allow-protected]
+        el._allCountriesLabel = 'foo';
+        await el.updateComplete;
+        const templateDataForDropdown = /** @type {TemplateDataForDropdownInputTel} */ (
+          spy.args[0][0]
+        );
+
+        expect(templateDataForDropdown.refs.dropdown.labels.allCountries).to.eql('foo');
+        spy.restore();
+      });
+
+      it('can override "preferred-countries-label"', async () => {
+        const el = fixtureSync(html` <${tag}
+          .preferredRegions="${['PH']}"
+          ></${tag}> `);
+        const spy = sinon.spy(
+          /** @type {typeof LionInputTelDropdown} */ (el.constructor).templates,
+          'dropdown',
+        );
+        // @ts-expect-error [allow-protected]
+        el._preferredCountriesLabel = 'foo';
+        await el.updateComplete;
+        const templateDataForDropdown = /** @type {TemplateDataForDropdownInputTel} */ (
+          spy.args[0][0]
+        );
+        expect(templateDataForDropdown.refs.dropdown.labels.preferredCountries).to.eql('foo');
+        spy.restore();
+      });
+
+      it('syncs dropdown value initially from activeRegion', async () => {
+        const el = await fixture(html` <${tag} .allowedRegions="${['DE']}"></${tag}> `);
+        expect(getDropdownValue(/** @type {DropdownElement} */ (el.refs.dropdown.value))).to.equal(
+          'DE',
+        );
+      });
+
+      it('syncs disabled attribute to dropdown', async () => {
+        const el = await fixture(html` <${tag} disabled></${tag}> `);
+        expect(el.refs.dropdown.value?.hasAttribute('disabled')).to.be.true;
+      });
+
+      it('disables dropdown on readonly', async () => {
+        const el = await fixture(html` <${tag} readonly></${tag}> `);
+        expect(el.refs.dropdown.value?.hasAttribute('disabled')).to.be.true;
+      });
+
+      it('renders to prefix slot in light dom', async () => {
+        const el = await fixture(html` <${tag} .allowedRegions="${['DE']}"></${tag}> `);
+        const prefixSlot = /** @type {HTMLElement} */ (
+          /** @type {HTMLElement} */ (el.refs.dropdown.value).parentElement
+        );
+        expect(prefixSlot.getAttribute('slot')).to.equal('prefix');
+        expect(prefixSlot.slot).to.equal('prefix');
+        expect(prefixSlot.parentElement).to.equal(el);
+      });
+
+      it('rerenders light dom when PhoneUtil loaded', async () => {
+        const { resolveLoaded } = mockPhoneUtilManager();
+        const el = await fixture(html` <${tag} .allowedRegions="${['DE']}"></${tag}> `);
+        // @ts-ignore
+        const spy = sinon.spy(el, '_scheduleLightDomRender');
+        resolveLoaded(undefined);
+        await aTimeout(0);
+        expect(spy).to.have.been.calledOnce;
+        restorePhoneUtilManager();
+        spy.restore();
+      });
+    });
+
+    describe('On dropdown value change', () => {
+      it('changes the currently active country code in the textbox', async () => {
+        const el = await fixture(html`
+          <${tag}
+            .allowedRegions="${['NL', 'BE']}"
+            .modelValue="${'+31612345678'}"
+          ></${tag}>
+        `);
+        // @ts-ignore
+        mimicUserChangingDropdown(el.refs.dropdown.value, 'BE');
+        await el.updateComplete;
+        expect(el.activeRegion).to.equal('BE');
+        expect(el.modelValue).to.equal('+32612345678');
+        await el.updateComplete;
+        expect(el.value).to.equal('+32612345678');
+      });
+
+      it('changes the currently active country code in the textbox when empty', async () => {
+        const el = await fixture(html` <${tag} .allowedRegions="${['NL', 'BE']}"></${tag}> `);
+        el.value = '';
+        // @ts-ignore
+        mimicUserChangingDropdown(el.refs.dropdown.value, 'BE');
+        await el.updateComplete;
+        await el.updateComplete;
+        expect(el.value).to.equal('+32');
+      });
+
+      it('changes the currently active country code in the textbox when empty with parentheses', async () => {
+        const el = await fixture(
+          html` <${tag} format-country-code-style="parentheses" .allowedRegions="${[
+            'NL',
+            'BE',
+          ]}"></${tag}> `,
+        );
+        el.value = '';
+        // @ts-ignore
+        mimicUserChangingDropdown(el.refs.dropdown.value, 'BE');
+        await el.updateComplete;
+        await el.updateComplete;
+        expect(el.value).to.equal('(+32)');
+      });
+
+      it('changes the currently active country code in the textbox when invalid', async () => {
+        const el = await fixture(html` <${tag} .allowedRegions="${['NL', 'BE']}"></${tag}> `);
+        el.value = '+3';
+        // @ts-ignore
+        mimicUserChangingDropdown(el.refs.dropdown.value, 'BE');
+        await el.updateComplete;
+        await el.updateComplete;
+        expect(el.value).to.equal('+32');
+      });
+
+      it('changes the currently active country code in the textbox when invalid and small part of phone number', async () => {
+        const el = await fixture(html` <${tag} .allowedRegions="${['NL', 'BE']}"></${tag}> `);
+        el.value = '+3 2';
+        // @ts-ignore
+        mimicUserChangingDropdown(el.refs.dropdown.value, 'BE');
+        await el.updateComplete;
+        await el.updateComplete;
+        expect(el.value).to.equal('+32 2');
+      });
+
+      it('changes the currently active country code in the textbox when invalid and bigger part of phone number', async () => {
+        const el = await fixture(html` <${tag} .allowedRegions="${['NL', 'BE']}"></${tag}> `);
+        el.value = '+3 612345678';
+        // @ts-ignore
+        mimicUserChangingDropdown(el.refs.dropdown.value, 'BE');
+        await el.updateComplete;
+        await el.updateComplete;
+        expect(el.value).to.equal('+32 612345678');
+      });
+
+      it('changes the currently phonenumber completely in the textbox when not sure what to replace', async () => {
+        const el = await fixture(html` <${tag} .allowedRegions="${['NL', 'BE']}""></${tag}> `);
+        el.value = '+9912345678';
+        // @ts-ignore
+        mimicUserChangingDropdown(el.refs.dropdown.value, 'BE');
+        await el.updateComplete;
+        await el.updateComplete;
+        expect(el.value).to.equal('+32');
+      });
+
+      it('focuses the textbox right after selection if selected via opened dropdown', async () => {
+        const el = await fixture(
+          html` <${tag} .allowedRegions="${[
+            'NL',
+            'BE',
+          ]}" .modelValue="${'+31612345678'}"></${tag}> `,
+        );
+        const dropdownElement = el.refs.dropdown.value;
+        // @ts-expect-error [allow-protected-in-tests]
+        if (dropdownElement?._overlayCtrl) {
+          // @ts-expect-error [allow-protected-in-tests]
+          dropdownElement._overlayCtrl.show();
+          mimicUserChangingDropdown(dropdownElement, 'BE');
+          await el.updateComplete;
+          await aTimeout(0);
+          // @ts-expect-error [allow-protected-in-tests]
+          expect(el._inputNode).to.equal(document.activeElement);
+        }
+      });
+
+      it('keeps focus on dropdownElement after selection if selected via unopened dropdown', async () => {
+        const el = await fixture(
+          html` <${tag} .allowedRegions="${[
+            'NL',
+            'BE',
+          ]}" .modelValue="${'+31612345678'}"></${tag}> `,
+        );
+        const dropdownElement = el.refs.dropdown.value;
+        // @ts-ignore
+        mimicUserChangingDropdown(dropdownElement, 'BE');
+        await el.updateComplete;
+        // @ts-expect-error [allow-protected-in-tests]
+        expect(el._inputNode).to.not.equal(document.activeElement);
+      });
+    });
+
+    describe('On activeRegion change', () => {
+      it('updates dropdown value ', async () => {
+        const el = await fixture(html` <${tag} .modelValue="${'+31612345678'}"></${tag}> `);
+        expect(el.activeRegion).to.equal('NL');
+        // @ts-expect-error [allow protected]
+        el._setActiveRegion('BE');
+        await el.updateComplete;
+        expect(getDropdownValue(/** @type {DropdownElement} */ (el.refs.dropdown.value))).to.equal(
+          'BE',
+        );
+      });
+
+      it('keeps dropdown value if countryCode is the same', async () => {
+        const el = await fixture(html` <${tag} .modelValue="${'+12345678901'}"></${tag}> `);
+        expect(el.activeRegion).to.equal('US');
+        // @ts-expect-error [allow-protected-in test]
+        el._setActiveRegion('AG'); // Also +1
+        await el.updateComplete;
+        expect(getDropdownValue(/** @type {DropdownElement} */ (el.refs.dropdown.value))).to.equal(
+          'US',
+        );
+      });
+    });
+
+    describe('is empthy', () => {
+      it('ignores initial countrycode', async () => {
+        const el = await fixture(html` <${tag}></${tag}> `);
+        // @ts-ignore
+        expect(el._isEmpty()).to.be.true;
+      });
+
+      it('ignores initial countrycode with parentheses', async () => {
+        const el = await fixture(html` <${tag} format-country-code-style="parentheses"></${tag}> `);
+        // @ts-ignore
+        expect(el._isEmpty()).to.be.true;
+      });
+    });
+  });
+}

package/components/input-tel-dropdown/types/index.ts

@@ -0,0 +1,45 @@
+import { RegionCode } from '../../input-tel/types/index.js';
+import { LionSelectRich } from '@lion/ui/select-rich.js';
+import { LionCombobox } from '@lion/ui/combobox.js';
+import { OverlayController } from '../../overlays/src/OverlayController.js';
+
+type RefTemplateData = {
+  ref?: { value?: HTMLElement };
+  props?: { [key: string]: any };
+  listeners?: { [key: string]: any };
+  labels?: { [key: string]: any };
+};
+
+export type RegionMeta = {
+  countryCode: number;
+  regionCode: RegionCode;
+  nameForRegion?: string;
+  nameForLocale?: string;
+  flagSymbol: string;
+};
+
+export type OnDropdownChangeEvent = Event & {
+  target: { value?: string; modelValue?: string; _overlayCtrl?: OverlayController };
+  detail?: { initialize: boolean };
+};
+
+export type DropdownRef = { value: HTMLSelectElement | LionSelectRich | LionCombobox | undefined };
+
+export type TemplateDataForDropdownInputTel = {
+  refs: {
+    dropdown: RefTemplateData & {
+      ref: DropdownRef;
+      props: { style: string };
+      listeners: {
+        change: (event: OnDropdownChangeEvent) => void;
+        'model-value-changed': (event: OnDropdownChangeEvent) => void;
+      };
+      labels: { selectCountry: string };
+    };
+  };
+  data: {
+    activeRegion: string | undefined;
+    regionMetaList: RegionMeta[];
+    regionMetaListPreferred: RegionMeta[];
+  };
+};

package/components/listbox/src/LionListbox.js

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+import { ValidateMixin, InteractionStateMixin, FocusMixin } from '@lion/ui/form-core.js';
+import { ListboxMixin } from './ListboxMixin.js';
+
+// TODO: could we extend from LionField?
+
+/**
+ * LionListbox: implements the wai-aria listbox design pattern and integrates it as a Lion
+ * FormControl
+ */
+export class LionListbox extends ListboxMixin(
+  FocusMixin(InteractionStateMixin(ValidateMixin(LitElement))),
+) {
+  /**
+   * @configure InteractionStateMixin, ValidateMixin
+   */
+  get _feedbackConditionMeta() {
+    return { ...super._feedbackConditionMeta, focused: this.focused };
+  }
+
+  /**
+   * @configure FocusMixin
+   */
+  get _focusableNode() {
+    return this._inputNode;
+  }
+}

package/components/listbox/src/LionOption.js

@@ -0,0 +1,149 @@
+import { css, html, LitElement } from 'lit';
+import { ChoiceInputMixin, FormRegisteringMixin } from '@lion/ui/form-core.js';
+import { DisabledMixin, SlotMixin } from '@lion/ui/core.js';
+
+/**
+ * @typedef {import('lit').TemplateResult } TemplateResult
+ * @typedef {import('../../form-core/types/choice-group/ChoiceGroupMixinTypes.js').ChoiceGroupHost } ChoiceGroupHost
+ * @typedef {import('../types/LionOption.js').LionOptionHost } LionOptionHost
+ */
+
+/**
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option
+ * Can be a child of datalist/select, or role="listbox"
+ *
+ * Element gets state supplied externally, reflects this to attributes,
+ * enabling SubClassers to style based on those states
+ */
+export class LionOption extends DisabledMixin(
+  ChoiceInputMixin(FormRegisteringMixin(SlotMixin(LitElement))),
+) {
+  /** @type {any} */
+  static get properties() {
+    return {
+      active: {
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
+
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: block;
+          background-color: white;
+          padding: 4px;
+          cursor: default;
+        }
+
+        :host([hidden]) {
+          display: none;
+        }
+
+        :host(:hover) {
+          background-color: #eee;
+        }
+        :host([active]) {
+          background-color: #ddd;
+        }
+
+        :host([checked]) {
+          background-color: #bde4ff;
+        }
+
+        :host([disabled]) {
+          color: #adadad;
+        }
+      `,
+    ];
+  }
+
+  /**
+   * @override We want to start with a clean slate, so we omit slots inherited from FormControl
+   */
+  // eslint-disable-next-line class-methods-use-this
+  get slots() {
+    return {};
+  }
+
+  constructor() {
+    super();
+    this.active = false;
+    /** @private */
+    this.__onClick = this.__onClick.bind(this);
+    /** @private */
+    this.__registerEventListeners();
+  }
+
+  /**
+   * @param {string} name
+   * @param {unknown} oldValue
+   */
+  requestUpdate(name, oldValue) {
+    super.requestUpdate(name, oldValue);
+
+    if (name === 'active' && this.active !== oldValue) {
+      this.dispatchEvent(new Event('active-changed', { bubbles: true }));
+    }
+  }
+
+  /**
+   * @param {import('lit').PropertyValues } changedProperties
+   */
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has('checked')) {
+      this.setAttribute('aria-selected', `${this.checked}`);
+    }
+
+    if (changedProperties.has('disabled')) {
+      this.setAttribute('aria-disabled', `${this.disabled}`);
+    }
+  }
+
+  /**
+   *
+   * @returns {TemplateResult}
+   */
+  render() {
+    return html`
+      <div class="choice-field__label">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'option');
+  }
+
+  /** @private */
+  __registerEventListeners() {
+    this.addEventListener('click', this.__onClick);
+  }
+
+  /** @private */
+  __unRegisterEventListeners() {
+    this.removeEventListener('click', this.__onClick);
+  }
+
+  /** @private */
+  __onClick() {
+    if (this.disabled) {
+      return;
+    }
+    const parentForm = /** @type {unknown} */ (this._parentFormGroup);
+    this._isHandlingUserInput = true;
+    if (parentForm && /** @type {ChoiceGroupHost} */ (parentForm).multipleChoice) {
+      this.checked = !this.checked;
+      this.active = !this.active;
+    } else {
+      this.checked = true;
+      this.active = true;
+    }
+    this._isHandlingUserInput = false;
+  }
+}