@aquera/nile-elements 0.1.36-beta-1.3 → 0.1.36-beta-1.4

package/dist/src/nile-rich-text-editor/nile-rich-text-editor.d.ts

@@ -1,10 +0,0 @@
-import { LitElement } from 'lit';
-export declare class NileRichTextEditor extends LitElement {
-    theme: string;
-    placeholder: string;
-    modules: any;
-    private quill?;
-    static styles: import("lit").CSSResult;
-    render(): import("lit-html").TemplateResult<1>;
-    firstUpdated(): void;
-}

package/dist/src/nile-rich-text-editor/nile-rich-text-editor.js

@@ -1,62 +0,0 @@
-import { __decorate } from "tslib";
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { QuillLibrary } from './quill/quill';
-let NileRichTextEditor = class NileRichTextEditor extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.theme = 'snow';
-        this.placeholder = 'Compose an epic...';
-        this.modules = {
-            toolbar: [['bold', 'italic', 'underline'], ['link']]
-        };
-    }
-    render() {
-        return html `
-      <link
-        rel="stylesheet"
-        href="./quill/quill.snow.css"
-      />
-      <div id="editor-container"></div>
-    `;
-    }
-    firstUpdated() {
-        const container = this.shadowRoot?.getElementById('editor-container');
-        if (!container)
-            return;
-        QuillLibrary.load().then(Quill => {
-            this.quill = new Quill(container, {
-                theme: this.theme,
-                placeholder: this.placeholder,
-                modules: this.modules,
-            });
-        }).catch(err => {
-            console.error('Failed to load Quill:', err);
-        });
-    }
-};
-NileRichTextEditor.styles = css `
-    :host {
-      display: block;
-      width: 100%;
-      height: 300px;
-    }
-
-    #editor-container {
-      height: 100%;
-    }
-  `;
-__decorate([
-    property({ type: String })
-], NileRichTextEditor.prototype, "theme", void 0);
-__decorate([
-    property({ type: String })
-], NileRichTextEditor.prototype, "placeholder", void 0);
-__decorate([
-    property({ type: Object })
-], NileRichTextEditor.prototype, "modules", void 0);
-NileRichTextEditor = __decorate([
-    customElement('nile-rich-text-editor')
-], NileRichTextEditor);
-export { NileRichTextEditor };
-//# sourceMappingURL=nile-rich-text-editor.js.map

package/dist/src/nile-rich-text-editor/nile-rich-text-editor.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nile-rich-text-editor.js","sourceRoot":"","sources":["../../../src/nile-rich-text-editor/nile-rich-text-editor.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAGtC,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QACuB,UAAK,GAAG,MAAM,CAAC;QACf,gBAAW,GAAG,oBAAoB,CAAC;QACnC,YAAO,GAAQ;YACzC,OAAO,EAAE,CAAC,CAAC,MAAM,EAAE,QAAQ,EAAE,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;SACrD,CAAC;IAwCJ,CAAC;IAxBC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;KAMV,CAAC;IACJ,CAAC;IAED,YAAY;QACV,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,kBAAkB,CAAC,CAAC;QACtE,IAAI,CAAC,SAAS;YAAE,OAAO;QAEvB,YAAY,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;YAC/B,IAAI,CAAC,KAAK,GAAG,IAAI,KAAK,CAAC,SAAS,EAAE;gBAChC,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,WAAW,EAAE,IAAI,CAAC,WAAW;gBAC7B,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB,CAAC,CAAC;QACL,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;YACb,OAAO,CAAC,KAAK,CAAC,uBAAuB,EAAE,GAAG,CAAC,CAAC;QAC9C,CAAC,CAAC,CAAC;IACL,CAAC;;AAnCM,yBAAM,GAAG,GAAG,CAAA;;;;;;;;;;GAUlB,AAVY,CAUX;AAlB0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAgB;AACf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAoC;AACnC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAEzB;AALS,kBAAkB;IAD9B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,kBAAkB,CA6C9B","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { QuillLibrary } from './quill/quill';\n\n@customElement('nile-rich-text-editor')\nexport class NileRichTextEditor extends LitElement {\n  @property({ type: String }) theme = 'snow';\n  @property({ type: String }) placeholder = 'Compose an epic...';\n  @property({ type: Object }) modules: any = {\n    toolbar: [['bold', 'italic', 'underline'], ['link']]\n  };\n\n  private quill?: any;\n\n  static styles = css`\n    :host {\n      display: block;\n      width: 100%;\n      height: 300px;\n    }\n\n    #editor-container {\n      height: 100%;\n    }\n  `;\n\n  render() {\n    return html`\n      <link\n        rel=\"stylesheet\"\n        href=\"./quill/quill.snow.css\"\n      />\n      <div id=\"editor-container\"></div>\n    `;\n  }\n\n  firstUpdated() {\n    const container = this.shadowRoot?.getElementById('editor-container');\n    if (!container) return;\n\n    QuillLibrary.load().then(Quill => {\n      this.quill = new Quill(container, {\n        theme: this.theme,\n        placeholder: this.placeholder,\n        modules: this.modules,\n      });\n    }).catch(err => {\n      console.error('Failed to load Quill:', err);\n    });\n  }\n}\n"]}

