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

package/dist/src/nile-tab-group/nile-tab-group.test.js

@@ -0,0 +1,177 @@
+import { fixture, html, expect, elementUpdated, oneEvent } from '@open-wc/testing';
+import './nile-tab-group';
+import { NileTabGroup } from './nile-tab-group';
+import '../nile-tab/nile-tab';
+import '../nile-tab-panel/nile-tab-panel';
+import { repeat } from 'lit/directives/repeat.js';
+const wait = (ms = 50000) => new Promise(resolve => setTimeout(resolve, ms));
+describe('NileTabGroup with Tabs and Panels', () => {
+    it('should render the tabs correctly', async () => {
+        const el = await fixture(html `
+      <nile-tab-group no-track value="custom">
+        <nile-tab slot="nav" panel="general">General</nile-tab>
+        <nile-tab slot="nav" panel="custom">Custom</nile-tab>
+        <nile-tab slot="nav" panel="advanced">Advanced</nile-tab>
+        <nile-tab slot="nav" panel="disabled" disabled>Disabled</nile-tab>
+        <nile-tab-panel name="general">This is the general tab panel.</nile-tab-panel>
+        <nile-tab-panel name="custom">This is the custom tab panel.</nile-tab-panel>
+        <nile-tab-panel name="advanced">This is the advanced tab panel.</nile-tab-panel>
+        <nile-tab-panel name="disabled">This is a disabled tab panel.</nile-tab-panel>
+      </nile-tab-group>
+    `);
+        expect(el).to.be.instanceOf(NileTabGroup);
+        const tabs = document.querySelectorAll("nile-tab");
+        const panels = el.shadowRoot?.querySelectorAll('nile-tab-panel');
+        expect(tabs?.length).to.equal(4);
+    });
+    it('should set the active tab and show corresponding panel', async () => {
+        const el = await fixture(html `
+      <nile-tab-group value="custom">
+        <nile-tab slot="nav" panel="general">General</nile-tab>
+        <nile-tab slot="nav" panel="custom">Custom</nile-tab>
+        <nile-tab slot="nav" panel="advanced">Advanced</nile-tab>
+        <nile-tab-panel name="general">This is the general tab panel.</nile-tab-panel>
+        <nile-tab-panel name="custom">This is the custom tab panel.</nile-tab-panel>
+        <nile-tab-panel name="advanced">This is the advanced tab panel.</nile-tab-panel>
+      </nile-tab-group>
+    `);
+        // Validate active tab
+        const activeTab = document?.querySelector('nile-tab[panel="custom"]');
+        // Validate the visible panel
+        const activePanel = document?.querySelector('nile-tab-panel[name="custom"]');
+        expect(activeTab?.shadowRoot?.querySelector("div")?.className.includes('tab--active')).to.be.true;
+        expect(activePanel?.shadowRoot?.querySelector("slot")?.className.includes('tab-panel--active')).to.be.true;
+    });
+    it('should switch to the selected tab and display the corresponding panel', async () => {
+        const el = await fixture(html `
+      <nile-tab-group value="general">
+        <nile-tab slot="nav" panel="general">General</nile-tab>
+        <nile-tab slot="nav" panel="custom">Custom</nile-tab>
+        <nile-tab slot="nav" panel="advanced">Advanced</nile-tab>
+        <nile-tab-panel name="general">This is the general tab panel.</nile-tab-panel>
+        <nile-tab-panel name="custom">This is the custom tab panel.</nile-tab-panel>
+        <nile-tab-panel name="advanced">This is the advanced tab panel.</nile-tab-panel>
+      </nile-tab-group>
+    `);
+        const tabToClick = document?.querySelector('nile-tab[panel="custom"]');
+        tabToClick?.click();
+        await elementUpdated(el);
+        // Check that the clicked tab becomes active
+        expect(tabToClick?.shadowRoot?.querySelector("div")?.className.includes('tab--active')).to.be.true;
+        // Check that the correct panel is now visible
+        const activePanel = document?.querySelector('nile-tab-panel[name="custom"]');
+        expect(activePanel?.shadowRoot?.querySelector("slot")?.className.includes('tab-panel--active')).to.be.true;
+    });
+    it('should disable tab and prevent it from being selected', async () => {
+        const el = await fixture(html `
+      <nile-tab-group value="general">
+        <nile-tab slot="nav" panel="general">General</nile-tab>
+        <nile-tab slot="nav" panel="custom">Custom</nile-tab>
+        <nile-tab slot="nav" panel="advanced" disabled>Advanced</nile-tab>
+        <nile-tab-panel name="general">This is the general tab panel.</nile-tab-panel>
+        <nile-tab-panel name="custom">This is the custom tab panel.</nile-tab-panel>
+        <nile-tab-panel name="advanced">This is the advanced tab panel.</nile-tab-panel>
+      </nile-tab-group>
+    `);
+        const disabledTab = document?.querySelector('nile-tab[panel="advanced"]');
+        expect(disabledTab?.hasAttribute('disabled')).to.be.true;
+        // Try to click on the disabled tab
+        disabledTab?.click();
+        await elementUpdated(el);
+        // The disabled tab should not become active
+        expect(disabledTab?.shadowRoot?.querySelector("div")?.className.includes('tab--active')).to.be.false;
+        // The currently active tab and panel should remain unchanged
+        const activePanel = document.querySelector('nile-tab-panel[name="general"]');
+        expect(activePanel?.shadowRoot?.querySelector("slot")?.className.includes('tab-panel--active')).to.be.true;
+    });
+    it('should emit "nile-tab-show" event when a tab is shown', async () => {
+        const el = await fixture(html `
+      <nile-tab-group value="general">
+        <nile-tab slot="nav" panel="general">General</nile-tab>
+        <nile-tab slot="nav" panel="custom">Custom</nile-tab>
+        <nile-tab slot="nav" panel="advanced">Advanced</nile-tab>
+        <nile-tab-panel name="general">This is the general tab panel.</nile-tab-panel>
+        <nile-tab-panel name="custom">This is the custom tab panel.</nile-tab-panel>
+        <nile-tab-panel name="advanced">This is the advanced tab panel.</nile-tab-panel>
+      </nile-tab-group>
+    `);
+        const showEventPromise = oneEvent(el, 'nile-tab-show');
+        const tabToClick = document?.querySelector('nile-tab[panel="custom"]');
+        tabToClick?.click();
+        const showEvent = await showEventPromise;
+        expect(showEvent.detail.value).to.equal('custom');
+    });
+    it('should emit "nile-tab-hide" event when a tab is hidden', async () => {
+        const el = await fixture(html `
+      <nile-tab-group value="general">
+        <nile-tab slot="nav" panel="general">General</nile-tab>
+        <nile-tab slot="nav" panel="custom">Custom</nile-tab>
+        <nile-tab slot="nav" panel="advanced">Advanced</nile-tab>
+        <nile-tab-panel name="general">This is the general tab panel.</nile-tab-panel>
+        <nile-tab-panel name="custom">This is the custom tab panel.</nile-tab-panel>
+        <nile-tab-panel name="advanced">This is the advanced tab panel.</nile-tab-panel>
+      </nile-tab-group>
+    `);
+        const hideEventPromise = oneEvent(el, 'nile-tab-hide');
+        const tabToClick = document?.querySelector('nile-tab[panel="custom"]');
+        tabToClick?.click();
+        const hideEvent = await hideEventPromise;
+        expect(hideEvent.detail.value).to.equal('general');
+    });
+    it('Scroll to the end and start correctly', async () => {
+        const NumetOfTags = 40;
+        const el = await fixture(html `
+      <nile-tab-group no-track value="custom">
+				${repeat(Array.from({ length: NumetOfTags }, (_, index) => index + 1), el => el, (el) => html `<nile-tab slot="nav" panel="TabNumber${el}">TabNumber+${el}</nile-tab>`)}
+      </nile-tab-group>
+    `);
+        await elementUpdated(el);
+        el.hasScrollControls = true;
+        await elementUpdated(el);
+        const FirstElement = document.querySelector("nile-tab:first-child");
+        const LastElement = document.querySelector("nile-tab:last-child");
+        observer.observe(LastElement);
+        observer.observe(FirstElement);
+        await wait(1000);
+        expect(LastElement?.className.includes('visible')).to.be.false;
+        expect(FirstElement?.className.includes('visible')).to.be.true;
+        const scrollRightBtn = el.shadowRoot?.querySelector("nile-icon-button.tab-group__scroll-button.tab-group__scroll-button--start");
+        const scrollLeftBtn = el.shadowRoot?.querySelector("nile-icon-button.tab-group__scroll-button.tab-group__scroll-button--end");
+        scrollRightBtn?.click();
+        await elementUpdated(el);
+        await wait(1000);
+        expect(LastElement?.className.includes('visible')).to.be.true;
+        expect(FirstElement?.className.includes('visible')).to.be.false;
+        scrollLeftBtn?.click();
+        await elementUpdated(el);
+    });
+    it('Arrow key controls should work correctly', async () => {
+        const el = await fixture(html `
+      <nile-tab-group>
+				${repeat(Array.from({ length: 10 }, (_, index) => index + 1), el => el, (el) => html `<nile-tab closable slot="nav" cloa panel="TabNumber${el}">TabNumber+${el}</nile-tab>`)}
+      </nile-tab-group>
+    `);
+        await elementUpdated(el);
+        const FirstTab = document.querySelector("nile-tab:first-child");
+        const SecondTab = document.querySelector("nile-tab:nth-child(2)");
+        const LastTab = document.querySelector("nile-tab:last-child");
+        FirstTab?.dispatchEvent(arrowRightEvent);
+        await elementUpdated(el);
+        expect(FirstTab?.shadowRoot?.querySelector("div")?.className.includes('tab--active')).to.be.false;
+        expect(SecondTab?.shadowRoot?.querySelector("div")?.className.includes('tab--active')).to.be.true;
+        SecondTab?.dispatchEvent(arrowLeftEvent);
+        await elementUpdated(el);
+        expect(FirstTab?.shadowRoot?.querySelector("div")?.className.includes('tab--active')).to.be.true;
+        expect(SecondTab?.shadowRoot?.querySelector("div")?.className.includes('tab--active')).to.be.false;
+        FirstTab?.dispatchEvent(arrowLeftEvent);
+        await elementUpdated(el);
+        expect(FirstTab?.shadowRoot?.querySelector("div")?.className.includes('tab--active')).to.be.false;
+        expect(LastTab?.shadowRoot?.querySelector("div")?.className.includes('tab--active')).to.be.true;
+    });
+});
+const observer = new IntersectionObserver((entries, opts) => entries.forEach(entry => entry.target.classList.toggle('visible', entry.isIntersecting)), { root: null, threshold: .5 });
+const arrowLeftEvent = new KeyboardEvent('keydown', { key: 'ArrowLeft', code: 'ArrowLeft', keyCode: 37, which: 37, bubbles: true, cancelable: true });
+const arrowUpEvent = new KeyboardEvent('keydown', { key: 'ArrowUp', code: 'ArrowUp', keyCode: 38, which: 38, bubbles: true, cancelable: true });
+const arrowRightEvent = new KeyboardEvent('keydown', { key: 'ArrowRight', code: 'ArrowRight', keyCode: 39, which: 39, bubbles: true, cancelable: true });
+const arrowDownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', code: 'ArrowDown', keyCode: 40, which: 40, bubbles: true, cancelable: true });
+//# sourceMappingURL=nile-tab-group.test.js.map

