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

package/dist/lime-elements/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/lime-elements/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/lime-elements/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/types/components/badge/badge.d.ts

@@ -6,5 +6,5 @@ export declare class Badge {
    * Label to display in the badge
    */
   label: number;
-  render(): any;
+  render(): string;
 }

package/dist/types/components/flex-container/flex-container.d.ts

@@ -1,5 +1,11 @@
 import { FlexContainerAlign, FlexContainerDirection, FlexContainerJustify } from '@limetech/lime-elements';
 /**
+ * This component is deprecated and will be removed in a future version of
+ * Lime Elements. Please use CSS for your flexible container needs 🙂
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+ *
+ * @deprecated
+ * @private
  * @exampleComponent limel-example-flex-container
  * @slot - Container content
  */
@@ -20,5 +26,6 @@ export declare class FlexContainer {
    * Reverse the order of the items
    */
   reverse: boolean;
+  componentWillLoad(): void;
   render(): any;
 }

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

@@ -35,6 +35,6 @@ export declare class Switch {
   private initialize;
   disconnectedCallback(): void;
   render(): any[];
-  protected valueWatcher(newValue: any, oldValue: any): void;
-  private onChange;
+  protected valueWatcher(newValue: boolean): void;
+  private handleClick;
 }

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

@@ -45,6 +45,13 @@ export declare function formatCell(cell: Tabulator.CellComponent, column: Column
  * @returns {HTMLElement} custom component that renders a value in the table
  */
 export declare function createCustomComponent(cell: Tabulator.CellComponent, column: Column, value: string, pool: ElementPool): HTMLElement;
+/**
+ * Set all properties for a custom element, including event listeners
+ *
+ * @param {HTMLElement} element the custom element
+ * @param {object} props object of properties and event listeners
+ */
+export declare function setElementProperties(element: HTMLElement, props: object): void;
 interface TabulatorSorter extends Tabulator.Sorter {
   field: string;
 }

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

@@ -0,0 +1,79 @@
+/**
+ * Contains changes made to a selection
+ */
+export interface SelectionChangeSet {
+  /**
+   * Tells whether the items were selected or deselected
+   */
+  selected: boolean;
+  /**
+   * Gets the affected items
+   */
+  items: any[];
+  /**
+   * Gets the indexes of the affected items
+   */
+  indexes: number[];
+}
+/**
+ * Contains a set of selected data objects with methods for adding and removing
+ * items to the selection by referring to them by their index/position.
+ * Maintains a memory of the last toggled item which can be used to select or
+ * deselect a range of items between the last toggled item and a given item.
+ */
+export declare class Selection {
+  private getDataByIndex;
+  private selectedItems;
+  private lastToggledIndex;
+  /**
+   * Creates an instance of the Selection class.
+   * The provided function `getDataByIndex` is used to provide data for the
+   * selected items when selection is toggled by using the item index,
+   * which can be the row position in a table.
+   *
+   * @param {Function} getDataByIndex A function that returns the data at the given index
+   */
+  constructor(getDataByIndex: (number: any) => any);
+  /**
+   * @returns {number} The size of the selection
+   */
+  get size(): number;
+  /**
+   * @returns {any[]} The selected items
+   */
+  get items(): any[];
+  /**
+   * @param {any[]} items The selected items
+   */
+  set items(items: any[]);
+  /**
+   * Checks whether the given item exist in the selection
+   *
+   * @param {any} data The data to look up
+   * @returns {boolean} `true` if the given data exist in the selection, otherwise `false`
+   */
+  has(data: any): boolean;
+  /**
+   * Toggles the item at the given index in the selection
+   *
+   * @param {number} index The index of the item to toggle
+   * @returns {SelectionChangeSet} The changes made to the selection
+   */
+  toggleSelection(index: number): SelectionChangeSet;
+  /**
+   * Toggles the items from the last toggled index to the given index in the selection.
+   * The toggled items will be toggled as the item at the given index no matter
+   * their current state in the selection.
+   * Initially, when no last toggled index exist, this function behaves like
+   * `toggleSelection`.
+   *
+   * @param {number} index The index of the item to toggle
+   * @returns {SelectionChangeSet} The changes made to the selection
+   */
+  toggleSelectionFromLastIndex(index: number): SelectionChangeSet;
+  /**
+   * Clears the current selection and resets last toggled index
+   */
+  clear(): void;
+  private toggleRange;
+}

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,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.23",
   "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": "^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",
-    "showdown": "1.9.1",
+    "showdown": "2.0.0",
     "shx": "^0.3.3",
     "tabulator-tables": "^4.9.3",
     "typescript": "^4.3.5"