@3t-transform/threeteeui 0.0.24 → 0.0.25

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

@@ -1,146 +0,0 @@
-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-table/test/tttx-table.e2e.js

@@ -1,9 +0,0 @@
-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

@@ -1,166 +0,0 @@
-// 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

@@ -1,174 +0,0 @@
-// 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

@@ -1,81 +0,0 @@
-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/tttx-table.js

@@ -1,85 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './tttx-icon2.js';
-
-const tttxTableCss = "// 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{font-family:'Roboto', sans-serif;font-weight:400;font-size:16px;display:flex;align-items:center;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}";
-
-const TttxTable$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.rowSelected = createEvent(this, "rowSelected", 7);
-    this.headerClicked = createEvent(this, "headerClicked", 7);
-    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 style() { return tttxTableCss; }
-}, [1, "tttx-table", {
-    "headers": [16],
-    "data": [16],
-    "loading": [4],
-    "selected": [2]
-  }, [[4, "keydown", "handleKeyDown"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tttx-table", "tttx-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tttx-table":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TttxTable$1);
-      }
-      break;
-    case "tttx-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const TttxTable = TttxTable$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { TttxTable, defineCustomElement };