package/dist/src/nile-rich-text-editor/nile-rich-text-editor.template.d.ts

@@ -1,3 +0,0 @@
-/**
- * Template File for nile-rich-text-editor component
- */ 

package/dist/src/nile-rich-text-editor/nile-rich-text-editor.template.js

@@ -1,5 +0,0 @@
-"use strict";
-/**
- * Template File for nile-rich-text-editor component
- */ 
-//# sourceMappingURL=nile-rich-text-editor.template.js.map

package/dist/src/nile-rich-text-editor/nile-rich-text-editor.template.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nile-rich-text-editor.template.js","sourceRoot":"","sources":["../../../src/nile-rich-text-editor/nile-rich-text-editor.template.ts"],"names":[],"mappings":";AAAA;;GAEG","sourcesContent":["/**\n * Template File for nile-rich-text-editor component\n */"]}

package/dist/src/nile-rich-text-editor/nile-rich-text-editor.test.d.ts

@@ -1,7 +0,0 @@
-/**
- * Copyright Aquera Inc 2025
- *
- * This source code is licensed under the BSD-3-Clause license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import './nile-rich-text-editor';

package/dist/src/nile-rich-text-editor/nile-rich-text-editor.test.js

@@ -1,30 +0,0 @@
-/**
- * Copyright Aquera Inc 2025
- *
- * This source code is licensed under the BSD-3-Clause license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import { fixture, assert, expect, html } from '@open-wc/testing';
-import './nile-rich-text-editor'; // Just import to register the element
-describe('<nile-rich-text-editor>', () => {
-    let element;
-    beforeEach(async () => {
-        element = await fixture(html `<nile-rich-text-editor></nile-rich-text-editor>`);
-    });
-    it('passes accessibility test', async () => {
-        await expect(element).to.be.accessible();
-    });
-    it('renders with the correct tag name', () => {
-        expect(element.tagName.toLowerCase()).to.equal('nile-rich-text-editor');
-    });
-    it('renders with slot content when provided', async () => {
-        const testContent = 'Test Content';
-        element = await fixture(html `<nile-rich-text-editor>${testContent}</nile-rich-text-editor>`);
-        const slot = element.shadowRoot.querySelector('slot');
-        assert.exists(slot, 'Slot should exist');
-        const assignedNodes = slot.assignedNodes({ flatten: true });
-        expect(assignedNodes.length).to.be.greaterThan(0);
-        expect(assignedNodes[0].textContent?.trim()).to.equal(testContent);
-    });
-});
-//# sourceMappingURL=nile-rich-text-editor.test.js.map

package/dist/src/nile-rich-text-editor/nile-rich-text-editor.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nile-rich-text-editor.test.js","sourceRoot":"","sources":["../../../src/nile-rich-text-editor/nile-rich-text-editor.test.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,yBAAyB,CAAC,CAAC,sCAAsC;AAExE,QAAQ,CAAC,yBAAyB,EAAE,GAAG,EAAE;IACvC,IAAI,OAAoB,CAAC;IAEzB,UAAU,CAAC,KAAK,IAAI,EAAE;QACpB,OAAO,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA,iDAAiD,CAAC,CAAC;IACjF,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;QACzC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;IAC3C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,GAAG,EAAE;QAC3C,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAC;IAC1E,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;QACvD,MAAM,WAAW,GAAG,cAAc,CAAC;QACnC,OAAO,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA,0BAA0B,WAAW,0BAA0B,CAAC,CAAC;QAE7F,MAAM,IAAI,GAAI,OAAO,CAAC,UAAW,CAAC,aAAa,CAAC,MAAM,CAAqB,CAAC;QAC5E,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,mBAAmB,CAAC,CAAC;QAEzC,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC5D,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QAClD,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IACrE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n \nimport { fixture, assert, expect, html } from '@open-wc/testing';\nimport './nile-rich-text-editor'; // Just import to register the element\n\ndescribe('<nile-rich-text-editor>', () => {\n  let element: HTMLElement;\n\n  beforeEach(async () => {\n    element = await fixture(html`<nile-rich-text-editor></nile-rich-text-editor>`);\n  });\n\n  it('passes accessibility test', async () => {\n    await expect(element).to.be.accessible();\n  });\n\n  it('renders with the correct tag name', () => {\n    expect(element.tagName.toLowerCase()).to.equal('nile-rich-text-editor');\n  });\n\n  it('renders with slot content when provided', async () => {\n    const testContent = 'Test Content';\n    element = await fixture(html`<nile-rich-text-editor>${testContent}</nile-rich-text-editor>`);\n    \n    const slot = (element.shadowRoot!.querySelector('slot') as HTMLSlotElement);\n    assert.exists(slot, 'Slot should exist');\n\n    const assignedNodes = slot.assignedNodes({ flatten: true });\n    expect(assignedNodes.length).to.be.greaterThan(0);\n    expect(assignedNodes[0].textContent?.trim()).to.equal(testContent);\n  });\n});"]}

package/dist/src/nile-rich-text-editor/quill/quill.d.ts

@@ -1,8 +0,0 @@
-declare global {
-    interface Window {
-        Quill: any;
-    }
-}
-export declare const QuillLibrary: {
-    load: () => Promise<any>;
-};

package/dist/src/nile-rich-text-editor/quill/quill.js

@@ -1,19 +0,0 @@
-export const QuillLibrary = {
-    load: () => {
-        if (window.Quill)
-            return Promise.resolve(window.Quill);
-        return new Promise((resolve, reject) => {
-            const script = document.createElement('script');
-            script.src = './quill.js';
-            script.onload = () => {
-                if (window.Quill)
-                    resolve(window.Quill);
-                else
-                    reject(new Error('Quill did not initialize correctly'));
-            };
-            script.onerror = () => reject(new Error('Failed to load Quill'));
-            document.head.appendChild(script);
-        });
-    }
-};
-//# sourceMappingURL=quill.js.map

package/dist/src/nile-rich-text-editor/quill/quill.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"quill.js","sourceRoot":"","sources":["../../../../src/nile-rich-text-editor/quill/quill.ts"],"names":[],"mappings":"AAOA,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,GAAiB,EAAE;QACvB,IAAI,MAAM,CAAC,KAAK;YAAE,OAAO,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAEvD,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;YACrC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAChD,MAAM,CAAC,GAAG,GAAG,YAAY,CAAC;YAC1B,MAAM,CAAC,MAAM,GAAG,GAAG,EAAE;gBACnB,IAAI,MAAM,CAAC,KAAK;oBAAE,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;;oBACnC,MAAM,CAAC,IAAI,KAAK,CAAC,oCAAoC,CAAC,CAAC,CAAC;YAC/D,CAAC,CAAC;YACF,MAAM,CAAC,OAAO,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC,CAAC;YACjE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QACpC,CAAC,CAAC,CAAC;IACL,CAAC;CACF,CAAC","sourcesContent":["\ndeclare global {\n  interface Window {\n    Quill: any;\n  }\n}\n\nexport const QuillLibrary = {\n  load: (): Promise<any> => {\n    if (window.Quill) return Promise.resolve(window.Quill);\n\n    return new Promise((resolve, reject) => {\n      const script = document.createElement('script');\n      script.src = './quill.js';\n      script.onload = () => {\n        if (window.Quill) resolve(window.Quill);\n        else reject(new Error('Quill did not initialize correctly'));\n      };\n      script.onerror = () => reject(new Error('Failed to load Quill'));\n      document.head.appendChild(script);\n    });\n  }\n};\n"]}

package/dist/src/nile-rich-text-editor/sub-components/nile-rich-text-editor.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=nile-rich-text-editor.js.map

package/dist/src/nile-rich-text-editor/sub-components/nile-rich-text-editor.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nile-rich-text-editor.js","sourceRoot":"","sources":["../../../../src/nile-rich-text-editor/sub-components/nile-rich-text-editor.ts"],"names":[],"mappings":"","sourcesContent":[""]}

package/dist/src/nile-rich-text-editor/types/index.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=index.js.map

package/dist/src/nile-rich-text-editor/types/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/nile-rich-text-editor/types/index.ts"],"names":[],"mappings":"","sourcesContent":[""]}

package/dist/src/nile-rich-text-editor/types/rich-text-editor.type.d.ts

@@ -1,3 +0,0 @@
-/**
- * Types for nile-rich-text-editor component
- */ 

