@ng-matero/extensions 16.2.0 → 16.3.1

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

@@ -3,29 +3,28 @@ import * as i1 from "./grid";
 import * as i2 from "./cell";
 import * as i3 from "./column-menu";
 import * as i4 from "./expansion-toggle";
-import * as i5 from "./image-preview";
-import * as i6 from "./grid-pipes";
-import * as i7 from "@angular/common";
-import * as i8 from "@angular/forms";
-import * as i9 from "@angular/material/table";
-import * as i10 from "@angular/material/sort";
-import * as i11 from "@angular/material/paginator";
-import * as i12 from "@angular/material/checkbox";
-import * as i13 from "@angular/material/button";
-import * as i14 from "@angular/material/progress-bar";
-import * as i15 from "@angular/material/chips";
-import * as i16 from "@angular/material/tooltip";
-import * as i17 from "@angular/material/badge";
-import * as i18 from "@angular/material/icon";
-import * as i19 from "@angular/material/select";
-import * as i20 from "@angular/material/form-field";
-import * as i21 from "@angular/material/menu";
-import * as i22 from "@angular/cdk/drag-drop";
-import * as i23 from "./column-resize/column-resize-module";
-import * as i24 from "@ng-matero/extensions/dialog";
-import * as i25 from "@ng-matero/extensions/core";
+import * as i5 from "./grid-pipes";
+import * as i6 from "@angular/common";
+import * as i7 from "@angular/forms";
+import * as i8 from "@angular/material/table";
+import * as i9 from "@angular/material/sort";
+import * as i10 from "@angular/material/paginator";
+import * as i11 from "@angular/material/checkbox";
+import * as i12 from "@angular/material/button";
+import * as i13 from "@angular/material/progress-bar";
+import * as i14 from "@angular/material/chips";
+import * as i15 from "@angular/material/tooltip";
+import * as i16 from "@angular/material/badge";
+import * as i17 from "@angular/material/icon";
+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 "./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 i5.MtxGridImagePreview, typeof i1.MtxGridSelectableCell, typeof i6.MtxGridRowClassPipe, typeof i6.MtxGridColClassPipe, typeof i6.MtxGridCellActionsPipe, typeof i6.MtxGridCellActionTooltipPipe, typeof i6.MtxGridCellActionBadgePipe, typeof i6.MtxGridCellActionDisablePipe, typeof i6.MtxGridCellSummaryPipe], [typeof i7.CommonModule, typeof i8.FormsModule, typeof i9.MatTableModule, typeof i10.MatSortModule, typeof i11.MatPaginatorModule, typeof i12.MatCheckboxModule, typeof i13.MatButtonModule, typeof i14.MatProgressBarModule, typeof i15.MatChipsModule, typeof i16.MatTooltipModule, typeof i17.MatBadgeModule, typeof i18.MatIconModule, typeof i19.MatSelectModule, typeof i20.MatFormFieldModule, typeof i21.MatMenuModule, typeof i22.DragDropModule, typeof i23.MatColumnResizeModule, typeof i24.MtxDialogModule, typeof i25.MtxPipesModule], [typeof i23.MatColumnResizeModule, typeof i1.MtxGrid, typeof i2.MtxGridCell, typeof i3.MtxGridColumnMenu, typeof i4.MtxGridExpansionToggle, typeof i5.MtxGridImagePreview, typeof i1.MtxGridSelectableCell, typeof i6.MtxGridRowClassPipe, typeof i6.MtxGridColClassPipe, typeof i6.MtxGridCellActionsPipe, typeof i6.MtxGridCellActionTooltipPipe, typeof i6.MtxGridCellActionBadgePipe, typeof i6.MtxGridCellActionDisablePipe, typeof i6.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;
@@ -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; }; "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>;
+    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;

package/grid/public-api.d.ts

