@limetech/lime-elements 35.0.0-next.2 → 35.0.0-next.20

package/dist/types/components/table/table.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { Column, TableParams, ColumnSorter } from './table.types';
+import { Column, TableParams, ColumnSorter, ColumnAggregate } from './table.types';
 /**
  * @exampleComponent limel-example-table
  * @exampleComponent limel-example-table-custom-components
@@ -8,6 +8,7 @@ import { Column, TableParams, ColumnSorter } from './table.types';
  * @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
  */
@@ -67,6 +68,18 @@ export declare class Table {
    * A message to display when the table has no data
    */
   emptyMessage: string;
+  /**
+   * Column aggregates to be displayed in the table
+   */
+  aggregates: ColumnAggregate[];
+  /**
+   * Enables row selection
+   */
+  selectable: boolean;
+  /**
+   * Selected data. Requires `selectable` to be true.
+   */
+  selection: object[];
   /**
    * Emitted when `mode` is `remote` and the table is loading new data. The
    * consumer is responsible for giving the table new data
@@ -80,6 +93,14 @@ export declare class Table {
    * Emitted when the columns have been changed
    */
   changeColumns: EventEmitter<Column[]>;
+  /**
+   * Emitted when the row selection has been changed
+   */
+  select: EventEmitter<object[]>;
+  /**
+   * Emitted when the select all rows state is toggled
+   */
+  selectAll: EventEmitter<boolean>;
   private host;
   private currentLoad;
   private tabulator;
@@ -87,23 +108,29 @@ export declare class Table {
   private columnFactory;
   private firstRequest;
   private currentSorting;
+  private tableSelection;
   constructor();
   componentWillLoad(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
-  totalRowsChanged(): void;
-  pageSizeChanged(): void;
-  pageChanged(): void;
-  activeRowChanged(): void;
-  updateData(newData?: any[], oldData?: any[]): void;
-  updateColumns(newColumns: Column[], oldColumns: Column[]): void;
+  protected totalRowsChanged(): void;
+  protected pageSizeChanged(): void;
+  protected pageChanged(): void;
+  protected activeRowChanged(): void;
+  protected updateData(newData?: any[], oldData?: any[]): void;
+  protected updateColumns(newColumns: Column[], oldColumns: Column[]): void;
+  protected updateAggregates(newAggregates: ColumnAggregate[], oldAggregates: ColumnAggregate[]): void;
+  protected updateSelection(newSelection: any[]): void;
   private areSameColumns;
+  private haveSameAggregateFields;
   private init;
   private initTabulatorComponent;
+  private setSelection;
   private updateMaxPage;
   private getOptions;
   private getColumnSorter;
   private getColumnDefinitions;
+  private addColumnAggregator;
   private getAjaxOptions;
   private handleAjaxRequesting;
   private getPaginationOptions;
@@ -112,6 +139,10 @@ export declare class Table {
   private handleDataSorting;
   private handlePageLoaded;
   private onClickRow;
+  private getActiveRows;
+  private getActiveRowsData;
+  private selectAllOnChange;
+  private formatRows;
   private formatRow;
   private calculatePageCount;
   private hasAggregation;
@@ -119,5 +150,6 @@ export declare class Table {
   private handleMoveColumn;
   private findColumn;
   render(): any;
+  private renderSelectAll;
   private renderEmptyMessage;
 }

package/dist/types/components/table/table.types.d.ts

@@ -130,3 +130,16 @@ export declare enum ColumnAggregatorType {
  * @returns {*} the aggregated data
  */
 export declare type ColumnAggregatorFunction<T = object> = (column?: Column, values?: any[], data?: T[]) => any;
+/**
+ * Defines aggregate values for columns
+ */
+export interface ColumnAggregate {
+  /**
+   * The name of the `Column` field
+   */
+  field: string;
+  /**
+   * The aggregate value
+   */
+  value: any;
+}

package/dist/types/components.d.ts

@@ -17,7 +17,7 @@ import { ActionPosition, ActionScrollBehavior } from "./components/picker/action
 import { OpenDirection as OpenDirection1 } from "./components/menu/menu.types";
 import { FlowItem } from "./components/progress-flow/progress-flow.types";
 import { Tab } from "./components/tab-bar/tab.types";
-import { Column, ColumnSorter, TableParams } from "./components/table/table.types";
+import { Column, ColumnAggregate, ColumnSorter, TableParams } from "./components/table/table.types";
 export namespace Components {
     interface LimelBadge {
         /**
@@ -965,6 +965,10 @@ export namespace Components {
           * Active row in the table
          */
         "activeRow": object;
+        /**
+          * Column aggregates to be displayed in the table
+         */
+        "aggregates": ColumnAggregate[];
         /**
           * Columns used to display the data
          */
@@ -997,6 +1001,14 @@ export namespace Components {
           * Number of rows per page
          */
         "pageSize": number;
+        /**
+          * Enables row selection
+         */
+        "selectable": boolean;
+        /**
+          * Selected data. Requires `selectable` to be true.
+         */
+        "selection": object[];
         /**
           * The initial sorted columns
          */
@@ -2438,6 +2450,10 @@ declare namespace LocalJSX {
           * Active row in the table
          */
         "activeRow"?: object;
+        /**
+          * Column aggregates to be displayed in the table
+         */
+        "aggregates"?: ColumnAggregate[];
         /**
           * Columns used to display the data
          */
@@ -2478,6 +2494,14 @@ declare namespace LocalJSX {
           * Emitted when `mode` is `remote` and the table is loading new data. The consumer is responsible for giving the table new data
          */
         "onLoad"?: (event: CustomEvent<TableParams>) => void;
+        /**
+          * Emitted when the row selection has been changed
+         */
+        "onSelect"?: (event: CustomEvent<object[]>) => void;
+        /**
+          * Emitted when the select all rows state is toggled
+         */
+        "onSelectAll"?: (event: CustomEvent<boolean>) => void;
         /**
           * Emitted when `mode` is `local` the data is sorted
          */
@@ -2490,6 +2514,14 @@ declare namespace LocalJSX {
           * Number of rows per page
          */
         "pageSize"?: number;
+        /**
+          * Enables row selection
+         */
+        "selectable"?: boolean;
+        /**
+          * Selected data. Requires `selectable` to be true.
+         */
+        "selection"?: object[];
         /**
           * The initial sorted columns
          */

package/dist/types/stencil-public-runtime.d.ts

@@ -666,7 +666,7 @@ export declare namespace JSXBase {
         use: JSXBase.SVGAttributes;
         view: JSXBase.SVGAttributes;
     }
-    interface SlotAttributes {
+    interface SlotAttributes extends JSXAttributes {
         name?: string;
         slot?: string;
         onSlotchange?: (event: Event) => void;
@@ -1427,9 +1427,7 @@ export declare namespace JSXBase {
         z?: number | string;
         zoomAndPan?: string;
     }
-    interface DOMAttributes<T = Element> {
-        key?: string | number;
-        ref?: (elm?: T) => void;
+    interface DOMAttributes<T> extends JSXAttributes<T> {
         slot?: string;
         part?: string;
         exportparts?: string;
@@ -1550,6 +1548,10 @@ export declare namespace JSXBase {
         onTransitionEndCapture?: (event: TransitionEvent) => void;
     }
 }
+export interface JSXAttributes<T = Element> {
+    key?: string | number;
+    ref?: (elm?: T) => void;
+}
 export interface CustomElementsDefineOptions {
     exclude?: string[];
     resourcesUrl?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "35.0.0-next.2",
+  "version": "35.0.0-next.20",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -41,50 +41,50 @@
     "generate": "stencil generate"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^13.1.0",
+    "@commitlint/config-conventional": "^16.0.0",
     "@lundalogik/cz-conventional-changelog": "^3.1.0",
     "@lundalogik/lime-icons8": "^2.7.0",
     "@popperjs/core": "^2.9.3",
-    "@rjsf/core": "^2.5.1",
-    "@stencil/core": "^2.10.0",
+    "@rjsf/core": "^3.2.1",
+    "@stencil/core": "^2.13.0",
     "@stencil/eslint-plugin": "^0.4.0",
-    "@stencil/sass": "^1.4.1",
+    "@stencil/sass": "^1.5.2",
     "@types/codemirror": "^5.60.2",
     "@types/html-escaper": "^3.0.0",
-    "@types/jest": "^26.0.24",
+    "@types/jest": "^27.4.0",
     "@types/lodash-es": "^4.17.4",
     "@types/puppeteer": "^5.4.4",
-    "@types/react": "^16.14.14",
+    "@types/react": "^17.0.39",
     "@types/tabulator-tables": "^4.9.3",
-    "@typescript-eslint/eslint-plugin": "^4.31.2",
-    "@typescript-eslint/parser": "^4.31.2",
+    "@typescript-eslint/eslint-plugin": "^5.11.0",
+    "@typescript-eslint/parser": "^5.11.0",
     "ajv": "^6.12.6",
     "awesome-debounce-promise": "^2.1.0",
     "codemirror": "^5.62.3",
     "commitizen": "^4.2.4",
     "cross-env": "^7.0.3",
     "dayjs": "^1.10.6",
-    "eslint": "^7.32.0",
+    "eslint": "^8.8.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jsdoc": "^37.0.3",
+    "eslint-plugin-jsdoc": "^37.8.0",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.27.1",
-    "eslint-plugin-sonarjs": "^0.10.0",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-sonarjs": "^0.11.0",
     "flatpickr": "^4.6.9",
     "html-escaper": "^3.0.3",
     "jest": "^26.6.3",
-    "jest-cli": "^26.6.3",
+    "jest-cli": "^27.5.0",
     "jsx-dom": "^7.0.4",
     "kompendium": "^0.10.3",
     "lodash-es": "^4.17.21",
-    "material-components-web": "^11.0.0",
+    "material-components-web": "^13.0.0",
     "moment": "^2.29.1",
     "number-abbreviate": "^2.0.0",
-    "prettier": "^2.4.1",
-    "puppeteer": "^10.2.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "prettier": "^2.5.1",
+    "puppeteer": "^13.3.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-shadow-dom-retarget-events": "^1.1.0",
     "replace-in-file": "^6.2.0",
     "shelljs": "0.8.5",

package/dist/cjs/checkbox.template-50eb8b76.js

@@ -1,39 +0,0 @@
-'use strict';
-
-const index = require('./index-e63a89d7.js');
-
-const CheckboxTemplate = (props) => {
-  const inputProps = {};
-  if (props.indeterminate) {
-    inputProps['data-indeterminate'] = 'true';
-  }
-  return (index.h("div", { class: "mdc-form-field " },
-    index.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,
-      } },
-      index.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)),
-      index.h("div", { class: "mdc-checkbox__background" },
-        index.h("svg", { class: "mdc-checkbox__checkmark", viewBox: "0 0 24 24" },
-          index.h("path", { class: "mdc-checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })),
-        index.h("div", { class: "mdc-checkbox__mixedmark" }))),
-    index.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),
-    index.h(HelperText, { text: props.helperText })));
-};
-const HelperText = (props) => {
-  if (typeof props.text !== 'string') {
-    return;
-  }
-  return (index.h("div", { class: "limel-checkbox-helper-line" },
-    index.h("p", { class: "limel-checkbox-helper-text", "aria-hidden": "true" }, props.text.trim())));
-};
-
-exports.CheckboxTemplate = CheckboxTemplate;

package/dist/esm/checkbox.template-50f7c07b.js

@@ -1,37 +0,0 @@
-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 };