@exmg/exm-chip-input 1.1.9 → 1.1.10-alpha.26

package/.rollup.cache/root/repo/packages/exm-chip-input/dist/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/.rollup.cache/root/repo/packages/exm-chip-input/dist/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/.rollup.cache/root/repo/packages/exm-chip-input/dist/exm-chip-input-dropdown.d.ts

@@ -0,0 +1,35 @@
+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 { ExmChip } from './exm-chip.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-chip-input-dropdown': ExmChipInputDropdown;
+    }
+}
+/**
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class ExmChipInputDropdown extends ChipSet {
+    label: string;
+    dropdownTitle: string;
+    btnAddText: string;
+    selectedChips?: ExmChip[];
+    supportingText: string;
+    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/.rollup.cache/root/repo/packages/exm-chip-input/dist/exm-chip-input-dropdown.js

@@ -0,0 +1,153 @@
+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, nothing } 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';
+import { sharedChipStyle } from './styles/exm-chips-shared-css.js';
+import { classMap } from 'lit/directives/class-map.js';
+/**
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let ExmChipInputDropdown = class ExmChipInputDropdown extends ChipSet {
+    constructor() {
+        super();
+        this.label = '';
+        this.dropdownTitle = 'Select items';
+        this.btnAddText = 'Add items';
+        this.supportingText = '';
+        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() {
+        const containerClasses = { 'has-label': !!this.label };
+        const labelClasses = { 'not-empty': (this.selectedChips || []).length > 0, 'has-focus': this.menuOpen };
+        return html `
+      <div class="container ${classMap(containerClasses)}">
+        <div class="background"></div>
+        <div class="label ${classMap(labelClasses)}">${this.label}</div>
+        <div class="input-container" id="input-container" @click="${this.onOpenClick}">
+          <div class="selected-chips">
+            ${repeat(this.selectedChips || [], (chip) => chip.value, (chip) => html `<md-input-chip
+                  label="${chip.label}"
+                  data-value=${chip.value}
+                  selected
+                  @remove=${() => this._removeSelected(chip.value)}
+                ></md-input-chip>`)}
+          </div>
+          <md-menu
+            anchor="input-container"
+            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>
+        ${this.supportingText ? html `<div class="supporting-text">${this.supportingText}</div>` : nothing}
+      </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;
+        }
+    }
+};
+ExmChipInputDropdown.styles = [sharedChipStyle, style];
+__decorate([
+    property({ type: String })
+], ExmChipInputDropdown.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], ExmChipInputDropdown.prototype, "dropdownTitle", void 0);
+__decorate([
+    property({ type: String })
+], ExmChipInputDropdown.prototype, "btnAddText", void 0);
+__decorate([
+    property({ type: Array })
+], ExmChipInputDropdown.prototype, "selectedChips", void 0);
+__decorate([
+    property({ type: String, attribute: 'supporting-text' })
+], ExmChipInputDropdown.prototype, "supportingText", void 0);
+__decorate([
+    state()
+], ExmChipInputDropdown.prototype, "menuOpen", void 0);
+ExmChipInputDropdown = __decorate([
+    customElement('exm-chip-input-dropdown')
+], ExmChipInputDropdown);
+export { ExmChipInputDropdown };
+//# sourceMappingURL=exm-chip-input-dropdown.js.map

package/.rollup.cache/root/repo/packages/exm-chip-input/dist/exm-chip-input.d.ts

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

package/.rollup.cache/root/repo/packages/exm-chip-input/dist/exm-chip-input.js

@@ -0,0 +1,76 @@
+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, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { sharedChipStyle } from './styles/exm-chips-shared-css.js';
+import { classMap } from 'lit/directives/class-map.js';
+/**
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let ExmChipInput = class ExmChipInput extends ChipSet {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.supportingText = '';
+        this.chipCount = 0;
+    }
+    render() {
+        const containerClasses = { 'has-label': !!this.label };
+        const labelClasses = { 'not-empty': this.chipCount > 0 };
+        return html `
+      <div class="container ${classMap(containerClasses)}">
+        <div class="background"></div>
+        <div class="state-layer"></div>
+        <div class="label ${classMap(labelClasses)}">${this.label}</div>
+        <div class="items"><slot @slotchange=${this.updateTabIndicesOverride}></slot></div>
+        ${this.supportingText ? html `<div class="supporting-text">${this.supportingText}</div>` : nothing}
+      </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;
+        this.chipCount = chips.length;
+        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;
+        }
+    }
+};
+ExmChipInput.styles = [styles, sharedChipStyle, style];
+__decorate([
+    property({ type: String })
+], ExmChipInput.prototype, "label", void 0);
+__decorate([
+    property({ type: String, attribute: 'supporting-text' })
+], ExmChipInput.prototype, "supportingText", void 0);
+__decorate([
+    state()
+], ExmChipInput.prototype, "chipCount", void 0);
+ExmChipInput = __decorate([
+    customElement('exm-chip-input')
+], ExmChipInput);
+export { ExmChipInput };
+//# sourceMappingURL=exm-chip-input.js.map

package/.rollup.cache/root/repo/packages/exm-chip-input/dist/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': ExmChip;
+    }
+}
+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 ExmChip 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/.rollup.cache/root/repo/packages/exm-chip-input/dist/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 ExmChip = class ExmChip 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;
+    }
+};
+ExmChip.styles = [sharedStyles, elevatedStyles, trailingIconStyles, selectableStyles, styles];
+__decorate([
+    property({ type: Boolean })
+], ExmChip.prototype, "removable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    observer(function (selected) {
+        this.checked = selected;
+    })
+], ExmChip.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmChip.prototype, "checked", null);
+__decorate([
+    property({ type: Boolean })
+], ExmChip.prototype, "required", void 0);
+__decorate([
+    property()
+], ExmChip.prototype, "value", void 0);
+__decorate([
+    query('.container')
+], ExmChip.prototype, "container", void 0);
+ExmChip = __decorate([
+    customElement('exm-chip')
+], ExmChip);
+export { ExmChip };
+//# sourceMappingURL=exm-chip.js.map

package/.rollup.cache/root/repo/packages/exm-chip-input/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { ExmChipInput } from './exm-chip-input.js';
+export { ExmChip } from './exm-chip.js';
+export { ExmChipInputDropdown } from './exm-chip-input-dropdown.js';
+export { style as chipInputStyles } from './styles/exm-chip-input-css.js';

package/.rollup.cache/root/repo/packages/exm-chip-input/dist/index.js

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

package/.rollup.cache/root/repo/packages/exm-chip-input/dist/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: ExmChip, 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;
+}