package/dist/src/nile-tab-group/nile-tab-group.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-tab-group.test.js","sourceRoot":"","sources":["../../../src/nile-tab-group/nile-tab-group.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, html, expect, elementUpdated, oneEvent } from '@open-wc/testing';\nimport './nile-tab-group';\nimport Sinon from 'sinon';\nimport { NileTabGroup } from './nile-tab-group';\nimport { NileTab } from '../nile-tab/nile-tab';\nimport '../nile-tab/nile-tab';\nimport '../nile-tab-panel/nile-tab-panel';\nimport { NileTabPanel } from '../nile-tab-panel/nile-tab-panel';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { NileIconButton } from '../nile-icon-button';\n\nconst wait = (ms: number = 50000) => new Promise(resolve => setTimeout(resolve, ms))\ndescribe('NileTabGroup with Tabs and Panels', () => {\n\n  it('should render the tabs correctly', async () => {\n    const el = await fixture<NileTabGroup>(html`\n      <nile-tab-group no-track value=\"custom\">\n        <nile-tab slot=\"nav\" panel=\"general\">General</nile-tab>\n        <nile-tab slot=\"nav\" panel=\"custom\">Custom</nile-tab>\n        <nile-tab slot=\"nav\" panel=\"advanced\">Advanced</nile-tab>\n        <nile-tab slot=\"nav\" panel=\"disabled\" disabled>Disabled</nile-tab>\n        <nile-tab-panel name=\"general\">This is the general tab panel.</nile-tab-panel>\n        <nile-tab-panel name=\"custom\">This is the custom tab panel.</nile-tab-panel>\n        <nile-tab-panel name=\"advanced\">This is the advanced tab panel.</nile-tab-panel>\n        <nile-tab-panel name=\"disabled\">This is a disabled tab panel.</nile-tab-panel>\n      </nile-tab-group>\n    `);\n\n    expect(el).to.be.instanceOf(NileTabGroup);\n    const tabs = document.querySelectorAll(\"nile-tab\");\n    const panels = el.shadowRoot?.querySelectorAll('nile-tab-panel');\n\n    expect(tabs?.length).to.equal(4);\n  });\n\n  it('should set the active tab and show corresponding panel', async () => {\n    const el = await fixture<NileTabGroup>(html`\n      <nile-tab-group value=\"custom\">\n        <nile-tab slot=\"nav\" panel=\"general\">General</nile-tab>\n        <nile-tab slot=\"nav\" panel=\"custom\">Custom</nile-tab>\n        <nile-tab slot=\"nav\" panel=\"advanced\">Advanced</nile-tab>\n        <nile-tab-panel name=\"general\">This is the general tab panel.</nile-tab-panel>\n        <nile-tab-panel name=\"custom\">This is the custom tab panel.</nile-tab-panel>\n        <nile-tab-panel name=\"advanced\">This is the advanced tab panel.</nile-tab-panel>\n      </nile-tab-group>\n    `);\n\n    // Validate active tab\n    const activeTab = document?.querySelector('nile-tab[panel=\"custom\"]');\n    // Validate the visible panel\n    const activePanel = document?.querySelector('nile-tab-panel[name=\"custom\"]');\n    expect(activeTab?.shadowRoot?.querySelector(\"div\")?.className.includes('tab--active')).to.be.true;\n    expect(activePanel?.shadowRoot?.querySelector(\"slot\")?.className.includes('tab-panel--active')).to.be.true;\n  });\n\n  it('should switch to the selected tab and display the corresponding panel', async () => {\n    const el = await fixture<NileTabGroup>(html`\n      <nile-tab-group value=\"general\">\n        <nile-tab slot=\"nav\" panel=\"general\">General</nile-tab>\n        <nile-tab slot=\"nav\" panel=\"custom\">Custom</nile-tab>\n        <nile-tab slot=\"nav\" panel=\"advanced\">Advanced</nile-tab>\n        <nile-tab-panel name=\"general\">This is the general tab panel.</nile-tab-panel>\n        <nile-tab-panel name=\"custom\">This is the custom tab panel.</nile-tab-panel>\n        <nile-tab-panel name=\"advanced\">This is the advanced tab panel.</nile-tab-panel>\n      </nile-tab-group>\n    `);\n\n    const tabToClick = document?.querySelector<NileTab>('nile-tab[panel=\"custom\"]');\n    tabToClick?.click();\n    await elementUpdated(el);\n\n    // Check that the clicked tab becomes active\n    expect(tabToClick?.shadowRoot?.querySelector(\"div\")?.className.includes('tab--active')).to.be.true;\n\n    // Check that the correct panel is now visible\n    const activePanel = document?.querySelector('nile-tab-panel[name=\"custom\"]');\n    expect(activePanel?.shadowRoot?.querySelector(\"slot\")?.className.includes('tab-panel--active')).to.be.true;\n  });\n\n  it('should disable tab and prevent it from being selected', async () => {\n    const el = await fixture<NileTabGroup>(html`\n      <nile-tab-group value=\"general\">\n        <nile-tab slot=\"nav\" panel=\"general\">General</nile-tab>\n        <nile-tab slot=\"nav\" panel=\"custom\">Custom</nile-tab>\n        <nile-tab slot=\"nav\" panel=\"advanced\" disabled>Advanced</nile-tab>\n        <nile-tab-panel name=\"general\">This is the general tab panel.</nile-tab-panel>\n        <nile-tab-panel name=\"custom\">This is the custom tab panel.</nile-tab-panel>\n        <nile-tab-panel name=\"advanced\">This is the advanced tab panel.</nile-tab-panel>\n      </nile-tab-group>\n    `);\n\n    const disabledTab = document?.querySelector<NileTab>('nile-tab[panel=\"advanced\"]');\n    expect(disabledTab?.hasAttribute('disabled')).to.be.true;\n\n    // Try to click on the disabled tab\n    disabledTab?.click();\n    await elementUpdated(el);\n\n    // The disabled tab should not become active\n    expect(disabledTab?.shadowRoot?.querySelector(\"div\")?.className.includes('tab--active')).to.be.false;\n\n    // The currently active tab and panel should remain unchanged\n    const activePanel = document.querySelector('nile-tab-panel[name=\"general\"]');\n    expect(activePanel?.shadowRoot?.querySelector(\"slot\")?.className.includes('tab-panel--active')).to.be.true;\n  });\n\n  it('should emit \"nile-tab-show\" event when a tab is shown', async () => {\n    const el = await fixture<NileTabGroup>(html`\n      <nile-tab-group value=\"general\">\n        <nile-tab slot=\"nav\" panel=\"general\">General</nile-tab>\n        <nile-tab slot=\"nav\" panel=\"custom\">Custom</nile-tab>\n        <nile-tab slot=\"nav\" panel=\"advanced\">Advanced</nile-tab>\n        <nile-tab-panel name=\"general\">This is the general tab panel.</nile-tab-panel>\n        <nile-tab-panel name=\"custom\">This is the custom tab panel.</nile-tab-panel>\n        <nile-tab-panel name=\"advanced\">This is the advanced tab panel.</nile-tab-panel>\n      </nile-tab-group>\n    `);\n\n    const showEventPromise = oneEvent(el, 'nile-tab-show');\n\n    const tabToClick = document?.querySelector<NileTab>('nile-tab[panel=\"custom\"]');\n    tabToClick?.click();\n\n    const showEvent = await showEventPromise;\n    expect(showEvent.detail.value).to.equal('custom');\n  });\n\n  it('should emit \"nile-tab-hide\" event when a tab is hidden', async () => {\n    const el = await fixture<NileTabGroup>(html`\n      <nile-tab-group value=\"general\">\n        <nile-tab slot=\"nav\" panel=\"general\">General</nile-tab>\n        <nile-tab slot=\"nav\" panel=\"custom\">Custom</nile-tab>\n        <nile-tab slot=\"nav\" panel=\"advanced\">Advanced</nile-tab>\n        <nile-tab-panel name=\"general\">This is the general tab panel.</nile-tab-panel>\n        <nile-tab-panel name=\"custom\">This is the custom tab panel.</nile-tab-panel>\n        <nile-tab-panel name=\"advanced\">This is the advanced tab panel.</nile-tab-panel>\n      </nile-tab-group>\n    `);\n\n    const hideEventPromise = oneEvent(el, 'nile-tab-hide');\n\n    const tabToClick = document?.querySelector<NileTab>('nile-tab[panel=\"custom\"]');\n    tabToClick?.click();\n\n    const hideEvent = await hideEventPromise;\n    expect(hideEvent.detail.value).to.equal('general');\n  });\n\n  it('Scroll to the end and start correctly', async () => {\n    const NumetOfTags=40\n    const el = await fixture<NileTabGroup>(html`\n      <nile-tab-group no-track value=\"custom\">\n\t\t\t\t${repeat(Array.from({ length: NumetOfTags }, (_, index) => index + 1), el => el, (el) => html`<nile-tab slot=\"nav\" panel=\"TabNumber${el}\">TabNumber+${el}</nile-tab>`)}\n      </nile-tab-group>\n    `)\n    await elementUpdated(el);\n    el.hasScrollControls = true;\n    await elementUpdated(el);\n\n    const FirstElement=document.querySelector<NileTab>(\"nile-tab:first-child\");\n    const LastElement=document.querySelector<NileTab>(\"nile-tab:last-child\");\n    observer.observe(LastElement as Element)\n    observer.observe(FirstElement as Element)\n\n    await wait(1000)\n    expect(LastElement?.className.includes('visible')).to.be.false;\n    expect(FirstElement?.className.includes('visible')).to.be.true;\n    const scrollRightBtn=el.shadowRoot?.querySelector<NileIconButton>(\"nile-icon-button.tab-group__scroll-button.tab-group__scroll-button--start\")\n    const scrollLeftBtn=el.shadowRoot?.querySelector<NileIconButton>(\"nile-icon-button.tab-group__scroll-button.tab-group__scroll-button--end\")\n    scrollRightBtn?.click()\n    await elementUpdated(el);\n    await wait(1000)\n    expect(LastElement?.className.includes('visible')).to.be.true;\n    expect(FirstElement?.className.includes('visible')).to.be.false;\n    scrollLeftBtn?.click()\n    await elementUpdated(el);\n  });\n\n  it('Arrow key controls should work correctly', async () => {\n    const el = await fixture<NileTabGroup>(html`\n      <nile-tab-group>\n\t\t\t\t${repeat(Array.from({ length: 10 }, (_, index) => index + 1), el => el, (el) => html`<nile-tab closable slot=\"nav\" cloa panel=\"TabNumber${el}\">TabNumber+${el}</nile-tab>`)}\n      </nile-tab-group>\n    `)\n    await elementUpdated(el);\n    const FirstTab=document.querySelector<NileTab>(\"nile-tab:first-child\");\n    const SecondTab=document.querySelector<NileTab>(\"nile-tab:nth-child(2)\");\n    const LastTab=document.querySelector<NileTab>(\"nile-tab:last-child\");\n\n    FirstTab?.dispatchEvent(arrowRightEvent)\n    await elementUpdated(el);\n    expect(FirstTab?.shadowRoot?.querySelector(\"div\")?.className.includes('tab--active')).to.be.false;\n    expect(SecondTab?.shadowRoot?.querySelector(\"div\")?.className.includes('tab--active')).to.be.true;\n\n    SecondTab?.dispatchEvent(arrowLeftEvent)\n    await elementUpdated(el);\n    expect(FirstTab?.shadowRoot?.querySelector(\"div\")?.className.includes('tab--active')).to.be.true;\n    expect(SecondTab?.shadowRoot?.querySelector(\"div\")?.className.includes('tab--active')).to.be.false;\n\n    FirstTab?.dispatchEvent(arrowLeftEvent)\n    await elementUpdated(el);\n    expect(FirstTab?.shadowRoot?.querySelector(\"div\")?.className.includes('tab--active')).to.be.false;\n    expect(LastTab?.shadowRoot?.querySelector(\"div\")?.className.includes('tab--active')).to.be.true;\n  });\n});\n\nconst observer = new IntersectionObserver(\n  (entries, opts)=> entries.forEach(entry => entry.target.classList.toggle('visible', entry.isIntersecting)),\n  { root: null, threshold: .5}\n)\n\nconst arrowLeftEvent = new KeyboardEvent('keydown', { key: 'ArrowLeft', code: 'ArrowLeft', keyCode: 37, which: 37, bubbles: true, cancelable: true });\nconst arrowUpEvent = new KeyboardEvent('keydown', { key: 'ArrowUp', code: 'ArrowUp', keyCode: 38, which: 38, bubbles: true, cancelable: true });\nconst arrowRightEvent = new KeyboardEvent('keydown', { key: 'ArrowRight', code: 'ArrowRight', keyCode: 39, which: 39, bubbles: true, cancelable: true });\nconst arrowDownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', code: 'ArrowDown', keyCode: 40, which: 40, bubbles: true, cancelable: true });\n"]}

package/dist/src/nile-tab-panel/index.js

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

package/dist/src/nile-tab-panel/index.js.map

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

package/dist/src/nile-tab-panel/nile-tab-panel.css.js

@@ -0,0 +1,34 @@
+/**
+* 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';
+/**
+ * TabPanel CSS
+ */
+export const styles = css `
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    --padding: var(--nile-spacing-none, var(--ng-spacing-none));
+-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+    display: none;
+  }
+
+  :host([active]) {
+    display: block;
+  }
+
+  .tab-panel {
+    display: block;
+    padding: var(--padding);
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-tab-panel.css.js.map

package/dist/src/nile-tab-panel/nile-tab-panel.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-tab-panel.css.js","sourceRoot":"","sources":["../../../src/nile-tab-panel/nile-tab-panel.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;CAqBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\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\nimport {css} from 'lit';\n\n/**\n * TabPanel CSS\n */\nexport const styles = css`\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --padding: var(--nile-spacing-none, var(--ng-spacing-none));\n-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n    display: none;\n  }\n\n  :host([active]) {\n    display: block;\n  }\n\n  .tab-panel {\n    display: block;\n    padding: var(--padding);\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-tab-panel/nile-tab-panel.js

@@ -0,0 +1,71 @@
+/**
+ * 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 { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './nile-tab-panel.css';
+import { classMap } from 'lit/directives/class-map.js';
+import { watch } from '../internal/watch';
+import NileElement from '../internal/nile-element';
+let id = 0;
+/**
+ * Nile icon component.
+ *
+ * @tag nile-tab-panel
+ *
+ * @slot - The tab panel's content.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --padding - The tab panel's padding.
+ */
+let NileTabPanel = class NileTabPanel extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.attrId = ++id;
+        this.componentId = `nile-tab-panel-${this.attrId}`;
+        /** The tab panel's name. */
+        this.name = '';
+        /** When true, the tab panel will be shown. */
+        this.active = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.id = this.id.length > 0 ? this.id : this.componentId;
+        this.setAttribute('role', 'tabpanel');
+    }
+    handleActiveChange() {
+        this.setAttribute('aria-hidden', this.active ? 'false' : 'true');
+    }
+    render() {
+        return html `
+      <slot
+        part="base"
+        class=${classMap({
+            'tab-panel': true,
+            'tab-panel--active': this.active
+        })}
+      ></slot>
+    `;
+    }
+};
+NileTabPanel.styles = styles;
+__decorate([
+    property({ reflect: true })
+], NileTabPanel.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileTabPanel.prototype, "active", void 0);
+__decorate([
+    watch('active')
+], NileTabPanel.prototype, "handleActiveChange", null);
+NileTabPanel = __decorate([
+    customElement('nile-tab-panel')
+], NileTabPanel);
+export { NileTabPanel };
+export default NileTabPanel;
+//# sourceMappingURL=nile-tab-panel.js.map

package/dist/src/nile-tab-panel/nile-tab-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-tab-panel.js","sourceRoot":"","sources":["../../../src/nile-tab-panel/nile-tab-panel.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAa,IAAI,EAAiC,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAC,MAAM,EAAC,MAAM,sBAAsB,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;;;GAUG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;IAAtC;;QAIY,WAAM,GAAG,EAAE,EAAE,CAAC;QACd,gBAAW,GAAG,kBAAkB,IAAI,CAAC,MAAM,EAAE,CAAC;QAE/D,4BAA4B;QACC,SAAI,GAAG,EAAE,CAAC;QAEvC,8CAA8C;QACF,WAAM,GAAG,KAAK,CAAC;IAwB7D,CAAC;IAtBC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;QAC1D,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACxC,CAAC;IAGD,kBAAkB;QAChB,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACnE,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,WAAW,EAAE,IAAI;YACjB,mBAAmB,EAAE,IAAI,CAAC,MAAM;SACjC,CAAC;;KAEL,CAAC;IACJ,CAAC;;AAhCM,mBAAM,GAAmB,MAAM,AAAzB,CAA0B;AAMV;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAW;AAGK;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAgB;AAS3D;IADC,KAAK,CAAC,QAAQ,CAAC;sDAGf;AAtBU,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAmCxB;;AAED,eAAe,YAAY,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\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\nimport {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport {styles} from './nile-tab-panel.css';\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n\nlet id = 0;\n\n/**\n * Nile icon component.\n *\n * @tag nile-tab-panel\n *\n * @slot - The tab panel's content.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --padding - The tab panel's padding.\n */\n@customElement('nile-tab-panel')\nexport class NileTabPanel extends NileElement {\n\n  static styles: CSSResultGroup = styles;\n\n  private readonly attrId = ++id;\n  private readonly componentId = `nile-tab-panel-${this.attrId}`;\n\n  /** The tab panel's name. */\n  @property({ reflect: true }) name = '';\n\n  /** When true, the tab panel will be shown. */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id = this.id.length > 0 ? this.id : this.componentId;\n    this.setAttribute('role', 'tabpanel');\n  }\n\n  @watch('active')\n  handleActiveChange() {\n    this.setAttribute('aria-hidden', this.active ? 'false' : 'true');\n  }\n\n  render() {\n    return html`\n      <slot\n        part=\"base\"\n        class=${classMap({\n          'tab-panel': true,\n          'tab-panel--active': this.active\n        })}\n      ></slot>\n    `;\n  }\n}\n\nexport default NileTabPanel;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-tab-panel': NileTabPanel;\n  }\n}\n"]}

package/dist/src/nile-table/index.js

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

package/dist/src/nile-table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { NileTable } from './nile-table';"]}

package/dist/src/nile-table/nile-table.css.js

@@ -0,0 +1,21 @@
+/**
+* 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';
+/**
+ * Table CSS
+ */
+export const styles = css `
+	:host {
+		display:block;
+		width:100%;
+		-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+	}
+`;
+export default [styles];
+//# sourceMappingURL=nile-table.css.js.map

package/dist/src/nile-table/nile-table.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-table.css.js","sourceRoot":"","sources":["../../../src/nile-table/nile-table.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;CAQxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\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\nimport {css} from 'lit';\n\n/**\n * Table CSS\n */\nexport const styles = css`\n\t:host {\n\t\tdisplay:block;\n\t\twidth:100%;\n\t\t-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n\t}\n`;\n\nexport default [styles];"]}

package/dist/src/nile-table/nile-table.js

@@ -0,0 +1,143 @@
+/**
+ * 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 { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, query } from 'lit/decorators.js';
+import { styles } from './nile-table.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile table component.
+ *
+ * @tag nile-table
+ *
+ */
+let NileTable = class NileTable extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.rows = [];
+        this.primaryRowWidths = [];
+        /* #endregion */
+    }
+    /**
+     * The styles for nile-table
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('nile-body-load', this.handleRows);
+    }
+    firstUpdated(_changedProperties) {
+        this.updateComplete.then(() => {
+            this.handleResizeObserver();
+        });
+    }
+    /* #endregion */
+    /* #region Methods */
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render() {
+        return html `
+			<slot @slotchange="${this.repaintTable}"></slot>
+			`;
+    }
+    repaintTable() {
+        this.realignStructure();
+        this.handleBodyCssUpdate();
+    }
+    handleRows(e) {
+        this.rows = [...this.rows, e.detail.comp];
+    }
+    handleBodyCssUpdate() {
+        if (this.rows.length < 2)
+            return;
+        const tableBodies = this.rows;
+        const firstEl = tableBodies[0].shadowRoot?.querySelector('div.base');
+        if (firstEl) {
+            firstEl.style.borderTopRightRadius = "var(--nile-radius-radius-xl)";
+            firstEl.style.borderTopLeftRadius = 'var(--nile-radius-radius-xl)';
+            firstEl.style.borderBottomRightRadius = "0px";
+            firstEl.style.borderBottomLeftRadius = '0px';
+            firstEl.style.borderBottom = 'none';
+        }
+        tableBodies.forEach((tb, i) => {
+            if (i > 0 && i < tableBodies.length - 1) {
+                const el = tb.shadowRoot?.querySelector('div.base');
+                if (el) {
+                    el.style.borderTopRightRadius = "0px";
+                    el.style.borderTopLeftRadius = "0px";
+                    el.style.borderBottomRightRadius = "0px";
+                    el.style.borderBottomLeftRadius = "0px";
+                    el.style.borderBottom = 'none';
+                }
+            }
+        });
+        const lastEl = tableBodies[tableBodies.length - 1].shadowRoot?.querySelector('div.base');
+        if (lastEl) {
+            lastEl.style.borderTopRightRadius = "0px";
+            lastEl.style.borderTopLeftRadius = '0px';
+            lastEl.style.borderBottomRightRadius = "var(--nile-radius-radius-xl)";
+            lastEl.style.borderBottomLeftRadius = 'var(--nile-radius-radius-xl)';
+        }
+    }
+    getPrimaryColumnWidths() {
+        const primaryTb = this.rows.find(tb => tb.type == 'primary');
+        const widthArray = this.getTableCellFetchQuery(primaryTb).map((e) => e.clientWidth);
+        return widthArray;
+    }
+    realignStructure() {
+        if (this.rows.length < 2)
+            return;
+        const primaryRowWidths = this.getPrimaryColumnWidths();
+        const secondaryRows = this.rows.filter(tb => tb.type != 'primary');
+        secondaryRows.forEach((row) => {
+            let elements = this.getTableCellFetchQuery(row);
+            elements?.forEach((el, ind) => {
+                el.style.setProperty('--cell-width', primaryRowWidths.at(ind) + 'px');
+            });
+        });
+    }
+    getTableCellFetchQuery(row) {
+        return row?.shadowRoot?.
+            querySelector('slot:not([name])')?.
+            assignedElements()[0]
+            .shadowRoot?.querySelector('slot')?.
+            assignedElements();
+    }
+    handleResizeObserver() {
+        const onResize = (entries) => {
+            for (let entry of entries) {
+                if (this.debounceTimeout) {
+                    clearTimeout(this.debounceTimeout);
+                }
+                this.debounceTimeout = setTimeout(() => {
+                    this.realignStructure();
+                    this.debounceTimeout = null;
+                }, 50);
+            }
+        };
+        this.resizeObserver = new ResizeObserver(onResize);
+        this.resizeObserver.observe(this);
+    }
+    disconnectedCallback() {
+        this.resizeObserver.disconnect();
+        super.disconnectedCallback();
+    }
+};
+__decorate([
+    query('slot')
+], NileTable.prototype, "defaultSlot", void 0);
+NileTable = __decorate([
+    customElement('nile-table')
+], NileTable);
+export { NileTable };
+export default NileTable;
+//# sourceMappingURL=nile-table.js.map

