@ng-matero/extensions 16.1.3 → 16.3.0

package/grid/column-resize/_column-resize.scss

@@ -1,127 +1,121 @@
 @use 'sass:map';
-@use '../../core/style/variables';
-@use '../../core/style/vendor-prefixes';
-@use '../../core/theming/theming';
-
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $primary: map.get($config, primary);
-  $foreground: map.get($config, foreground);
-
-  $non-resizable-hover-divider: theming.get-color-from-palette($foreground, divider);
-  $resizable-hover-divider: theming.get-color-from-palette($primary, 200);
-  $resizable-active-divider: theming.get-color-from-palette($primary, 500);
-
-  // Required for resizing to work properly.
-  .mat-column-resize-table.cdk-column-resize-with-resized-column {
-    table-layout: fixed;
-  }
+@use '@angular/material' as mat;
+@use '../../core/tokens/token-utils';
+@use '../../core/tokens/m2/mtx/grid' as tokens-mtx-grid;
 
-  .mat-column-resize-flex {
-    .mat-mdc-header-cell,
-    .mat-mdc-cell {
-      box-sizing: border-box;
-      min-width: 32px;
-    }
-  }
+$_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
 
-  .mat-mdc-header-cell {
-    position: relative;
-  }
+// Required for resizing to work properly.
+.mat-column-resize-table.cdk-column-resize-with-resized-column {
+  table-layout: fixed;
+}
 
