@3t-transform/threeteeui 0.0.22 → 0.0.24

package/dist/cjs/tttx.cjs.js

@@ -1,11 +1,9 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-bf777121.js');
+const index = require('./index-bc080fb4.js');
 
 /*
- Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.20.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('tttx.cjs.js', document.baseURI).href));
@@ -17,7 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["tttx-input-calendar.cjs",[[1,"tttx-input-calendar",{"months":[4],"years":[4],"showCalendar":[32],"selectedYear":[32],"selectedMonth":[32]}]]],["tttx-table.cjs",[[1,"tttx-table",{"headers":[16],"data":[16],"loading":[4],"selected":[2]},[[4,"keydown","handleKeyDown"]]]]],["tttx-list.cjs",[[1,"tttx-list",{"name":[1],"selectable":[4],"items":[32],"selectedIds":[32],"loading":[32],"lastPage":[32]},[[4,"listPageLoad","listLoadHandler"],[4,"listClearDataCache","listClearDataCacheHandler"],[4,"listActionSelectedEvent","listActionSelectedEventHandler"]]]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"inputAutocapitalize":[1,"input-autocapitalize"],"inputAutofocus":[4,"input-autofocus"],"inputKeyhint":[1,"input-keyhint"],"inputIndex":[8,"input-index"],"inputTitle":[1,"input-title"],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-checkbox.cjs",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[8],"submitValue":[8,"submit-value"]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-popover-content.cjs",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
+  return index.bootstrapLazy([["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-list.cjs",[[1,"tttx-list",{"data":[1]}]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"inputAutocapitalize":[1,"input-autocapitalize"],"inputAutofocus":[4,"input-autofocus"],"inputKeyhint":[1,"input-keyhint"],"inputIndex":[8,"input-index"],"inputTitle":[1,"input-title"],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-table.cjs",[[1,"tttx-table",{"headers":[16],"data":[16],"loading":[4],"selected":[2]},[[4,"keydown","handleKeyDown"]]]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]]], options);
 });
-
-exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -5,17 +5,13 @@
     "./components/atoms/tttx-icon/tttx-icon.js",
     "./components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js",
     "./components/atoms/tttx-loading-spinner/tttx-loading-spinner.js",
-    "./components/atoms/tttx-popover-content/tttx-popover-content.js",
-    "./components/atoms/ttx-checkbox/tttx-checkbox.js",
-    "./components/molecules/tttx-form/tttx-form.js",
-    "./components/molecules/tttx-input-calendar/tttx-input-calendar.js",
     "./components/molecules/tttx-list/tttx-list.js",
     "./components/molecules/tttx-table/tttx-table.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.22.3",
-    "typescriptVersion": "4.9.4"
+    "version": "2.20.0",
+    "typescriptVersion": "4.8.4"
   },
   "collections": [],
   "bundles": []

package/dist/collection/components/atoms/tttx-button/test/tttx-button.e2e.js

@@ -0,0 +1,9 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('tttx-button', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<tttx-button></tttx-button>');
+    const element = await page.find('tttx-button');
+    expect(element).toHaveClass('hydrated');
+  });
+});

package/dist/collection/components/atoms/tttx-button/test/tttx-button.spec.js

@@ -0,0 +1,43 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { TttxButton } from '../tttx-button';
+describe('tttx-button', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [TttxButton],
+      html: '<tttx-button></tttx-button>',
+    });
+    expect(page.root).toEqualHtml(`
+            <tttx-button>
+                <mock:shadow-root>
+                    <button class="button default">
+                        <div class="button-content">
+                            <slot></slot>
+                        </div>
+                    </button>
+                </mock:shadow-root>
+            </tttx-button>
+        `);
+  });
+  it('clicks', async () => {
+    const page = await newSpecPage({
+      components: [TttxButton],
+      html: '<tttx-button></tttx-button>',
+    });
+    expect(page.root).toEqualHtml(`
+            <tttx-button>
+                <mock:shadow-root>
+                    <button class="button default">
+                        <div class="button-content">
+                            <slot></slot>
+                        </div>
+                    </button>
+                </mock:shadow-root>
+            </tttx-button>
+        `);
+    const callbackFn = jest.fn();
+    // add an event listener directly to the tttx-button host and click it
+    page.root.addEventListener('click', callbackFn);
+    page.root.click();
+    expect(callbackFn).toHaveBeenCalled();
+  });
+});

package/dist/collection/components/atoms/tttx-icon/test/tttx-icon.e2e.js

@@ -0,0 +1,9 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('tttx-icon', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<tttx-icon></tttx-icon>');
+    const element = await page.find('tttx-icon');
+    expect(element).toHaveClass('hydrated');
+  });
+});

package/dist/collection/components/atoms/tttx-icon/test/tttx-icon.spec.js

@@ -0,0 +1,16 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { TttxIcon } from '../tttx-icon';
+describe('tttx-icon', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [TttxIcon],
+      html: '<tttx-icon color="danger" icon="warning"></tttx-icon>',
+    });
+    expect(page.root).toEqualHtml(`
+        <tttx-icon color="danger" icon="warning">
+            <mock:shadow-root>
+                <span class="material-symbols-rounded danger">warning</span>
+            </mock:shadow-root>
+        </tttx-icon>`);
+  });
+});

package/dist/collection/components/atoms/tttx-keyvalue-block/test/tttx-keyvalue-block.spec.js

@@ -0,0 +1,164 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { TttxKeyvalueBlock } from '../tttx-keyvalue-block';
+describe('tttx-keyvalue-block', () => {
+  it('renders multiple key value pairs', async () => {
+    const keyValuePair = {
+      'Name': 'John Doe',
+      'Date of birth': '14 Jan 1981',
+      'Start of postcode': 'AB10'
+    };
+    const page = await newSpecPage({
+      components: [TttxKeyvalueBlock],
+      html: `<tttx-keyvalue-block keyvalues='${JSON.stringify(keyValuePair)}' />`
+    });
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+            <tttx-keyvalue-block keyvalues='{"Name":"John Doe","Date of birth":"14 Jan 1981","Start of postcode":"AB10"}'>
+                <mock:shadow-root>
+                    <dl>
+                        <dt>
+                            Name
+                        </dt>
+                        <dd>
+                            John Doe
+                        </dd>
+                        <dt>
+                            Date of birth
+                        </dt>
+                        <dd>
+                            14 Jan 1981
+                        </dd>
+                        <dt>
+                            Start of postcode
+                        </dt>
+                        <dd>
+                            AB10
+                        </dd>
+                    </dl>
+                </mock:shadow-root>
+            </tttx-keyvalue-block>
+        `);
+  });
+  it('renders an array of key value subtitles', async () => {
+    const keyValueArray = [
+      { title: "title", subTitle: "sub", data: "data" },
+      { title: "title2", subTitle: "sub2", data: "data2" }
+    ];
+    const page = await newSpecPage({
+      components: [TttxKeyvalueBlock],
+      html: `<tttx-keyvalue-block keyvalues='${JSON.stringify(keyValueArray)}' />`
+    });
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+            <tttx-keyvalue-block keyvalues='[{"title":"title","subTitle":"sub","data":"data"},{"title":"title2","subTitle":"sub2","data":"data2"}]'>
+                <mock:shadow-root>
+                    <dl>
+                        <dt class="mainTitle">
+                            title
+                        </dt>
+                        <dt class="subTitle">
+                            sub
+                        </dt>
+                        <dd>
+                            data
+                        </dd>
+                        <dt class="mainTitle">
+                            title2
+                        </dt>
+                        <dt class="subTitle">
+                            sub2
+                        </dt>
+                        <dd>
+                            data2
+                        </dd>
+                    </dl>
+                </mock:shadow-root>
+            </tttx-keyvalue-block>
+        `);
+  });
+  it('renders multiple horizontal key value pairs', async () => {
+    const keyValuePair = {
+      'Name': 'John Doe',
+      'Date of birth': '14 Jan 1981',
+      'Start of postcode': 'AB10'
+    };
+    const page = await newSpecPage({
+      components: [TttxKeyvalueBlock],
+      html: `<tttx-keyvalue-block horizontal="true" keyvalues='${JSON.stringify(keyValuePair)}' />`
+    });
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+            <tttx-keyvalue-block horizontal="true" keyvalues='{"Name":"John Doe","Date of birth":"14 Jan 1981","Start of postcode":"AB10"}'>
+                <mock:shadow-root>
+                    <dl class="horizontal">
+                        <div>
+                            <dt>
+                                Name
+                            </dt>
+                            <dd>
+                                John Doe
+                            </dd>
+                        </div>
+                        <div>
+                            <dt>
+                                Date of birth
+                            </dt>
+                            <dd>
+                                14 Jan 1981
+                            </dd>
+                        </div>
+                        <div>
+                            <dt>
+                                Start of postcode
+                            </dt>
+                            <dd>
+                                AB10
+                            </dd>
+                        </div>
+                    </dl>
+                </mock:shadow-root>
+            </tttx-keyvalue-block>
+        `);
+  });
+  it('renders an array of horizontal key value subtitles', async () => {
+    const keyValueArray = [
+      { title: "title", subTitle: "sub", data: "data" },
+      { title: "title2", subTitle: "sub2", data: "data2" }
+    ];
+    const page = await newSpecPage({
+      components: [TttxKeyvalueBlock],
+      html: `<tttx-keyvalue-block horizontal="true" keyvalues='${JSON.stringify(keyValueArray)}' />`
+    });
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+            <tttx-keyvalue-block horizontal="true" keyvalues='[{"title":"title","subTitle":"sub","data":"data"},{"title":"title2","subTitle":"sub2","data":"data2"}]'>
+                <mock:shadow-root>
+                    <dl class="horizontal">
+                        <div>
+                            <dt class="mainTitle">
+                                title
+                            </dt>
+                            <dt class="subTitle">
+                                sub
+                            </dt>
+                            <dd>
+                                data
+                            </dd>
+                        </div>
+                        <div>
+                            <dt class="mainTitle">
+                                title2
+                            </dt>
+                            <dt class="subTitle">
+                                sub2
+                            </dt>
+                            <dd>
+                                data2
+                            </dd>
+                        </div>
+                    </dl>
+                </mock:shadow-root>
+            </tttx-keyvalue-block>
+        `);
+  });
+});

package/dist/collection/components/atoms/tttx-loading-spinner/Test/tttx-loading-spinner.spec.js

@@ -0,0 +1,64 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { TttxLoadingSpinner } from '../tttx-loading-spinner';
+describe('tttx-loading-spinner', () => {
+  it('renders the loading text when the loading message prop is set to true', async () => {
+    const page = await newSpecPage({
+      components: [TttxLoadingSpinner],
+      html: '<tttx-loading-spinner></tttx-loading-spinner>',
+    });
+    page.rootInstance.loadingMessage = true;
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+      <tttx-loading-spinner>
+        <mock:shadow-root>
+          <div class='spinner-container'><div class="loading-box"><span class='spinner large'></span></div><div class='loading-text'>Loading, please wait...</div></div>
+        </mock:shadow-root>
+      </tttx-loading-spinner>
+    `);
+  });
+  it('renders without the loading text when the loading message prop is set to false', async () => {
+    const page = await newSpecPage({
+      components: [TttxLoadingSpinner],
+      html: '<tttx-loading-spinner></tttx-loading-spinner>',
+    });
+    page.rootInstance.loadingMessage = false;
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+      <tttx-loading-spinner>
+        <mock:shadow-root>
+          <div class='spinner-container'><div class="loading-box"><span class='spinner large'></span></div></div>
+        </mock:shadow-root>
+      </tttx-loading-spinner>
+    `);
+  });
+  it('renders the small spinner when the size prop is set to small', async () => {
+    const page = await newSpecPage({
+      components: [TttxLoadingSpinner],
+      html: '<tttx-loading-spinner></tttx-loading-spinner>',
+    });
+    page.rootInstance.size = 'small';
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+      <tttx-loading-spinner>
+        <mock:shadow-root>
+          <div class='spinner-container'><div class="loading-box"><span class='spinner small'></span></div></div>
+        </mock:shadow-root>
+      </tttx-loading-spinner>
+    `);
+  });
+  it('renders the large spinner when the size prop is set to large', async () => {
+    const page = await newSpecPage({
+      components: [TttxLoadingSpinner],
+      html: '<tttx-loading-spinner></tttx-loading-spinner>',
+    });
+    page.rootInstance.size = 'large';
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+      <tttx-loading-spinner>
+        <mock:shadow-root>
+          <div class='spinner-container'><div class="loading-box"><span class='spinner large'></span></div></div>
+        </mock:shadow-root>
+      </tttx-loading-spinner>
+    `);
+  });
+});

package/dist/collection/components/molecules/tttx-list/test/tttx-list.spec.js

@@ -0,0 +1,151 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { TttxList } from '../tttx-list';
+describe('tttx-list', () => {
+  it('renders a spinner before loading in data', async () => {
+    const page = await newSpecPage({
+      components: [TttxList],
+      html: '<tttx-list name=\'before-load\' />',
+    });
+    expect(page.root).toEqualHtml(`
+          <tttx-list name='before-load'>
+            <mock:shadow-root>
+              <div class="list-item-container" tabindex="0">
+              </div>
+              <div class="load-indicator"><tttx-loading-spinner size='large' /></div>
+            </mock:shadow-root>
+          </tttx-list>
+        `);
+  });
+  it('renders a No Data message if not loading and empty', async () => {
+    const page = await newSpecPage({
+      components: [TttxList],
+      html: '<tttx-list name=\'empty-list\' />',
+    });
+    page.doc.dispatchEvent(new CustomEvent('listPageLoad', {
+      detail: {
+        name: 'empty-list',
+        lastPage: true,
+        items: []
+      }
+    }));
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+          <tttx-list name="empty-list">
+            <mock:shadow-root>
+              <div class="list-item-container" tabindex="0">
+                No data to display
+              </div>
+            </mock:shadow-root>
+          </tttx-list>
+        `);
+  });
+  it('renders a simple list template when no template is provided', async () => {
+    const page = await newSpecPage({
+      components: [TttxList],
+      html: '<tttx-list name=\'simple-list\' />',
+    });
+    page.doc.dispatchEvent(new CustomEvent('listPageLoad', {
+      detail: {
+        name: 'simple-list',
+        lastPage: true,
+        items: [
+          { text: 'A row with only text' },
+          { text: 'A row with text and an icon', icon: 'settings' },
+          { text: 'A row with text and a coloured icon', icon: 'warning', iconColor: '#ff0000' }
+        ]
+      }
+    }));
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+      <tttx-list name="simple-list">
+        <mock:shadow-root>
+          <div class="list-item-container" tabindex="0">
+            <div class="tttx-list__row">
+              <div class="generic-template__content">
+                A row with only text
+              </div>
+            </div>
+            <div class="tttx-list__row">
+              <div class="generic-template__content">
+                <span class="material-symbols-rounded">settings</span>A row with text and an icon
+              </div>
+            </div>
+            <div class="tttx-list__row">
+              <div class="generic-template__content">
+                <span class="material-symbols-rounded" style="color: #ff0000;">warning</span>A row with text and a coloured icon
+              </div>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </tttx-list>
+    `);
+  });
+  it('dispatches an event when clicking a row', async () => {
+    const page = await newSpecPage({
+      components: [TttxList],
+      html: '<tttx-list name=\'clickable-list\' />',
+    });
+    page.doc.dispatchEvent(new CustomEvent('listPageLoad', {
+      detail: {
+        name: 'clickable-list',
+        lastPage: true,
+        items: [
+          { text: 'A row with only text' },
+        ]
+      }
+    }));
+    await page.waitForChanges();
+  });
+  it('clears the list data when receiving a listClearDataCache event', async () => {
+    const page = await newSpecPage({
+      components: [TttxList],
+      html: '<tttx-list name=\'clearable-list\' />',
+    });
+    page.doc.dispatchEvent(new CustomEvent('listPageLoad', {
+      detail: {
+        name: 'clearable-list',
+        lastPage: true,
+        items: [
+          { text: 'A row with only text' },
+        ]
+      }
+    }));
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+          <tttx-list name="clearable-list">
+            <mock:shadow-root>
+              <div class="list-item-container" tabindex="0">
+                <div class="tttx-list__row">
+                  <div class="generic-template__content">
+                    A row with only text
+                  </div>
+                </div>
+              </div>
+            </mock:shadow-root>
+          </tttx-list>
+        `);
+    page.doc.dispatchEvent(new CustomEvent('listClearDataCache', {
+      detail: {
+        name: 'clearable-list'
+      }
+    }));
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+          <tttx-list name="clearable-list">
+            <mock:shadow-root>
+              <div class="list-item-container" tabindex="0">
+                No data to display
+              </div>
+            </mock:shadow-root>
+          </tttx-list>
+        `);
+  });
+  // describe('when selectable', () => {
+  //     it('renders rows with a checkbox', () => {
+  //     });
+  //     it('responds with the selected row data when a listActionSelectedEvent event is dispatched', () => {
+  //     });
+  //     it('removes selected rows when listActionSelectedEvent instructs it to', () => {
+  //     });
+  // });
+});

package/dist/collection/components/molecules/tttx-list/tttx-list.css

@@ -24,33 +24,30 @@
   flex-direction: column;
 }
 
-.tttx-list__row {
-  min-height: 52px;
-  line-height: 36px;
-  padding: 8px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  cursor: pointer;
-  border-bottom: 1px solid #d5d5d5;
+.list {
+  margin: 0;
+  padding: 0;
 }
-.tttx-list__row .generic-template__content {
-  width: 100%;
+
+.item {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border-bottom: 1px solid #d5d5d5;
+  height: 36px;
+  /* center the contents vertically */
   display: flex;
   align-items: center;
-  gap: 8px;
 }
-.tttx-list__row:first-of-type {
+.item:first-of-type {
   border-top: 1px solid #d5d5d5;
 }
-.tttx-list__row:focus, .tttx-list__row:active {
-  background-color: #e6e6e6;
-}
-.tttx-list__row.selected {
-  background-color: #e7f1f9;
+
+.align-right {
+  margin-left: auto;
 }
 
-.load-indicator {
+.item-content {
   display: flex;
-  justify-content: center;
+  align-items: center;
 }