package/dist/src/nile-table/nile-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-table.js","sourceRoot":"","sources":["../../../src/nile-table/nile-table.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\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\nimport {LitElement, html, CSSResultArray, TemplateResult, PropertyValues} from 'lit';\nimport { customElement, property, query, state} from 'lit/decorators.js';\nimport {styles} from './nile-table.css';\nimport NileElement from '../internal/nile-element';\nimport { NileTableBody } from '../nile-table-body';\nimport { NileTableCellItem } from '../nile-table-cell-item';\nimport { NileTableHeaderItem } from '../nile-table-header-item';\n\n\n/**\n * Nile table component.\n *\n * @tag nile-table\n *\n */\n@customElement('nile-table')\nexport class NileTable extends NileElement {\n  @query('slot') defaultSlot: HTMLSlotElement;\n\tprivate rows:Array<NileTableBody>=[];\n\tprivate primaryRowWidths:Array<number>=[]\n\tprivate resizeObserver:ResizeObserver ;\n\tprivate debounceTimeout:any\n\n\n\t/**\n\t * The styles for nile-table\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\tthis.addEventListener('nile-body-load',this.handleRows)\n\t}\n\n\tprotected firstUpdated(_changedProperties: PropertyValues): void {\n\t\tthis.updateComplete.then(()=>{\n\t\t\tthis.handleResizeObserver();\n\t\t})\n\t}\n\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\treturn html`\n\t\t\t<slot @slotchange=\"${this.repaintTable}\"></slot>\n\t\t\t`;\n\t}\n\n\trepaintTable(){\n\t\tthis.realignStructure();\n\t\tthis.handleBodyCssUpdate();\n\t}\n\n\thandleRows(e:CustomEvent){\n\t\tthis.rows=[...this.rows,e.detail.comp]\n\t}\n\n\thandleBodyCssUpdate(){\n    if (this.rows.length<2) return;\n    const tableBodies = this.rows;\n\t\tconst firstEl=tableBodies[0].shadowRoot?.querySelector<HTMLDivElement>('div.base');\n\t\tif(firstEl) {\n\t\t\tfirstEl.style.borderTopRightRadius=\"var(--nile-radius-radius-xl)\";\n\t\t\tfirstEl.style.borderTopLeftRadius = 'var(--nile-radius-radius-xl)';\n\t\t\tfirstEl.style.borderBottomRightRadius=\"0px\";\n\t\t\tfirstEl.style.borderBottomLeftRadius = '0px';\n\t\t\tfirstEl.style.borderBottom = 'none';\n\t\t}\n\t\ttableBodies.forEach((tb,i)=>{\n\t\t\tif(i>0 && i<tableBodies.length-1){\n\t\t\t\tconst el=tb.shadowRoot?.querySelector<HTMLDivElement>('div.base');\n\t\t\t\tif(el) {\n\t\t\t\t\tel.style.borderTopRightRadius=\"0px\";\n\t\t\t\t\tel.style.borderTopLeftRadius = \"0px\";\n\t\t\t\t\tel.style.borderBottomRightRadius=\"0px\";\n\t\t\t\t\tel.style.borderBottomLeftRadius = \"0px\";\n\t\t\t\t\tel.style.borderBottom = 'none';\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t\tconst lastEl=tableBodies[tableBodies.length - 1].shadowRoot?.querySelector<HTMLDivElement>('div.base')\n\t\tif(lastEl){\n\t\t\tlastEl.style.borderTopRightRadius=\"0px\";\n\t\t\tlastEl.style.borderTopLeftRadius = '0px';\n\t\t\tlastEl.style.borderBottomRightRadius=\"var(--nile-radius-radius-xl)\";\n\t\t\tlastEl.style.borderBottomLeftRadius = 'var(--nile-radius-radius-xl)';\n\t\t}\n\t}\n\n\tgetPrimaryColumnWidths(){\n\t\tconst primaryTb=this.rows.find(tb=>tb.type=='primary')!;\n\t\tconst widthArray=this.getTableCellFetchQuery(primaryTb).map((e:LitElement)=>e.clientWidth) as Array<number>\n\t\treturn widthArray;\n\t}\n\t\n\trealignStructure(){\n    if (this.rows.length<2) return;\n\t\tconst primaryRowWidths=this.getPrimaryColumnWidths();\n\t\tconst secondaryRows=this.rows.filter(tb=>tb.type!='primary');\n\t\tsecondaryRows.forEach((row)=>{\n\t\t\tlet elements=this.getTableCellFetchQuery(row)\n\t\t\telements?.forEach((el:NileTableCellItem|NileTableHeaderItem,ind)=>{\n\t\t\t\tel.style.setProperty('--cell-width',primaryRowWidths.at(ind)+'px')\n\t\t\t})\n\t\t})\n\t}\n\n\tgetTableCellFetchQuery(row:NileTableBody):Array<Element>{\n\t\treturn row?.shadowRoot?.\n\t\t\tquerySelector<HTMLSlotElement>('slot:not([name])')?.\n\t\t\tassignedElements()[0]\n\t\t\t.shadowRoot?.querySelector<HTMLSlotElement>('slot')?.\n\t\t\tassignedElements()!\n\t}\n\n\thandleResizeObserver(){\n\t\tconst onResize = (entries:ResizeObserverEntry[]): void=> {\n\t\t\tfor (let entry of entries) {\n\t\t\t\tif(this.debounceTimeout){\n\t\t\t\t\tclearTimeout(this.debounceTimeout);\n\t\t\t\t}\n\t\t\t\tthis.debounceTimeout=setTimeout(() => {\n\t\t\t\t\tthis.realignStructure();\n\t\t\t\t\tthis.debounceTimeout=null;\n\t\t\t\t}, 50);\n\t\t\t}\n\t\t};\n\t\tthis.resizeObserver=new ResizeObserver(onResize)\n\t\tthis.resizeObserver.observe(this);\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tthis.resizeObserver.disconnect()\n\t\tsuper.disconnectedCallback()\n\t}\n\t/* #endregion */\n}\n\nexport default NileTable;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-table': NileTable;\n  }\n}"]}