package/dist/src/nile-rich-text-editor/types/rich-text-editor.type.js

@@ -1,5 +0,0 @@
-"use strict";
-/**
- * Types for nile-rich-text-editor component
- */ 
-//# sourceMappingURL=rich-text-editor.type.js.map

package/dist/src/nile-rich-text-editor/types/rich-text-editor.type.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"rich-text-editor.type.js","sourceRoot":"","sources":["../../../../src/nile-rich-text-editor/types/rich-text-editor.type.ts"],"names":[],"mappings":";AAAA;;GAEG","sourcesContent":["/**\n * Types for nile-rich-text-editor component\n */"]}

package/dist/src/nile-rich-text-editor/utils/nile-rich-text-editor.utils.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=nile-rich-text-editor.utils.js.map

package/dist/src/nile-rich-text-editor/utils/nile-rich-text-editor.utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nile-rich-text-editor.utils.js","sourceRoot":"","sources":["../../../../src/nile-rich-text-editor/utils/nile-rich-text-editor.utils.ts"],"names":[],"mappings":"","sourcesContent":[""]}

package/plop-templates/lit/lit.template.ts.hbs

@@ -1,3 +0,0 @@
-/**
- * Template File for nile-{{name}} component
- */

package/plop-templates/lit/lit.test.ts.hbs

