@ng-matero/extensions/fesm2022/mtxGrid.mjs.map

Angular Material Extensions

{"version":3,"file":"mtxGrid.mjs","sources":["../../../projects/extensions/grid/column-resize/resize-strategy.ts","../../../projects/extensions/grid/column-resize/column-resize-directives/common.ts","../../../projects/extensions/grid/column-resize/column-resize-directives/column-resize.ts","../../../projects/extensions/grid/column-resize/column-resize-directives/column-resize-flex.ts","../../../projects/extensions/grid/column-resize/overlay-handle.ts","../../../projects/extensions/grid/column-resize/resizable-directives/common.ts","../../../projects/extensions/grid/column-resize/resizable-directives/resizable.ts","../../../projects/extensions/grid/column-resize/column-resize-module.ts","../../../projects/extensions/grid/grid-utils.ts","../../../projects/extensions/grid/grid-pipes.ts","../../../projects/extensions/grid/cell.ts","../../../projects/extensions/grid/cell.html","../../../projects/extensions/grid/column-menu.ts","../../../projects/extensions/grid/column-menu.html","../../../projects/extensions/grid/expansion-toggle.ts","../../../projects/extensions/grid/selectable-cell.ts","../../../projects/extensions/grid/grid.ts","../../../projects/extensions/grid/grid.html","../../../projects/extensions/grid/grid-module.ts","../../../projects/extensions/grid/mtxGrid.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport { CSP_NONCE, Inject, Injectable, Optional, Provider } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport { CdkTable, _CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER } from '@angular/cdk/table';\n\nimport {\n  ColumnResize,\n  ResizeStrategy,\n  CdkFlexTableResizeStrategy,\n  TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER,\n} from '@ng-matero/extensions/column-resize';\n\nexport { TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER };\n\n/**\n * Overrides CdkFlexTableResizeStrategy to match mat-column elements.\n */\n@Injectable()\nexport class MatFlexTableResizeStrategy extends CdkFlexTableResizeStrategy {\n  constructor(\n    columnResize: ColumnResize,\n    @Inject(_COALESCED_STYLE_SCHEDULER) styleScheduler: _CoalescedStyleScheduler,\n    table: CdkTable<unknown>,\n    @Inject(DOCUMENT) document: any,\n    @Inject(CSP_NONCE) @Optional() nonce?: string | null\n  ) {\n    super(columnResize, styleScheduler, table, document, nonce);\n  }\n\n  protected override getColumnCssClass(cssFriendlyColumnName: string): string {\n    return `mat-column-${cssFriendlyColumnName}`;\n  }\n}\n\nexport const FLEX_RESIZE_STRATEGY_PROVIDER: Provider = {\n  provide: ResizeStrategy,\n  useClass: MatFlexTableResizeStrategy,\n};\n","import { Provider } from '@angular/core';\n\nimport {\n  ColumnResize,\n  ColumnResizeNotifier,\n  ColumnResizeNotifierSource,\n  HeaderRowEventDispatcher,\n} from '@ng-matero/extensions/column-resize';\n\nimport {\n  TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER,\n  FLEX_RESIZE_STRATEGY_PROVIDER,\n} from '../resize-strategy';\n\nconst PROVIDERS: Provider[] = [\n  ColumnResizeNotifier,\n  HeaderRowEventDispatcher,\n  ColumnResizeNotifierSource,\n];\nexport const TABLE_PROVIDERS: Provider[] = [\n  ...PROVIDERS,\n  TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER,\n];\nexport const FLEX_PROVIDERS: Provider[] = [...PROVIDERS, FLEX_RESIZE_STRATEGY_PROVIDER];\n\nexport const TABLE_HOST_BINDINGS = {\n  class: 'mat-column-resize-table',\n};\nexport const FLEX_HOST_BINDINGS = {\n  class: 'mat-column-resize-flex',\n};\n\nexport abstract class AbstractMatColumnResize extends ColumnResize {\n  getTableHeight() {\n    const table = this.elementRef.nativeElement;\n    const tableParent = table.parentNode as HTMLElement;\n    const isTableContainer = tableParent.classList.contains('mat-table-container');\n    return isTableContainer ? tableParent.offsetHeight : table.offsetHeight;\n  }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport { Directive, ElementRef, NgZone } from '@angular/core';\nimport {\n  ColumnResize,\n  ColumnResizeNotifier,\n  ColumnResizeNotifierSource,\n  HeaderRowEventDispatcher,\n} from '@ng-matero/extensions/column-resize';\n\nimport { AbstractMatColumnResize, TABLE_HOST_BINDINGS, TABLE_PROVIDERS } from './common';\n\n/**\n * Explicitly enables column resizing for a table-based mat-table.\n * Individual columns must be annotated specifically.\n */\n@Directive({\n  selector: 'table[mat-table][columnResize]',\n  host: TABLE_HOST_BINDINGS,\n  providers: [...TABLE_PROVIDERS, { provide: ColumnResize, useExisting: MatColumnResize }],\n  standalone: true,\n})\nexport class MatColumnResize extends AbstractMatColumnResize {\n  constructor(\n    readonly columnResizeNotifier: ColumnResizeNotifier,\n    readonly elementRef: ElementRef<HTMLElement>,\n    protected readonly eventDispatcher: HeaderRowEventDispatcher,\n    protected readonly ngZone: NgZone,\n    protected readonly notifier: ColumnResizeNotifierSource\n  ) {\n    super();\n  }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport { Directive, ElementRef, NgZone } from '@angular/core';\nimport {\n  ColumnResize,\n  ColumnResizeNotifier,\n  ColumnResizeNotifierSource,\n  HeaderRowEventDispatcher,\n} from '@ng-matero/extensions/column-resize';\n\nimport { AbstractMatColumnResize, FLEX_HOST_BINDINGS, FLEX_PROVIDERS } from './common';\n\n/**\n * Explicitly enables column resizing for a flexbox-based mat-table.\n * Individual columns must be annotated specifically.\n */\n@Directive({\n  selector: 'mat-table[columnResize]',\n  host: FLEX_HOST_BINDINGS,\n  providers: [...FLEX_PROVIDERS, { provide: ColumnResize, useExisting: MatColumnResizeFlex }],\n  standalone: true,\n})\nexport class MatColumnResizeFlex extends AbstractMatColumnResize {\n  constructor(\n    readonly columnResizeNotifier: ColumnResizeNotifier,\n    readonly elementRef: ElementRef<HTMLElement>,\n    protected readonly eventDispatcher: HeaderRowEventDispatcher,\n    protected readonly ngZone: NgZone,\n    protected readonly notifier: ColumnResizeNotifierSource\n  ) {\n    super();\n  }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  Inject,\n  NgZone,\n  ViewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport {\n  CdkColumnDef,\n  _CoalescedStyleScheduler,\n  _COALESCED_STYLE_SCHEDULER,\n} from '@angular/cdk/table';\nimport { Directionality } from '@angular/cdk/bidi';\nimport {\n  ColumnResize,\n  ColumnResizeNotifierSource,\n  HeaderRowEventDispatcher,\n  ResizeOverlayHandle,\n  ResizeRef,\n} from '@ng-matero/extensions/column-resize';\n\nimport { AbstractMatColumnResize } from './column-resize-directives/common';\n\n/**\n * Component shown over the edge of a resizable column that is responsible\n * for handling column resize mouse events and displaying a vertical line along the column edge.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'mat-column-resize-overlay-thumb' },\n  template: '<div #top class=\"mat-column-resize-overlay-thumb-top\"></div>',\n  standalone: true,\n})\nexport class MatColumnResizeOverlayHandle extends ResizeOverlayHandle {\n  protected readonly document: Document;\n\n  @ViewChild('top', { static: true }) topElement!: ElementRef<HTMLElement>;\n\n  constructor(\n    protected readonly columnDef: CdkColumnDef,\n    protected readonly columnResize: ColumnResize,\n    protected readonly directionality: Directionality,\n    protected readonly elementRef: ElementRef,\n    protected readonly eventDispatcher: HeaderRowEventDispatcher,\n    protected readonly ngZone: NgZone,\n    protected readonly resizeNotifier: ColumnResizeNotifierSource,\n    protected readonly resizeRef: ResizeRef,\n    @Inject(_COALESCED_STYLE_SCHEDULER)\n    protected readonly styleScheduler: _CoalescedStyleScheduler,\n    @Inject(DOCUMENT) document: any\n  ) {\n    super();\n    this.document = document;\n  }\n\n  protected override updateResizeActive(active: boolean): void {\n    super.updateResizeActive(active);\n\n    const originHeight = this.resizeRef.origin.nativeElement.offsetHeight;\n    this.topElement.nativeElement.style.height = `${originHeight}px`;\n    this.resizeRef.overlayRef.updateSize({\n      height: active\n        ? (this.columnResize as AbstractMatColumnResize).getTableHeight()\n        : originHeight,\n    });\n  }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport { Type } from '@angular/core';\nimport { Resizable } from '@ng-matero/extensions/column-resize';\nimport { MatColumnResizeOverlayHandle } from '../overlay-handle';\n\nexport abstract class AbstractMatResizable extends Resizable<MatColumnResizeOverlayHandle> {\n  override minWidthPxInternal = 32;\n\n  protected override getInlineHandleCssClassName(): string {\n    return 'mat-resizable-handle';\n  }\n\n  protected override getOverlayHandleComponentType(): Type<MatColumnResizeOverlayHandle> {\n    return MatColumnResizeOverlayHandle;\n  }\n}\n\nexport const RESIZABLE_HOST_BINDINGS = {\n  class: 'mat-resizable',\n};\n\nexport const RESIZABLE_INPUTS = [\n  'minWidthPx: matResizableMinWidthPx',\n  'maxWidthPx: matResizableMaxWidthPx',\n];\n","import {\n  Directive,\n  ElementRef,\n  Inject,\n  Injector,\n  NgZone,\n  ViewContainerRef,\n  ChangeDetectorRef,\n  Input,\n  HostBinding,\n} from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport { Directionality } from '@angular/cdk/bidi';\nimport { Overlay } from '@angular/cdk/overlay';\nimport {\n  CdkColumnDef,\n  _CoalescedStyleScheduler,\n  _COALESCED_STYLE_SCHEDULER,\n} from '@angular/cdk/table';\nimport {\n  ColumnResize,\n  ColumnResizeNotifierSource,\n  HeaderRowEventDispatcher,\n  ResizeStrategy,\n} from '@ng-matero/extensions/column-resize';\n\nimport { AbstractMatResizable, RESIZABLE_HOST_BINDINGS, RESIZABLE_INPUTS } from './common';\n\n/**\n * Explicitly enables column resizing for a mat-header-cell.\n */\n@Directive({\n  selector: 'mat-header-cell[resizable], th[mat-header-cell][resizable]',\n  host: RESIZABLE_HOST_BINDINGS,\n  inputs: RESIZABLE_INPUTS,\n  standalone: true,\n})\nexport class MatResizable extends AbstractMatResizable {\n  isResizable = true;\n\n  @HostBinding('class') get hasResizableClass() {\n    return this.isResizable ? RESIZABLE_HOST_BINDINGS.class : '';\n  }\n\n  @Input()\n  get resizable() {\n    return this.isResizable;\n  }\n  set resizable(newValue: any) {\n    this.isResizable = newValue == null || newValue === '' || newValue;\n  }\n\n  protected readonly document: Document;\n\n  constructor(\n    protected readonly columnDef: CdkColumnDef,\n    protected readonly columnResize: ColumnResize,\n    protected readonly directionality: Directionality,\n    @Inject(DOCUMENT) document: any,\n    protected readonly elementRef: ElementRef,\n    protected readonly eventDispatcher: HeaderRowEventDispatcher,\n    protected readonly injector: Injector,\n    protected readonly ngZone: NgZone,\n    protected readonly overlay: Overlay,\n    protected readonly resizeNotifier: ColumnResizeNotifierSource,\n    protected readonly resizeStrategy: ResizeStrategy,\n    @Inject(_COALESCED_STYLE_SCHEDULER)\n    protected readonly styleScheduler: _CoalescedStyleScheduler,\n    protected readonly viewContainerRef: ViewContainerRef,\n    protected readonly changeDetectorRef: ChangeDetectorRef\n  ) {\n    super();\n    this.document = document;\n  }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport { NgModule } from '@angular/core';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport { MatCommonModule } from '@angular/material/core';\n\nimport { MatColumnResize } from './column-resize-directives/column-resize';\nimport { MatColumnResizeFlex } from './column-resize-directives/column-resize-flex';\nimport { MatColumnResizeOverlayHandle } from './overlay-handle';\nimport { MatResizable } from './resizable-directives/resizable';\n\nconst ENTRY_COMMON_COMPONENTS = [MatColumnResizeOverlayHandle];\n\n@NgModule({\n  imports: ENTRY_COMMON_COMPONENTS,\n  exports: ENTRY_COMMON_COMPONENTS,\n})\nexport class MatColumnResizeCommonModule {}\n\nconst IMPORTS = [MatCommonModule, OverlayModule, MatColumnResizeCommonModule];\n\n@NgModule({\n  imports: [...IMPORTS, MatColumnResize, MatColumnResizeFlex, MatResizable],\n  exports: [MatColumnResize, MatColumnResizeFlex, MatResizable],\n})\nexport class MatColumnResizeModule {}\n","import { Injectable } from '@angular/core';\nimport { MtxGridColumn } from './interfaces';\n\n@Injectable({ providedIn: 'root' })\nexport class MtxGridUtils {\n  constructor() {}\n\n  /**\n   * Get cell's value based on the data and column's field (e.g. `a.b.c`)\n   * @param rowData Row data\n   * @param colDef Column definition\n   * @returns\n   */\n  getCellValue(rowData: Record<string, any>, colDef: MtxGridColumn): string {\n    const keyArr = colDef.field ? colDef.field.split('.') : [];\n    let tmp: any = '';\n    keyArr.forEach((key: string, i: number) => {\n      if (i === 0) {\n        tmp = rowData[key];\n      } else {\n        tmp = tmp && tmp[key];\n      }\n    });\n    return tmp;\n  }\n\n  /**\n   * Get all data of a col\n   * @param data All data\n   * @param colDef Column definition\n   * @returns\n   */\n  getColData(data: any[], colDef: MtxGridColumn): any[] {\n    return data.map(rowData => this.getCellValue(rowData, colDef));\n  }\n\n  /**\n   * Whether the value is empty (`null`, `undefined`, `''`, `[]`)\n   * @param value\n   * @returns\n   */\n  isEmpty(value: any) {\n    return value == null || value.toString() === '';\n  }\n\n  /**\n   * Whether the value contain HTML\n   * @param value\n   * @returns\n   */\n  isContainHTML(value: string) {\n    return /<\\/?[a-z][\\s\\S]*>/i.test(value);\n  }\n}\n","import { KeyValueChangeRecord, Pipe, PipeTransform } from '@angular/core';\nimport { isObservable } from 'rxjs';\nimport { MtxGridUtils } from './grid-utils';\nimport { MtxGridColumn, MtxGridColumnButton, MtxGridRowClassFormatter } from './interfaces';\n\n@Pipe({ name: 'colClass', standalone: true })\nexport class MtxGridColClassPipe implements PipeTransform {\n  transform(\n    colDef: MtxGridColumn,\n    rowData?: Record<string, any>,\n    rowChangeRecord?: KeyValueChangeRecord<string, any>,\n    currentValue?: any\n  ) {\n    if (typeof colDef.class === 'string') {\n      return colDef.class;\n    } else if (typeof colDef.class === 'function') {\n      return colDef.class(rowData, colDef);\n    }\n    return '';\n  }\n}\n\n@Pipe({ name: 'rowClass', standalone: true })\nexport class MtxGridRowClassPipe implements PipeTransform {\n  transform(\n    rowData: Record<string, any>,\n    index: number | undefined,\n    dataIndex: number,\n    rowClassFormatter?: MtxGridRowClassFormatter\n  ) {\n    const rowIndex = index === undefined ? dataIndex : index;\n    const classList: string[] = rowIndex % 2 === 1 ? ['mat-row-odd'] : [];\n    if (rowClassFormatter) {\n      for (const key of Object.keys(rowClassFormatter)) {\n        if (rowClassFormatter[key](rowData, rowIndex)) {\n          classList.push(key);\n        }\n      }\n    }\n    return classList.join(' ');\n  }\n}\n\n@Pipe({ name: 'cellActions', standalone: true })\nexport class MtxGridCellActionsPipe implements PipeTransform {\n  transform(\n    btns?: MtxGridColumnButton[] | ((rowData: any) => MtxGridColumnButton[]),\n    rowData?: Record<string, any>,\n    rowChangeRecord?: KeyValueChangeRecord<string, any>,\n    currentValue?: any\n  ) {\n    if (typeof btns === 'function') {\n      return btns(rowData);\n    } else if (Array.isArray(btns)) {\n      return btns;\n    }\n    return [];\n  }\n}\n\n@Pipe({ name: 'cellActionTooltip', standalone: true })\nexport class MtxGridCellActionTooltipPipe implements PipeTransform {\n  transform(btn: MtxGridColumnButton) {\n    if (typeof btn.tooltip === 'string' || isObservable(btn.tooltip)) {\n      return { message: btn.tooltip };\n    } else {\n      return btn.tooltip || { message: '' };\n    }\n  }\n}\n\n@Pipe({ name: 'cellActionBadge', standalone: true })\nexport class MtxGridCellActionBadgePipe implements PipeTransform {\n  transform(btn: MtxGridColumnButton) {\n    if (typeof btn.badge === 'number' || typeof btn.badge === 'string' || isObservable(btn.badge)) {\n      return { content: btn.badge };\n    } else {\n      return btn.badge || { content: '' };\n    }\n  }\n}\n\n@Pipe({ name: 'cellActionDisable', standalone: true })\nexport class MtxGridCellActionDisablePipe implements PipeTransform {\n  transform(\n    btn: MtxGridColumnButton,\n    rowData: Record<string, any>,\n    rowChangeRecord?: KeyValueChangeRecord<string, any>,\n    currentValue?: any\n  ) {\n    if (typeof btn.disabled === 'boolean') {\n      return btn.disabled;\n    } else if (typeof btn.disabled === 'function') {\n      return btn.disabled(rowData);\n    } else {\n      return false;\n    }\n  }\n}\n\n@Pipe({ name: 'cellSummary', standalone: true })\nexport class MtxGridCellSummaryPipe implements PipeTransform {\n  constructor(private utils: MtxGridUtils) {}\n  transform(data: any[], colDef: MtxGridColumn) {\n    if (typeof colDef.summary === 'string') {\n      return colDef.summary;\n    } else if (typeof colDef.summary === 'function') {\n      return (colDef.summary as (data: any[], colDef?: MtxGridColumn) => any)(\n        this.utils.getColData(data, colDef),\n        colDef\n      );\n    }\n  }\n}\n","import { AsyncPipe, CurrencyPipe, DatePipe, DecimalPipe, PercentPipe } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  DoCheck,\n  EventEmitter,\n  Input,\n  KeyValueChangeRecord,\n  KeyValueChanges,\n  KeyValueDiffer,\n  KeyValueDiffers,\n  OnInit,\n  Output,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { MatBadge } from '@angular/material/badge';\nimport { MatButton, MatFabButton, MatIconButton, MatMiniFabButton } from '@angular/material/button';\nimport { MatChip, MatChipListbox } from '@angular/material/chips';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { isObservable } from 'rxjs';\n\nimport { MtxToObservablePipe } from '@ng-matero/extensions/core';\nimport { MtxDialog } from '@ng-matero/extensions/dialog';\nimport {\n  MtxGridCellActionBadgePipe,\n  MtxGridCellActionDisablePipe,\n  MtxGridCellActionTooltipPipe,\n  MtxGridCellActionsPipe,\n  MtxGridCellSummaryPipe,\n} from './grid-pipes';\nimport { MtxGridUtils } from './grid-utils';\nimport { MtxGridColumn, MtxGridColumnButton } from './interfaces';\n\n@Component({\n  selector: 'mtx-grid-cell',\n  exportAs: 'mtxGridCell',\n  templateUrl: './cell.html',\n  styleUrl: './cell.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [\n    AsyncPipe,\n    CurrencyPipe,\n    DatePipe,\n    DecimalPipe,\n    PercentPipe,\n    MatButton,\n    MatIconButton,\n    MatFabButton,\n    MatMiniFabButton,\n    MatIcon,\n    MatChipListbox,\n    MatChip,\n    MatTooltip,\n    MatBadge,\n    MtxToObservablePipe,\n    MtxGridCellActionsPipe,\n    MtxGridCellSummaryPipe,\n    MtxGridCellActionDisablePipe,\n    MtxGridCellActionTooltipPipe,\n    MtxGridCellActionBadgePipe,\n  ],\n})\nexport class MtxGridCell implements OnInit, DoCheck {\n  /** Row data */\n  @Input() rowData: Record<string, any> = {};\n\n  /** Column definition */\n  @Input() colDef!: MtxGridColumn;\n\n  /** Table data */\n  @Input() data: any[] = [];\n\n  /** Whether show summary */\n  @Input() summary = false;\n\n  /** Placeholder for the empty value (`null`, `''`, `[]`) */\n  @Input() placeholder: string = '--';\n\n  @Output() rowDataChange = new EventEmitter<KeyValueChangeRecord<string, any>>();\n\n  private rowDataDiffer?: KeyValueDiffer<string, any>;\n\n  rowChangeRecord?: KeyValueChangeRecord<string, any>;\n\n  get _value() {\n    return this._utils.getCellValue(this.rowData, this.colDef);\n  }\n\n  constructor(\n    private _dialog: MtxDialog,\n    private _utils: MtxGridUtils,\n    private _differs: KeyValueDiffers,\n    private _changeDetectorRef: ChangeDetectorRef\n  ) {}\n\n  ngOnInit(): void {\n    this.rowDataDiffer = this._differs.find(this.rowData).create();\n  }\n\n  ngDoCheck(): void {\n    const changes = this.rowDataDiffer?.diff(this.rowData);\n    if (changes) {\n      this._applyChanges(changes);\n    }\n  }\n\n  private _applyChanges(changes: KeyValueChanges<string, any>) {\n    changes.forEachChangedItem(record => {\n      this.rowChangeRecord = record;\n      this.rowDataChange.emit(record);\n      this._changeDetectorRef.markForCheck();\n    });\n  }\n\n  _getText(value: any) {\n    return value === undefined ? '' : this._utils.isEmpty(value) ? this.placeholder : value;\n  }\n\n  _getTooltip(value: any) {\n    return this._utils.isEmpty(value) ? '' : value;\n  }\n\n  _getFormatterTooltip(value: any) {\n    return this._utils.isContainHTML(value) || this._utils.isEmpty(value) ? '' : value;\n  }\n\n  _onActionClick(event: MouseEvent, btn: MtxGridColumnButton, rowData: Record<string, any>) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (typeof btn.pop === 'string' || isObservable(btn.pop)) {\n      this._dialog.open({\n        title: btn.pop,\n        buttons: [\n          { color: 'primary', text: 'OK', onClick: () => btn.click?.(rowData) || {} },\n          { text: 'CLOSE' },\n        ],\n      });\n    } else if (typeof btn.pop === 'object') {\n      this._dialog.open({\n        title: btn.pop?.title,\n        description: btn.pop?.description,\n        buttons: [\n          {\n            color: btn.pop?.okColor || 'primary',\n            text: btn.pop?.okText || 'OK',\n            onClick: () => btn.click?.(rowData) || {},\n          },\n          {\n            color: btn.pop?.closeColor,\n            text: btn.pop?.closeText || 'CLOSE',\n          },\n        ],\n      });\n    } else {\n      btn.click?.(rowData);\n    }\n  }\n}\n","@if (summary) {\n  <span\n    [title]=\"_getFormatterTooltip((data | cellSummary: colDef))\"\n    [innerHTML]=\"_getText((data | cellSummary: colDef))\">\n  </span>\n} @else {\n  <!-- Custom formatting -->\n  @if (colDef.formatter) {\n    <span\n      [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\n      [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\">\n    </span>\n  } @else {\n    <!-- Default formatting -->\n    @switch (colDef.type) {\n      <!-- Buttons -->\n      @case ('button') {\n        @for (btn of colDef.buttons | cellActions: rowData: rowChangeRecord: rowChangeRecord?.currentValue; track btn) {\n          @if (!btn.iif || btn.iif(rowData)) {\n            @switch (btn.type) {\n              @case ('raised') {\n                <button mat-raised-button [color]=\"btn.color || 'primary'\" type=\"button\"\n                  class=\"mtx-grid-action-button\" [class]=\"btn.class\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  @if (btn.icon) {\n                    <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                  }\n                  <span>{{btn.text | toObservable | async}}</span>\n                </button>\n              }\n              @case ('stroked') {\n                <button mat-stroked-button [color]=\"btn.color || 'primary'\" type=\"button\"\n                  class=\"mtx-grid-action-button\" [class]=\"btn.class\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  @if (btn.icon) {\n                    <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                  }\n                  <span>{{btn.text | toObservable | async}}</span>\n                </button>\n              }\n              @case ('flat') {\n                <button mat-flat-button [color]=\"btn.color || 'primary'\" type=\"button\"\n                  class=\"mtx-grid-action-button\" [class]=\"btn.class\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  @if (btn.icon) {\n                    <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                  }\n                  <span>{{btn.text | toObservable | async}}</span>\n                </button>\n              }\n              @case ('icon') {\n                <button mat-icon-button [color]=\"btn.color || 'primary'\" type=\"button\"\n                  class=\"mtx-grid-action-button\" [class]=\"btn.class\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                </button>\n              }\n              @case ('fab') {\n                <button mat-fab [color]=\"btn.color || 'primary'\" type=\"button\"\n                  class=\"mtx-grid-action-button\" [class]=\"btn.class\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                </button>\n              }\n              @case ('mini-fab') {\n                <button mat-mini-fab [color]=\"btn.color || 'primary'\" type=\"button\"\n                  class=\"mtx-grid-action-button\" [class]=\"btn.class\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                </button>\n              }\n              @default {\n                <button mat-button [color]=\"btn.color || 'primary'\" type=\"button\"\n                  class=\"mtx-grid-action-button\" [class]=\"btn.class\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  @if (btn.icon) {\n                    <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                  }\n                  <span>{{btn.text | toObservable | async}}</span>\n                </button>\n              }\n            }\n          }\n        }\n      }\n      <!-- Tag -->\n      @case ('tag') {\n        @if (colDef.tag && colDef.tag[_value]) {\n          <mat-chip-listbox>\n            <mat-chip color=\"primary\" [class]=\"'bg-' + colDef.tag[_value].color\">\n              {{colDef.tag[_value].text}}\n            </mat-chip>\n          </mat-chip-listbox>\n        } @else {\n          {{_value}}\n        }\n      }\n      <!-- Link -->\n      @case ('link') {\n        <a [href]=\"_value\" target=\"_blank\">{{_value}}</a>\n      }\n      <!-- Image -->\n      @case ('image') {\n        <img class=\"mtx-grid-img\" [src]=\"_value\">\n      }\n      <!-- Boolean -->\n      @case ('boolean') {\n        <span [title]=\"_getTooltip(_value)\">{{_getText(_value)}}</span>\n      }\n      <!-- Number -->\n      @case ('number') {\n        <span [title]=\"_getTooltip(_value | number: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)\">\n          {{_getText(_value | number: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)}}\n        </span>\n      }\n      <!-- Currency -->\n      @case ('currency') {\n        <span [title]=\"_getTooltip(_value | currency: colDef.typeParameter?.currencyCode: colDef.typeParameter?.display: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)\">\n          {{_getText(_value | currency: colDef.typeParameter?.currencyCode: colDef.typeParameter?.display: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)}}\n        </span>\n      }\n      <!-- Percent -->\n      @case ('percent') {\n        <span [title]=\"_getTooltip(_value | percent: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)\">\n          {{_getText(_value | percent: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)}}\n        </span>\n      }\n      <!-- Date -->\n      @case ('date') {\n        <span [title]=\"_getTooltip(_value | date: colDef.typeParameter?.format: colDef.typeParameter?.timezone: colDef.typeParameter?.locale)\">\n          {{_getText(_value | date: colDef.typeParameter?.format: colDef.typeParameter?.timezone: colDef.typeParameter?.locale)}}\n        </span>\n      }\n      <!-- Default -->\n      @default {\n        <span [title]=\"_getTooltip(_value)\">{{_getText(_value)}}</span>\n      }\n    }\n  }\n}\n","import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';\nimport { AsyncPipe, NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  Output,\n  TemplateRef,\n  ViewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MatButton, MatFabButton, MatIconButton, MatMiniFabButton } from '@angular/material/button';\nimport { MatCheckbox } from '@angular/material/checkbox';\nimport { ThemePalette } from '@angular/material/core';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';\n\nimport { MtxToObservablePipe } from '@ng-matero/extensions/core';\nimport {\n  MtxGridButtonType,\n  MtxGridColumn,\n  MtxGridColumnPinOption,\n  MtxGridColumnPinValue,\n} from './interfaces';\n\n@Component({\n  selector: 'mtx-grid-column-menu',\n  exportAs: 'mtxGridColumnMenu',\n  templateUrl: './column-menu.html',\n  styleUrl: './column-menu.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [\n    AsyncPipe,\n    NgTemplateOutlet,\n    FormsModule,\n    MatButton,\n    MatIconButton,\n    MatFabButton,\n    MatMiniFabButton,\n    MatIcon,\n    MatMenu,\n    MatMenuTrigger,\n    MatMenuItem,\n    MatCheckbox,\n    CdkDrag,\n    CdkDropList,\n    MtxToObservablePipe,\n  ],\n})\nexport class MtxGridColumnMenu {\n  @ViewChild('menu', { static: true }) menuPanel!: MatMenu;\n  @ViewChild(MatMenuTrigger) menuTrigger!: MatMenuTrigger;\n\n  @Input() columns: MtxGridColumn[] = [];\n  @Input() selectable = true;\n  @Input() selectableChecked: 'show' | 'hide' = 'show';\n  @Input() sortable = true;\n  @Input() pinnable = true;\n\n  @Input()\n  get buttonText() {\n    const defaultText = `Columns ${this.selectableChecked === 'show' ? 'Shown' : 'Hidden'}`;\n    return this._buttonText ? this._buttonText : defaultText;\n  }\n  set buttonText(value: string) {\n    this._buttonText = value;\n  }\n  private _buttonText = '';\n\n  @Input() buttonType: MtxGridButtonType = 'stroked';\n  @Input() buttonColor: ThemePalette;\n  @Input() buttonClass = '';\n  @Input() buttonIcon = '';\n\n  @Input() showHeader = false;\n  @Input() headerText = 'Columns Header';\n  @Input() headerTemplate!: TemplateRef<any>;\n  @Input() showFooter = false;\n  @Input() footerText = 'Columns Footer';\n  @Input() footerTemplate!: TemplateRef<any>;\n\n  @Output() columnChange = new EventEmitter<MtxGridColumn[]>();\n\n  @Input()\n  get pinOptions() {\n    return this._pinOptions;\n  }\n  set pinOptions(value: MtxGridColumnPinOption[]) {\n    if (value.length > 0) {\n      this._pinOptions = value;\n    }\n  }\n  private _pinOptions: MtxGridColumnPinOption[] = [\n    { label: 'Pin Left', value: 'left' },\n    { label: 'Pin Right', value: 'right' },\n    { label: 'No Pin', value: null },\n  ];\n\n  _handleDroped(e: CdkDragDrop<string[]>) {\n    moveItemInArray(this.columns, e.previousIndex, e.currentIndex);\n    this.columnChange.emit(this.columns);\n  }\n\n  _handleChecked(col: MtxGridColumn) {\n    if (this.selectableChecked === 'show') {\n      col.hide = !col.show;\n    } else {\n      col.show = !col.hide;\n    }\n    this.columnChange.emit(this.columns);\n  }\n\n  _handlePinSelect(col: MtxGridColumn, val: MtxGridColumnPinValue) {\n    if (col.pinned != val) {\n      col.pinned = val;\n      this.columnChange.emit(this.columns);\n    }\n  }\n}\n","@switch (buttonType) {\n  @case ('raised') {\n    <button [class]=\"buttonClass\" mat-raised-button type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n  }\n  @case ('stroked') {\n    <button [class]=\"buttonClass\" mat-stroked-button type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n  }\n  @case ('flat') {\n    <button [class]=\"buttonClass\" mat-flat-button type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n    }\n  @case ('icon') {\n    <button [class]=\"buttonClass\" mat-icon-button type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n    </button>\n  }\n  @case ('fab') {\n    <button [class]=\"buttonClass\" mat-fab type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n  }\n  @case ('mini-fab') {\n    <button [class]=\"buttonClass\" mat-mini-fab type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n  }\n  @default {\n    <button [class]=\"buttonClass\" mat-button type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n  }\n}\n\n<mat-menu #menu=\"matMenu\" class=\"mtx-grid-column-menu\">\n  <div class=\"mtx-grid-column-menu-content\"\n    (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n    @if (showHeader) {\n      <div class=\"mtx-grid-column-menu-header\">\n        @if (headerTemplate) {\n          <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n        } @else {\n          {{headerText}}\n        }\n      </div>\n    }\n\n    <div class=\"mtx-grid-column-menu-body\">\n      @if (sortable) {\n        <div class=\"mtx-grid-column-menu-list\"\n          cdkDropList (cdkDropListDropped)=\"_handleDroped($event)\">\n          @for (col of columns; track col) {\n            <div class=\"mtx-grid-column-menu-item\"\n              cdkDrag [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\">\n              <svg class=\"mtx-grid-icon mtx-grid-column-drag-handle-icon\" viewBox=\"0 0 24 24\"\n                width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n                <path d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\" />\n              </svg>\n              <ng-template [ngTemplateOutlet]=\"checkboxList\"\n                [ngTemplateOutletContext]=\"{ $implicit: col }\">\n              </ng-template>\n            </div>\n          }\n        </div>\n      }\n\n      @if (!sortable) {\n        <div class=\"mtx-grid-column-menu-list\">\n          @for (col of columns; track col) {\n            <div class=\"mtx-grid-column-menu-item\">\n              <ng-template [ngTemplateOutlet]=\"checkboxList\"\n                [ngTemplateOutletContext]=\"{ $implicit: col }\">\n              </ng-template>\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    @if (showFooter) {\n      <div class=\"mtx-grid-column-menu-footer\">\n        @if (footerTemplate) {\n          <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n        } @else {\n          {{footerText}}\n        }\n      </div>\n    }\n  </div>\n</mat-menu>\n\n<ng-template #checkboxList let-col>\n  @if (pinnable) {\n    <button class=\"mtx-grid-column-pin-button\" mat-icon-button type=\"button\"\n      [matMenuTriggerFor]=\"pinList\">\n      @if (col.pinned) {\n        <svg class=\"mtx-grid-icon mtx-grid-column-pin-icon\"\n          viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n          <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\n        </svg>\n      }\n      @if (!col.pinned) {\n        <svg class=\"mtx-grid-icon mtx-grid-column-pin-off-icon\"\n          viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n          <path d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\" />\n        </svg>\n      }\n      </button>\n      <mat-menu #pinList=\"matMenu\" class=\"mtx-grid-column-pin-list\">\n        @for (item of pinOptions; track item) {\n          <button class=\"mtx-grid-column-pin-option\" type=\"button\"\n            mat-menu-item\n            (click)=\"_handlePinSelect(col, item.value)\">\n            <span class=\"mtx-grid-column-pin-option-placeholder\">\n              <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n              @if (col.pinned==item.value) {\n                <svg class=\"mtx-grid-icon mtx-grid-column-pin-check-icon\"\n                  viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n                  <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n                </svg>\n              }\n            </span>\n            <span class=\"mtx-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\n          </button>\n        }\n      </mat-menu>\n  }\n\n  @if (selectable) {\n    <mat-checkbox class=\"mtx-grid-column-menu-item-label\"\n      [(ngModel)]=\"col[selectableChecked]\" [disabled]=\"col.disabled\"\n      (change)=\"_handleChecked(col)\">{{col.header | toObservable | async}}</mat-checkbox>\n  } @else {\n    <span class=\"mtx-grid-column-menu-item-label\">{{col.header | toObservable | async}}</span>\n  }\n</ng-template>\n","import {\n  Directive,\n  EventEmitter,\n  HostBinding,\n  HostListener,\n  Input,\n  Output,\n  TemplateRef,\n} from '@angular/core';\n\n@Directive({\n  selector: '[mtx-grid-expansion-toggle]',\n  standalone: true,\n})\nexport class MtxGridExpansionToggle {\n  private _opened = false;\n  private _row: any;\n  private _tplRef!: TemplateRef<any>;\n\n  @Input()\n  get opened() {\n    return this._opened;\n  }\n  set opened(newValue: boolean) {\n    this._opened = newValue;\n    this.openedChange.emit(newValue);\n  }\n  @Output() openedChange = new EventEmitter<boolean>();\n\n  @HostBinding('class.expanded')\n  get expanded():