q2-tecton-elements 1.28.3 → 1.29.0

package/dist/collection/components/q2-btn/styles.css

@@ -78,6 +78,10 @@ button {
   width: 100%;
 }
 
+::slotted(q2-icon) {
+  pointer-events: none;
+}
+
 :host {
   --comp-btn-primary-bg: var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e));
   --comp-btn-primary-font-color: var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));

package/dist/collection/components/q2-checkbox/index.js

@@ -5,10 +5,9 @@ export class Q2Checkbox {
     this._id = `checkbox-${createGuid()}`;
     ///// Actions ////////
     this.onInputClick = (event) => {
-      const hasCustomHandler = !!this.hostElement.onchange;
+      event.stopPropagation();
+      event.preventDefault();
       const isNotInteractive = this.disabled || this.readonly;
-      if (isNotInteractive || hasCustomHandler)
-        event.preventDefault();
       if (isNotInteractive)
         return;
       if (!(event.target instanceof HTMLInputElement))
@@ -45,9 +44,8 @@ export class Q2Checkbox {
   }
   //////// Host Element Events ////////
   defaultChangeHandler(event) {
-    if (!this.readonly && event.target === this.hostElement && !this.hostElement.onchange && !!event.detail) {
-      this.checked = event.detail.checked;
-    }
+    // We use setTimeout to give an opportunity to call preventDefault
+    setTimeout(() => this.handleChangeEvent(event), 0);
   }
   delegateFocus(event) {
     if (!isEventFromElement(event, this.hostElement))
@@ -58,6 +56,17 @@ export class Q2Checkbox {
   ariaLabelObserver() {
     handleAriaLabel(this);
   }
+  handleChangeEvent(event) {
+    if (this.readonly ||
+      this.disabled ||
+      this.hostElement.onchange ||
+      event.defaultPrevented ||
+      event.target !== this.hostElement ||
+      !event.detail) {
+      return;
+    }
+    this.checked = event.detail.checked;
+  }
   /////// View Methods ///////
   render() {
     const textLabelClasses = ['label-text'];

package/dist/collection/components/q2-checkbox/styles.css

@@ -93,6 +93,10 @@ button {
   --comp-checkbox-favorite-stroke-color: var(--tct-checkbox-favorite-stroke-color, var(--t-checkbox-favorite-stroke-color, var(--t-a11y-gray-color-AA, #949494)));
   --comp-checkbox-favorite-fill-color: var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, #db7d24));
 }
+:host([hide-label]:not([hide-label=false])) .container {
+  grid-template-areas: "svg";
+  grid-template-columns: var(--comp-control-width);
+}
 :host([type=toggle]) .container {
   --comp-control-width: var(--comp-checkbox-toggle-width);
 }

package/dist/collection/components/q2-data-table/index.js

@@ -0,0 +1,539 @@
+import { h, Fragment, } from '@stencil/core';
+import { loc } from '../../utils';
+export class Q2DataTable {
+  constructor() {
+    this.checkSlots = () => {
+      var _a, _b, _c, _d;
+      this.hasExpandableRows = !!((_b = (_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.querySelector(`[slot$="-expandable-content"]`)) !== null && _b !== void 0 ? _b : false);
+      this.hasDropdowns = !!((_d = (_c = this.hostElement) === null || _c === void 0 ? void 0 : _c.querySelector(`[slot$="-dropdown"]`)) !== null && _d !== void 0 ? _d : false);
+      // The booleans above may not change, event if the slot content
+      // So we increment this property to force a re-render and ensure proper rendering
+      this.checkSlotCount += 1;
+    };
+    /// Listeners ///
+    /// Event Handlers ///
+    this.onSort = (header) => {
+      const direction = header.sorted === 'ASC' ? 'DESC' : 'ASC';
+      const sortKey = header.key;
+      const sortEvent = this.sort.emit({ header, direction });
+      if (sortEvent.defaultPrevented)
+        return;
+      this.serializedHeaders = this.serializedHeaders.map(serializedHeader => {
+        const sorted = sortKey === serializedHeader.key ? direction : undefined;
+        return Object.assign(Object.assign({}, serializedHeader), { sorted });
+      });
+      this.serializedRows = this.sortRows(this.serializedRows, Object.assign(Object.assign({}, header), { sorted: direction }));
+    };
+    this.onSelectAllRows = (event) => {
+      event.stopPropagation();
+      const { checked } = event.detail;
+      const selectedRows = checked
+        ? this.serializedRows.map(row => (Object.assign(Object.assign({}, row), { selected: checked })))
+        : [];
+      const selectEvent = this.select.emit({ row: undefined, rows: selectedRows, allSelected: checked });
+      if (selectEvent.defaultPrevented)
+        return;
+      this.serializedRows = this.serializedRows.map(row => {
+        row.selected = checked;
+        return row;
+      });
+      this.allRowsSelected = checked;
+    };
+    this.onSelectRow = (event, row) => {
+      event.stopPropagation();
+      const { selectMode, serializedRows, selectedRows: currentlySelectedRows } = this;
+      const { checked } = event.detail;
+      const selectedRow = Object.assign(Object.assign({}, row), { selected: checked });
+      let selectedRows;
+      if (selectMode === 'single') {
+        selectedRows = checked ? [selectedRow] : [];
+      }
+      else {
+        selectedRows = checked
+          ? [...currentlySelectedRows, selectedRow]
+          : currentlySelectedRows.filter(row => row.id !== selectedRow.id);
+      }
+      const allRowsSelected = selectedRows.length === serializedRows.length;
+      const selectEvent = this.select.emit({ row: selectedRow, rows: selectedRows, allSelected: allRowsSelected });
+      if (selectEvent.defaultPrevented)
+        return;
+      this.serializedRows = this.serializedRows.map(row => (row.id === selectedRow.id ? selectedRow : row));
+      this.allRowsSelected = allRowsSelected;
+    };
+    this.onToggleRow = (event, row) => {
+      event.stopPropagation();
+      const selectedRow = Object.assign(Object.assign({}, row), { open: !row.open });
+      const toggleEvent = this.toggle.emit({ row: selectedRow });
+      if (toggleEvent.defaultPrevented)
+        return;
+      this.serializedRows = this.serializedRows.map(row => {
+        if (row.id === selectedRow.id)
+          return selectedRow;
+        else
+          return Object.assign({}, row);
+      });
+    };
+    this.onControlContainerClick = (event) => {
+      event.stopPropagation();
+    };
+    this.density = undefined;
+    this.bordered = undefined;
+    this.shadowed = undefined;
+    this.selectable = undefined;
+    this.loading = undefined;
+    this.hideCaption = undefined;
+    this.caption = undefined;
+    this.selectMode = 'multiple';
+    this.headers = undefined;
+    this.rows = undefined;
+    this.serializedHeaders = [];
+    this.serializedRows = [];
+    this.hasExpandableRows = false;
+    this.hasDropdowns = false;
+    this.allRowsSelected = false;
+    this.checkSlotCount = 0;
+  }
+  /// LifeCycle Hooks ///
+  componentWillLoad() {
+    this.headersHandler(this.headers);
+    this.rowsHandler(this.rows);
+  }
+  componentDidLoad() {
+    if (typeof MutationObserver !== 'undefined') {
+      const observer = new MutationObserver(() => this.checkSlots());
+      observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });
+      this.mutationObserver = observer;
+    }
+  }
+  disconnectedCallback() {
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+      this.mutationObserver = null;
+    }
+  }
+  /// Getters ///
+  get selectedRows() {
+    return this.serializedRows.filter(({ selected }) => selected);
+  }
+  get selectedRow() {
+    return this.selectedRows.find(({ selected }) => !!selected);
+  }
+  get numberOfColumns() {
+    var _a, _b;
+    return (((_b = (_a = this.serializedHeaders) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) +
+      (this.selectable ? 1 : 0) +
+      (this.hasExpandableRows ? 1 : 0) +
+      (this.hasDropdowns ? 1 : 0));
+  }
+  get mappedHeaders() {
+    return this.serializedHeaders.reduce((accum, header) => {
+      accum[header.key] = header;
+      return accum;
+    }, {});
+  }
+  /// Helpers ///
+  sortRows(rows, header) {
+    const { key, sorted } = header;
+    const direction = sorted || 'ASC';
+    const sortedRows = [...rows].sort((a, b) => {
+      const aValue = a.cells[key].value;
+      const bValue = b.cells[key].value;
+      if (aValue < bValue)
+        return direction === 'ASC' ? -1 : 1;
+      if (aValue > bValue)
+        return direction === 'ASC' ? 1 : -1;
+      return 0;
+    });
+    return sortedRows;
+  }
+  /// Watchers ///
+  headersHandler(headers = []) {
+    this.serializedHeaders = headers.map(header => {
+      const { title } = header;
+      let { key } = header;
+      // If no key is provided, generate one from the title
+      if (!key)
+        key = title.toLowerCase().replace(/\s/g, '-');
+      return Object.assign({ key }, header);
+    });
+  }
+  rowsHandler(rows = []) {
+    const { serializedHeaders, mappedHeaders } = this;
+    const defaultRow = {
+      id: null,
+      cells: {},
+      selected: false,
+      open: false,
+    };
+    const serializedRows = rows.map(({ id, cells, selected, open }) => {
+      const serializedCells = Object.entries(cells).reduce((accum, [cellKey, cellData]) => {
+        const header = mappedHeaders[cellKey] || {};
+        const { align, type = 'text' } = header;
+        const isBadge = 'type' in header && header.type === 'badge';
+        const defaultCell = {
+          value: '',
+          ariaLabel: undefined,
+          type,
+          align,
+          badgeStatus: isBadge ? header.badgeStatus : undefined,
+          badgeTheme: isBadge ? header.badgeTheme : undefined,
+        };
+        const result = typeof cellData === 'object'
+          ? Object.assign(Object.assign({}, defaultCell), cellData) : Object.assign(Object.assign({}, defaultCell), { value: cellData });
+        accum[cellKey] = result;
+        return accum;
+      }, {});
+      return Object.assign(Object.assign({}, defaultRow), { id, selected: !!selected, open: !!open, cells: serializedCells });
+    });
+    const sortedHeader = serializedHeaders.find(({ sorted }) => sorted);
+    this.serializedRows = !!sortedHeader ? this.sortRows(serializedRows, sortedHeader) : serializedRows;
+    this.checkSlots();
+  }
+  /// DOM ///
+  render() {
+    const { caption } = this;
+    return (h("div", { class: "container" }, h("table", null, caption && h("caption", { class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderTableRows())));
+  }
+  renderTableColGroup() {
+    const { serializedHeaders: headers, selectable, hasExpandableRows, hasDropdowns } = this;
+    if (!headers.length)
+      return null;
+    return (h("colgroup", null, selectable && h("col", { class: "select-column" }), headers.map(({ width, backgroundColor }) => (h("col", { style: { width, backgroundColor } }))), hasExpandableRows && h("col", { class: "expandable-row-control-column" }), hasDropdowns && h("col", { class: "dropdown-column" })));
+  }
+  renderTableHeader() {
+    const { serializedHeaders: headers, selectable, selectMode, hasExpandableRows, hasDropdowns } = this;
+    if (!headers.length)
+      return null;
+    return (h("thead", null, h("tr", null, selectable && (h("th", null, selectMode === 'multiple' && (h("q2-checkbox", { label: loc('tecton.element.dataTable.selectAllRows'), "hide-label": true, onChange: this.onSelectAllRows, checked: this.allRowsSelected, disabled: this.loading, "test-id": "select-all-rows-control" })))), headers.map(header => {
+      const { align, sorted } = header;
+      const headerClasses = [];
+      if (align)
+        headerClasses.push(`align-${align}`);
+      if (!!sorted)
+        headerClasses.push('sorted');
+      return (h("th", { class: headerClasses.join(' '), id: `header-${header.key}` }, header.sortable ? (h("q2-btn", { onClick: () => this.onSort(header), "test-id": "sort-control", disabled: this.loading }, h("div", { class: "header-content", "aria-label": header.ariaLabel || undefined }, header.title, !!sorted ? (h("q2-icon", { class: `sorted-indicator direction-${sorted}`, type: "arrow-down", label: sorted === 'ASC'
+          ? loc('tecton.element.dataTable.sortedAscending')
+          : loc('tecton.element.dataTable.sortedDescending'), "test-id": "sorted-indicator" })) : (h("q2-icon", { class: `sorted-indicator`, type: "sort", label: loc('tecton.element.dataTable.clickToSort'), "test-id": "sorted-indicator" }))))) : (h("div", { class: "header-content", "aria-label": header.ariaLabel || undefined }, header.title))));
+    }), hasExpandableRows && (h("th", { id: "toggle" }, h("span", { class: "sr" }, loc('tecton.element.dataTable.toggleRow')))), hasDropdowns && (h("th", null, h("span", { class: "sr" }, loc('tecton.element.dataTable.dropdown')))))));
+  }
+  renderTableRows() {
+    const { serializedHeaders: headers, serializedRows: rows, selectable, selectMode, hasExpandableRows, hasDropdowns, numberOfColumns, loading, } = this;
+    if (loading) {
+      return (h("tbody", null, h("tr", { class: "loading-row" }, h("td", { colSpan: numberOfColumns }, h("q2-loading", { inline: true })))));
+    }
+    if (!rows.length)
+      return;
+    let isSelectDisabled = false;
+    let selectedRow;
+    if (selectMode === 'single') {
+      selectedRow = this.selectedRow;
+      isSelectDisabled = !!selectedRow;
+    }
+    return (h("tbody", null, rows.map(row => {
+      const cellSlotPrefix = `row-${row.id}-cell`;
+      const expandableRowName = `row-${row.id}-expandable-content`;
+      const dropdownCellName = `row-${row.id}-dropdown`;
+      const rowHasExpandableSlot = hasExpandableRows && !!this.hostElement.querySelector(`[slot="${expandableRowName}"]`);
+      const rowHasDropdownSlot = hasDropdowns && !!this.hostElement.querySelector(`[slot="${dropdownCellName}"]`);
+      const rowClasses = [];
+      if (rowHasExpandableSlot)
+        rowClasses.push('expandable');
+      if (row.open)
+        rowClasses.push('open');
+      return (h(Fragment, null, h("tr", { id: `row-${row.id}`, class: rowClasses.join(' '), onClick: rowHasExpandableSlot && (e => this.onToggleRow(e, row)) }, selectable && (h("td", { class: "select-column", onClick: this.onControlContainerClick }, h("q2-checkbox", { label: loc('tecton.element.dataTable.selectRow'), "hide-label": true, checked: row.selected, disabled: isSelectDisabled && row !== selectedRow, onChange: e => this.onSelectRow(e, row), "test-id": "select-row-control" }))), headers.map(({ key }) => {
+        const cell = row.cells[key];
+        const cellAlign = cell === null || cell === void 0 ? void 0 : cell.align;
+        const alignClass = cellAlign ? `align-${cellAlign}` : undefined;
+        return (h("td", { class: alignClass }, h("slot", { name: `${cellSlotPrefix}-${key}` }, this.renderCellContent(cell))));
+      }), hasExpandableRows && (h("td", { class: "expandable-row-control-column", onClick: this.onControlContainerClick }, rowHasExpandableSlot && (h("q2-btn", { onClick: e => this.onToggleRow(e, row), ariaExpanded: `${row.open}`, ariaControls: expandableRowName, ariaLabel: loc('tecton.element.dataTable.toggleRow'), "test-id": "expandable-row-control" }, h("q2-icon", { type: "chevron-down", class: "toggle-expandable-row" }))))), hasDropdowns && (h("td", { class: "dropdown-column", onClick: this.onControlContainerClick }, rowHasDropdownSlot && h("slot", { name: dropdownCellName })))), rowHasExpandableSlot && (h("tr", { id: expandableRowName, class: "expandable-row", hidden: !row.open, "aria-hidden": !row.open }, h("td", { colSpan: numberOfColumns, headers: "toggle" }, h("div", { class: "expandable-content" }, h("slot", { name: expandableRowName })))))));
+    })));
+  }
+  renderCellContent(cell) {
+    if (!cell)
+      return;
+    const { type, ariaLabel, value } = cell;
+    if (!value)
+      return;
+    switch (type) {
+      case 'badge':
+        const valueAsInt = typeof value === 'string' ? parseFloat(value) : value;
+        return (h("q2-badge", { "aria-label": ariaLabel, value: valueAsInt, theme: cell.badgeTheme, status: cell.badgeStatus, size: "large" }));
+      case 'icon':
+        const valueAsString = typeof value === 'string' ? value : `${value}`;
+        return (h("q2-icon", { label: ariaLabel, type: valueAsString }));
+      default:
+        return h("div", { "aria-label": ariaLabel }, value);
+    }
+  }
+  static get is() { return "q2-data-table"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "density": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "'compact' | 'normal' | 'comfortable'",
+          "resolved": "\"comfortable\" | \"compact\" | \"normal\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "density",
+        "reflect": true
+      },
+      "bordered": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "bordered",
+        "reflect": true
+      },
+      "shadowed": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "shadowed",
+        "reflect": true
+      },
+      "selectable": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selectable",
+        "reflect": true
+      },
+      "loading": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "loading",
+        "reflect": true
+      },
+      "hideCaption": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-caption",
+        "reflect": true
+      },
+      "caption": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "caption",
+        "reflect": false
+      },
+      "selectMode": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "'multiple' | 'single'",
+          "resolved": "\"multiple\" | \"single\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "select-mode",
+        "reflect": false,
+        "defaultValue": "'multiple'"
+      },
+      "headers": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Q2DataTableHeader[]",
+          "resolved": "Q2DataTableHeader[]",
+          "references": {
+            "Q2DataTableHeader": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "rows": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Q2DataTableRow[]",
+          "resolved": "Q2DataTableRow[]",
+          "references": {
+            "Q2DataTableRow": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "serializedHeaders": {},
+      "serializedRows": {},
+      "hasExpandableRows": {},
+      "hasDropdowns": {},
+      "allRowsSelected": {},
+      "checkSlotCount": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "select",
+        "name": "select",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{\n        row: Q2DataTableSerializedRow;\n        rows: Q2DataTableSerializedRow[];\n        allSelected: boolean;\n    }",
+          "resolved": "{ row: Q2DataTableSerializedRow; rows: Q2DataTableSerializedRow[]; allSelected: boolean; }",
+          "references": {
+            "Q2DataTableSerializedRow": {
+              "location": "local"
+            }
+          }
+        }
+      }, {
+        "method": "toggle",
+        "name": "toggle",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ row: Q2DataTableSerializedRow }",
+          "resolved": "{ row: Q2DataTableSerializedRow; }",
+          "references": {
+            "Q2DataTableSerializedRow": {
+              "location": "local"
+            }
+          }
+        }
+      }, {
+        "method": "sort",
+        "name": "sort",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ header: Q2DataTableHeader; direction: 'ASC' | 'DESC' }",
+          "resolved": "{ header: Q2DataTableHeader; direction: \"ASC\" | \"DESC\"; }",
+          "references": {
+            "Q2DataTableHeader": {
+              "location": "local"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "headers",
+        "methodName": "headersHandler"
+      }, {
+        "propName": "rows",
+        "methodName": "rowsHandler"
+      }];
+  }
+}