@theseam/ui-common 0.4.4 → 0.4.6

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

@@ -5,7 +5,7 @@ import { DataSource, isDataSource } from '@angular/cdk/collections';
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ContentChildren, Directive, Injectable, TemplateRef, ContentChild, Self, Inject, forwardRef, InjectionToken, isDevMode, Optional, ElementRef, ViewChild, HostListener, HostBinding, NgModule } from '@angular/core';
 import { Subject, BehaviorSubject, of, defer, combineLatest, EMPTY, Subscription, from, isObservable } from 'rxjs';
-import { switchMap, map, startWith, auditTime, shareReplay, tap, take, distinctUntilChanged, takeUntil, concatMap, catchError } from 'rxjs/operators';
+import { switchMap, map, startWith, auditTime, shareReplay, take, tap, distinctUntilChanged, takeUntil, concatMap, catchError } from 'rxjs/operators';
 import { faEllipsisH, faChevronDown, faChevronRight, faSpinner, faColumns, faFileDownload } from '@fortawesome/free-solid-svg-icons';
 import * as i5$1 from '@marklb/ngx-datatable';
 import { camelCase, setColumnDefaults as setColumnDefaults$1, translateTemplates, SelectionType, SortType, ColumnMode, DatatableComponent as DatatableComponent$1, DatatableRowDetailDirective, NgxDatatableModule, ScrollbarHelper } from '@marklb/ngx-datatable';
@@ -22,6 +22,7 @@ import * as i4$1 from '@theseam/ui-common/menu';
 import { TheSeamMenuModule } from '@theseam/ui-common/menu';
 import * as i5 from '@theseam/ui-common/icon';
 import { TheSeamIconModule } from '@theseam/ui-common/icon';
+import * as i1$1 from '@theseam/ui-common/services';
 import * as i6 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import * as i7 from '@theseam/ui-common/shared';
@@ -30,7 +31,7 @@ import * as i8 from '@theseam/ui-common/table-cell-type';
 import { TheSeamTableCellTypeModule } from '@theseam/ui-common/table-cell-type';
 import * as i7$1 from '@angular/forms';
 import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
-import * as i1$1 from '@theseam/ui-common/scrollbar';
+import * as i1$2 from '@theseam/ui-common/scrollbar';
 import * as i5$2 from '@theseam/ui-common/checkbox';
 import { TheSeamCheckboxModule } from '@theseam/ui-common/checkbox';
 import * as i6$1 from '@theseam/ui-common/form-field';
@@ -39,18 +40,18 @@ import * as i4$2 from '@theseam/ui-common/popover';
 import { TheSeamPopoverModule } from '@theseam/ui-common/popover';
 import * as i3 from '@theseam/ui-common/dynamic';
 import { THESEAM_DYNAMIC_DATA } from '@theseam/ui-common/dynamic';
-import * as i1$2 from 'ngx-toastr';
+import * as i1$3 from 'ngx-toastr';
 import { ToastrModule } from 'ngx-toastr';
 import * as i2$1 from '@theseam/ui-common/loading';
 import { TheSeamLoadingModule } from '@theseam/ui-common/loading';
 import * as i7$2 from '@theseam/ui-common/buttons';
 import { TheSeamButtonsModule } from '@theseam/ui-common/buttons';
-import * as i1$3 from '@theseam/ui-common/modal';
+import * as i1$4 from '@theseam/ui-common/modal';
 import * as i2$2 from '@theseam/ui-common/dynamic-component-loader';
 import * as i3$1 from '@angular/common/http';
 import { ESCAPE } from '@angular/cdk/keycodes';
 import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
-import * as i1$4 from '@angular/cdk/overlay';
+import * as i1$5 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { A11yModule } from '@angular/cdk/a11y';
 