-  .mat-resizable {
+.mat-column-resize-flex {
+  .mat-mdc-header-cell,
+  .mat-mdc-cell {
     box-sizing: border-box;
+    min-width: 32px;
   }
+}
+
+.mat-mdc-header-cell {
+  position: relative;
+}
 
+.mat-resizable {
+  box-sizing: border-box;
+}
+
+.mat-mdc-header-cell:not(.mat-resizable)::after,
+.mat-resizable-handle {
+  position: absolute;
+  bottom: 0;
+  top: 0;
+  right: 0;
+  width: 1px;
+  background: transparent;
+  transition: background mat.$private-swift-ease-in-duration mat.$private-swift-ease-in-timing-function;
+}
+
+.mat-mdc-header-cell:not(.mat-resizable)::after {
+  content: '';
+}
+
+[dir='rtl'] {
   .mat-mdc-header-cell:not(.mat-resizable)::after,
   .mat-resizable-handle {
-    position: absolute;
-    bottom: 0;
-    top: 0;
-    right: 0;
-    width: 1px;
-    background: transparent;
-    transition:
-      background variables.$swift-ease-in-duration
-      variables.$swift-ease-in-timing-function;
+    left: 0;
+    right: auto;
   }
 
-  .mat-mdc-header-cell:not(.mat-resizable)::after {
-    content: '';
+  .mat-mdc-header-row.cdk-column-resize-hover-or-active {
+    .mat-header-cell,
+    .mat-mdc-header-cell {
+      border-left: none;
+    }
   }
+}
 
-  [dir='rtl'] .mat-mdc-header-cell:not(.mat-resizable)::after,
-  [dir='rtl'] .mat-resizable-handle {
-    left: 0;
-    right: auto;
+.mat-mdc-header-row.cdk-column-resize-hover-or-active {
+  .mat-mdc-header-cell {
+    border-right: none;
   }
 
-  .mat-mdc-header-row.cdk-column-resize-hover-or-active {
+  @include token-utils.use-tokens($_tokens...) {
     .mat-mdc-header-cell:not(.mat-resizable)::after {
-      background: $non-resizable-hover-divider;
+      @include token-utils.create-token-slot(background-color, resizable-handle-disabled-background-color);
     }
 
     .mat-resizable-handle {
-      background: $resizable-hover-divider;
+      @include token-utils.create-token-slot(background-color, resizable-handle-hover-background-color);
     }
   }
+}
 
-  .mat-resizable.cdk-resizable-overlay-thumb-active > .mat-resizable-handle {
-    opacity: 0;
-    transition: none;
-  }
+.mat-resizable.cdk-resizable-overlay-thumb-active>.mat-resizable-handle {
+  opacity: 0;
+  transition: none;
+}
 
-  .mat-resizable-handle:focus,
-  .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus {
-    background: $resizable-active-divider;
-    outline: none;
-  }
+.mat-resizable-handle:focus,
+.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus {
+  outline: none;
 
-  .mat-column-resize-overlay-thumb {
-    background: transparent;
-    cursor: col-resize;
-    height: 100%;
-    transition:
-      background variables.$swift-ease-in-duration
-      variables.$swift-ease-in-timing-function;
-    width: 100%;
-    @include vendor-prefixes.user-select(none);
-
-    &:active {
-      background:
-        linear-gradient(
-          90deg,
-          transparent,
-          transparent 7px,
-          $resizable-active-divider,
-          $resizable-active-divider 1px,
-          transparent 8px,
-          transparent
-        );
-      will-change: transform;
-    }
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(background-color, resizable-handle-active-background-color);
   }
 }
 
-@mixin typography($config-or-theme) {}
+.mat-column-resize-overlay-thumb {
+  background: transparent;
+  cursor: col-resize;
+  width: 100%;
+  height: 100%;
+  transition: background mat.$private-swift-ease-in-duration mat.$private-swift-ease-in-timing-function;
 
-@mixin density($config-or-theme) {}
+  @include mat.private-user-select(none);
 
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-column-resize') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  &:active {
+    will-change: transform;
 
-    @if $color != null {
-      @include color($color);
-    }
-    @if $density != null {
-      @include density($density);
-    }
-    @if $typography != null {
-      @include typography($typography);
+    @include token-utils.use-tokens($_tokens...) {
+      $background-color: token-utils.get-token-variable(resizable-handle-active-background-color);
+
+      background: linear-gradient(90deg,
+          transparent, transparent 7px,
+          var($background-color) 7px, var($background-color) 9px,
+          transparent 9px, transparent);
+
+      .mat-column-resize-overlay-thumb-top {
+        background: linear-gradient(90deg,
+            transparent, transparent 4px,
+            var($background-color) 4px, var($background-color) 12px,
+            transparent 12px, transparent);
+      }
     }
   }
 }
+
+.mat-column-resize-overlay-thumb-top {
+  width: 100%;
+}

package/grid/column-resize/column-resize-directives/common.d.ts

@@ -1,10 +1,3 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
 import { Provider } from '@angular/core';
 import { ColumnResize } from '@ng-matero/extensions/column-resize';
 export declare const TABLE_PROVIDERS: Provider[];

package/grid/column-resize/overlay-handle.d.ts

@@ -25,6 +25,7 @@ export declare class MatColumnResizeOverlayHandle extends ResizeOverlayHandle {
     protected readonly resizeRef: ResizeRef;
     protected readonly styleScheduler: _CoalescedStyleScheduler;
     protected readonly document: Document;
+    topElement: ElementRef<HTMLElement>;
     constructor(columnDef: CdkColumnDef, columnResize: ColumnResize, directionality: Directionality, elementRef: ElementRef, eventDispatcher: HeaderRowEventDispatcher, ngZone: NgZone, resizeNotifier: ColumnResizeNotifierSource, resizeRef: ResizeRef, styleScheduler: _CoalescedStyleScheduler, document: any);
     protected updateResizeActive(active: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatColumnResizeOverlayHandle, never>;

package/grid/column-resize/resize-strategy.d.ts

@@ -14,9 +14,9 @@ export { TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER };
  * Overrides CdkFlexTableResizeStrategy to match mat-column elements.
  */
 export declare class MatFlexTableResizeStrategy extends CdkFlexTableResizeStrategy {
-    constructor(columnResize: ColumnResize, styleScheduler: _CoalescedStyleScheduler, table: CdkTable<unknown>, document: any);
+    constructor(columnResize: ColumnResize, styleScheduler: _CoalescedStyleScheduler, table: CdkTable<unknown>, document: any, nonce?: string | null);
     protected getColumnCssClass(cssFriendlyColumnName: string): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatFlexTableResizeStrategy, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatFlexTableResizeStrategy, [null, null, null, null, { optional: true; }]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<MatFlexTableResizeStrategy>;
 }
 export declare const FLEX_RESIZE_STRATEGY_PROVIDER: Provider;

package/grid/grid-module.d.ts

@@ -20,11 +20,11 @@ import * as i18 from "@angular/material/select";
 import * as i19 from "@angular/material/form-field";
 import * as i20 from "@angular/material/menu";
 import * as i21 from "@angular/cdk/drag-drop";
-import * as i22 from "@ng-matero/extensions/dialog";
-import * as i23 from "@ng-matero/extensions/core";
-import * as i24 from "./column-resize/column-resize-module";
+import * as i22 from "./column-resize/column-resize-module";
+import * as i23 from "@ng-matero/extensions/dialog";
+import * as i24 from "@ng-matero/extensions/core";
 export declare class MtxGridModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxGridModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxGridModule, [typeof i1.MtxGrid, typeof i2.MtxGridCell, typeof i3.MtxGridColumnMenu, typeof i4.MtxGridExpansionToggle, typeof i1.MtxGridSelectableCell, typeof i5.MtxGridRowClassPipe, typeof i5.MtxGridColClassPipe, typeof i5.MtxGridCellActionsPipe, typeof i5.MtxGridCellActionTooltipPipe, typeof i5.MtxGridCellActionBadgePipe, typeof i5.MtxGridCellActionDisablePipe, typeof i5.MtxGridCellSummaryPipe], [typeof i6.CommonModule, typeof i7.FormsModule, typeof i8.MatTableModule, typeof i9.MatSortModule, typeof i10.MatPaginatorModule, typeof i11.MatCheckboxModule, typeof i12.MatButtonModule, typeof i13.MatProgressBarModule, typeof i14.MatChipsModule, typeof i15.MatTooltipModule, typeof i16.MatBadgeModule, typeof i17.MatIconModule, typeof i18.MatSelectModule, typeof i19.MatFormFieldModule, typeof i20.MatMenuModule, typeof i21.DragDropModule, typeof i22.MtxDialogModule, typeof i23.MtxPipesModule, typeof i24.MatColumnResizeModule], [typeof i1.MtxGrid, typeof i2.MtxGridCell, typeof i3.MtxGridColumnMenu, typeof i4.MtxGridExpansionToggle, typeof i1.MtxGridSelectableCell, typeof i24.MatColumnResizeModule, typeof i5.MtxGridRowClassPipe, typeof i5.MtxGridColClassPipe, typeof i5.MtxGridCellActionTooltipPipe, typeof i5.MtxGridCellActionDisablePipe, typeof i5.MtxGridCellSummaryPipe]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxGridModule, [typeof i1.MtxGrid, typeof i2.MtxGridCell, typeof i3.MtxGridColumnMenu, typeof i4.MtxGridExpansionToggle, typeof i1.MtxGridSelectableCell, typeof i5.MtxGridRowClassPipe, typeof i5.MtxGridColClassPipe, typeof i5.MtxGridCellActionsPipe, typeof i5.MtxGridCellActionTooltipPipe, typeof i5.MtxGridCellActionBadgePipe, typeof i5.MtxGridCellActionDisablePipe, typeof i5.MtxGridCellSummaryPipe], [typeof i6.CommonModule, typeof i7.FormsModule, typeof i8.MatTableModule, typeof i9.MatSortModule, typeof i10.MatPaginatorModule, typeof i11.MatCheckboxModule, typeof i12.MatButtonModule, typeof i13.MatProgressBarModule, typeof i14.MatChipsModule, typeof i15.MatTooltipModule, typeof i16.MatBadgeModule, typeof i17.MatIconModule, typeof i18.MatSelectModule, typeof i19.MatFormFieldModule, typeof i20.MatMenuModule, typeof i21.DragDropModule, typeof i22.MatColumnResizeModule, typeof i23.MtxDialogModule, typeof i24.MtxPipesModule], [typeof i22.MatColumnResizeModule, typeof i1.MtxGrid, typeof i2.MtxGridCell, typeof i3.MtxGridColumnMenu, typeof i4.MtxGridExpansionToggle, typeof i1.MtxGridSelectableCell, typeof i5.MtxGridRowClassPipe, typeof i5.MtxGridColClassPipe, typeof i5.MtxGridCellActionsPipe, typeof i5.MtxGridCellActionTooltipPipe, typeof i5.MtxGridCellActionBadgePipe, typeof i5.MtxGridCellActionDisablePipe, typeof i5.MtxGridCellSummaryPipe]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MtxGridModule>;
 }

package/grid/grid-utils.d.ts

@@ -16,12 +16,6 @@ export declare class MtxGridUtils {
      * @returns
      */
     getColData(data: any[], colDef: MtxGridColumn): any[];
-    /**
-     * Remove white spaces in a string and convert string to array
-     * @param str
-     * @returns
-     */
-    str2arr(str: string): string[];
     /**
      * Whether the value is empty (`null`, `undefined`, `''`, `[]`)
      * @param value

package/grid/grid.d.ts

@@ -86,6 +86,8 @@ export declare class MtxGrid implements OnChanges, AfterViewInit, OnDestroy {
     rowStriped: boolean;
     /** Event emitted when the user clicks the row. */
     rowClick: EventEmitter<any>;
+    /** Event emitted when the user attempts to open a context menu. */
+    rowContextMenu: EventEmitter<any>;
     expansionRowStates: any[];
     /** Whether the row is expandable. */
     expandable: boolean;
@@ -98,8 +100,6 @@ export declare class MtxGrid implements OnChanges, AfterViewInit, OnDestroy {
     multiSelectable: boolean;
     /** Whether the user can select multiple rows with click. */
     multiSelectionWithClick: boolean;
-    /** The selected row items. */
-    rowSelected: any[];
     /** Whether the row is selectable. */
     rowSelectable: boolean;
     /** Whether to hide the row selection checkbox. */
@@ -110,13 +110,15 @@ export declare class MtxGrid implements OnChanges, AfterViewInit, OnDestroy {
     rowSelectionFormatter: MtxGridRowSelectionFormatter;
     /** The formatter to set the row's class. */
     rowClassFormatter?: MtxGridRowClassFormatter;
+    /** The selected row items. */
+    rowSelected: any[];
     /** Event emitted when the row is selected. */
-    rowSelectionChange: EventEmitter<any[]>;
+    rowSelectedChange: EventEmitter<any[]>;
     cellSelection: any[];
     /** Whether the cell is selectable. */
     cellSelectable: boolean;
     /** Event emitted when the cell is selected. */
-    cellSelectionChange: EventEmitter<any[]>;
+    cellSelectedChange: EventEmitter<any[]>;
     private _selectedCell?;
     /** Whether to show the toolbar. */
     showToolbar: boolean;
@@ -221,8 +223,9 @@ export declare class MtxGrid implements OnChanges, AfterViewInit, OnDestroy {
     _onPage(e: PageEvent): void;
     scrollTop(value?: number): number | void;
     scrollLeft(value?: number): number | void;
+    _contextmenu(event: MouseEvent, rowData: Record<string, any>, index: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxGrid, [null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MtxGrid, "mtx-grid", ["mtxGrid"], { "displayedColumns": { "alias": "displayedColumns"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "data": { "alias": "data"; "required": false; }; "length": { "alias": "length"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "trackBy": { "alias": "trackBy"; "required": false; }; "columnResizable": { "alias": "columnResizable"; "required": false; }; "emptyValuePlaceholder": { "alias": "emptyValuePlaceholder"; "required": false; }; "pageOnFront": { "alias": "pageOnFront"; "required": false; }; "showPaginator": { "alias": "showPaginator"; "required": false; }; "pageDisabled": { "alias": "pageDisabled"; "required": false; }; "showFirstLastButtons": { "alias": "showFirstLastButtons"; "required": false; }; "pageIndex": { "alias": "pageIndex"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; "hidePageSize": { "alias": "hidePageSize"; "required": false; }; "paginationTemplate": { "alias": "paginationTemplate"; "required": false; }; "sortOnFront": { "alias": "sortOnFront"; "required": false; }; "sortActive": { "alias": "sortActive"; "required": false; }; "sortDirection": { "alias": "sortDirection"; "required": false; }; "sortDisableClear": { "alias": "sortDisableClear"; "required": false; }; "sortDisabled": { "alias": "sortDisabled"; "required": false; }; "sortStart": { "alias": "sortStart"; "required": false; }; "rowHover": { "alias": "rowHover"; "required": false; }; "rowStriped": { "alias": "rowStriped"; "required": false; }; "expandable": { "alias": "expandable"; "required": false; }; "expansionTemplate": { "alias": "expansionTemplate"; "required": false; }; "multiSelectable": { "alias": "multiSelectable"; "required": false; }; "multiSelectionWithClick": { "alias": "multiSelectionWithClick"; "required": false; }; "rowSelected": { "alias": "rowSelected"; "required": false; }; "rowSelectable": { "alias": "rowSelectable"; "required": false; }; "hideRowSelectionCheckbox": { "alias": "hideRowSelectionCheckbox"; "required": false; }; "disableRowClickSelection": { "alias": "disableRowClickSelection"; "required": false; }; "rowSelectionFormatter": { "alias": "rowSelectionFormatter"; "required": false; }; "rowClassFormatter": { "alias": "rowClassFormatter"; "required": false; }; "cellSelectable": { "alias": "cellSelectable"; "required": false; }; "showToolbar": { "alias": "showToolbar"; "required": false; }; "toolbarTitle": { "alias": "toolbarTitle"; "required": false; }; "toolbarTemplate": { "alias": "toolbarTemplate"; "required": false; }; "columnHideable": { "alias": "columnHideable"; "required": false; }; "columnHideableChecked": { "alias": "columnHideableChecked"; "required": false; }; "columnSortable": { "alias": "columnSortable"; "required": false; }; "columnPinnable": { "alias": "columnPinnable"; "required": false; }; "columnPinOptions": { "alias": "columnPinOptions"; "required": false; }; "showColumnMenuButton": { "alias": "showColumnMenuButton"; "required": false; }; "columnMenuButtonText": { "alias": "columnMenuButtonText"; "required": false; }; "columnMenuButtonType": { "alias": "columnMenuButtonType"; "required": false; }; "columnMenuButtonColor": { "alias": "columnMenuButtonColor"; "required": false; }; "columnMenuButtonClass": { "alias": "columnMenuButtonClass"; "required": false; }; "columnMenuButtonIcon": { "alias": "columnMenuButtonIcon"; "required": false; }; "showColumnMenuHeader": { "alias": "showColumnMenuHeader"; "required": false; }; "columnMenuHeaderText": { "alias": "columnMenuHeaderText"; "required": false; }; "columnMenuHeaderTemplate": { "alias": "columnMenuHeaderTemplate"; "required": false; }; "showColumnMenuFooter": { "alias": "showColumnMenuFooter"; "required": false; }; "columnMenuFooterText": { "alias": "columnMenuFooterText"; "required": false; }; "columnMenuFooterTemplate": { "alias": "columnMenuFooterTemplate"; "required": false; }; "noResultText": { "alias": "noResultText"; "required": false; }; "noResultTemplate": { "alias": "noResultTemplate"; "required": false; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; }; "headerExtraTemplate": { "alias": "headerExtraTemplate"; "required": false; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; }; "useContentRowTemplate": { "alias": "useContentRowTemplate"; "required": false; }; "useContentHeaderRowTemplate": { "alias": "useContentHeaderRowTemplate"; "required": false; }; "useContentFooterRowTemplate": { "alias": "useContentFooterRowTemplate"; "required": false; }; "showSummary": { "alias": "showSummary"; "required": false; }; "summaryTemplate": { "alias": "summaryTemplate"; "required": false; }; "showSidebar": { "alias": "showSidebar"; "required": false; }; "sidebarTemplate": { "alias": "sidebarTemplate"; "required": false; }; "showStatusbar": { "alias": "showStatusbar"; "required": false; }; "statusbarTemplate": { "alias": "statusbarTemplate"; "required": false; }; }, { "page": "page"; "sortChange": "sortChange"; "rowClick": "rowClick"; "expansionChange": "expansionChange"; "rowSelectionChange": "rowSelectionChange"; "cellSelectionChange": "cellSelectionChange"; "columnChange": "columnChange"; }, ["rowDefs", "headerRowDefs", "footerRowDefs"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxGrid, "mtx-grid", ["mtxGrid"], { "displayedColumns": { "alias": "displayedColumns"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "data": { "alias": "data"; "required": false; }; "length": { "alias": "length"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "trackBy": { "alias": "trackBy"; "required": false; }; "columnResizable": { "alias": "columnResizable"; "required": false; }; "emptyValuePlaceholder": { "alias": "emptyValuePlaceholder"; "required": false; }; "pageOnFront": { "alias": "pageOnFront"; "required": false; }; "showPaginator": { "alias": "showPaginator"; "required": false; }; "pageDisabled": { "alias": "pageDisabled"; "required": false; }; "showFirstLastButtons": { "alias": "showFirstLastButtons"; "required": false; }; "pageIndex": { "alias": "pageIndex"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; "hidePageSize": { "alias": "hidePageSize"; "required": false; }; "paginationTemplate": { "alias": "paginationTemplate"; "required": false; }; "sortOnFront": { "alias": "sortOnFront"; "required": false; }; "sortActive": { "alias": "sortActive"; "required": false; }; "sortDirection": { "alias": "sortDirection"; "required": false; }; "sortDisableClear": { "alias": "sortDisableClear"; "required": false; }; "sortDisabled": { "alias": "sortDisabled"; "required": false; }; "sortStart": { "alias": "sortStart"; "required": false; }; "rowHover": { "alias": "rowHover"; "required": false; }; "rowStriped": { "alias": "rowStriped"; "required": false; }; "expandable": { "alias": "expandable"; "required": false; }; "expansionTemplate": { "alias": "expansionTemplate"; "required": false; }; "multiSelectable": { "alias": "multiSelectable"; "required": false; }; "multiSelectionWithClick": { "alias": "multiSelectionWithClick"; "required": false; }; "rowSelectable": { "alias": "rowSelectable"; "required": false; }; "hideRowSelectionCheckbox": { "alias": "hideRowSelectionCheckbox"; "required": false; }; "disableRowClickSelection": { "alias": "disableRowClickSelection"; "required": false; }; "rowSelectionFormatter": { "alias": "rowSelectionFormatter"; "required": false; }; "rowClassFormatter": { "alias": "rowClassFormatter"; "required": false; }; "rowSelected": { "alias": "rowSelected"; "required": false; }; "cellSelectable": { "alias": "cellSelectable"; "required": false; }; "showToolbar": { "alias": "showToolbar"; "required": false; }; "toolbarTitle": { "alias": "toolbarTitle"; "required": false; }; "toolbarTemplate": { "alias": "toolbarTemplate"; "required": false; }; "columnHideable": { "alias": "columnHideable"; "required": false; }; "columnHideableChecked": { "alias": "columnHideableChecked"; "required": false; }; "columnSortable": { "alias": "columnSortable"; "required": false; }; "columnPinnable": { "alias": "columnPinnable"; "required": false; }; "columnPinOptions": { "alias": "columnPinOptions"; "required": false; }; "showColumnMenuButton": { "alias": "showColumnMenuButton"; "required": false; }; "columnMenuButtonText": { "alias": "columnMenuButtonText"; "required": false; }; "columnMenuButtonType": { "alias": "columnMenuButtonType"; "required": false; }; "columnMenuButtonColor": { "alias": "columnMenuButtonColor"; "required": false; }; "columnMenuButtonClass": { "alias": "columnMenuButtonClass"; "required": false; }; "columnMenuButtonIcon": { "alias": "columnMenuButtonIcon"; "required": false; }; "showColumnMenuHeader": { "alias": "showColumnMenuHeader"; "required": false; }; "columnMenuHeaderText": { "alias": "columnMenuHeaderText"; "required": false; }; "columnMenuHeaderTemplate": { "alias": "columnMenuHeaderTemplate"; "required": false; }; "showColumnMenuFooter": { "alias": "showColumnMenuFooter"; "required": false; }; "columnMenuFooterText": { "alias": "columnMenuFooterText"; "required": false; }; "columnMenuFooterTemplate": { "alias": "columnMenuFooterTemplate"; "required": false; }; "noResultText": { "alias": "noResultText"; "required": false; }; "noResultTemplate": { "alias": "noResultTemplate"; "required": false; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; }; "headerExtraTemplate": { "alias": "headerExtraTemplate"; "required": false; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; }; "useContentRowTemplate": { "alias": "useContentRowTemplate"; "required": false; }; "useContentHeaderRowTemplate": { "alias": "useContentHeaderRowTemplate"; "required": false; }; "useContentFooterRowTemplate": { "alias": "useContentFooterRowTemplate"; "required": false; }; "showSummary": { "alias": "showSummary"; "required": false; }; "summaryTemplate": { "alias": "summaryTemplate"; "required": false; }; "showSidebar": { "alias": "showSidebar"; "required": false; }; "sidebarTemplate": { "alias": "sidebarTemplate"; "required": false; }; "showStatusbar": { "alias": "showStatusbar"; "required": false; }; "statusbarTemplate": { "alias": "statusbarTemplate"; "required": false; }; }, { "page": "page"; "sortChange": "sortChange"; "rowClick": "rowClick"; "rowContextMenu": "rowContextMenu"; "expansionChange": "expansionChange"; "rowSelectedChange": "rowSelectedChange"; "cellSelectedChange": "cellSelectedChange"; "columnChange": "columnChange"; }, ["rowDefs", "headerRowDefs", "footerRowDefs"], never, false, never>;
 }
 export declare class MtxGridSelectableCell {
     private _grid;
@@ -232,12 +235,12 @@ export declare class MtxGridSelectableCell {
     shiftKeyPressed: boolean;
     get selected(): boolean;
     set mtxSelectableRowData(value: any);
-    cellSelectionChange: EventEmitter<MtxGridSelectableCell>;
+    cellSelectedChange: EventEmitter<MtxGridSelectableCell>;
     constructor(_grid: MtxGrid);
     onClick(event: MouseEvent): void;
     select(): void;
     deselect(): void;
     toggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxGridSelectableCell, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxGridSelectableCell, "[mtx-grid-selectable-cell]", never, { "mtxSelectableRowData": { "alias": "mtxSelectableRowData"; "required": false; }; }, { "cellSelectionChange": "cellSelectionChange"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxGridSelectableCell, "[mtx-grid-selectable-cell]", never, { "mtxSelectableRowData": { "alias": "mtxSelectableRowData"; "required": false; }; }, { "cellSelectedChange": "cellSelectedChange"; }, never, never, false, never>;
 }

package/grid/grid.scss

@@ -1,9 +1,41 @@
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mtx/grid' as tokens-mtx-grid;
+
+$_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
+
 .mtx-grid {
   position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
 
+  @include token-utils.use-tokens($_tokens...) {
+    $border-color: token-utils.get-token-variable(outline-color);
+
+    border: 1px solid var($border-color);
+
+    .mat-mdc-table {
+      &.mat-table-striped .mat-row-odd {
+        @include token-utils.create-token-slot(background-color, table-row-striped-background-color);
+      }
+
+      &.mat-table-hover .mat-mdc-row:hover {
+        @include token-utils.create-token-slot(background-color, table-row-hover-background-color);
+      }
+
+      .mat-mdc-row.selected,
+      .mat-mdc-row.mat-row-odd.selected {
+        @include token-utils.create-token-slot(background-color, table-row-selected-background-color);
+      }
+
+      .mat-mdc-cell.selected {
+        $shadow: token-utils.get-token-variable(table-cell-selected-outline-color);
+
+        box-shadow: inset 0 0 0 1px var($shadow);
+      }
+    }
+  }
+
   .mat-table-container {
     overflow: auto;
 
@@ -26,24 +58,20 @@
   }
 
   .mat-table-sticky-left {
-    border-right-width: 1px;
-    border-right-style: solid;
+    border-right: 1px solid var(--mat-table-row-item-outline-color);
 
     [dir='rtl'] & {
       border-right-width: 0;
-      border-left-width: 1px;
-      border-left-style: solid;
+      border-left: 1px solid var(--mat-table-row-item-outline-color);
     }
   }
 
   .mat-table-sticky-right {
-    border-left-width: 1px;
-    border-left-style: solid;
+    border-left: 1px solid var(--mat-table-row-item-outline-color);
 
     [dir='rtl'] & {
       border-left-width: 0;
-      border-right-width: 1px;
-      border-right-style: solid;
+      border-right: 1px solid var(--mat-table-row-item-outline-color);
     }
   }
 
@@ -82,6 +110,14 @@
     }
   }
 
+  .mat-mdc-footer-cell {
+    border-top: 1px solid var(--mat-table-row-item-outline-color);
+
+    @include token-utils.use-tokens($_tokens...) {
+      @include token-utils.create-token-slot(background-color, table-footer-background-color);
+    }
+  }
+
   .mat-mdc-row {
     &.mtx-grid-expansion {
       height: 0;
@@ -111,6 +147,14 @@
     align-items: center;
   }
 
+  .mat-mdc-paginator {
+    @include token-utils.use-tokens($_tokens...) {
+      $border-color: token-utils.get-token-variable(outline-color);
+
+      border-top: 1px solid var($border-color);
+    }
+  }
+
   .mat-paginator-hidden {
     display: none;
   }
@@ -130,6 +174,12 @@
   min-height: 48px;
   padding: 8px;
   box-sizing: border-box;
+
+  @include token-utils.use-tokens($_tokens...) {
+    $border-color: token-utils.get-token-variable(outline-color);
+
+    border-bottom: 1px solid var($border-color);
+  }
 }
 
 .mtx-grid-layout {
@@ -145,13 +195,16 @@
 
 .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;
+  @include token-utils.use-tokens($_tokens...) {
+    $border-color: token-utils.get-token-variable(outline-color);
+
+    border-left: 1px solid var($border-color);
+
+    [dir='rtl'] & {
+      border-left-width: 0;
+      border-right: 1px solid var($border-color);
+    }
   }
 }
 
@@ -165,6 +218,12 @@
   align-items: center;
   min-height: 56px;
   padding: 8px;
+
+  @include token-utils.use-tokens($_tokens...) {
+    $border-color: token-utils.get-token-variable(outline-color);
+
+    border-top: 1px solid var($border-color);
+  }
 }
 
 .mtx-grid-no-result {
@@ -215,7 +274,7 @@
     transform: rotate(90deg);
   }
 
-  + mtx-grid-cell {
+  +mtx-grid-cell {
     vertical-align: middle;
   }
 
@@ -230,3 +289,32 @@
   height: 20px;
   font-size: 20px;
 }
+
+.mtx-grid-column-menu-item {
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(color, column-menu-text-color);
+  }
+}
+
+.mtx-grid-column-menu-header,
+.mtx-grid-column-menu-footer {
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(color, column-menu-text-color);
+  }
+}
+
+.mtx-grid-column-menu-header {
+  @include token-utils.use-tokens($_tokens...) {
+    $border-color: token-utils.get-token-variable(column-menu-divider-color);
+
+    border-bottom: 1px solid var($border-color);
+  }
+}
+
+.mtx-grid-column-menu-footer {
+  @include token-utils.use-tokens($_tokens...) {
+    $border-color: token-utils.get-token-variable(column-menu-divider-color);
+
+    border-top: 1px solid var($border-color);
+  }
+}

package/loader/_loader-theme.scss

@@ -1,14 +1,14 @@
-@use 'sass:map';
 @use '../core/theming/theming';
+@use '../core/style/sass-utils';
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mtx/loader' as tokens-mtx-loader;
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  $is-dark-theme: map.get($config, is-dark);
-  $foreground: map.get($config, foreground);
-  $background: map.get($config, background);
 
-  .mtx-loader-backdrop {
-    background-color: theming.get-color-from-palette($background, background, .75);
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mtx-loader.$prefix,
+      tokens-mtx-loader.get-color-tokens($config));
   }
 }
 

package/loader/loader.scss

@@ -1,3 +1,6 @@
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mtx/loader' as tokens-mtx-loader;
+
 .mtx-loader {
   position: relative;
   display: block;
@@ -37,4 +40,8 @@
   width: 100%;
   height: 100%;
   content: '';
+
+  @include token-utils.use-tokens(tokens-mtx-loader.$prefix, tokens-mtx-loader.get-token-slots()) {
+    @include token-utils.create-token-slot(background-color, backdrop-background-color);
+  }
 }