@@ -1,38 +0,0 @@
-/**
- * Copyright Aquera Inc 2025
- *
- * This source code is licensed under the BSD-3-Clause license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
- 
-import { fixture, assert, expect, html } from '@open-wc/testing';
-import './nile-{{name}}'; // Just import to register the element
-
-describe('<nile-{{name}}>', () => {
-  let element: HTMLElement;
-
-  beforeEach(async () => {
-    element = await fixture(html`<nile-{{name}}></nile-{{name}}>`);
-  });
-
-  it('passes accessibility test', async () => {
-    await expect(element).to.be.accessible();
-  });
-
-  it('renders with the correct tag name', () => {
-    expect(element.tagName.toLowerCase()).to.equal('nile-{{name}}');
-  });
-
-  it('renders with slot content when provided', async () => {
-    const testContent = 'Test Content';
-    element = await fixture(html`<nile-{{name}}>${testContent}</nile-{{name}}>`);
-    
-    const slot = (element.shadowRoot!.querySelector('slot') as HTMLSlotElement);
-    assert.exists(slot, 'Slot should exist');
-
-    const assignedNodes = slot.assignedNodes({ flatten: true });
-    expect(assignedNodes.length).to.be.greaterThan(0);
-    expect(assignedNodes[0].textContent?.trim()).to.equal(testContent);
-  });
-});

package/plop-templates/lit/sub-components/index.ts.hbs

@@ -1,4 +0,0 @@
-/**
- * Sub component  for nile-{{name}} component. 
- * Follows the same parent folder structure.
- */

