@theseam/ui-common 0.3.14-beta.2 → 0.3.15-beta.1

package/fesm2015/theseam-ui-common-datatable-dynamic.mjs

@@ -0,0 +1,998 @@
+import { __decorate, __param, __awaiter } from 'tslib';
+import * as i0 from '@angular/core';
+import { Injectable, Inject, Attribute, isDevMode, Directive, Input, Component, ChangeDetectionStrategy, InjectionToken, Optional, NgModule } from '@angular/core';
+import { BehaviorSubject, of, combineLatest, from, ReplaySubject, Subscription, fromEvent } from 'rxjs';
+import { map, shareReplay, switchMap, toArray, tap, catchError, mapTo, concatMap, filter } from 'rxjs/operators';
+import { faEllipsisH } from '@fortawesome/free-solid-svg-icons';
+import { notNullOrUndefined, hasProperty, toggleAttribute, getAttribute } from '@theseam/ui-common/utils';
+import * as i1 from '@theseam/ui-common/dynamic';
+import { THESEAM_DATA_EXPORTER, TheSeamDataExporterModule } from '@theseam/ui-common/data-exporter';
+import { THESEAM_DATA_FILTER_DEF, THESEAM_DATA_FILTER_OPTIONS, TheSeamDataFiltersModule } from '@theseam/ui-common/data-filters';
+import * as i3$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i4 from '@theseam/ui-common/icon';
+import { TheSeamIconModule } from '@theseam/ui-common/icon';
+import * as i5 from '@theseam/ui-common/menu';
+import { TheSeamMenuModule } from '@theseam/ui-common/menu';
+import * as i3 from '@angular/router';
+import { RouterLinkWithHref, RouterLink, RouterModule } from '@angular/router';
+import * as i2 from '@theseam/ui-common/asset-reader';
+import * as i1$1 from '@angular/cdk/portal';
+import { ComponentPortal, PortalInjector, PortalModule } from '@angular/cdk/portal';
+import * as i2$1 from '@theseam/ui-common/dynamic-component-loader';
+import * as i4$1 from '@theseam/ui-common/datatable';
+import { TheSeamDatatableModule } from '@theseam/ui-common/datatable';
+import { TheSeamButtonsModule } from '@theseam/ui-common/buttons';
+import { TheSeamSharedModule } from '@theseam/ui-common/shared';
+import { TheSeamTableCellTypesModule } from '@theseam/ui-common/table-cell-types';
+
+function setDynamicDatatableColumnsDefaults(columns) {
+    for (const col of columns) {
+        if (!col.cellType) {
+            col.cellType = 'string';
+        }
+    }
+}
+
+function setDynamicDatatableFilterMenuDefaults(filterMenu) {
+    if (!filterMenu.state) {
+        filterMenu.state = 'default';
+    }
+}
+
+function setDynamicDatatableOptionsDefaults(options) {
+    if (options.virtualization === undefined || options.virtualization === null) {
+        options.virtualization = true;
+    }
+}
+
+function setDynamicDatatableDefDefaults(def) {
+    setDynamicDatatableColumnsDefaults(def.columns);
+    if (def.filterMenu) {
+        setDynamicDatatableFilterMenuDefaults(def.filterMenu);
+    }
+    if (def.options) {
+        setDynamicDatatableOptionsDefaults(def.options);
+    }
+}
+
+/**
+ * Manages the data defined in the `DatatableDynamicDef`. Simplifies accessing
+ * and observing the needed data based on the `DatatableDynamicDef`.
+ */
+class DynamicDatatableDefService {
+    constructor(dataExporters, dataFilters, _valueHelper) {
+        this._valueHelper = _valueHelper;
+        /** @ignore */
+        this._defSubject = new BehaviorSubject(undefined);
+        this._dataExporters = (dataExporters || []);
+        this._dataFilters = (dataFilters || []);
+        this.def$ = this._defSubject.asObservable();
+        this.exporters$ = this.def$.pipe(map(def => def ? this._mapExporters(def) : []), shareReplay({ bufferSize: 1, refCount: true }));
+        this.filterMenuItems$ = this.def$.pipe(map(def => def ? this._mapFilterMenuItems(def) : []), shareReplay({ bufferSize: 1, refCount: true }));
+        this.hasFilterMenu$ = this.def$.pipe(switchMap(def => {
+            if (!def) {
+                return of(false);
+            }
+            // Check if the visibility can be determined by the state value only.
+            if (def.filterMenu && def.filterMenu.state) {
+                switch (def.filterMenu.state) {
+                    case 'always-visible': return of(true);
+                    case 'hidden': return of(false);
+                }
+            }
+            // Check if there is anything to put in the filter menu.
+            return combineLatest([
+                this.exporters$.pipe(map(e => e.length > 0)),
+                this.filterMenuItems$.pipe(map(f => f.length > 0))
+            ]).pipe(map(v => v.indexOf(true) !== -1));
+        }), shareReplay({ bufferSize: 1, refCount: true }));
+        this.options$ = this.def$.pipe(map(def => def ? def.options : undefined), shareReplay({ bufferSize: 1, refCount: true }));
+        this.menuBar$ = this.def$.pipe(map(def => (notNullOrUndefined(def) && hasProperty(def, 'menuBar')) ? def.menuBar : undefined), 
+        // tap(v => console.log('menubar', v)),
+        shareReplay({ bufferSize: 1, refCount: true }));
+    }
+    /** Sets the `DatatableDynamicDef` that defines the datatable.  */
+    setDef(def) {
+        if (def) {
+            setDynamicDatatableDefDefaults(def);
+        }
+        this._defSubject.next(def || undefined);
+    }
+    /** Map the def exporters to the provided `IDataExporter` objects. */
+    _mapExporters(def) {
+        if (!def.filterMenu || !Array.isArray(def.filterMenu.exporters)) {
+            return [];
+        }
+        return def.filterMenu.exporters
+            .map(e => this._dataExporters.find(de => de.name === e))
+            .filter(notNullOrUndefined);
+    }
+    /** Map the def filter menu items to provided components. */
+    _mapFilterMenuItems(def) {
+        if (!def.filterMenu || !def.filterMenu.filters || !Array.isArray(def.filterMenu.filters)) {
+            return [];
+        }
+        return def.filterMenu.filters
+            .map(f => {
+            const _df = this._dataFilters.find(df => df.name === f.name);
+            if (_df) {
+                return Object.assign(Object.assign({}, f), { component: _df.component });
+            }
+        })
+            .filter(notNullOrUndefined);
+    }
+}
+DynamicDatatableDefService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicDatatableDefService, deps: [{ token: THESEAM_DATA_EXPORTER }, { token: THESEAM_DATA_FILTER_DEF }, { token: i1.DynamicValueHelperService }], target: i0.ɵɵFactoryTarget.Injectable });
+DynamicDatatableDefService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicDatatableDefService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicDatatableDefService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [THESEAM_DATA_EXPORTER]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [THESEAM_DATA_FILTER_DEF]
+                    }] }, { type: i1.DynamicValueHelperService }];
+    } });
+
+class DynamicDatatableRowActionsService {
+    constructor(_valueHelper, _dynamicDef) {
+        this._valueHelper = _valueHelper;
+        this._dynamicDef = _dynamicDef;
+    }
+    /**
+     * Observe actions for specified row
+     */
+    rowActions(row) {
+        return this._dynamicDef.def$.pipe(map(def => (def && def.rowActions) ? def.rowActions || [] : []), switchMap(rowActions => rowActions
+            ? from(rowActions).pipe(map(rowAction => {
+                if (Object.prototype.hasOwnProperty.call(rowAction, 'hidden')) {
+                    if (typeof rowAction.hidden === 'boolean') {
+                        return rowAction.hidden ? undefined : rowAction;
+                    }
+                    else {
+                        const context = this._getRowActionContext(row, rowAction);
+                        // TODO: Fix async eval
+                        const isHidden = this._valueHelper.evalSync(rowAction.hidden, context);
+                        return isHidden ? undefined : rowAction;
+                    }
+                }
+                return rowAction;
+            }), toArray(), map(v => v.filter(notNullOrUndefined)))
+            : of([])));
+    }
+    /** @ignore */
+    _getRowActionContext(row, rowActionDef) {
+        return {
+            row
+        };
+    }
+}
+DynamicDatatableRowActionsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicDatatableRowActionsService, deps: [{ token: i1.DynamicValueHelperService }, { token: DynamicDatatableDefService }], target: i0.ɵɵFactoryTarget.Injectable });
+DynamicDatatableRowActionsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicDatatableRowActionsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicDatatableRowActionsService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.DynamicValueHelperService }, { type: DynamicDatatableDefService }]; } });
+
+/**
+ * Class to act as a substitute to `routerLink` directive until the menu items
+ * can be dynamically built in a clean way with or without `routerLink`.
+ */
+let DatatableDynamicActionMenuItemRouterLink = class DatatableDynamicActionMenuItemRouterLink {
+    constructor(router, route, tabIndex, renderer, el, locationStrategy) {
+        this.router = router;
+        this.route = route;
+        this.renderer = renderer;
+        this.el = el;
+        this.locationStrategy = locationStrategy;
+        if (el.nativeElement.nodeName.toLowerCase() === 'a') {
+            this._rLinkWithHref = new RouterLinkWithHref(router, route, '0', // TODO: Fix type.
+            renderer, el.nativeElement, locationStrategy);
+            // console.log('rLinkWithHref', this.rLinkWithHref)
+            this._rLinkClickEventListener = this.el.nativeElement.addEventListener('click', (event) => {
+                // console.log('this._rLinkWithHref', this._rLinkWithHref, this._rLinkWithHref && this._rLinkWithHref.href)
+                if (this._rLinkWithHref) {
+                    return this._rLinkWithHref.onClick(event.button, event.ctrlKey, event.shiftKey, event.altKey, event.metaKey);
+                }
+            });
+        }
+        else {
+            this._rLink = new RouterLink(router, route, tabIndex, renderer, el);
+            // console.log('rLink', this.rLink)
+            this._rLinkClickEventListener = this.el.nativeElement.addEventListener('click', () => {
+                // console.log('this._rLink', this._rLink && this._rLink.urlTree)
+                if (this._rLink) {
+                    return this._rLink.onClick();
+                }
+            });
+            // this._clickSubscription = fromEvent(el.nativeElement, 'click')
+            //   .subscribe(() => {
+            //     if (this._rLink) {
+            //       this._rLink.onClick()
+            //     } else {
+            //       if (this._clickSubscription && !this._clickSubscription.closed) {
+            //         this._clickSubscription.unsubscribe()
+            //       }
+            //     }
+            //   })
+        }
+    }
+    get routerLink() { return this._rLink; }
+    get routerLinkWithHref() { return this._rLinkWithHref; }
+    set routerLinkInput(commands) {
+        if (this._rLink) {
+            this._rLink.routerLink = commands;
+        }
+        else if (this._rLinkWithHref) {
+            this._rLinkWithHref.routerLink = commands;
+        }
+    }
+    set queryParams(value) {
+        if (this._rLink) {
+            this._rLink.queryParams = value;
+        }
+        else if (this._rLinkWithHref) {
+            this._rLinkWithHref.queryParams = value;
+        }
+    }
+    set fragment(value) {
+        if (this._rLink) {
+            this._rLink.fragment = value;
+        }
+        else if (this._rLinkWithHref) {
+            this._rLinkWithHref.fragment = value;
+        }
+    }
+    set queryParamsHandling(value) {
+        if (this._rLink) {
+            this._rLink.queryParamsHandling = value;
+        }
+        else if (this._rLinkWithHref) {
+            this._rLinkWithHref.queryParamsHandling = value;
+        }
+    }
+    set preserveFragment(value) {
+        if (this._rLink) {
+            this._rLink.preserveFragment = value;
+        }
+        else if (this._rLinkWithHref) {
+            this._rLinkWithHref.preserveFragment = value;
+        }
+    }
+    set skipLocationChange(value) {
+        if (this._rLink) {
+            this._rLink.skipLocationChange = value;
+        }
+        else if (this._rLinkWithHref) {
+            this._rLinkWithHref.skipLocationChange = value;
+        }
+    }
+    set replaceUrl(value) {
+        if (this._rLink) {
+            this._rLink.replaceUrl = value;
+        }
+        else if (this._rLinkWithHref) {
+            this._rLinkWithHref.replaceUrl = value;
+        }
+    }
+    set state(value) {
+        if (this._rLink) {
+            this._rLink.state = value;
+        }
+        else if (this._rLinkWithHref) {
+            this._rLinkWithHref.state = value;
+        }
+    }
+    set target(value) {
+        if (this._rLinkWithHref) {
+            this._rLinkWithHref.target = value;
+            if (value) {
+                this.renderer.setAttribute(this.el.nativeElement, 'target', value);
+            }
+            else {
+                toggleAttribute(this.el.nativeElement, 'target', false);
+            }
+        }
+    }
+    destroy() {
+        // if (this._clickSubscription && !this._clickSubscription.closed) {
+        //   this._clickSubscription.unsubscribe()
+        // }
+        if (this._rLinkClickEventListener) {
+            this.el.nativeElement.removeEventListener('click', this._rLinkClickEventListener);
+            this._rLinkClickEventListener = null;
+        }
+        if (this._rLinkWithHref && this._rLinkWithHref.ngOnDestroy) {
+            this._rLinkWithHref.ngOnDestroy();
+        }
+    }
+};
+DatatableDynamicActionMenuItemRouterLink = __decorate([
+    __param(2, Attribute('tabindex'))
+], DatatableDynamicActionMenuItemRouterLink);
+// TODO: Refactor this directive. It got way more complex instead of more
+// simplified like it was supposed to be.
+class DatatableDynamicActionMenuItemDirective {
+    set seamDatatableDynamicActionMenuItem(value) {
+        this._record.next(value);
+    }
+    constructor(_elementRef, _renderer, _valueHelper, _actionHelper, _assetReaderHelper, _router, _route, _locationStrategy) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+        this._valueHelper = _valueHelper;
+        this._actionHelper = _actionHelper;
+        this._assetReaderHelper = _assetReaderHelper;
+        this._router = _router;
+        this._route = _route;
+        this._locationStrategy = _locationStrategy;
+        this._record = new ReplaySubject(1);
+        this._recordSubscription = Subscription.EMPTY;
+        this._recordSubscription = this._record.pipe(
+        // tap(v => console.log('record', v)),
+        switchMap(record => this._update(record)), tap(() => { this._setInvalidActionState(false); }), catchError(error => {
+            // eslint-disable-next-line no-console
+            if (isDevMode()) {
+                console.error(error);
+            }
+            this._setInvalidActionState(true);
+            return of(undefined);
+        })).subscribe();
+    }
+    ngOnDestroy() {
+        this._recordSubscription.unsubscribe();
+        this._unsubClick();
+        if (this._menuRouterLink && this._menuRouterLink.routerLinkWithHref) {
+            this._menuRouterLink.routerLinkWithHref.ngOnDestroy();
+        }
+    }
+    ngOnChanges(changes) {
+        // console.log('ngOnChanges', changes, this, this._menuRouterLink)
+        if (this._menuRouterLink && this._menuRouterLink.routerLinkWithHref) {
+            this._menuRouterLink.routerLinkWithHref.ngOnChanges({});
+            if (this._menuRouterLink.routerLinkWithHref.href) {
+                if (getAttribute(this._elementRef.nativeElement, 'href') !== this._menuRouterLink.routerLinkWithHref.href) {
+                    this._renderer.setAttribute(this._elementRef.nativeElement, 'href', this._menuRouterLink.routerLinkWithHref.href);
+                }
+            }
+            else {
+                toggleAttribute(this._elementRef.nativeElement, 'href', false);
+            }
+        }
+    }
+    _update(record) {
+        this._unsubClick();
+        return from(this._getUiProps(record)).pipe(switchMap(uiProps => this._isAnchor()
+            ? this._updateAnchorElement(record, uiProps)
+            : this._updateButtonElement(record, uiProps)));
+    }
+    _updateAnchorElement(record, uiProps) {
+        const _stream = of(undefined);
+        switch (uiProps.triggerType) {
+            case 'link': {
+                // console.log('Handle "link" triggerType.', uiProps)
+                // this._tryInitTabIndex()
+                this._tryInitBlockClick(record, uiProps);
+                this._initMenuItemRouterLink(record, uiProps);
+                break;
+            }
+            case 'link-external': {
+                // console.log('Handle "link-external" triggerType.', uiProps)
+                // this._tryInitTabIndex()
+                this._tryInitBlockClick(record, uiProps);
+                if (hasProperty(uiProps, 'linkUrl')) {
+                    this._setAttr('href', uiProps.linkUrl);
+                }
+                if (hasProperty(uiProps, 'linkExtras')) {
+                    if (hasProperty(uiProps.linkExtras, 'target')) {
+                        this._setAttr('target', uiProps.linkExtras.target);
+                    }
+                }
+                // TODO: Consider making the ItemRouterLink work with external urls.
+                // this._initMenuItemRouterLink(record, uiProps)
+                break;
+            }
+            // TODO: Unless we decide to add a route for openning assets, this would
+            // be confusing to a user.
+            // case 'link-asset': {
+            //   console.log('Handle "link-asset" triggerType.', uiProps)
+            //   // this._tryInitTabIndex()
+            //   this._tryInitBlockClick(record, uiProps)
+            //   break
+            // }
+            default: throw Error('[DatatableDynamicActionMenuItemDirective] ' +
+                `triggerType ${uiProps.triggerType} is not valid for _updateAnchorElement().`);
+        }
+        return _stream; // .pipe(mapTo(undefined))
+    }
+    _updateButtonElement(record, uiProps) {
+        let _stream = of(undefined);
+        // this._updateClickElement(record, uiProps as DynamicActionUiButtonDef)
+        switch (uiProps.triggerType) {
+            case 'link-asset': {
+                // console.log('Handle "link-asset" triggerType.', uiProps)
+                // this._tryInitTabIndex()
+                this._tryInitBlockClick(record, uiProps);
+                _stream = _stream.pipe(switchMap(() => this._updateAssetElement(record, uiProps)));
+                break;
+            }
+            case 'click': {
+                // console.log('Handle "click" triggerType.', uiProps)
+                this._tryInitBlockClick(record, uiProps);
+                _stream = _stream.pipe(switchMap(() => this._updateClickElement(record, uiProps)));
+                break;
+            }
+            default: throw Error('[DatatableDynamicActionMenuItemDirective] ' +
+                `triggerType ${uiProps.triggerType} is not valid for _updateAnchorElement().`);
+        }
+        return _stream; // .pipe(mapTo(undefined))
+    }
+    _updateAssetElement(record, uiProps) {
+        // console.log('_updateAssetElement')
+        // return of(undefined)
+        // console.log('this._elementRef.nativeElement', this._elementRef.nativeElement)
+        const t = fromEvent(this._elementRef.nativeElement, 'click').pipe(tap(event => {
+            // const _context = this._getContext(record._row, record.rowAction)
+            // const context = { ..._context, event, uiProps }
+            // const result = this._valueHelper.evalSync(uiProps.blockClickExpr, context)
+            // console.log(record, uiProps)
+            // console.log('_updateClickElement click', (<any>event).button, event)
+            if (this._assetReaderHelper) {
+                if (uiProps.triggerType === 'link-asset' && hasProperty(uiProps, 'linkUrl')) {
+                    const url = uiProps.linkUrl;
+                    let target;
+                    if (hasProperty(uiProps, 'linkExtras') && hasProperty(uiProps.linkExtras, 'target')) {
+                        target = uiProps.linkExtras.target;
+                    }
+                    this._assetReaderHelper.openLink(url, true, true, target);
+                }
+            }
+            // if (!result) {
+            //   event.preventDefault()
+            //   event.stopPropagation()
+            // }
+        }), mapTo(undefined));
+        return of(undefined).pipe(
+        // tap(() => console.log('starting _updateButtonElement')),
+        switchMap(() => t));
+    }
+    _updateClickElement(record, uiProps) {
+        // console.log('_updateClickElement', record, uiProps)
+        // return of(undefined)
+        return fromEvent(this._elementRef.nativeElement, 'click').pipe(switchMap(event => {
+            const _context = this._getContext(record._row, record.rowAction);
+            const context = Object.assign(Object.assign({}, _context), { event, uiProps });
+            // console.log('click', (<any>event).button, event)
+            // if (!result) {
+            //   event.preventDefault()
+            //   event.stopPropagation()
+            // }
+            return this._actionHelper.exec(uiProps._actionDef, context);
+        }), mapTo(undefined));
+    }
+    _unsubClick() {
+        if (this._clickSubscription && !this._clickSubscription.closed) {
+            this._clickSubscription.unsubscribe();
+        }
+    }
+    _setAttr(attr, value) {
+        this._renderer.setAttribute(this._elementRef.nativeElement, attr, value);
+    }
+    _tryInitTabIndex() {
+        if (getAttribute(this._elementRef.nativeElement, 'tabindex') === null) {
+            this._renderer.setAttribute(this._elementRef.nativeElement, 'tabindex', '0');
+        }
+    }
+    _tryInitBlockClick(record, uiProps) {
+        this._unsubClick();
+        if (hasProperty(uiProps, 'blockClickExpr')) {
+            this._clickSubscription = this._blockClickExprObservable(uiProps, record).subscribe();
+        }
+    }
+    _blockClickExprObservable(uiProps, record) {
+        return fromEvent(this._elementRef.nativeElement, 'click').pipe(tap(event => {
+            const _context = this._getContext(record._row, record.rowAction);
+            const context = Object.assign(Object.assign({}, _context), { event, uiProps });
+            const result = this._valueHelper.evalSync(uiProps.blockClickExpr, context);
+            // console.log('click', result, (<any>event).button, event)
+            if (!result) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        }), mapTo(undefined));
+    }
+    _initMenuItemRouterLink(record, uiProps) {
+        this._menuRouterLink = new DatatableDynamicActionMenuItemRouterLink(this._router, this._route, getAttribute(this._elementRef.nativeElement, 'tabindex'), this._renderer, this._elementRef, this._locationStrategy);
+        // console.log(this._menuRouterLink)
+        this._menuRouterLink.routerLinkInput = uiProps.linkUrl;
+        if (hasProperty(uiProps, 'linkExtras')) {
+            if (hasProperty(uiProps.linkExtras, 'target')) {
+                this._menuRouterLink.target = uiProps.linkExtras.target;
+            }
+            if (hasProperty(uiProps.linkExtras, 'queryParams')) {
+                this._menuRouterLink.queryParams = uiProps.linkExtras.queryParams;
+            }
+            if (hasProperty(uiProps.linkExtras, 'fragment')) {
+                this._menuRouterLink.fragment = uiProps.linkExtras.fragment;
+            }
+            if (hasProperty(uiProps.linkExtras, 'queryParamsHandling')) {
+                this._menuRouterLink.queryParamsHandling = uiProps.linkExtras.queryParamsHandling;
+            }
+            if (hasProperty(uiProps.linkExtras, 'preserveFragment')) {
+                this._menuRouterLink.preserveFragment = uiProps.linkExtras.preserveFragment;
+            }
+            if (hasProperty(uiProps.linkExtras, 'skipLocationChange')) {
+                this._menuRouterLink.skipLocationChange = uiProps.linkExtras.skipLocationChange;
+            }
+            if (hasProperty(uiProps.linkExtras, 'replaceUrl')) {
+                this._menuRouterLink.replaceUrl = uiProps.linkExtras.replaceUrl;
+            }
+            if (hasProperty(uiProps.linkExtras, 'state')) {
+                this._menuRouterLink.state = uiProps.linkExtras.state;
+            }
+        }
+        this.ngOnChanges({});
+    }
+    _isAnchor() {
+        return this._elementRef.nativeElement.nodeName.toLowerCase() === 'a';
+    }
+    _getUiProps(record) {
+        const context = this._getContext(record._row, record.rowAction);
+        return this._actionHelper.getUiProps(record.rowAction.action, context);
+    }
+    /** @ignore */
+    _getContext(row, rowActionDef) {
+        return {
+            row
+        };
+    }
+    _setInvalidActionState(invalid = false) {
+        const element = this._elementRef.nativeElement;
+        toggleAttribute(element, 'disabled', invalid);
+    }
+}
+DatatableDynamicActionMenuItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DatatableDynamicActionMenuItemDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.DynamicValueHelperService }, { token: i1.DynamicActionHelperService }, { token: i2.AssetReaderHelperService }, { token: i3.Router }, { token: i3.ActivatedRoute }, { token: i3$1.LocationStrategy }], target: i0.ɵɵFactoryTarget.Directive });
+DatatableDynamicActionMenuItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DatatableDynamicActionMenuItemDirective, selector: "[seamDatatableDynamicActionMenuItem]", inputs: { seamDatatableDynamicActionMenuItem: "seamDatatableDynamicActionMenuItem" }, exportAs: ["seamDatatableDynamicActionMenuItem"], usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DatatableDynamicActionMenuItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamDatatableDynamicActionMenuItem]',
+                    exportAs: 'seamDatatableDynamicActionMenuItem'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.DynamicValueHelperService }, { type: i1.DynamicActionHelperService }, { type: i2.AssetReaderHelperService }, { type: i3.Router }, { type: i3.ActivatedRoute }, { type: i3$1.LocationStrategy }]; }, propDecorators: { seamDatatableDynamicActionMenuItem: [{
+                type: Input
+            }] } });
+
+class DatatableDynamicActionMenuComponent {
+    get row() { return this._row.value; }
+    set row(value) {
+        this._row.next(value || undefined);
+    }
+    get actionDefs() { return this._actionDefs.value; }
+    set actionDefs(value) {
+        this._actionDefs.next(value || []);
+    }
+    constructor(_valueHelper, _dynamicRowActions) {
+        this._valueHelper = _valueHelper;
+        this._dynamicRowActions = _dynamicRowActions;
+        this.faEllipsisH = faEllipsisH;
+        this._row = new BehaviorSubject(undefined);
+        this._actionDefs = new BehaviorSubject([]);
+        /** @ignore */
+        this._actionMenuPositions = [
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'end',
+                overlayY: 'top',
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'end',
+                overlayY: 'bottom',
+            },
+            {
+                originX: 'end',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+            },
+            {
+                originX: 'end',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+            },
+        ];
+        // this._menuRecords$ = combineLatest([ this._row, this._actionDefs ]).pipe(
+        //   switchMap(([ row, actionDefs ]) => !!row ? this._mapRecords(row, actionDefs) : of([]))
+        // )
+        this._menuRecords$ = this._row.pipe(switchMap(row => row
+            ? this._dynamicRowActions.rowActions(row).pipe(switchMap(actionDefs => this._mapRecords(row, actionDefs)))
+            : of([])));
+        // this._menuRecords$.subscribe()
+    }
+    // TODO: Consider moving this to `DynamicDatatableRowActionsService`.
+    _mapRecords(row, actionDefs) {
+        return from(actionDefs).pipe(concatMap(actionDef => {
+            return (() => __awaiter(this, void 0, void 0, function* () {
+                const _rowAction = Object.assign({}, actionDef);
+                const context = this._getRowActionContext(row, actionDef);
+                if (hasProperty(_rowAction, 'hidden')) {
+                    _rowAction.hidden = yield this._valueHelper.eval(_rowAction.hidden, context);
+                    if (_rowAction.hidden) {
+                        return undefined;
+                    }
+                }
+                _rowAction.label = yield this._valueHelper.eval(actionDef.label, context);
+                if (hasProperty(_rowAction, 'disabled')) {
+                    _rowAction.disabled = yield this._valueHelper.eval(_rowAction.disabled, context);
+                }
+                const record = {
+                    _row: row,
+                    _def: actionDef,
+                    rowAction: _rowAction,
+                    elementType: this._expectedElementType(actionDef)
+                };
+                return record;
+            }))();
+        }), filter(notNullOrUndefined), toArray());
+    }
+    /** @ignore */
+    _getRowActionContext(row, rowActionDef) {
+        return {
+            row
+        };
+    }
+    _expectedElementType(def) {
+        const action = def.action;
+        if (action.type === 'link') {
+            if (hasProperty(action, 'asset')) {
+                return 'button';
+            }
+            return 'a';
+        }
+        return 'button';
+    }
+}
+DatatableDynamicActionMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DatatableDynamicActionMenuComponent, deps: [{ token: i1.DynamicValueHelperService }, { token: DynamicDatatableRowActionsService }], target: i0.ɵɵFactoryTarget.Component });
+DatatableDynamicActionMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DatatableDynamicActionMenuComponent, selector: "seam-datatable-dynamic-action-menu", inputs: { row: "row", actionDefs: "actionDefs" }, ngImport: i0, template: "<seam-menu #menu\n  menuClass=\"list-group py-0 border-0 seam-datatable-action-menu\"\n  animationType=\"fade\">\n\n  <ng-container *ngFor=\"let record of _menuRecords$ | async\">\n\n    <a *ngIf=\"record.elementType === 'a'\"\n      seamMenuItem\n      [seamDatatableDynamicActionMenuItem]=\"record\"\n      class=\"list-group-item list-group-item-action py-1\">{{ record.rowAction.label }}</a>\n\n    <button *ngIf=\"record.elementType === 'button'\"\n      seamMenuItem\n      [seamDatatableDynamicActionMenuItem]=\"record\"\n      type=\"button\"\n      class=\"list-group-item list-group-item-action py-1\">{{ record.rowAction.label }}</button>\n\n  </ng-container>\n\n    <!-- <ng-container *ngIf=\"(item.routerLink || item.href) && !item.confirmDialog; else noRouterLink\">\n      <a *ngIf=\"item.href; else noHref\"\n        seamMenuItem\n        class=\"list-group-item list-group-item-action py-1\"\n        [attr.href]=\"item.href\"\n        [target]=\"item.target\"\n        (click)=\"activateItem($event, item)\">\n        {{ item.label }}\n      </a>\n      <ng-template #noHref>\n        <a seamMenuItem\n          class=\"list-group-item list-group-item-action py-1\"\n          [queryParams]=\"item.queryParams\"\n          [fragment]=\"item.fragment\"\n          [queryParamsHandling]=\"item.queryParamsHandling\"\n          [preserveFragment]=\"item.preserveFragment\"\n          [skipLocationChange]=\"item.skipLocationChange\"\n          [replaceUrl]=\"item.replaceUrl\"\n          [state]=\"item.state\"\n          [routerLink]=\"item.routerLink\"\n          [target]=\"item.target\"\n          (click)=\"activateItem($event, item)\">\n          {{ item.label }}\n        </a>\n      </ng-template>\n    </ng-container>\n    <ng-template #noRouterLink>\n      <button seamMenuItem\n        type=\"button\"\n        class=\"list-group-item list-group-item-action py-1\"\n        (click)=\"activateItem($event, item)\">\n        {{ item.label }}\n      </button>\n    </ng-template>\n  </ng-container> -->\n</seam-menu>\n\n<button type=\"button\" class=\"datatable-action-button btn\"\n  [seamMenuToggle]=\"menu\"\n  [positions]=\"$any(_actionMenuPositions)\"\n  title=\"Row Actions\">\n  <seam-icon [icon]=\"faEllipsisH\"></seam-icon>\n</button>\n", styles: [":host{display:block;position:relative}.datatable-action-button{font-size:20px;line-height:20px;width:30px;height:30px;padding:0;border-radius:15px;text-align:center}.datatable-action-button::ng-deep .svg-inline--fa{vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "component", type: i5.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "directive", type: i5.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions"], outputs: ["menuToggle"], exportAs: ["seamMenuToggle"] }, { kind: "component", type: i5.MenuItemComponent, selector: "[seamMenuItem]", inputs: ["disabled", "role", "icon", "iconClass", "badgeText", "badgeTheme"], exportAs: ["seamMenuItem"] }, { kind: "directive", type: DatatableDynamicActionMenuItemDirective, selector: "[seamDatatableDynamicActionMenuItem]", inputs: ["seamDatatableDynamicActionMenuItem"], exportAs: ["seamDatatableDynamicActionMenuItem"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DatatableDynamicActionMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-datatable-dynamic-action-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<seam-menu #menu\n  menuClass=\"list-group py-0 border-0 seam-datatable-action-menu\"\n  animationType=\"fade\">\n\n  <ng-container *ngFor=\"let record of _menuRecords$ | async\">\n\n    <a *ngIf=\"record.elementType === 'a'\"\n      seamMenuItem\n      [seamDatatableDynamicActionMenuItem]=\"record\"\n      class=\"list-group-item list-group-item-action py-1\">{{ record.rowAction.label }}</a>\n\n    <button *ngIf=\"record.elementType === 'button'\"\n      seamMenuItem\n      [seamDatatableDynamicActionMenuItem]=\"record\"\n      type=\"button\"\n      class=\"list-group-item list-group-item-action py-1\">{{ record.rowAction.label }}</button>\n\n  </ng-container>\n\n    <!-- <ng-container *ngIf=\"(item.routerLink || item.href) && !item.confirmDialog; else noRouterLink\">\n      <a *ngIf=\"item.href; else noHref\"\n        seamMenuItem\n        class=\"list-group-item list-group-item-action py-1\"\n        [attr.href]=\"item.href\"\n        [target]=\"item.target\"\n        (click)=\"activateItem($event, item)\">\n        {{ item.label }}\n      </a>\n      <ng-template #noHref>\n        <a seamMenuItem\n          class=\"list-group-item list-group-item-action py-1\"\n          [queryParams]=\"item.queryParams\"\n          [fragment]=\"item.fragment\"\n          [queryParamsHandling]=\"item.queryParamsHandling\"\n          [preserveFragment]=\"item.preserveFragment\"\n          [skipLocationChange]=\"item.skipLocationChange\"\n          [replaceUrl]=\"item.replaceUrl\"\n          [state]=\"item.state\"\n          [routerLink]=\"item.routerLink\"\n          [target]=\"item.target\"\n          (click)=\"activateItem($event, item)\">\n          {{ item.label }}\n        </a>\n      </ng-template>\n    </ng-container>\n    <ng-template #noRouterLink>\n      <button seamMenuItem\n        type=\"button\"\n        class=\"list-group-item list-group-item-action py-1\"\n        (click)=\"activateItem($event, item)\">\n        {{ item.label }}\n      </button>\n    </ng-template>\n  </ng-container> -->\n</seam-menu>\n\n<button type=\"button\" class=\"datatable-action-button btn\"\n  [seamMenuToggle]=\"menu\"\n  [positions]=\"$any(_actionMenuPositions)\"\n  title=\"Row Actions\">\n  <seam-icon [icon]=\"faEllipsisH\"></seam-icon>\n</button>\n", styles: [":host{display:block;position:relative}.datatable-action-button{font-size:20px;line-height:20px;width:30px;height:30px;padding:0;border-radius:15px;text-align:center}.datatable-action-button::ng-deep .svg-inline--fa{vertical-align:middle}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.DynamicValueHelperService }, { type: DynamicDatatableRowActionsService }]; }, propDecorators: { row: [{
+                type: Input
+            }], actionDefs: [{
+                type: Input
+            }] } });
+
+class DatatableDynamicFilterContainerComponent {
+    set filterComponent(value) {
+        this._filterComponent = value;
+        // if (this._filterComponent !== value) {
+        //   this._setPortal(value)
+        // }
+    }
+    get filterComponent() { return this._filterComponent; }
+    constructor(_injector) {
+        this._injector = _injector;
+        this._portal = null;
+    }
+    ngOnInit() {
+        if (this.filterComponent) {
+            this._setPortal(this.filterComponent);
+        }
+    }
+    _setPortal(component) {
+        if (this._portal) {
+            this._portal = null;
+        }
+        if (component) {
+            this._portal = new ComponentPortal(component, undefined, this._createInjector());
+        }
+        else {
+            this._portal = null;
+        }
+    }
+    _createInjector() {
+        return new PortalInjector(this._injector, new WeakMap([
+            [THESEAM_DATA_FILTER_OPTIONS, this.options]
+        ]));
+    }
+}
+DatatableDynamicFilterContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DatatableDynamicFilterContainerComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+DatatableDynamicFilterContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DatatableDynamicFilterContainerComponent, selector: "seam-datatable-dynamic-filter-container", inputs: { filterComponent: "filterComponent", options: "options" }, ngImport: i0, template: "<ng-template [cdkPortalOutlet]=\"_portal\"></ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DatatableDynamicFilterContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-datatable-dynamic-filter-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template [cdkPortalOutlet]=\"_portal\"></ng-template>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { filterComponent: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }] } });
+
+const THESEAM_DATATABLE_DYNAMIC_MENUBAR_ITEM = new InjectionToken('IDatatableDynamicMenuBarItemManifest');
+
+class DatatableDynamicMenuBarContentComponent {
+    set def(value) { this._def.next(value); }
+    get def() { return this._def.value; }
+    constructor(_valueHelper, _dynamicComponentLoader, _injector, _menuBarItemManifests) {
+        this._valueHelper = _valueHelper;
+        this._dynamicComponentLoader = _dynamicComponentLoader;
+        this._injector = _injector;
+        this._menuBarItemManifests = _menuBarItemManifests;
+        this._def = new BehaviorSubject(undefined);
+        this.def$ = this._def.asObservable();
+        // .pipe(tap(v => console.log('def$', v)))
+        this._rows$ = this.def$.pipe(switchMap(def => this._mapRows((def && def.rows) || [])));
+        // .pipe(tap(v => console.log('_rows$', v)))
+    }
+    _mapRows(rows) {
+        return Promise.all(rows.map(r => this._mapRow(r)));
+    }
+    _mapRow(row) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const result = {};
+            const context = this._createRowContext(row);
+            if (hasProperty(row, 'styles')) {
+                result.styles = yield this._valueHelper.eval(row.styles, context);
+            }
+            if (hasProperty(row, 'cssClass')) {
+                result.cssClass = yield this._valueHelper.eval(row.cssClass, context);
+            }
+            if (hasProperty(row, 'priority')) {
+                result.priority = yield this._valueHelper.eval(row.priority, context);
+            }
+            result.layoutType = row.layout.type;
+            result.layout = yield this._mapRowLayout(row.layout, row);
+            return result;
+        });
+    }
+    _mapRowLayout(layout, row) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const result = {};
+            if (hasProperty(layout, 'columnLeft')) {
+                result.columnLeft = yield this._mapColumn(layout.columnLeft, row);
+            }
+            if (hasProperty(layout, 'columnCenter')) {
+                result.columnCenter = yield this._mapColumn(layout.columnCenter, row);
+            }
+            if (hasProperty(layout, 'columnRight')) {
+                result.columnRight = yield this._mapColumn(layout.columnRight, row);
+            }
+            return result;
+        });
+    }
+    _mapColumn(column, row) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const result = {};
+            const context = this._createColumnContext(column, row);
+            if (hasProperty(column, 'styles')) {
+                result.styles = yield this._valueHelper.eval(column.styles, context);
+            }
+            if (hasProperty(column, 'cssClass')) {
+                result.cssClass = yield this._valueHelper.eval(column.cssClass, context);
+            }
+            result.items = yield Promise.all(column.items.map(v => this._mapItem(v, row, column)));
+            return result;
+        });
+    }
+    _mapItem(item, row, column) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const result = {};
+            const context = this._createItemContext(item, row, column);
+            // if (hasProperty(item, 'styles')) {
+            //   result.styles = await this._valueHelper.eval(item.styles, context)
+            // }
+            // if (hasProperty(item, 'cssClass')) {
+            //   result.cssClass = await this._valueHelper.eval(item.cssClass, context)
+            // }
+            if (hasProperty(item, 'component')) {
+                // result.component = await this._valueHelper.eval(item.component, context)
+                const component = yield this._valueHelper.eval(item.component, context);
+                let data;
+                if (hasProperty(item, 'data')) {
+                    // result.data = await this._valueHelper.eval(item.data, context)
+                    // console.log('%cdata', 'color:cyan', item.data)
+                    data = yield this._valueHelper.eval(item.data, context);
+                    // console.log('%cdata', 'color:limegreen', data)
+                }
+                result.portal = yield this._getComponentPortal(component, data);
+            }
+            return result;
+        });
+    }
+    _createRowContext(row) {
+        return {
+            row
+        };
+    }
+    _createColumnContext(column, row) {
+        return {
+            row,
+            column
+        };
+    }
+    _createItemContext(item, row, column) {
+        return {
+            item,
+            row,
+            column
+        };
+    }
+    _getComponentPortal(component, data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const manifest = (this._menuBarItemManifests || []).find(m => m.name === component);
+            if (!manifest) {
+                // TODO: Make sure the component is skipped instead of erroring outside of dev mode.
+                throw Error(`MenuBar manifest for '${component}' not found.`);
+            }
+            // TODO: Create a new injector with the data injected
+            let injector = this._injector;
+            if (manifest.dataToken) {
+                injector = new PortalInjector(this._injector, new WeakMap([
+                    [manifest.dataToken, data]
+                ]));
+            }
+            if (typeof manifest.component === 'string') {
+                this._dynamicComponentLoader.getComponentFactory(manifest.component).pipe(map(componentFactory => {
+                    return new ComponentPortal(componentFactory.componentType, null, injector, componentFactory /* ComponentFactoryBoundToModule */.ngModule.componentFactoryResolver);
+                })).toPromise();
+            }
+            else {
+                return new ComponentPortal(manifest.component, null, injector, null);
+            }
+        });
+    }
+}
+DatatableDynamicMenuBarContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DatatableDynamicMenuBarContentComponent, deps: [{ token: i1.DynamicValueHelperService }, { token: i2$1.TheSeamDynamicComponentLoader }, { token: i0.Injector }, { token: THESEAM_DATATABLE_DYNAMIC_MENUBAR_ITEM, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DatatableDynamicMenuBarContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DatatableDynamicMenuBarContentComponent, selector: "seam-datatable-dynamic-menu-bar-content", inputs: { def: "def" }, ngImport: i0, template: "<seam-datatable-menu-bar-row *ngFor=\"let row of _rows$ | async; last as isLast\"\n  [class.mb-2]=\"!isLast\"\n  [ngClass]=\"$any(row.cssClass)\"\n  [ngStyle]=\"$any(row.styles)\">\n  <ng-container *ngIf=\"row.layoutType === 'tri-column'\">\n    <seam-datatable-menu-bar-column-left *ngIf=\"row.layout?.columnLeft\"\n      [ngClass]=\"$any(row.layout).cssClass\"\n      [ngStyle]=\"$any(row.layout).styles\">\n      <ng-container *ngIf=\"row.layout?.columnLeft?.items\">\n        <ng-container *ngFor=\"let item of row.layout?.columnLeft?.items\">\n          <ng-template [cdkPortalOutlet]=\"item.portal\"></ng-template>\n        </ng-container>\n      </ng-container>\n    </seam-datatable-menu-bar-column-left>\n    <seam-datatable-menu-bar-column-center *ngIf=\"row.layout?.columnCenter\"\n      [ngClass]=\"$any(row.layout).cssClass\"\n      [ngStyle]=\"$any(row.layout).styles\">\n      <ng-container *ngIf=\"row.layout?.columnCenter?.items\">\n        <ng-container *ngFor=\"let item of row.layout?.columnCenter?.items\">\n          <ng-template [cdkPortalOutlet]=\"item.portal\"></ng-template>\n        </ng-container>\n      </ng-container>\n    </seam-datatable-menu-bar-column-center>\n    <seam-datatable-menu-bar-column-right *ngIf=\"row.layout?.columnRight\"\n      [ngClass]=\"$any(row.layout).cssClass\"\n      [ngStyle]=\"$any(row.layout).styles\">\n      <ng-container *ngIf=\"row.layout?.columnRight?.items\">\n        <ng-container *ngFor=\"let item of row.layout?.columnRight?.items\">\n          <ng-template [cdkPortalOutlet]=\"item.portal\"></ng-template>\n        </ng-container>\n      </ng-container>\n    </seam-datatable-menu-bar-column-right>\n  </ng-container>\n</seam-datatable-menu-bar-row>\n", styles: [""], dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$1.DatatableMenuBarRowComponent, selector: "seam-datatable-menu-bar-row" }, { kind: "component", type: i4$1.DatatableMenuBarColumnLeftComponent, selector: "seam-datatable-menu-bar-column-left" }, { kind: "component", type: i4$1.DatatableMenuBarColumnCenterComponent, selector: "seam-datatable-menu-bar-column-center" }, { kind: "component", type: i4$1.DatatableMenuBarColumnRightComponent, selector: "seam-datatable-menu-bar-column-right" }, { kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DatatableDynamicMenuBarContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-datatable-dynamic-menu-bar-content', changeDetection: ChangeDetectionStrategy.OnPush, template: "<seam-datatable-menu-bar-row *ngFor=\"let row of _rows$ | async; last as isLast\"\n  [class.mb-2]=\"!isLast\"\n  [ngClass]=\"$any(row.cssClass)\"\n  [ngStyle]=\"$any(row.styles)\">\n  <ng-container *ngIf=\"row.layoutType === 'tri-column'\">\n    <seam-datatable-menu-bar-column-left *ngIf=\"row.layout?.columnLeft\"\n      [ngClass]=\"$any(row.layout).cssClass\"\n      [ngStyle]=\"$any(row.layout).styles\">\n      <ng-container *ngIf=\"row.layout?.columnLeft?.items\">\n        <ng-container *ngFor=\"let item of row.layout?.columnLeft?.items\">\n          <ng-template [cdkPortalOutlet]=\"item.portal\"></ng-template>\n        </ng-container>\n      </ng-container>\n    </seam-datatable-menu-bar-column-left>\n    <seam-datatable-menu-bar-column-center *ngIf=\"row.layout?.columnCenter\"\n      [ngClass]=\"$any(row.layout).cssClass\"\n      [ngStyle]=\"$any(row.layout).styles\">\n      <ng-container *ngIf=\"row.layout?.columnCenter?.items\">\n        <ng-container *ngFor=\"let item of row.layout?.columnCenter?.items\">\n          <ng-template [cdkPortalOutlet]=\"item.portal\"></ng-template>\n        </ng-container>\n      </ng-container>\n    </seam-datatable-menu-bar-column-center>\n    <seam-datatable-menu-bar-column-right *ngIf=\"row.layout?.columnRight\"\n      [ngClass]=\"$any(row.layout).cssClass\"\n      [ngStyle]=\"$any(row.layout).styles\">\n      <ng-container *ngIf=\"row.layout?.columnRight?.items\">\n        <ng-container *ngFor=\"let item of row.layout?.columnRight?.items\">\n          <ng-template [cdkPortalOutlet]=\"item.portal\"></ng-template>\n        </ng-container>\n      </ng-container>\n    </seam-datatable-menu-bar-column-right>\n  </ng-container>\n</seam-datatable-menu-bar-row>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i1.DynamicValueHelperService }, { type: i2$1.TheSeamDynamicComponentLoader }, { type: i0.Injector }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [THESEAM_DATATABLE_DYNAMIC_MENUBAR_ITEM]
+                    }] }];
+    }, propDecorators: { def: [{
+                type: Input
+            }] } });
+
+/**
+ * # EXPERIMENTAL
+ *
+ * NOTE: This component is still experimental. When stable all standard
+ * datatables must use this component, unless there is a good reason not to, in
+ * our apps.
+ *
+ * ----------------------------------------------------------------------------
+ *
+ * Datatable that is built from a json definition.
+ *
+ * All standard datatables in our apps must use this component, unless there is
+ * a good reason not to. If a standard datatable does not use this component
+ * then an explaination comment needs to be clearly provided in the code to
+ * avoid getting migrated to this component.
+ *
+ * A few reasons this component should to be used:
+ * - We can, more easily, control what a datatable in our app does by requiring
+ *   the definition follow a json schema, instead of having full scripting
+ *   access available to the developer.
+ *   + By using json we can maintain the tables from any external app/language
+ *     that can produce a json string.
+ *   + More scripting access often leads to different hacks across the tables
+ *     that should have just been supported by this component if it is a feature
+ *     a datatable should be able to do in an app of ours.
+ * - We can allow any of our tables to be configured by the server.
+ *   + By supporting configuration on the server we can change the tables
+ *     without a new build and do things like allowing non-developers/clients to
+ *     maintain the tables functionality.
+ */
+class DatatableDynamicComponent {
+    /** The `DatatableDynamicDef` that defines the datatable. */
+    set def(value) {
+        this._dynamicDef.setDef(value || undefined);
+    }
+    constructor(_dynamicDef) {
+        this._dynamicDef = _dynamicDef;
+        this._hasDef$ = this._dynamicDef.def$.pipe(map(def => !!def));
+        this.menuBar$ = this._dynamicDef.menuBar$;
+        this._exporters$ = this._dynamicDef.exporters$;
+        this._commonFilterMenuItems$ = this._dynamicDef.filterMenuItems$
+            .pipe(map(f => f.filter(_f => _f.type === 'common')));
+        this._hasFullSearch$ = this._dynamicDef.filterMenuItems$
+            .pipe(map(f => !!f.find(_f => _f.type === 'full-search')));
+        this._hasFilterMenu$ = this._dynamicDef.hasFilterMenu$;
+        this._options$ = this._dynamicDef.options$;
+        this._tmp_columns$ = this._dynamicDef.def$.pipe(map(def => def ? def.columns : []));
+        this._tmp_rows$ = this._dynamicDef.def$.pipe(map(def => def ? def.rows : []));
+    }
+}
+DatatableDynamicComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DatatableDynamicComponent, deps: [{ token: DynamicDatatableDefService }], target: i0.ɵɵFactoryTarget.Component });
+DatatableDynamicComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DatatableDynamicComponent, selector: "seam-datatable-dynamic", inputs: { def: "def" }, providers: [
+        DynamicDatatableDefService,
+        DynamicDatatableRowActionsService
+    ], ngImport: i0, template: "<ng-container *ngIf=\"_hasDef$ | async\">\n  <seam-datatable *ngIf=\"_options$ | async as opts\"\n    class=\"w-100 h-100\"\n    [columns]=\"_tmp_columns$ | async\"\n    [rows]=\"_tmp_rows$ | async\"\n    [virtualization]=\"opts.virtualization\">\n\n    <seam-datatable-menu-bar *ngIf=\"menuBar$ | async as menuBar\">\n      <seam-datatable-dynamic-menu-bar-content [def]=\"menuBar\"></seam-datatable-dynamic-menu-bar-content>\n    </seam-datatable-menu-bar>\n    <!-- <seam-datatable-menu-bar *ngIf=\"_hasFilterMenu$ | async\">\n      <div class=\"d-flex flex-row pb-2\">\n        <div class=\"d-flex flex-row justify-content-end flex-grow-1\">\n          <seam-data-filter-search seamDatatableFilter *ngIf=\"_hasFullSearch$\"></seam-data-filter-search>\n        </div>\n      </div>\n      <div class=\"d-flex flex-row\">\n        <div class=\"d-flex justify-content-center flex-grow-1\">\n          <ng-container *ngFor=\"let r of _commonFilterMenuItems$ | async; let isFirst = first\">\n            <seam-datatable-dynamic-filter-container\n              [class.ml-1]=\"!isFirst\"\n              [filterComponent]=\"r.component\"\n              [options]=\"r.options\">\n            </seam-datatable-dynamic-filter-container>\n          </ng-container>\n        </div>\n        <seam-datatable-export-button *ngIf=\"_exporters$ | async as exporters\"\n          [exporters]=\"exporters\">\n        </seam-datatable-export-button>\n      </div>\n    </seam-datatable-menu-bar> -->\n\n    <ng-template seamDatatableRowActionItem let-row>\n      <seam-datatable-dynamic-action-menu [row]=\"row\"></seam-datatable-dynamic-action-menu>\n    </ng-template>\n\n  </seam-datatable>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.DatatableComponent, selector: "seam-datatable", inputs: ["preferencesKey", "targetMarkerTemplate", "columns", "rows", "columnMode", "groupRowsBy", "groupedRows", "selected", "externalPaging", "externalSorting", "externalFiltering", "limit", "count", "offset", "loadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowIdentity", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "virtualization", "headerHeight", "rowHeight", "footerHeight", "scrollbarV", "scrollbarH", "dataSource", "actionItemColumnPosition"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction", "actionRefreshRequest", "hiddenColumnsChange"] }, { kind: "component", type: i4$1.DatatableMenuBarComponent, selector: "seam-datatable-menu-bar" }, { kind: "directive", type: i4$1.DatatableRowActionItemDirective, selector: "[seamDatatableRowActionItem]" }, { kind: "component", type: DatatableDynamicActionMenuComponent, selector: "seam-datatable-dynamic-action-menu", inputs: ["row", "actionDefs"] }, { kind: "component", type: DatatableDynamicMenuBarContentComponent, selector: "seam-datatable-dynamic-menu-bar-content", inputs: ["def"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DatatableDynamicComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-datatable-dynamic', providers: [
+                        DynamicDatatableDefService,
+                        DynamicDatatableRowActionsService
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"_hasDef$ | async\">\n  <seam-datatable *ngIf=\"_options$ | async as opts\"\n    class=\"w-100 h-100\"\n    [columns]=\"_tmp_columns$ | async\"\n    [rows]=\"_tmp_rows$ | async\"\n    [virtualization]=\"opts.virtualization\">\n\n    <seam-datatable-menu-bar *ngIf=\"menuBar$ | async as menuBar\">\n      <seam-datatable-dynamic-menu-bar-content [def]=\"menuBar\"></seam-datatable-dynamic-menu-bar-content>\n    </seam-datatable-menu-bar>\n    <!-- <seam-datatable-menu-bar *ngIf=\"_hasFilterMenu$ | async\">\n      <div class=\"d-flex flex-row pb-2\">\n        <div class=\"d-flex flex-row justify-content-end flex-grow-1\">\n          <seam-data-filter-search seamDatatableFilter *ngIf=\"_hasFullSearch$\"></seam-data-filter-search>\n        </div>\n      </div>\n      <div class=\"d-flex flex-row\">\n        <div class=\"d-flex justify-content-center flex-grow-1\">\n          <ng-container *ngFor=\"let r of _commonFilterMenuItems$ | async; let isFirst = first\">\n            <seam-datatable-dynamic-filter-container\n              [class.ml-1]=\"!isFirst\"\n              [filterComponent]=\"r.component\"\n              [options]=\"r.options\">\n            </seam-datatable-dynamic-filter-container>\n          </ng-container>\n        </div>\n        <seam-datatable-export-button *ngIf=\"_exporters$ | async as exporters\"\n          [exporters]=\"exporters\">\n        </seam-datatable-export-button>\n      </div>\n    </seam-datatable-menu-bar> -->\n\n    <ng-template seamDatatableRowActionItem let-row>\n      <seam-datatable-dynamic-action-menu [row]=\"row\"></seam-datatable-dynamic-action-menu>\n    </ng-template>\n\n  </seam-datatable>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column}\n"] }]
+        }], ctorParameters: function () { return [{ type: DynamicDatatableDefService }]; }, propDecorators: { def: [{
+                type: Input
+            }] } });
+
+class TheSeamDatatableDynamicModule {
+}
+TheSeamDatatableDynamicModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TheSeamDatatableDynamicModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TheSeamDatatableDynamicModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: TheSeamDatatableDynamicModule, declarations: [DatatableDynamicComponent,
+        DatatableDynamicFilterContainerComponent,
+        DatatableDynamicActionMenuComponent,
+        DatatableDynamicActionMenuItemDirective,
+        DatatableDynamicMenuBarContentComponent], imports: [CommonModule,
+        TheSeamSharedModule,
+        TheSeamDatatableModule,
+        TheSeamTableCellTypesModule,
+        TheSeamDataExporterModule,
+        TheSeamDataFiltersModule,
+        TheSeamIconModule,
+        PortalModule,
+        RouterModule,
+        TheSeamMenuModule,
+        TheSeamButtonsModule], exports: [DatatableDynamicComponent,
+        TheSeamDatatableModule,
+        DatatableDynamicActionMenuItemDirective] });
+TheSeamDatatableDynamicModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TheSeamDatatableDynamicModule, imports: [CommonModule,
+        TheSeamSharedModule,
+        TheSeamDatatableModule,
+        TheSeamTableCellTypesModule,
+        TheSeamDataExporterModule,
+        TheSeamDataFiltersModule,
+        TheSeamIconModule,
+        PortalModule,
+        RouterModule,
+        TheSeamMenuModule,
+        TheSeamButtonsModule, TheSeamDatatableModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TheSeamDatatableDynamicModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        DatatableDynamicComponent,
+                        DatatableDynamicFilterContainerComponent,
+                        DatatableDynamicActionMenuComponent,
+                        DatatableDynamicActionMenuItemDirective,
+                        DatatableDynamicMenuBarContentComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        TheSeamSharedModule,
+                        TheSeamDatatableModule,
+                        TheSeamTableCellTypesModule,
+                        TheSeamDataExporterModule,
+                        TheSeamDataFiltersModule,
+                        TheSeamIconModule,
+                        PortalModule,
+                        RouterModule,
+                        TheSeamMenuModule,
+                        TheSeamButtonsModule
+                    ],
+                    exports: [
+                        DatatableDynamicComponent,
+                        TheSeamDatatableModule,
+                        DatatableDynamicActionMenuItemDirective
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DatatableDynamicActionMenuComponent, DatatableDynamicActionMenuItemDirective, DatatableDynamicActionMenuItemRouterLink, DatatableDynamicComponent, DatatableDynamicFilterContainerComponent, DatatableDynamicMenuBarContentComponent, DynamicDatatableDefService, DynamicDatatableRowActionsService, THESEAM_DATATABLE_DYNAMIC_MENUBAR_ITEM, TheSeamDatatableDynamicModule, setDynamicDatatableColumnsDefaults, setDynamicDatatableDefDefaults, setDynamicDatatableFilterMenuDefaults, setDynamicDatatableOptionsDefaults };
+//# sourceMappingURL=theseam-ui-common-datatable-dynamic.mjs.map