@ng-matero/extensions 10.16.1 → 10.16.5

package/data-grid/_grid-theme.scss

@@ -10,35 +10,9 @@
   .mtx-grid {
     border: 1px solid rgba(mat-color($foreground, secondary-text), .2);
 
-    .mtx-grid-toolbar {
-      border-bottom: 1px solid rgba(mat-color($foreground, secondary-text), .2);
-    }
-
-    .mtx-grid-sidebar {
-      border-left: 1px solid rgba(mat-color($foreground, secondary-text), .2);
-
-      [dir='rtl'] & {
-        border-left-width: 0;
-        border-right: 1px solid rgba(mat-color($foreground, secondary-text), .2);
-      }
-    }
-
-    .mat-table-sticky-left {
-      border-right: 1px solid mat-color($foreground, divider);
-
-      [dir='rtl'] & {
-        border-right-width: 0;
-        border-left: 1px solid mat-color($foreground, divider);
-      }
-    }
-
+    .mat-table-sticky-left,
     .mat-table-sticky-right {
-      border-left: 1px solid mat-color($foreground, divider);
-
-      [dir='rtl'] & {
-        border-left-width: 0;
-        border-right: 1px solid mat-color($foreground, divider);
-      }
+      border-color: mat-color($foreground, divider);
     }
 
     .mat-table {
@@ -68,10 +42,6 @@
       }
     }
 
-    .mat-paginator {
-      border-top: 1px solid mat-color($foreground, divider);
-    }
-
     .mat-footer-row {
       .mat-footer-cell {
         border-top: 1px solid mat-color($foreground, divider);
@@ -79,6 +49,18 @@
         background-color: mat-color($background, app-bar);
       }
     }