package/dist/src/nile-table-body/index.js

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

package/dist/src/nile-table-body/index.js.map

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

package/dist/src/nile-table-body/nile-table-body.css.js

@@ -0,0 +1,57 @@
+/**
+ * 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';
+import { resizableTableStyles } from '../internal/resizable-table-styles';
+/**
+ * TableBody CSS
+ */
+export const styles = css `
+  :host {
+    box-sizing: border-box;
+    --nile-table-background--odd: var(--nile-colors-base-white , var(--ng-colors-bg-primary));
+    --nile-table-background--even: var(--nile-colors-base-white , var(--ng-colors-bg-primary));
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+
+  .base {
+    background-color: var(--nile-colors-white-base , var(--ng-colors-bg-primary));
+    border: 1px solid var(--nile-table-row-border-color , var(--ng-colors-border-secondary));
+    border-radius: var(--nile-radius-md , var(--ng-radius-xl));
+    overflow: hidden;
+    box-shadow: var(--nile-box-shadow-3 , var(--ng-shadow-xs));
+  }
+
+  .table__header {
+    display: flex;
+    box-sizing: border-box;
+  }
+
+  .nile__table__body {
+    display: table;
+    border-collapse: collapse;
+    width: 100%;
+  }
+
+  slot::slotted(nile-table-row:nth-child(odd)) {
+    border-bottom: 1px solid var(--nile-colors-neutral-400 , var(--ng-colors-border-secondary));
+    background: var(--nile-table-background--odd);
+  }
+
+  slot::slotted(nile-table-row:nth-child(even)) {
+    background: var(--nile-table-background--even);
+  }
+
+  slot::slotted(nile-table-row:last-child) {
+    border-bottom: 0px;
+  }
+
+  ${resizableTableStyles}
+`;
+export default [styles];
+//# sourceMappingURL=nile-table-body.css.js.map

