@3t-transform/threeteeui 0.0.21 → 0.0.23

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

@@ -1,174 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Host, h } from '@stencil/core';
-export class TttxInputCalendar {
-  constructor() {
-    // an array of month numbers mapped to their names
-    this.monthNames = Array.from({ length: 12 }, (_, i) => i + 1).map((month) => {
-      const date = new Date(0);
-      date.setUTCMonth(month - 1);
-      return date.toLocaleString('default', { month: 'long' });
-    });
-    this.onClickOutside = (event) => {
-      if (!this.el.contains(event.target) && this.showCalendar) {
-        this.showCalendar = false;
-      }
-    };
-    this.onFocusIn = (event) => {
-      if (!this.el.contains(event.target) && this.showCalendar) {
-        this.showCalendar = false;
-      }
-    };
-    this.previousHandler = () => {
-      if (this.selectedMonth === 1) {
-        this.selectedMonth = 12;
-        this.selectedYear--;
-      }
-      else {
-        this.selectedMonth--;
-      }
-    };
-    this.nextHandler = () => {
-      if (this.selectedMonth === 12) {
-        this.selectedMonth = 1;
-        this.selectedYear++;
-      }
-      else {
-        this.selectedMonth++;
-      }
-    };
-    this.months = false;
-    this.years = false;
-    this.showCalendar = false;
-    this.selectedYear = new Date().getFullYear();
-    this.selectedMonth = new Date().getMonth() + 1;
-  }
-  componentDidLoad() {
-    const slot = this.el.shadowRoot.querySelector('slot');
-    if (slot) {
-      const assignedElements = slot.assignedElements();
-      if (assignedElements[0]) {
-        assignedElements[0].addEventListener('click', (event) => {
-          event.preventDefault();
-          this.showCalendar = !this.showCalendar;
-        });
-      }
-    }
-    document.addEventListener('click', this.onClickOutside);
-  }
-  disconnectedCallback() {
-    document.removeEventListener('click', this.onClickOutside);
-  }
-  getDaysAndDates(year, month) {
-    const firstDayOfMonth = new Date(year, month - 1, 1);
-    const lastDayOfMonth = new Date(year, month, 0);
-    const daysAndDates = [];
-    for (let day = firstDayOfMonth; day <= lastDayOfMonth; day.setDate(day.getDate() + 1)) {
-      const weekDay = day.getDay();
-      const date = day.getDate();
-      const dayAndDate = {
-        day: weekDay,
-        date: date
-      };
-      daysAndDates.push(dayAndDate);
-    }
-    return daysAndDates;
-  }
-  clickDateHandler(event) {
-    const { year, month, day } = event;
-    const selectedDate = new Date(year, month - 1, day + 1);
-    this.inputElement.valueAsDate = selectedDate;
-    this.showCalendar = false;
-  }
-  render() {
-    const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-    const daysAndDates = this.getDaysAndDates(this.selectedYear, this.selectedMonth);
-    const currentYear = new Date().getFullYear();
-    const years = Array.from({ length: 11 }, (_, i) => currentYear - 5 + i);
-    const calendarGrid = [];
-    let currentWeek = [];
-    // Fill empty days before the first day of the month
-    for (let i = 0; i < daysAndDates[0].day; i++) {
-      currentWeek.push(h("td", null));
-    }
-    // Fill the calendar with days and dates
-    daysAndDates.forEach(({ day, date }) => {
-      currentWeek.push(h("td", null, h("span", { onClick: () => this.clickDateHandler({ year: this.selectedYear, month: this.selectedMonth, day: date }) }, date)));
-      if (day === 6) {
-        calendarGrid.push(h("tr", null, currentWeek));
-        currentWeek = [];
-      }
-    });
-    // Fill the remaining empty days in the last week
-    if (currentWeek.length > 0) {
-      while (currentWeek.length < 7) {
-        currentWeek.push(h("td", null));
-      }
-      calendarGrid.push(h("tr", null, currentWeek));
-    }
-    return (h(Host, null, h("div", { class: "calcontainer" }, h("slot", null), h("div", { class: `calendar ${this.showCalendar ? 'calendar-visible' : ''}` }, h("div", { class: "calendar-header" }, h("tttx-button", { onClick: this.previousHandler, design: "borderless", icon: "chevron_left", notext: true }), this.months && h("select", { id: "month-select", onInput: (event) => {
-        this.selectedMonth = parseInt(event.target.value);
-      } }, Array.from({ length: 12 }, (_, i) => i + 1).map((month) => (h("option", { value: month, selected: month === this.selectedMonth }, this.monthNames[month - 1])))), this.years && h("select", { id: "year-select", onInput: (event) => {
-        this.selectedYear = parseInt(event.target.value);
-      } }, years.map((year) => (h("option", { value: year, selected: year === this.selectedYear }, year)))), h("div", { class: "date-display" }, this.monthNames[this.selectedMonth - 1], " ", this.selectedYear), h("tttx-button", { onClick: this.nextHandler, design: "borderless", icon: "chevron_right", notext: true })), h("table", { class: "calendar-table" }, h("thead", null, h("tr", null, daysOfWeek.map((day) => (h("th", null, day))))), h("tbody", null, calendarGrid))))));
-  }
-  static get is() { return "tttx-input-calendar"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-input-calendar.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-input-calendar.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "months": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "months",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "years": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "years",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "showCalendar": {},
-      "selectedYear": {},
-      "selectedMonth": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-}

package/dist/collection/components/molecules/tttx-input-calendar/tttx-input-calendar.stories.js

@@ -1,27 +0,0 @@
-import { withActions } from '@storybook/addon-actions/decorator';
-export default {
-  title: 'molecules/Calendar',
-  component: 'tttx-input-calendar',
-  argTypes: {
-    required: {
-      control: {
-        type: 'boolean'
-      }
-    }
-  },
-  parameters: {
-    actions: {
-      handles: ['valueChanged', 'focusChanged', 'blurChanged'],
-    },
-  },
-  decorators: [withActions],
-};
-export const BasicCalendar = ({ required }) => {
-  return `<tttx-input-calendar>
-  <tttx-standalone-input ${required ? 'required' : ''} label="Choose a date" type="date" />
-</tttx-input-calendar>    
-  `;
-};
-BasicCalendar.args = {
-  required: true
-};

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

@@ -1,56 +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;
-}
-
-: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;
-}

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

