@3t-transform/threeteeui 0.0.23 → 0.0.24

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

@@ -0,0 +1,146 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { TttxInput } from '../tttx-standalone-input';
+describe('tttx-standalone-input', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [TttxInput],
+      html: '<tttx-standalone-input />',
+    });
+    expect(page.root).toEqualHtml(`
+        <tttx-standalone-input>
+            <label class="inputBlock">
+              <span class="optional">
+                (optional)
+              </span>
+              <input class="standalone" type="text">
+              <span class="errorBubble">
+                <span class="material-symbols-rounded validationicon">
+                  warning
+                </span>
+              </span>
+            </label>
+        </tttx-standalone-input>
+        `);
+  });
+  it('renders the input field with the left icon', async () => {
+    const page = await newSpecPage({
+      components: [TttxInput],
+      html: '<tttx-standalone-input iconleft="info" />',
+    });
+    expect(page.root).toEqualHtml(`
+        <tttx-standalone-input iconleft="info">
+            <label class="inputBlock">
+              <span class="optional">
+                (optional)
+              </span>
+              <div class="icon-left">
+                <tttx-icon color="grey" icon="info"></tttx-icon>
+              </div>
+              <input class="standalone" type="text">
+              <span class="errorBubble">
+                <span class="material-symbols-rounded validationicon">
+                  warning
+                </span>
+              </span>
+            </label>
+        </tttx-standalone-input>
+        `);
+  });
+  it('renders the input field with the right icon', async () => {
+    const page = await newSpecPage({
+      components: [TttxInput],
+      html: '<tttx-standalone-input iconright="info" />',
+    });
+    expect(page.root).toEqualHtml(`
+        <tttx-standalone-input iconright="info">
+            <label class="inputBlock">
+              <span class="optional">
+                (optional)
+              </span>
+              <input class="standalone" type="text">
+              <div class="icon-right">
+                <tttx-icon color="grey" icon="info"></tttx-icon>
+              </div>
+              <span class="errorBubble">
+                <span class="material-symbols-rounded validationicon">
+                  warning
+                </span>
+              </span>
+            </label>
+        </tttx-standalone-input>
+        `);
+  });
+  it('renders the input field with an error message', async () => {
+    const page = await newSpecPage({
+      components: [TttxInput],
+      html: '<tttx-standalone-input required showerrormsg errormsg="The field is required" />',
+    });
+    expect(page.root).toEqualHtml(`
+        <tttx-standalone-input errormsg="The field is required" required="" showerrormsg="">
+            <label class="inputBlock">
+              <input class="invalid standalone" required="" type="text">
+              <span class="errorBubble visible">
+                <span class="material-symbols-rounded validationicon">
+                  warning
+                </span>
+                The field is required
+              </span>
+            </label>
+        </tttx-standalone-input>
+        `);
+  });
+  it('can trigger onInput handler', async () => {
+    const page = await newSpecPage({
+      components: [TttxInput],
+      html: '<tttx-standalone-input />',
+    });
+    const callbackFn = jest.fn();
+    page.doc.addEventListener('valueChanged', callbackFn);
+    const input = page.root.querySelector('input');
+    input.value = 'a';
+    const event = new CustomEvent('input', { composed: true, bubbles: true });
+    input.dispatchEvent(event);
+    expect(callbackFn).toHaveBeenCalled();
+  });
+  it('can trigger onFocus handler', async () => {
+    const page = await newSpecPage({
+      components: [TttxInput],
+      html: '<tttx-standalone-input />',
+    });
+    const callbackFn = jest.fn();
+    page.doc.addEventListener('focusChanged', callbackFn);
+    const input = page.root.querySelector('input');
+    input.focus();
+    const event = new CustomEvent('focus', { composed: true, bubbles: true });
+    input.dispatchEvent(event);
+    expect(callbackFn).toHaveBeenCalled();
+  });
+  it('can trigger onBlur handler', async () => {
+    const page = await newSpecPage({
+      components: [TttxInput],
+      html: '<tttx-standalone-input />',
+    });
+    const callbackFn = jest.fn();
+    page.doc.addEventListener('blurChanged', callbackFn);
+    const input = page.root.querySelector('input');
+    input.blur();
+    const event = new CustomEvent('blur', { composed: true, bubbles: true });
+    input.dispatchEvent(event);
+    expect(callbackFn).toHaveBeenCalled();
+  });
+  it('can trigger onInvalid handler', async () => {
+    const page = await newSpecPage({
+      components: [TttxInput],
+      html: '<tttx-standalone-input />',
+    });
+    const callbackFn = jest.fn();
+    page.doc.addEventListener('invalidChanged', callbackFn);
+    const input = page.root.querySelector('input');
+    // Doesn't work:
+    // input.setCustomValidity('required');
+    // input.checkValidity();
+    const event = new CustomEvent('invalid', { composed: true, bubbles: true });
+    input.dispatchEvent(event);
+    expect(callbackFn).toHaveBeenCalled();
+  });
+});

