@digital-realty/ix-email-list 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 ix-email-list
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,69 @@
+# \<ix-email-list>
+
+This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+## Installation
+
+```bash
+npm i ix-email-list
+```
+
+## Usage
+
+```html
+<script type="module">
+  import 'ix-email-list/ix-email-list.js';
+  const addresses = [
+    {
+      address: 'admin@admin.com',
+      name: 'Admin',
+      isValid: true
+    }
+  ]
+</script>
+
+<ix-email-list .addresses=${addresses}></ix-email-list>
+```
+
+## Linting and formatting
+
+To scan the project for linting and formatting errors, run
+
+```bash
+npm run lint
+```
+
+To automatically fix linting and formatting errors, run
+
+```bash
+npm run format
+```
+
+## Testing with Web Test Runner
+
+To execute a single test run:
+
+```bash
+npm run test
+```
+
+To run the tests in interactive watch mode run:
+
+```bash
+npm run test:watch
+```
+
+
+## Tooling configs
+
+For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
+
+If you customize the configuration a lot, you can consider moving them to individual files.
+
+## Local Demo with `web-dev-server`
+
+```bash
+npm start
+```
+
+To run a local development server that serves the basic demo located in `demo/index.html`

package/dist/IxEmailList.d.ts

@@ -0,0 +1,97 @@
+import { LitElement, PropertyValues } from 'lit';
+import '@digital-realty/ix-chip/ix-chip-set.js';
+import '@digital-realty/ix-chip/ix-chip.js';
+import '@digital-realty/ix-field/ix-field.js';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+export interface EmailListItem {
+    address: string;
+    isValid: boolean;
+    name?: string;
+}
+export declare class IxEmailList extends LitElement {
+    static get styles(): import("lit").CSSResult[];
+    /** @nocollapse */
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+        customElements?: CustomElementRegistry | undefined;
+        registry?: CustomElementRegistry | undefined;
+    };
+    /** @nocollapse  */
+    static readonly formAssociated = true;
+    private readonly internals;
+    emailInput: HTMLInputElement;
+    items: string[];
+    lookup: (address?: string) => string | undefined;
+    label: string;
+    value: string;
+    errorText: string;
+    disabled: boolean;
+    /**
+     * Gets or sets whether or not the text field is in a visually invalid state.
+     *
+     * This error state overrides the error state controlled by
+     * `reportValidity()`.
+     */
+    error: boolean;
+    required: boolean;
+    addresses: EmailListItem[];
+    onChanged: any;
+    /**
+     * The associated form element with which this element's value will submit.
+     */
+    get form(): HTMLFormElement | null;
+    /**
+     * The labels this element is associated with.
+     */
+    get labels(): NodeList;
+    /**
+     * The HTML name to use in form submission.
+     */
+    get name(): string;
+    set name(name: string);
+    private focused;
+    private inputValue;
+    /**
+     * Returns the text field's validation error message.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation
+     */
+    get validationMessage(): string;
+    /**
+     * Returns a `ValidityState` object that represents the validity states of the
+     * text field.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
+     */
+    get validity(): ValidityState;
+    /**
+     * Returns whether an element will successfully validate based on forms
+     * validation rules and constraints.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate
+     */
+    get willValidate(): boolean;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    firstUpdated(): void;
+    private chipRemove;
+    handleFocusin: () => void;
+    handleFocusout: () => void;
+    keydown: (e: KeyboardEvent) => void;
+    resolveInput: () => void;
+    input: (e: InputEvent) => void;
+    clear: () => void;
+    /** @private */
+    formResetCallback(): void;
+    /**
+     * Reset the text field to its default value.
+     */
+    reset(): void;
+    isValidList: () => void;
+    static labelText: (item: EmailListItem) => string;
+    protected updated(changedProperties: PropertyValues): void;
+    focus(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/IxEmailList.js

@@ -0,0 +1,294 @@
+import { __decorate } from "tslib";
+import { html, LitElement, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';
+import '@digital-realty/ix-chip/ix-chip-set.js';
+import '@digital-realty/ix-chip/ix-chip.js';
+import '@digital-realty/ix-field/ix-field.js';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import { IxEmailListStyles } from './ix-email-list-styles.js';
+import { isValidEmail } from './utils/email-validation.js';
+export class IxEmailList extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.internals = this /* needed for closure */
+            .attachInternals();
+        this.items = [];
+        // eslint-disable-next-line class-methods-use-this
+        this.lookup = () => undefined;
+        this.label = '';
+        this.value = '';
+        this.errorText = 'Invalid email in list';
+        this.disabled = false;
+        /**
+         * Gets or sets whether or not the text field is in a visually invalid state.
+         *
+         * This error state overrides the error state controlled by
+         * `reportValidity()`.
+         */
+        this.error = false;
+        this.required = false;
+        this.addresses = [];
+        // eslint-disable-next-line class-methods-use-this
+        this.onChanged = () => { };
+        this.focused = false;
+        this.inputValue = '';
+        this.chipRemove = async (id) => {
+            const addresses = this.addresses.filter((_item, i) => i !== id);
+            this.addresses = [];
+            await 0;
+            this.addresses = addresses;
+            this.isValidList();
+            this.onChanged(this.addresses);
+            if (!this.addresses.length) {
+                this.handleFocusout();
+            }
+        };
+        this.handleFocusin = () => {
+            this.focused = true;
+        };
+        this.handleFocusout = () => {
+            if (this.inputValue) {
+                this.resolveInput();
+            }
+            else if (this.value !== '') {
+                this.focused = true;
+            }
+            else {
+                this.focused = false;
+            }
+        };
+        this.keydown = (e) => {
+            // input completion keys
+            const completionKeys = [' ', ',', 'Tab', 'Enter'];
+            if (completionKeys.includes(e.key) && this.inputValue.length) {
+                e.preventDefault();
+                this.resolveInput();
+            }
+        };
+        this.resolveInput = () => {
+            const address = this.inputValue.toLowerCase();
+            const isValid = isValidEmail(address);
+            const name = this.lookup(address);
+            this.addresses = [...this.addresses, { address, isValid, name }];
+            this.inputValue = '';
+            this.isValidList();
+            this.onChanged(this.addresses);
+        };
+        this.input = (e) => {
+            const { value } = e.target;
+            this.inputValue = value;
+        };
+        this.clear = () => {
+            this.addresses = [];
+            this.inputValue = '';
+            this.value = '';
+            this.error = false;
+            this.onChanged(this.addresses);
+            this.handleFocusout();
+        };
+        this.isValidList = () => {
+            this.error = this.addresses.some((item) => !item.isValid);
+            this.internals.setValidity({
+                badInput: this.error,
+            }, this.error ? this.errorText : '', this.emailInput);
+        };
+    }
+    static get styles() {
+        return [IxEmailListStyles];
+    }
+    /**
+     * 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;
+    }
+    /**
+     * The HTML name to use in form submission.
+     */
+    get name() {
+        var _a;
+        return (_a = this.getAttribute('name')) !== null && _a !== void 0 ? _a : '';
+    }
+    set name(name) {
+        this.setAttribute('name', name);
+    }
+    /**
+     * Returns the text field's validation error message.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation
+     */
+    get validationMessage() {
+        return this.internals.validationMessage;
+    }
+    /**
+     * Returns a `ValidityState` object that represents the validity states of the
+     * text field.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
+     */
+    get validity() {
+        return this.internals.validity;
+    }
+    /**
+     * Returns whether an element will successfully validate based on forms
+     * validation rules and constraints.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate
+     */
+    get willValidate() {
+        return this.internals.willValidate;
+    }
+    checkValidity() {
+        return this.internals.checkValidity();
+    }
+    reportValidity() {
+        return this.internals.reportValidity();
+    }
+    firstUpdated() {
+        this.internals.setFormValue(this.value);
+        if (this.value !== '') {
+            this.addresses = this.value.split(',').map((item) => {
+                const address = item.toLowerCase().trim();
+                return {
+                    address,
+                    isValid: isValidEmail(address),
+                };
+            });
+        }
+        this.focused = this.addresses.length > 0;
+        this.isValidList();
+    }
+    /** @private */
+    formResetCallback() {
+        this.reset();
+    }
+    /**
+     * Reset the text field to its default value.
+     */
+    reset() {
+        var _a;
+        this.clear();
+        this.value = (_a = this.getAttribute('value')) !== null && _a !== void 0 ? _a : '';
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('addresses')) {
+            this.value = this.addresses.map(item => item.address).join(', ');
+        }
+        this.internals.setFormValue(this.value);
+    }
+    focus() {
+        this.emailInput.focus();
+    }
+    render() {
+        const classes = {
+            disabled: this.disabled,
+            error: !this.disabled && this.error,
+        };
+        return html `
+      <ix-field
+        class="${classMap(classes)}"
+        ?focused=${this.focused}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        label=${this.label}
+        ?error=${this.error}
+        error-text=${this.errorText}
+        @focusin=${this.handleFocusin}
+        @focusout=${this.handleFocusout}
+      >
+        <ix-chip-set>
+          ${this.addresses.map((item, id) => html `<span
+              ><ix-chip
+                @remove=${() => this.chipRemove(id)}
+                label=${IxEmailList.labelText(item)}
+                class=${item.isValid ? '' : 'error'}
+                appearance="input"
+                removable
+                remove-only
+              ></ix-chip
+            ></span>`)}
+          <input
+            id="email-input"
+            @keydown=${this.keydown}
+            @input=${this.input}
+            .value=${this.inputValue}
+            class="flex-fill"
+            type="text"
+          />
+        </ix-chip-set>
+        <slot name="end" slot="end">
+          ${this.addresses.length
+            ? html `<ix-icon-button
+                class="clear-icon"
+                @click=${this.clear}
+                icon="close"
+                aria-label="clear"
+              ></ix-icon-button>`
+            : nothing}
+        </slot>
+      </ix-field>
+    `;
+    }
+}
+(() => {
+    requestUpdateOnAriaChange(IxEmailList);
+})();
+/** @nocollapse */
+IxEmailList.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+/** @nocollapse  */
+IxEmailList.formAssociated = true;
+IxEmailList.labelText = (item) => {
+    const address = item.isValid ? item.address : `${item.address}!`;
+    return item.name ? item.name : address;
+};
+__decorate([
+    query('#email-input')
+], IxEmailList.prototype, "emailInput", void 0);
+__decorate([
+    property({ type: Array })
+], IxEmailList.prototype, "items", void 0);
+__decorate([
+    property()
+], IxEmailList.prototype, "lookup", void 0);
+__decorate([
+    property({ type: String })
+], IxEmailList.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], IxEmailList.prototype, "value", void 0);
+__decorate([
+    property({ type: String, attribute: 'error-text' })
+], IxEmailList.prototype, "errorText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IxEmailList.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IxEmailList.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IxEmailList.prototype, "required", void 0);
+__decorate([
+    property({ type: Array })
+], IxEmailList.prototype, "addresses", void 0);
+__decorate([
+    property({ type: Function })
+], IxEmailList.prototype, "onChanged", void 0);
+__decorate([
+    state()
+], IxEmailList.prototype, "focused", void 0);
+__decorate([
+    state()
+], IxEmailList.prototype, "inputValue", void 0);
+//# sourceMappingURL=IxEmailList.js.map

package/dist/IxEmailList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxEmailList.js","sourceRoot":"","sources":["../src/IxEmailList.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,wCAAwC,CAAC;AAChD,OAAO,oCAAoC,CAAC;AAC5C,OAAO,sCAAsC,CAAC;AAC9C,OAAO,kDAAkD,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAQ3D,MAAM,OAAO,WAAY,SAAQ,UAAU;IAA3C;;QAkBmB,cAAS,GAAI,IAAoB,CAAC,wBAAwB;aACxE,eAAe,EAAE,CAAC;QAIM,UAAK,GAAa,EAAE,CAAC;QAEhD,kDAAkD;QACtC,WAAM,GAA6C,GAAG,EAAE,CAClE,SAAS,CAAC;QAEgB,UAAK,GAAG,EAAE,CAAC;QAEX,UAAK,GAAG,EAAE,CAAC;QAEc,cAAS,GAC5D,uBAAuB,CAAC;QAEkB,aAAQ,GAAG,KAAK,CAAC;QAE7D;;;;;WAKG;QACyC,UAAK,GAAG,KAAK,CAAC;QAEd,aAAQ,GAAG,KAAK,CAAC;QAElC,cAAS,GAAoB,EAAE,CAAC;QAE3D,kDAAkD;QACpB,cAAS,GAAQ,GAAG,EAAE,GAAE,CAAC,CAAC;QA2BvC,YAAO,GAAG,KAAK,CAAC;QAEhB,eAAU,GAAG,EAAE,CAAC;QAsDzB,eAAU,GAAG,KAAK,EAAE,EAAU,EAAE,EAAE;YACxC,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,CAAS,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;YACxE,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;YACpB,MAAM,CAAC,CAAC;YACR,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;YAC3B,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAC/B,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE;gBAC1B,IAAI,CAAC,cAAc,EAAE,CAAC;aACvB;QACH,CAAC,CAAC;QAEF,kBAAa,GAAG,GAAG,EAAE;YACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC,CAAC;QAEF,mBAAc,GAAG,GAAG,EAAE;YACpB,IAAI,IAAI,CAAC,UAAU,EAAE;gBACnB,IAAI,CAAC,YAAY,EAAE,CAAC;aACrB;iBAAM,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE;gBAC5B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;aACrB;iBAAM;gBACL,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;aACtB;QACH,CAAC,CAAC;QAEF,YAAO,GAAG,CAAC,CAAgB,EAAE,EAAE;YAC7B,wBAAwB;YACxB,MAAM,cAAc,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC;YAClD,IAAI,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE;gBAC5D,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,YAAY,EAAE,CAAC;aACrB;QACH,CAAC,CAAC;QAEF,iBAAY,GAAG,GAAG,EAAE;YAClB,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;YAC9C,MAAM,OAAO,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC;YACtC,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YAClC,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;YACjE,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;YACrB,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACjC,CAAC,CAAC;QAEF,UAAK,GAAG,CAAC,CAAa,EAAE,EAAE;YACxB,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC/C,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QAC1B,CAAC,CAAC;QAEF,UAAK,GAAG,GAAG,EAAE;YACX,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;YACpB,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;YACrB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAChB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAC/B,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC,CAAC;QAeF,gBAAW,GAAG,GAAG,EAAE;YACjB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,IAAmB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACzE,IAAI,CAAC,SAAS,CAAC,WAAW,CACxB;gBACE,QAAQ,EAAE,IAAI,CAAC,KAAK;aACrB,EACD,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAChC,IAAI,CAAC,UAAU,CAChB,CAAC;QACJ,CAAC,CAAC;IAuEJ,CAAC;IAzRC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAC7B,CAAC;IA8CD;;OAEG;IACH,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7B,CAAC;IAED;;OAEG;IACH,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;IAC/B,CAAC;IAED;;OAEG;IACH,IAAI,IAAI;;QACN,OAAO,MAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,mCAAI,EAAE,CAAC;IACzC,CAAC;IAED,IAAI,IAAI,CAAC,IAAY;QACnB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAClC,CAAC;IAMD;;;;OAIG;IACH,IAAI,iBAAiB;QACnB,OAAO,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC;IAC1C,CAAC;IAED;;;;;OAKG;IACH,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;IACjC,CAAC;IAED;;;;;OAKG;IACH,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC;IACrC,CAAC;IAED,aAAa;QACX,OAAO,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC;IACxC,CAAC;IAED,cAAc;QACZ,OAAO,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,CAAC;IACzC,CAAC;IAED,YAAY;QACV,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxC,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE;YACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAY,EAAE,EAAE;gBAC1D,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC;gBAC1C,OAAO;oBACL,OAAO;oBACP,OAAO,EAAE,YAAY,CAAC,OAAO,CAAC;iBAC/B,CAAC;YACJ,CAAC,CAAC,CAAC;SACJ;QACD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;QACzC,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IA6DD,eAAe;IACf,iBAAiB;QACf,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAED;;OAEG;IACH,KAAK;;QACH,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,MAAA,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,mCAAI,EAAE,CAAC;IAChD,CAAC;IAkBkB,OAAO,CAAC,iBAAiC;QAC1D,IAAI,iBAAiB,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;YACtC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAClE;QACD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC;IAEQ,KAAK;QACZ,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;IAC1B,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,KAAK,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK;SACpC,CAAC;QAEF,OAAO,IAAI,CAAA;;iBAEE,QAAQ,CAAC,OAAO,CAAC;mBACf,IAAI,CAAC,OAAO;oBACX,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;gBACjB,IAAI,CAAC,KAAK;iBACT,IAAI,CAAC,KAAK;qBACN,IAAI,CAAC,SAAS;mBAChB,IAAI,CAAC,aAAa;oBACjB,IAAI,CAAC,cAAc;;;YAG3B,IAAI,CAAC,SAAS,CAAC,GAAG,CAClB,CAAC,IAAI,EAAE,EAAU,EAAE,EAAE,CAAC,IAAI,CAAA;;0BAEZ,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC;wBAC3B,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC;wBAC3B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;;;;;qBAK9B,CACV;;;uBAGY,IAAI,CAAC,OAAO;qBACd,IAAI,CAAC,KAAK;qBACV,IAAI,CAAC,UAAU;;;;;;YAMxB,IAAI,CAAC,SAAS,CAAC,MAAM;YACrB,CAAC,CAAC,IAAI,CAAA;;yBAEO,IAAI,CAAC,KAAK;;;iCAGF;YACrB,CAAC,CAAC,OAAO;;;KAGhB,CAAC;IACJ,CAAC;;AA5RD;IACE,yBAAyB,CAAC,WAAW,CAAC,CAAC;AACzC,CAAC,GAAA,CAAA;AAMD,kBAAkB;AACF,6BAAiB,GAAG;IAClC,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,CAAC;AAEF,mBAAmB;AACH,0BAAc,GAAG,IAAI,CAAC;AAyM/B,qBAAS,GAAG,CAAC,IAAmB,EAAE,EAAE;IACzC,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,GAAG,CAAC;IACjE,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC;AACzC,CAAC,CAAC;AAvMqB;IAAtB,KAAK,CAAC,cAAc,CAAC;+CAA+B;AAE1B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;0CAAsB;AAGpC;IAAX,QAAQ,EAAE;2CACC;AAEgB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAY;AAEX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAY;AAEc;IAApD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;8CAC1B;AAEkB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAkB;AAQjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAe;AAEd;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAkB;AAElC;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;8CAAiC;AAG7B;IAA7B,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;8CAA2B;AA2B/C;IAAR,KAAK,EAAE;4CAAyB;AAExB;IAAR,KAAK,EAAE;+CAAyB","sourcesContent":["import { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\nimport '@digital-realty/ix-chip/ix-chip-set.js';\nimport '@digital-realty/ix-chip/ix-chip.js';\nimport '@digital-realty/ix-field/ix-field.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { IxEmailListStyles } from './ix-email-list-styles.js';\nimport { isValidEmail } from './utils/email-validation.js';\n\nexport interface EmailListItem {\n  address: string;\n  isValid: boolean;\n  name?: string;\n}\n\nexport class IxEmailList extends LitElement {\n  static {\n    requestUpdateOnAriaChange(IxEmailList);\n  }\n\n  static get styles() {\n    return [IxEmailListStyles];\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /** @nocollapse  */\n  static readonly formAssociated = true;\n\n  private readonly internals = (this as HTMLElement) /* needed for closure */\n    .attachInternals();\n\n  @query('#email-input') emailInput!: HTMLInputElement;\n\n  @property({ type: Array }) items: string[] = [];\n\n  // eslint-disable-next-line class-methods-use-this\n  @property() lookup: (address?: string) => string | undefined = () =>\n    undefined;\n\n  @property({ type: String }) label = '';\n\n  @property({ type: String }) value = '';\n\n  @property({ type: String, attribute: 'error-text' }) errorText =\n    'Invalid email in list';\n\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Gets or sets whether or not the text field is in a visually invalid state.\n   *\n   * This error state overrides the error state controlled by\n   * `reportValidity()`.\n   */\n  @property({ type: Boolean, reflect: true }) error = false;\n\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  @property({ type: Array }) addresses: EmailListItem[] = [];\n\n  // eslint-disable-next-line class-methods-use-this\n  @property({ type: Function }) onChanged: any = () => {};\n\n  /**\n   * The associated form element with which this element's value will submit.\n   */\n  get form() {\n    return this.internals.form;\n  }\n\n  /**\n   * The labels this element is associated with.\n   */\n  get labels() {\n    return this.internals.labels;\n  }\n\n  /**\n   * The HTML name to use in form submission.\n   */\n  get name() {\n    return this.getAttribute('name') ?? '';\n  }\n\n  set name(name: string) {\n    this.setAttribute('name', name);\n  }\n\n  @state() private focused = false;\n\n  @state() private inputValue = '';\n\n  /**\n   * Returns the text field's validation error message.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation\n   */\n  get validationMessage() {\n    return this.internals.validationMessage;\n  }\n\n  /**\n   * Returns a `ValidityState` object that represents the validity states of the\n   * text field.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n   */\n  get validity() {\n    return this.internals.validity;\n  }\n\n  /**\n   * Returns whether an element will successfully validate based on forms\n   * validation rules and constraints.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate\n   */\n  get willValidate() {\n    return this.internals.willValidate;\n  }\n\n  checkValidity() {\n    return this.internals.checkValidity();\n  }\n\n  reportValidity() {\n    return this.internals.reportValidity();\n  }\n\n  firstUpdated() {\n    this.internals.setFormValue(this.value);\n    if (this.value !== '') {\n      this.addresses = this.value.split(',').map((item: string) => {\n        const address = item.toLowerCase().trim();\n        return {\n          address,\n          isValid: isValidEmail(address),\n        };\n      });\n    }\n    this.focused = this.addresses.length > 0;\n    this.isValidList();\n  }\n\n  private chipRemove = async (id: number) => {\n    const addresses = this.addresses.filter((_item, i: number) => i !== id);\n    this.addresses = [];\n    await 0;\n    this.addresses = addresses;\n    this.isValidList();\n    this.onChanged(this.addresses);\n    if (!this.addresses.length) {\n      this.handleFocusout();\n    }\n  };\n\n  handleFocusin = () => {\n    this.focused = true;\n  };\n\n  handleFocusout = () => {\n    if (this.inputValue) {\n      this.resolveInput();\n    } else if (this.value !== '') {\n      this.focused = true;\n    } else {\n      this.focused = false;\n    }\n  };\n\n  keydown = (e: KeyboardEvent) => {\n    // input completion keys\n    const completionKeys = [' ', ',', 'Tab', 'Enter'];\n    if (completionKeys.includes(e.key) && this.inputValue.length) {\n      e.preventDefault();\n      this.resolveInput();\n    }\n  };\n\n  resolveInput = () => {\n    const address = this.inputValue.toLowerCase();\n    const isValid = isValidEmail(address);\n    const name = this.lookup(address);\n    this.addresses = [...this.addresses, { address, isValid, name }];\n    this.inputValue = '';\n    this.isValidList();\n    this.onChanged(this.addresses);\n  };\n\n  input = (e: InputEvent) => {\n    const { value } = e.target as HTMLInputElement;\n    this.inputValue = value;\n  };\n\n  clear = () => {\n    this.addresses = [];\n    this.inputValue = '';\n    this.value = '';\n    this.error = false;\n    this.onChanged(this.addresses);\n    this.handleFocusout();\n  };\n\n  /** @private */\n  formResetCallback() {\n    this.reset();\n  }\n\n  /**\n   * Reset the text field to its default value.\n   */\n  reset() {\n    this.clear();\n    this.value = this.getAttribute('value') ?? '';\n  }\n\n  isValidList = () => {\n    this.error = this.addresses.some((item: EmailListItem) => !item.isValid);\n    this.internals.setValidity(\n      {\n        badInput: this.error,\n      },\n      this.error ? this.errorText : '',\n      this.emailInput\n    );\n  };\n\n  static labelText = (item: EmailListItem) => {\n    const address = item.isValid ? item.address : `${item.address}!`;\n    return item.name ? item.name : address;\n  };\n\n  protected override updated(changedProperties: PropertyValues) {\n    if (changedProperties.has('addresses')) {\n      this.value = this.addresses.map(item => item.address).join(', ');\n    }\n    this.internals.setFormValue(this.value);\n  }\n\n  override focus() {\n    this.emailInput.focus();\n  }\n\n  render() {\n    const classes = {\n      disabled: this.disabled,\n      error: !this.disabled && this.error,\n    };\n\n    return html`\n      <ix-field\n        class=\"${classMap(classes)}\"\n        ?focused=${this.focused}\n        ?disabled=${this.disabled}\n        ?required=${this.required}\n        label=${this.label}\n        ?error=${this.error}\n        error-text=${this.errorText}\n        @focusin=${this.handleFocusin}\n        @focusout=${this.handleFocusout}\n      >\n        <ix-chip-set>\n          ${this.addresses.map(\n            (item, id: number) => html`<span\n              ><ix-chip\n                @remove=${() => this.chipRemove(id)}\n                label=${IxEmailList.labelText(item)}\n                class=${item.isValid ? '' : 'error'}\n                appearance=\"input\"\n                removable\n                remove-only\n              ></ix-chip\n            ></span>`\n          )}\n          <input\n            id=\"email-input\"\n            @keydown=${this.keydown}\n            @input=${this.input}\n            .value=${this.inputValue}\n            class=\"flex-fill\"\n            type=\"text\"\n          />\n        </ix-chip-set>\n        <slot name=\"end\" slot=\"end\">\n          ${this.addresses.length\n            ? html`<ix-icon-button\n                class=\"clear-icon\"\n                @click=${this.clear}\n                icon=\"close\"\n                aria-label=\"clear\"\n              ></ix-icon-button>`\n            : nothing}\n        </slot>\n      </ix-field>\n    `;\n  }\n}\n"]}

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,2 @@
+export { IxEmailList } from './IxEmailList.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { IxEmailList } from './IxEmailList.js';\n"]}

package/dist/ix-email-list-styles.d.ts

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

package/dist/ix-email-list-styles.js

@@ -0,0 +1,47 @@
+import { css } from 'lit';
+export const IxEmailListStyles = css `
+  :host {
+    display: block;
+  }
+  ix-field {
+    display: block;
+    --md-outlined-field-label-text-color: var(--md-sys-text-color-primary);
+    --md-outlined-field-outline-color: var(--md-outlined-field-outline-color);
+  }
+  ix-field label {
+    display: none;
+  }
+  ix-chip.error {
+    --md-input-chip-label-text-color: red;
+    --md-input-chip-hover-label-text-color: red;
+  }
+  .flex-fill {
+    flex: 1;
+  }
+  input {
+    border: none;
+    background: transparent;
+    outline: none;
+    min-width: 3rem;
+    font-size: var(--md-outlined-text-field-input-text-font, 16px);
+    line-height: var(--md-outlined-text-field-input-text-font, 24px);
+  }
+  ix-chip-set {
+    min-height: var(--_content-line-height);
+  }
+  ix-icon-button {
+    --md-icon-button-icon-color: var(--md-sys-text-color-secondary);
+    --md-icon-button-hover-icon-color: var(--md-sys-text-color-secondary);
+    --md-icon-button-hover-state-layer-color: var(
+      --md-sys-text-color-secondary
+    );
+    --md-icon-button-pressed-icon-color: var(--md-sys-text-color-secondary);
+    --md-icon-button-pressed-state-layer-color: var(
+      --md-sys-text-color-secondary
+    );
+  }
+  .clear-icon {
+    margin-right: 0.5rem;
+  }
+`;
+//# sourceMappingURL=ix-email-list-styles.js.map

package/dist/ix-email-list-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-email-list-styles.js","sourceRoot":"","sources":["../src/ix-email-list-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CnC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxEmailListStyles = css`\n  :host {\n    display: block;\n  }\n  ix-field {\n    display: block;\n    --md-outlined-field-label-text-color: var(--md-sys-text-color-primary);\n    --md-outlined-field-outline-color: var(--md-outlined-field-outline-color);\n  }\n  ix-field label {\n    display: none;\n  }\n  ix-chip.error {\n    --md-input-chip-label-text-color: red;\n    --md-input-chip-hover-label-text-color: red;\n  }\n  .flex-fill {\n    flex: 1;\n  }\n  input {\n    border: none;\n    background: transparent;\n    outline: none;\n    min-width: 3rem;\n    font-size: var(--md-outlined-text-field-input-text-font, 16px);\n    line-height: var(--md-outlined-text-field-input-text-font, 24px);\n  }\n  ix-chip-set {\n    min-height: var(--_content-line-height);\n  }\n  ix-icon-button {\n    --md-icon-button-icon-color: var(--md-sys-text-color-secondary);\n    --md-icon-button-hover-icon-color: var(--md-sys-text-color-secondary);\n    --md-icon-button-hover-state-layer-color: var(\n      --md-sys-text-color-secondary\n    );\n    --md-icon-button-pressed-icon-color: var(--md-sys-text-color-secondary);\n    --md-icon-button-pressed-state-layer-color: var(\n      --md-sys-text-color-secondary\n    );\n  }\n  .clear-icon {\n    margin-right: 0.5rem;\n  }\n`;\n"]}

package/dist/ix-email-list.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ix-email-list.js

@@ -0,0 +1,3 @@
+import { IxEmailList } from './IxEmailList.js';
+window.customElements.define('ix-email-list', IxEmailList);
+//# sourceMappingURL=ix-email-list.js.map

package/dist/ix-email-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-email-list.js","sourceRoot":"","sources":["../src/ix-email-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC","sourcesContent":["import { IxEmailList } from './IxEmailList.js';\n\nwindow.customElements.define('ix-email-list', IxEmailList);\n"]}

package/dist/utils/email-validation.d.ts

@@ -0,0 +1 @@
+export declare const isValidEmail: (email: string) => boolean;

package/dist/utils/email-validation.js

@@ -0,0 +1,10 @@
+// https://fjolt.com/article/javascript-how-to-validate-an-email
+/*
+ Email validation regex RFC5322, successor to RFC822 is much shorter and easier to use.
+ The function below will validate any email put into it:
+*/
+export const isValidEmail = (email) => {
+    const regex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    return regex.test(email);
+};
+//# sourceMappingURL=email-validation.js.map

package/dist/utils/email-validation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"email-validation.js","sourceRoot":"","sources":["../../src/utils/email-validation.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAChE;;;EAGE;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE;IAC5C,MAAM,KAAK,GACT,uJAAuJ,CAAC;IAC1J,OAAO,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AAC3B,CAAC,CAAC","sourcesContent":["// https://fjolt.com/article/javascript-how-to-validate-an-email\n/*\n Email validation regex RFC5322, successor to RFC822 is much shorter and easier to use. \n The function below will validate any email put into it:\n*/\n\nexport const isValidEmail = (email: string) => {\n  const regex =\n    /^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n  return regex.test(email);\n};\n"]}

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "@digital-realty/ix-email-list",
+  "description": "Webcomponent ix-email-list following open-wc recommendations",
+  "license": "MIT",
+  "author": "Digital Realty",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./ix-email-list.js": "./dist/ix-email-list.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "analyze": "cem analyze --litelement",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc && npm run analyze -- --exclude dist",
+    "prepublish": "tsc && npm run analyze -- --exclude dist",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "test": "tsc && wtr --coverage",
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
+  },
+  "dependencies": {
+    "@digital-realty/ix-chip": "^1.0.4",
+    "@digital-realty/ix-field": "^0.0.3",
+    "@digital-realty/ix-icon-button": "^1.0.15",
+    "@digital-realty/theme": "^1.0.6",
+    "@material/web": "^1.0.0",
+    "@web/test-runner-commands": "^0.9.0",
+    "lit": "^2.0.2"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.4.17",
+    "@open-wc/eslint-config": "^9.2.1",
+    "@open-wc/testing": "^3.1.6",
+    "@typescript-eslint/eslint-plugin": "^5.48.0",
+    "@typescript-eslint/parser": "^5.48.0",
+    "@web/dev-server": "^0.1.34",
+    "@web/test-runner": "^0.14.0",
+    "concurrently": "^5.3.0",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.2"
+  },
+  "customElements": "custom-elements.json",
+  "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "extends": [
+      "@open-wc",
+      "prettier"
+    ],
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "rules": {
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error"
+      ],
+      "import/no-unresolved": "off",
+      "import/extensions": [
+        "error",
+        "always",
+        {
+          "ignorePackages": true
+        }
+      ]
+    }
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "avoid"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "files": [
+    "/dist",
+    "!/dist/test",
+    "package.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "gitHead": "ab9691521eda862a6136ca9c967a09b518dcc516"
+}