@limetech/lime-elements 35.0.0-next.9 → 35.0.0

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

@@ -96,15 +96,13 @@ export class Table {
     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);
-    }
+    this.initTableSelection();
   }
   componentDidLoad() {
     this.init();
@@ -164,16 +162,42 @@ export class Table {
     // 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);
   }
+  updateSelectable() {
+    if (this.tableSelection && !this.selectable) {
+      this.tableSelection = null;
+    }
+    this.initTableSelection();
+    this.init();
+  }
   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();
@@ -210,6 +234,12 @@ export class Table {
     });
     observer.observe(table);
   }
+  initTableSelection() {
+    if (this.selectable) {
+      this.tableSelection = new TableSelection(() => this.tabulator, this.pool, this.select);
+      this.tableSelection.setSelection(this.selection);
+    }
+  }
   setSelection() {
     if (!(this.tabulator && this.tableSelection)) {
       return;
@@ -237,12 +267,39 @@ export class Table {
     });
   }
   getColumnDefinitions() {
-    const columnDefinitions = 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()) {
       return {};
@@ -376,27 +433,28 @@ export class Table {
   }
   render() {
     var _a;
-    return (h("div", { id: "tabulator-container" },
+    return (h("div", { id: "tabulator-container", 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,
+      } },
       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,
-        } })));
+      h("div", { id: "tabulator-table" })));
   }
   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: this.tableSelection.hasSelection, indeterminate: this.tableSelection.hasSelection &&
-          this.selection.length < this.data.length })));
+      h("limel-checkbox", { onChange: this.selectAllOnChange, disabled: !this.totalRows, 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;
@@ -607,6 +665,26 @@ 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,
@@ -780,8 +858,14 @@ export class Table {
     }, {
       "propName": "columns",
       "methodName": "updateColumns"
+    }, {
+      "propName": "aggregates",
+      "methodName": "updateAggregates"
     }, {
       "propName": "selection",
       "methodName": "updateSelection"
+    }, {
+      "propName": "selectable",
+      "methodName": "updateSelectable"
     }]; }
 }

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

@@ -1,4 +1,3 @@
-// eslint-disable-next-line no-shadow
 export var ColumnAggregatorType;
 (function (ColumnAggregatorType) {
   /**

package/dist/collection/style/functions.scss

@@ -5,6 +5,8 @@
  * without being explicitly called by outside code.
  */
 
+@use 'sass:math';
+
 @function pxToRem($px) {
-    @return #{$px/16}rem;
+    @return #{math.div($px, 16)}rem;
 }

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/esm/checkbox.template-2f1bbc98.js

@@ -0,0 +1,41 @@
+import { h } from './index-11cd0b60.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,
+          'lime-checkbox--readonly': props.readonly,
+        } },
+        h("input", Object.assign({ type: "checkbox", class: "mdc-checkbox__native-control", id: props.id, checked: props.checked, disabled: props.disabled || props.readonly, 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,
+          'lime-checkbox--readonly': props.readonly,
+        }, 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-89e0ce26.js → component-19eb6e2b.js}

@@ -1,4 +1,4 @@
-import { M as MDCFoundation, a as MDCComponent } from './component-d682c974.js';
+import { M as MDCFoundation, a as MDCComponent } from './component-410aad5a.js';
 import { e as estimateScrollWidth } from './ponyfill-30263d5e.js';
 
 /*! *****************************************************************************
@@ -98,7 +98,9 @@ var MDCFloatingLabelFoundation = /** @class */ (function (_super) {
     __extends(MDCFloatingLabelFoundation, _super);
     function MDCFloatingLabelFoundation(adapter) {
         var _this = _super.call(this, __assign(__assign({}, MDCFloatingLabelFoundation.defaultAdapter), adapter)) || this;
-        _this.shakeAnimationEndHandler_ = function () { return _this.handleShakeAnimationEnd_(); };
+        _this.shakeAnimationEndHandler = function () {
+            _this.handleShakeAnimationEnd();
+        };
         return _this;
     }
     Object.defineProperty(MDCFloatingLabelFoundation, "cssClasses", {
@@ -127,10 +129,10 @@ var MDCFloatingLabelFoundation = /** @class */ (function (_super) {
         configurable: true
     });
     MDCFloatingLabelFoundation.prototype.init = function () {
-        this.adapter.registerInteractionHandler('animationend', this.shakeAnimationEndHandler_);
+        this.adapter.registerInteractionHandler('animationend', this.shakeAnimationEndHandler);
     };
     MDCFloatingLabelFoundation.prototype.destroy = function () {
-        this.adapter.deregisterInteractionHandler('animationend', this.shakeAnimationEndHandler_);
+        this.adapter.deregisterInteractionHandler('animationend', this.shakeAnimationEndHandler);
     };
     /**
      * Returns the width of the label element.
@@ -178,7 +180,7 @@ var MDCFloatingLabelFoundation = /** @class */ (function (_super) {
             this.adapter.removeClass(LABEL_REQUIRED);
         }
     };
-    MDCFloatingLabelFoundation.prototype.handleShakeAnimationEnd_ = function () {
+    MDCFloatingLabelFoundation.prototype.handleShakeAnimationEnd = function () {
         var LABEL_SHAKE = MDCFloatingLabelFoundation.cssClasses.LABEL_SHAKE;
         this.adapter.removeClass(LABEL_SHAKE);
     };