@ng-matero/extensions 16.2.0 → 16.3.0

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

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

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

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

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

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

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

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

package/grid/grid-module.d.ts

@@ -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.0",
   "description": "Angular Material Extensions",
   "publishConfig": {
     "access": "public"
@@ -66,6 +66,12 @@
     "./package.json": {
       "default": "./package.json"
     },
+    "./colorpicker": {
+      "types": "./colorpicker/index.d.ts",
+      "esm2022": "./esm2022/colorpicker/mtxColorpicker.mjs",
+      "esm": "./esm2022/colorpicker/mtxColorpicker.mjs",
+      "default": "./fesm2022/mtxColorpicker.mjs"
+    },
     "./alert": {
       "types": "./alert/index.d.ts",
       "esm2022": "./esm2022/alert/mtxAlert.mjs",
@@ -84,11 +90,11 @@
       "esm": "./esm2022/checkbox-group/mtxCheckboxGroup.mjs",
       "default": "./fesm2022/mtxCheckboxGroup.mjs"
     },
-    "./colorpicker": {
-      "types": "./colorpicker/index.d.ts",
-      "esm2022": "./esm2022/colorpicker/mtxColorpicker.mjs",
-      "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",
@@ -96,17 +102,11 @@
       "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"
+    "./drawer": {
+      "types": "./drawer/index.d.ts",
+      "esm2022": "./esm2022/drawer/mtxDrawer.mjs",
+      "esm": "./esm2022/drawer/mtxDrawer.mjs",
+      "default": "./fesm2022/mtxDrawer.mjs"
     },
     "./dialog": {
       "types": "./dialog/index.d.ts",
@@ -114,11 +114,11 @@
       "esm": "./esm2022/dialog/mtxDialog.mjs",
       "default": "./fesm2022/mtxDialog.mjs"
     },
-    "./drawer": {
-      "types": "./drawer/index.d.ts",
-      "esm2022": "./esm2022/drawer/mtxDrawer.mjs",
-      "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",
@@ -126,18 +126,18 @@
       "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",
       "esm": "./esm2022/popover/mtxPopover.mjs",
       "default": "./fesm2022/mtxPopover.mjs"
     },
+    "./datetimepicker": {
+      "types": "./datetimepicker/index.d.ts",
+      "esm2022": "./esm2022/datetimepicker/mtxDatetimepicker.mjs",
+      "esm": "./esm2022/datetimepicker/mtxDatetimepicker.mjs",
+      "default": "./fesm2022/mtxDatetimepicker.mjs"
+    },
     "./progress": {
       "types": "./progress/index.d.ts",
       "esm2022": "./esm2022/progress/mtxProgress.mjs",
@@ -161,6 +161,12 @@
       "esm2022": "./esm2022/tooltip/mtxTooltip.mjs",
       "esm": "./esm2022/tooltip/mtxTooltip.mjs",
       "default": "./fesm2022/mtxTooltip.mjs"
+    },
+    "./photoviewer": {
+      "types": "./photoviewer/index.d.ts",
+      "esm2022": "./esm2022/photoviewer/mtxPhotoviewer.mjs",
+      "esm": "./esm2022/photoviewer/mtxPhotoviewer.mjs",
+      "default": "./fesm2022/mtxPhotoviewer.mjs"
     }
   },
   "dependencies": {

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 {