+
+    .mat-paginator {
+      border-top: 1px solid rgba(mat-color($foreground, secondary-text), .2);
+    }
+  }
+
+  .mtx-grid-toolbar {
+    border-bottom: 1px solid rgba(mat-color($foreground, secondary-text), .2);
+  }
+
+  .mtx-grid-sidebar {
+    border-color: rgba(mat-color($foreground, secondary-text), .2);
   }
 
   .mtx-grid-column-menu-item {

package/data-grid/cell.component.d.ts

@@ -2,6 +2,7 @@ import { MtxDialog } from '@ng-matero/extensions/dialog';
 import { Observable } from 'rxjs';
 import { MtxGridColumn, MtxGridColumnButton } from './grid.interface';
 import { MtxGridService } from './grid.service';
+import { ThemePalette } from '@angular/material/core';
 export declare class MtxGridCellComponent {
     private _dialog;
     private _dataGridSrv;
@@ -23,7 +24,7 @@ export declare class MtxGridCellComponent {
     _getFormatterTooltip(value: any): any;
     _formatSummary(data: any[], colDef: MtxGridColumn): string | void | ((data: any[], colDef?: MtxGridColumn | undefined) => void);
     constructor(_dialog: MtxDialog, _dataGridSrv: MtxGridService);
-    _handleActionConfirm(event: MouseEvent, title: string | Observable<string>, description?: string | Observable<string>, okColor?: '' | 'primary' | 'accent' | 'warn', okText?: string | Observable<string>, closeColor?: '' | 'primary' | 'accent' | 'warn', closeText?: string | Observable<string>, fn?: (p: any) => void, data?: any): void;
+    _handleActionConfirm(event: MouseEvent, title: string | Observable<string>, description: string | Observable<string> | undefined, okColor: ThemePalette, okText: string | Observable<string> | undefined, closeColor: ThemePalette, closeText?: string | Observable<string>, fn?: (p: any) => void, data?: any): void;
     _handleActionClick(event: MouseEvent, btn: MtxGridColumnButton, rowData: any): void;
     /** Preview enlarged image */
     _onPreview(urlStr: string): void;

package/data-grid/column-menu.component.d.ts

@@ -1,8 +1,9 @@
 import { EventEmitter, TemplateRef } from '@angular/core';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { MatCheckboxChange } from '@angular/material/checkbox';
-import { MtxGridColumnSelectionItem } from './grid.interface';
 import { MatMenu, MatMenuTrigger } from '@angular/material/menu';
+import { ThemePalette } from '@angular/material/core';
+import { MtxGridButtonType, MtxGridColumnSelectionItem } from './grid.interface';
 export declare class MtxGridColumnMenuComponent {
     menuPanel: MatMenu;
     menuTrigger: MatMenuTrigger;
@@ -14,8 +15,8 @@ export declare class MtxGridColumnMenuComponent {
     get buttonText(): string;
     set buttonText(value: string);
     private _buttonText;
-    buttonType: 'raised' | 'stroked' | 'flat' | 'icon' | 'fab' | 'mini-fab' | '';
-    buttonColor: 'primary' | 'accent' | 'warn' | '';
+    buttonType: MtxGridButtonType;
+    buttonColor: ThemePalette;
     buttonClass: string;
     buttonIcon: string;
     showHeader: boolean;

package/data-grid/grid.component.d.ts

@@ -3,10 +3,11 @@ import { SelectionModel } from '@angular/cdk/collections';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { Sort, MatSort, SortDirection } from '@angular/material/sort';
-import { MtxGridColumn, MtxGridColumnSelectionItem, MtxGridCellTemplate, MtxGridRowSelectionFormatter, MtxGridRowClassFormatter, MtxGridColumnMenu } from './grid.interface';
+import { MtxGridColumn, MtxGridColumnSelectionItem, MtxGridCellTemplate, MtxGridRowSelectionFormatter, MtxGridRowClassFormatter, MtxGridColumnMenu, MtxGridButtonType } from './grid.interface';
 import { MtxGridCellSelectionDirective } from './cell-selection.directive';
 import { MtxGridExpansionToggleDirective } from './expansion-toggle.directive';
 import { MtxGridService } from './grid.service';
+import { ThemePalette } from '@angular/material/core';
 export declare class MtxGridComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
     private _dataGridSrv;
     private _changeDetectorRef;
@@ -14,14 +15,14 @@ export declare class MtxGridComponent implements OnInit, OnChanges, AfterViewIni
     sort: MatSort;
     columnMenu: MtxGridColumnMenu;
     tableContainer: ElementRef<HTMLDivElement>;
-    dataSource: MatTableDataSource<never>;
+    dataSource: MatTableDataSource<unknown>;
     displayedColumns: string[];
     columns: MtxGridColumn[];
-    data: never[];
+    data: any[];
     length: number;
     loading: boolean;
     trackBy: TrackByFunction<any>;
-    /** Page */
+    columnResizable: boolean;
     pageOnFront: boolean;
     showPaginator: boolean;
     pageDisabled: boolean;
@@ -31,7 +32,6 @@ export declare class MtxGridComponent implements OnInit, OnChanges, AfterViewIni
     pageSizeOptions: number[];
     hidePageSize: boolean;
     page: EventEmitter<PageEvent>;
-    /** Sort */
     sortOnFront: boolean;
     sortActive: string;
     sortDirection: SortDirection;
@@ -39,18 +39,15 @@ export declare class MtxGridComponent implements OnInit, OnChanges, AfterViewIni
     sortDisabled: boolean;
     sortStart: 'asc' | 'desc';
     sortChange: EventEmitter<Sort>;
-    /** Row */
     rowHover: boolean;
     rowStriped: boolean;
     rowClick: EventEmitter<any>;
-    /** Expandable row */
     expansionRowStates: any[];
     expandable: boolean;
     expansionTemplate: TemplateRef<any>;
     expansionChange: EventEmitter<any>;
     /** Whether support multiple row/cell selection */
     multiSelectable: boolean;
-    /** Row selection */
     rowSelection: SelectionModel<any>;
     rowSelected: never[];
     rowSelectable: boolean;
@@ -58,21 +55,18 @@ export declare class MtxGridComponent implements OnInit, OnChanges, AfterViewIni
     rowSelectionFormatter: MtxGridRowSelectionFormatter;
     rowClassFormatter: MtxGridRowClassFormatter;
     rowSelectionChange: EventEmitter<any[]>;
-    /** Cell selection */
     cellSelection: any[];
     cellSelectable: boolean;
     cellSelectionChange: EventEmitter<any[]>;
     private _selectedCell;
-    /** Toolbar */
     showToolbar: boolean;
     toolbarTitle: string;
     toolbarTemplate: TemplateRef<any>;
-    /** Column menu */
     columnMenuData: MtxGridColumnSelectionItem[];
     showColumnMenuButton: boolean;
     columnMenuButtonText: string;
-    columnMenuButtonType: string;
-    columnMenuButtonColor: string;
+    columnMenuButtonType: MtxGridButtonType;
+    columnMenuButtonColor: ThemePalette;
     columnMenuButtonClass: string;
     columnMenuButtonIcon: string;
     columnHideable: boolean;
@@ -86,24 +80,17 @@ export declare class MtxGridComponent implements OnInit, OnChanges, AfterViewIni
     showColumnMenuFooter: boolean;
     columnMenuFooterText: string;
     columnMenuFooterTemplate: TemplateRef<any>;
-    /** No Result */
     noResultText: string;
     noResultTemplate: TemplateRef<any>;
     get _hasNoResult(): boolean;
-    /** thead */
     headerTemplate: TemplateRef<any> | MtxGridCellTemplate | any;
     headerExtraTemplate: TemplateRef<any> | MtxGridCellTemplate | any;
-    /** tbody */
     cellTemplate: TemplateRef<any> | MtxGridCellTemplate | any;
-    /** tfoot */
     showSummary: boolean;
     summaryTemplate: TemplateRef<any> | MtxGridCellTemplate | any;
     get _whetherShowSummary(): boolean;
-    /** Sidebar */
     showSidebar: boolean;
     sidebarTemplate: TemplateRef<any>;
-    /** Column resizable */
-    columnResizable: boolean;
     constructor(_dataGridSrv: MtxGridService, _changeDetectorRef: ChangeDetectorRef);
     detectChanges(): void;
     _isTemplateRef(obj: any): boolean;

package/data-grid/grid.component.scss

@@ -27,22 +27,60 @@
     }
   }
 
+  .mat-table-sticky-left {
+    border-right-width: 1px;
+    border-right-style: solid;
+
+    [dir='rtl'] & {
+      border-right-width: 0;
+      border-left-width: 1px;
+      border-left-style: solid;
+    }
+  }
+
+  .mat-table-sticky-right {
+    border-left-width: 1px;
+    border-left-style: solid;
+
+    [dir='rtl'] & {
+      border-left-width: 0;
+      border-right-width: 1px;
+      border-right-style: solid;
+    }
+  }
+
   .mat-header-cell,
   .mat-footer-cell,
   .mat-cell {
     padding: 4px 10px;
     box-sizing: border-box;
 
-    &.mtx-grid-checkbox-cell {
-      padding-left: 10px;
-      padding-right: 10px;
-    }
+    &:first-of-type:not(:only-of-type) {
+      padding-left: 24px;
 
-    [dir='rtl'] & {
       &.mtx-grid-checkbox-cell {
         padding-left: 10px;
         padding-right: 10px;
       }
+
+      [dir='rtl'] & {
+        padding-left: 10px;
+        padding-right: 24px;
+
+        &.mtx-grid-checkbox-cell {
+          padding-left: 10px;
+          padding-right: 10px;
+        }
+      }
+    }
+
+    &:last-of-type:not(:only-of-type) {
+      padding-right: 24px;
+
+      [dir='rtl'] & {
+        padding-left: 24px;
+        padding-right: 10px;
+      }
     }
   }
 
@@ -118,6 +156,14 @@
 
 .mtx-grid-sidebar {
   max-width: 50%;
+  border-left-width: 1px;
+  border-left-style: solid;
+
+  [dir='rtl'] & {
+    border-left-width: 0;
+    border-right-width: 1px;
+    border-right-style: solid;
+  }
 }
 
 .mtx-grid-no-result {

package/data-grid/grid.interface.d.ts

@@ -1,9 +1,8 @@
 import { TemplateRef } from '@angular/core';
+import { ThemePalette } from '@angular/material/core';
 import { MatMenu, MatMenuTrigger } from '@angular/material/menu';
 import { Observable } from 'rxjs';
-/**
- * Grid
- */
+/** Column definition of grid. */
 export interface MtxGridColumn {
     field: string;
     header?: string | Observable<string>;
@@ -29,13 +28,9 @@ export interface MtxGridColumn {
     summary?: ((data: any[], colDef?: MtxGridColumn) => void) | string;
     class?: string;
 }
-/**
- * Column type
- */
+/** Possible column type values. */
 export declare type MtxGridColumnType = 'tag' | 'button' | 'link' | 'image' | 'boolean' | 'number' | 'currency' | 'percent' | 'date';
-/**
- * Column type parameter
- */
+/** Column type parameter. */
 export interface MtxGridColumnTypeParameter {
     currencyCode?: string;
     display?: string | boolean;
@@ -44,51 +39,44 @@ export interface MtxGridColumnTypeParameter {
     locale?: string;
     timezone?: string;
 }
-/**
- * Column sort properties
- */
+/** The properties of column sort. */
 export interface MtxGridColumnSortProp {
     arrowPosition?: 'before' | 'after';
     disableClear?: boolean;
     id?: string;
     start?: 'asc' | 'desc';
 }
-/**
- * Tag
- */
+/** Column tag of grid. */
 export interface MtxGridColumnTag {
     [key: number]: MtxGridColumnTagValue;
     [key: string]: MtxGridColumnTagValue;
 }
+/** The properties of column tag. */
 export interface MtxGridColumnTagValue {
     text?: string;
     color?: string;
 }
-/**
- * Button
- */
+/** The properties of column button. */
 export interface MtxGridColumnButton {
     type?: 'basic' | 'icon';
     text?: string | Observable<string>;
     icon?: string;
-    color?: 'primary' | 'accent' | 'warn';
+    color?: ThemePalette;
     class?: string;
     click?: (record: any) => void;
     pop?: boolean;
     popTitle?: string | Observable<string>;
     popDescription?: string | Observable<string>;
-    popOkColor?: '' | 'primary' | 'accent' | 'warn';
+    popOkColor?: ThemePalette;
     popOkText?: string | Observable<string>;
-    popCloseColor?: '' | 'primary' | 'accent' | 'warn';
+    popCloseColor?: ThemePalette;
     popCloseText?: string | Observable<string>;
     children?: MtxGridColumnButton[];
     iif?: (record: any) => boolean;
     tooltip?: string | Observable<string>;
     disabled?: boolean;
 }
-/**
- * Column selection
- */
+/** The properties of column selection item. */
 export interface MtxGridColumnSelectionItem {
     label: string | Observable<string>;
     field: string;
@@ -96,29 +84,23 @@ export interface MtxGridColumnSelectionItem {
     hide?: boolean;
     disabled?: boolean;
 }
-/**
- * Cell template
- */
+/** Cell template. */
 export interface MtxGridCellTemplate {
     [key: string]: TemplateRef<any>;
 }
-/**
- * Row selection formatter
- */
+/** Row selection formatter. */
 export interface MtxGridRowSelectionFormatter {
     disabled?: (rowData: any, index?: number) => boolean;
     hideCheckbox?: (rowData: any, index?: number) => boolean;
 }
-/**
- * Row class formatter
- */
+/** Row class formatter. */
 export interface MtxGridRowClassFormatter {
     [className: string]: (rowData: any, index?: number) => boolean;
 }
-/**
- * Column menu component
- */
+/** Column menu. */
 export interface MtxGridColumnMenu {
     menuPanel: MatMenu;
     menuTrigger: MatMenuTrigger;
 }
+/** Possible button type values. */
+export declare type MtxGridButtonType = 'raised' | 'stroked' | 'flat' | 'icon' | 'fab' | 'mini-fab';