@3t-transform/threeteeui 0.0.21 → 0.0.23

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-button2.js

@@ -1,56 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$1 } from './tttx-icon2.js';
-
-const tttxButtonCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:400}.button-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #D5D5D5}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #D5D5D5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:hover{background:#146EB3;border:1px solid #146EB3}.primary:active{background:#1464A2;border:1px solid #1464A2}.borderless{background:transparent;border:none;color:#212121}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.danger{background:#DC0000;border:1px solid #DC0000;color:white}.danger:hover{background:#C60000;border:1px solid #C60000}.danger:active{background:#B00000;border:1px solid #B00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}:host{display:inline-block}.spacingleft{margin-left:8px}";
-
-const TttxButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this._iconcolor = 'black';
-    this.notext = undefined;
-    this.icon = undefined;
-    this.iconposition = 'left';
-    this.design = 'default';
-  }
-  componentWillLoad() {
-    this._design = this.design;
-    const designs = ['primary', 'default', 'disabled', 'danger', 'borderless'];
-    if (!designs.includes(this.design)) {
-      this._design = 'default';
-    }
-    if (this._design === 'primary' || this._design === 'danger') {
-      this._iconcolor = 'white';
-    }
-  }
-  render() {
-    return (h(Host, null, h("button", { class: `button ${this._design} ${this.icon ? 'withicon' : ''} ${this.icon && this.iconposition ? 'icon' + this.iconposition : ''}  ${this.notext ? 'notext' : ''}` }, this.icon && this.iconposition === 'left' && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))), !this.notext && h("div", { class: "button-content" }, h("slot", null)), this.icon && this.iconposition === 'right' && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))))));
-  }
-  static get style() { return tttxButtonCss; }
-}, [1, "tttx-button", {
-    "notext": [4],
-    "icon": [1],
-    "iconposition": [1],
-    "design": [1]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tttx-button", "tttx-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tttx-button":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TttxButton);
-      }
-      break;
-    case "tttx-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
-}
-
-export { TttxButton as T, defineCustomElement as d };

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

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

package/dist/components/tttx-checkbox.js

@@ -1,46 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-
-const tttxCheckboxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.focused{border-color:#1479c6}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#dc0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger{color:#dc0000}.optional{color:#757575;font-weight:normal}label.inputBlock{display:block;position:relative;line-height:21px}label{font-weight:500;font-size:16px}input:not([type=submit]){font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid:invalid,input.standalone.invalid{border:1px solid #dc0000}input~.errorBubble{min-height:27px;position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}input~.errorBubble:not(.visible){visibility:hidden}input~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}input:focus{border-color:#1479c6}:host{display:block}.spacing{margin-bottom:16px}";
-
-const TttxCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.valueChanged = createEvent(this, "valueChanged", 7);
-    this.value = undefined;
-    this.label = undefined;
-    this.required = undefined;
-  }
-  handleClick(event) {
-    const target = event.target;
-    this.value = target.checked;
-    this.valueChanged.emit(target.checked);
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "field spacing" }, this.label && (h("label", { class: "label" }, this.label, !this.required ? h("span", { class: "optional" }, " (optional)") : '')), h("input", { type: "checkbox", class: "input", onChange: event => this.handleClick(event), checked: this.value }))));
-  }
-  static get style() { return tttxCheckboxCss; }
-}, [1, "tttx-checkbox", {
-    "value": [4],
-    "label": [1],
-    "required": [4]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tttx-checkbox"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tttx-checkbox":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TttxCheckbox$1);
-      }
-      break;
-  } });
-}
-
-const TttxCheckbox = TttxCheckbox$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { TttxCheckbox, defineCustomElement };

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

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