package/plop-templates/lit/types/type.ts.hbs

@@ -1,3 +0,0 @@
-/**
- * Types for nile-{{name}} component
- */

package/plop-templates/lit/utils/lit.utils.ts.hbs

@@ -1,4 +0,0 @@
-/**
- * Utility functions for nile-{{name}} component
- *  
- */

package/src/nile-filter-chip/index.ts

@@ -1 +0,0 @@
-export { NileFilterChip } from './nile-filter-chip';

package/src/nile-filter-chip/nile-filter-chip.css.ts

@@ -1,138 +0,0 @@
-/**
-* Copyright Aquera Inc 2023
-*
-* This source code is licensed under the BSD-3-Clause license found in the
-* LICENSE file in the root directory of this source tree.
-*/
-
-import {css} from 'lit';
-
-/**
- * FilterChip CSS
- */
-
-export const styles = css`
-
-
-  .filter-chips {
-    display: flex;
-    align-items: center;
-  }
-
-
-  .chip {
-    display: inline-flex;
-    align-items: center;
-    height: 30px;
-    padding: 8px;
-    border: 1px solid var(--nile-filter-chip-chip-border-color-stroke);
-    border-radius: 4px;
-    font-size: 14px;
-    background-color: var(--nile-filter-chip-background-default);
-    color: var(--nile-filter-chip-text-default);
-    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
-    cursor: pointer;
-    box-sizing: border-box;
-  }
-
-  .chip:hover {
-    background-color: var(--nile-filter-chip-hover-background);
-  }
- .chip:active {
-  background-color: var(--nile-filter-chip-active-background);
-  border-color: var(--nile-filter-chip-active-border-color-stroke);
-}
-:host([active]) .chip {
-  background-color: var(--nile-filter-chip-active-background);
-  border-color: var(--nile-filter-chip-active-border-color-stroke);
-}
-
-
-  .icon {
-    color: var(--nile-filter-chip-icon-color-default);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    vertical-align: middle;
-    position: relative;
-    top: 12px;
-  }
-
-  .label {
-    font-weight: 500;
-    color: var(--nile-filter-chip-label-color-default);
-  }
-
-  nile-badge::part(base) {
-    width: auto;
-    height: 14px;
-    border-radius: 100px;
-    padding: 6px;
-    gap: 10px;
-    font-size: 8px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 1;
-  }
-
-  .chip-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-  }
-
-  .clear-all-container {
-    margin-left: 18px;
-    white-space: nowrap;
-    cursor: pointer;
-  }
-
-
- .value {
-  color: var(--nile-filter-chip-values-color-default);
-  display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 140px;
-  vertical-align: bottom;
-}
-
-
-  .close-icon {
-    color: var(--nile-filter-chip-close-icon-color-default);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    border-radius: 50%;
-    transition: background-color 0.2s;
-  }
-
-  .close-icon:hover {
-    background-color: var(--nile-filter-chip-close-icon-hover-background);
-    color: var(--nile-filter-chip-close-icon-hover-color);
-  }
-
-.label-wrapper {
-  margin-right: 4px;
-}
-
-::slotted([slot="icon"]) {
-  margin-right: 6px;
-}
-
-.value-wrapper {
-  margin-right: 4px; 
-}
-
-.badge-wrapper {
-  margin-right: 12px;  
-}
-
-`;
-
-export default [styles];
-
- 