@@ -5,7 +5,6 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-matero/extensions",
-  "version": "16.2.0",
+  "version": "16.3.1",
   "description": "Angular Material Extensions",
   "publishConfig": {
     "access": "public"
@@ -96,18 +96,18 @@
       "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",
       "esm": "./esm2022/datetimepicker/mtxDatetimepicker.mjs",
       "default": "./fesm2022/mtxDatetimepicker.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"
+    },
     "./dialog": {
       "types": "./dialog/index.d.ts",
       "esm2022": "./esm2022/dialog/mtxDialog.mjs",
@@ -120,17 +120,23 @@
       "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"
+    "./photoviewer": {
+      "types": "./photoviewer/index.d.ts",
+      "esm2022": "./esm2022/photoviewer/mtxPhotoviewer.mjs",
+      "esm": "./esm2022/photoviewer/mtxPhotoviewer.mjs",
+      "default": "./fesm2022/mtxPhotoviewer.mjs"
     },
     "./popover": {
       "types": "./popover/index.d.ts",

package/photoviewer/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@ng-matero/extensions/photoviewer" />
+export * from './public-api';

package/photoviewer/photoviewer-module.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./photoviewer";
+export declare class MtxPhotoviewerModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxPhotoviewerModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxPhotoviewerModule, [typeof i1.MtxPhotoviewer], never, [typeof i1.MtxPhotoviewer]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MtxPhotoviewerModule>;
+}

package/photoviewer/photoviewer.d.ts

@@ -0,0 +1,17 @@
+import { ElementRef, OnDestroy, OnInit } from '@angular/core';
+import PhotoViewer from 'photoviewer';
+import * as i0 from "@angular/core";
+export declare class MtxPhotoviewer implements OnInit, OnDestroy {
+    private _elementRef;
+    images: PhotoViewer.Img[];
+    options?: PhotoViewer.Options;
+    embed: boolean;
+    photoviewerInstance?: PhotoViewer;
+    constructor(_elementRef: ElementRef<Element>);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    onClick(event: MouseEvent): void;
+    initPhotoViewer(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxPhotoviewer, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxPhotoviewer, "[mtxPhotoviewer]", ["mtxPhotoviewer"], { "images": { "alias": "mtxPhotoviewerItems"; "required": false; }; "options": { "alias": "mtxPhotoviewerOptions"; "required": false; }; "embed": { "alias": "mtxPhotoviewerEmbed"; "required": false; }; }, {}, never, never, false, never>;
+}

package/photoviewer/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './photoviewer-module';
+export * from './photoviewer';

package/popover/popover-interfaces.d.ts

@@ -39,6 +39,7 @@ export interface MtxPopoverDefaultOptions {
     arrowHeight?: number;
     arrowOffsetX?: number;
     arrowOffsetY?: number;
+    hideArrow?: boolean;
     closeOnPanelClick?: boolean;
     closeOnBackdropClick?: boolean;
     overlayPanelClass?: string;

package/popover/popover.d.ts

@@ -25,6 +25,7 @@ export declare class MtxPopover implements MtxPopoverPanel, OnInit, OnDestroy {
     private _arrowHeight;
     private _arrowOffsetX;
     private _arrowOffsetY;
+    private _hideArrow;
     private _closeOnPanelClick;
     private _closeOnBackdropClick;
     private _focusTrapEnabled;
@@ -89,6 +90,9 @@ export declare class MtxPopover implements MtxPopoverPanel, OnInit, OnDestroy {
     /** Popover-arrow's Y offset. */
     get arrowOffsetY(): number;
     set arrowOffsetY(value: number);
+    /** Whether the popover arrow should be hidden. */
+    get hideArrow(): boolean;
+    set hideArrow(value: boolean);
     /** Whether popover can be closed when click the popover-panel. */
     get closeOnPanelClick(): boolean;
     set closeOnPanelClick(value: boolean);
@@ -165,6 +169,7 @@ export declare class MtxPopover implements MtxPopoverPanel, OnInit, OnDestroy {
     static ngAcceptInputType_focusTrapEnabled: BooleanInput;
     static ngAcceptInputType_focusTrapAutoCaptureEnabled: BooleanInput;
     static ngAcceptInputType_hasBackdrop: BooleanInput;
+    static ngAcceptInputType_hideArrow: BooleanInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxPopover, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MtxPopover, "mtx-popover", ["mtxPopover"], { "backdropClass": { "alias": "backdropClass"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "triggerEvent": { "alias": "triggerEvent"; "required": false; }; "enterDelay": { "alias": "enterDelay"; "required": false; }; "leaveDelay": { "alias": "leaveDelay"; "required": false; }; "position": { "alias": "position"; "required": false; }; "xOffset": { "alias": "xOffset"; "required": false; }; "yOffset": { "alias": "yOffset"; "required": false; }; "arrowWidth": { "alias": "arrowWidth"; "required": false; }; "arrowHeight": { "alias": "arrowHeight"; "required": false; }; "arrowOffsetX": { "alias": "arrowOffsetX"; "required": false; }; "arrowOffsetY": { "alias": "arrowOffsetY"; "required": false; }; "closeOnPanelClick": { "alias": "closeOnPanelClick"; "required": false; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; }; "focusTrapEnabled": { "alias": "focusTrapEnabled"; "required": false; }; "focusTrapAutoCaptureEnabled": { "alias": "focusTrapAutoCaptureEnabled"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "elevation": { "alias": "elevation"; "required": false; }; "panelClass": { "alias": "class"; "required": false; }; "classList": { "alias": "classList"; "required": false; }; }, { "closed": "closed"; }, ["lazyContent"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxPopover, "mtx-popover", ["mtxPopover"], { "backdropClass": { "alias": "backdropClass"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "triggerEvent": { "alias": "triggerEvent"; "required": false; }; "enterDelay": { "alias": "enterDelay"; "required": false; }; "leaveDelay": { "alias": "leaveDelay"; "required": false; }; "position": { "alias": "position"; "required": false; }; "xOffset": { "alias": "xOffset"; "required": false; }; "yOffset": { "alias": "yOffset"; "required": false; }; "arrowWidth": { "alias": "arrowWidth"; "required": false; }; "arrowHeight": { "alias": "arrowHeight"; "required": false; }; "arrowOffsetX": { "alias": "arrowOffsetX"; "required": false; }; "arrowOffsetY": { "alias": "arrowOffsetY"; "required": false; }; "hideArrow": { "alias": "hideArrow"; "required": false; }; "closeOnPanelClick": { "alias": "closeOnPanelClick"; "required": false; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; }; "focusTrapEnabled": { "alias": "focusTrapEnabled"; "required": false; }; "focusTrapAutoCaptureEnabled": { "alias": "focusTrapAutoCaptureEnabled"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "elevation": { "alias": "elevation"; "required": false; }; "panelClass": { "alias": "class"; "required": false; }; "classList": { "alias": "classList"; "required": false; }; }, { "closed": "closed"; }, ["lazyContent"], ["*"], false, never>;
 }

package/popover/popover.scss

@@ -43,6 +43,10 @@ $_tokens: tokens-mtx-popover.$prefix, tokens-mtx-popover.get-token-slots();
       margin-right: calc(#{$arrow-size * .5} + 2px);
     }
   }
+
+  &.mtx-popover-panel-without-arrow {
+    margin: 0;
+  }
 }
 
 .mtx-popover-direction-arrow {

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)}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}
+.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)}.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}[dir=rtl] .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-header-cell,[dir=rtl] .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell{border-left:none}.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 .mat-mdc-header-cell:not(.mat-resizable)::after{background-color:var(--mtx-grid-resizable-handle-disabled-background-color)}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle{background-color:var(--mtx-grid-resizable-handle-hover-background-color)}.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{outline:none;background-color:var(--mtx-grid-resizable-handle-active-background-color)}.mat-column-resize-overlay-thumb{background:rgba(0,0,0,0);cursor:col-resize;width:100%;height:100%;transition:background 300ms cubic-bezier(0.55, 0, 0.55, 0.2);-webkit-user-select:none;user-select:none}.mat-column-resize-overlay-thumb:active{will-change:transform;background:linear-gradient(90deg, transparent, transparent 7px, var(--mtx-grid-resizable-handle-active-background-color) 7px, var(--mtx-grid-resizable-handle-active-background-color) 9px, transparent 9px, transparent)}.mat-column-resize-overlay-thumb:active .mat-column-resize-overlay-thumb-top{background:linear-gradient(90deg, transparent, transparent 4px, var(--mtx-grid-resizable-handle-active-background-color) 4px, var(--mtx-grid-resizable-handle-active-background-color) 12px, transparent 12px, transparent)}.mat-column-resize-overlay-thumb-top{width:100%}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;--mtx-grid-resizable-handle-active-background-color:#673ab7;--mtx-grid-resizable-handle-hover-background-color:#673ab7;--mtx-grid-resizable-handle-disabled-background-color:rgba(0, 0, 0, 0.12)}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}