@otto-de/b2b-core-components 1.4.0 → 1.6.0

package/dist/collection/components/search/search.e2e.js

@@ -0,0 +1,97 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B-Search', () => {
+  let page;
+  const optionsList = ['option1', 'option2', 'option3'];
+  const setOptionsList = async () => {
+    const search = await page.find('b2b-search');
+    search.setProperty('optionsList', optionsList);
+    await page.waitForChanges();
+  };
+  const typeInput = async (key = '8') => {
+    let input = await page.find('b2b-search >>> b2b-input-list');
+    // focus on input element, focus method did not work
+    await input.click();
+    await input.press(key);
+    await page.waitForChanges();
+  };
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`
+      <b2b-search placeholder='search here'></b2b-search>
+    `);
+  });
+  it('should register input text when enabled', async () => {
+    const search = await page.find('b2b-search');
+    await typeInput('8');
+    let inputValue = search.getAttribute('value');
+    expect(inputValue).toBe('8');
+  });
+  it('should not receive input text when disabled', async () => {
+    const search = await page.find('b2b-search');
+    search.setAttribute('disabled', true);
+    await page.waitForChanges();
+    await typeInput();
+    let inputValue = search.getAttribute('value');
+    expect(inputValue).toBe(null);
+  });
+  it('should emit search event when clicking search button', async () => {
+    const searchEventSpy = await page.spyOnEvent('b2b-search');
+    const button = await page.find('b2b-search >>> b2b-button');
+    await button.click();
+    expect(searchEventSpy).toHaveReceivedEvent();
+  });
+  it('should emit search event with search input data', async () => {
+    const searchString = 'some search value';
+    const searchEventSpy = await page.spyOnEvent('b2b-search');
+    const searchInputEventSpy = await page.spyOnEvent('b2b-input');
+    const input = await page.find('b2b-search >>> b2b-input-list');
+    await input.triggerEvent('b2b-input', { detail: { value: searchString } });
+    await page.waitForChanges();
+    const button = await page.find('b2b-search >>> b2b-button');
+    await button.click();
+    expect(searchInputEventSpy).toHaveReceivedEvent();
+    expect(searchEventSpy).toHaveReceivedEventDetail({
+      searchTerm: searchString,
+    });
+  });
+  it('should emit search event on enter press', async () => {
+    const searchString = 'some search value';
+    const searchEventSpy = await page.spyOnEvent('b2b-search');
+    const searchInputEventSpy = await page.spyOnEvent('b2b-input');
+    const input = await page.find('b2b-search >>> b2b-input-list');
+    await input.triggerEvent('b2b-input', { detail: { value: searchString } });
+    await page.waitForChanges();
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Enter');
+    expect(searchInputEventSpy).toHaveReceivedEvent();
+    expect(searchEventSpy).toHaveReceivedEventDetail({
+      searchTerm: searchString,
+    });
+  });
+  it('should emit input event when typing on input', async () => {
+    const searchString = 'some search value';
+    const inputEventSpy = await page.spyOnEvent('b2b-input');
+    const input = await page.find('b2b-search >>> b2b-input-list');
+    await input.triggerEvent('b2b-input', { detail: { value: searchString } });
+    await page.waitForChanges();
+    expect(inputEventSpy).toHaveReceivedEvent();
+    expect(inputEventSpy).toHaveReceivedEventDetail({ value: searchString });
+  });
+  it('should emit selected option when clicking search button', async () => {
+    await setOptionsList();
+    const searchEventSpy = await page.spyOnEvent('b2b-search');
+    const input = await page.find('b2b-search >>> b2b-input-list');
+    // focus on input element, focus method did not work
+    await input.click();
+    await input.press('8');
+    await page.waitForChanges();
+    // Click first option on the list
+    const option = await page.find({ text: optionsList[0] });
+    await option.click();
+    const button = await page.find('b2b-search >>> b2b-button');
+    await button.click();
+    expect(searchEventSpy).toHaveReceivedEventDetail({
+      searchTerm: optionsList[0],
+    });
+  });
+});

