@ng-matero/extensions 12.7.1 → 12.9.1

package/fesm2015/mtxDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mtxDrawer.js","sources":["../../../projects/extensions/drawer/drawer-config.ts","../../../projects/extensions/drawer/drawer-animation.ts","../../../projects/extensions/drawer/drawer-container.ts","../../../projects/extensions/drawer/drawer-ref.ts","../../../projects/extensions/drawer/drawer.ts","../../../projects/extensions/drawer/drawer-module.ts","../../../projects/extensions/drawer/mtxDrawer.ts"],"sourcesContent":["import { Direction } from '@angular/cdk/bidi';\nimport { ScrollStrategy } from '@angular/cdk/overlay';\nimport { ViewContainerRef } from '@angular/core';\n\n/** Options for where to set focus to automatically on dialog open */\nexport type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';\n\n/** Possible overrides for a drawer's position. */\nexport type DrawerPosition = 'top' | 'bottom' | 'left' | 'right';\n\n/**\n * Configuration used when opening a drawer.\n */\nexport class MtxDrawerConfig<D = any> {\n  /** The view container to place the overlay for the drawer into. */\n  viewContainerRef?: ViewContainerRef;\n\n  /** Extra CSS classes to be added to the drawer container. */\n  panelClass?: string | string[];\n\n  /** Text layout direction for the drawer. */\n  direction?: Direction;\n\n  /** Data being injected into the child component. */\n  data?: D | null = null;\n\n  /** Whether the drawer has a backdrop. */\n  hasBackdrop?: boolean = true;\n\n  /** Custom class for the backdrop. */\n  backdropClass?: string;\n\n  /** Whether the user can use escape or clicking outside to close the drawer. */\n  disableClose?: boolean = false;\n\n  /** Aria label to assign to the drawer element. */\n  ariaLabel?: string | null = null;\n\n  /**\n   * Whether the drawer should close when the user goes backwards/forwards in history.\n   * Note that this usually doesn't include clicking on links (unless the user is using\n   * the `HashLocationStrategy`).\n   */\n  closeOnNavigation?: boolean = true;\n\n  /**\n   * Where the drawer should focus on open.\n   * @breaking-change 14.0.0 Remove boolean option from autoFocus. Use string or\n   * AutoFocusTarget instead.\n   */\n  autoFocus?: AutoFocusTarget | string | boolean = 'first-tabbable';\n\n  /**\n   * Whether the drawer should restore focus to the\n   * previously-focused element, after it's closed.\n   */\n  restoreFocus?: boolean = true;\n\n  /** Scroll strategy to be used for the drawer. */\n  scrollStrategy?: ScrollStrategy;\n\n  /** Position of the drawer */\n  position?: DrawerPosition = 'right';\n\n  /** Width of the drawer. */\n  width?: string = '';\n\n  /** Height of the drawer. */\n  height?: string = '';\n}\n","import {\n  animate,\n  state,\n  style,\n  transition,\n  trigger,\n  AnimationTriggerMetadata,\n} from '@angular/animations';\n\n/** Animations used by the drawer. */\nexport const mtxDrawerAnimations: {\n  readonly drawerState: AnimationTriggerMetadata;\n} = {\n  /** Animation that shows and hides a drawer. */\n  drawerState: trigger('state', [\n    state(\n      'void, hidden',\n      style({\n        'box-shadow': 'none',\n        'visibility': 'hidden',\n      })\n    ),\n    state(\n      'visible',\n      style({\n        transform: 'none',\n        visibility: 'visible',\n      })\n    ),\n    transition(\n      'visible => void, visible => hidden',\n      animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)')\n    ),\n    transition('void => visible', animate('150ms cubic-bezier(0, 0, 0.2, 1)')),\n  ]),\n};\n","import { AnimationEvent } from '@angular/animations';\nimport { FocusTrap, FocusTrapFactory, InteractivityChecker } from '@angular/cdk/a11y';\nimport { coerceArray } from '@angular/cdk/coercion';\nimport { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';\nimport { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';\nimport {\n  BasePortalOutlet,\n  CdkPortalOutlet,\n  ComponentPortal,\n  DomPortal,\n  TemplatePortal,\n} from '@angular/cdk/portal';\nimport { DOCUMENT } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ComponentRef,\n  ElementRef,\n  EmbeddedViewRef,\n  EventEmitter,\n  Inject,\n  NgZone,\n  OnDestroy,\n  Optional,\n  ViewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { Subscription } from 'rxjs';\nimport { mtxDrawerAnimations } from './drawer-animation';\nimport { MtxDrawerConfig } from './drawer-config';\n\n/**\n * Internal component that wraps user-provided drawer content.\n * @docs-private\n */\n@Component({\n  selector: 'mtx-drawer-container',\n  templateUrl: 'drawer-container.html',\n  styleUrls: ['drawer-container.scss'],\n  // In Ivy embedded views will be change detected from their declaration place, rather than where\n  // they were stamped out. This means that we can't have the drawer container be OnPush,\n  // because it might cause the sheets that were opened from a template not to be out of date.\n  changeDetection: ChangeDetectionStrategy.Default,\n  encapsulation: ViewEncapsulation.None,\n  animations: [mtxDrawerAnimations.drawerState],\n  host: {\n    'class': 'mtx-drawer-container',\n    '[class]': 'drawerPosition',\n    'tabindex': '-1',\n    'role': 'dialog',\n    'aria-modal': 'true',\n    '[attr.aria-label]': 'drawerConfig?.ariaLabel',\n    '[@state]': '_animationState',\n    '(@state.start)': '_onAnimationStart($event)',\n    '(@state.done)': '_onAnimationDone($event)',\n  },\n})\nexport class MtxDrawerContainer extends BasePortalOutlet implements OnDestroy {\n  private _breakpointSubscription: Subscription;\n\n  /** The portal outlet inside of this container into which the content will be loaded. */\n  @ViewChild(CdkPortalOutlet, { static: true }) _portalOutlet!: CdkPortalOutlet;\n\n  /** The state of the drawer animations. */\n  _animationState: 'void' | 'visible' | 'hidden' = 'void';\n\n  /** Emits whenever the state of the animation changes. */\n  _animationStateChanged = new EventEmitter<AnimationEvent>();\n\n  /** The class that traps and manages focus within the drawer. */\n  private _focusTrap!: FocusTrap;\n\n  /** Element that was focused before the drawer was opened. */\n  private _elementFocusedBeforeOpened: HTMLElement | null = null;\n\n  /** Server-side rendering-compatible reference to the global document object. */\n  private _document: Document;\n\n  /** Whether the component has been destroyed. */\n  private _destroyed!: boolean;\n\n  get drawerPosition() {\n    return `mtx-drawer-${this.drawerConfig.position}`;\n  }\n\n  get drawerWidth() {\n    return this.drawerConfig.position === 'left' || this.drawerConfig.position === 'right'\n      ? this.drawerConfig.width\n      : '100vw';\n  }\n\n  get drawerHeight() {\n    return this.drawerConfig.position === 'top' || this.drawerConfig.position === 'bottom'\n      ? this.drawerConfig.height\n      : '100vh';\n  }\n\n  constructor(\n    private _elementRef: ElementRef<HTMLElement>,\n    private _changeDetectorRef: ChangeDetectorRef,\n    private _focusTrapFactory: FocusTrapFactory,\n    private readonly _interactivityChecker: InteractivityChecker,\n    private readonly _ngZone: NgZone,\n    breakpointObserver: BreakpointObserver,\n    @Optional() @Inject(DOCUMENT) document: any,\n    /** The drawer configuration. */\n    public drawerConfig: MtxDrawerConfig\n  ) {\n    super();\n\n    this._document = document;\n    this._breakpointSubscription = breakpointObserver\n      .observe([Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge])\n      .subscribe(() => {});\n  }\n\n  /** Attach a component portal as content to this drawer container. */\n  attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T> {\n    this._validatePortalAttached();\n    this._setPanelClass();\n    this._savePreviouslyFocusedElement();\n    return this._portalOutlet.attachComponentPortal(portal);\n  }\n\n  /** Attach a template portal as content to this drawer container. */\n  attachTemplatePortal<C>(portal: TemplatePortal<C>): EmbeddedViewRef<C> {\n    this._validatePortalAttached();\n    this._setPanelClass();\n    this._savePreviouslyFocusedElement();\n    return this._portalOutlet.attachTemplatePortal(portal);\n  }\n\n  /**\n   * Attaches a DOM portal to the drawer container.\n   * @deprecated To be turned into a method.\n   * @breaking-change 10.0.0\n   */\n  override attachDomPortal = (portal: DomPortal) => {\n    this._validatePortalAttached();\n    this._setPanelClass();\n    this._savePreviouslyFocusedElement();\n    return this._portalOutlet.attachDomPortal(portal);\n  };\n\n  /** Begin animation of drawer entrance into view. */\n  enter(): void {\n    if (!this._destroyed) {\n      this._animationState = 'visible';\n      this._changeDetectorRef.detectChanges();\n    }\n  }\n\n  /** Begin animation of the drawer exiting from view. */\n  exit(): void {\n    if (!this._destroyed) {\n      this._animationState = 'hidden';\n      this._changeDetectorRef.markForCheck();\n    }\n  }\n\n  ngOnDestroy() {\n    this._breakpointSubscription.unsubscribe();\n    this._destroyed = true;\n  }\n\n  _onAnimationDone(event: AnimationEvent) {\n    if (event.toState === 'hidden') {\n      this._restoreFocus();\n    } else if (event.toState === 'visible') {\n      this._trapFocus();\n    }\n\n    this._animationStateChanged.emit(event);\n  }\n\n  _onAnimationStart(event: AnimationEvent) {\n    this._animationStateChanged.emit(event);\n  }\n\n  private _toggleClass(cssClass: string, add: boolean) {\n    this._elementRef.nativeElement.classList.toggle(cssClass, add);\n  }\n\n  private _validatePortalAttached() {\n    if (this._portalOutlet.hasAttached()) {\n      throw Error('Attempting to attach drawer content after content is already attached');\n    }\n  }\n\n  private _setPanelClass() {\n    const element: HTMLElement = this._elementRef.nativeElement;\n    element.classList.add(...coerceArray(this.drawerConfig.panelClass || []));\n  }\n\n  /**\n   * Focuses the provided element. If the element is not focusable, it will add a tabIndex\n   * attribute to forcefully focus it. The attribute is removed after focus is moved.\n   * @param element The element to focus.\n   */\n  private _forceFocus(element: HTMLElement, options?: FocusOptions) {\n    if (!this._interactivityChecker.isFocusable(element)) {\n      element.tabIndex = -1;\n      // The tabindex attribute should be removed to avoid navigating to that element again\n      this._ngZone.runOutsideAngular(() => {\n        element.addEventListener('blur', () => element.removeAttribute('tabindex'));\n        element.addEventListener('mousedown', () => element.removeAttribute('tabindex'));\n      });\n    }\n    element.focus(options);\n  }\n\n  /**\n   * Focuses the first element that matches the given selector within the focus trap.\n   * @param selector The CSS selector for the element to set focus to.\n   */\n  private _focusByCssSelector(selector: string, options?: FocusOptions) {\n    const elementToFocus = this._elementRef.nativeElement.querySelector(\n      selector\n    ) as HTMLElement | null;\n    if (elementToFocus) {\n      this._forceFocus(elementToFocus, options);\n    }\n  }\n\n  /**\n   * Moves the focus inside the focus trap. When autoFocus is not set to 'bottom-sheet',\n   * if focus cannot be moved then focus will go to the drawer container.\n   */\n  private _trapFocus() {\n    const element = this._elementRef.nativeElement;\n\n    if (!this._focusTrap) {\n      this._focusTrap = this._focusTrapFactory.create(element);\n    }\n\n    // If were to attempt to focus immediately, then the content of the drawer would not\n    // yet be ready in instances where change detection has to run first. To deal with this,\n    // we simply wait for the microtask queue to be empty when setting focus when autoFocus\n    // isn't set to drawer. If the element inside the drawer can't be focused,\n    // then the container is focused so the user can't tab into other elements behind it.\n    switch (this.drawerConfig.autoFocus) {\n      case false:\n      case 'dialog':\n        // eslint-disable-next-line no-case-declarations\n        const activeElement = _getFocusedElementPierceShadowDom();\n        // Ensure that focus is on the drawer container. It's possible that a different\n        // component tried to move focus while the open animation was running. See:\n        // https://github.com/angular/components/issues/16215. Note that we only want to do this\n        // if the focus isn't inside the drawer already, because it's possible that the\n        // consumer specified `autoFocus` in order to move focus themselves.\n        if (activeElement !== element && !element.contains(activeElement)) {\n          element.focus();\n        }\n        break;\n      case true:\n      case 'first-tabbable':\n        this._focusTrap.focusInitialElementWhenReady();\n        break;\n      case 'first-heading':\n        this._focusByCssSelector('h1, h2, h3, h4, h5, h6, [role=\"heading\"]');\n        break;\n      default:\n        this._focusByCssSelector(this.drawerConfig.autoFocus!);\n        break;\n    }\n  }\n\n  /** Restores focus to the element that was focused before the drawer was opened. */\n  private _restoreFocus() {\n    const toFocus = this._elementFocusedBeforeOpened;\n\n    // We need the extra check, because IE can set the `activeElement` to null in some cases.\n    if (this.drawerConfig.restoreFocus && toFocus && typeof toFocus.focus === 'function') {\n      const activeElement = _getFocusedElementPierceShadowDom();\n      const element = this._elementRef.nativeElement;\n\n      // Make sure that focus is still inside the drawer or is on the body (usually because a\n      // non-focusable element like the backdrop was clicked) before moving it. It's possible that\n      // the consumer moved it themselves before the animation was done, in which case we shouldn't\n      // do anything.\n      if (\n        !activeElement ||\n        activeElement === this._document.body ||\n        activeElement === element ||\n        element.contains(activeElement)\n      ) {\n        toFocus.focus();\n      }\n    }\n\n    if (this._focusTrap) {\n      this._focusTrap.destroy();\n    }\n  }\n\n  /** Saves a reference to the element that was focused before the drawer was opened. */\n  private _savePreviouslyFocusedElement() {\n    this._elementFocusedBeforeOpened = _getFocusedElementPierceShadowDom();\n\n    // The `focus` method isn't available during server-side rendering.\n    if (this._elementRef.nativeElement.focus) {\n      this._ngZone.runOutsideAngular(() => {\n        Promise.resolve().then(() => this._elementRef.nativeElement.focus());\n      });\n    }\n  }\n}\n","import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';\nimport { OverlayRef } from '@angular/cdk/overlay';\nimport { merge, Observable, Subject } from 'rxjs';\nimport { filter, take } from 'rxjs/operators';\nimport { MtxDrawerContainer } from './drawer-container';\n\n/**\n * Reference to a drawer dispatched from the drawer service.\n */\nexport class MtxDrawerRef<T = any, R = any> {\n  /** Instance of the component making up the content of the drawer. */\n  instance!: T;\n\n  /**\n   * Instance of the component into which the drawer content is projected.\n   * @docs-private\n   */\n  containerInstance: MtxDrawerContainer;\n\n  /** Whether the user is allowed to close the drawer. */\n  disableClose: boolean | undefined;\n\n  /** Subject for notifying the user that the drawer has been dismissed. */\n  private readonly _afterDismissed = new Subject<R | undefined>();\n\n  /** Subject for notifying the user that the drawer has opened and appeared. */\n  private readonly _afterOpened = new Subject<void>();\n\n  /** Result to be passed down to the `afterDismissed` stream. */\n  private _result: R | undefined;\n\n  /** Handle to the timeout that's running as a fallback in case the exit animation doesn't fire. */\n  private _closeFallbackTimeout!: any;\n\n  constructor(containerInstance: MtxDrawerContainer, private _overlayRef: OverlayRef) {\n    this.containerInstance = containerInstance;\n    this.disableClose = containerInstance.drawerConfig.disableClose;\n    // Emit when opening animation completes\n    containerInstance._animationStateChanged\n      .pipe(\n        filter(event => event.phaseName === 'done' && event.toState === 'visible'),\n        take(1)\n      )\n      .subscribe(() => {\n        this._afterOpened.next();\n        this._afterOpened.complete();\n      });\n\n    // Dispose overlay when closing animation is complete\n    containerInstance._animationStateChanged\n      .pipe(\n        filter(event => event.phaseName === 'done' && event.toState === 'hidden'),\n        take(1)\n      )\n      .subscribe(() => {\n        clearTimeout(this._closeFallbackTimeout);\n        _overlayRef.dispose();\n      });\n\n    _overlayRef\n      .detachments()\n      .pipe(take(1))\n      .subscribe(() => {\n        this._afterDismissed.next(this._result);\n        this._afterDismissed.complete();\n      });\n\n    merge(\n      _overlayRef.backdropClick(),\n      _overlayRef.keydownEvents().pipe(filter(event => event.keyCode === ESCAPE))\n    ).subscribe(event => {\n      if (\n        !this.disableClose &&\n        (event.type !== 'keydown' || !hasModifierKey(event as KeyboardEvent))\n      ) {\n        event.preventDefault();\n        this.dismiss();\n      }\n    });\n  }\n\n  /**\n   * Dismisses the drawer.\n   * @param result Data to be passed back to the drawer opener.\n   */\n  dismiss(result?: R): void {\n    if (!this._afterDismissed.closed) {\n      // Transition the backdrop in parallel to the drawer.\n      this.containerInstance._animationStateChanged\n        .pipe(\n          filter(event => event.phaseName === 'start'),\n          take(1)\n        )\n        .subscribe(event => {\n          // The logic that disposes of the overlay depends on the exit animation completing, however\n          // it isn't guaranteed if the parent view is destroyed while it's running. Add a fallback\n          // timeout which will clean everything up if the animation hasn't fired within the specified\n          // amount of time plus 100ms. We don't need to run this outside the NgZone, because for the\n          // vast majority of cases the timeout will have been cleared before it has fired.\n          this._closeFallbackTimeout = setTimeout(() => {\n            this._overlayRef.dispose();\n          }, event.totalTime + 100);\n\n          this._overlayRef.detachBackdrop();\n        });\n\n      this._result = result;\n      this.containerInstance.exit();\n    }\n  }\n\n  /** Gets an observable that is notified when the drawer is finished closing. */\n  afterDismissed(): Observable<R | undefined> {\n    return this._afterDismissed;\n  }\n\n  /** Gets an observable that is notified when the drawer has opened and appeared. */\n  afterOpened(): Observable<void> {\n    return this._afterOpened;\n  }\n\n  /**\n   * Gets an observable that emits when the overlay's backdrop has been clicked.\n   */\n  backdropClick(): Observable<MouseEvent> {\n    return this._overlayRef.backdropClick();\n  }\n\n  /**\n   * Gets an observable that emits when keydown events are targeted on the overlay.\n   */\n  keydownEvents(): Observable<KeyboardEvent> {\n    return this._overlayRef.keydownEvents();\n  }\n}\n","import { Directionality } from '@angular/cdk/bidi';\nimport { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';\nimport { ComponentPortal, ComponentType, TemplatePortal } from '@angular/cdk/portal';\nimport {\n  ComponentRef,\n  Injectable,\n  Injector,\n  Optional,\n  SkipSelf,\n  TemplateRef,\n  InjectionToken,\n  Inject,\n  OnDestroy,\n  StaticProvider,\n  InjectFlags,\n} from '@angular/core';\nimport { of as observableOf } from 'rxjs';\nimport { MtxDrawerConfig } from './drawer-config';\nimport { MtxDrawerContainer } from './drawer-container';\nimport { MtxDrawerRef } from './drawer-ref';\n\n/** Injection token that can be used to access the data that was passed in to a drawer. */\nexport const MTX_DRAWER_DATA = new InjectionToken<any>('MtxDrawerData');\n\n/** Injection token that can be used to specify default drawer options. */\nexport const MTX_DRAWER_DEFAULT_OPTIONS = new InjectionToken<MtxDrawerConfig>(\n  'mtx-drawer-default-options'\n);\n\n/**\n * Service to trigger Material Design bottom sheets.\n */\n@Injectable()\nexport class MtxDrawer implements OnDestroy {\n  private _drawerRefAtThisLevel: MtxDrawerRef<any> | null = null;\n\n  /** Reference to the currently opened drawer. */\n  get _openedDrawerRef(): MtxDrawerRef<any> | null {\n    const parent = this._parentDrawer;\n    return parent ? parent._openedDrawerRef : this._drawerRefAtThisLevel;\n  }\n\n  set _openedDrawerRef(value: MtxDrawerRef<any> | null) {\n    if (this._parentDrawer) {\n      this._parentDrawer._openedDrawerRef = value;\n    } else {\n      this._drawerRefAtThisLevel = value;\n    }\n  }\n\n  constructor(\n    private _overlay: Overlay,\n    private _injector: Injector,\n    @Optional() @SkipSelf() private _parentDrawer: MtxDrawer,\n    @Optional()\n    @Inject(MTX_DRAWER_DEFAULT_OPTIONS)\n    private _defaultOptions?: MtxDrawerConfig\n  ) {}\n\n  /**\n   * Opens a drawer containing the given component.\n   * @param component Type of the component to load into the drawer.\n   * @param config Extra configuration options.\n   * @returns Reference to the newly-opened drawer.\n   */\n  open<T, D = any, R = any>(\n    component: ComponentType<T>,\n    config?: MtxDrawerConfig<D>\n  ): MtxDrawerRef<T, R>;\n\n  /**\n   * Opens a drawer containing the given template.\n   * @param template TemplateRef to instantiate as the drawer content.\n   * @param config Extra configuration options.\n   * @returns Reference to the newly-opened drawer.\n   */\n  open<T, D = any, R = any>(\n    template: TemplateRef<T>,\n    config?: MtxDrawerConfig<D>\n  ): MtxDrawerRef<T, R>;\n\n  open<T, D = any, R = any>(\n    componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,\n    config?: MtxDrawerConfig<D>\n  ): MtxDrawerRef<T, R> {\n    const _config = _applyConfigDefaults(this._defaultOptions || new MtxDrawerConfig(), config);\n    const overlayRef = this._createOverlay(_config);\n    const container = this._attachContainer(overlayRef, _config);\n    const ref = new MtxDrawerRef<T, R>(container, overlayRef);\n\n    if (componentOrTemplateRef instanceof TemplateRef) {\n      container.attachTemplatePortal(\n        new TemplatePortal<T>(componentOrTemplateRef, null!, {\n          $implicit: _config.data,\n          drawerRef: ref,\n        } as any)\n      );\n    } else {\n      const portal = new ComponentPortal(\n        componentOrTemplateRef,\n        undefined,\n        this._createInjector(_config, ref)\n      );\n      const contentRef = container.attachComponentPortal(portal);\n      ref.instance = contentRef.instance;\n    }\n\n    // When the drawer is dismissed, clear the reference to it.\n    ref.afterDismissed().subscribe(() => {\n      // Clear the drawer ref if it hasn't already been replaced by a newer one.\n      if (this._openedDrawerRef == ref) {\n        this._openedDrawerRef = null;\n      }\n    });\n\n    if (this._openedDrawerRef) {\n      // If a drawer is already in view, dismiss it and enter the\n      // new drawer after exit animation is complete.\n      this._openedDrawerRef.afterDismissed().subscribe(() => ref.containerInstance.enter());\n      this._openedDrawerRef.dismiss();\n    } else {\n      // If no drawer is in view, enter the new drawer.\n      ref.containerInstance.enter();\n    }\n\n    this._openedDrawerRef = ref;\n\n    return ref;\n  }\n\n  /**\n   * Dismisses the currently-visible drawer.\n   * @param result Data to pass to the drawer instance.\n   */\n  dismiss<R = any>(result?: R): void {\n    if (this._openedDrawerRef) {\n      this._openedDrawerRef.dismiss(result);\n    }\n  }\n\n  ngOnDestroy() {\n    if (this._drawerRefAtThisLevel) {\n      this._drawerRefAtThisLevel.dismiss();\n    }\n  }\n\n  /**\n   * Attaches the drawer container component to the overlay.\n   */\n  private _attachContainer(overlayRef: OverlayRef, config: MtxDrawerConfig): MtxDrawerContainer {\n    const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;\n    const injector = Injector.create({\n      parent: userInjector || this._injector,\n      providers: [{ provide: MtxDrawerConfig, useValue: config }],\n    });\n\n    const containerPortal = new ComponentPortal(\n      MtxDrawerContainer,\n      config.viewContainerRef,\n      injector\n    );\n    const containerRef: ComponentRef<MtxDrawerContainer> = overlayRef.attach(containerPortal);\n    return containerRef.instance;\n  }\n\n  /**\n   * Creates a new overlay and places it in the correct location.\n   * @param config The user-specified drawer config.\n   */\n  private _createOverlay(config: MtxDrawerConfig): OverlayRef {\n    const overlayConfig = new OverlayConfig({\n      direction: config.direction,\n      hasBackdrop: config.hasBackdrop,\n      disposeOnNavigation: config.closeOnNavigation,\n      maxWidth: '100%',\n      scrollStrategy: config.scrollStrategy || this._overlay.scrollStrategies.block(),\n      positionStrategy: this._overlay.position().global()[config.position!]('0'),\n    });\n\n    if (config.backdropClass) {\n      overlayConfig.backdropClass = config.backdropClass;\n    }\n\n    return this._overlay.create(overlayConfig);\n  }\n\n  /**\n   * Creates an injector to be used inside of a drawer component.\n   * @param config Config that was used to create the drawer.\n   * @param drawerRef Reference to the drawer.\n   */\n  private _createInjector<T>(config: MtxDrawerConfig, drawerRef: MtxDrawerRef<T>): Injector {\n    const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;\n    const providers: StaticProvider[] = [\n      { provide: MtxDrawerRef, useValue: drawerRef },\n      { provide: MTX_DRAWER_DATA, useValue: config.data },\n    ];\n\n    if (\n      config.direction &&\n      (!userInjector ||\n        !userInjector.get<Directionality | null>(Directionality, null, InjectFlags.Optional))\n    ) {\n      providers.push({\n        provide: Directionality,\n        useValue: { value: config.direction, change: observableOf() },\n      });\n    }\n\n    return Injector.create({ parent: userInjector || this._injector, providers });\n  }\n}\n\n/**\n * Applies default options to the drawer config.\n * @param defaults Object containing the default values to which to fall back.\n * @param config The configuration to which the defaults will be applied.\n * @returns The new configuration object with defaults applied.\n */\nfunction _applyConfigDefaults(\n  defaults: MtxDrawerConfig,\n  config?: MtxDrawerConfig\n): MtxDrawerConfig {\n  return { ...defaults, ...config };\n}\n","import { OverlayModule } from '@angular/cdk/overlay';\nimport { PortalModule } from '@angular/cdk/portal';\nimport { NgModule } from '@angular/core';\nimport { MatCommonModule } from '@angular/material/core';\nimport { MtxDrawer } from './drawer';\nimport { MtxDrawerContainer } from './drawer-container';\n\n@NgModule({\n  imports: [OverlayModule, PortalModule, MatCommonModule],\n  exports: [MtxDrawerContainer, MatCommonModule],\n  declarations: [MtxDrawerContainer],\n  providers: [MtxDrawer],\n})\nexport class MtxDrawerModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["observableOf"],"mappings":"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"}

package/fesm2015/mtxGrid.js

@@ -126,7 +126,6 @@ class MtxGridComponent {
         this.showToolbar = false;
         this.toolbarTitle = '';
         // ===== Column Menu =====
-        this.columnMenuData = [];
         this.showColumnMenuButton = true;
         this.columnMenuButtonText = '';
         this.columnMenuButtonType = 'stroked';
@@ -134,13 +133,14 @@ class MtxGridComponent {
         this.columnMenuButtonIcon = '';
         this.columnHideable = true;
         this.columnHideableChecked = 'show';
-        this.columnMovable = true;
+        this.columnSortable = true;
         this.columnPinnable = true;
         this.columnChange = new EventEmitter();
         this.showColumnMenuHeader = false;
         this.columnMenuHeaderText = 'Columns Header';
         this.showColumnMenuFooter = false;
         this.columnMenuFooterText = 'Columns Footer';
+        this.columnPinOptions = [];
         // ===== No Result =====
         this.noResultText = 'No records found';
         // ===== Row Templates =====
@@ -190,19 +190,13 @@ class MtxGridComponent {
         this._countPinnedPosition();
         this.displayedColumns = this.columns.filter(item => !item.hide).map(item => item.field);
         if (this.showColumnMenuButton) {
-            this.columnMenuData = this.columns.map(item => {
-                const newItem = {
-                    label: item.header,
-                    field: item.field,
-                    disabled: item.disabled,
-                };
+            this.columns.forEach(item => {
                 if (this.columnHideableChecked === 'show') {
-                    newItem.show = !item.hide;
+                    item.show = !item.hide;
                 }
                 else {
-                    newItem.hide = item.hide;
+                    item.hide = !!item.hide;
                 }
-                return newItem;
             });
         }
         if (this.rowSelectable && !this.hideRowSelectionCheckbox) {
@@ -329,8 +323,8 @@ class MtxGridComponent {
     }
     getDisplayedColumnFields(columns) {
         const fields = columns
-            .filter((item) => this.columnHideableChecked === 'show' ? item.show : !item.hide)
-            .map((item) => item.field);
+            .filter(item => (this.columnHideableChecked === 'show' ? item.show : !item.hide))
+            .map(item => item.field);
         return fields;
     }
     /** Customize expansion event */
@@ -372,7 +366,7 @@ MtxGridComponent.decorators = [
     { type: Component, args: [{
                 selector: 'mtx-grid',
                 exportAs: 'mtxGrid',
-                template: "<!-- Progress bar-->\r\n<div class=\"mtx-grid-progress\" *ngIf=\"loading\">\r\n  <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n</div>\r\n\r\n<!-- Toolbar -->\r\n<div class=\"mtx-grid-toolbar\" *ngIf=\"showToolbar\">\r\n  <div class=\"mtx-grid-toolbar-content\">\r\n    <ng-template [ngIf]=\"_isTemplateRef(toolbarTemplate)\" [ngIfElse]=\"defaultToolbarTemplate\">\r\n      <ng-template [ngTemplateOutlet]=\"toolbarTemplate\"></ng-template>\r\n    </ng-template>\r\n    <ng-template #defaultToolbarTemplate>\r\n      <div class=\"mtx-grid-toolbar-title\" *ngIf=\"toolbarTitle\">{{toolbarTitle}}</div>\r\n    </ng-template>\r\n  </div>\r\n  <div class=\"mtx-grid-toolbar-actions\">\r\n    <mtx-grid-column-menu *ngIf=\"showColumnMenuButton\" #columnMenu\r\n                          [columns]=\"columnMenuData\"\r\n                          [buttonText]=\"columnMenuButtonText\"\r\n                          [buttonType]=\"columnMenuButtonType\"\r\n                          [buttonColor]=\"columnMenuButtonColor\"\r\n                          [buttonClass]=\"columnMenuButtonClass\"\r\n                          [buttonIcon]=\"columnMenuButtonIcon\"\r\n                          [selectable]=\"columnHideable\"\r\n                          [selectableChecked]=\"columnHideableChecked\"\r\n                          [sortable]=\"columnMovable\"\r\n                          (selectionChange)=\"_handleColumnChange($event)\"\r\n                          (sortChange)=\"_handleColumnChange($event)\"\r\n                          [showHeader]=\"showColumnMenuHeader\"\r\n                          [headerText]=\"columnMenuHeaderText\"\r\n                          [headerTemplate]=\"columnMenuHeaderTemplate\"\r\n                          [showFooter]=\"showColumnMenuFooter\"\r\n                          [footerText]=\"columnMenuFooterText\"\r\n                          [footerTemplate]=\"columnMenuFooterTemplate\">\r\n    </mtx-grid-column-menu>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"mtx-grid-main mtx-grid-layout\">\r\n  <!-- Table content -->\r\n  <div class=\"mtx-grid-content mtx-grid-layout\">\r\n    <div #tableContainer class=\"mat-table-container\"\r\n         [ngClass]=\"{'mat-table-with-data': !_hasNoResult}\">\r\n      <table mat-table *ngIf=\"!columnResizable\"\r\n             [ngClass]=\"{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped, 'mat-table-expandable': expandable}\"\r\n             [dataSource]=\"dataSource\" [multiTemplateDataRows]=\"expandable\"\r\n             matSort\r\n             [matSortActive]=\"sortActive\"\r\n             [matSortDirection]=\"sortDirection\"\r\n             [matSortDisableClear]=\"sortDisableClear\"\r\n             [matSortDisabled]=\"sortDisabled\"\r\n             [matSortStart]=\"sortStart\"\r\n             (matSortChange)=\"_handleSortChange($event)\"\r\n             [trackBy]=\"trackBy\">\r\n\r\n        <ng-container *ngIf=\"rowSelectable && !hideRowSelectionCheckbox\"\r\n                      matColumnDef=\"MtxGridCheckboxColumnDef\">\r\n          <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\r\n            <mat-checkbox *ngIf=\"multiSelectable\"\r\n                          [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\r\n                          [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\r\n                          (change)=\"$event ? _toggleMasterCheckbox() : null\">\r\n            </mat-checkbox>\r\n          </th>\r\n          <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n              class=\"mtx-grid-checkbox-cell\">\r\n            <mat-checkbox *ngIf=\"!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))\"\r\n                          [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\"\r\n                          [checked]=\"rowSelection.isSelected(row)\"\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\r\n            </mat-checkbox>\r\n          </td>\r\n          <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\r\n        </ng-container>\r\n\r\n        <ng-container *ngFor=\"let col of columns;\">\r\n          <ng-container [matColumnDef]=\"col.field\"\r\n                        [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\r\n            <th mat-header-cell *matHeaderCellDef\r\n                [class]=\"col.class!\"\r\n                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n                [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\">\r\n              <div class=\"mat-header-cell-inner\">\r\n                <ng-template [ngIf]=\"_isTemplateRef(headerTemplate)\" [ngIfElse]=\"headerTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"headerTemplate\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n                <ng-template #headerTpl>\r\n                  <ng-template [ngIf]=\"headerTemplate && _isTemplateRef(headerTemplate[col.field])\"\r\n                               [ngIfElse]=\"defaultHeaderTpl\">\r\n                    <ng-template [ngTemplateOutlet]=\"headerTemplate[col.field]\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n                    </ng-template>\r\n                  </ng-template>\r\n                </ng-template>\r\n                <ng-template #defaultHeaderTpl>\r\n                  <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\r\n                       [disabled]=\"!col.sortable\"\r\n                       [arrowPosition]=\"col.sortProp?.arrowPosition!\"\r\n                       [disableClear]=\"col.sortProp?.disableClear\"\r\n                       [start]=\"col.sortProp?.start!\">\r\n                    <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n                    <span>{{col.header | toObservable | async}}</span>\r\n                    <mat-icon class=\"mat-sort-header-icon\" *ngIf=\"col.sortable\">sort</mat-icon>\r\n                  </div>\r\n                  <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n              </div>\r\n            </th>\r\n\r\n            <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n                [class]=\"col.class!\"\r\n                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n                [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\"\r\n                mtx-grid-selectable-cell (cellSelectionChange)=\"_selectCell($event, row, col)\">\r\n              <ng-template [ngIf]=\"_isTemplateRef(cellTemplate)\" [ngIfElse]=\"cellTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"cellTemplate\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #cellTpl>\r\n                <ng-template [ngIf]=\"cellTemplate && _isTemplateRef(cellTemplate[col.field])\"\r\n                             [ngIfElse]=\"colDefCellTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"cellTemplate[col.field]\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #colDefCellTpl>\r\n                <ng-template [ngIf]=\"col.cellTemplate\" [ngIfElse]=\"defaultCellTpl\"\r\n                             [ngTemplateOutlet]=\"col.cellTemplate!\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #defaultCellTpl>\r\n                <button *ngIf=\"col.showExpand\" mat-icon-button mtx-grid-expansion-toggle\r\n                        [(opened)]=\"expansionRowStates[dataIndex].expanded\"\r\n                        (toggleChange)=\"_handleExpansionChange($event, row, col, dataIndex);\">\r\n                  <mat-icon>keyboard_arrow_right</mat-icon>\r\n                </button>\r\n\r\n                <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\"></mtx-grid-cell>\r\n              </ng-template>\r\n            </td>\r\n\r\n            <td mat-footer-cell *matFooterCellDef\r\n                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n                [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\">\r\n              <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n\r\n              <ng-template [ngIf]=\"_isTemplateRef(summaryTemplate)\" [ngIfElse]=\"summaryTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"summaryTemplate\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #summaryTpl>\r\n                <ng-template [ngIf]=\"summaryTemplate && _isTemplateRef(summaryTemplate[col.field])\"\r\n                             [ngIfElse]=\"defaultSummaryTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"summaryTemplate[col.field]\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #defaultSummaryTpl>\r\n                <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\">\r\n                </mtx-grid-cell>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template [ngIf]=\"useContentHeaderRowTemplate\" [ngIfElse]=\"defaultHeaderRowTpl\">\r\n        </ng-template>\r\n        <ng-template #defaultHeaderRowTpl>\r\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n        </ng-template>\r\n\r\n        <ng-template [ngIf]=\"useContentRowTemplate\" [ngIfElse]=\"defaultRowTpl\"></ng-template>\r\n        <ng-template #defaultRowTpl>\r\n          <tr mat-row\r\n              *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\r\n              [ngClass]=\"_getRowClassList(row, _getIndex(index, dataIndex))\"\r\n              (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\">\r\n          </tr>\r\n        </ng-template>\r\n\r\n        <ng-template [ngIf]=\"_whetherShowSummary\">\r\n          <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\r\n        </ng-template>\r\n        <ng-template [ngIf]=\"useContentFooterRowTemplate\"></ng-template>\r\n\r\n        <ng-container *ngIf=\"expandable\">\r\n          <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\r\n          <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\r\n            <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\r\n                [attr.colspan]=\"displayedColumns.length\">\r\n              <div class=\"mtx-grid-expansion-detail\"\r\n                   [@expansion]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\r\n                <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\r\n                </ng-template>\r\n              </div>\r\n            </td>\r\n          </ng-container>\r\n\r\n          <tr mat-row\r\n              *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\r\n              [ngClass]=\"['mtx-grid-expansion', expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed']\">\r\n          </tr>\r\n        </ng-container>\r\n      </table>\r\n\r\n      <!-- TODO: Use flexbox-based mat-table -->\r\n      <table mat-table *ngIf=\"columnResizable\"\r\n             columnResize\r\n             [ngClass]=\"{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped, 'mat-table-expandable': expandable}\"\r\n             [dataSource]=\"dataSource\" [multiTemplateDataRows]=\"expandable\"\r\n             matSort\r\n             [matSortActive]=\"sortActive\"\r\n             [matSortDirection]=\"sortDirection\"\r\n             [matSortDisableClear]=\"sortDisableClear\"\r\n             [matSortDisabled]=\"sortDisabled\"\r\n             [matSortStart]=\"sortStart\"\r\n             (matSortChange)=\"_handleSortChange($event)\"\r\n             [trackBy]=\"trackBy\">\r\n\r\n        <ng-container *ngIf=\"rowSelectable && !hideRowSelectionCheckbox\"\r\n                      matColumnDef=\"MtxGridCheckboxColumnDef\">\r\n          <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\r\n            <mat-checkbox *ngIf=\"multiSelectable\"\r\n                          [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\r\n                          [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\r\n                          (change)=\"$event ? _toggleMasterCheckbox() : null\">\r\n            </mat-checkbox>\r\n          </th>\r\n          <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n              class=\"mtx-grid-checkbox-cell\">\r\n            <mat-checkbox *ngIf=\"!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))\"\r\n                          [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\"\r\n                          [checked]=\"rowSelection.isSelected(row)\"\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\r\n            </mat-checkbox>\r\n          </td>\r\n          <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\r\n        </ng-container>\r\n\r\n        <ng-container *ngFor=\"let col of columns;\">\r\n          <ng-container [matColumnDef]=\"col.field\"\r\n                        [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\r\n            <th mat-header-cell *matHeaderCellDef\r\n                [class]=\"col.class!\"\r\n                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n                [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\"\r\n                [resizable]=\"col.resizable\"\r\n                [matResizableMinWidthPx]=\"col.minWidth\" [matResizableMaxWidthPx]=\"col.maxWidth\">\r\n              <div class=\"mat-header-cell-inner\">\r\n                <ng-template [ngIf]=\"_isTemplateRef(headerTemplate)\" [ngIfElse]=\"headerTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"headerTemplate\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n                <ng-template #headerTpl>\r\n                  <ng-template [ngIf]=\"headerTemplate && _isTemplateRef(headerTemplate[col.field])\"\r\n                               [ngIfElse]=\"defaultHeaderTpl\">\r\n                    <ng-template [ngTemplateOutlet]=\"headerTemplate[col.field]\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n                    </ng-template>\r\n                  </ng-template>\r\n                </ng-template>\r\n                <ng-template #defaultHeaderTpl>\r\n                  <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\r\n                       [disabled]=\"!col.sortable\"\r\n                       [arrowPosition]=\"col.sortProp?.arrowPosition!\"\r\n                       [disableClear]=\"col.sortProp?.disableClear\"\r\n                       [start]=\"col.sortProp?.start!\">\r\n                    <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n                    <span>{{col.header | toObservable | async}}</span>\r\n                    <mat-icon class=\"mat-sort-header-icon\" *ngIf=\"col.sortable\">sort</mat-icon>\r\n                  </div>\r\n                  <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n              </div>\r\n            </th>\r\n\r\n            <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n                [class]=\"col.class!\"\r\n                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n                [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\"\r\n                mtx-grid-selectable-cell (cellSelectionChange)=\"_selectCell($event, row, col)\">\r\n              <ng-template [ngIf]=\"_isTemplateRef(cellTemplate)\" [ngIfElse]=\"cellTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"cellTemplate\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #cellTpl>\r\n                <ng-template [ngIf]=\"cellTemplate && _isTemplateRef(cellTemplate[col.field])\"\r\n                             [ngIfElse]=\"colDefCellTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"cellTemplate[col.field]\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #colDefCellTpl>\r\n                <ng-template [ngIf]=\"col.cellTemplate\" [ngIfElse]=\"defaultCellTpl\"\r\n                             [ngTemplateOutlet]=\"col.cellTemplate!\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #defaultCellTpl>\r\n                <button *ngIf=\"col.showExpand\" mat-icon-button mtx-grid-expansion-toggle\r\n                        [(opened)]=\"expansionRowStates[dataIndex].expanded\"\r\n                        (toggleChange)=\"_handleExpansionChange($event, row, col, dataIndex);\">\r\n                  <mat-icon>keyboard_arrow_right</mat-icon>\r\n                </button>\r\n\r\n                <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\"></mtx-grid-cell>\r\n              </ng-template>\r\n            </td>\r\n\r\n            <td mat-footer-cell *matFooterCellDef\r\n                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n                [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\">\r\n              <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n\r\n              <ng-template [ngIf]=\"_isTemplateRef(summaryTemplate)\" [ngIfElse]=\"summaryTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"summaryTemplate\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #summaryTpl>\r\n                <ng-template [ngIf]=\"summaryTemplate && _isTemplateRef(summaryTemplate[col.field])\"\r\n                             [ngIfElse]=\"defaultSummaryTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"summaryTemplate[col.field]\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #defaultSummaryTpl>\r\n                <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\">\r\n                </mtx-grid-cell>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template [ngIf]=\"useContentHeaderRowTemplate\" [ngIfElse]=\"defaultHeaderRowTpl\">\r\n        </ng-template>\r\n        <ng-template #defaultHeaderRowTpl>\r\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n        </ng-template>\r\n\r\n        <ng-template [ngIf]=\"useContentRowTemplate\" [ngIfElse]=\"defaultRowTpl\"></ng-template>\r\n        <ng-template #defaultRowTpl>\r\n          <tr mat-row\r\n              *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\r\n              [ngClass]=\"_getRowClassList(row, _getIndex(index, dataIndex))\"\r\n              (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\">\r\n          </tr>\r\n        </ng-template>\r\n\r\n        <ng-template [ngIf]=\"_whetherShowSummary\">\r\n          <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\r\n        </ng-template>\r\n        <ng-template [ngIf]=\"useContentFooterRowTemplate\"></ng-template>\r\n\r\n        <ng-container *ngIf=\"expandable\">\r\n          <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\r\n          <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\r\n            <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\r\n                [attr.colspan]=\"displayedColumns.length\">\r\n              <div class=\"mtx-grid-expansion-detail\"\r\n                   [@expansion]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\r\n                <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\r\n                </ng-template>\r\n              </div>\r\n            </td>\r\n          </ng-container>\r\n\r\n          <tr mat-row\r\n              *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\r\n              [ngClass]=\"['mtx-grid-expansion', expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed']\">\r\n          </tr>\r\n        </ng-container>\r\n      </table>\r\n    </div>\r\n\r\n    <!-- No result -->\r\n    <div class=\"mtx-grid-no-result\" *ngIf=\"_hasNoResult\">\r\n      <ng-template [ngIf]=\"_isTemplateRef(noResultTemplate)\" [ngIfElse]=\"defaultNoResultTpl\">\r\n        <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\r\n      </ng-template>\r\n      <ng-template #defaultNoResultTpl>{{noResultText}}</ng-template>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Tool sidebar -->\r\n  <div class=\"mtx-grid-sidebar\" *ngIf=\"showSidebar\">\r\n    <ng-template [ngIf]=\"_isTemplateRef(sidebarTemplate)\">\r\n      <ng-template [ngTemplateOutlet]=\"sidebarTemplate\"></ng-template>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"mtx-grid-footer\">\r\n  <!-- Status Bar -->\r\n  <div class=\"mtx-grid-statusbar\" *ngIf=\"showStatusbar\">\r\n    <ng-template [ngIf]=\"_isTemplateRef(statusbarTemplate)\">\r\n      <ng-template [ngTemplateOutlet]=\"statusbarTemplate\"></ng-template>\r\n    </ng-template>\r\n  </div>\r\n\r\n  <!-- Pagination -->\r\n  <div class=\"mtx-grid-pagination\">\r\n    <ng-template [ngIf]=\"_isTemplateRef(paginationTemplate)\" [ngIfElse]=\"defaultPaginationTemplate\">\r\n      <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\r\n    </ng-template>\r\n    <ng-template #defaultPaginationTemplate>\r\n      <mat-paginator [class.mat-paginator-hidden]=\"!showPaginator || _hasNoResult\"\r\n                     [showFirstLastButtons]=\"showFirstLastButtons\"\r\n                     [length]=\"length\"\r\n                     [pageIndex]=\"pageIndex\"\r\n                     [pageSize]=\"pageSize\"\r\n                     [pageSizeOptions]=\"pageSizeOptions\"\r\n                     [hidePageSize]=\"hidePageSize\"\r\n                     (page)=\"_handlePage($event)\"\r\n                     [disabled]=\"pageDisabled\">\r\n      </mat-paginator>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n\r\n<!-- Header template for extra content -->\r\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\r\n  <ng-template [ngIf]=\"_isTemplateRef(headerExtraTemplate)\" [ngIfElse]=\"headerExtraTpl\">\r\n    <ng-template [ngTemplateOutlet]=\"headerExtraTemplate\"\r\n                 [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n    </ng-template>\r\n  </ng-template>\r\n  <ng-template #headerExtraTpl>\r\n    <ng-template [ngIf]=\"headerExtraTemplate && _isTemplateRef(headerExtraTemplate[col.field])\">\r\n      <ng-template [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\r\n                   [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n      </ng-template>\r\n    </ng-template>\r\n  </ng-template>\r\n</ng-template>\r\n",
+                template: "<!-- Progress bar-->\r\n<div class=\"mtx-grid-progress\" *ngIf=\"loading\">\r\n  <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n</div>\r\n\r\n<!-- Toolbar -->\r\n<div class=\"mtx-grid-toolbar\" *ngIf=\"showToolbar\">\r\n  <div class=\"mtx-grid-toolbar-content\">\r\n    <ng-template [ngIf]=\"_isTemplateRef(toolbarTemplate)\" [ngIfElse]=\"defaultToolbarTemplate\">\r\n      <ng-template [ngTemplateOutlet]=\"toolbarTemplate\"></ng-template>\r\n    </ng-template>\r\n    <ng-template #defaultToolbarTemplate>\r\n      <div class=\"mtx-grid-toolbar-title\" *ngIf=\"toolbarTitle\">{{toolbarTitle}}</div>\r\n    </ng-template>\r\n  </div>\r\n  <div class=\"mtx-grid-toolbar-actions\">\r\n    <mtx-grid-column-menu *ngIf=\"showColumnMenuButton\" #columnMenu\r\n                          [columns]=\"columns\"\r\n                          [buttonText]=\"columnMenuButtonText\"\r\n                          [buttonType]=\"columnMenuButtonType\"\r\n                          [buttonColor]=\"columnMenuButtonColor\"\r\n                          [buttonClass]=\"columnMenuButtonClass\"\r\n                          [buttonIcon]=\"columnMenuButtonIcon\"\r\n                          [selectable]=\"columnHideable\"\r\n                          [selectableChecked]=\"columnHideableChecked\"\r\n                          (selectionChange)=\"_handleColumnChange($event)\"\r\n                          [sortable]=\"columnSortable\"\r\n                          (sortChange)=\"_handleColumnChange($event)\"\r\n                          [pinnable]=\"columnPinnable\"\r\n                          (pinChange)=\"_handleColumnChange($event)\"\r\n                          [showHeader]=\"showColumnMenuHeader\"\r\n                          [headerText]=\"columnMenuHeaderText\"\r\n                          [headerTemplate]=\"columnMenuHeaderTemplate\"\r\n                          [showFooter]=\"showColumnMenuFooter\"\r\n                          [footerText]=\"columnMenuFooterText\"\r\n                          [footerTemplate]=\"columnMenuFooterTemplate\"\r\n                          [pinOptions]=\"columnPinOptions\">\r\n    </mtx-grid-column-menu>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"mtx-grid-main mtx-grid-layout\">\r\n  <!-- Table content -->\r\n  <div class=\"mtx-grid-content mtx-grid-layout\">\r\n    <div #tableContainer class=\"mat-table-container\"\r\n         [ngClass]=\"{'mat-table-with-data': !_hasNoResult}\">\r\n      <table mat-table *ngIf=\"!columnResizable\"\r\n             [ngClass]=\"{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped, 'mat-table-expandable': expandable}\"\r\n             [dataSource]=\"dataSource\" [multiTemplateDataRows]=\"expandable\"\r\n             matSort\r\n             [matSortActive]=\"sortActive\"\r\n             [matSortDirection]=\"sortDirection\"\r\n             [matSortDisableClear]=\"sortDisableClear\"\r\n             [matSortDisabled]=\"sortDisabled\"\r\n             [matSortStart]=\"sortStart\"\r\n             (matSortChange)=\"_handleSortChange($event)\"\r\n             [trackBy]=\"trackBy\">\r\n\r\n        <ng-container *ngIf=\"rowSelectable && !hideRowSelectionCheckbox\"\r\n                      matColumnDef=\"MtxGridCheckboxColumnDef\">\r\n          <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\r\n            <mat-checkbox *ngIf=\"multiSelectable\"\r\n                          [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\r\n                          [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\r\n                          (change)=\"$event ? _toggleMasterCheckbox() : null\">\r\n            </mat-checkbox>\r\n          </th>\r\n          <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n              class=\"mtx-grid-checkbox-cell\">\r\n            <mat-checkbox *ngIf=\"!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))\"\r\n                          [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\"\r\n                          [checked]=\"rowSelection.isSelected(row)\"\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\r\n            </mat-checkbox>\r\n          </td>\r\n          <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\r\n        </ng-container>\r\n\r\n        <ng-container *ngFor=\"let col of columns;\">\r\n          <ng-container [matColumnDef]=\"col.field\"\r\n                        [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\r\n            <th mat-header-cell *matHeaderCellDef\r\n                [class]=\"col.class!\"\r\n                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n                [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\">\r\n              <div class=\"mat-header-cell-inner\">\r\n                <ng-template [ngIf]=\"_isTemplateRef(headerTemplate)\" [ngIfElse]=\"headerTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"headerTemplate\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n                <ng-template #headerTpl>\r\n                  <ng-template [ngIf]=\"headerTemplate && _isTemplateRef(headerTemplate[col.field])\"\r\n                               [ngIfElse]=\"defaultHeaderTpl\">\r\n                    <ng-template [ngTemplateOutlet]=\"headerTemplate[col.field]\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n                    </ng-template>\r\n                  </ng-template>\r\n                </ng-template>\r\n                <ng-template #defaultHeaderTpl>\r\n                  <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\r\n                       [disabled]=\"!col.sortable\"\r\n                       [arrowPosition]=\"col.sortProp?.arrowPosition!\"\r\n                       [disableClear]=\"col.sortProp?.disableClear\"\r\n                       [start]=\"col.sortProp?.start!\">\r\n                    <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n                    <span>{{col.header | toObservable | async}}</span>\r\n                    <svg class=\"mtx-grid-icon mat-sort-header-icon\" *ngIf=\"col.sortable\"\r\n                         viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\"\r\n                         focusable=\"false\">\r\n                      <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\"></path>\r\n                    </svg>\r\n                  </div>\r\n                  <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n              </div>\r\n            </th>\r\n\r\n            <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n                [class]=\"col.class!\"\r\n                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n                [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\"\r\n                mtx-grid-selectable-cell (cellSelectionChange)=\"_selectCell($event, row, col)\">\r\n              <ng-template [ngIf]=\"_isTemplateRef(cellTemplate)\" [ngIfElse]=\"cellTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"cellTemplate\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #cellTpl>\r\n                <ng-template [ngIf]=\"cellTemplate && _isTemplateRef(cellTemplate[col.field])\"\r\n                             [ngIfElse]=\"colDefCellTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"cellTemplate[col.field]\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #colDefCellTpl>\r\n                <ng-template [ngIf]=\"col.cellTemplate\" [ngIfElse]=\"defaultCellTpl\"\r\n                             [ngTemplateOutlet]=\"col.cellTemplate!\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #defaultCellTpl>\r\n                <button class=\"mtx-grid-row-expand-button\" *ngIf=\"col.showExpand\"\r\n                        mat-icon-button mtx-grid-expansion-toggle\r\n                        [(opened)]=\"expansionRowStates[dataIndex].expanded\"\r\n                        (toggleChange)=\"_handleExpansionChange($event, row, col, dataIndex);\">\r\n                  <svg class=\"mtx-grid-icon mtx-grid-row-expand-icon\" viewBox=\"0 0 24 24\"\r\n                       width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n                    <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\r\n                  </svg>\r\n                </button>\r\n\r\n                <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\"></mtx-grid-cell>\r\n              </ng-template>\r\n            </td>\r\n\r\n            <td mat-footer-cell *matFooterCellDef\r\n                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n                [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\">\r\n              <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n\r\n              <ng-template [ngIf]=\"_isTemplateRef(summaryTemplate)\" [ngIfElse]=\"summaryTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"summaryTemplate\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #summaryTpl>\r\n                <ng-template [ngIf]=\"summaryTemplate && _isTemplateRef(summaryTemplate[col.field])\"\r\n                             [ngIfElse]=\"defaultSummaryTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"summaryTemplate[col.field]\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #defaultSummaryTpl>\r\n                <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\">\r\n                </mtx-grid-cell>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template [ngIf]=\"useContentHeaderRowTemplate\" [ngIfElse]=\"defaultHeaderRowTpl\">\r\n        </ng-template>\r\n        <ng-template #defaultHeaderRowTpl>\r\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n        </ng-template>\r\n\r\n        <ng-template [ngIf]=\"useContentRowTemplate\" [ngIfElse]=\"defaultRowTpl\"></ng-template>\r\n        <ng-template #defaultRowTpl>\r\n          <tr mat-row\r\n              *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\r\n              [ngClass]=\"_getRowClassList(row, _getIndex(index, dataIndex))\"\r\n              (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\">\r\n          </tr>\r\n        </ng-template>\r\n\r\n        <ng-template [ngIf]=\"_whetherShowSummary\">\r\n          <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\r\n        </ng-template>\r\n        <ng-template [ngIf]=\"useContentFooterRowTemplate\"></ng-template>\r\n\r\n        <ng-container *ngIf=\"expandable\">\r\n          <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\r\n          <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\r\n            <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\r\n                [attr.colspan]=\"displayedColumns.length\">\r\n              <div class=\"mtx-grid-expansion-detail\"\r\n                   [@expansion]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\r\n                <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\r\n                </ng-template>\r\n              </div>\r\n            </td>\r\n          </ng-container>\r\n\r\n          <tr mat-row\r\n              *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\r\n              [ngClass]=\"['mtx-grid-expansion', expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed']\">\r\n          </tr>\r\n        </ng-container>\r\n      </table>\r\n\r\n      <!-- TODO: Use flexbox-based mat-table -->\r\n      <table mat-table *ngIf=\"columnResizable\"\r\n             columnResize\r\n             [ngClass]=\"{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped, 'mat-table-expandable': expandable}\"\r\n             [dataSource]=\"dataSource\" [multiTemplateDataRows]=\"expandable\"\r\n             matSort\r\n             [matSortActive]=\"sortActive\"\r\n             [matSortDirection]=\"sortDirection\"\r\n             [matSortDisableClear]=\"sortDisableClear\"\r\n             [matSortDisabled]=\"sortDisabled\"\r\n             [matSortStart]=\"sortStart\"\r\n             (matSortChange)=\"_handleSortChange($event)\"\r\n             [trackBy]=\"trackBy\">\r\n\r\n        <ng-container *ngIf=\"rowSelectable && !hideRowSelectionCheckbox\"\r\n                      matColumnDef=\"MtxGridCheckboxColumnDef\">\r\n          <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\r\n            <mat-checkbox *ngIf=\"multiSelectable\"\r\n                          [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\r\n                          [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\r\n                          (change)=\"$event ? _toggleMasterCheckbox() : null\">\r\n            </mat-checkbox>\r\n          </th>\r\n          <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n              class=\"mtx-grid-checkbox-cell\">\r\n            <mat-checkbox *ngIf=\"!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))\"\r\n                          [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\"\r\n                          [checked]=\"rowSelection.isSelected(row)\"\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\r\n            </mat-checkbox>\r\n          </td>\r\n          <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\r\n        </ng-container>\r\n\r\n        <ng-container *ngFor=\"let col of columns;\">\r\n          <ng-container [matColumnDef]=\"col.field\"\r\n                        [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\r\n            <th mat-header-cell *matHeaderCellDef\r\n                [class]=\"col.class!\"\r\n                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n                [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\"\r\n                [resizable]=\"col.resizable\"\r\n                [matResizableMinWidthPx]=\"col.minWidth\" [matResizableMaxWidthPx]=\"col.maxWidth\">\r\n              <div class=\"mat-header-cell-inner\">\r\n                <ng-template [ngIf]=\"_isTemplateRef(headerTemplate)\" [ngIfElse]=\"headerTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"headerTemplate\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n                <ng-template #headerTpl>\r\n                  <ng-template [ngIf]=\"headerTemplate && _isTemplateRef(headerTemplate[col.field])\"\r\n                               [ngIfElse]=\"defaultHeaderTpl\">\r\n                    <ng-template [ngTemplateOutlet]=\"headerTemplate[col.field]\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n                    </ng-template>\r\n                  </ng-template>\r\n                </ng-template>\r\n                <ng-template #defaultHeaderTpl>\r\n                  <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\r\n                       [disabled]=\"!col.sortable\"\r\n                       [arrowPosition]=\"col.sortProp?.arrowPosition!\"\r\n                       [disableClear]=\"col.sortProp?.disableClear\"\r\n                       [start]=\"col.sortProp?.start!\">\r\n                    <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n                    <span>{{col.header | toObservable | async}}</span>\r\n                    <svg class=\"mtx-grid-icon mat-sort-header-icon\" *ngIf=\"col.sortable\"\r\n                         viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\"\r\n                         focusable=\"false\">\r\n                      <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\"></path>\r\n                    </svg>\r\n                  </div>\r\n                  <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n              </div>\r\n            </th>\r\n\r\n            <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n                [class]=\"col.class!\"\r\n                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n                [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\"\r\n                mtx-grid-selectable-cell (cellSelectionChange)=\"_selectCell($event, row, col)\">\r\n              <ng-template [ngIf]=\"_isTemplateRef(cellTemplate)\" [ngIfElse]=\"cellTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"cellTemplate\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #cellTpl>\r\n                <ng-template [ngIf]=\"cellTemplate && _isTemplateRef(cellTemplate[col.field])\"\r\n                             [ngIfElse]=\"colDefCellTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"cellTemplate[col.field]\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #colDefCellTpl>\r\n                <ng-template [ngIf]=\"col.cellTemplate\" [ngIfElse]=\"defaultCellTpl\"\r\n                             [ngTemplateOutlet]=\"col.cellTemplate!\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #defaultCellTpl>\r\n                <button class=\"mtx-grid-row-expand-button\" *ngIf=\"col.showExpand\"\r\n                        mat-icon-button mtx-grid-expansion-toggle\r\n                        [(opened)]=\"expansionRowStates[dataIndex].expanded\"\r\n                        (toggleChange)=\"_handleExpansionChange($event, row, col, dataIndex);\">\r\n                  <svg class=\"mtx-grid-icon mtx-grid-row-expand-icon\" viewBox=\"0 0 24 24\"\r\n                       width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n                    <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\r\n                  </svg>\r\n                </button>\r\n\r\n                <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\"></mtx-grid-cell>\r\n              </ng-template>\r\n            </td>\r\n\r\n            <td mat-footer-cell *matFooterCellDef\r\n                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n                [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\">\r\n              <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n\r\n              <ng-template [ngIf]=\"_isTemplateRef(summaryTemplate)\" [ngIfElse]=\"summaryTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"summaryTemplate\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #summaryTpl>\r\n                <ng-template [ngIf]=\"summaryTemplate && _isTemplateRef(summaryTemplate[col.field])\"\r\n                             [ngIfElse]=\"defaultSummaryTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"summaryTemplate[col.field]\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #defaultSummaryTpl>\r\n                <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\">\r\n                </mtx-grid-cell>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template [ngIf]=\"useContentHeaderRowTemplate\" [ngIfElse]=\"defaultHeaderRowTpl\">\r\n        </ng-template>\r\n        <ng-template #defaultHeaderRowTpl>\r\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n        </ng-template>\r\n\r\n        <ng-template [ngIf]=\"useContentRowTemplate\" [ngIfElse]=\"defaultRowTpl\"></ng-template>\r\n        <ng-template #defaultRowTpl>\r\n          <tr mat-row\r\n              *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\r\n              [ngClass]=\"_getRowClassList(row, _getIndex(index, dataIndex))\"\r\n              (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\">\r\n          </tr>\r\n        </ng-template>\r\n\r\n        <ng-template [ngIf]=\"_whetherShowSummary\">\r\n          <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\r\n        </ng-template>\r\n        <ng-template [ngIf]=\"useContentFooterRowTemplate\"></ng-template>\r\n\r\n        <ng-container *ngIf=\"expandable\">\r\n          <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\r\n          <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\r\n            <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\r\n                [attr.colspan]=\"displayedColumns.length\">\r\n              <div class=\"mtx-grid-expansion-detail\"\r\n                   [@expansion]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\r\n                <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\r\n                </ng-template>\r\n              </div>\r\n            </td>\r\n          </ng-container>\r\n\r\n          <tr mat-row\r\n              *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\r\n              [ngClass]=\"['mtx-grid-expansion', expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed']\">\r\n          </tr>\r\n        </ng-container>\r\n      </table>\r\n    </div>\r\n\r\n    <!-- No result -->\r\n    <div class=\"mtx-grid-no-result\" *ngIf=\"_hasNoResult\">\r\n      <ng-template [ngIf]=\"_isTemplateRef(noResultTemplate)\" [ngIfElse]=\"defaultNoResultTpl\">\r\n        <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\r\n      </ng-template>\r\n      <ng-template #defaultNoResultTpl>{{noResultText}}</ng-template>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Tool sidebar -->\r\n  <div class=\"mtx-grid-sidebar\" *ngIf=\"showSidebar\">\r\n    <ng-template [ngIf]=\"_isTemplateRef(sidebarTemplate)\">\r\n      <ng-template [ngTemplateOutlet]=\"sidebarTemplate\"></ng-template>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"mtx-grid-footer\">\r\n  <!-- Status Bar -->\r\n  <div class=\"mtx-grid-statusbar\" *ngIf=\"showStatusbar\">\r\n    <ng-template [ngIf]=\"_isTemplateRef(statusbarTemplate)\">\r\n      <ng-template [ngTemplateOutlet]=\"statusbarTemplate\"></ng-template>\r\n    </ng-template>\r\n  </div>\r\n\r\n  <!-- Pagination -->\r\n  <div class=\"mtx-grid-pagination\">\r\n    <ng-template [ngIf]=\"_isTemplateRef(paginationTemplate)\" [ngIfElse]=\"defaultPaginationTemplate\">\r\n      <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\r\n    </ng-template>\r\n    <ng-template #defaultPaginationTemplate>\r\n      <mat-paginator [class.mat-paginator-hidden]=\"!showPaginator || _hasNoResult\"\r\n                     [showFirstLastButtons]=\"showFirstLastButtons\"\r\n                     [length]=\"length\"\r\n                     [pageIndex]=\"pageIndex\"\r\n                     [pageSize]=\"pageSize\"\r\n                     [pageSizeOptions]=\"pageSizeOptions\"\r\n                     [hidePageSize]=\"hidePageSize\"\r\n                     (page)=\"_handlePage($event)\"\r\n                     [disabled]=\"pageDisabled\">\r\n      </mat-paginator>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n\r\n<!-- Header template for extra content -->\r\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\r\n  <ng-template [ngIf]=\"_isTemplateRef(headerExtraTemplate)\" [ngIfElse]=\"headerExtraTpl\">\r\n    <ng-template [ngTemplateOutlet]=\"headerExtraTemplate\"\r\n                 [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n    </ng-template>\r\n  </ng-template>\r\n  <ng-template #headerExtraTpl>\r\n    <ng-template [ngIf]=\"headerExtraTemplate && _isTemplateRef(headerExtraTemplate[col.field])\">\r\n      <ng-template [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\r\n                   [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n      </ng-template>\r\n    </ng-template>\r\n  </ng-template>\r\n</ng-template>\r\n",
                 host: {
                     class: 'mtx-grid',
                 },
@@ -385,7 +379,7 @@ MtxGridComponent.decorators = [
                         transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                     ]),
                 ],
-                styles: [".mtx-grid{position:relative;display:flex;flex-direction:column;width:100%}.mtx-grid .mat-table-container{overflow:auto}.mtx-grid .mat-table-container.mat-table-with-data{flex:1}.mtx-grid .mat-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.mtx-grid .mat-table:not(.mat-column-resize-table) .mat-header-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-table:not(.mat-column-resize-table) .mat-footer-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-table:not(.mat-column-resize-table) .mat-cell:not(.mtx-grid-checkbox-cell){min-width:80px}.mtx-grid .mat-table-sticky-left{border-right-width:1px;border-right-style:solid}[dir=rtl] .mtx-grid .mat-table-sticky-left{border-right-width:0;border-left-width:1px;border-left-style:solid}.mtx-grid .mat-table-sticky-right{border-left-width:1px;border-left-style:solid}[dir=rtl] .mtx-grid .mat-table-sticky-right{border-left-width:0;border-right-width:1px;border-right-style:solid}.mtx-grid .mat-header-cell,.mtx-grid .mat-footer-cell,.mtx-grid .mat-cell{padding:4px 10px;box-sizing:border-box}.mtx-grid .mat-header-cell:first-of-type:not(:only-of-type),.mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type),.mtx-grid .mat-cell:first-of-type:not(:only-of-type){padding-left:24px}.mtx-grid .mat-header-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,.mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,.mtx-grid .mat-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell{padding-left:10px;padding-right:10px}[dir=rtl] .mtx-grid .mat-header-cell:first-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-cell:first-of-type:not(:only-of-type){padding-left:10px;padding-right:24px}[dir=rtl] .mtx-grid .mat-header-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,[dir=rtl] .mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,[dir=rtl] .mtx-grid .mat-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell{padding-left:10px;padding-right:10px}.mtx-grid .mat-header-cell:last-of-type:not(:only-of-type),.mtx-grid .mat-footer-cell:last-of-type:not(:only-of-type),.mtx-grid .mat-cell:last-of-type:not(:only-of-type){padding-right:24px}[dir=rtl] .mtx-grid .mat-header-cell:last-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-footer-cell:last-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-cell:last-of-type:not(:only-of-type){padding-left:24px;padding-right:10px}.mtx-grid .mat-cell .mat-icon-button.expanded .mat-icon{transform:rotate(90deg)}.mtx-grid .mat-row.mtx-grid-expansion{height:0;overflow:hidden}.mtx-grid .mat-row.mtx-grid-expansion .mat-cell{padding-top:0;padding-bottom:0}.mtx-grid .mat-row.mtx-grid-expansion.collapsed .mat-cell{border-bottom-width:0}.mtx-grid .mat-row:last-of-type .mat-cell{border-bottom-width:0}.mtx-grid .mat-sort-header-icon{width:18px;height:18px;margin:0 4px;font-size:18px}.mtx-grid .mat-header-cell-inner{display:flex;align-items:center}.mtx-grid .mat-paginator-hidden{display:none}.mtx-grid-progress{position:absolute;top:0;z-index:120;width:100%}.mtx-grid-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:8px;box-sizing:border-box}.mtx-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.mtx-grid-content{flex-direction:column;width:0}.mtx-grid-sidebar{max-width:50%;border-left-width:1px;border-left-style:solid}[dir=rtl] .mtx-grid-sidebar{border-left-width:0;border-right-width:1px;border-right-style:solid}.mtx-grid-footer{position:relative;z-index:1}.mtx-grid-statusbar{display:flex;align-items:center;min-height:56px;padding:8px}.mtx-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.mtx-grid-expansion-placeholder{display:inline-block;width:40px;height:40px;vertical-align:middle}.mtx-grid-expansion-detail{display:flex;align-items:center;min-height:48px;overflow:hidden}.mtx-grid-checkbox-cell{flex:none;justify-content:center;width:56px;min-width:56px}.mtx-grid-checkbox-cell .mat-checkbox{display:flex;margin:0 10px}.mtx-grid-checkbox-cell .mat-checkbox-inner-container{margin-left:0}\n"]
+                styles: [".mtx-grid{position:relative;display:flex;flex-direction:column;width:100%}.mtx-grid .mat-table-container{overflow:auto}.mtx-grid .mat-table-container.mat-table-with-data{flex:1}.mtx-grid .mat-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.mtx-grid .mat-table:not(.mat-column-resize-table) .mat-header-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-table:not(.mat-column-resize-table) .mat-footer-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-table:not(.mat-column-resize-table) .mat-cell:not(.mtx-grid-checkbox-cell){min-width:80px}.mtx-grid .mat-table-sticky-left{border-right-width:1px;border-right-style:solid}[dir=rtl] .mtx-grid .mat-table-sticky-left{border-right-width:0;border-left-width:1px;border-left-style:solid}.mtx-grid .mat-table-sticky-right{border-left-width:1px;border-left-style:solid}[dir=rtl] .mtx-grid .mat-table-sticky-right{border-left-width:0;border-right-width:1px;border-right-style:solid}.mtx-grid .mat-header-cell,.mtx-grid .mat-footer-cell,.mtx-grid .mat-cell{padding:4px 10px;box-sizing:border-box}.mtx-grid .mat-header-cell:first-of-type:not(:only-of-type),.mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type),.mtx-grid .mat-cell:first-of-type:not(:only-of-type){padding-left:24px}.mtx-grid .mat-header-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,.mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,.mtx-grid .mat-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell{padding-left:10px;padding-right:10px}[dir=rtl] .mtx-grid .mat-header-cell:first-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-cell:first-of-type:not(:only-of-type){padding-left:10px;padding-right:24px}[dir=rtl] .mtx-grid .mat-header-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,[dir=rtl] .mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,[dir=rtl] .mtx-grid .mat-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell{padding-left:10px;padding-right:10px}.mtx-grid .mat-header-cell:last-of-type:not(:only-of-type),.mtx-grid .mat-footer-cell:last-of-type:not(:only-of-type),.mtx-grid .mat-cell:last-of-type:not(:only-of-type){padding-right:24px}[dir=rtl] .mtx-grid .mat-header-cell:last-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-footer-cell:last-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-cell:last-of-type:not(:only-of-type){padding-left:24px;padding-right:10px}.mtx-grid .mat-row.mtx-grid-expansion{height:0;overflow:hidden}.mtx-grid .mat-row.mtx-grid-expansion .mat-cell{padding-top:0;padding-bottom:0}.mtx-grid .mat-row.mtx-grid-expansion.collapsed .mat-cell{border-bottom-width:0}.mtx-grid .mat-row:last-of-type .mat-cell{border-bottom-width:0}.mtx-grid .mat-sort-header-icon{margin:0 4px}.mtx-grid .mat-header-cell-inner{display:flex;align-items:center}.mtx-grid .mat-paginator-hidden{display:none}.mtx-grid .mat-icon-button i,.mtx-grid .mat-icon-button .mat-icon{line-height:20px}.mtx-grid .mat-icon{width:20px;height:20px;font-size:20px}.mtx-grid-progress{position:absolute;top:0;z-index:120;width:100%}.mtx-grid-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:8px;box-sizing:border-box}.mtx-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.mtx-grid-content{flex-direction:column;width:0}.mtx-grid-sidebar{max-width:50%;border-left-width:1px;border-left-style:solid}[dir=rtl] .mtx-grid-sidebar{border-left-width:0;border-right-width:1px;border-right-style:solid}.mtx-grid-footer{position:relative;z-index:1}.mtx-grid-statusbar{display:flex;align-items:center;min-height:56px;padding:8px}.mtx-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.mtx-grid-expansion-placeholder{display:inline-block;width:40px;height:40px;vertical-align:middle}.mtx-grid-expansion-detail{display:flex;align-items:center;min-height:48px;overflow:hidden}.mtx-grid-checkbox-cell{flex:none;justify-content:center;width:56px;min-width:56px}.mtx-grid-checkbox-cell .mat-checkbox{display:flex;margin:0 10px}.mtx-grid-checkbox-cell .mat-checkbox-inner-container{margin-left:0}.mtx-grid-row-expand-button{width:32px;height:32px;line-height:32px}.mtx-grid-row-expand-button.expanded .mtx-grid-row-expand-icon{transform:rotate(90deg)}.mtx-grid-icon{width:20px;height:20px;font-size:20px}\n"]
             },] }
 ];
 /**
@@ -460,7 +454,7 @@ MtxGridComponent.propDecorators = {
     columnMenuButtonIcon: [{ type: Input }],
     columnHideable: [{ type: Input }],
     columnHideableChecked: [{ type: Input }],
-    columnMovable: [{ type: Input }],
+    columnSortable: [{ type: Input }],
     columnPinnable: [{ type: Input }],
     columnChange: [{ type: Output }],
     showColumnMenuHeader: [{ type: Input }],
@@ -469,6 +463,7 @@ MtxGridComponent.propDecorators = {
     showColumnMenuFooter: [{ type: Input }],
     columnMenuFooterText: [{ type: Input }],
     columnMenuFooterTemplate: [{ type: Input }],
+    columnPinOptions: [{ type: Input }],
     noResultText: [{ type: Input }],
     noResultTemplate: [{ type: Input }],
     headerTemplate: [{ type: Input }],
@@ -552,7 +547,7 @@ class MtxGridCellComponent {
         }
     }
     /** Preview enlarged image */
-    _onPreview(urlStr) {
+    _handleImagePreview(urlStr) {
         const imgs = [];
         this._dataGridSrv.str2arr(urlStr).forEach((url, index) => {
             imgs.push({ title: index + 1 + '', src: url });
@@ -572,9 +567,9 @@ MtxGridCellComponent.decorators = [
     { type: Component, args: [{
                 selector: 'mtx-grid-cell',
                 exportAs: 'mtxGridCell',
-                template: "<span *ngIf=\"summary; else customCellFormattingTpl\"\r\n      [title]=\"_getFormatterTooltip(_formatSummary(data, colDef))\"\r\n      [innerHTML]=\"_getText(_formatSummary(data, colDef))\">\r\n</span>\r\n\r\n<!-- Custom formatting -->\r\n<ng-template #customCellFormattingTpl>\r\n  <span *ngIf=\"colDef.formatter; else defaultCellFormattingTpl\"\r\n        [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\r\n        [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\">\r\n  </span>\r\n</ng-template>\r\n\r\n<!-- Default formatting -->\r\n<ng-template #defaultCellFormattingTpl>\r\n  <ng-container [ngSwitch]=\"colDef.type\">\r\n    <!-- Tag -->\r\n    <ng-container *ngSwitchCase=\"'tag'\">\r\n      <mat-chip-list *ngIf=\"colDef.tag && colDef.tag[_colValue]; else tagEmptyTpl\">\r\n        <mat-chip color=\"primary\" [ngClass]=\"['bg-' + colDef.tag[_colValue].color]\">\r\n          {{colDef.tag[_colValue].text}}\r\n        </mat-chip>\r\n      </mat-chip-list>\r\n      <ng-template #tagEmptyTpl>{{_colValue}}</ng-template>\r\n    </ng-container>\r\n    <!-- Buttons -->\r\n    <ng-container *ngSwitchCase=\"'button'\">\r\n      <ng-container *ngFor=\"let btn of colDef.buttons;\">\r\n        <ng-container *ngIf=\"!btn.iif || btn.iif(rowData)\">\r\n          <ng-container *ngIf=\"btn.pop; else btnDefaultTpl\">\r\n            <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n                    *ngIf=\"btn.type==='basic'\"\r\n                    mat-button\r\n                    [color]=\"btn.color || 'primary'\"\r\n                    [disabled]=\"btn.disabled\"\r\n                    [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n                    (click)=\"_handleActionConfirm($event, btn.popTitle!, btn.popDescription,\r\n                                                          btn.popOkColor, btn.popOkText,\r\n                                                          btn.popCloseColor, btn.popCloseText,\r\n                                                          btn.click, rowData)\">\r\n              <mat-icon *ngIf=\"btn.icon\">{{btn.icon}}</mat-icon>\r\n              <span>{{btn.text | toObservable | async}}</span>\r\n            </button>\r\n            <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n                    *ngIf=\"!btn.type || btn.type==='icon'\"\r\n                    mat-icon-button\r\n                    [color]=\"btn.color || 'primary'\"\r\n                    [disabled]=\"btn.disabled\"\r\n                    [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n                    (click)=\"_handleActionConfirm($event, btn.popTitle!, btn.popDescription,\r\n                                                          btn.popOkColor, btn.popOkText,\r\n                                                          btn.popCloseColor, btn.popCloseText,\r\n                                                          btn.click, rowData)\">\r\n              <mat-icon>{{btn.icon}}</mat-icon>\r\n            </button>\r\n          </ng-container>\r\n          <ng-template #btnDefaultTpl>\r\n            <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n                    *ngIf=\"btn.type==='basic'\"\r\n                    mat-button\r\n                    [color]=\"btn.color || 'primary'\"\r\n                    [disabled]=\"btn.disabled\"\r\n                    [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n                    (click)=\"_handleActionClick($event, btn, rowData)\">\r\n              <mat-icon *ngIf=\"btn.icon\">{{btn.icon}}</mat-icon>\r\n              <span>{{btn.text | toObservable | async}}</span>\r\n            </button>\r\n            <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n                    *ngIf=\"!btn.type || btn.type==='icon'\"\r\n                    mat-icon-button\r\n                    [color]=\"btn.color || 'primary'\"\r\n                    [disabled]=\"btn.disabled\"\r\n                    [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n                    (click)=\"_handleActionClick($event, btn, rowData)\">\r\n              <mat-icon>{{btn.icon}}</mat-icon>\r\n            </button>\r\n          </ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <!-- Link -->\r\n    <ng-container *ngSwitchCase=\"'link'\">\r\n      <a [href]=\"_colValue\" target=\"_blank\">{{_colValue}}</a>\r\n    </ng-container>\r\n    <!-- Image -->\r\n    <ng-container *ngSwitchCase=\"'image'\">\r\n      <img class=\"mtx-grid-img\" [src]=\"_colValue\" (click)=\"_onPreview(_colValue)\">\r\n    </ng-container>\r\n    <!-- Boolean -->\r\n    <ng-container *ngSwitchCase=\"'boolean'\">\r\n      <span [title]=\"_getTooltip(_colValue)\">{{_getText(_colValue)}}</span>\r\n    </ng-container>\r\n    <!-- Number -->\r\n    <ng-container *ngSwitchCase=\"'number'\">\r\n      <span [title]=\"_getTooltip(_colValue | number: colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)\">\r\n        {{_getText(_colValue | number: colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)}}\r\n      </span>\r\n    </ng-container>\r\n    <!-- Currency -->\r\n    <ng-container *ngSwitchCase=\"'currency'\">\r\n      <span [title]=\"_getTooltip(_colValue | currency: colDef.typeParameter?.currencyCode : colDef.typeParameter?.display : colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)\">\r\n        {{_getText(_colValue | currency: colDef.typeParameter?.currencyCode : colDef.typeParameter?.display : colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)}}\r\n      </span>\r\n    </ng-container>\r\n    <!-- Percent -->\r\n    <ng-container *ngSwitchCase=\"'percent'\">\r\n      <span [title]=\"_getTooltip(_colValue | percent: colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)\">\r\n        {{_getText(_colValue | percent: colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)}}\r\n      </span>\r\n    </ng-container>\r\n    <!-- Date -->\r\n    <ng-container *ngSwitchCase=\"'date'\">\r\n      <span [title]=\"_getTooltip(_colValue | date: colDef.typeParameter?.format : colDef.typeParameter?.timezone : colDef.typeParameter?.locale)\">\r\n        {{_getText(_colValue | date: colDef.typeParameter?.format : colDef.typeParameter?.timezone : colDef.typeParameter?.locale)}}\r\n      </span>\r\n    </ng-container>\r\n    <!-- Default -->\r\n    <ng-container *ngSwitchDefault>\r\n      <span [title]=\"_getTooltip(_colValue)\">{{_getText(_colValue)}}</span>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n",
+                template: "<span *ngIf=\"summary; else customCellFormattingTpl\"\r\n      [title]=\"_getFormatterTooltip(_formatSummary(data, colDef))\"\r\n      [innerHTML]=\"_getText(_formatSummary(data, colDef))\">\r\n</span>\r\n\r\n<!-- Custom formatting -->\r\n<ng-template #customCellFormattingTpl>\r\n  <span *ngIf=\"colDef.formatter; else defaultCellFormattingTpl\"\r\n        [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\r\n        [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\">\r\n  </span>\r\n</ng-template>\r\n\r\n<!-- Default formatting -->\r\n<ng-template #defaultCellFormattingTpl>\r\n  <ng-container [ngSwitch]=\"colDef.type\">\r\n    <!-- Tag -->\r\n    <ng-container *ngSwitchCase=\"'tag'\">\r\n      <mat-chip-list *ngIf=\"colDef.tag && colDef.tag[_colValue]; else tagEmptyTpl\">\r\n        <mat-chip color=\"primary\" [ngClass]=\"['bg-' + colDef.tag[_colValue].color]\">\r\n          {{colDef.tag[_colValue].text}}\r\n        </mat-chip>\r\n      </mat-chip-list>\r\n      <ng-template #tagEmptyTpl>{{_colValue}}</ng-template>\r\n    </ng-container>\r\n    <!-- Buttons -->\r\n    <ng-container *ngSwitchCase=\"'button'\">\r\n      <ng-container *ngFor=\"let btn of colDef.buttons;\">\r\n        <ng-container *ngIf=\"!btn.iif || btn.iif(rowData)\">\r\n          <ng-container *ngIf=\"btn.pop; else btnDefaultTpl\">\r\n            <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n                    *ngIf=\"btn.type==='basic'\"\r\n                    mat-button\r\n                    [color]=\"btn.color || 'primary'\"\r\n                    [disabled]=\"btn.disabled\"\r\n                    [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n                    (click)=\"_handleActionConfirm($event, btn.popTitle!, btn.popDescription,\r\n                                                          btn.popOkColor, btn.popOkText,\r\n                                                          btn.popCloseColor, btn.popCloseText,\r\n                                                          btn.click, rowData)\">\r\n              <mat-icon class=\"mtx-grid-icon\" *ngIf=\"btn.icon\">{{btn.icon}}</mat-icon>\r\n              <span>{{btn.text | toObservable | async}}</span>\r\n            </button>\r\n            <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n                    *ngIf=\"!btn.type || btn.type==='icon'\"\r\n                    mat-icon-button\r\n                    [color]=\"btn.color || 'primary'\"\r\n                    [disabled]=\"btn.disabled\"\r\n                    [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n                    (click)=\"_handleActionConfirm($event, btn.popTitle!, btn.popDescription,\r\n                                                          btn.popOkColor, btn.popOkText,\r\n                                                          btn.popCloseColor, btn.popCloseText,\r\n                                                          btn.click, rowData)\">\r\n              <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\r\n            </button>\r\n          </ng-container>\r\n          <ng-template #btnDefaultTpl>\r\n            <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n                    *ngIf=\"btn.type==='basic'\"\r\n                    mat-button\r\n                    [color]=\"btn.color || 'primary'\"\r\n                    [disabled]=\"btn.disabled\"\r\n                    [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n                    (click)=\"_handleActionClick($event, btn, rowData)\">\r\n              <mat-icon class=\"mtx-grid-icon\" *ngIf=\"btn.icon\">{{btn.icon}}</mat-icon>\r\n              <span>{{btn.text | toObservable | async}}</span>\r\n            </button>\r\n            <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n                    *ngIf=\"!btn.type || btn.type==='icon'\"\r\n                    mat-icon-button\r\n                    [color]=\"btn.color || 'primary'\"\r\n                    [disabled]=\"btn.disabled\"\r\n                    [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n                    (click)=\"_handleActionClick($event, btn, rowData)\">\r\n              <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\r\n            </button>\r\n          </ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <!-- Link -->\r\n    <ng-container *ngSwitchCase=\"'link'\">\r\n      <a [href]=\"_colValue\" target=\"_blank\">{{_colValue}}</a>\r\n    </ng-container>\r\n    <!-- Image -->\r\n    <ng-container *ngSwitchCase=\"'image'\">\r\n      <img class=\"mtx-grid-img\" [src]=\"_colValue\" (click)=\"_handleImagePreview(_colValue)\">\r\n    </ng-container>\r\n    <!-- Boolean -->\r\n    <ng-container *ngSwitchCase=\"'boolean'\">\r\n      <span [title]=\"_getTooltip(_colValue)\">{{_getText(_colValue)}}</span>\r\n    </ng-container>\r\n    <!-- Number -->\r\n    <ng-container *ngSwitchCase=\"'number'\">\r\n      <span\r\n            [title]=\"_getTooltip(_colValue | number: colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)\">\r\n        {{_getText(_colValue | number: colDef.typeParameter?.digitsInfo :\r\n        colDef.typeParameter?.locale)}}\r\n      </span>\r\n    </ng-container>\r\n    <!-- Currency -->\r\n    <ng-container *ngSwitchCase=\"'currency'\">\r\n      <span\r\n            [title]=\"_getTooltip(_colValue | currency: colDef.typeParameter?.currencyCode : colDef.typeParameter?.display : colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)\">\r\n        {{_getText(_colValue | currency: colDef.typeParameter?.currencyCode :\r\n        colDef.typeParameter?.display : colDef.typeParameter?.digitsInfo :\r\n        colDef.typeParameter?.locale)}}\r\n      </span>\r\n    </ng-container>\r\n    <!-- Percent -->\r\n    <ng-container *ngSwitchCase=\"'percent'\">\r\n      <span\r\n            [title]=\"_getTooltip(_colValue | percent: colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)\">\r\n        {{_getText(_colValue | percent: colDef.typeParameter?.digitsInfo :\r\n        colDef.typeParameter?.locale)}}\r\n      </span>\r\n    </ng-container>\r\n    <!-- Date -->\r\n    <ng-container *ngSwitchCase=\"'date'\">\r\n      <span\r\n            [title]=\"_getTooltip(_colValue | date: colDef.typeParameter?.format : colDef.typeParameter?.timezone : colDef.typeParameter?.locale)\">\r\n        {{_getText(_colValue | date: colDef.typeParameter?.format : colDef.typeParameter?.timezone :\r\n        colDef.typeParameter?.locale)}}\r\n      </span>\r\n    </ng-container>\r\n    <!-- Default -->\r\n    <ng-container *ngSwitchDefault>\r\n      <span [title]=\"_getTooltip(_colValue)\">{{_getText(_colValue)}}</span>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n",
                 encapsulation: ViewEncapsulation.None,
-                styles: [".mtx-grid-action-button .mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}.mtx-grid-img{display:block;width:30px;border-radius:4px;cursor:pointer}\n"]
+                styles: [".mtx-grid-img{display:block;width:30px;border-radius:4px;cursor:pointer}\n"]
             },] }
 ];
 /**
@@ -602,7 +597,7 @@ class MtxGridColumnMenuComponent {
         this.selectable = true;
         this.selectableChecked = 'show';
         this.sortable = true;
-        this.dndSortable = true;
+        this.pinnable = true;
         this._buttonText = '';
         this.buttonType = 'stroked';
         this.buttonClass = '';
@@ -613,15 +608,28 @@ class MtxGridColumnMenuComponent {
         this.footerText = 'Columns Footer';
         this.selectionChange = new EventEmitter();
         this.sortChange = new EventEmitter();
+        this.pinChange = new EventEmitter();
+        this._pinOptions = [
+            { label: 'Pin Left', value: 'left' },
+            { label: 'Pin Right', value: 'right' },
+            { label: 'No Pin', value: null },
+        ];
     }
     get buttonText() {
         const defaultText = `Columns ${this.selectableChecked === 'show' ? 'Shown' : 'Hidden'}`;
-        const text = this._buttonText ? this._buttonText : defaultText;
-        return text;
+        return this._buttonText ? this._buttonText : defaultText;
     }
     set buttonText(value) {
         this._buttonText = value;
     }
+    get pinOptions() {
+        return this._pinOptions;
+    }
+    set pinOptions(value) {
+        if (value.length > 0) {
+            this._pinOptions = value;
+        }
+    }
     _handleDroped(event) {
         moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
         this.sortChange.emit(this.columns);
@@ -629,16 +637,22 @@ class MtxGridColumnMenuComponent {
     _handleSelection(e) {
         this.selectionChange.emit(this.columns);
     }
+    _handlePinSelect(col, val) {
+        if (col.pinned != val) {
+            col.pinned = val;
+            this.pinChange.emit(this.columns);
+        }
+    }
 }
 /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
 MtxGridColumnMenuComponent.decorators = [
     { type: Component, args: [{
                 selector: 'mtx-grid-column-menu',
                 exportAs: 'mtxGridColumnMenu',
-                template: "<ng-container [ngSwitch]=\"buttonType\">\r\n  <ng-container *ngSwitchCase=\"'raised'\">\r\n    <button [ngClass]=\"buttonClass\" mat-raised-button [color]=\"buttonColor\"\r\n            [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'stroked'\">\r\n    <button [ngClass]=\"buttonClass\" mat-stroked-button [color]=\"buttonColor\"\r\n            [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'flat'\">\r\n    <button [ngClass]=\"buttonClass\" mat-flat-button [color]=\"buttonColor\"\r\n            [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'icon'\">\r\n    <button [ngClass]=\"buttonClass\" mat-icon-button [color]=\"buttonColor\"\r\n            [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon>\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'fab'\">\r\n    <button [ngClass]=\"buttonClass\" mat-fab [color]=\"buttonColor\" [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'mini-fab'\">\r\n    <button [ngClass]=\"buttonClass\" mat-mini-fab [color]=\"buttonColor\"\r\n            [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchDefault>\r\n    <button [ngClass]=\"buttonClass\" mat-button [color]=\"buttonColor\" [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"mtx-grid-column-menu\">\r\n  <div class=\"mtx-grid-column-menu-content\"\r\n       (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\r\n    <div class=\"mtx-grid-column-menu-header\" *ngIf=\"showHeader\">\r\n      <ng-template [ngIf]=\"headerTemplate\" [ngIfElse]=\"defaultHeaderTpl\">\r\n        <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\r\n      </ng-template>\r\n      <ng-template #defaultHeaderTpl>{{headerText}}</ng-template>\r\n    </div>\r\n\r\n    <div class=\"mtx-grid-column-menu-body\">\r\n      <div class=\"mtx-grid-column-menu-list\"\r\n           cdkDropList (cdkDropListDropped)=\"_handleDroped($event)\"\r\n           *ngIf=\"sortable\">\r\n        <div class=\"mtx-grid-column-menu-item\" *ngFor=\"let col of columns\"\r\n             cdkDrag [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\">\r\n          <mat-icon cdkDragHandle>drag_handle</mat-icon>\r\n          <ng-template [ngTemplateOutlet]=\"checkboxList\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: col }\">\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"mtx-grid-column-menu-list\" *ngIf=\"!sortable\">\r\n        <div class=\"mtx-grid-column-menu-item\" *ngFor=\"let col of columns\">\r\n          <ng-template [ngTemplateOutlet]=\"checkboxList\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: col }\">\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mtx-grid-column-menu-footer\" *ngIf=\"showFooter\">\r\n      <ng-template [ngIf]=\"footerTemplate\" [ngIfElse]=\"defaultFooterTpl\">\r\n        <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\r\n      </ng-template>\r\n      <ng-template #defaultFooterTpl>{{footerText}}</ng-template>\r\n    </div>\r\n  </div>\r\n</mat-menu>\r\n\r\n<ng-template #checkboxList let-col>\r\n  <mat-checkbox class=\"mtx-grid-column-menu-item-label\"\r\n                *ngIf=\"selectable\"\r\n                [(ngModel)]=\"col[selectableChecked]\"\r\n                [disabled]=\"col.disabled\"\r\n                (change)=\"_handleSelection($event)\">\r\n    {{col.label | toObservable | async}}\r\n  </mat-checkbox>\r\n  <span class=\"mtx-grid-column-menu-item-label\" *ngIf=\"!selectable\">\r\n    {{col.label | toObservable | async}}\r\n  </span>\r\n</ng-template>\r\n",
+                template: "<ng-container [ngSwitch]=\"buttonType\">\r\n  <ng-container *ngSwitchCase=\"'raised'\">\r\n    <button [ngClass]=\"buttonClass\" mat-raised-button [color]=\"buttonColor\"\r\n            [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'stroked'\">\r\n    <button [ngClass]=\"buttonClass\" mat-stroked-button [color]=\"buttonColor\"\r\n            [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'flat'\">\r\n    <button [ngClass]=\"buttonClass\" mat-flat-button [color]=\"buttonColor\"\r\n            [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'icon'\">\r\n    <button [ngClass]=\"buttonClass\" mat-icon-button [color]=\"buttonColor\"\r\n            [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon>\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'fab'\">\r\n    <button [ngClass]=\"buttonClass\" mat-fab [color]=\"buttonColor\" [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'mini-fab'\">\r\n    <button [ngClass]=\"buttonClass\" mat-mini-fab [color]=\"buttonColor\"\r\n            [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchDefault>\r\n    <button [ngClass]=\"buttonClass\" mat-button [color]=\"buttonColor\" [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"mtx-grid-column-menu\">\r\n  <div class=\"mtx-grid-column-menu-content\"\r\n       (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\r\n    <div class=\"mtx-grid-column-menu-header\" *ngIf=\"showHeader\">\r\n      <ng-template [ngIf]=\"headerTemplate\" [ngIfElse]=\"defaultHeaderTpl\">\r\n        <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\r\n      </ng-template>\r\n      <ng-template #defaultHeaderTpl>{{headerText}}</ng-template>\r\n    </div>\r\n\r\n    <div class=\"mtx-grid-column-menu-body\">\r\n      <div class=\"mtx-grid-column-menu-list\" *ngIf=\"sortable\"\r\n           cdkDropList (cdkDropListDropped)=\"_handleDroped($event)\">\r\n        <div class=\"mtx-grid-column-menu-item\" *ngFor=\"let col of columns\"\r\n             cdkDrag [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\">\r\n          <svg class=\"mtx-grid-icon mtx-grid-column-drag-handle-icon\" viewBox=\"0 0 24 24\"\r\n               width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n            <path\r\n                  d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\">\r\n            </path>\r\n          </svg>\r\n          <ng-template [ngTemplateOutlet]=\"checkboxList\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: col }\">\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"mtx-grid-column-menu-list\" *ngIf=\"!sortable\">\r\n        <div class=\"mtx-grid-column-menu-item\" *ngFor=\"let col of columns\">\r\n          <ng-template [ngTemplateOutlet]=\"checkboxList\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: col }\">\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mtx-grid-column-menu-footer\" *ngIf=\"showFooter\">\r\n      <ng-template [ngIf]=\"footerTemplate\" [ngIfElse]=\"defaultFooterTpl\">\r\n        <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\r\n      </ng-template>\r\n      <ng-template #defaultFooterTpl>{{footerText}}</ng-template>\r\n    </div>\r\n  </div>\r\n</mat-menu>\r\n\r\n<ng-template #checkboxList let-col>\r\n  <ng-container *ngIf=\"pinnable\">\r\n    <button class=\"mtx-grid-column-pin-button\" mat-icon-button [matMenuTriggerFor]=\"pinList\">\r\n      <svg class=\"mtx-grid-icon mtx-grid-column-pin-icon\" *ngIf=\"col.pinned\"\r\n           viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n        <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\r\n      </svg>\r\n      <svg class=\"mtx-grid-icon mtx-grid-column-pin-off-icon\" *ngIf=\"!col.pinned\"\r\n           viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n        <path\r\n              d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\" />\r\n      </svg>\r\n    </button>\r\n    <mat-menu #pinList=\"matMenu\" class=\"mtx-grid-column-pin-list\">\r\n      <button class=\"mtx-grid-column-pin-option\" *ngFor=\"let item of pinOptions\" mat-menu-item\r\n              (click)=\"_handlePinSelect(col, item.value)\">\r\n        <span class=\"mtx-grid-column-pin-option-placeholder\">\r\n          <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\r\n          <svg class=\"mtx-grid-icon mtx-grid-column-pin-check-icon\" *ngIf=\"col.pinned==item.value\"\r\n               viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n            <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\r\n          </svg>\r\n        </span>\r\n        <span class=\"mtx-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\r\n      </button>\r\n    </mat-menu>\r\n  </ng-container>\r\n\r\n  <mat-checkbox class=\"mtx-grid-column-menu-item-label\" *ngIf=\"selectable\"\r\n                [(ngModel)]=\"col[selectableChecked]\" [disabled]=\"col.disabled\"\r\n                (change)=\"_handleSelection($event)\">\r\n    {{col.header | toObservable | async}}\r\n  </mat-checkbox>\r\n  <span class=\"mtx-grid-column-menu-item-label\" *ngIf=\"!selectable\">\r\n    {{col.header | toObservable | async}}\r\n  </span>\r\n</ng-template>\r\n",
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".mtx-grid-column-menu .mat-menu-content{padding:0}.mtx-grid-column-menu-body{padding:16px}.mtx-grid-column-menu-header,.mtx-grid-column-menu-footer{position:sticky;z-index:1;padding:8px 16px}.mtx-grid-column-menu-header{top:0}.mtx-grid-column-menu-footer{bottom:0}.mtx-grid-column-menu-list{display:block;max-width:100%}.mtx-grid-column-menu-list.cdk-drop-list-dragging .mtx-grid-column-menu-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-menu-list.cdk-drop-list .mtx-grid-column-menu-item-label{padding:0 4px}.mtx-grid-column-menu-item{display:flex;flex-direction:row;align-items:center;padding:4px 0}.mtx-grid-column-menu-item.cdk-drag-disabled .cdk-drag-handle{opacity:.35;cursor:no-drop}.mtx-grid-column-menu-item .cdk-drag-handle{cursor:move}.mtx-grid-column-menu-item.cdk-drag-preview{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.mtx-grid-column-menu-item.cdk-drag-placeholder{opacity:0}.mtx-grid-column-menu-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"]
+                styles: [".mtx-grid-column-menu .mat-menu-content{padding:0}.mtx-grid-column-menu-body{padding:8px 16px}.mtx-grid-column-menu-header,.mtx-grid-column-menu-footer{position:sticky;z-index:1;padding:8px 16px}.mtx-grid-column-menu-header{top:0}.mtx-grid-column-menu-footer{bottom:0}.mtx-grid-column-menu-list{display:block;max-width:100%}.mtx-grid-column-menu-list.cdk-drop-list-dragging .mtx-grid-column-menu-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-menu-list.cdk-drop-list .mtx-grid-column-menu-item-label{padding:0 4px}.mtx-grid-column-menu-item{display:flex;flex-direction:row;align-items:center}.mtx-grid-column-menu-item.cdk-drag-disabled .cdk-drag-handle{opacity:.35;cursor:no-drop}.mtx-grid-column-menu-item .cdk-drag-handle{cursor:move}.mtx-grid-column-menu-item.cdk-drag-preview{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.mtx-grid-column-menu-item.cdk-drag-placeholder{opacity:0}.mtx-grid-column-menu-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-pin-button.mat-icon-button{width:32px;height:32px;line-height:32px}.mtx-grid-column-pin-option.mat-menu-item{display:flex;align-items:center;height:32px}.mtx-grid-column-pin-option-placeholder{display:inline-block;width:20px;height:20px;line-height:20px}.mtx-grid-column-pin-option-text{padding:0 8px}.mtx-grid-column-drag-handle-icon:hover{cursor:move}\n"]
             },] }
 ];
 /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
@@ -649,7 +663,7 @@ MtxGridColumnMenuComponent.propDecorators = {
     selectable: [{ type: Input }],
     selectableChecked: [{ type: Input }],
     sortable: [{ type: Input }],
-    dndSortable: [{ type: Input }],
+    pinnable: [{ type: Input }],
     buttonText: [{ type: Input }],
     buttonType: [{ type: Input }],
     buttonColor: [{ type: Input }],
@@ -662,7 +676,9 @@ MtxGridColumnMenuComponent.propDecorators = {
     footerText: [{ type: Input }],
     footerTemplate: [{ type: Input }],
     selectionChange: [{ type: Output }],
-    sortChange: [{ type: Output }]
+    sortChange: [{ type: Output }],
+    pinChange: [{ type: Output }],
+    pinOptions: [{ type: Input }]
 };
 
 class MtxGridExpansionToggleDirective {