@3t-transform/threeteeui 0.0.21 → 0.0.23

package/dist/cjs/tttx-list.cjs.entry.js

@@ -1,198 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-bf777121.js');
-
-const tttxListCss = ".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}:host{display:flex;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}.tttx-list__row .generic-template__content{width:100%;display:flex;align-items:center;gap:8px}.tttx-list__row: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}.load-indicator{display:flex;justify-content:center}";
-
-const TttxList = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.listPaginate = index.createEvent(this, "listPaginate", 7);
-    this.listSelectedEvent = index.createEvent(this, "listSelectedEvent", 7);
-    this.listItemClick = index.createEvent(this, "listItemClick", 7);
-    this.rowCount = 0;
-    this.name = undefined;
-    this.selectable = undefined;
-    this.items = [];
-    this.selectedIds = [];
-    this.loading = true;
-    this.lastPage = false;
-  }
-  listLoadHandler(event) {
-    if (event.detail.name !== this.name)
-      return;
-    this.items = [...this.items, ...event.detail.items];
-    this.loading = false;
-    this.lastPage = event.detail.lastPage;
-    this.renderRows(event.detail.items);
-    if (this.scrollableParent.clientHeight === this.scrollableParent.scrollHeight)
-      this.listPaginateHandler();
-  }
-  listPaginateHandler() {
-    // We don't want to emit an event to load the next page if this is the last page, or if we're already loading
-    if (this.lastPage || this.loading)
-      return;
-    this.loading = true;
-    this.listPaginate.emit({ name: this.name });
-  }
-  listClearDataCacheHandler(event) {
-    if (event.detail.name !== this.name)
-      return;
-    this.items = [];
-    this.selectedIds = [];
-    this.listItemContainer()
-      .querySelectorAll('.tttx-list__row')
-      .forEach((node) => {
-      node.remove();
-    });
-    this.rowCount = 0;
-    this.lastPage = false;
-    this.loading = false;
-  }
-  listActionSelectedEventHandler(event) {
-    if (event.detail.name !== this.name || !this.selectable || this.selectedIds.length === 0)
-      return;
-    const selectedRows = this.selectedIds.map(id => {
-      return this.items[id];
-    });
-    if (event.detail.removeRows)
-      this.removeSelectedRows();
-    this.listSelectedEvent.emit({
-      name: this.name,
-      eventName: event.detail.eventName,
-      selectedRows,
-    });
-  }
-  removeSelectedRows() {
-    const orderedSelectedIds = [...this.selectedIds].sort((a, b) => {
-      return b - a;
-    });
-    orderedSelectedIds.forEach(itemIndex => {
-      this.items.splice(itemIndex, 1);
-      this.listItemContainer().removeChild(this.listItemContainer().querySelector(`[data-row-id="${itemIndex}"]`));
-      // If this removes the scrollbar and we're not on the last page, load in a new page
-      if (this.scrollableParent.clientHeight === this.scrollableParent.scrollHeight)
-        this.listPaginateHandler();
-    });
-    // Empty selected ids with mutation rather than assignment to avoid unecessary component rerender
-    this.selectedIds.splice(0, this.selectedIds.length);
-  }
-  listItemClickHandler(itemData) {
-    if (this.selectedIds.length !== 0)
-      return;
-    this.listItemClick.emit({ itemData, name: this.name });
-  }
-  componentWillLoad() {
-    this.template = this.host.querySelector('template');
-    this.scrollableParent = this.getScrollableParent(this.host);
-    const scrollableContext = this.scrollableParent === document.scrollingElement ? document : this.scrollableParent;
-    scrollableContext.addEventListener('scroll', this.scrollHandler.bind(this));
-    window.addEventListener('resize', this.scrollHandler.bind(this));
-  }
-  componentDidLoad() {
-    // Emit event to load first page
-    this.listPaginate.emit({ name: this.name });
-  }
-  listItemContainer() {
-    return this.host.shadowRoot.querySelector('.list-item-container');
-  }
-  async scrollHandler() {
-    const { clientHeight, scrollTop, scrollHeight } = this.scrollableParent;
-    if (Math.abs(scrollHeight - clientHeight - scrollTop) < 26)
-      this.listPaginateHandler();
-  }
-  isScrollable(node) {
-    const hasScrollbar = ['scroll', 'auto'].includes(node.style.overflowY);
-    return hasScrollbar;
-  }
-  getScrollableParent(node) {
-    if (!node || node === document.body) {
-      return document.scrollingElement;
-    }
-    else {
-      return this.isScrollable(node) ? node : this.getScrollableParent(node.parentElement);
-    }
-  }
-  appendRowCheckbox(rowContainer) {
-    if (!this.selectable)
-      return;
-    const rowId = this.rowCount;
-    const checkbox = document.createElement('input');
-    checkbox.setAttribute('type', 'checkbox');
-    checkbox.addEventListener('click', e => {
-      e.stopPropagation();
-      if (e.target.checked) {
-        this.selectedIds = [...this.selectedIds, rowId];
-        rowContainer.classList.add('selected');
-      }
-      else {
-        this.selectedIds = this.selectedIds.filter(id => {
-          return id !== rowId;
-        });
-        rowContainer.classList.remove('selected');
-      }
-    });
-    rowContainer.setAttribute('data-row-id', `${rowId}`);
-    this.rowCount++;
-    rowContainer.appendChild(checkbox);
-  }
-  appendSeededTemplate(rowData, rowContainer) {
-    this.template.childNodes.forEach(child => {
-      const clone = child.cloneNode(false);
-      if (clone.getAttribute('data-fields')) {
-        const fields = clone.getAttribute('data-fields').replace(/\s/g, '').split(',');
-        const filteredRowData = Object.fromEntries(fields.map((field) => {
-          return [field, rowData[field]];
-        }));
-        clone.setAttribute('row-data', JSON.stringify(filteredRowData));
-      }
-      else {
-        clone.setAttribute('row-data', JSON.stringify(rowData));
-      }
-      rowContainer.appendChild(clone);
-    });
-  }
-  appendGenericTemplate(rowData, rowContainer) {
-    const row = document.createElement('div');
-    row.classList.add('generic-template__content');
-    row.textContent = rowData.text;
-    rowContainer.appendChild(row);
-    if (!rowData.icon)
-      return;
-    const icon = document.createElement('span');
-    icon.classList.add('material-symbols-rounded');
-    icon.textContent = rowData.icon;
-    if (rowData.iconColor)
-      icon.style['color'] = rowData.iconColor;
-    row.prepend(icon);
-  }
-  row(rowData) {
-    const rowContainer = document.createElement('div');
-    rowContainer.classList.add('tttx-list__row');
-    rowContainer.addEventListener('click', () => {
-      this.listItemClickHandler(rowData);
-    });
-    this.appendRowCheckbox(rowContainer);
-    this.template ? this.appendSeededTemplate(rowData, rowContainer) : this.appendGenericTemplate(rowData, rowContainer);
-    return rowContainer;
-  }
-  renderRows(batchData) {
-    batchData.forEach(rowData => {
-      this.listItemContainer().appendChild(this.row(rowData));
-    });
-  }
-  loadIndicator() {
-    if (!this.loading)
-      return;
-    return index.h("div", { class: "load-indicator" }, index.h("tttx-loading-spinner", { size: 'large' }));
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "list-item-container", tabindex: "0" }, !this.loading && this.items.length === 0 ? 'No data to display' : undefined), this.loadIndicator()));
-  }
-  get host() { return index.getElement(this); }
-};
-TttxList.style = tttxListCss;
-
-exports.tttx_list = TttxList;