package/src/nile-filter-chip/nile-filter-chip.test.ts

@@ -1,92 +0,0 @@
-import { fixture, expect, html, oneEvent } from '@open-wc/testing';
-import './nile-filter-chip';
-import { NileFilterChip } from './nile-filter-chip';
-
-describe('<nile-filter-chip>', () => {
-  afterEach(() => {
-    (NileFilterChip as any).activeChips = [];
-  });
-
-  it('registers and unregisters itself in activeChips', async () => {
-    const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip label="L" value="T"></nile-filter-chip>
-    `);
-    expect((NileFilterChip as any).activeChips).to.include(el);
-    el.remove();
-    await el.updateComplete;
-    expect((NileFilterChip as any).activeChips).to.not.include(el);
-  });
-
-  it('renders fallback label and value', async () => {
-    const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip label="MyLabel" value="MyText"></nile-filter-chip>
-    `);
-    const label = el.shadowRoot!.querySelector('.label')! as HTMLElement;
-    const value = el.shadowRoot!.querySelector('.value')! as HTMLElement;
-    expect(label.textContent).to.equal('MyLabel:');
-    expect(value.textContent!.trim()).to.equal('MyText');
-  });
-
-  it('renders slotted label and value over fallback', async () => {
-    const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip>
-        <span slot="label">SLOT-LBL</span>
-        <span slot="value">SLOT-VAL</span>
-      </nile-filter-chip>
-    `);
-    const slottedLabel = el.querySelector('[slot="label"]')! as HTMLElement;
-    const slottedValue = el.querySelector('[slot="value"]')! as HTMLElement;
-    expect(slottedLabel.textContent).to.equal('SLOT-LBL');
-    expect(slottedValue.textContent).to.equal('SLOT-VAL');
-  });
-
-  it('renders an icon when the `icon` property is set', async () => {
-    const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip icon="★" label="L" value="T"></nile-filter-chip>
-    `);
-    const iconSpan = el.shadowRoot!.querySelector('.icon')! as HTMLElement;
-    expect(iconSpan).to.exist;
-    expect(iconSpan.textContent).to.equal('★');
-  });
-
-  it('does not render a badge when viewMoreCount is zero', async () => {
-    const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip viewMoreCount="0" label="L" value="T"></nile-filter-chip>
-    `);
-    expect(el.shadowRoot!.querySelector('nile-badge')).to.be.null;
-  });
-
-  it('renders a +badge when viewMoreCount > 0', async () => {
-    const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip viewMoreCount="5" label="L" value="T"></nile-filter-chip>
-    `);
-    const badge = el.shadowRoot!.querySelector('nile-badge')! as HTMLElement;
-    expect(badge).to.exist;
-    expect(badge.textContent).to.contain('+5');
-  });
-
-
-
-  it('dispatches `nile-click` on chip click', async () => {
-    const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip label="L" value="T"></nile-filter-chip>
-    `);
-    const chip = el.shadowRoot!.querySelector('.chip')! as HTMLElement;
-    setTimeout(() => chip.click());
-    const ev = await oneEvent(el, 'nile-click');
-    expect(ev.detail).to.deep.equal({ value: 'T', viewMoreCount: 0 });
-  });
-
-  it('dispatches `nile-close` on close icon click and removes itself', async () => {
-    const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip closable viewMoreCount="2" value="TT"></nile-filter-chip>
-    `);
-    const closeIcon = el.shadowRoot!.querySelector('.close-icon')! as HTMLElement;
-    setTimeout(() => closeIcon.click());
-    const ev = await oneEvent(el, 'nile-close');
-    expect(ev.detail).to.deep.equal({ value: 'TT', viewMoreCount: 2 });
-    expect(document.body.contains(el)).to.be.false;
-  });
-
- 
-});