package/dist/collection/components/search/search.js

@@ -16,6 +16,11 @@ export class SearchComponent {
     this.disabled = false;
     this.closed = undefined;
   }
+  handleKeyDown(event) {
+    if (event.key === 'Enter') {
+      this.b2bSearch.emit({ searchTerm: this.value });
+    }
+  }
   render() {
     return (h(Host, null, h("b2b-input-group", { disabled: this.disabled }, h("b2b-input-list", { slot: "start", value: this.value, placeholder: this.placeholder, optionsList: this.optionsList, "onb2b-input": this.onInput, "onb2b-option-selected": this.onOptionSelected }, h("slot", null)), h("b2b-button", { slot: "end", variant: "primary", onClick: this.onSearchClicked }, h("b2b-icon", { icon: "b2b_icon-search", clickable: true })))));
   }
@@ -123,4 +128,13 @@ export class SearchComponent {
       }];
   }
   static get elementRef() { return "hostElement"; }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "handleKeyDown",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/separator/separator.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -76,8 +76,7 @@
   --b2b-size-copy-200: var(--b2b-size-45);
   --b2b-size-copy-125: var(--b2b-size-40);
   --b2b-size-copy-100: var(--b2b-size-35);
-  --b2b-size-copy-75: var(--b2b-size-30);
-  --b2b-size-copy-50: var(--b2b-size-25);
+  --b2b-size-copy-50: var(--b2b-size-30);
   --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
   --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
   --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/separator/separator.e2e.js

@@ -0,0 +1,22 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B-Separator', () => {
+  let page;
+  it('renders', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-separator></b2b-separator>`);
+    const element = await page.find('b2b-separator');
+    expect(element).not.toBeNull();
+  });
+  it('displays a vertical separator', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<div style="height: 18px;"><b2b-separator alignment="vertical"></b2b-separator></div>`);
+    const element = await page.find('b2b-separator >>> div');
+    expect(element).toHaveClass('b2b-separator--vertical');
+  });
+  it('displays a horizontal separator', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<div style="width: 18px;"><b2b-separator alignment="horizontal"></b2b-separator></div>`);
+    const element = await page.find('b2b-separator >>> div');
+    expect(element).toHaveClass('b2b-separator--horizontal');
+  });
+});

package/dist/collection/components/spinner/spinner.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -76,8 +76,7 @@
   --b2b-size-copy-200: var(--b2b-size-45);
   --b2b-size-copy-125: var(--b2b-size-40);
   --b2b-size-copy-100: var(--b2b-size-35);
-  --b2b-size-copy-75: var(--b2b-size-30);
-  --b2b-size-copy-50: var(--b2b-size-25);
+  --b2b-size-copy-50: var(--b2b-size-30);
   --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
   --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
   --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/spinner/spinner.e2e.js

@@ -0,0 +1,12 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B-Spinner', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-spinner></b2b-spinner>`);
+  });
+  it('should render spinner component', async () => {
+    const element = await page.find('b2b-spinner');
+    expect(element).not.toBeNull();
+  });
+});

package/dist/collection/components/spinner/spinner.spec.js

@@ -0,0 +1,41 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { h } from '@stencil/core';
+import { SpinnerComponent } from './spinner';
+describe('B2B-Spinner', () => {
+  async function renderPage(template) {
+    return newSpecPage({
+      components: [SpinnerComponent],
+      template: () => template,
+    });
+  }
+  it('should render spinner with default attributes', async () => {
+    const page = await renderPage(h("b2b-spinner", null));
+    expect(page.root).toEqualHtml(`
+      <b2b-spinner>
+        <mock:shadow-root>
+          <div class="b2b-spinner b2b-spinner--size-100 b2b-spinner--color-primary"></div>
+        </mock:shadow-root>
+      </b2b-spinner>
+		`);
+  });
+  it('should render spinner with small size', async () => {
+    const page = await renderPage(h("b2b-spinner", { size: "50" }));
+    expect(page.root).toEqualHtml(`
+      <b2b-spinner>
+        <mock:shadow-root>
+          <div class="b2b-spinner b2b-spinner--size-50 b2b-spinner--color-primary"></div>
+        </mock:shadow-root>
+    	</b2b-spinner>
+		`);
+  });
+  it('should render spinner with inverse color', async () => {
+    const page = await renderPage(h("b2b-spinner", { color: "inverse" }));
+    expect(page.root).toEqualHtml(`
+      <b2b-spinner>
+        <mock:shadow-root>
+          <div class="b2b-spinner b2b-spinner--size-100 b2b-spinner--color-inverse"></div>
+        </mock:shadow-root>
+    	</b2b-spinner>
+		`);
+  });
+});

