@ng-matero/extensions 16.1.2 → 16.2.0

package/grid/grid.d.ts

@@ -98,8 +98,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 +108,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;
@@ -222,7 +222,7 @@ export declare class MtxGrid implements OnChanges, AfterViewInit, OnDestroy {
     scrollTop(value?: number): number | void;
     scrollLeft(value?: number): 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"; "expansionChange": "expansionChange"; "rowSelectedChange": "rowSelectedChange"; "cellSelectedChange": "cellSelectedChange"; "columnChange": "columnChange"; }, ["rowDefs", "headerRowDefs", "footerRowDefs"], never, false, never>;
 }
 export declare class MtxGridSelectableCell {
     private _grid;
@@ -232,12 +232,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;
@@ -107,10 +143,18 @@
   }
 
   .mat-header-cell-inner {
-    display: flex;
+    display: inline-flex;
     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/grid/image-preview.d.ts

@@ -0,0 +1,13 @@
+import PhotoViewer from 'photoviewer';
+import { MtxGridUtils } from './grid-utils';
+import * as i0 from "@angular/core";
+export declare class MtxGridImagePreview {
+    private _utils;
+    images: PhotoViewer.Img[];
+    options?: PhotoViewer.Options;
+    constructor(_utils: MtxGridUtils);
+    onClick(event: MouseEvent): void;
+    initPhotoViewer(imgs?: PhotoViewer.Img[]): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxGridImagePreview, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxGridImagePreview, "[mtx-grid-image-preview]", never, { "images": { "alias": "images"; "required": false; }; "options": { "alias": "options"; "required": false; }; }, {}, never, never, false, never>;
+}

package/grid/public-api.d.ts

@@ -5,6 +5,7 @@ export * from './grid';
 export * from './cell';
 export * from './column-menu';
 export * from './expansion-toggle';
+export * from './image-preview';
 export * from './interfaces';
 export { TABLE_PROVIDERS as MAT_TABLE_PROVIDERS, FLEX_PROVIDERS as MAT_FLEX_PROVIDERS, TABLE_HOST_BINDINGS as MAT_TABLE_HOST_BINDINGS, FLEX_HOST_BINDINGS as MAT_FLEX_HOST_BINDINGS, AbstractMatColumnResize, } from './column-resize/column-resize-directives/common';
 export { MatColumnResize } from './column-resize/column-resize-directives/column-resize';

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);
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-matero/extensions",
-  "version": "16.1.2",
+  "version": "16.2.0",
   "description": "Angular Material Extensions",
   "publishConfig": {
     "access": "public"
@@ -90,18 +90,18 @@
       "esm": "./esm2022/colorpicker/mtxColorpicker.mjs",
       "default": "./fesm2022/mtxColorpicker.mjs"
     },
-    "./column-resize": {
-      "types": "./column-resize/index.d.ts",
-      "esm2022": "./esm2022/column-resize/mtxColumnResize.mjs",
-      "esm": "./esm2022/column-resize/mtxColumnResize.mjs",
-      "default": "./fesm2022/mtxColumnResize.mjs"
-    },
     "./core": {
       "types": "./core/index.d.ts",
       "esm2022": "./esm2022/core/mtxCore.mjs",
       "esm": "./esm2022/core/mtxCore.mjs",
       "default": "./fesm2022/mtxCore.mjs"
     },
+    "./column-resize": {
+      "types": "./column-resize/index.d.ts",
+      "esm2022": "./esm2022/column-resize/mtxColumnResize.mjs",
+      "esm": "./esm2022/column-resize/mtxColumnResize.mjs",
+      "default": "./fesm2022/mtxColumnResize.mjs"
+    },
     "./datetimepicker": {
       "types": "./datetimepicker/index.d.ts",
       "esm2022": "./esm2022/datetimepicker/mtxDatetimepicker.mjs",
@@ -120,18 +120,18 @@
       "esm": "./esm2022/drawer/mtxDrawer.mjs",
       "default": "./fesm2022/mtxDrawer.mjs"
     },
-    "./grid": {
-      "types": "./grid/index.d.ts",
-      "esm2022": "./esm2022/grid/mtxGrid.mjs",
-      "esm": "./esm2022/grid/mtxGrid.mjs",
-      "default": "./fesm2022/mtxGrid.mjs"
-    },
     "./loader": {
       "types": "./loader/index.d.ts",
       "esm2022": "./esm2022/loader/mtxLoader.mjs",
       "esm": "./esm2022/loader/mtxLoader.mjs",
       "default": "./fesm2022/mtxLoader.mjs"
     },