package/dist/src/nile-table-body/nile-table-body.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-table-body.css.js","sourceRoot":"","sources":["../../../src/nile-table-body/nile-table-body.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAE1E;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA0CrB,oBAAoB;CACvB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\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\nimport { css } from 'lit';\nimport { resizableTableStyles } from '../internal/resizable-table-styles';\n\n/**\n * TableBody CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    --nile-table-background--odd: var(--nile-colors-base-white , var(--ng-colors-bg-primary));\n    --nile-table-background--even: var(--nile-colors-base-white , var(--ng-colors-bg-primary));\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .base {\n    background-color: var(--nile-colors-white-base , var(--ng-colors-bg-primary));\n    border: 1px solid var(--nile-table-row-border-color , var(--ng-colors-border-secondary));\n    border-radius: var(--nile-radius-md , var(--ng-radius-xl));\n    overflow: hidden;\n    box-shadow: var(--nile-box-shadow-3 , var(--ng-shadow-xs));\n  }\n\n  .table__header {\n    display: flex;\n    box-sizing: border-box;\n  }\n\n  .nile__table__body {\n    display: table;\n    border-collapse: collapse;\n    width: 100%;\n  }\n\n  slot::slotted(nile-table-row:nth-child(odd)) {\n    border-bottom: 1px solid var(--nile-colors-neutral-400 , var(--ng-colors-border-secondary));\n    background: var(--nile-table-background--odd);\n  }\n\n  slot::slotted(nile-table-row:nth-child(even)) {\n    background: var(--nile-table-background--even);\n  }\n\n  slot::slotted(nile-table-row:last-child) {\n    border-bottom: 0px;\n  }\n\n  ${resizableTableStyles}\n`;\n\nexport default [styles];\n"]}