package/dist/collection/components/tab/tab.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -76,8 +76,7 @@
   --b2b-size-copy-200: var(--b2b-size-45);
   --b2b-size-copy-125: var(--b2b-size-40);
   --b2b-size-copy-100: var(--b2b-size-35);
-  --b2b-size-copy-75: var(--b2b-size-30);
-  --b2b-size-copy-50: var(--b2b-size-25);
+  --b2b-size-copy-50: var(--b2b-size-30);
   --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
   --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
   --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/tab/tab.e2e.js

@@ -0,0 +1,35 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B Tab', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-tab>Tab 1</b2b-tab>`);
+  });
+  it('should render the tab component', async () => {
+    const element = await page.find('b2b-tab');
+    expect(element).not.toBeNull();
+  });
+  it('should emit when selected changes', async () => {
+    const selectedSpy = await page.spyOnEvent('b2b-change');
+    await page.$eval('b2b-tab', (element) => {
+      element.selected = true;
+    });
+    await page.waitForChanges();
+    expect(selectedSpy).toHaveReceivedEvent();
+  });
+  it('should focus on the tab if it is selected', async () => {
+    const element = await page.find('b2b-tab');
+    const selectedBefore = await element.getProperty('selected');
+    expect(selectedBefore).toBe(false);
+    await page.$eval('b2b-tab', (element) => {
+      element.selected = true;
+    });
+    await page.waitForChanges();
+    const selectedAfter = await element.getProperty('selected');
+    expect(selectedAfter).toBe(true);
+    const focus = await page.evaluate(() => {
+      return document.activeElement.ariaSelected;
+    });
+    expect(focus).not.toBeNull();
+  });
+});

package/dist/collection/components/tab/tab.spec.js