@@ -1,312 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { h, Host } from '@stencil/core';
-export class TttxList {
-  constructor() {
-    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 h("div", { class: "load-indicator" }, h("tttx-loading-spinner", { size: 'large' }));
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "list-item-container", tabindex: "0" }, !this.loading && this.items.length === 0 ? 'No data to display' : undefined), this.loadIndicator()));
-  }
-  static get is() { return "tttx-list"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-list.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-list.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "name",
-        "reflect": false
-      },
-      "selectable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "selectable",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "items": {},
-      "selectedIds": {},
-      "loading": {},
-      "lastPage": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "listPaginate",
-        "name": "listPaginate",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "listSelectedEvent",
-        "name": "listSelectedEvent",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "listItemClick",
-        "name": "listItemClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "host"; }
-  static get listeners() {
-    return [{
-        "name": "listPageLoad",
-        "method": "listLoadHandler",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "listClearDataCache",
-        "method": "listClearDataCacheHandler",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "listActionSelectedEvent",
-        "method": "listActionSelectedEventHandler",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }];
-  }
-}

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

@@ -1,37 +0,0 @@
-export default {
-  title: 'molecules/List',
-  component: 'tttx-list',
-  argTypes: {
-    selectable: {
-      control: {
-        type: 'boolean'
-      }
-    }
-  }
-};
-export const ListWithGenericTemplate = (args) => {
-  return `
-<script>
-  function loadPage (event) {
-    const page = new CustomEvent('listPageLoad', {
-      detail: {
-        name: 'listWithGenericTemplate',
-        lastPage: true,
-        items: [
-          { text: 'Row with only text' },
-          { text: 'Row with text and an icon', icon: 'sentiment_calm' },
-          { text: 'Row with text and a coloured icon', icon: 'check_circle', iconColor: 'blue' },
-        ]
-      }
-    });
-    document.dispatchEvent(page);
-
-    // Stop this event handler from being duplicated every time the storybook iframe is reloaded
-    document.removeEventListener("listPaginate", loadPage);
-  }
-  document.addEventListener("listPaginate", loadPage);
-</script>
-
-<tttx-list ${args.selectable ? 'selectable' : ''} name='listWithGenericTemplate' />
-  `;
-};