package/src/nile-filter-chip/nile-filter-chip.ts

@@ -1,136 +0,0 @@
-import { LitElement, html, css, CSSResultArray, TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import NileElement from '../internal/nile-element';
-import { styles } from './nile-filter-chip.css';
-
-/**
- * Nile filter-chip component.
- *
- * @tag nile-filter-chip
- */
-@customElement('nile-filter-chip')
-export class NileFilterChip extends NileElement {
-  @property({ type: String }) label = '';
-  @property({ type: String }) value = '';
-  @property({ type: Number }) viewMoreCount: number = 0;
-  @property({ type: Boolean }) editable = false;
-  @property({ type: Boolean }) closable = false;
-  @property({ type: String }) icon = '';
-  @property({ type: String }) removeIcon = '';
-  @property({ type: Boolean, reflect: true }) active = false;
-
-
-  private static activeChips: NileFilterChip[] = [];
-
-  public static get styles(): CSSResultArray {
-    return [styles];
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.registerChip();
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.unregisterChip();
-  }
-
-  private registerChip() {
-    NileFilterChip.activeChips.push(this);
-  }
-
-  private unregisterChip() {
-    NileFilterChip.activeChips = NileFilterChip.activeChips.filter(
-      (chip) => chip !== this
-    );
-  }
-
-  private handleClose(event: Event) {
-    event.stopPropagation();
-    this.dispatchEvent(
-      new CustomEvent('nile-close', { detail: { value: this.value, viewMoreCount: this.viewMoreCount } })
-    );
-    this.remove();
-  }
-
-  private handleClick() {
-    this.dispatchEvent(
-      new CustomEvent('nile-click', { detail: { value: this.value, viewMoreCount: this.viewMoreCount } })
-    );
-  }
-
-  private getLabelSlot(): TemplateResult {
-    return html`
-    <span class="label-wrapper">
-      <slot name="label">
-        <span class="label" part="label">${this.label}:</span>
-      </slot>
-    </span>
-
-    `;
-  }
-
-  private getValueSlot(): TemplateResult {
-    return html`
-    <span class="value-wrapper">
-      <slot name="value">
-        <span class="value" part="value">${this.value}</span>
-      </slot>
-    </span>
-
-    `;
-  }
-
-  private getviewMoreCountSlot(): TemplateResult {
-    return html`
-      <slot name="suffix">
-        ${this.viewMoreCount
-          ? html`
-          <span class="badge-wrapper">
-              <nile-badge variant="primary" pilltype="pill-color">
-                +${this.viewMoreCount}
-              </nile-badge>
-          </span>
-
-            `
-          : html``}
-      </slot>
-    `;
-  }
-
-  private getCloseIconSlot(): TemplateResult {
-    return html`
-      ${this.closable
-        ? html`
-            <span class="close-icon" @click="${this.handleClose}">
-              <nile-icon name="${this.removeIcon || 'close'}" size="12"></nile-icon>
-            </span>
-          `
-        : html``}
-    `;
-  }
-
-  public render(): TemplateResult {
-    return html`
-      <div class="chip" @click="${this.handleClick}">
-        <slot name="icon">
-          ${this.icon ? html`<span class="icon">${this.icon}</span>` : html``}
-        </slot>
-        ${this.getLabelSlot()}
-        <slot name="content"></slot>
-        ${this.getValueSlot()}
-        ${this.getviewMoreCountSlot()}
-        ${this.getCloseIconSlot()}
-      </div>
-    `;
-  }
-}
-
-export default NileFilterChip;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-filter-chip': NileFilterChip;
-  }
-}