@limetech/lime-elements 35.0.0-next.1 → 35.0.0-next.13

package/dist/collection/components/table/table.js

@@ -3,6 +3,7 @@ import TabulatorTable from 'tabulator-tables';
 import { ColumnDefinitionFactory, createColumnSorter } from './columns';
 import { isEqual, has } from 'lodash-es';
 import { ElementPool } from './element-pool';
+import { TableSelection } from './table-selection';
 const FIRST_PAGE = 1;
 /**
  * @exampleComponent limel-example-table
@@ -12,6 +13,7 @@ const FIRST_PAGE = 1;
  * @exampleComponent limel-example-table-local
  * @exampleComponent limel-example-table-remote
  * @exampleComponent limel-example-table-activate-row
+ * @exampleComponent limel-example-table-selectable-rows
  * @exampleComponent limel-example-table-default-sorted
  * @exampleComponent limel-example-table-low-density
  */
@@ -44,6 +46,27 @@ export class Table {
      * The page to show
      */
     this.page = FIRST_PAGE;
+    this.getActiveRows = () => {
+      if (!this.tabulator) {
+        return [];
+      }
+      return this.tabulator.getRows('active');
+    };
+    this.getActiveRowsData = () => {
+      // Note: Tabulator.getData() creates copies of each data object
+      // and will break this.selection.has checks, hence why this function
+      // intentionally retrieves the data using the row components
+      return this.getActiveRows().map((row) => row.getData());
+    };
+    this.selectAllOnChange = (ev) => {
+      const selectAll = ev.detail;
+      ev.stopPropagation();
+      ev.preventDefault();
+      const newSelection = selectAll ? this.getActiveRowsData() : [];
+      this.select.emit(newSelection);
+      this.tableSelection.setSelection(newSelection);
+      this.selectAll.emit(selectAll);
+    };
     this.getColumnOptions = () => {
       if (!this.movableColumns) {
         return {};
@@ -54,7 +77,7 @@ export class Table {
       };
     };
     this.handleMoveColumn = (_, components) => {
-      const columns = components.map(this.findColumn);
+      const columns = components.map(this.findColumn).filter((c) => c);
       this.changeColumns.emit(columns);
     };
     this.findColumn = (component) => {
@@ -69,13 +92,20 @@ export class Table {
     this.requestData = this.requestData.bind(this);
     this.onClickRow = this.onClickRow.bind(this);
     this.formatRow = this.formatRow.bind(this);
+    this.formatRows = this.formatRows.bind(this);
     this.updateMaxPage = this.updateMaxPage.bind(this);
     this.initTabulatorComponent = this.initTabulatorComponent.bind(this);
+    this.setSelection = this.setSelection.bind(this);
+    this.addColumnAggregator = this.addColumnAggregator.bind(this);
     this.pool = new ElementPool(document);
     this.columnFactory = new ColumnDefinitionFactory(this.pool);
   }
   componentWillLoad() {
     this.firstRequest = this.mode === 'remote';
+    if (this.selectable) {
+      this.tableSelection = new TableSelection(() => this.tabulator, this.pool, this.select);
+      this.tableSelection.setSelection(this.selection);
+    }
   }
   componentDidLoad() {
     this.init();
@@ -102,7 +132,7 @@ export class Table {
     if (!this.tabulator) {
       return;
     }
-    this.tabulator.getRows().forEach(this.formatRow);
+    this.formatRows();
   }
   updateData(newData = [], oldData = []) {
     if (isEqual(newData, oldData)) {
@@ -114,6 +144,7 @@ export class Table {
         return;
       }
       this.tabulator.replaceData(this.data);
+      this.setSelection();
     });
   }
   updateColumns(newColumns, oldColumns) {
@@ -123,20 +154,46 @@ export class Table {
     if (this.areSameColumns(newColumns, oldColumns)) {
       return;
     }
-    const existingColumns = this.tabulator
+    const columnsInTable = this.tabulator
       .getColumns()
-      .map(this.findColumn);
-    if (this.areSameColumns(newColumns, existingColumns)) {
+      .filter((c) => c.getField());
+    const oldColumnsInTable = columnsInTable.map((c) => oldColumns.find((old) => old.field === c.getField()));
+    if (this.areSameColumns(newColumns, oldColumnsInTable)) {
       return;
     }
     // Updating columns requires a reinitialization otherwise sorting will not work
     // afterwards
     this.init();
   }
+  updateAggregates(newAggregates, oldAggregates) {
+    if (!this.tabulator) {
+      return;
+    }
+    if (isEqual(newAggregates, oldAggregates)) {
+      return;
+    }
+    if (!this.haveSameAggregateFields(newAggregates, oldAggregates)) {
+      this.init();
+      return;
+    }
+    this.tabulator.recalc();
+    this.tabulator.rowManager.redraw();
+  }
+  updateSelection(newSelection) {
+    if (!this.tableSelection) {
+      return;
+    }
+    this.tableSelection.setSelection(newSelection);
+  }
   areSameColumns(newColumns, oldColumns) {
     return (newColumns.length === oldColumns.length &&
       newColumns.every((column) => oldColumns.includes(column)));
   }
+  haveSameAggregateFields(newAggregates, oldAggregates) {
+    const oldAggregateFields = (oldAggregates === null || oldAggregates === void 0 ? void 0 : oldAggregates.map((a) => a.field)) || [];
+    return ((newAggregates === null || newAggregates === void 0 ? void 0 : newAggregates.length) === (oldAggregates === null || oldAggregates === void 0 ? void 0 : oldAggregates.length) &&
+      !!(newAggregates === null || newAggregates === void 0 ? void 0 : newAggregates.every((a) => oldAggregateFields.includes(a.field))));
+  }
   init() {
     if (this.tabulator) {
       this.pool.releaseAll();
@@ -163,14 +220,22 @@ export class Table {
     // matter if its rendered or not.
     if (!('ResizeObserver' in window)) {
       this.tabulator = new TabulatorTable(table, options);
+      this.setSelection();
       return;
     }
     const observer = new ResizeObserver(() => {
       this.tabulator = new TabulatorTable(table, options);
+      this.setSelection();
       observer.unobserve(table);
     });
     observer.observe(table);
   }
+  setSelection() {
+    if (!(this.tabulator && this.tableSelection)) {
+      return;
+    }
+    this.tableSelection.setSelection(this.selection);
+  }
   updateMaxPage() {
     var _a;
     (_a = this.tabulator) === null || _a === void 0 ? void 0 : _a.setMaxPage(this.calculatePageCount());
@@ -192,7 +257,38 @@ export class Table {
     });
   }
   getColumnDefinitions() {
-    return this.columns.map(this.columnFactory.create);
+    const columnDefinitions = this.columns
+      .map(this.addColumnAggregator)
+      .map(this.columnFactory.create);
+    if (this.tableSelection) {
+      return this.tableSelection.getColumnDefinitions(columnDefinitions);
+    }
+    return columnDefinitions;
+  }
+  addColumnAggregator(column) {
+    var _a;
+    if (!((_a = this.aggregates) === null || _a === void 0 ? void 0 : _a.length) || column.aggregator) {
+      return column;
+    }
+    const aggregate = this.aggregates.find((a) => a.field === column.field);
+    if (aggregate) {
+      column.aggregator = (col, 
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      _values, 
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      _data) => {
+        var _a;
+        if (!col) {
+          return undefined;
+        }
+        const value = (_a = this.aggregates.find((a) => a.field === col.field)) === null || _a === void 0 ? void 0 : _a.value;
+        if (col.formatter) {
+          return col.formatter(value);
+        }
+        return value;
+      };
+    }
+    return column;
   }
   getAjaxOptions() {
     if (!this.isRemoteMode()) {
@@ -291,7 +387,11 @@ export class Table {
     }
     this.changePage.emit(page);
   }
-  onClickRow(_, row) {
+  onClickRow(_ev, row) {
+    if (typeof row.getPosition === 'undefined') {
+      // Not a data row, probably a CalcComponent
+      return;
+    }
     if (this.activeRow === row.getData()) {
       this.activeRow = null;
     }
@@ -300,6 +400,9 @@ export class Table {
     }
     this.activate.emit(this.activeRow);
   }
+  formatRows() {
+    this.tabulator.getRows().forEach(this.formatRow);
+  }
   formatRow(row) {
     if (this.activeRow === row.getData()) {
       row.getElement().classList.add('active');
@@ -319,16 +422,30 @@ export class Table {
     return columns.some((column) => has(column, 'aggregator'));
   }
   render() {
+    var _a;
     return (h("div", { id: "tabulator-container" },
       h("div", { id: "tabulator-loader", style: { display: this.loading ? 'flex' : 'none' } },
         h("limel-spinner", { size: "large" })),
       this.renderEmptyMessage(),
+      this.renderSelectAll(),
       h("div", { id: "tabulator-table", class: {
           'has-pagination': this.totalRows > this.pageSize,
           'has-aggregation': this.hasAggregation(this.columns),
           'has-movable-columns': this.movableColumns,
+          'has-rowselector': this.selectable,
+          'has-selection': (_a = this.tableSelection) === null || _a === void 0 ? void 0 : _a.hasSelection,
         } })));
   }
+  renderSelectAll() {
+    var _a, _b, _c;
+    if (!this.selectable) {
+      return;
+    }
+    const showSelectAll = !this.loading && this.tableSelection;
+    return (h("div", { class: "select-all", style: { display: showSelectAll ? 'inline-block' : 'none' } },
+      h("limel-checkbox", { onChange: this.selectAllOnChange, checked: (_a = this.tableSelection) === null || _a === void 0 ? void 0 : _a.hasSelection, indeterminate: ((_b = this.tableSelection) === null || _b === void 0 ? void 0 : _b.hasSelection) &&
+          ((_c = this.selection) === null || _c === void 0 ? void 0 : _c.length) < this.data.length })));
+  }
   renderEmptyMessage() {
     const showEmptyMessage = !this.loading && !this.data.length && this.emptyMessage;
     return (h("div", { id: "tabulator-empty-text", style: { display: showEmptyMessage ? 'flex' : 'none' } },
@@ -537,6 +654,58 @@ export class Table {
       },
       "attribute": "empty-message",
       "reflect": false
+    },
+    "aggregates": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ColumnAggregate[]",
+        "resolved": "ColumnAggregate[]",
+        "references": {
+          "ColumnAggregate": {
+            "location": "import",
+            "path": "./table.types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Column aggregates to be displayed in the table"
+      }
+    },
+    "selectable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enables row selection"
+      },
+      "attribute": "selectable",
+      "reflect": false
+    },
+    "selection": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "object[]",
+        "resolved": "object[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Selected data. Requires `selectable` to be true."
+      }
     }
   }; }
   static get events() { return [{
@@ -629,6 +798,36 @@ export class Table {
           }
         }
       }
+    }, {
+      "method": "select",
+      "name": "select",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the row selection has been changed"
+      },
+      "complexType": {
+        "original": "object[]",
+        "resolved": "object[]",
+        "references": {}
+      }
+    }, {
+      "method": "selectAll",
+      "name": "selectAll",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the select all rows state is toggled"
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
     }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
@@ -649,5 +848,11 @@ export class Table {
     }, {
       "propName": "columns",
       "methodName": "updateColumns"
+    }, {
+      "propName": "aggregates",
+      "methodName": "updateAggregates"
+    }, {
+      "propName": "selection",
+      "methodName": "updateSelection"
     }]; }
 }

package/dist/collection/style/internal/lime-theme.scss

@@ -10,37 +10,36 @@
 @use '../brand-colors';
 @use '../_theme-color-variables';
 
-@use '@material/theme' with
-    (
-        $primary: brand-colors.$lime-turquoise,
-        $secondary: brand-colors.$lime-dark-grey,
-        $background: #fff,
-        $surface: #fff,
-        $error: #b00020,
-        $on-primary: #fff,
-        $on-secondary: #fff,
-        $on-surface: #000,
-        $on-error: #fff,
-        // $text-disabled-on-background: rgba(0, 0, 0, 0.38),
-        // $text-hint-on-light: rgba(0, 0, 0, 0.38),
-        // $text-primary-on-background: rgba(0, 0, 0, 0.87),
-        // $text-secondary-on-background: rgba(0, 0, 0, 0.54),
-        //
-        // The following variables are also available to be set if needed
-        // (note by Ads: they probably aren't available in MDC v11)
-        //
-        // $text-hint-on-background: rgba(0, 0, 0, 0.38),
-        // $text-icon-on-background: rgba(0, 0, 0, 0.38),
-        // $text-primary-on-light: rgba(0, 0, 0, 0.87),
-        // $text-secondary-on-light: rgba(0, 0, 0, 0.54),
-        // $text-disabled-on-light: rgba(0, 0, 0, 0.38),
-        // $text-icon-on-light: rgba(0, 0, 0, 0.38),
-        // $text-primary-on-dark: white,
-        // $text-secondary-on-dark: rgba(255, 255, 255, 0.7),
-        // $text-hint-on-dark: rgba(255, 255, 255, 0.5),
-        // $text-disabled-on-dark: rgba(255, 255, 255, 0.5),
-        // $text-icon-on-dark: rgba(255, 255, 255, 0.5),
-    );
+@use '@material/theme' with (
+    $primary: brand-colors.$lime-turquoise,
+    $secondary: brand-colors.$lime-dark-grey,
+    $background: #fff,
+    $surface: #fff,
+    $error: #b00020,
+    $on-primary: #fff,
+    $on-secondary: #fff,
+    $on-surface: #000,
+    $on-error: #fff,
+    // $text-disabled-on-background: rgba(0, 0, 0, 0.38),
+    // $text-hint-on-light: rgba(0, 0, 0, 0.38),
+    // $text-primary-on-background: rgba(0, 0, 0, 0.87),
+    // $text-secondary-on-background: rgba(0, 0, 0, 0.54),
+    //
+    // The following variables are also available to be set if needed
+    // (note by Ads: they probably aren't available in MDC v11)
+    //
+    // $text-hint-on-background: rgba(0, 0, 0, 0.38),
+    // $text-icon-on-background: rgba(0, 0, 0, 0.38),
+    // $text-primary-on-light: rgba(0, 0, 0, 0.87),
+    // $text-secondary-on-light: rgba(0, 0, 0, 0.54),
+    // $text-disabled-on-light: rgba(0, 0, 0, 0.38),
+    // $text-icon-on-light: rgba(0, 0, 0, 0.38),
+    // $text-primary-on-dark: white,
+    // $text-secondary-on-dark: rgba(255, 255, 255, 0.7),
+    // $text-hint-on-dark: rgba(255, 255, 255, 0.5),
+    // $text-disabled-on-dark: rgba(255, 255, 255, 0.5),
+    // $text-icon-on-dark: rgba(255, 255, 255, 0.5),
+);
 @forward '@material/theme';
 
 @use './lime-typography';

package/dist/collection/style/internal/lime-typography.scss

@@ -9,60 +9,59 @@
 
 @use '../functions';
 
-@use '@material/typography' with
-    (
-        $styles-headline1: (
-            font-size: functions.pxToRem(22),
-            line-height: functions.pxToRem(22),
-        ),
-        $styles-headline2: (
-            font-size: functions.pxToRem(16),
-            line-height: functions.pxToRem(14),
-        ),
-        $styles-headline3: (
-            font-size: functions.pxToRem(16),
-            line-height: functions.pxToRem(14),
-        ),
-        $styles-headline4: (
-            font-size: functions.pxToRem(16),
-            line-height: functions.pxToRem(14),
-        ),
-        $styles-headline5: (
-            font-size: functions.pxToRem(14),
-            line-height: functions.pxToRem(14),
-        ),
-        $styles-headline6: (
-            font-size: functions.pxToRem(14),
-            line-height: functions.pxToRem(14),
-        ),
-        $styles-subtitle1: (
-            font-size: functions.pxToRem(14),
-            line-height: functions.pxToRem(18),
-        ),
-        $styles-subtitle2: (
-            font-size: functions.pxToRem(13),
-            line-height: functions.pxToRem(18),
-        ),
-        $styles-body1: (
-            font-size: functions.pxToRem(13),
-            line-height: functions.pxToRem(24),
-        ),
-        $styles-body2: (
-            font-size: functions.pxToRem(13),
-            line-height: functions.pxToRem(26),
-        ),
-        $styles-caption: (
-            font-size: functions.pxToRem(11),
-            line-height: functions.pxToRem(14),
-        ),
-        $styles-button: (
-            font-size: functions.pxToRem(14),
-            line-height: functions.pxToRem(36),
-            text-transform: none,
-        ),
-        $styles-overline: (
-            font-size: functions.pxToRem(11),
-            line-height: functions.pxToRem(14),
-        )
-    );
+@use '@material/typography' with (
+    $styles-headline1: (
+        font-size: functions.pxToRem(22),
+        line-height: functions.pxToRem(22),
+    ),
+    $styles-headline2: (
+        font-size: functions.pxToRem(16),
+        line-height: functions.pxToRem(14),
+    ),
+    $styles-headline3: (
+        font-size: functions.pxToRem(16),
+        line-height: functions.pxToRem(14),
+    ),
+    $styles-headline4: (
+        font-size: functions.pxToRem(16),
+        line-height: functions.pxToRem(14),
+    ),
+    $styles-headline5: (
+        font-size: functions.pxToRem(14),
+        line-height: functions.pxToRem(14),
+    ),
+    $styles-headline6: (
+        font-size: functions.pxToRem(14),
+        line-height: functions.pxToRem(14),
+    ),
+    $styles-subtitle1: (
+        font-size: functions.pxToRem(14),
+        line-height: functions.pxToRem(18),
+    ),
+    $styles-subtitle2: (
+        font-size: functions.pxToRem(13),
+        line-height: functions.pxToRem(18),
+    ),
+    $styles-body1: (
+        font-size: functions.pxToRem(13),
+        line-height: functions.pxToRem(24),
+    ),
+    $styles-body2: (
+        font-size: functions.pxToRem(13),
+        line-height: functions.pxToRem(26),
+    ),
+    $styles-caption: (
+        font-size: functions.pxToRem(11),
+        line-height: functions.pxToRem(14),
+    ),
+    $styles-button: (
+        font-size: functions.pxToRem(14),
+        line-height: functions.pxToRem(36),
+        text-transform: none,
+    ),
+    $styles-overline: (
+        font-size: functions.pxToRem(11),
+        line-height: functions.pxToRem(14),
+    )
+);
 @forward '@material/typography';

package/dist/collection/style/internal/shared_input-select-picker.scss

@@ -54,6 +54,7 @@ $cropped-label-hack--font-size: 0.875rem; //14px
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
 
+    color: $input-text-color;
     font-size: functions.pxToRem(14);
     font-weight: 400;
     letter-spacing: 0.009375em;

package/dist/collection/style/internal/z-index.scss

@@ -9,7 +9,8 @@ $input-field--mdc-text-field__input--readonly: 1 !default;
 $list--has-interactive-items--mdc-list-item--hover: 1 !default;
 $list-static-actions-list: 1 !default;
 $tab-bar--active-tab: 2 !default;
-$table--has-interactive-rows--selectable-row--hover: 1 !default;
+$table--has-interactive-rows--selectable-row--hover: 2 !default;
+$table--limel-table--row-selector: 1 !default;
 $popover-before: -1 !default;
 $button-group-radio-button-keyboard-focused: 1 !default;
 $list-mdc-list-item: 0 !default;

package/dist/esm/checkbox.template-b4bacc2e.js

@@ -0,0 +1,39 @@
+import { h } from './index-2316f345.js';
+
+const CheckboxTemplate = (props) => {
+  const inputProps = {};
+  if (props.indeterminate) {
+    inputProps['data-indeterminate'] = 'true';
+  }
+  return [
+    h("div", { class: "mdc-form-field " },
+      h("div", { class: {
+          'mdc-checkbox': true,
+          'mdc-checkbox--invalid': props.invalid,
+          'mdc-checkbox--disabled': props.disabled,
+          'mdc-checkbox--required': props.required,
+          'mdc-checkbox--indeterminate': props.indeterminate,
+        } },
+        h("input", Object.assign({ type: "checkbox", class: "mdc-checkbox__native-control", id: props.id, checked: props.checked, disabled: props.disabled, required: props.required, onChange: props.onChange }, inputProps)),
+        h("div", { class: "mdc-checkbox__background" },
+          h("svg", { class: "mdc-checkbox__checkmark", viewBox: "0 0 24 24" },
+            h("path", { class: "mdc-checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })),
+          h("div", { class: "mdc-checkbox__mixedmark" }))),
+      h("label", { class: {
+          'mdc-checkbox--invalid': props.invalid,
+          'mdc-checkbox--disabled': props.disabled,
+          'mdc-checkbox--required': props.required,
+          'mdc-checkbox--indeterminate': props.indeterminate,
+        }, htmlFor: props.id }, props.label)),
+    h(HelperText, { text: props.helperText }),
+  ];
+};
+const HelperText = (props) => {
+  if (typeof props.text !== 'string') {
+    return;
+  }
+  return (h("div", { class: "limel-checkbox-helper-line" },
+    h("p", { class: "limel-checkbox-helper-text", "aria-hidden": "true" }, props.text.trim())));
+};
+
+export { CheckboxTemplate as C };

package/dist/esm/{component-2eb4e07b.js → component-834d85a1.js}

@@ -1,7 +1,7 @@
 import { M as MDCFoundation, a as MDCComponent } from './component-d682c974.js';
 import { m as matches, c as closest } from './ponyfill-30263d5e.js';
 import { n as normalizeKey } from './keyboard-4b9e12e3.js';
-import { a as getCorrectPropertyName } from './util-71a23335.js';
+import { g as getCorrectPropertyName } from './util-f1bde91c.js';
 
 /**
  * @license