@@ -1290,103 +1291,41 @@ const EMPTY_DATATABLE_PREFERENCES = {
 
 const THESEAM_DATATABLE_PREFERENCES_ACCESSOR = new InjectionToken('TheSeamDatatablePreferencesAccessor');
 
-// TODO: Add per key status
 class DatatablePreferencesService {
-    get pending() { return this._pending; }
-    get loaded() { return this._loaded; }
-    constructor(_prefsAccessor) {
+    constructor(_preferencesManager, _prefsAccessor) {
+        this._preferencesManager = _preferencesManager;
         this._prefsAccessor = _prefsAccessor;
-        this._tablePrefsMap = new Map();
+        // TODO: Remove the need for this internal pending flag. I only kept it for
+        // backwards compatibility, until better tests are added to make sure if isn't
+        // neccessary anymore.
+        /**
+         * Used to prevent multiple updates from happening at the same time, but it is not per key.
+         */
         this._pending = false;
-        this._loaded = false;
     }
-    preferences(preferenceKey) {
-        let prefs = this._tablePrefsMap.get(preferenceKey);
-        if (!prefs) {
-            const refreshSubject = new Subject();
-            prefs = {
-                observable: this._createObservable(refreshSubject, preferenceKey),
-                refresh: refreshSubject
-            };
-            this._tablePrefsMap.set(preferenceKey, prefs);
+    isPending(preferenceKey) {
+        return this._pending || this._preferencesManager.isPending(preferenceKey);
+    }
+    isLoaded(preferenceKey) {
+        if (this._pending) {
+            return false;
         }
-        return prefs.observable;
+        return this._preferencesManager.isLoaded(preferenceKey);
     }
-    _createObservable(refreshSubject, prefKey) {
+    preferences(preferenceKey) {
         if (!this._prefsAccessor) {
-            return of(EMPTY_DATATABLE_PREFERENCES);
+            return of(JSON.parse(JSON.stringify(EMPTY_DATATABLE_PREFERENCES)));
         }
-        const accessor = (key) => this._prefsAccessor ? this._prefsAccessor.get(key) : of(JSON.stringify(EMPTY_DATATABLE_PREFERENCES));
-        return refreshSubject.pipe(startWith(undefined), switchMap(() => accessor(prefKey).pipe(map(v => {
-            if (!v) {
-                return null;
-            }
-            // TODO: Add a schema validator and migration tool to avoid parsing issues.
-            try {
-                // return JSON.parse(v) as TheSeamDatatablePreferences
-                return this._descerializePreferences(v);
-            }
-            catch (error) {
-                if (isDevMode()) {
-                    // eslint-disable-next-line no-console
-                    console.error(error);
-                }
-                return null;
+        return this._preferencesManager.preferences(preferenceKey, this._prefsAccessor, EMPTY_DATATABLE_PREFERENCES).pipe(map(prefs => {
+            if (this._isValidDatatablePreferences(prefs)) {
+                return prefs;
             }
-        }), map(v => notNullOrUndefined(v) ? v : EMPTY_DATATABLE_PREFERENCES), 
-        // tap(v => console.log('preferences$', v)),
-        tap(() => {
-            this._pending = false;
-            this._loaded = true;
-        }))), shareReplay({ bufferSize: 1, refCount: true }));
+            throw Error(`Preferences for key '${preferenceKey}' is not a valid datatable preferences.`);
+        }));
     }
     refresh(preferenceKey) {
-        const prefs = this._tablePrefsMap.get(preferenceKey);
-        if (prefs) {
-            this._pending = true;
-            prefs.refresh.next();
-        }
+        this._preferencesManager.refresh(preferenceKey);
     }
-    // TODO: Improve this updating to be more generic, so we can quickly add
-    // edits for different preference schema's.
-    //
-    // TODO: Decide if a send queue/merging of pending queue is needed to avoid
-    // out of order updates. This shouldn't be an issue, with how fast preferences
-    // will most likely be changing, but it could happen in situations, such as
-    // network issues.
-    // public setColumnPreference(preferenceKey: string, column: TheSeamDatatablePreferencesColumn): void {
-    //   if (!this._prefsAccessor) {
-    //     return
-    //   }
-    //   this._pending = true
-    //   this.preferences(preferenceKey).pipe(
-    //     map(prefs => {
-    //       // Making the preferences immutable may not be necessary, but for now
-    //       // this obj->str->obj will work as a naive clone.
-    //       const columns = JSON.parse(JSON.stringify(prefs.columns || []))
-    //       const _colPref = columns.find((c: any) => c.prop === column.prop)
-    //       // console.log('has', _colPref)
-    //       if (_colPref) {
-    //         // console.log('hasProperty(column, "width"))', hasProperty(column, 'width'))
-    //         if (hasProperty(column, 'width')) { _colPref.width = column.width }
-    //         if (hasProperty(column, 'canAutoResize')) { _colPref.canAutoResize = column.canAutoResize }
-    //         if (hasProperty(column, 'hidden')) { _colPref.hidden = column.hidden }
-    //       } else {
-    //         columns.push({ ...column })
-    //       }
-    //       const newPrefs: TheSeamDatatablePreferences = { ...prefs, columns }
-    //       return newPrefs
-    //     }),
-    //     // tap(v => console.log('newPrefs', v)),
-    //     take(1),
-    //     switchMap(newPrefs => this._prefsAccessor
-    //       ? this._prefsAccessor.update(preferenceKey, JSON.stringify(newPrefs))
-    //       : of(newPrefs)
-    //     ),
-    //     tap(() => this.refresh(preferenceKey))
-    //   )
-    //   .subscribe()
-    // }
     setAlterations(preferenceKey, alterations) {
         if (!this._prefsAccessor) {
             return;
@@ -1409,6 +1348,7 @@ class DatatablePreferencesService {
             // const newPrefs: TheSeamDatatablePreferences = { ...prefs, columns }
             // return newPrefs
             const newPrefs = Object.assign(Object.assign({}, EMPTY_DATATABLE_PREFERENCES), { alterations });
+            this._pending = false;
             return newPrefs;
         }), 
         // tap(v => console.log('newPrefs', v)),
@@ -1417,22 +1357,11 @@ class DatatablePreferencesService {
             : of(newPrefs)), tap(() => this.refresh(preferenceKey)))
             .subscribe();
     }
-    // public withColumnPreferences<T>(preferenceKey: string, columns: T[]): Observable<T[]> {
-    //   return this.preferences(preferenceKey).pipe(
-    //     startWith(EMPTY_DATATABLE_PREFERENCES),
-    //     map(preferences => preferences && preferences.columns
-    //       ? withStoredColumnInfo(columns, preferences.columns) as T[]
-    //       : columns
-    //     )
-    //   )
-    // }
-    _descerializePreferences(serialized) {
-        const prefs = JSON.parse(serialized);
-        // TODO: Implement migration
-        return prefs;
+    _isValidDatatablePreferences(prefs) {
+        return prefs.version === CURRENT_DATATABLE_PREFERENCES_VERSION;
     }
 }
-DatatablePreferencesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatablePreferencesService, deps: [{ token: THESEAM_DATATABLE_PREFERENCES_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+DatatablePreferencesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatablePreferencesService, deps: [{ token: i1$1.TheSeamPreferencesManagerService }, { token: THESEAM_DATATABLE_PREFERENCES_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
 DatatablePreferencesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatablePreferencesService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatablePreferencesService, decorators: [{
             type: Injectable,
@@ -1440,7 +1369,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                     providedIn: 'root'
                 }]
         }], ctorParameters: function () {
-        return [{ type: undefined, decorators: [{
+        return [{ type: i1$1.TheSeamPreferencesManagerService }, { type: undefined, decorators: [{
                         type: Optional
                     }, {
                         type: Inject,
@@ -1642,7 +1571,7 @@ class DatatableComponent {
             if (!notNullOrUndefined(key) || key.length === 0) {
                 return of(undefined);
             }
-            return from(waitOnConditionAsync(() => this._preferences.loaded)).pipe(switchMap(() => this._columnsAlterationsManager.changes.pipe(startWith(undefined), tap(() => {
+            return from(waitOnConditionAsync(() => this._preferences.isLoaded(key))).pipe(switchMap(() => this._columnsAlterationsManager.changes.pipe(startWith(undefined), tap(() => {
                 this._preferences.setAlterations(key, this._columnsAlterationsManager.get());
             }))));
         }), takeUntil(this._ngUnsubscribe)).subscribe();
@@ -1655,7 +1584,7 @@ class DatatableComponent {
                 return of(undefined);
             }
             return this._preferences.preferences(prefsKey).pipe(switchMap((preferences) => __awaiter(this, void 0, void 0, function* () {
-                yield waitOnConditionAsync(() => this._preferences.loaded);
+                yield waitOnConditionAsync(() => this._preferences.isLoaded(prefsKey));
                 return preferences;
             })), take(1), map(preferences => {
                 let alterations = [];
@@ -2121,7 +2050,7 @@ class DatatableColumnPreferencesComponent {
     }
 }
 DatatableColumnPreferencesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatableColumnPreferencesComponent, deps: [{ token: THESEAM_DATATABLE }, { token: ColumnsAlterationsManagerService }], target: i0.ɵɵFactoryTarget.Component });
-DatatableColumnPreferencesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DatatableColumnPreferencesComponent, selector: "seam-datatable-column-preferences", ngImport: i0, template: "<h3>Columns</h3>\n\n<seam-form-field [numPaddingErrors]=\"0\" >\n  <input seamInput [formControl]=\"_filterControl\" seamInputSize=\"sm\" placeholder=\"Search\" seamAutoFocus>\n</seam-form-field>\n\n<div seamOverlayScrollbar style=\"min-height: 200px; max-height: 600px; min-width: 250px;\" class=\"flex-grow-1 mb-2\">\n  <div class=\"p-2\">\n    <ng-container *ngFor=\"let col of _columns$ | async\">\n      <seam-checkbox [checked]=\"!col.hidden\" (change)=\"_onChange($event, col)\">{{ col.name || col.prop }}</seam-checkbox>\n    </ng-container>\n  </div>\n\n</div>\n<div class=\"d-flex flex-row justify-content-end\">\n  <!-- <button seamButton size=\"sm\" theme=\"lightgray\" (click)=\"_onCloseClick()\">Close</button> -->\n  <!-- <button seamButton size=\"sm\" theme=\"lightgray\" class=\"mr-1\">Cancel</button>\n  <button seamButton size=\"sm\" theme=\"success\">Done</button> -->\n</div>\n", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.AutoFocusDirective, selector: "[seamAutoFocus]", inputs: ["seamAutoFocus"], exportAs: ["seamAutoFocus"] }, { kind: "directive", type: i1$1.OverlayScrollbarDirective, selector: "[seamOverlayScrollbar]", inputs: ["seamOverlayScrollbar", "overlayScrollbarEnabled"], exportAs: ["seamOverlayScrollbar"] }, { kind: "component", type: i5$2.TheSeamCheckboxComponent, selector: "seam-checkbox", inputs: ["tabIndex", "id", "aria-label", "aria-labelledby", "required", "checked", "disabled", "indeterminate", "name", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["seamCheckbox"] }, { kind: "component", type: i6$1.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i6$1.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-checkbox[seamInput] [ngbRadioGroup], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i7$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DatatableColumnPreferencesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DatatableColumnPreferencesComponent, selector: "seam-datatable-column-preferences", ngImport: i0, template: "<h3>Columns</h3>\n\n<seam-form-field [numPaddingErrors]=\"0\" >\n  <input seamInput [formControl]=\"_filterControl\" seamInputSize=\"sm\" placeholder=\"Search\" seamAutoFocus>\n</seam-form-field>\n\n<div seamOverlayScrollbar style=\"min-height: 200px; max-height: 600px; min-width: 250px;\" class=\"flex-grow-1 mb-2\">\n  <div class=\"p-2\">\n    <ng-container *ngFor=\"let col of _columns$ | async\">\n      <seam-checkbox [checked]=\"!col.hidden\" (change)=\"_onChange($event, col)\">{{ col.name || col.prop }}</seam-checkbox>\n    </ng-container>\n  </div>\n\n</div>\n<div class=\"d-flex flex-row justify-content-end\">\n  <!-- <button seamButton size=\"sm\" theme=\"lightgray\" (click)=\"_onCloseClick()\">Close</button> -->\n  <!-- <button seamButton size=\"sm\" theme=\"lightgray\" class=\"mr-1\">Cancel</button>\n  <button seamButton size=\"sm\" theme=\"success\">Done</button> -->\n</div>\n", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.AutoFocusDirective, selector: "[seamAutoFocus]", inputs: ["seamAutoFocus"], exportAs: ["seamAutoFocus"] }, { kind: "directive", type: i1$2.OverlayScrollbarDirective, selector: "[seamOverlayScrollbar]", inputs: ["seamOverlayScrollbar", "overlayScrollbarEnabled"], exportAs: ["seamOverlayScrollbar"] }, { kind: "component", type: i5$2.TheSeamCheckboxComponent, selector: "seam-checkbox", inputs: ["tabIndex", "id", "aria-label", "aria-labelledby", "required", "checked", "disabled", "indeterminate", "name", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["seamCheckbox"] }, { kind: "component", type: i6$1.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i6$1.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-checkbox[seamInput] [ngbRadioGroup], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i7$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatableColumnPreferencesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-datatable-column-preferences', changeDetection: ChangeDetectionStrategy.OnPush, template: "<h3>Columns</h3>\n\n<seam-form-field [numPaddingErrors]=\"0\" >\n  <input seamInput [formControl]=\"_filterControl\" seamInputSize=\"sm\" placeholder=\"Search\" seamAutoFocus>\n</seam-form-field>\n\n<div seamOverlayScrollbar style=\"min-height: 200px; max-height: 600px; min-width: 250px;\" class=\"flex-grow-1 mb-2\">\n  <div class=\"p-2\">\n    <ng-container *ngFor=\"let col of _columns$ | async\">\n      <seam-checkbox [checked]=\"!col.hidden\" (change)=\"_onChange($event, col)\">{{ col.name || col.prop }}</seam-checkbox>\n    </ng-container>\n  </div>\n\n</div>\n<div class=\"d-flex flex-row justify-content-end\">\n  <!-- <button seamButton size=\"sm\" theme=\"lightgray\" (click)=\"_onCloseClick()\">Close</button> -->\n  <!-- <button seamButton size=\"sm\" theme=\"lightgray\" class=\"mr-1\">Cancel</button>\n  <button seamButton size=\"sm\" theme=\"success\">Done</button> -->\n</div>\n", styles: [":host{display:flex;flex-direction:column}\n"] }]
@@ -2247,7 +2176,7 @@ class DatatableExportButtonComponent {
         return undefined;
     }
 }
-DatatableExportButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatableExportButtonComponent, deps: [{ token: THESEAM_DATATABLE }, { token: i1$2.ToastrService }, { token: i2$1.TheSeamLoadingOverlayService }, { token: i3.DynamicValueHelperService }, { token: THESEAM_DYNAMIC_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DatatableExportButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatableExportButtonComponent, deps: [{ token: THESEAM_DATATABLE }, { token: i1$3.ToastrService }, { token: i2$1.TheSeamLoadingOverlayService }, { token: i3.DynamicValueHelperService }, { token: THESEAM_DYNAMIC_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 DatatableExportButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DatatableExportButtonComponent, selector: "seam-datatable-export-button", inputs: { exporters: "exporters" }, ngImport: i0, template: "<seam-menu #menu>\n  <button *ngFor=\"let exp of exporters\"\n    seamMenuItem\n    [icon]=\"exp?.icon\"\n    (click)=\"_onExporterClicked(exp)\">\n    {{ exp.label }}\n  </button>\n</seam-menu>\n<button\n  [seamMenuToggle]=\"menu\"\n  seamButton\n  theme=\"lightgray\"\n  size=\"sm\"\n  class=\"dropdown-toggle\"\n  style=\"padding-left: 10px; padding-right: 10px;\"\n  title=\"Export\"\n  [disabled]=\"disabled\"\n  >\n  <seam-icon [icon]=\"icon\" class=\"mr-2\"></seam-icon>\n</button>\n", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4$1.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "directive", type: i4$1.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions"], outputs: ["menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "component", type: i4$1.MenuItemComponent, selector: "[seamMenuItem]", inputs: ["disabled", "role", "icon", "iconClass", "sublevelIcon", "subLevelIconClass", "badgeText", "badgeTheme"], exportAs: ["seamMenuItem"] }, { kind: "component", type: i5.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "component", type: i7$2.ButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatableExportButtonComponent, decorators: [{
             type: Component,
@@ -2256,7 +2185,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
         return [{ type: DatatableComponent, decorators: [{
                         type: Inject,
                         args: [THESEAM_DATATABLE]
-                    }] }, { type: i1$2.ToastrService }, { type: i2$1.TheSeamLoadingOverlayService }, { type: i3.DynamicValueHelperService }, { type: undefined, decorators: [{
+                    }] }, { type: i1$3.ToastrService }, { type: i2$1.TheSeamLoadingOverlayService }, { type: i3.DynamicValueHelperService }, { type: undefined, decorators: [{
                         type: Optional
                     }, {
                         type: Inject,
@@ -2342,7 +2271,7 @@ class DatatableActionMenuItemDirective {
         this.click = new EventEmitter();
     }
 }
-DatatableActionMenuItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatableActionMenuItemDirective, deps: [{ token: i1$3.Modal }, { token: i2$2.TheSeamDynamicComponentLoader }, { token: i3$1.HttpClient, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+DatatableActionMenuItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatableActionMenuItemDirective, deps: [{ token: i1$4.Modal }, { token: i2$2.TheSeamDynamicComponentLoader }, { token: i3$1.HttpClient, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
 DatatableActionMenuItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: DatatableActionMenuItemDirective, selector: "[seamDatatableActionMenuItem]", inputs: { label: "label", href: ["attr.href", "href"], target: "target", queryParams: "queryParams", fragment: "fragment", queryParamsHandling: "queryParamsHandling", preserveFragment: "preserveFragment", skipLocationChange: "skipLocationChange", replaceUrl: "replaceUrl", state: "state", routerLink: "routerLink", confirmDialog: "confirmDialog", row: "row" }, outputs: { click: "click" }, host: { properties: { "class.list-group-item": "this._listGroupItem", "class.list-group-item-action": "this._listGroupItemAction" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatableActionMenuItemDirective, decorators: [{
             type: Directive,
@@ -2350,7 +2279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                     selector: '[seamDatatableActionMenuItem]'
                 }]
         }], ctorParameters: function () {
-        return [{ type: i1$3.Modal }, { type: i2$2.TheSeamDynamicComponentLoader }, { type: i3$1.HttpClient, decorators: [{
+        return [{ type: i1$4.Modal }, { type: i2$2.TheSeamDynamicComponentLoader }, { type: i3$1.HttpClient, decorators: [{
                         type: Optional
                     }] }];
     }, propDecorators: { _listGroupItem: [{
@@ -2493,7 +2422,7 @@ class DatatableActionMenuToggleDirective {
         this._actionDown = false;
     }
 }
-DatatableActionMenuToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatableActionMenuToggleDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Directive });
+DatatableActionMenuToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatableActionMenuToggleDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$5.Overlay }], target: i0.ɵɵFactoryTarget.Directive });
 DatatableActionMenuToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: DatatableActionMenuToggleDirective, selector: "[seamDatatableActionMenuToggle]", inputs: { seamDatatableActionMenuToggle: "seamDatatableActionMenuToggle" }, host: { listeners: { "document:keydown": "_onKeydown($event)", "click": "_onClick($event)", "mousedown": "_mouseDown($event)", "pointerdown": "_pointerDown($event)", "mouseup": "_mouseUp($event)", "pointerup": "_pointerUp($event)" } }, exportAs: ["seamDatatableActionMenuToggle"], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatableActionMenuToggleDirective, decorators: [{
             type: Directive,
@@ -2501,7 +2430,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                     selector: '[seamDatatableActionMenuToggle]',
                     exportAs: 'seamDatatableActionMenuToggle'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1$4.Overlay }]; }, propDecorators: { seamDatatableActionMenuToggle: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1$5.Overlay }]; }, propDecorators: { seamDatatableActionMenuToggle: [{
                 type: Input
             }], _onKeydown: [{
                 type: HostListener,
@@ -2578,11 +2507,11 @@ class TheSeamDatatableScrollbarHelperService {
         });
     }
 }
-TheSeamDatatableScrollbarHelperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamDatatableScrollbarHelperService, deps: [{ token: i0.NgZone }, { token: i1$1.OverlayScrollbarsService }], target: i0.ɵɵFactoryTarget.Injectable });
+TheSeamDatatableScrollbarHelperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamDatatableScrollbarHelperService, deps: [{ token: i0.NgZone }, { token: i1$2.OverlayScrollbarsService }], target: i0.ɵɵFactoryTarget.Injectable });
 TheSeamDatatableScrollbarHelperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamDatatableScrollbarHelperService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamDatatableScrollbarHelperService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1$1.OverlayScrollbarsService }]; } });
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1$2.OverlayScrollbarsService }]; } });
 
 function withStoredColumnInfo(columns, preferenceColumns) {
     const _columns = [];