+    "./grid": {
+      "types": "./grid/index.d.ts",
+      "esm2022": "./esm2022/grid/mtxGrid.mjs",
+      "esm": "./esm2022/grid/mtxGrid.mjs",
+      "default": "./fesm2022/mtxGrid.mjs"
+    },
     "./popover": {
       "types": "./popover/index.d.ts",
       "esm2022": "./esm2022/popover/mtxPopover.mjs",
@@ -150,12 +150,6 @@
       "esm": "./esm2022/select/mtxSelect.mjs",
       "default": "./fesm2022/mtxSelect.mjs"
     },
-    "./slider": {
-      "types": "./slider/index.d.ts",
-      "esm2022": "./esm2022/slider/mtxSlider.mjs",
-      "esm": "./esm2022/slider/mtxSlider.mjs",
-      "default": "./fesm2022/mtxSlider.mjs"
-    },
     "./split": {
       "types": "./split/index.d.ts",
       "esm2022": "./esm2022/split/mtxSplit.mjs",
@@ -172,7 +166,7 @@
   "dependencies": {
     "@ng-select/ng-select": "^11.0.0",
     "ngx-color": "^9.0.0",
-    "photoviewer": "^3.8.0",
+    "photoviewer": "^3.9.0",
     "tslib": "^2.4.0"
   },
   "peerDependencies": {

package/popover/_popover-theme.scss

@@ -1,48 +1,14 @@
-@use 'sass:map';
 @use '../core/theming/theming';
+@use '../core/style/sass-utils';
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mtx/popover' as tokens-mtx-popover;
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  $background: map.get($config, background);
-  $foreground: map.get($config, foreground);
 
-  .mtx-popover-panel {
-    color: theming.get-color-from-palette($foreground, text);
-    background-color: theming.get-color-from-palette($background, card);
-  }
-
-  [class*='mtx-popover'] {
-    .mtx-popover-direction-arrow {
-      &::before {
-        border-color: theming.get-color-from-palette($foreground, divider);
-      }
-
-      &::after {
-        border-color: theming.get-color-from-palette($background, card);
-      }
-    }
-  }
-
-  [class*='mtx-popover-below'],
-  [class*='mtx-popover-above'] {
-    .mtx-popover-direction-arrow {
-      &::before,
-      &::after {
-        border-left-color: transparent;
-        border-right-color: transparent;
-      }
-    }
-  }
-
-  [class*='mtx-popover-before'],
-  [class*='mtx-popover-after'] {
-    .mtx-popover-direction-arrow {
-      &::before,
-      &::after {
-        border-top-color: transparent;
-        border-bottom-color: transparent;
-      }
-    }
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mtx-popover.$prefix,
+      tokens-mtx-popover.get-color-tokens($config));
   }
 }
 

package/popover/popover.scss

@@ -1,5 +1,10 @@
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mtx/popover' as tokens-mtx-popover;
+
 $arrow-size: 1em; // 16px default
 
+$_tokens: tokens-mtx-popover.$prefix, tokens-mtx-popover.get-token-slots();
+
 .mtx-popover-panel {
   position: relative;
   max-height: calc(100vh - 48px);
@@ -8,6 +13,11 @@ $arrow-size: 1em; // 16px default
   font-size: 16px; // It can change the arrow size
   outline: 0;
 
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(background-color, background-color);
+    @include token-utils.create-token-slot(color, text-color);
+  }
+
   &[class*='mtx-popover-below'] {
     margin-top: calc(#{$arrow-size * .5} + 2px);
   }
@@ -47,9 +57,17 @@ $arrow-size: 1em; // 16px default
     border-style: solid;
   }
 