@@ -0,0 +1,31 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { h } from '@stencil/core';
+import { B2bTabComponent } from './tab';
+it('should match the snapshot', async () => {
+  const page = await newSpecPage({
+    components: [B2bTabComponent],
+    template: () => h("b2b-tab", null, "Tab 1"),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should not be selected by default', async () => {
+  const page = await newSpecPage({
+    components: [B2bTabComponent],
+    template: () => h("b2b-tab", null, "Tab 1"),
+  });
+  expect(page.rootInstance.selected).toBe(false);
+});
+it('should not have an error by default', async () => {
+  const page = await newSpecPage({
+    components: [B2bTabComponent],
+    template: () => h("b2b-tab", null, "Tab 1"),
+  });
+  expect(page.rootInstance.invalid).toBe(false);
+});
+it('should not be disabled by default', async () => {
+  const page = await newSpecPage({
+    components: [B2bTabComponent],
+    template: () => h("b2b-tab", null, "Tab 1"),
+  });
+  expect(page.rootInstance.disabled).toBe(false);
+});

package/dist/collection/components/tab-group/tab-group.e2e.js

@@ -0,0 +1,98 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B Tab Group', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`
+        <b2b-tab-group>
+        <b2b-tab slot="tab">
+          First Tab
+        </b2b-tab>
+        <b2b-tab-panel slot="panel">
+          First Panel
+        </b2b-tab-panel>
+        <b2b-tab slot="tab">
+          Second Tab
+        </b2b-tab>
+        <b2b-tab-panel slot="panel">
+          Second Panel
+        </b2b-tab-panel>
+        <b2b-tab slot="tab" disabled="true">
+        Disabled Tab
+      </b2b-tab>
+      <b2b-tab-panel slot="panel">
+        Disabled Panel
+      </b2b-tab-panel>
+      </b2b-tab-group>
+        `);
+  });
+  it('should render the tab group', async () => {
+    const element = await page.find('b2b-tab-group');
+    expect(element).not.toBeNull();
+  });
+  it('should select the first tab by default', async () => {
+    const tab = await page.find('b2b-tab');
+    const selected = await tab.getProperty('selected');
+    expect(selected).toBe(true);
+  });
+  it('should show the panel associated with the tab that is selected', async () => {
+    const tab = await page.find({ text: 'First Tab' });
+    const selected = await tab.getProperty('selected');
+    expect(selected).toBe(true);
+    const panel = await page.find({ text: 'First Panel' });
+    expect(await panel.isVisible()).toBe(true);
+  });
+  it('should not select a disabled tab', async () => {
+    const tab = await page.find({ text: 'Disabled Tab' });
+    const panel = await page.find({ text: 'Disabled Panel' });
+    const selected = await tab.getProperty('selected');
+    expect(selected).toBe(false);
+    await tab.click();
+    await page.waitForChanges();
+    const selectedAfter = await tab.getProperty('selected');
+    expect(selectedAfter).toBe(false);
+    expect(await panel.isVisible()).toBe(false);
+  });
+  it('should navigate to the next enabled tab using the keyboard', async () => {
+    const tabs = await page.findAll('b2b-tab');
+    expect(await tabs[0].getProperty('selected')).toBe(true);
+    await page.keyboard.down('ArrowRight');
+    await page.waitForChanges();
+    expect(await tabs[1].getProperty('selected')).toBe(true);
+    await page.keyboard.press('ArrowRight');
+    await page.waitForChanges();
+    expect(await tabs[2].getProperty('selected')).toBe(false);
+    expect(await tabs[0].getProperty('selected')).toBe(true);
+  });
+  it('should navigate to the previous tab using the keyboard', async () => {
+    const tabs = await page.findAll('b2b-tab');
+    expect(await tabs[0].getProperty('selected')).toBe(true);
+    await page.keyboard.down('ArrowLeft');
+    await page.waitForChanges();
+    // second tab is selected because it is first enabled from last
+    expect(await tabs[1].getProperty('selected')).toBe(true);
+    await page.keyboard.press('ArrowLeft');
+    await page.waitForChanges();
+    // first tab is selected because last tab is disabled
+    expect(await tabs[0].getProperty('selected')).toBe(true);
+  });
+  it('should emit when a new tab is selected', async () => {
+    const changeSpy = await page.spyOnEvent('b2b-selected');
+    const secondTab = await page.find({ text: 'Second Tab' });
+    await secondTab.click();
+    await page.waitForChanges();
+    expect(changeSpy).toHaveReceivedEvent();
+  });
+  it('should not navigate when external navigation is used', async () => {
+    const tabGroup = await page.find('b2b-tab-group');
+    await tabGroup.setProperty('useRouter', true);
+    await page.waitForChanges();
+    const tabs = await page.findAll('b2b-tab');
+    expect(await tabs[0].getProperty('selected')).toBe(true);
+    await page.keyboard.press('ArrowRight');
+    await page.waitForChanges();
+    await tabs[1].click();
+    await page.waitForChanges();
+    expect(await tabs[1].getProperty('selected')).toBe(false);
+  });
+});

package/dist/collection/components/tab-panel/tab-panel.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -76,8 +76,7 @@
   --b2b-size-copy-200: var(--b2b-size-45);
   --b2b-size-copy-125: var(--b2b-size-40);
   --b2b-size-copy-100: var(--b2b-size-35);
-  --b2b-size-copy-75: var(--b2b-size-30);
-  --b2b-size-copy-50: var(--b2b-size-25);
+  --b2b-size-copy-50: var(--b2b-size-30);
   --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
   --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
   --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/tab-panel/tab-panel.e2e.js

@@ -0,0 +1,12 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B Tab Panel', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-tab-panel name="tab-1">Tab 1</b2b-tab-panel>`);
+  });
+  it('should render the tab panel', async () => {
+    const element = await page.find('b2b-tab-panel');
+    expect(element).not.toBeNull();
+  });
+});

