@exmg/exm-chip-input 1.0.0

package/README.md

@@ -0,0 +1 @@
+# `<exm-chip-input>` https://www.npmjs.com/package/@exmg/exm-chip-input

package/index.d.ts

@@ -0,0 +1,4 @@
+export { ExmgChipInput } from './src/exm-chip-input.js';
+export { ExmgChip } from './src/exm-chip.js';
+export { ExmgChipInputDropdown } from './src/exm-chip-input-dropdown.js';
+export { style as chipInputStyles } from './src/styles/exm-chip-input-css.js';

package/index.js

@@ -0,0 +1,5 @@
+export { ExmgChipInput } from './src/exm-chip-input.js';
+export { ExmgChip } from './src/exm-chip.js';
+export { ExmgChipInputDropdown } from './src/exm-chip-input-dropdown.js';
+export { style as chipInputStyles } from './src/styles/exm-chip-input-css.js';
+//# sourceMappingURL=index.js.map

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@exmg/exm-chip-input",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "index.js",
+  "module": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./exm-chip-input.js": "./src/exm-chip-input.js",
+    "./exm-chip-input-dropdown.js": "./src/exm-chip-input-dropdown.js",
+    "./exm-chip.js": "./src/exm-chip.js"
+  },
+  "dependencies": {
+    "@exmg/lit-base": "^2.0.1",
+    "@material/web": "^1.3.0",
+    "lit": "^3.0.0",
+    "tslib": "^2.6.2"
+  },
+  "devDependencies": {
+    "@exmg/lit-cli": "1.1.13"
+  },
+  "keywords": [
+    "web-components",
+    "lit",
+    "chip",
+    "input"
+  ],
+  "files": [
+    "**/*.scss",
+    "**/*.js",
+    "**/*.d.ts"
+  ],
+  "homepage": "https://github.com/exmg/exmachina-web-components",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:exmg/exm-web-components.git",
+    "directory": "packages/exm-chip-input"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build:styles": "exmg-lit-cli sass -f \"./**/*.scss\""
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "0907b55c89325d59902b98a64c352bf6e1fc81ff"
+}

package/src/dropdown/dropdown-container.d.ts