-  &::after {
-    border-width: calc(#{$arrow-size * .5} - 1px);
+  @include token-utils.use-tokens($_tokens...) {
+    &::before {
+      @include token-utils.create-token-slot(border-color, arrow-outline-color);
+    }
+
+    &::after {
+      border-width: calc(#{$arrow-size * .5} - 1px);
+      @include token-utils.create-token-slot(border-color, background-color);
+    }
   }
+
 }
 
 // Arrow up and down
@@ -59,6 +77,12 @@ $arrow-size: 1em; // 16px default
   .mtx-popover-direction-arrow {
     width: $arrow-size;
 
+    &::before,
+    &::after {
+      border-left-color: transparent;
+      border-right-color: transparent;
+    }
+
     &::after {
       left: 1px;
 
@@ -101,6 +125,12 @@ $arrow-size: 1em; // 16px default
   .mtx-popover-direction-arrow {
     height: $arrow-size;
 
+    &::before,
+    &::after {
+      border-top-color: transparent;
+      border-bottom-color: transparent;
+    }
+
     &::after {
       top: 1px;
     }

package/prebuilt-themes/deeppurple-amber.css

@@ -1 +1 @@
-.mat-button-loading .mdc-button__label,.mat-button-loading .mat-icon{visibility:hidden}.mat-button-loading .mat-mdc-progress-spinner{position:absolute;top:calc(50% - 12px);left:calc(50% - 12px)}.mtx-alert{background-color:#fff}.mtx-alert-info.mtx-alert{background-color:#2196f3;color:#fff}.mtx-alert-success.mtx-alert{background-color:#4caf50;color:#fff}.mtx-alert-warning.mtx-alert{background-color:#ff9800;color:#fff}.mtx-alert-danger.mtx-alert{background-color:#f44336;color:#fff}.mtx-colorpicker-toggle-active{color:#673ab7}.mtx-colorpicker-toggle-active.mat-accent{color:#ffd740}.mtx-colorpicker-toggle-active.mat-warn{color:#f44336}.mtx-datetimepicker-content{background-color:#fff;color:rgba(0,0,0,.87);box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)}.mtx-calendar-header{background-color:#673ab7;color:#fff}.mtx-calendar-body-label{color:rgba(0,0,0,.54)}.mtx-calendar-table-header{color:rgba(0,0,0,.38)}.mtx-calendar-body-cell-content{color:rgba(0,0,0,.87)}.mtx-calendar-body-cell-content.mtx-calendar-body-selected{background-color:#673ab7;color:#fff}.mtx-calendar-body-cell-content.mtx-calendar-body-selected.mtx-calendar-body-today{box-shadow:inset 0 0 0 1px #fff}.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected).mtx-calendar-body-today{border-color:rgba(0,0,0,.38)}.mtx-calendar-body-cell:not(.mtx-calendar-body-disabled):hover>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected),.mtx-calendar-body-active>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:rgba(103,58,183,.3)}.mtx-calendar-body-disabled>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){color:rgba(0,0,0,.38)}.mtx-calendar-body-disabled>.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:rgba(0,0,0,.38)}.mtx-calendar-body-disabled>.mtx-calendar-body-selected{background-color:rgba(103,58,183,.4)}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{color:rgba(0,0,0,.38)}.mtx-clock-wrapper{background-color:rgba(0,0,0,.12)}.mtx-clock-center{background-color:#673ab7}.mtx-clock-hand{background-color:#673ab7}.mtx-clock-hand::before{background-color:#673ab7}.mtx-clock-cell{color:rgba(0,0,0,.87)}.mtx-clock-cell.mtx-clock-cell-selected{background-color:#673ab7;color:#fff}.mtx-clock-cell:not(.mtx-clock-cell-selected,.mtx-clock-cell-disabled):hover{background-color:rgba(0,0,0,.04)}.mtx-clock-cell.mtx-clock-cell-disabled{color:rgba(0,0,0,.38)}.mtx-datetimepicker-toggle-active{color:#673ab7}.mtx-datetimepicker-toggle-active.mat-accent{color:#ffd740}.mtx-datetimepicker-toggle-active.mat-warn{color:#f44336}.mtx-time-input{color:rgba(0,0,0,.87);background-color:rgba(0,0,0,.12)}.mtx-time-input.mtx-time-input-active{color:#673ab7;background-color:rgba(103,58,183,.2)}.mtx-time-input.mtx-time-input-active:focus{border-color:#673ab7;background-color:#fafafa}.mtx-time-input.mtx-time-input-active:focus::placeholder{color:rgba(103,58,183,.6)}.mtx-time-input.mtx-time-input-warning{border-color:#f44336}.mtx-time-ampm .mtx-time-am,.mtx-time-ampm .mtx-time-pm{--mdc-text-button-label-text-color: rgba(0, 0, 0, 0.75);border-color:rgba(0,0,0,.38)}.mtx-time-ampm .mtx-time-am.mtx-time-ampm-active,.mtx-time-ampm .mtx-time-pm.mtx-time-ampm-active{--mdc-text-button-label-text-color: rgba(0, 0, 0, 0.87);--mdc-typography-button-font-weight: 500;background-color:rgba(255,215,64,.2)}.mtx-calendar{font-family:Roboto, "Helvetica Neue", sans-serif}.mtx-calendar-body{font-size:13px}.mtx-calendar-body-label,.mtx-calendar-period-button{font-size:14px;font-weight:500}.mtx-calendar-table-header th{font-size:11px;font-weight:400}.mtx-clock{font-size:14px}.mtx-drawer-container{box-shadow:0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);background:#fff;color:rgba(0,0,0,.87)}.mtx-grid{border:1px solid rgba(0,0,0,.2)}.mtx-grid .mat-table-sticky-left,.mtx-grid .mat-table-sticky-right{border-color:rgba(0,0,0,.12)}.mtx-grid .mat-mdc-table.mat-table-striped .mat-row-odd{background-color:#f5f5f5}.mtx-grid .mat-mdc-table.mat-table-hover .mat-mdc-row:hover{background-color:#e5e5e5}.mtx-grid .mat-mdc-table .mat-mdc-row.selected,.mtx-grid .mat-mdc-table .mat-mdc-row.mat-row-odd.selected{background-color:#e5e5e5}.mtx-grid .mat-mdc-table .mat-mdc-cell.selected{box-shadow:inset 0 0 0 1px #ffd740}.mtx-grid .mat-mdc-footer-row .mat-mdc-footer-cell{border-top:1px solid rgba(0,0,0,.12);border-bottom-width:0;background-color:#f5f5f5}.mtx-grid .mat-mdc-paginator{border-top:1px solid rgba(0,0,0,.2)}.mtx-grid-toolbar{border-bottom:1px solid rgba(0,0,0,.2)}.mtx-grid-sidebar{border-color:rgba(0,0,0,.2)}.mtx-grid-statusbar{border-top:1px solid rgba(0,0,0,.2)}.mtx-grid-column-menu-item{color:rgba(0,0,0,.87)}.mtx-grid-column-menu-header,.mtx-grid-column-menu-footer{color:rgba(0,0,0,.87);background-color:#fff}.mtx-grid-column-menu-header{border-bottom:1px solid rgba(0,0,0,.12)}.mtx-grid-column-menu-footer{border-top:1px solid rgba(0,0,0,.12)}.mat-column-resize-table.cdk-column-resize-with-resized-column{table-layout:fixed}.mat-column-resize-flex .mat-mdc-header-cell,.mat-column-resize-flex .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:rgba(0,0,0,0);transition:background 300ms cubic-bezier(0.55, 0, 0.55, 0.2)}.mat-mdc-header-cell:not(.mat-resizable)::after{content:""}[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:not(.mat-resizable)::after{background:rgba(0,0,0,.12)}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle{background:#b39ddb}.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:#673ab7;outline:none}.mat-column-resize-overlay-thumb{background:rgba(0,0,0,0);cursor:col-resize;height:100%;transition:background 300ms cubic-bezier(0.55, 0, 0.55, 0.2);width:100%;-webkit-user-select:none;user-select:none}.mat-column-resize-overlay-thumb:active{background:linear-gradient(90deg, transparent, transparent 7px, #673ab7, #673ab7 1px, transparent 8px, transparent);will-change:transform}.mtx-loader-backdrop{background-color:rgba(250,250,250,.75)}.mtx-popover-panel{color:rgba(0,0,0,.87);background-color:#fff}[class*=mtx-popover] .mtx-popover-direction-arrow::before{border-color:rgba(0,0,0,.12)}[class*=mtx-popover] .mtx-popover-direction-arrow::after{border-color:#fff}[class*=mtx-popover-below] .mtx-popover-direction-arrow::before,[class*=mtx-popover-below] .mtx-popover-direction-arrow::after,[class*=mtx-popover-above] .mtx-popover-direction-arrow::before,[class*=mtx-popover-above] .mtx-popover-direction-arrow::after{border-left-color:rgba(0,0,0,0);border-right-color:rgba(0,0,0,0)}[class*=mtx-popover-before] .mtx-popover-direction-arrow::before,[class*=mtx-popover-before] .mtx-popover-direction-arrow::after,[class*=mtx-popover-after] .mtx-popover-direction-arrow::before,[class*=mtx-popover-after] .mtx-popover-direction-arrow::after{border-top-color:rgba(0,0,0,0);border-bottom-color:rgba(0,0,0,0)}.mtx-progress{background-color:rgba(0,0,0,.04)}.mtx-progress-fill-info{background-color:#2196f3;color:#fff}.mtx-progress-fill-success{background-color:#4caf50;color:#fff}.mtx-progress-fill-warning{background-color:#ff9800;color:#fff}.mtx-progress-fill-danger{background-color:#f44336;color:#fff}.ng-select .ng-select-container{color:rgba(0,0,0,.87)}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:rgba(0,0,0,.38)}.ng-select .ng-select-container .ng-value-container .ng-input>input{color:rgba(0,0,0,.87)}.ng-select.ng-select-disabled .ng-value{color:rgba(0,0,0,.38)}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:rgba(0,0,0,.87);background-color:#e0e0e0;border:1px solid rgba(0,0,0,.12)}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{opacity:.4}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:rgba(0,0,0,.12)}.ng-select .ng-clear-wrapper{color:rgba(0,0,0,.54)}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#f44336}.ng-select .ng-arrow-wrapper .ng-arrow{border-color:rgba(0,0,0,.54) rgba(0,0,0,0) rgba(0,0,0,0)}.ng-select.ng-select-invalid .ng-arrow-wrapper .ng-arrow{border-color:#f44336 rgba(0,0,0,0) rgba(0,0,0,0)}.ng-select.ng-select-opened .ng-arrow-wrapper .ng-arrow{border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,.54)}.ng-select.ng-select-opened.ng-select-invalid .ng-arrow-wrapper .ng-arrow{border-color:rgba(0,0,0,0) rgba(0,0,0,0) #f44336}.ng-dropdown-panel{background-color:#fff}.ng-dropdown-panel.multiple .ng-option.selected{background:rgba(0,0,0,.12)}.ng-dropdown-panel.multiple .ng-option.marked{background:rgba(0,0,0,.04)}.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid rgba(0,0,0,.12)}.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid rgba(0,0,0,.12)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{color:rgba(0,0,0,.54)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background:rgba(0,0,0,.04)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background:rgba(0,0,0,.12)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{color:rgba(0,0,0,.87)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background:rgba(0,0,0,.04)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background:rgba(0,0,0,.12)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:rgba(0,0,0,.38)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{color:rgba(0,0,0,.38)}.mdc-text-field--outlined .ng-select{padding-top:16px;padding-bottom:16px;margin-top:-16px;margin-bottom:-16px}.ng-select{padding-top:24px;padding-bottom:8px;margin-top:-24px;margin-bottom:-8px}.mdc-text-field--no-label .ng-select{padding-top:16px;padding-bottom:16px;margin-top:-16px;margin-bottom:-16px}.mtx-slider-thumb{box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)}.mtx-slider-track-background{background-color:#bdbdbd}.mat-primary .mtx-slider-track-fill,.mat-primary .mtx-slider-thumb,.mat-primary .mtx-slider-thumb-label{background-color:#673ab7}.mat-primary .mtx-slider-thumb-label-text{color:#fff}.mat-primary .mtx-slider-focus-ring{background-color:rgba(103,58,183,.2)}.mat-accent .mtx-slider-track-fill,.mat-accent .mtx-slider-thumb,.mat-accent .mtx-slider-thumb-label{background-color:#ffd740}.mat-accent .mtx-slider-thumb-label-text{color:rgba(0,0,0,.87)}.mat-accent .mtx-slider-focus-ring{background-color:rgba(255,215,64,.2)}.mat-warn .mtx-slider-track-fill,.mat-warn .mtx-slider-thumb,.mat-warn .mtx-slider-thumb-label{background-color:#f44336}.mat-warn .mtx-slider-thumb-label-text{color:#fff}.mat-warn .mtx-slider-focus-ring{background-color:rgba(244,67,54,.2)}.mtx-slider:hover .mtx-slider-track-background,.mtx-slider.cdk-focused .mtx-slider-track-background{background-color:rgba(0,0,0,.38)}.mtx-slider-disabled .mtx-slider-track-background{background-color:rgba(189,189,189,.54)}.mtx-slider-disabled .mtx-slider-track-fill,.mtx-slider-disabled .mtx-slider-thumb{background-color:#bdbdbd}.mtx-slider-disabled:hover .mtx-slider-track-background,.mtx-slider-disabled.cdk-focused .mtx-slider-track-background{background-color:rgba(189,189,189,.54)}.mtx-slider-min-value .mtx-slider-focus-ring{background-color:rgba(0,0,0,.12)}.mtx-slider-min-value.mtx-slider-thumb-label-showing:not(.mtx-range-slider) .mtx-slider-thumb,.mtx-slider-min-value.mtx-slider-thumb-label-showing:not(.mtx-range-slider) .mtx-slider-thumb-label{background-color:rgba(0,0,0,.87)}.mtx-slider-min-value.mtx-slider-thumb-label-showing:not(.mtx-range-slider).cdk-focused .mtx-slider-thumb,.mtx-slider-min-value.mtx-slider-thumb-label-showing:not(.mtx-range-slider).cdk-focused .mtx-slider-thumb-label{background-color:rgba(0,0,0,.26)}.mtx-slider-min-value:not(.mtx-slider-thumb-label-showing,.mtx-range-slider) .mtx-slider-thumb{background-color:#bdbdbd}.mtx-slider-min-value:not(.mtx-slider-thumb-label-showing,.mtx-range-slider):hover .mtx-slider-thumb,.mtx-slider-min-value:not(.mtx-slider-thumb-label-showing,.mtx-range-slider).cdk-focused .mtx-slider-thumb{background-color:rgba(0,0,0,.38)}.mtx-slider-min-value:not(.mtx-slider-thumb-label-showing,.mtx-range-slider):hover.mtx-slider-disabled .mtx-slider-thumb,.mtx-slider-min-value:not(.mtx-slider-thumb-label-showing,.mtx-range-slider).cdk-focused.mtx-slider-disabled .mtx-slider-thumb{border-color:#bdbdbd}.mtx-slider-has-ticks .mtx-slider-wrapper::after{border-color:rgba(0,0,0,.7)}.mtx-slider-horizontal .mtx-slider-ticks{background-image:repeating-linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) 2px, transparent 0, transparent);background-image:repeating-linear-gradient(0.0001deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) 2px, transparent 0, transparent)}.mtx-slider-vertical .mtx-slider-ticks{background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) 2px, transparent 0, transparent)}.mtx-slider-thumb-label-text{font-family:Roboto, "Helvetica Neue", sans-serif;font-size:12px;font-weight:400}.mtx-split>.mtx-split-gutter{background-color:rgba(0,0,0,.12)}.mtx-split>.mtx-split-gutter:hover{background-color:#673ab7}.mtx-split>.mtx-split-gutter.mat-accent:hover{background-color:#ffd740}.mtx-split>.mtx-split-gutter.mat-warn:hover{background-color:#f44336}.mtx-mdc-tooltip{--mdc-plain-tooltip-container-color:#616161;--mdc-plain-tooltip-supporting-text-color:white}.mtx-mdc-tooltip{--mdc-plain-tooltip-supporting-text-font:Roboto, sans-serif;--mdc-plain-tooltip-supporting-text-size:12px;--mdc-plain-tooltip-supporting-text-weight:400;--mdc-plain-tooltip-supporting-text-tracking:0.0333333333em}
+.mat-button-loading .mdc-button__label,.mat-button-loading .mat-icon{visibility:hidden}.mat-button-loading .mat-mdc-progress-spinner{position:absolute;top:calc(50% - 12px);left:calc(50% - 12px)}html{--mtx-alert-background-color:white;--mtx-alert-text-color:rgba(0, 0, 0, 0.87);--mtx-alert-info-background-color:#2196f3;--mtx-alert-info-text-color:white;--mtx-alert-success-background-color:#4caf50;--mtx-alert-success-text-color:white;--mtx-alert-warning-background-color:#ff9800;--mtx-alert-warning-text-color:white;--mtx-alert-danger-background-color:#f44336;--mtx-alert-danger-text-color:white}html{--mtx-colorpicker-toggle-active-state-icon-color:#673ab7;--mtx-colorpicker-toggle-icon-color:rgba(0, 0, 0, 0.54)}.mtx-colorpicker-toggle-active.mat-accent{--mtx-colorpicker-toggle-active-state-icon-color:#ffd740}.mtx-colorpicker-toggle-active.mat-warn{--mtx-colorpicker-toggle-active-state-icon-color:#f44336}html{--mtx-datetimepicker-calendar-header-background-color:#673ab7;--mtx-datetimepicker-calendar-date-selected-state-text-color:white;--mtx-datetimepicker-calendar-date-selected-state-background-color:#673ab7;--mtx-datetimepicker-calendar-date-selected-disabled-state-background-color:rgba(103, 58, 183, 0.4);--mtx-datetimepicker-calendar-date-today-selected-state-outline-color:white;--mtx-datetimepicker-calendar-date-focus-state-background-color:rgba(103, 58, 183, 0.3);--mtx-datetimepicker-calendar-date-hover-state-background-color:rgba(103, 58, 183, 0.3);--mtx-datetimepicker-clock-hand-background-color:#673ab7;--mtx-datetimepicker-clock-cell-selected-state-background-color:#673ab7;--mtx-datetimepicker-time-input-active-state-text-color:#673ab7;--mtx-datetimepicker-time-input-active-state-background-color:rgba(103, 58, 183, 0.2);--mtx-datetimepicker-time-input-focus-state-border-color:#673ab7;--mtx-datetimepicker-time-input-focus-state-placeholder-text-color:rgba(103, 58, 183, 0.6);--mtx-datetimepicker-toggle-active-state-icon-color:#673ab7;--mtx-datetimepicker-toggle-icon-color:rgba(0, 0, 0, 0.54);--mtx-datetimepicker-calendar-body-label-text-color:rgba(0, 0, 0, 0.54);--mtx-datetimepicker-calendar-header-text-color:white;--mtx-datetimepicker-calendar-header-divider-color:rgba(0, 0, 0, 0.12);--mtx-datetimepicker-calendar-table-header-text-color:rgba(0, 0, 0, 0.54);--mtx-datetimepicker-calendar-date-today-outline-color:rgba(0, 0, 0, 0.38);--mtx-datetimepicker-calendar-date-text-color:rgba(0, 0, 0, 0.87);--mtx-datetimepicker-calendar-date-outline-color:transparent;--mtx-datetimepicker-calendar-date-disabled-state-text-color:rgba(0, 0, 0, 0.38);--mtx-datetimepicker-calendar-container-background-color:white;--mtx-datetimepicker-calendar-container-text-color:rgba(0, 0, 0, 0.87);--mtx-datetimepicker-clock-dial-background-color:rgba(0, 0, 0, 0.12);--mtx-datetimepicker-clock-cell-text-color:rgba(0, 0, 0, 0.87);--mtx-datetimepicker-clock-cell-hover-state-background-color:rgba(0, 0, 0, 0.04);--mtx-datetimepicker-clock-cell-disabled-state-text-color:rgba(0, 0, 0, 0.38);--mtx-datetimepicker-time-input-text-color:rgba(0, 0, 0, 0.87);--mtx-datetimepicker-time-input-background-color:rgba(0, 0, 0, 0.12);--mtx-datetimepicker-time-input-focus-state-background-color:#fafafa;--mtx-datetimepicker-time-input-warn-state-border-color:#f44336;--mtx-datetimepicker-time-ampm-text-color:rgba(0, 0, 0, 0.75);--mtx-datetimepicker-time-ampm-border-color:rgba(0, 0, 0, 0.38);--mtx-datetimepicker-time-ampm-selected-state-text-color:rgba(0, 0, 0, 0.87);--mtx-datetimepicker-time-ampm-selected-state-background-color:rgba(255, 215, 64, 0.2)}.mtx-datetimepicker-content.mat-accent{--mtx-datetimepicker-calendar-header-background-color:#ffd740;--mtx-datetimepicker-calendar-date-selected-state-text-color:rgba(0, 0, 0, 0.87);--mtx-datetimepicker-calendar-date-selected-state-background-color:#ffd740;--mtx-datetimepicker-calendar-date-selected-disabled-state-background-color:rgba(255, 215, 64, 0.4);--mtx-datetimepicker-calendar-date-today-selected-state-outline-color:rgba(0, 0, 0, 0.87);--mtx-datetimepicker-calendar-date-focus-state-background-color:rgba(255, 215, 64, 0.3);--mtx-datetimepicker-calendar-date-hover-state-background-color:rgba(255, 215, 64, 0.3);--mtx-datetimepicker-clock-hand-background-color:#ffd740;--mtx-datetimepicker-clock-cell-selected-state-background-color:#ffd740;--mtx-datetimepicker-time-input-active-state-text-color:#ffd740;--mtx-datetimepicker-time-input-active-state-background-color:rgba(255, 215, 64, 0.2);--mtx-datetimepicker-time-input-focus-state-border-color:#ffd740;--mtx-datetimepicker-time-input-focus-state-placeholder-text-color:rgba(255, 215, 64, 0.6)}.mtx-datetimepicker-content.mat-warn{--mtx-datetimepicker-calendar-header-background-color:#f44336;--mtx-datetimepicker-calendar-date-selected-state-text-color:white;--mtx-datetimepicker-calendar-date-selected-state-background-color:#f44336;--mtx-datetimepicker-calendar-date-selected-disabled-state-background-color:rgba(244, 67, 54, 0.4);--mtx-datetimepicker-calendar-date-today-selected-state-outline-color:white;--mtx-datetimepicker-calendar-date-focus-state-background-color:rgba(244, 67, 54, 0.3);--mtx-datetimepicker-calendar-date-hover-state-background-color:rgba(244, 67, 54, 0.3);--mtx-datetimepicker-clock-hand-background-color:#f44336;--mtx-datetimepicker-clock-cell-selected-state-background-color:#f44336;--mtx-datetimepicker-time-input-active-state-text-color:#f44336;--mtx-datetimepicker-time-input-active-state-background-color:rgba(244, 67, 54, 0.2);--mtx-datetimepicker-time-input-focus-state-border-color:#f44336;--mtx-datetimepicker-time-input-focus-state-placeholder-text-color:rgba(244, 67, 54, 0.6)}.mtx-datetimepicker-toggle-active.mat-accent{--mtx-datetimepicker-toggle-active-state-icon-color:#ffd740}.mtx-datetimepicker-toggle-active.mat-warn{--mtx-datetimepicker-toggle-active-state-icon-color:#f44336}html{--mtx-datetimepicker-calendar-text-font:Roboto, sans-serif;--mtx-datetimepicker-calendar-text-size:13px;--mtx-datetimepicker-calendar-body-label-text-size:14px;--mtx-datetimepicker-calendar-body-label-text-weight:500;--mtx-datetimepicker-calendar-period-button-text-size:14px;--mtx-datetimepicker-calendar-period-button-text-weight:500;--mtx-datetimepicker-calendar-table-header-text-size:11px;--mtx-datetimepicker-calendar-table-header-text-weight:400;--mtx-datetimepicker-clock-text-size:14px}html{--mtx-drawer-container-background-color:white;--mtx-drawer-container-text-color:rgba(0, 0, 0, 0.87)}html{--mtx-grid-outline-color:rgba(0, 0, 0, 0.2);--mtx-grid-column-menu-text-color:rgba(0, 0, 0, 0.87);--mtx-grid-column-menu-divider-color:rgba(0, 0, 0, 0.12);--mtx-grid-table-footer-background-color:whitesmoke;--mtx-grid-table-row-striped-background-color:#f5f5f5;--mtx-grid-table-row-hover-background-color:#e5e5e5;--mtx-grid-table-row-selected-background-color:#e5e5e5;--mtx-grid-table-cell-selected-outline-color:#ffd740}.mat-column-resize-table.cdk-column-resize-with-resized-column{table-layout:fixed}.mat-column-resize-flex .mat-mdc-header-cell,.mat-column-resize-flex .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:rgba(0,0,0,0);transition:background 300ms cubic-bezier(0.55, 0, 0.55, 0.2)}.mat-mdc-header-cell:not(.mat-resizable)::after{content:""}[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:not(.mat-resizable)::after{background:rgba(0,0,0,.12)}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle{background:#b39ddb}.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:#673ab7;outline:none}.mat-column-resize-overlay-thumb{background:rgba(0,0,0,0);cursor:col-resize;height:100%;transition:background 300ms cubic-bezier(0.55, 0, 0.55, 0.2);width:100%;-webkit-user-select:none;user-select:none}.mat-column-resize-overlay-thumb:active{background:linear-gradient(90deg, transparent, transparent 7px, #673ab7, #673ab7 1px, transparent 8px, transparent);will-change:transform}html{--mtx-loader-backdrop-background-color:rgba(250, 250, 250, 0.75)}html{--mtx-popover-background-color:white;--mtx-popover-text-color:rgba(0, 0, 0, 0.87);--mtx-popover-arrow-outline-color:rgba(0, 0, 0, 0.12)}html{--mtx-progress-track-color:rgba(0, 0, 0, 0.04);--mtx-progress-indicator-color:rgba(0, 0, 0, 0.12);--mtx-progress-text-color:rgba(0, 0, 0, 0.87);--mtx-progress-info-indicator-color:#2196f3;--mtx-progress-info-text-color:white;--mtx-progress-success-indicator-color:#4caf50;--mtx-progress-success-text-color:white;--mtx-progress-warning-indicator-color:#ff9800;--mtx-progress-warning-text-color:white;--mtx-progress-danger-indicator-color:#f44336;--mtx-progress-danger-text-color:white}html{--mtx-select-option-selected-state-text-color:#673ab7;--mtx-select-container-text-color:rgba(0, 0, 0, 0.87);--mtx-select-placeholder-text-color:rgba(0, 0, 0, 0.38);--mtx-select-disabled-text-color:rgba(0, 0, 0, 0.38);--mtx-select-multiple-value-background-color:#e0e0e0;--mtx-select-multiple-value-border-color:rgba(0, 0, 0, 0.12);--mtx-select-multiple-value-icon-hover-background-color:rgba(0, 0, 0, 0.12);--mtx-select-clear-icon-color:rgba(0, 0, 0, 0.54);--mtx-select-clear-icon-hover-color:#f44336;--mtx-select-enabled-arrow-color:rgba(0, 0, 0, 0.54);--mtx-select-disabled-arrow-color:rgba(0, 0, 0, 0.38);--mtx-select-invalid-arrow-color:#f44336;--mtx-select-panel-background-color:white;--mtx-select-panel-divider-color:rgba(0, 0, 0, 0.12);--mtx-select-optgroup-label-text-color:rgba(0, 0, 0, 0.54);--mtx-select-option-label-text-color:rgba(0, 0, 0, 0.87);--mtx-select-option-selected-state-background-color:rgba(0, 0, 0, 0.04);--mtx-select-option-hover-state-background-color:rgba(0, 0, 0, 0.04);--mtx-select-option-disabled-state-text-color:rgba(0, 0, 0, 0.38)}.ng-dropdown-panel.mat-accent{--mtx-select-option-selected-state-text-color:#ffd740}.ng-dropdown-panel.mat-warn{--mtx-select-option-selected-state-text-color:#f44336}.mdc-text-field--outlined .ng-select{padding-top:16px;padding-bottom:16px;margin-top:-16px;margin-bottom:-16px}.ng-select{padding-top:24px;padding-bottom:8px;margin-top:-24px;margin-bottom:-8px}.mdc-text-field--no-label .ng-select{padding-top:16px;padding-bottom:16px;margin-top:-16px;margin-bottom:-16px}html{--mtx-split-gutter-hover-state-background-color:#673ab7;--mtx-split-gutter-background-color:rgba(0, 0, 0, 0.12)}.mtx-split>.mtx-split-gutter.mat-accent:hover{--mtx-split-gutter-hover-state-background-color:#ffd740}.mtx-split>.mtx-split-gutter.mat-warn:hover{--mtx-split-gutter-hover-state-background-color:#f44336}.mtx-mdc-tooltip{--mdc-plain-tooltip-container-color:#616161;--mdc-plain-tooltip-supporting-text-color:#fff}.mtx-mdc-tooltip{--mdc-plain-tooltip-supporting-text-font:Roboto, sans-serif;--mdc-plain-tooltip-supporting-text-size:12px;--mdc-plain-tooltip-supporting-text-weight:400;--mdc-plain-tooltip-supporting-text-tracking:0.0333333333em}