package/dist/collection/components/tab-panel/tab-panel.spec.js

@@ -0,0 +1,10 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { h } from '@stencil/core';
+import { B2bTabPanelComponent } from './tab-panel';
+it('should match the snapshot', async () => {
+  const page = await newSpecPage({
+    components: [B2bTabPanelComponent],
+    template: () => h("b2b-tab-panel", null, "Tab 1"),
+  });
+  expect(page.root).toMatchSnapshot();
+});

package/dist/collection/components/table/stories.data.js

@@ -6,36 +6,36 @@ export const sampleData = {
       'Name A',
       'Content 1',
       'Content 1',
-      html ` <b2b-button>Action</b2b-button>`,
+      html ` <b2b-button size="50">Action</b2b-button>`,
     ],
     [
       'Name B',
       'Content 2',
       'Content 2',
-      html ` <b2b-button>Action</b2b-button>`,
+      html ` <b2b-button size="50">Action</b2b-button>`,
     ],
     [
       'Name C',
       'Content 3',
       'Content 3',
-      html ` <b2b-button>Action</b2b-button>`,
+      html ` <b2b-button size="50">Action</b2b-button>`,
     ],
     [
       'Name D',
       'Content 4',
       'Very, very, long, long data text that wraps over to next line',
-      html ` <b2b-button>Action</b2b-button>`,
+      html ` <b2b-button size="50">Action</b2b-button>`,
     ],
   ],
 };
 export const smallSampleData = {
   columns: ['Column 1', 'Column 2', 'Column 3'],
   rows: [
-    ['Name A', 'Content 1', html ` <b2b-button>Action</b2b-button>`],
+    ['Name A', 'Content 1', html ` <b2b-button size="50">Action</b2b-button>`],
     [
       'Name D',
       'Very long data text that wraps over to next line, Very long data text that wraps over to next line',
-      html ` <b2b-button>Action</b2b-button>`,
+      html ` <b2b-button size="50">Action</b2b-button>`,
     ],
   ],
 };

package/dist/collection/components/table/table-cell/table-cell.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -76,8 +76,7 @@
   --b2b-size-copy-200: var(--b2b-size-45);
   --b2b-size-copy-125: var(--b2b-size-40);
   --b2b-size-copy-100: var(--b2b-size-35);
-  --b2b-size-copy-75: var(--b2b-size-30);
-  --b2b-size-copy-50: var(--b2b-size-25);
+  --b2b-size-copy-50: var(--b2b-size-30);
   --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
   --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
   --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/table/table-cell/table-cell.js

@@ -1,5 +1,5 @@
 import { h, Host } from '@stencil/core';
-import { ContentAlignment, TableSizes } from '../types';
+import { ContentAlignment, TableSizes, } from '../../../utils/types/table.types';
 export class TableCellComponent {
   constructor() {
     this.expandTextHoverWaitTime = 600;
@@ -78,7 +78,7 @@ export class TableCellComponent {
           "references": {
             "TableSizes": {
               "location": "import",
-              "path": "../types"
+              "path": "../../../utils/types/table.types"
             }
           }
         },
@@ -101,7 +101,7 @@ export class TableCellComponent {
           "references": {
             "ContentAlignment": {
               "location": "import",
-              "path": "../types"
+              "path": "../../../utils/types/table.types"
             }
           }
         },
@@ -142,7 +142,7 @@ export class TableCellComponent {
           "references": {
             "TableColourOptions": {
               "location": "import",
-              "path": "../types"
+              "path": "../../../utils/types/table.types"
             }
           }
         },