@@ -0,0 +1,6 @@
+import { LitElement } from 'lit';
+export declare class DropdownContainer extends LitElement {
+    dropdownTitle: string;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/src/dropdown/dropdown-container.js

@@ -0,0 +1,39 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let DropdownContainer = class DropdownContainer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.dropdownTitle = 'Select items';
+    }
+    render() {
+        return html `<div class="container">
+      <div class="label">${this.dropdownTitle}</div>
+      <div class="items"><slot></slot></div>
+    </div>`;
+    }
+};
+DropdownContainer.styles = [
+    css `
+      :host {
+        display: block;
+        padding: 0 1rem 0.5rem;
+      }
+      .label {
+        margin-bottom: 0.5rem;
+      }
+      .items {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.3rem;
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], DropdownContainer.prototype, "dropdownTitle", void 0);
+DropdownContainer = __decorate([
+    customElement('dropdown-container')
+], DropdownContainer);
+export { DropdownContainer };
+//# sourceMappingURL=dropdown-container.js.map

package/src/exm-chip-input-dropdown.d.ts

@@ -0,0 +1,34 @@
+import '@material/web/iconbutton/icon-button.js';
+import '@material/web/button/text-button.js';
+import '@material/web/chips/input-chip.js';
+import '@material/web/icon/icon.js';
+import '@material/web/menu/menu.js';
+import './dropdown/dropdown-container.js';
+import { ChipSet } from '@material/web/chips/internal/chip-set.js';
+import { ExmgChip } from './exm-chip.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-chip-input-dropdown': ExmgChipInputDropdown;
+    }
+}
+/**
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class ExmgChipInputDropdown extends ChipSet {
+    label: string;
+    dropdownTitle: string;
+    btnAddText: string;
+    selectedChips?: ExmgChip[];
+    private menuOpen;
+    static styles: import("lit").CSSResult[];
+    constructor();
+    private _onSelect;
+    private onOpenClick;
+    private onMenuClosed;
+    private _removeSelected;
+    private onKeydown;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private updateTabIndicesOverride;
+}

package/src/exm-chip-input-dropdown.js

@@ -0,0 +1,154 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators/custom-element.js';
+import '@material/web/iconbutton/icon-button.js';
+import '@material/web/button/text-button.js';
+import '@material/web/chips/input-chip.js';
+import '@material/web/icon/icon.js';
+import '@material/web/menu/menu.js';
+import './dropdown/dropdown-container.js';
+import { ChipSet } from '@material/web/chips/internal/chip-set.js';
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { style } from './styles/exm-chip-input-dropdown-css.js';
+/**
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let ExmgChipInputDropdown = class ExmgChipInputDropdown extends ChipSet {
+    constructor() {
+        super();
+        this.label = '';
+        this.dropdownTitle = 'Select items';
+        this.btnAddText = 'Add items';
+        this.menuOpen = false;
+        // Add event listeners in the constructor
+        this.addEventListener('click', this._onSelect);
+    }
+    _onSelect(e) {
+        const clickedElement = e.target;
+        const elementType = clickedElement.tagName;
+        if (elementType === 'exm-CHIP') {
+            // @ts-ignore
+            this.selectedChips = this.chips.filter((chip) => chip.selected);
+        }
+    }
+    onOpenClick() {
+        this.menuOpen = true;
+    }
+    onMenuClosed() {
+        this.menuOpen = false;
+    }
+    _removeSelected(val) {
+        const index = (this.selectedChips || []).findIndex((el) => el.value === val);
+        if (index > -1) {
+            (this.selectedChips || []).splice(index, 1); // 2nd parameter means remove one item only
+            // @ts-ignore
+            const chip = this.chips.find((el) => el.value === val);
+            if (chip) {
+                // @ts-ignore
+                chip.selected = false;
+                setTimeout(() => chip.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true })), 0);
+            }
+        }
+    }
+    onKeydown(e) {
+        if (!e.defaultPrevented && e.key === 'Escape') {
+            e.preventDefault();
+            this.menuOpen = false;
+        }
+    }
+    render() {
+        return html `<div class="container">
+      <div class="label">${this.label}</div>
+      <div class="input-container">
+        <div class="selected-chips">
+          ${repeat(this.selectedChips || [], (c) => c.value, (c) => html `<md-input-chip
+                label="${c.label}"
+                data-value=${c.value}
+                selected
+                @remove=${() => this._removeSelected(c.value)}
+              ></md-input-chip>`)}
+        </div>
+        <div class="add">
+          <md-text-button
+            id="button"
+            @click="${this.onOpenClick}"
+            title="${this.dropdownTitle} controls"
+            aria-label="${this.dropdownTitle} controls"
+            aria-haspopup="dialog"
+            aria-expanded=${this.menuOpen ? 'true' : 'false'}
+          >
+            ${this.btnAddText}
+            <md-icon slot="icon">add</md-icon>
+          </md-text-button>
+        </div>
+        <md-menu
+          anchor="button"
+          menu-corner="start-start"
+          anchor-corner="end-start"
+          default-focus="none"
+          role="dialog"
+          aria-label="${this.dropdownTitle} controls"
+          .open=${this.menuOpen}
+          @closed=${this.onMenuClosed}
+          @keydown=${this.onKeydown}
+        >
+          <dropdown-container .dropdownTitle=${this.dropdownTitle}
+            ><slot @slotchange=${this.updateTabIndicesOverride}></slot
+          ></dropdown-container>
+        </md-menu>
+      </div>
+    </div>`;
+    }
+    updateTabIndicesOverride() {
+        // The chip that should be focusable is either the chip that currently has
+        // focus or the first chip that can be focused.
+        const { chips } = this;
+        // update selected array after dom change
+        // @ts-ignore
+        this.selectedChips = this.chips.filter((chip) => chip.selected);
+        let chipToFocus;
+        for (const chip of chips) {
+            const isChipFocusable = chip.alwaysFocusable || !chip.disabled;
+            const chipIsFocused = chip.matches(':focus-within');
+            if (chipIsFocused && isChipFocusable) {
+                // Found the first chip that is actively focused. This overrides the
+                // first focusable chip found.
+                chipToFocus = chip;
+                continue;
+            }
+            if (isChipFocusable && !chipToFocus) {
+                chipToFocus = chip;
+            }
+            // Disable non-focused chips. If we disable all of them, we'll grant focus
+            // to the first focusable child that was found.
+            chip.tabIndex = -1;
+        }
+        if (chipToFocus) {
+            chipToFocus.tabIndex = 0;
+        }
+    }
+};
+ExmgChipInputDropdown.styles = [style];
+__decorate([
+    property({ type: String })
+], ExmgChipInputDropdown.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], ExmgChipInputDropdown.prototype, "dropdownTitle", void 0);
+__decorate([
+    property({ type: String })
+], ExmgChipInputDropdown.prototype, "btnAddText", void 0);
+__decorate([
+    property({ type: Array })
+], ExmgChipInputDropdown.prototype, "selectedChips", void 0);
+__decorate([
+    state()
+], ExmgChipInputDropdown.prototype, "menuOpen", void 0);
+ExmgChipInputDropdown = __decorate([
+    customElement('exm-chip-input-dropdown')
+], ExmgChipInputDropdown);
+export { ExmgChipInputDropdown };
+//# sourceMappingURL=exm-chip-input-dropdown.js.map

package/src/exm-chip-input.d.ts

@@ -0,0 +1,17 @@
+import { ChipSet } from '@material/web/chips/internal/chip-set.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-chip-input': ExmgChipInput;
+    }
+}
+/**
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class ExmgChipInput extends ChipSet {
+    label: string;
+    static styles: import("lit").CSSResult[];
+    protected render(): import("lit-html").TemplateResult<1>;
+    private updateTabIndicesOverride;
+}

package/src/exm-chip-input.js

@@ -0,0 +1,58 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators/custom-element.js';
+import { style } from './styles/exm-chip-input-css.js';
+import { ChipSet } from '@material/web/chips/internal/chip-set.js';
+import { styles } from '@material/web/chips/internal/chip-set-styles.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+/**
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let ExmgChipInput = class ExmgChipInput extends ChipSet {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+    }
+    render() {
+        return html `<div class="container">
+      <div class="label">${this.label}</div>
+      <div class="items"><slot @slotchange=${this.updateTabIndicesOverride}></slot></div>
+    </div>`;
+    }
+    updateTabIndicesOverride() {
+        // The chip that should be focusable is either the chip that currently has
+        // focus or the first chip that can be focused.
+        const { chips } = this;
+        let chipToFocus;
+        for (const chip of chips) {
+            const isChipFocusable = chip.alwaysFocusable || !chip.disabled;
+            const chipIsFocused = chip.matches(':focus-within');
+            if (chipIsFocused && isChipFocusable) {
+                // Found the first chip that is actively focused. This overrides the
+                // first focusable chip found.
+                chipToFocus = chip;
+                continue;
+            }
+            if (isChipFocusable && !chipToFocus) {
+                chipToFocus = chip;
+            }
+            // Disable non-focused chips. If we disable all of them, we'll grant focus
+            // to the first focusable child that was found.
+            chip.tabIndex = -1;
+        }
+        if (chipToFocus) {
+            chipToFocus.tabIndex = 0;
+        }
+    }
+};
+ExmgChipInput.styles = [styles, style];
+__decorate([
+    property({ type: String })
+], ExmgChipInput.prototype, "label", void 0);
+ExmgChipInput = __decorate([
+    customElement('exm-chip-input')
+], ExmgChipInput);
+export { ExmgChipInput };
+//# sourceMappingURL=exm-chip-input.js.map

package/src/exm-chip.d.ts

@@ -0,0 +1,51 @@
+import { FilterChip } from '@material/web/chips/internal/filter-chip.js';
+import { createValidator, getValidityAnchor } from '@material/web/labs/behaviors/constraint-validation.js';
+import { getFormState, getFormValue } from '@material/web/labs/behaviors/form-associated.js';
+import { ChipValidator } from './validator/chip-validator.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-chip': ExmgChip;
+    }
+}
+declare const CHECKED: unique symbol;
+declare const FilterChipBaseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("@material/web/labs/behaviors/element-internals.js").WithElementInternals) & (abstract new (...args: any[]) => import("@material/web/labs/behaviors/focusable.js").Focusable) & typeof FilterChip & import("@material/web/labs/behaviors/form-associated.js").FormAssociatedConstructor, import("@material/web/labs/behaviors/form-associated.js").FormAssociated>, import("@material/web/labs/behaviors/constraint-validation.js").ConstraintValidation>;
+/**
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class ExmgChip extends FilterChipBaseClass {
+    static styles: import("lit").CSSResult[];
+    removable: boolean;
+    selected: boolean;
+    /**
+     * Whether or not the radio is selected.
+     */
+    get checked(): boolean;
+    set checked(checked: boolean);
+    [CHECKED]: boolean;
+    private selectionController;
+    /**
+     * Whether or not the radio is required. If any radio is required in a group,
+     * all radios are implicitly required.
+     */
+    required: boolean;
+    /**
+     * The element value to use in form submission when checked.
+     */
+    value: string;
+    private readonly container;
+    disabled: boolean;
+    name: string;
+    [getFormValue](): string | null;
+    [getFormState](): string;
+    constructor();
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    protected updated(): void;
+    protected renderPrimaryAction(content: unknown): import("lit-html").TemplateResult<1>;
+    private _handleClick;
+    [createValidator](): ChipValidator;
+    [getValidityAnchor](): HTMLElement;
+}
+export {};

package/src/exm-chip.js

@@ -0,0 +1,149 @@
+var _a;
+import { __decorate } from "tslib";
+import { customElement, property, query } from 'lit/decorators.js';
+import { styles as elevatedStyles } from '@material/web/chips/internal/elevated-styles.js';
+import { FilterChip } from '@material/web/chips/internal/filter-chip.js';
+import { styles } from '@material/web/chips/internal/filter-styles.js';
+import { styles as selectableStyles } from '@material/web/chips/internal/selectable-styles.js';
+import { styles as sharedStyles } from '@material/web/chips/internal/shared-styles.js';
+import { styles as trailingIconStyles } from '@material/web/chips/internal/trailing-icon-styles.js';
+import { redispatchEvent } from '@material/web/internal/events/redispatch-event.js';
+import { createValidator, getValidityAnchor, mixinConstraintValidation, } from '@material/web/labs/behaviors/constraint-validation.js';
+import { getFormState, getFormValue, mixinFormAssociated } from '@material/web/labs/behaviors/form-associated.js';
+import { internals, mixinElementInternals } from '@material/web/labs/behaviors/element-internals.js';
+import { mixinFocusable } from '@material/web/labs/behaviors/focusable.js';
+import { ChipValidator } from './validator/chip-validator.js';
+import { observer } from '@exmg/lit-base';
+import { SelectionController } from './selection-controller.js';
+import { html, nothing } from 'lit';
+const CHECKED = Symbol('checked');
+// Separate variable needed for closure.
+const FilterChipBaseClass = mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(mixinFocusable(FilterChip))));
+/**
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let ExmgChip = class ExmgChip extends FilterChipBaseClass {
+    /**
+     * Whether or not the radio is selected.
+     */
+    get checked() {
+        return this[CHECKED];
+    }
+    set checked(checked) {
+        const wasChecked = this.checked;
+        if (wasChecked === checked) {
+            return;
+        }
+        this[CHECKED] = checked;
+        this.requestUpdate('checked', wasChecked);
+    }
+    [(_a = CHECKED, getFormValue)]() {
+        return this.checked ? this.value : null;
+    }
+    [getFormState]() {
+        return String(this.checked);
+    }
+    constructor() {
+        super();
+        this.removable = false;
+        this.selected = false;
+        this[_a] = false;
+        this.selectionController = new SelectionController(this);
+        /**
+         * Whether or not the radio is required. If any radio is required in a group,
+         * all radios are implicitly required.
+         */
+        this.required = false;
+        /**
+         * The element value to use in form submission when checked.
+         */
+        this.value = 'on';
+        this.addController(this.selectionController);
+        this[internals].role = 'radio';
+    }
+    formResetCallback() {
+        // The checked property does not reflect, so the original attribute set by
+        // the user is used to determine the default value.
+        this.checked = this.hasAttribute('checked');
+    }
+    formStateRestoreCallback(state) {
+        this.checked = state === 'true';
+    }
+    updated() {
+        this[internals].ariaChecked = String(this.checked);
+    }
+    renderPrimaryAction(content) {
+        const { ariaLabel } = this;
+        return html `
+      <button
+        class="primary action"
+        id="button"
+        aria-label=${ariaLabel || nothing}
+        aria-pressed=${this.selected}
+        ?disabled=${this.disabled && !this.alwaysFocusable}
+        @click=${this._handleClick}
+      >
+        ${content}
+      </button>
+    `;
+    }
+    _handleClick(event) {
+        if (this.disabled) {
+            return;
+        }
+        // Store prevValue to revert in case `chip.selected` is changed during an
+        // event listener.
+        const prevValue = this.selected;
+        this.selected = !this.selected;
+        const preventDefault = !redispatchEvent(this, event);
+        if (preventDefault) {
+            // We should not do `this.selected = !this.selected`, since a client
+            // click listener could change its value. Instead, always revert to the
+            // original value.
+            this.selected = prevValue;
+            return;
+        }
+    }
+    [createValidator]() {
+        return new ChipValidator(() => {
+            if (!this.selectionController) {
+                // Validation runs on superclass construction, so selection controller
+                // might not actually be ready until this class constructs.
+                return [this];
+            }
+            return this.selectionController.controls;
+        });
+    }
+    [getValidityAnchor]() {
+        return this.container;
+    }
+};
+ExmgChip.styles = [sharedStyles, elevatedStyles, trailingIconStyles, selectableStyles, styles];
+__decorate([
+    property({ type: Boolean })
+], ExmgChip.prototype, "removable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    observer(function (selected) {
+        this.checked = selected;
+    })
+], ExmgChip.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmgChip.prototype, "checked", null);
+__decorate([
+    property({ type: Boolean })
+], ExmgChip.prototype, "required", void 0);
+__decorate([
+    property()
+], ExmgChip.prototype, "value", void 0);
+__decorate([
+    query('.container')
+], ExmgChip.prototype, "container", void 0);
+ExmgChip = __decorate([
+    customElement('exm-chip')
+], ExmgChip);
+export { ExmgChip };
+//# sourceMappingURL=exm-chip.js.map

package/src/selection-controller.d.ts

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ReactiveController } from 'lit';
+/**
+ * An element that supports single-selection with `SelectionController`.
+ */
+export interface SelectionElement extends HTMLElement {
+    /**
+     * Whether or not the element is selected.
+     */
+    checked: boolean;
+}
+/**
+ * A `ReactiveController` that provides root node-scoped selection for
+ * elements, similar to native `<input type="radio">` selection.
+ *
+ * @example
+ * const CHECKED = Symbol('checked');
+ *
+ * class MyChip extends LitElement {
+ *   @property({ type: Boolean }) removable = false;
+ *
+ *    @property({ type: Boolean, reflect: true })
+ *    @observer(function (this: ExmgChip, selected: boolean) {
+ *      this.checked = selected;
+ *    })
+ *    selected = false;
+ *
+ *    @property({ type: Boolean })
+ *    get checked() {
+ *      return this[CHECKED];
+ *    }
+ *    set checked(checked: boolean) {
+ *      const wasChecked = this.checked;
+ *      if (wasChecked === checked) {
+ *        return;
+ *      }
+ *      console.log('checked', checked);
+ *
+ *      this[CHECKED] = checked;
+ *      this.requestUpdate('checked', wasChecked);
+ *    }
+ *
+ *    [CHECKED] = false;
+ *
+ *    private selectionController = new SelectionController(this);
+ *
+ *    constructor() {
+ *      super();
+ *      this.addController(this.selectionController);
+ *    }
+ * }
+ */
+export declare class SelectionController implements ReactiveController {
+    private readonly host;
+    /**
+     * All selection elements in the host element's root with the same
+     * `name` attribute, including the host element.
+     */
+    get controls(): [SelectionElement, ...SelectionElement[]];
+    private root;
+    constructor(host: SelectionElement);
+    hostConnected(): void;
+    hostDisconnected(): void;
+}

package/src/selection-controller.js

@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A `ReactiveController` that provides root node-scoped selection for
+ * elements, similar to native `<input type="radio">` selection.
+ *
+ * @example
+ * const CHECKED = Symbol('checked');
+ *
+ * class MyChip extends LitElement {
+ *   @property({ type: Boolean }) removable = false;
+ *
+ *    @property({ type: Boolean, reflect: true })
+ *    @observer(function (this: ExmgChip, selected: boolean) {
+ *      this.checked = selected;
+ *    })
+ *    selected = false;
+ *
+ *    @property({ type: Boolean })
+ *    get checked() {
+ *      return this[CHECKED];
+ *    }
+ *    set checked(checked: boolean) {
+ *      const wasChecked = this.checked;
+ *      if (wasChecked === checked) {
+ *        return;
+ *      }
+ *      console.log('checked', checked);
+ *
+ *      this[CHECKED] = checked;
+ *      this.requestUpdate('checked', wasChecked);
+ *    }
+ *
+ *    [CHECKED] = false;
+ *
+ *    private selectionController = new SelectionController(this);
+ *
+ *    constructor() {
+ *      super();
+ *      this.addController(this.selectionController);
+ *    }
+ * }
+ */
+export class SelectionController {
+    /**
+     * All selection elements in the host element's root with the same
+     * `name` attribute, including the host element.
+     */
+    get controls() {
+        const name = this.host.getAttribute('name');
+        if (!name || !this.root || !this.host.isConnected) {
+            return [this.host];
+        }
+        // Cast as unknown since there is not enough information for typescript to
+        // know that there is always at least one element (the host).
+        return Array.from(this.root.querySelectorAll(`[name="${name}"]`));
+    }
+    constructor(host) {
+        this.host = host;
+        // eslint-disable-next-line no-undef
+        this.root = null;
+    }
+    hostConnected() {
+        // eslint-disable-next-line no-undef
+        this.root = this.host.getRootNode();
+    }
+    hostDisconnected() {
+        this.root = null;
+    }
+}
+//# sourceMappingURL=selection-controller.js.map

package/src/styles/exm-chip-input-css.d.ts

@@ -0,0 +1,2 @@
+export declare const style: import("lit").CSSResult;
+export default style;

package/src/styles/exm-chip-input-css.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+export const style = css `:host{display:block}.label{display:block;font-size:1rem;font-weight:500;margin-bottom:.5rem}.items{display:flex;flex-wrap:wrap;gap:.3rem}`;
+export default style;
+//# sourceMappingURL=exm-chip-input-css.js.map

package/src/styles/exm-chip-input-dropdown-css.d.ts

@@ -0,0 +1,2 @@
+export declare const style: import("lit").CSSResult;
+export default style;

package/src/styles/exm-chip-input-dropdown-css.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+export const style = css `:host{display:block}.label{display:block;font-size:1rem;font-weight:500;margin-bottom:.5rem}.add{display:flex;align-items:center;margin-top:.5rem}.input-container{position:relative}.selected-chips{display:flex;flex-wrap:wrap;gap:.3rem}`;
+export default style;
+//# sourceMappingURL=exm-chip-input-dropdown-css.js.map

package/src/styles/exm-chip-input-dropdown.scss

@@ -0,0 +1,26 @@
+:host {
+  display: block;
+}
+
+.label {
+  display: block;
+  font-size: 1rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}
+
+.add {
+  display: flex;
+  align-items: center;
+  margin-top: 0.5rem;
+}
+
+.input-container {
+  position: relative;
+}
+
+.selected-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+}

package/src/styles/exm-chip-input.scss

@@ -0,0 +1,16 @@
+:host {
+  display: block;
+}
+
+.label {
+  display: block;
+  font-size: 1rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}
+
+.items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+}

package/src/validator/chip-validator.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Validator } from '@material/web/labs/behaviors/validators/validator.js';
+/**
+ * Constraint validation properties for a checkbox.
+ */
+export interface ChipState {
+    /**
+     * Whether the checkbox is checked.
+     */
+    readonly checked: boolean;
+    /**
+     * Whether the checkbox is required.
+     */
+    readonly required: boolean;
+}
+/**
+ * Radio constraint validation properties for a single radio and its siblings.
+ */
+export type ChipGroupState = readonly [ChipState, ...ChipState[]];
+/**
+ * A validator that provides constraint validation that emulates
+ * `<input type="checkbox">` validation.
+ */
+export declare class ChipValidator extends Validator<ChipGroupState> {
+    private radioElement?;
+    protected computeValidity(states: ChipGroupState): {
+        validity: {
+            valueMissing: boolean;
+        };
+        validationMessage: string;
+    };
+    protected equals(prevGroup: ChipGroupState, nextGroup: ChipGroupState): boolean;
+    protected copy(states: ChipGroupState): ChipGroupState;
+}

package/src/validator/chip-validator.js

@@ -0,0 +1,65 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Validator } from '@material/web/labs/behaviors/validators/validator.js';
+/**
+ * A validator that provides constraint validation that emulates
+ * `<input type="checkbox">` validation.
+ */
+export class ChipValidator extends Validator {
+    computeValidity(states) {
+        if (!this.radioElement) {
+            // Lazily create the radio element
+            this.radioElement = document.createElement('input');
+            this.radioElement.type = 'radio';
+            // A name is required for validation to run
+            this.radioElement.name = 'group';
+        }
+        let isRequired = false;
+        let isChecked = false;
+        for (const { checked, required } of states) {
+            if (required) {
+                isRequired = true;
+            }
+            if (checked) {
+                isChecked = true;
+            }
+        }
+        // Firefox v119 doesn't compute grouped radio validation correctly while
+        // they are detached from the DOM, which is why we don't render multiple
+        // virtual <input>s. Instead, we can check the required/checked states and
+        // grab the i18n'd validation message if the value is missing.
+        this.radioElement.checked = isChecked;
+        this.radioElement.required = isRequired;
+        return {
+            validity: {
+                valueMissing: isRequired && !isChecked,
+            },
+            validationMessage: this.radioElement.validationMessage,
+        };
+    }
+    equals(prevGroup, nextGroup) {
+        if (prevGroup.length !== nextGroup.length) {
+            return false;
+        }
+        for (let i = 0; i < prevGroup.length; i++) {
+            const prev = prevGroup[i];
+            const next = nextGroup[i];
+            if (prev.checked !== next.checked || prev.required !== next.required) {
+                return false;
+            }
+        }
+        return true;
+    }
+    copy(states) {
+        // Cast as unknown since typescript does not have enough information to
+        // infer that the array always has at least one element.
+        return states.map(({ checked, required }) => ({
+            checked,
+            required,
+        }));
+    }
+}
+//# sourceMappingURL=chip-validator.js.map