package/dist/cjs/tttx-popover-content.cjs.entry.js

@@ -1,23 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-bf777121.js');
-
-const tttxPopoverContentCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:block;max-width:400px}h4{margin:0;font-size:15px;font-weight:700;color:black;margin-bottom:4px}p{margin:0;font-size:14px;font-weight:normal;color:black;margin-bottom:4px}.linky{color:#1479c6;text-decoration:none;cursor:pointer}";
-
-const TttxPopoverContent = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.header = undefined;
-    this.body = undefined;
-    this.linkcontext = undefined;
-    this.linktext = undefined;
-  }
-  render() {
-    return (index.h(index.Host, null, this.header && index.h("h4", null, this.header), this.body && index.h("p", null, this.body), this.linkcontext && (index.h("span", { class: "linky", onClick: evt => console.log(this.linkcontext, evt) }, this.linktext || 'More Information'))));
-  }
-};
-TttxPopoverContent.style = tttxPopoverContentCss;
-
-exports.tttx_popover_content = TttxPopoverContent;

package/dist/cjs/tttx-table.cjs.entry.js

@@ -1,60 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-bf777121.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 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.rowSelected = index.createEvent(this, "rowSelected", 7);
-    this.headerClicked = index.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 (index.h(index.Host, null, index.h("table", null, index.h("thead", null, index.h("tr", null, this.loading ?
-      [1, 2, 3].map(() => (index.h("th", null, index.h("div", { class: "skeleton" })))) :
-      this.headers && this.headers.map((header) => (index.h("th", { scope: "col", onClick: () => this.headerClickedHandler(header.key) }, header.label))))), index.h("tbody", null, this.loading ?
-      [1, 2, 3].map(() => (index.h("tr", null, index.h("td", null, index.h("div", { class: "skeleton" })), index.h("td", null, index.h("div", { class: "skeleton" })), index.h("td", null, index.h("div", { class: "skeleton" }))))) :
-      Object.keys(this.data).map((key, index$1) => (index.h("tr", { class: index$1 === this.selected ? 'selected' : '', onClick: () => this.rowSelectedHandler(this.data[key]) }, this.headers.map((header) => (index.h("td", null, this.data[key][header.key], " ", header.actions && index.h("tttx-icon", { class: "align-right", icon: "more_vert" }, index.h("div", { slot: "popover" }, index.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" })))))))))))));
-  }
-};
-TttxTable.style = tttxTableCss;
-
-exports.tttx_table = TttxTable;

package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.css

@@ -1,30 +0,0 @@
-.material-symbols-rounded {
-  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
-}
-
-:host {
-  display: block;
-  max-width: 400px;
-}
-
-h4 {
-  margin: 0;
-  font-size: 15px;
-  font-weight: 700;
-  color: black;
-  margin-bottom: 4px;
-}
-
-p {
-  margin: 0;
-  font-size: 14px;
-  font-weight: normal;
-  color: black;
-  margin-bottom: 4px;
-}
-
-.linky {
-  color: #1479c6;
-  text-decoration: none;
-  cursor: pointer;
-}

package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.js

@@ -1,97 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Host, h } from '@stencil/core';
-export class TttxPopoverContent {
-  constructor() {
-    this.header = undefined;
-    this.body = undefined;
-    this.linkcontext = undefined;
-    this.linktext = undefined;
-  }
-  render() {
-    return (h(Host, null, this.header && h("h4", null, this.header), this.body && h("p", null, this.body), this.linkcontext && (h("span", { class: "linky", onClick: evt => console.log(this.linkcontext, evt) }, this.linktext || 'More Information'))));
-  }
-  static get is() { return "tttx-popover-content"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-popover-content.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-popover-content.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "header": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "header",
-        "reflect": false
-      },
-      "body": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "body",
-        "reflect": false
-      },
-      "linkcontext": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "linkcontext",
-        "reflect": false
-      },
-      "linktext": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "linktext",
-        "reflect": false
-      }
-    };
-  }
-}

package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.stories.js

@@ -1,23 +0,0 @@
-export default {
-  title: 'Atoms/PopoverContent',
-  component: 'tttx-popover-content',
-  argTypes: {
-    header: {
-      control: {
-        type: 'text',
-      },
-    },
-    body: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-const Template = ({ header, body, linkcontext }) => `<tttx-popover-content header="${header}" body="${body}" linkcontext="${linkcontext}" />`;
-export const Basic = Template.bind({});
-Basic.args = {
-  header: 'HEADER',
-  body: 'BODY',
-  linkcontext: 'TESTING123',
-};

package/dist/collection/components/atoms/ttx-checkbox/tttx-checkbox.css

@@ -1,181 +0,0 @@
-.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;
-}
-
-/* iPhone OS fix */
-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;
-}