package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.js

@@ -42,7 +42,6 @@ export class TttxInput {
     this.blurChanged.emit(target.value);
   }
   handleInvalid(event) {
-    event.preventDefault();
     const target = event.target;
     this.invalidChanged.emit(target.value);
   }

package/dist/collection/components/molecules/tttx-table/test/tttx-table.e2e.js

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

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

@@ -0,0 +1,166 @@
+// SPACING
+$spacing-unit: 4px;
+
+// REGULAR
+$horizontal-spacing: $spacing-unit * 4;
+$vertical-spacing: $spacing-unit * 2;
+$base-padding: $vertical-spacing $horizontal-spacing;
+$base-height: $spacing-unit * 9;
+$component-spacing: $spacing-unit * 4;
+
+// SMALL
+$horizontal-spacing-sm: $spacing-unit * 2;
+$vertical-spacing-sm: $spacing-unit * 1;
+$base-padding-sm: $vertical-spacing-sm $horizontal-spacing-sm;
+$base-height-sm: $spacing-unit * 7;
+
+// COLOURS
+$grey-0: #212121;
+$grey-1: #363636;
+$grey-2: #4c4c4c;
+$grey-3: #636363;
+$grey-4: #757575;
+$grey-5: #9e9e9e;
+$grey-6: #aeaeae;
+$grey-7: #c8c8c8;
+$grey-8: #e3e3e3;
+$grey-9: #f0f0f0;
+
+$white: white;
+$black: $grey-0;
+$transparent: transparent;
+
+$blue-0: #00187c;
+$blue-1: #032e8c;
+$blue-2: #0849a3;
+$blue-3: #0951a8;
+$blue-4: #1169ba;
+$blue-5: #1479c6;
+$blue-6: #5194d2;
+$blue-7: #7aacdd;
+$blue-8: #b9d5ed;
+$blue-9: #e7f1f9;
+
+$red-0: #7c0000;
+$red-1: #8c0000;
+$red-2: #a30000;
+$red-3: #a80000;
+$red-4: #ba0000;
+$red-5: #dc0000;
+$red-6: #d25151;
+$red-7: #dd7a7a;
+$red-8: #edc1c1;
+$red-9: #f9e7e7;
+
+$black-1: #e6e6e6;
+
+$brand: $blue-0;
+$accent: $blue-5;
+$accent-selected: $blue-9;
+$error: $red-5;
+
+$severity-critical: #dc0000;
+$severity-warning: #f59500;
+$severity-success: #a2bb31;
+$severity-info: $accent;
+
+$ui-primary: $black;
+$ui-secondary: $grey-4;
+$ui-disabled: $grey-2;
+$ui-placeholder: $grey-5;
+
+$ui-background: $grey-9;
+$ui-sheet: $white;
+$ui-border: #d5d5d5;
+
+// BORDERS
+$ui-border-radius: 4px;
+$ui-border-width: 1px;
+
+// TYPOGRAPHY
+$font-size-default: 16px;
+$font-size-small: 14px;
+
+.material-symbols-rounded {
+    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}
+
+.skeleton {
+  animation: skeleton-loading 1s linear infinite alternate;
+  border-radius: 4px;
+  width: 100%;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-color: hsl(200, 20%, 80%);
+  }
+
+  100% {
+    background-color: hsl(200, 20%, 95%);
+  }
+}
+
+:host {
+  display: block;
+}
+
+table {
+  box-sizing: border-box;
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  border: 1px solid #ddd;
+  border-bottom: none;
+}
+
+thead tr {
+  height: 52px;
+  color: #757575;
+}
+
+tbody tr {
+  height: 48px;
+  color: #212121;
+}
+
+tr {
+
+  /* Cell typography */
+  font-family: 'Roboto', sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+
+  /* center the contents vertically */
+  display: flex;
+  align-items: center;
+
+  /* Border */
+  border-bottom: 1px solid #ddd;
+
+}
+
+.selected {
+  background-color: #F0F0F0;
+}
+
+.checked {
+  background-color: #e7f1f9;
+}
+
+td,
+th {
+  min-width: 300px;
+  margin-left: 16px;
+  display: flex;
+  align-items: left;
+}
+
+.skeleton {
+  height: 24px;
+  display: block;
+}
+
+.align-right {
+  margin-left: auto;
+}

