@swimlane/ngx-datatable 21.1.0 → 22.0.0-alpha.0

package/index.scss

@@ -1,325 +1,7 @@
-.ngx-datatable {
+:host {
   display: block;
   overflow: hidden;
   justify-content: center;
   position: relative;
   transform: translate3d(0, 0, 0);
-
-  [hidden] {
-    display: none !important;
-  }
-
-  *,
-  *:before,
-  *:after {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-  }
-
-  /**
-   * Vertical Scrolling Adjustments
-   */
-  &.scroll-vertical {
-    .datatable-body {
-      overflow-y: auto;
-    }
-    &.virtualized {
-      .datatable-body {
-        .datatable-row-wrapper {
-          position: absolute;
-        }
-      }
-    }
-  }
-
-  /**
-   * Horizontal Scrolling Adjustments
-   */
-  &.scroll-horz {
-    .datatable-body {
-      overflow-x: auto;
-      -webkit-overflow-scrolling: touch;
-    }
-  }
-
-  /**
-   * Fixed Header Height Adjustments
-   */
-  &.fixed-header {
-    .datatable-header {
-      .datatable-header-inner {
-        white-space: nowrap;
-        .datatable-header-cell {
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-      }
-    }
-  }
-
-  /**
-   * Fixed row height adjustments
-   */
-  &.fixed-row {
-    .datatable-scroll {
-      white-space: nowrap;
-
-      .datatable-body-row {
-        white-space: nowrap;
-
-        .datatable-body-cell {
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-        }
-
-        .datatable-body-group-cell {
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-        }
-      }
-    }
-  }
-
-  /**
-   * Shared Styles
-   */
-  .datatable-body-row,
-  .datatable-row-center,
-  .datatable-header-inner {
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-
-    flex-direction: row;
-    -webkit-flex-flow: row;
-    -moz-flex-flow: row;
-    -ms-flex-flow: row;
-    -o-flex-flow: row;
-    flex-flow: row;
-  }
-
-  .datatable-body-cell,
-  .datatable-header-cell {
-    overflow-x: hidden;
-    vertical-align: top;
-    display: inline-block;
-    line-height: 1.625;
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  .datatable-row-left,
-  .datatable-row-right,
-  .datatable-group-header {
-    z-index: 9;
-    position: sticky !important;
-  }
-
-  .datatable-row-left,
-  .datatable-group-header {
-    left: 0;
-  }
-
-  .datatable-row-right {
-    right: 0;
-  }
-
-  .datatable-row-center,
-  .datatable-row-group {
-    position: relative;
-  }
-
-  /**
-   * Header Styles
-   */
-  .datatable-header {
-    display: block;
-    overflow: hidden;
-
-    .datatable-header-inner {
-      align-items: stretch;
-      -webkit-align-items: stretch;
-    }
-
-    .datatable-header-cell {
-      position: relative;
-      display: inline-block;
-
-      &.sortable {
-        .datatable-header-cell-wrapper {
-          cursor: pointer;
-        }
-      }
-
-      &.longpress .datatable-header-cell-wrapper {
-        cursor: move;
-      }
-
-      .sort-btn {
-        line-height: 100%;
-        vertical-align: middle;
-        display: inline-block;
-        cursor: pointer;
-      }
-
-      .resize-handle,
-      .resize-handle--not-resizable {
-        display: inline-block;
-        position: absolute;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        width: 5px;
-        padding: 0 4px;
-        visibility: hidden;
-      }
-
-      .resize-handle {
-        cursor: ew-resize;
-      }
-
-      &.resizeable:hover {
-        .resize-handle {
-          visibility: visible;
-        }
-      }
-
-      &:hover {
-        .resize-handle--not-resizable {
-          visibility: visible;
-        }
-      }
-
-      .targetMarker {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-
-        &.dragFromLeft {
-          right: 0;
-        }
-
-        &.dragFromRight {
-          left: 0;
-        }
-      }
-
-      .datatable-header-cell-template-wrap {
-        height: inherit;
-      }
-    }
-  }
-
-  /**
-   * Body Styles
-   */
-  .datatable-body {
-    position: relative;
-    z-index: 10;
-    display: block;
-    overflow: hidden;
-
-    .datatable-scroll {
-      display: inline-block;
-    }
-
-    .datatable-row-detail {
-      overflow-y: hidden;
-    }
-
-    .datatable-row-wrapper {
-      display: -webkit-box;
-      display: -moz-box;
-      display: -ms-flexbox;
-      display: -webkit-flex;
-      display: flex;
-
-      -webkit-box-orient: vertical;
-      -webkit-box-direction: normal;
-      -webkit-flex-direction: column;
-      -moz-box-orient: vertical;
-      -moz-box-direction: normal;
-      -ms-flex-direction: column;
-      flex-direction: column;
-    }
-
-    .datatable-body-row {
-      outline: none;
-
-      > div {
-        display: -webkit-box;
-        display: -moz-box;
-        display: -ms-flexbox;
-        display: -webkit-flex;
-        display: flex;
-      }
-    }
-  }
-
-  /**
-   * Footer Styles
-   */
-  .datatable-footer {
-    display: block;
-    width: 100%;
-    overflow: auto;
-
-    .datatable-footer-inner {
-      display: flex;
-      align-items: center;
-      width: 100%;
-    }
-
-    .selected-count {
-      .page-count {
-        flex: 1 1 40%;
-      }
-      .datatable-pager {
-        flex: 1 1 60%;
-      }
-    }
-
-    .page-count {
-      flex: 1 1 20%;
-    }
-
-    .datatable-pager {
-      flex: 1 1 80%;
-      text-align: right;
-
-      .pager,
-      .pager li {
-        padding: 0;
-        margin: 0;
-        display: inline-block;
-        list-style: none;
-      }
-
-      .pager {
-        li,
-        li a {
-          outline: none;
-        }
-
-        li {
-          a {
-            cursor: pointer;
-            display: inline-block;
-          }
-
-          &.disabled a {
-            cursor: not-allowed;
-          }
-        }
-      }
-    }
-  }
 }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@swimlane/ngx-datatable",
-  "version": "21.1.0",
+  "version": "22.0.0-alpha.0",
   "description": "ngx-datatable is an Angular table grid component for presenting large and complex data.",
   "peerDependencies": {
-    "@angular/common": "17.x || 18.x || 19.x",
-    "@angular/core": "17.x || 18.x || 19.x",
-    "@angular/platform-browser": "17.x || 18.x || 19.x",
+    "@angular/common": "18.x || 19.x || 20.x",
+    "@angular/core": "18.x || 19.x || 20.x",
+    "@angular/platform-browser": "18.x || 19.x || 20.x",
     "rxjs": "7.x"
   },
   "dependencies": {

package/themes/bootstrap.css

@@ -28,6 +28,11 @@
   box-shadow: none;
   font-size: 13px;
 }
+.ngx-datatable.bootstrap *,
+.ngx-datatable.bootstrap *:before,
+.ngx-datatable.bootstrap *:after {
+  box-sizing: border-box;
+}
 .ngx-datatable.bootstrap .datatable-header {
   height: unset !important;
 }

package/themes/bootstrap.scss

@@ -17,6 +17,13 @@ $datatble-ghost-cell-animation-duration: 10s;
 .ngx-datatable.bootstrap {
   box-shadow: none;
   font-size: 13px;
+
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+  }
+
   .datatable-header {
     height: unset !important;
     .datatable-header-cell {

package/themes/dark.css

@@ -5,6 +5,11 @@
   color: #fff;
   font-size: 13px;
 }
+.ngx-datatable.dark *,
+.ngx-datatable.dark *:before,
+.ngx-datatable.dark *:after {
+  box-sizing: border-box;
+}
 .ngx-datatable.dark .datatable-header {
   background: #181b24;
   color: #72809b;
@@ -82,7 +87,6 @@
   border-radius: 3px;
   margin: 0 3px;
   text-align: center;
-  vertical-align: top;
   text-decoration: none;
   vertical-align: bottom;
   color: #72809b;

package/themes/dark.scss

@@ -5,6 +5,12 @@
   color: #fff;
   font-size: 13px;
 
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+  }
+
   .datatable-header {
     background: #181b24;
     color: #72809b;
@@ -99,7 +105,6 @@
         border-radius: 3px;
         margin: 0 3px;
         text-align: center;
-        vertical-align: top;
         text-decoration: none;
         vertical-align: bottom;
         color: #72809b;

package/themes/material.css

@@ -60,6 +60,11 @@ That's all.
   * Footer Styles
   */
 }
+.ngx-datatable.material *,
+.ngx-datatable.material *:before,
+.ngx-datatable.material *:after {
+  box-sizing: border-box;
+}
 .ngx-datatable.material.striped .datatable-row-odd {
   background: #eee;
 }
@@ -209,16 +214,6 @@ That's all.
   font-size: 14px;
   font-weight: 400;
 }
-.ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-group-cell {
-  text-align: left;
-  padding: 0.9rem 1.2rem;
-  vertical-align: top;
-  border-top: 0;
-  color: rgba(0, 0, 0, 0.87);
-  transition: width 0.3s ease;
-  font-size: 14px;
-  font-weight: 400;
-}
 .ngx-datatable.material .datatable-body .progress-linear {
   display: block;
   position: sticky;
@@ -235,13 +230,11 @@ That's all.
   overflow: hidden;
   width: 100%;
   height: 5px;
-  -webkit-transform: translate(0, 0) scale(1, 1);
   transform: translate(0, 0) scale(1, 1);
   background-color: rgb(170, 209, 249);
 }
 .ngx-datatable.material .datatable-body .progress-linear .container .bar {
   transition: all 0.2s linear;
-  -webkit-animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
   animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
   transition: -webkit-transform 0.2s linear;
   transition: transform 0.2s linear;
@@ -342,8 +335,6 @@ That's all.
   outline: none;
 }
 .datatable-checkbox input[type=checkbox]:before {
-  -webkit-transition: all 0.3s ease-in-out;
-  -moz-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   content: "";
   position: absolute;
@@ -354,9 +345,6 @@ That's all.
   border: 2px solid #f2f2f2;
 }
 .datatable-checkbox input[type=checkbox]:checked:before {
-  -webkit-transform: rotate(-45deg);
-  -moz-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
   transform: rotate(-45deg);
   height: 0.5rem;
   border-color: #009688;

package/themes/material.scss

@@ -86,6 +86,12 @@ $datatble-ghost-cell-animation-duration: 10s;
   background: $ngx-datatable-background;
   box-shadow: $ngx-datatable-box-shadow;
 
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+  }
+
   &.striped {
     .datatable-row-odd {
       background: $ngx-datatable-row-odd-background;
@@ -309,16 +315,6 @@ $datatble-ghost-cell-animation-duration: 10s;
         //  background: #0829e0
         // }
       }
-      .datatable-body-group-cell {
-        text-align: left;
-        padding: 0.9rem 1.2rem;
-        vertical-align: top;
-        border-top: 0;
-        color: $datatable-body-cell-color;
-        transition: width 0.3s ease;
-        font-size: 14px;
-        font-weight: 400;
-      }
     }
 
     .progress-linear {
@@ -337,13 +333,11 @@ $datatble-ghost-cell-animation-duration: 10s;
         overflow: hidden;
         width: 100%;
         height: 5px;
-        -webkit-transform: translate(0, 0) scale(1, 1);
         transform: translate(0, 0) scale(1, 1);
         background-color: rgb(170, 209, 249);
 
         .bar {
           transition: all 0.2s linear;
-          -webkit-animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
           animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
 
           transition: -webkit-transform 0.2s linear;
@@ -469,8 +463,6 @@ $datatble-ghost-cell-animation-duration: 10s;
     outline: none;
 
     &:before {
-      -webkit-transition: all 0.3s ease-in-out;
-      -moz-transition: all 0.3s ease-in-out;
       transition: all 0.3s ease-in-out;
       content: '';
       position: absolute;
@@ -482,9 +474,6 @@ $datatble-ghost-cell-animation-duration: 10s;
     }
 
     &:checked:before {
-      -webkit-transform: rotate(-45deg);
-      -moz-transform: rotate(-45deg);
-      -ms-transform: rotate(-45deg);
       transform: rotate(-45deg);
       height: 0.5rem;
       border-color: #009688;

package/lib/components/body/body-cell.component.d.ts

@@ -1,73 +0,0 @@
-import { DoCheck, EventEmitter, OnDestroy, ViewContainerRef } from '@angular/core';
-import { TableColumn } from '../../types/table-column.type';
-import { BehaviorSubject } from 'rxjs';
-import { ActivateEvent, CellContext, RowOrGroup, SortDirection, SortPropDir, TreeStatus } from '../../types/public.types';
-import * as i0 from "@angular/core";
-export declare class DataTableBodyCellComponent<TRow extends {
-    level?: number;
-} = any> implements DoCheck, OnDestroy {
-    private cd;
-    displayCheck: (row: RowOrGroup<TRow>, column: TableColumn, value: any) => boolean;
-    _disable$: BehaviorSubject<boolean>;
-    set disable$(val: BehaviorSubject<boolean>);
-    get disable$(): BehaviorSubject<boolean>;
-    set group(group: TRow[]);
-    get group(): TRow[];
-    set rowHeight(val: number);
-    get rowHeight(): number;
-    set isSelected(val: boolean);
-    get isSelected(): boolean;
-    set expanded(val: boolean);
-    get expanded(): boolean;
-    set rowIndex(val: number);
-    get rowIndex(): number;
-    set column(column: TableColumn);
-    get column(): TableColumn;
-    set row(row: TRow);
-    get row(): TRow;
-    set sorts(val: SortPropDir[]);
-    get sorts(): SortPropDir[];
-    set treeStatus(status: TreeStatus);
-    get treeStatus(): TreeStatus;
-    ghostLoadingIndicator: boolean;
-    activate: EventEmitter<ActivateEvent<TRow>>;
-    treeAction: EventEmitter<any>;
-    cellTemplate: ViewContainerRef;
-    ghostLoaderTemplate: ViewContainerRef;
-    get columnCssClasses(): string;
-    get width(): number;
-    get minWidth(): number;
-    get maxWidth(): number;
-    get height(): string | number;
-    sanitizedValue: string;
-    value: any;
-    sortDir: SortDirection;
-    isFocused: boolean;
-    cellContext: CellContext<TRow>;
-    private _isSelected;
-    private _sorts;
-    private _column;
-    private _row;
-    private _group;
-    private _rowHeight;
-    private _rowIndex;
-    private _expanded;
-    private _element;
-    private _treeStatus;
-    constructor();
-    ngDoCheck(): void;
-    ngOnDestroy(): void;
-    checkValueUpdates(): void;
-    onFocus(): void;
-    onBlur(): void;
-    onClick(event: MouseEvent): void;
-    onDblClick(event: MouseEvent): void;
-    onKeyDown(event: KeyboardEvent): void;
-    onCheckboxChange(event: MouseEvent | KeyboardEvent): void;
-    calcSortDir(sorts: SortPropDir[]): SortDirection;
-    stripHtml(html: string): string;
-    onTreeAction(): void;
-    calcLeftMargin(column: TableColumn, row: RowOrGroup<TRow>): number;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DataTableBodyCellComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DataTableBodyCellComponent<any>, "datatable-body-cell", never, { "displayCheck": { "alias": "displayCheck"; "required": false; }; "disable$": { "alias": "disable$"; "required": false; }; "group": { "alias": "group"; "required": false; }; "rowHeight": { "alias": "rowHeight"; "required": false; }; "isSelected": { "alias": "isSelected"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "rowIndex": { "alias": "rowIndex"; "required": false; }; "column": { "alias": "column"; "required": false; }; "row": { "alias": "row"; "required": false; }; "sorts": { "alias": "sorts"; "required": false; }; "treeStatus": { "alias": "treeStatus"; "required": false; }; "ghostLoadingIndicator": { "alias": "ghostLoadingIndicator"; "required": false; }; }, { "activate": "activate"; "treeAction": "treeAction"; }, never, never, true, never>;
-}

package/lib/components/body/body-group-header-template.directive.d.ts

@@ -1,7 +0,0 @@
-import { GroupContext } from '../../types/public.types';
-import * as i0 from "@angular/core";
-export declare class DatatableGroupHeaderTemplateDirective {
-    static ngTemplateContextGuard(directive: DatatableGroupHeaderTemplateDirective, context: unknown): context is GroupContext;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DatatableGroupHeaderTemplateDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DatatableGroupHeaderTemplateDirective, "[ngx-datatable-group-header-template]", never, {}, {}, never, never, true, never>;
-}

package/lib/components/body/body-group-header.directive.d.ts

@@ -1,34 +0,0 @@
-import { EventEmitter, TemplateRef } from '@angular/core';
-import { Group, GroupContext, GroupToggleEvents } from '../../types/public.types';
-import * as i0 from "@angular/core";
-export declare class DatatableGroupHeaderDirective<TRow = any> {
-    /**
-     * Row height is required when virtual scroll is enabled.
-     */
-    rowHeight: number | ((group?: Group<TRow>, index?: number) => number);
-    /**
-     * Show checkbox at group header to select all rows of the group.
-     */
-    checkboxable: boolean;
-    _templateInput: TemplateRef<GroupContext<TRow>>;
-    _templateQuery: TemplateRef<GroupContext<TRow>>;
-    get template(): TemplateRef<GroupContext<TRow>>;
-    /**
-     * Track toggling of group visibility
-     */
-    toggle: EventEmitter<GroupToggleEvents<TRow>>;
-    /**
-     * Toggle the expansion of a group
-     */
-    toggleExpandGroup(group: Group<TRow>): void;
-    /**
-     * Expand all groups
-     */
-    expandAllGroups(): void;
-    /**
-     * Collapse all groups
-     */
-    collapseAllGroups(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DatatableGroupHeaderDirective<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DatatableGroupHeaderDirective<any>, "ngx-datatable-group-header", never, { "rowHeight": { "alias": "rowHeight"; "required": false; }; "checkboxable": { "alias": "checkboxable"; "required": false; }; "_templateInput": { "alias": "template"; "required": false; }; }, { "toggle": "toggle"; }, ["_templateQuery"], never, true, never>;
-}

package/lib/components/body/body-row-def.component.d.ts

@@ -1,34 +0,0 @@
-import { OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
-import * as i0 from "@angular/core";
-/**
- * This component is passed as ng-template and rendered by BodyComponent.
- * BodyComponent uses rowDefInternal to first inject actual row template.
- * This component will render that actual row template.
- */
-export declare class DatatableRowDefComponent {
-    rowDef: DatatableRowDefInternalDirective;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DatatableRowDefComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DatatableRowDefComponent, "datatable-row-def", never, {}, {}, never, never, true, never>;
-}
-export declare class DatatableRowDefDirective {
-    static ngTemplateContextGuard(_dir: DatatableRowDefDirective, ctx: unknown): ctx is RowDefContext;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DatatableRowDefDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DatatableRowDefDirective, "[rowDef]", never, {}, {}, never, never, true, never>;
-}
-/**
- * @internal To be used internally by ngx-datatable.
- */
-export declare class DatatableRowDefInternalDirective implements OnInit {
-    vc: ViewContainerRef;
-    rowDefInternal?: RowDefContext;
-    ngOnInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DatatableRowDefInternalDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DatatableRowDefInternalDirective, "[rowDefInternal]", never, { "rowDefInternal": { "alias": "rowDefInternal"; "required": false; }; }, {}, never, never, true, never>;
-}
-type RowDefContext = {
-    template: TemplateRef<unknown>;
-    rowTemplate: TemplateRef<unknown>;
-    row: any;
-    index: number;
-};
-export {};