@limetech/lime-elements 35.0.0-next.3 → 35.0.0-next.32

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

@@ -0,0 +1,57 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import Tabulator from 'tabulator-tables';
+import { ElementPool } from './element-pool';
+/**
+ * Provides row selection to Tabulator with shift-click support for range selections
+ */
+export declare class TableSelection {
+  private getTable;
+  private pool;
+  private selectEvent;
+  private selection;
+  /**
+   * Creates an instance of the TableSelection class
+   *
+   * @param {Function} getTable Function that returns the Tabulator instance
+   * @param {ElementPool} pool The element pool used to cache the checkbox components
+   * @param {EventEmitter<object[]>} selectEvent The event emitter to use when checkboxes are toggled
+   */
+  constructor(getTable: () => Tabulator, pool: ElementPool, selectEvent: EventEmitter<object[]>);
+  /**
+   * @returns {boolean} Returns `true` when the selection is non-empty, otherwise `false`
+   */
+  get hasSelection(): boolean;
+  /**
+   * Clears the selection
+   */
+  clear(): void;
+  /**
+   * Sets the selected items
+   *
+   * @param {any[]} data The selected items
+   */
+  setSelection(data: any[]): void;
+  /**
+   * Prepends a checkbox column used for row selection to the given column definitions
+   *
+   * @param {Tabulator.ColumnDefinition[]} columnDefinitions The column definition for the table
+   * @returns {Tabulator.ColumnDefinition[]} The column definitions with the checkbox column prepended to it
+   */
+  getColumnDefinitions(columnDefinitions: Tabulator.ColumnDefinition[]): Tabulator.ColumnDefinition[];
+  private getRowSelectorColumnDefinition;
+  private headerClick;
+  private getRowSelectorFormatter;
+  /**
+   * Tabulator cell click handler that updates the selection for the clicked
+   * row and toggles the selection from the last clicked row if the shift key
+   * is pressed down.
+   *
+   * @param {PointerEvent} ev The pointer event
+   * @param {Tabulator.CellComponent} cell The clicked cell component
+   */
+  protected rowSelectorCellClick: (ev: PointerEvent, cell: Tabulator.CellComponent) => void;
+  private updateRowSelectors;
+  private updateRowSelector;
+  private getActiveRows;
+  private getRowByIndex;
+}

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,31 @@ 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;
+  protected updateSelectable(): void;
   private areSameColumns;
+  private haveSameAggregateFields;
   private init;
   private initTabulatorComponent;
+  private initTableSelection;
+  private setSelection;
   private updateMaxPage;
   private getOptions;
   private getColumnSorter;
   private getColumnDefinitions;
+  private addColumnAggregator;
   private getAjaxOptions;
   private handleAjaxRequesting;
   private getPaginationOptions;
@@ -112,6 +141,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 +152,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

@@ -10,14 +10,14 @@ import { Action as Action1, Chip, DateType, DialogHeading, FileInfo, FlexContain
 import { CircularProgressSize } from "./components/circular-progress/circular-progress.types";
 import { ColorScheme, Language } from "./components/code-editor/code-editor.types";
 import { Action } from "./components/collapsible-section/action";
-import { FormError, ValidationStatus } from "./components/form/form.types";
+import { FormError, ValidationError, ValidationStatus } from "./components/form/form.types";
 import { IconSize } from "./components/icon/icon.types";
 import { InputType } from "./components/input-field/input-field.types";
 import { ActionPosition, ActionScrollBehavior } from "./components/picker/actions.types";
 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 {
         /**
@@ -101,7 +101,7 @@ export namespace Components {
          */
         "label": string;
         /**
-          * Disables the checkbox when `true`. Works exactly the same as `disabled`. If either property is `true`, the checkbox will be disabled.
+          * Disables the checkbox when `true`. This visualizes the checkbox slightly differently. But shows no visual sign indicating that the checkbox is disabled or can ever become interactable.
          */
         "readonly": boolean;
         /**
@@ -430,6 +430,10 @@ export namespace Components {
           * Set to `true` to disable the whole form.
          */
         "disabled": boolean;
+        /**
+          * Extra errors to display in the form. Typical use case is asynchronous errors generated server side.
+         */
+        "errors": ValidationError;
         /**
           * Factory for creating properties for custom form components  When using custom components in the form some properties might have to be set dynamically. If this factory is set, it will be called with the current schema for the field for each custom component in the form. The factory must return an object where each key is the name of the property that should be set, along with its value.
          */
@@ -965,6 +969,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 +1005,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
          */
@@ -1434,7 +1450,7 @@ declare namespace LocalJSX {
          */
         "onChange"?: (event: CustomEvent<boolean>) => void;
         /**
-          * Disables the checkbox when `true`. Works exactly the same as `disabled`. If either property is `true`, the checkbox will be disabled.
+          * Disables the checkbox when `true`. This visualizes the checkbox slightly differently. But shows no visual sign indicating that the checkbox is disabled or can ever become interactable.
          */
         "readonly"?: boolean;
         /**
@@ -1815,6 +1831,10 @@ declare namespace LocalJSX {
           * Set to `true` to disable the whole form.
          */
         "disabled"?: boolean;
+        /**
+          * Extra errors to display in the form. Typical use case is asynchronous errors generated server side.
+         */
+        "errors"?: ValidationError;
         /**
           * Emitted when a change is made within the form
          */
@@ -2438,6 +2458,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 +2502,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 +2522,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.3",
+  "version": "35.0.0-next.32",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -41,54 +41,54 @@
     "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": "^2.4.2",
+    "@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.13.0",
+    "@typescript-eslint/parser": "^5.14.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",
+    "dayjs": "^1.10.8",
+    "eslint": "^8.10.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jsdoc": "^37.0.3",
+    "eslint-plugin-jsdoc": "^37.9.5",
     "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",
-    "flatpickr": "^4.6.9",
+    "eslint-plugin-react": "^7.29.2",
+    "eslint-plugin-sonarjs": "^0.12.0",
+    "flatpickr": "^4.6.10",
     "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.5.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",
-    "showdown": "1.9.1",
+    "showdown": "2.0.3",
     "shx": "^0.3.3",
     "tabulator-tables": "^4.9.3",
     "typescript": "^4.3.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 };