package/dist/collection/components/molecules/tttx-table/tttx-table.js

@@ -0,0 +1,174 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Host, h } from '@stencil/core';
+export class TttxTable {
+  constructor() {
+    this.headers = [];
+    this.data = [];
+    this.loading = false;
+    this.selected = -1;
+  }
+  handleKeyDown(ev) {
+    if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
+      this.updateSelectedIndex(ev.key);
+      this.emitRowSelected();
+    }
+  }
+  updateSelectedIndex(key) {
+    if (this.selected === -1) {
+      this.selected = 0;
+    }
+    else {
+      const isArrowDown = key === 'ArrowDown';
+      const isArrowUp = key === 'ArrowUp';
+      if (isArrowDown && this.selected < this.data.length - 1) {
+        this.selected++;
+      }
+      else if (isArrowUp && this.selected > 0) {
+        this.selected--;
+      }
+    }
+  }
+  emitRowSelected() {
+    this.rowSelected.emit(this.data[this.selected]);
+  }
+  rowSelectedHandler(row) {
+    this.rowSelected.emit(row);
+    this.selected = this.data.findIndex((item) => item === row);
+  }
+  headerClickedHandler(key) {
+    this.headerClicked.emit(key);
+  }
+  render() {
+    return (h(Host, null, h("table", null, h("thead", null, h("tr", null, this.loading ?
+      [1, 2, 3].map(() => (h("th", null, h("div", { class: "skeleton" })))) :
+      this.headers && this.headers.map((header) => (h("th", { scope: "col", onClick: () => this.headerClickedHandler(header.key) }, header.label))))), h("tbody", null, this.loading ?
+      [1, 2, 3].map(() => (h("tr", null, h("td", null, h("div", { class: "skeleton" })), h("td", null, h("div", { class: "skeleton" })), h("td", null, h("div", { class: "skeleton" }))))) :
+      Object.keys(this.data).map((key, index) => (h("tr", { class: index === this.selected ? 'selected' : '', onClick: () => this.rowSelectedHandler(this.data[key]) }, this.headers.map((header) => (h("td", null, this.data[key][header.key], " ", header.actions && h("tttx-icon", { class: "align-right", icon: "more_vert" }, h("div", { slot: "popover" }, h("tttx-popover-content", { header: "The humble egg", body: "Most arthropods such as insects, vertebrates (excluding live-bearing mammals), and mollusks lay eggs, although some, such as scorpions, do not.", linkcontext: "Wikipedia_egg", linktext: "Learn more about eggs" })))))))))))));
+  }
+  static get is() { return "tttx-table"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-table.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-table.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "headers": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "any[]",
+          "resolved": "any[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      },
+      "data": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "any[]",
+          "resolved": "any[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      },
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "loading",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "selected": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "-1"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "rowSelected",
+        "name": "rowSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "headerClicked",
+        "name": "headerClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "handleKeyDown",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/molecules/tttx-table/tttx-table.stories.js

@@ -0,0 +1,81 @@
+import { withActions } from '@storybook/addon-actions/decorator';
+const templateData = [
+  { name: 'John', age: 25, faveColor: 'blue' },
+  { name: 'Jane', age: 30, faveColor: 'green' },
+  { name: 'Bob', age: 40, faveColor: 'red' },
+];
+const templateHeaders = [
+  {
+    key: 'name',
+    label: 'Name'
+  },
+  {
+    key: 'age',
+    label: 'Age'
+  },
+  {
+    key: 'faveColor',
+    label: '',
+    actions: [
+      {
+        label: 'Edit',
+        icon: 'edit',
+        action: 'edit'
+      },
+      {
+        label: 'Delete',
+        icon: 'delete',
+        action: 'delete'
+      }
+    ]
+  }
+];
+export default {
+  title: 'Molecules/Table',
+  component: 'tttx-table',
+  argTypes: {
+    loading: {
+      control: { type: 'boolean' },
+    }
+  },
+  parameters: {
+    actions: {
+      handles: ['rowSelected', 'headerClicked'],
+    },
+  },
+  decorators: [withActions],
+};
+const TemplateTable = ({ headers, data, loading, selected }) => `
+
+<tttx-table
+  id="table"
+></tttx-table>
+
+<script>
+  if (!table) {
+    const table = document.getElementById('table');
+  }  
+  table.headers = ${JSON.stringify(headers)};
+  table.data = ${JSON.stringify(data)};
+  table.loading = ${loading};
+  table.selected = ${selected};
+</script>
+
+`;
+export const BasicTable = TemplateTable.bind({});
+BasicTable.args = {
+  headers: templateHeaders,
+  data: templateData
+};
+export const TablePreSelected = TemplateTable.bind({});
+TablePreSelected.args = {
+  headers: templateHeaders,
+  data: templateData,
+  selected: 1
+};
+export const TableLoading = TemplateTable.bind({});
+TableLoading.args = {
+  headers: templateHeaders,
+  data: templateData,
+  loading: true
+};

package/dist/components/index.d.ts

@@ -2,8 +2,10 @@
 export { TttxButton as TttxButton } from '../types/components/atoms/tttx-button/tttx-button';
 export { TttxIcon as TttxIcon } from '../types/components/atoms/tttx-icon/tttx-icon';
 export { TttxKeyvalueBlock as TttxKeyvalueBlock } from '../types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block';
+export { TttxList as TttxList } from '../types/components/molecules/tttx-list/tttx-list';
 export { TttxLoadingSpinner as TttxLoadingSpinner } from '../types/components/atoms/tttx-loading-spinner/tttx-loading-spinner';
 export { TttxInput as TttxStandaloneInput } from '../types/components/molecules/tttx-standalone-input/tttx-standalone-input';
+export { TttxTable as TttxTable } from '../types/components/molecules/tttx-table/tttx-table';
 
 /**
  * Used to manually set the base path where assets can be found.
@@ -17,15 +19,6 @@ export { TttxInput as TttxStandaloneInput } from '../types/components/molecules/
  */
 export declare const setAssetPath: (path: string) => void;
 
-/**
- * Used to specify a nonce value that corresponds with an application's CSP.
- * When set, the nonce will be added to all dynamically created script and style tags at runtime.
- * Alternatively, the nonce value can be set on a meta tag in the DOM head
- * (<meta name="csp-nonce" content="{ nonce value here }" />) which
- * will result in the same behavior.
- */
-export declare const setNonce: (nonce: string) => void
-
 export interface SetPlatformOptions {
   raf?: (c: FrameRequestCallback) => number;
   ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;

package/dist/components/index.js

@@ -1,6 +1,8 @@
-export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
 export { TttxButton, defineCustomElement as defineCustomElementTttxButton } from './tttx-button.js';
 export { TttxIcon, defineCustomElement as defineCustomElementTttxIcon } from './tttx-icon.js';
 export { TttxKeyvalueBlock, defineCustomElement as defineCustomElementTttxKeyvalueBlock } from './tttx-keyvalue-block.js';
+export { TttxList, defineCustomElement as defineCustomElementTttxList } from './tttx-list.js';
 export { TttxLoadingSpinner, defineCustomElement as defineCustomElementTttxLoadingSpinner } from './tttx-loading-spinner.js';
 export { TttxStandaloneInput, defineCustomElement as defineCustomElementTttxStandaloneInput } from './tttx-standalone-input.js';
+export { TttxTable, defineCustomElement as defineCustomElementTttxTable } from './tttx-table.js';

package/dist/components/tttx-keyvalue-block.js

@@ -29,20 +29,17 @@ const TttxKeyvalueBlock$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     for (let i = 0; i < values.length; i++) {
       const value = values[i];
       if (this.horizontal) {
-        elements.push(h("div", null, h("dt", { class: 'mainTitle' }, value.title), h("dt", { class: 'subTitle' }, value.subTitle), h("dd", null, value.data)));
+        elements.push(h("div", null, h("dt", { class: "mainTitle" }, value.title), h("dt", { class: "subTitle" }, value.subTitle), h("dd", null, value.data)));
       }
       else {
-        elements.push(h("dt", { class: 'mainTitle' }, value.title));
-        elements.push(h("dt", { class: 'subTitle' }, value.subTitle));
+        elements.push(h("dt", { class: "mainTitle" }, value.title));
+        elements.push(h("dt", { class: "subTitle" }, value.subTitle));
         elements.push(h("dd", null, value.data));
       }
     }
     return elements;
   }
   render() {
-    if (!this.keyvalues) {
-      return;
-    }
     let values;
     if (typeof this.keyvalues === 'string') {
       values = JSON.parse(this.keyvalues);
@@ -57,7 +54,7 @@ const TttxKeyvalueBlock$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     else {
       elements = this.renderSingleElements(values);
     }
-    return (h(Host, null, h("dl", { class: this.horizontal ? 'horizontal' : null }, elements)));
+    return (h(Host, null, h("dl", { class: this.horizontal ? "horizontal" : null }, elements)));
   }
   static get style() { return tttxKeyvalueBlockCss; }
 }, [1, "tttx-keyvalue-block", {

package/dist/components/tttx-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TttxList extends Components.TttxList, HTMLElement {}
+export const TttxList: {
+  prototype: TttxList;
+  new (): TttxList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;