@universal-material/web/chip-field/chip-field.js

Material web components

import { __decorate } from "tslib";
import { html, nothing } from 'lit';
import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
import { customElement, property, query } from 'lit/decorators.js';
import { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';
import { styles } from './chip-field.styles.js';
let UmChipField = class UmChipField extends UmTextFieldBase {
    constructor() {
        super(...arguments);
        /**
         * If true, ignore enter key input
         */
        this.manual = false;
        this.#value = [];
        this.#removeChip = (index) => (e) => {
            e?.preventDefault();
            this.input.focus();
            const defaultPrevented = this.#dispatchRemoveEvent(index);
            if (defaultPrevented) {
                return;
            }
            this.removeAt(index, true);
        };
    }
    static { this.styles = [UmTextFieldBase.styles, styles]; }
    #value;
    /**
     * An array containing the value representation of each chip.
     *
     * _Note:_ Add or remove items directly from value array won't trigger a render on Chip Field. Use the methods `add` or `removeAt`.
     */
    get value() {
        return this.#value;
    }
    set value(value) {
        this.#value = value;
        this.#valueUpdate();
    }
    setFormValue() {
        const formData = new FormData();
        for (const item of this.value) {
            formData.append(this.name, this.getItemLabel(item));
        }
        this.elementInternals.setFormValue(formData);
    }
    focus() {
        this.input.focus();
    }
    renderControl() {
        return html `
      <div class="input">
        ${this.#getChips()}
        <input
          part="input"
          id=${this.id || nothing}
          aria-labelledby="label"
          ?disabled=${this.disabled}
          placeholder=${this.placeholder || nothing}
          @blur=${this.#handleBlur}
          @keydown=${this.#handleKeyDown}
          @input=${this.#handleInput} />
      </div>
    `;
    }
    #getChips() {
        return this.value?.map((item, index) => {
            const leadingIcon = this.leadingIconTemplate
                ? html `
            <span slot="leading-icon">${unsafeHTML(this.leadingIconTemplate(item))}</span>
          `
                : nothing;
            return html `
        <u-chip removable ?disabled=${this.disabled} @remove=${this.#removeChip(index)}>
          ${leadingIcon} ${this.getItemLabel(item)}
        </u-chip>
      `;
        });
    }
    #handleBlur() {
        this.requestUpdate();
    }
    #handleInput() {
        this.#setEmpty();
    }
    #handleKeyDown(e) {
        if (!this.manual && e.key === 'Enter') {
            this.add(this.input.value, true);
            this.input.value = '';
            return;
        }
        if (e.key === 'Backspace' && this.input.selectionStart === 0 && this.input.selectionEnd === 0) {
            this.#removeChip(this.value.length - 1)();
            return;
        }
    }
    add(value, triggerChange = false) {
        this.value.push(value);
        this.#changed(triggerChange);
    }
    removeAt(index, triggerChange = false) {
        this.value.splice(index, 1);
        this.#changed(triggerChange);
    }
    #removeChip;
    #changed(triggerChange) {
        this.#valueUpdate();
        if (triggerChange) {
            this.dispatchEvent(new Event('change', { bubbles: true }));
        }
    }
    #valueUpdate() {
        this.#setEmpty();
        this.setFormValue();
        this.requestUpdate();
    }
    #setEmpty() {
        this.empty = !this.value?.length && !this.input?.value;
    }
    #dispatchRemoveEvent(index) {
        const item = this.value[index];
        const event = new CustomEvent('remove', {
            cancelable: true,
            detail: item,
        });
        this.dispatchEvent(event);
        return event.defaultPrevented;
    }
    getItemLabel(item) {
        return this.formatter ? this.formatter(item) : item.toString();
    }
};
__decorate([
    query('input')
], UmChipField.prototype, "input", void 0);
__decorate([
    property()
], UmChipField.prototype, "name", void 0);
__decorate([
    property({ type: Boolean })
], UmChipField.prototype, "manual", void 0);
UmChipField = __decorate([
    customElement('u-chip-field')
], UmChipField);
export { UmChipField };
//# sourceMappingURL=chip-field.js.map