@theseam/ui-common 0.3.10 → 0.4.0-beta.0

package/fesm2015/theseam-ui-common-table-cell-types.mjs

@@ -0,0 +1,1134 @@
+import * as i1 from '@theseam/ui-common/table-cell-type';
+import { TABLE_CELL_DATA, TABLE_CELL_TYPE_MANIFEST, TheSeamTableCellTypeModule } from '@theseam/ui-common/table-cell-type';
+import * as i4 from '@angular/common';
+import { formatCurrency, formatNumber, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, Optional, Inject, Input, HostBinding, NgModule } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { notNullOrUndefined, isNumeric, hasProperty } from '@theseam/ui-common/utils';
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
+import * as i7 from '@theseam/ui-common/icon';
+import { getKnownIcon, TheSeamIconModule } from '@theseam/ui-common/icon';
+import * as i2 from '@theseam/ui-common/datatable';
+import * as i3 from '@theseam/ui-common/table';
+import * as i5 from '@ng-bootstrap/ng-bootstrap';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import * as i6 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i8 from '@theseam/ui-common/asset-reader';
+import { TheSeamAssetReaderModule } from '@theseam/ui-common/asset-reader';
+import * as i2$1 from '@theseam/ui-common/tel-input';
+import { THESEAM_DEFAULT_PHONE_NUMBER_FORMAT, coercePhoneNumberFormat, TheSeamTelInputModule } from '@theseam/ui-common/tel-input';
+import * as i7$1 from '@theseam/ui-common/progress';
+import { TheSeamProgressModule } from '@theseam/ui-common/progress';
+import * as i6$1 from '@theseam/ui-common/popover';
+import { TheSeamPopoverModule } from '@theseam/ui-common/popover';
+import { PortalModule } from '@angular/cdk/portal';
+import { TheSeamSharedModule } from '@theseam/ui-common/shared';
+
+class TableCellTypeCurrencyComponent {
+    // TODO: implement
+    // titleAttr?: string
+    constructor(_cdf, _tableCellTypeHelpers, _tableData) {
+        var _a, _b;
+        this._cdf = _cdf;
+        this._tableCellTypeHelpers = _tableCellTypeHelpers;
+        this._ngUnsubscribe = new Subject();
+        const tableData = _tableData;
+        this.value = tableData && this._formatCurrency(tableData.value, tableData);
+        this.row = tableData && tableData.row;
+        this.rowIndex = tableData && tableData.rowIndex;
+        this.colData = tableData && tableData.colData;
+        this.textAlign = this._parseConfigValue((_b = (_a = tableData === null || tableData === void 0 ? void 0 : tableData.colData) === null || _a === void 0 ? void 0 : _a.cellTypeConfig) === null || _b === void 0 ? void 0 : _b.textAlign, tableData) || 'right';
+        // this.titleAttr = this._parseConfigValue(tableData?.colData?.cellTypeConfig?.titleAttr, tableData) || this.value
+        if (tableData) {
+            tableData.changed
+                .pipe(takeUntil(this._ngUnsubscribe))
+                .subscribe(v => {
+                if (v.changes.hasOwnProperty('value')) {
+                    this.value = this._formatCurrency(v.changes.value.currentValue, tableData);
+                    this._cdf.markForCheck();
+                }
+                if (v.changes.hasOwnProperty('colData')) {
+                    this.colData = v.changes.colData.currentValue;
+                    this._cdf.markForCheck();
+                }
+            });
+        }
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next(undefined);
+        this._ngUnsubscribe.complete();
+    }
+    _formatCurrency(currentValue, tableData) {
+        var _a;
+        const config = (_a = tableData === null || tableData === void 0 ? void 0 : tableData.colData) === null || _a === void 0 ? void 0 : _a.cellTypeConfig;
+        const defaultToEmpty = notNullOrUndefined(config === null || config === void 0 ? void 0 : config.defaultToEmpty) ?
+            this._parseConfigValue(coerceBooleanProperty(config === null || config === void 0 ? void 0 : config.defaultToEmpty), tableData) : true;
+        const valueIsNumeric = isNumeric(currentValue);
+        if (!valueIsNumeric) {
+            if (defaultToEmpty) {
+                // return empty string instead of $0 when currentValue is empty or unparseable
+                return '';
+            }
+            else {
+                // set non-numeric value to 0 so it can be formatted the same as other numbers
+                currentValue = 0;
+            }
+        }
+        const locale = this._parseConfigValue(config === null || config === void 0 ? void 0 : config.locale, tableData) || 'en-US';
+        const currency = this._parseConfigValue(config === null || config === void 0 ? void 0 : config.currency, tableData) || '$';
+        const currencyCode = this._parseConfigValue(config === null || config === void 0 ? void 0 : config.currencyCode, tableData) || 'USD';
+        const minIntegerDigits = this._parseConfigValue(config === null || config === void 0 ? void 0 : config.minIntegerDigits, tableData) || 1;
+        const minFractionDigits = this._parseConfigValue(config === null || config === void 0 ? void 0 : config.minFractionDigits, tableData) || 2;
+        const maxFractionDigits = this._parseConfigValue(config === null || config === void 0 ? void 0 : config.maxFractionDigits, tableData) || 2;
+        const format = `${minIntegerDigits}.${minFractionDigits}-${maxFractionDigits}`;
+        return formatCurrency(currentValue, locale, currency, currencyCode, format);
+    }
+    _parseConfigValue(val, tableData) {
+        const contextFn = () => this._tableCellTypeHelpers.getValueContext(val, tableData);
+        return this._tableCellTypeHelpers.parseValueProp(val, contextFn);
+    }
+}
+TableCellTypeCurrencyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TableCellTypeCurrencyComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TableCellTypesHelpersService }, { token: TABLE_CELL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TableCellTypeCurrencyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: TableCellTypeCurrencyComponent, selector: "seam-table-cell-type-currency", inputs: { value: "value" }, ngImport: i0, template: "<div [class]=\"'text-' + textAlign\">\n  <seam-table-cell-type-selector\n    type=\"string\"\n    [value]=\"value\"\n    [rowIndex]=\"rowIndex\"\n    [row]=\"row\"\n    [colData]=\"colData\"></seam-table-cell-type-selector>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i1.TableCellTypeSelectorComponent, selector: "seam-table-cell-type-selector", inputs: ["type", "value", "rowIndex", "row", "colData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TableCellTypeCurrencyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-table-cell-type-currency', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"'text-' + textAlign\">\n  <seam-table-cell-type-selector\n    type=\"string\"\n    [value]=\"value\"\n    [rowIndex]=\"rowIndex\"\n    [row]=\"row\"\n    [colData]=\"colData\"></seam-table-cell-type-selector>\n</div>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ChangeDetectorRef }, { type: i1.TableCellTypesHelpersService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [TABLE_CELL_DATA]
+                    }] }];
+    }, propDecorators: { value: [{
+                type: Input
+            }] } });
+
+class TableCellTypeDateComponent {
+    constructor(_cdf, _tableData) {
+        this._cdf = _cdf;
+        this._ngUnsubscribe = new Subject();
+        const _data = _tableData;
+        this.value = _data && _data.value;
+        this.format = _data && _data.colData && _data.colData.cellTypeConfig && _data.colData.cellTypeConfig.format;
+        if (_data) {
+            _data.changed
+                .pipe(takeUntil(this._ngUnsubscribe))
+                .subscribe(v => {
+                if (v.changes.hasOwnProperty('value')) {
+                    this.value = v.changes.value.currentValue;
+                    this._cdf.markForCheck();
+                }
+                if (v.changes.hasOwnProperty('colData')) {
+                    const colData = v.changes.colData.currentValue;
+                    if (colData && colData.format !== this.format) {
+                        this.format = colData.format;
+                    }
+                    else {
+                        this.format = undefined;
+                    }
+                    this._cdf.markForCheck();
+                }
+            });
+        }
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next(undefined);
+        this._ngUnsubscribe.complete();
+    }
+}
+TableCellTypeDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TableCellTypeDateComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TABLE_CELL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TableCellTypeDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: TableCellTypeDateComponent, selector: "seam-table-cell-type-date", inputs: { value: "value", format: "format" }, ngImport: i0, template: "<div class=\"td-text-truncate\" [title]=\"value | date: format || 'yyyy-MM-dd h:mm aaa'\">\n  {{ value | date: format || 'yyyy-MM-dd h:mm aaa' }}\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: i4.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TableCellTypeDateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-table-cell-type-date', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"td-text-truncate\" [title]=\"value | date: format || 'yyyy-MM-dd h:mm aaa'\">\n  {{ value | date: format || 'yyyy-MM-dd h:mm aaa' }}\n</div>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [TABLE_CELL_DATA]
+                    }] }];
+    }, propDecorators: { value: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }] } });
+
+class TableCellTypeDecimalComponent {
+    constructor(_cdf, _tableCellTypeHelpers, _tableData) {
+        var _a, _b;
+        this._cdf = _cdf;
+        this._tableCellTypeHelpers = _tableCellTypeHelpers;
+        this._ngUnsubscribe = new Subject();
+        const tableData = _tableData;
+        this.value = tableData && this._formatDecimal(tableData.value, tableData);
+        this.row = tableData && tableData.row;
+        this.rowIndex = tableData && tableData.rowIndex;
+        this.colData = tableData && tableData.colData;
+        this.textAlign = this._parseConfigValue((_b = (_a = tableData === null || tableData === void 0 ? void 0 : tableData.colData) === null || _a === void 0 ? void 0 : _a.cellTypeConfig) === null || _b === void 0 ? void 0 : _b.textAlign, tableData) || 'right';
+        if (tableData) {
+            tableData.changed
+                .pipe(takeUntil(this._ngUnsubscribe))
+                .subscribe(v => {
+                if (v.changes.hasOwnProperty('value')) {
+                    this.value = this._formatDecimal(v.changes.value.currentValue, tableData);
+                    this._cdf.markForCheck();
+                }
+                if (v.changes.hasOwnProperty('colData')) {
+                    this.colData = v.changes.colData.currentValue;
+                    this._cdf.markForCheck();
+                }
+            });
+        }
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next(undefined);
+        this._ngUnsubscribe.complete();
+    }
+    _formatDecimal(currentValue, tableData) {
+        var _a;
+        const config = (_a = tableData === null || tableData === void 0 ? void 0 : tableData.colData) === null || _a === void 0 ? void 0 : _a.cellTypeConfig;
+        const defaultToEmpty = notNullOrUndefined(config === null || config === void 0 ? void 0 : config.defaultToEmpty) ?
+            this._parseConfigValue(coerceBooleanProperty(config === null || config === void 0 ? void 0 : config.defaultToEmpty), tableData) : true;
+        const formatDecimal = notNullOrUndefined(config === null || config === void 0 ? void 0 : config.formatNumber) ?
+            this._parseConfigValue(coerceBooleanProperty(config === null || config === void 0 ? void 0 : config.formatNumber), tableData) : true;
+        const valueIsNumeric = isNumeric(currentValue);
+        // unparseable values are OK to return as long as we're not trying to format them
+        if (!valueIsNumeric && formatDecimal) {
+            if (defaultToEmpty) {
+                // return empty string instead of 0 when currentValue is empty or unparseable
+                return '';
+            }
+            else {
+                // set non-numeric value to 0 so it can be formatted the same as other numbers
+                currentValue = 0;
+            }
+        }
+        const locale = this._parseConfigValue(config === null || config === void 0 ? void 0 : config.locale, tableData) || 'en-US';
+        const minIntegerDigits = this._parseConfigValue(config === null || config === void 0 ? void 0 : config.minIntegerDigits, tableData) || 1;
+        const minFractionDigits = this._parseConfigValue(config === null || config === void 0 ? void 0 : config.minFractionDigits, tableData) || 0;
+        const maxFractionDigits = this._parseConfigValue(config === null || config === void 0 ? void 0 : config.maxFractionDigits, tableData) || 3;
+        const format = `${minIntegerDigits}.${minFractionDigits}-${maxFractionDigits}`;
+        return formatDecimal ? formatNumber(currentValue, locale, format) : currentValue;
+    }
+    _parseConfigValue(val, tableData) {
+        const contextFn = () => this._tableCellTypeHelpers.getValueContext(val, tableData);
+        return this._tableCellTypeHelpers.parseValueProp(val, contextFn);
+    }
+}
+TableCellTypeDecimalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TableCellTypeDecimalComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TableCellTypesHelpersService }, { token: TABLE_CELL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TableCellTypeDecimalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: TableCellTypeDecimalComponent, selector: "seam-table-cell-type-decimal", inputs: { value: "value" }, ngImport: i0, template: "<div [class]=\"'text-' + textAlign\">\n  <seam-table-cell-type-selector\n    type=\"string\"\n    [value]=\"value\"\n    [rowIndex]=\"rowIndex\"\n    [row]=\"row\"\n    [colData]=\"colData\"></seam-table-cell-type-selector>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i1.TableCellTypeSelectorComponent, selector: "seam-table-cell-type-selector", inputs: ["type", "value", "rowIndex", "row", "colData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TableCellTypeDecimalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-table-cell-type-decimal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"'text-' + textAlign\">\n  <seam-table-cell-type-selector\n    type=\"string\"\n    [value]=\"value\"\n    [rowIndex]=\"rowIndex\"\n    [row]=\"row\"\n    [colData]=\"colData\"></seam-table-cell-type-selector>\n</div>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ChangeDetectorRef }, { type: i1.TableCellTypesHelpersService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [TABLE_CELL_DATA]
+                    }] }];
+    }, propDecorators: { value: [{
+                type: Input
+            }] } });
+
+class TableCellTypeIconComponent {
+    constructor(_cdf, _tableCellTypeHelpers, _datatable, _table, _tableData) {
+        this._cdf = _cdf;
+        this._tableCellTypeHelpers = _tableCellTypeHelpers;
+        this._datatable = _datatable;
+        this._table = _table;
+        this._ngUnsubscribe = new Subject();
+        this._tplType = 'default';
+        this._tooltipDisabled = true;
+        this._isDatatable = false;
+        if (_datatable) {
+            this._isDatatable = true;
+            // console.log('isDataTable')
+        }
+        // if (_table) {
+        //   console.log('isTable')
+        // }
+        const _data = _tableData;
+        this._tableCellData = _tableData;
+        this._row = _data && _data.row;
+        this._rowIndex = _data && _data.rowIndex;
+        this.value = _data && _data.value;
+        this._colData = _data && _data.colData;
+        if (_data && _data.colData && _data.colData.cellTypeConfig) {
+            this.config = _data.colData.cellTypeConfig;
+        }
+        if (_data) {
+            _data.changed
+                .pipe(takeUntil(this._ngUnsubscribe))
+                .subscribe(v => {
+                if (v.changes.hasOwnProperty('value')) {
+                    this.value = v.changes.value.currentValue;
+                    this.config = this._config;
+                    this._cdf.markForCheck();
+                }
+                if (v.changes.hasOwnProperty('colData')) {
+                    const colData = v.changes.colData.currentValue;
+                    if (colData && colData.cellTypeConfig !== this.config) {
+                        this.config = colData.cellTypeConfig;
+                    }
+                    else {
+                        this.config = undefined;
+                    }
+                    this._cdf.markForCheck();
+                }
+                else {
+                    if (v.changes.hasOwnProperty('row')) {
+                        this.config = this.config;
+                        this._cdf.markForCheck();
+                    }
+                }
+            });
+        }
+    }
+    get value() { return this._value; }
+    set value(value) {
+        this._value = value;
+        this._icon = value ? getKnownIcon(value) || value : value;
+    }
+    get config() { return this._config; }
+    set config(value) {
+        this._config = value;
+        if (value) {
+            this.setAction(value.action);
+            this._linkClass = this._parseConfigValue(value.linkClass);
+            this._iconClass = this._parseConfigValue(value.iconClass);
+            this._iconType = value.iconType;
+            this._title = this._parseConfigValue(value.titleAttr);
+            this._srOnly = this._parseConfigValue(value.srOnly);
+            this._tooltip = this._parseConfigValue(value.tooltip);
+            if (this._tooltip) {
+                this._tooltipClass = this._parseConfigValue(value.tooltipClass);
+                this._tooltipPlacement = this._parseConfigValue(value.tooltipPlacement) || 'auto';
+                this._tooltipContainer = this._parseConfigValue(value.tooltipContainer);
+                this._tooltipDisabled = false;
+            }
+            else {
+                this._tooltipDisabled = true;
+            }
+        }
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next(undefined);
+        this._ngUnsubscribe.complete();
+    }
+    setAction(configAction) {
+        let newTplType = 'default';
+        let link;
+        let download = false;
+        let detectMimeContent = false;
+        let target;
+        let queryParams;
+        if (configAction) {
+            if (configAction.type === 'link') {
+                link = this._parseConfigValue(configAction.link);
+                if (link !== undefined && link !== null) {
+                    newTplType = this._parseConfigValue(configAction.asset)
+                        ? 'link-encrypted'
+                        : this._parseConfigValue(configAction.external) ? 'link-external' : 'link';
+                    download = !!this._parseConfigValue(configAction.download);
+                    detectMimeContent = !!this._parseConfigValue(configAction.detectMimeContent);
+                    target = this._parseConfigValue(configAction.target);
+                    queryParams = this._parseConfigValue(configAction.queryParams);
+                }
+            }
+            else if (configAction.type === 'modal') {
+                newTplType = 'button';
+                this._buttonAction = configAction;
+            }
+        }
+        this._tplType = newTplType;
+        this._link = link;
+        this._download = download;
+        this._detectMimeContent = detectMimeContent;
+        this._target = target;
+        this._queryParams = queryParams;
+    }
+    _parseConfigValue(val) {
+        const contextFn = () => this._tableCellTypeHelpers.getValueContext(val, this._tableCellData);
+        return this._tableCellTypeHelpers.parseValueProp(val, contextFn);
+    }
+    _doButtonAction() {
+        if (this._buttonAction && this._buttonAction.type === 'modal') {
+            const contextFn = () => this._tableCellTypeHelpers.getValueContext(this.value, this._tableCellData);
+            this._tableCellTypeHelpers.handleModalAction(this._buttonAction, contextFn)
+                .subscribe(r => { }, err => console.error(err), () => this._actionRefreshRequest());
+        }
+    }
+    _actionRefreshRequest() {
+        if (this._datatable) {
+            this._datatable.triggerActionRefreshRequest();
+        }
+        else if (this._table) {
+            this._table.triggerActionRefreshRequest();
+        }
+    }
+}
+TableCellTypeIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TableCellTypeIconComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TableCellTypesHelpersService }, { token: i2.DatatableComponent, optional: true }, { token: i3.TableComponent, optional: true }, { token: TABLE_CELL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TableCellTypeIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: TableCellTypeIconComponent, selector: "seam-table-cell-type-icon", inputs: { value: "value", config: "config" }, host: { properties: { "class.datatable-cell-type": "this._isDatatable" } }, ngImport: i0, template: "<ng-container *ngIf=\"_icon\">\n  <div *ngIf=\"!_tplType || _tplType === 'default'\"\n    class=\"d-flex align-items-center justify-center\"\n    [class.datatable-icon-fix]=\"_isDatatable\">\n    <a class=\"d-block m-auto{{ _linkClass ? ' ' + _linkClass : '' }}\"\n      [attr.title]=\"_tooltipDisabled ? _title : undefined\"\n      [attr.target]=\"_target\"\n      [ngbTooltip]=\"_tooltip\"\n      [tooltipClass]=\"$any(_tooltipClass)\"\n      [placement]=\"$any(_tooltipPlacement)\"\n      [container]=\"$any(_tooltipContainer)\"\n      [disableTooltip]=\"_tooltipDisabled\">\n      <seam-icon [icon]=\"_icon\" size=\"lg\" [iconType]=\"_iconType\" [iconClass]=\"_iconClass || ''\"></seam-icon>\n      <span *ngIf=\"_srOnly\" class=\"sr-only\">{{ _srOnly }}</span>\n    </a>\n  </div>\n\n  <div *ngIf=\"_tplType === 'link'\"\n    class=\"d-flex align-items-center justify-center\"\n    [class.datatable-icon-fix]=\"_isDatatable\">\n    <a class=\"d-block m-auto{{ _linkClass ? ' ' + _linkClass : '' }}\"\n      [routerLink]=\"_link\"\n      [queryParams]=\"_queryParams\"\n      [attr.title]=\"_tooltipDisabled ? _title : undefined\"\n      [attr.target]=\"_target\"\n      [ngbTooltip]=\"_tooltip\"\n      [tooltipClass]=\"$any(_tooltipClass)\"\n      [placement]=\"$any(_tooltipPlacement)\"\n      [container]=\"$any(_tooltipContainer)\"\n      [disableTooltip]=\"_tooltipDisabled\">\n      <seam-icon *ngIf=\"_icon\" [icon]=\"_icon\" size=\"lg\" [iconType]=\"_iconType\" [iconClass]=\"_iconClass\"></seam-icon>\n      <span *ngIf=\"_srOnly\" class=\"sr-only\">{{ _srOnly }}</span>\n    </a>\n  </div>\n\n  <div *ngIf=\"_tplType === 'link-external'\"\n    class=\"d-flex align-items-center justify-center\"\n    [class.datatable-icon-fix]=\"_isDatatable\">\n    <a class=\"d-block m-auto{{ _linkClass ? ' ' + _linkClass : '' }}\"\n      [attr.href]=\"_link\"\n      [attr.title]=\"_tooltipDisabled ? _title : undefined\"\n      [attr.target]=\"_target\"\n      [ngbTooltip]=\"_tooltip\"\n      [tooltipClass]=\"$any(_tooltipClass)\"\n      [placement]=\"$any(_tooltipPlacement)\"\n      [container]=\"$any(_tooltipContainer)\"\n      [disableTooltip]=\"_tooltipDisabled\">\n      <seam-icon *ngIf=\"_icon\" [icon]=\"_icon\" size=\"lg\" [iconType]=\"_iconType\" [iconClass]=\"_iconClass\"></seam-icon>\n      <span *ngIf=\"_srOnly\" class=\"sr-only\">{{ _srOnly }}</span>\n    </a>\n  </div>\n\n  <div *ngIf=\"_tplType === 'link-encrypted'\"\n    class=\"d-flex align-items-center justify-center\"\n    [class.datatable-icon-fix]=\"_isDatatable\">\n    <button\n      class=\"btn btn-link p-0 m-auto{{ _linkClass ? ' ' + _linkClass : '' }}\"\n      type=\"button\"\n      [seamEncryptedAssetLink]=\"_link\"\n      [seamDetectMimeFromContent]=\"_detectMimeContent\"\n      [seamDownloadAsset]=\"_download\"\n      [attr.title]=\"_tooltipDisabled ? _title : undefined\"\n      [ngbTooltip]=\"_tooltip\"\n      [tooltipClass]=\"$any(_tooltipClass)\"\n      [placement]=\"$any(_tooltipPlacement)\"\n      [container]=\"$any(_tooltipContainer)\"\n      [disableTooltip]=\"_tooltipDisabled\">\n      <seam-icon *ngIf=\"_icon\" iconType=\"styled-square\" [icon]=\"_icon\" size=\"lg\" [iconType]=\"_iconType\" [iconClass]=\"_iconClass\"></seam-icon>\n      <span *ngIf=\"_srOnly\" class=\"sr-only\">{{ _srOnly }}</span>\n    </button>\n  </div>\n\n  <div *ngIf=\"_tplType === 'button'\"\n    class=\"d-flex align-items-center justify-center\"\n    [class.datatable-icon-fix]=\"_isDatatable\"\n    (click)=\"_doButtonAction()\">\n    <button\n      class=\"btn btn-link p-0 m-auto{{ _linkClass ? ' ' + _linkClass : '' }}\"\n      type=\"button\"\n      [attr.title]=\"_tooltipDisabled ? _title : undefined\"\n      [ngbTooltip]=\"_tooltip\"\n      [tooltipClass]=\"$any(_tooltipClass)\"\n      [placement]=\"$any(_tooltipPlacement)\"\n      [container]=\"$any(_tooltipContainer)\"\n      [disableTooltip]=\"_tooltipDisabled\">\n      <seam-icon *ngIf=\"_icon\" iconType=\"styled-square\" [icon]=\"_icon\" size=\"lg\" [iconType]=\"_iconType\" [iconClass]=\"_iconClass\"></seam-icon>\n      <span *ngIf=\"_srOnly\" class=\"sr-only\">{{ _srOnly }}</span>\n    </button>\n  </div>\n</ng-container>\n", styles: [":host.datatable-cell-type ::ng-deep .seam-icon--img{max-height:40px}:host.datatable-cell-type a{max-height:40px}:host.datatable-cell-type button{max-height:40px}:host:not(.datatable-cell-type) ::ng-deep .seam-icon--img{max-height:20px}:host:not(.datatable-cell-type) a{max-height:20px}:host:not(.datatable-cell-type) button{max-height:20px}.datatable-icon-fix{margin-top:calc(-1px - .75rem);height:50px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i7.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "directive", type: i8.EncryptedAssetLinkDirective, selector: "[seamEncryptedAssetLink]", inputs: ["seamEncryptedAssetLink", "seamShowLoadingOverlay", "seamDetectMimeFromContent", "seamDownloadAsset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TableCellTypeIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-table-cell-type-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"_icon\">\n  <div *ngIf=\"!_tplType || _tplType === 'default'\"\n    class=\"d-flex align-items-center justify-center\"\n    [class.datatable-icon-fix]=\"_isDatatable\">\n    <a class=\"d-block m-auto{{ _linkClass ? ' ' + _linkClass : '' }}\"\n      [attr.title]=\"_tooltipDisabled ? _title : undefined\"\n      [attr.target]=\"_target\"\n      [ngbTooltip]=\"_tooltip\"\n      [tooltipClass]=\"$any(_tooltipClass)\"\n      [placement]=\"$any(_tooltipPlacement)\"\n      [container]=\"$any(_tooltipContainer)\"\n      [disableTooltip]=\"_tooltipDisabled\">\n      <seam-icon [icon]=\"_icon\" size=\"lg\" [iconType]=\"_iconType\" [iconClass]=\"_iconClass || ''\"></seam-icon>\n      <span *ngIf=\"_srOnly\" class=\"sr-only\">{{ _srOnly }}</span>\n    </a>\n  </div>\n\n  <div *ngIf=\"_tplType === 'link'\"\n    class=\"d-flex align-items-center justify-center\"\n    [class.datatable-icon-fix]=\"_isDatatable\">\n    <a class=\"d-block m-auto{{ _linkClass ? ' ' + _linkClass : '' }}\"\n      [routerLink]=\"_link\"\n      [queryParams]=\"_queryParams\"\n      [attr.title]=\"_tooltipDisabled ? _title : undefined\"\n      [attr.target]=\"_target\"\n      [ngbTooltip]=\"_tooltip\"\n      [tooltipClass]=\"$any(_tooltipClass)\"\n      [placement]=\"$any(_tooltipPlacement)\"\n      [container]=\"$any(_tooltipContainer)\"\n      [disableTooltip]=\"_tooltipDisabled\">\n      <seam-icon *ngIf=\"_icon\" [icon]=\"_icon\" size=\"lg\" [iconType]=\"_iconType\" [iconClass]=\"_iconClass\"></seam-icon>\n      <span *ngIf=\"_srOnly\" class=\"sr-only\">{{ _srOnly }}</span>\n    </a>\n  </div>\n\n  <div *ngIf=\"_tplType === 'link-external'\"\n    class=\"d-flex align-items-center justify-center\"\n    [class.datatable-icon-fix]=\"_isDatatable\">\n    <a class=\"d-block m-auto{{ _linkClass ? ' ' + _linkClass : '' }}\"\n      [attr.href]=\"_link\"\n      [attr.title]=\"_tooltipDisabled ? _title : undefined\"\n      [attr.target]=\"_target\"\n      [ngbTooltip]=\"_tooltip\"\n      [tooltipClass]=\"$any(_tooltipClass)\"\n      [placement]=\"$any(_tooltipPlacement)\"\n      [container]=\"$any(_tooltipContainer)\"\n      [disableTooltip]=\"_tooltipDisabled\">\n      <seam-icon *ngIf=\"_icon\" [icon]=\"_icon\" size=\"lg\" [iconType]=\"_iconType\" [iconClass]=\"_iconClass\"></seam-icon>\n      <span *ngIf=\"_srOnly\" class=\"sr-only\">{{ _srOnly }}</span>\n    </a>\n  </div>\n\n  <div *ngIf=\"_tplType === 'link-encrypted'\"\n    class=\"d-flex align-items-center justify-center\"\n    [class.datatable-icon-fix]=\"_isDatatable\">\n    <button\n      class=\"btn btn-link p-0 m-auto{{ _linkClass ? ' ' + _linkClass : '' }}\"\n      type=\"button\"\n      [seamEncryptedAssetLink]=\"_link\"\n      [seamDetectMimeFromContent]=\"_detectMimeContent\"\n      [seamDownloadAsset]=\"_download\"\n      [attr.title]=\"_tooltipDisabled ? _title : undefined\"\n      [ngbTooltip]=\"_tooltip\"\n      [tooltipClass]=\"$any(_tooltipClass)\"\n      [placement]=\"$any(_tooltipPlacement)\"\n      [container]=\"$any(_tooltipContainer)\"\n      [disableTooltip]=\"_tooltipDisabled\">\n      <seam-icon *ngIf=\"_icon\" iconType=\"styled-square\" [icon]=\"_icon\" size=\"lg\" [iconType]=\"_iconType\" [iconClass]=\"_iconClass\"></seam-icon>\n      <span *ngIf=\"_srOnly\" class=\"sr-only\">{{ _srOnly }}</span>\n    </button>\n  </div>\n\n  <div *ngIf=\"_tplType === 'button'\"\n    class=\"d-flex align-items-center justify-center\"\n    [class.datatable-icon-fix]=\"_isDatatable\"\n    (click)=\"_doButtonAction()\">\n    <button\n      class=\"btn btn-link p-0 m-auto{{ _linkClass ? ' ' + _linkClass : '' }}\"\n      type=\"button\"\n      [attr.title]=\"_tooltipDisabled ? _title : undefined\"\n      [ngbTooltip]=\"_tooltip\"\n      [tooltipClass]=\"$any(_tooltipClass)\"\n      [placement]=\"$any(_tooltipPlacement)\"\n      [container]=\"$any(_tooltipContainer)\"\n      [disableTooltip]=\"_tooltipDisabled\">\n      <seam-icon *ngIf=\"_icon\" iconType=\"styled-square\" [icon]=\"_icon\" size=\"lg\" [iconType]=\"_iconType\" [iconClass]=\"_iconClass\"></seam-icon>\n      <span *ngIf=\"_srOnly\" class=\"sr-only\">{{ _srOnly }}</span>\n    </button>\n  </div>\n</ng-container>\n", styles: [":host.datatable-cell-type ::ng-deep .seam-icon--img{max-height:40px}:host.datatable-cell-type a{max-height:40px}:host.datatable-cell-type button{max-height:40px}:host:not(.datatable-cell-type) ::ng-deep .seam-icon--img{max-height:20px}:host:not(.datatable-cell-type) a{max-height:20px}:host:not(.datatable-cell-type) button{max-height:20px}.datatable-icon-fix{margin-top:calc(-1px - .75rem);height:50px}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ChangeDetectorRef }, { type: i1.TableCellTypesHelpersService }, { type: i2.DatatableComponent, decorators: [{
+                        type: Optional
+                    }] }, { type: i3.TableComponent, decorators: [{
+                        type: Optional
+                    }] }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [TABLE_CELL_DATA]
+                    }] }];
+    }, propDecorators: { value: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], _isDatatable: [{
+                type: HostBinding,
+                args: ['class.datatable-cell-type']
+            }] } });
+
+class TableCellTypeIntegerComponent {
+    constructor(_cdf, _tableCellTypeHelpers, _tableData) {
+        var _a, _b;
+        this._cdf = _cdf;
+        this._tableCellTypeHelpers = _tableCellTypeHelpers;
+        this._ngUnsubscribe = new Subject();
+        const tableData = _tableData;
+        this.value = tableData && this._formatInteger(tableData.value, tableData);
+        this.row = tableData && tableData.row;
+        this.rowIndex = tableData && tableData.rowIndex;
+        this.colData = tableData && tableData.colData;
+        this.textAlign = this._parseConfigValue((_b = (_a = tableData === null || tableData === void 0 ? void 0 : tableData.colData) === null || _a === void 0 ? void 0 : _a.cellTypeConfig) === null || _b === void 0 ? void 0 : _b.textAlign, tableData) || 'right';
+        if (tableData) {
+            tableData.changed
+                .pipe(takeUntil(this._ngUnsubscribe))
+                .subscribe(v => {
+                if (v.changes.hasOwnProperty('value')) {
+                    this.value = this._formatInteger(v.changes.value.currentValue, tableData);
+                    this._cdf.markForCheck();
+                }
+                if (v.changes.hasOwnProperty('colData')) {
+                    this.colData = v.changes.colData.currentValue;
+                    this._cdf.markForCheck();
+                }
+            });
+        }
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next(undefined);
+        this._ngUnsubscribe.complete();
+    }
+    _formatInteger(currentValue, tableData) {
+        var _a;
+        const config = (_a = tableData === null || tableData === void 0 ? void 0 : tableData.colData) === null || _a === void 0 ? void 0 : _a.cellTypeConfig;
+        const defaultToEmpty = notNullOrUndefined(config === null || config === void 0 ? void 0 : config.defaultToEmpty) ?
+            this._parseConfigValue(coerceBooleanProperty(config === null || config === void 0 ? void 0 : config.defaultToEmpty), tableData) : true;
+        const formatInteger = notNullOrUndefined(config === null || config === void 0 ? void 0 : config.formatNumber) ?
+            this._parseConfigValue(coerceBooleanProperty(config === null || config === void 0 ? void 0 : config.formatNumber), tableData) : true;
+        const valueIsNumeric = isNumeric(currentValue);
+        // unparseable values are OK to return as long as we're not trying to format them
+        if (!valueIsNumeric && formatInteger) {
+            if (defaultToEmpty) {
+                // return empty string instead of 0 when currentValue is empty or unparseable
+                return '';
+            }
+            else {
+                // set non-numeric value to 0 so it can be formatted the same as other numbers
+                currentValue = 0;
+            }
+        }
+        const locale = this._parseConfigValue(config === null || config === void 0 ? void 0 : config.locale, tableData) || 'en-US';
+        const minIntegerDigits = this._parseConfigValue(config === null || config === void 0 ? void 0 : config.minIntegerDigits, tableData) || 1;
+        const format = `${minIntegerDigits}.0-0`;
+        return formatInteger ? formatNumber(currentValue, locale, format) : currentValue;
+    }
+    _parseConfigValue(val, tableData) {
+        const contextFn = () => this._tableCellTypeHelpers.getValueContext(val, tableData);
+        return this._tableCellTypeHelpers.parseValueProp(val, contextFn);
+    }
+}
+TableCellTypeIntegerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TableCellTypeIntegerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TableCellTypesHelpersService }, { token: TABLE_CELL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TableCellTypeIntegerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: TableCellTypeIntegerComponent, selector: "seam-table-cell-type-integer", inputs: { value: "value" }, ngImport: i0, template: "<div [class]=\"'text-' + textAlign\">\n  <seam-table-cell-type-selector\n    type=\"string\"\n    [value]=\"value\"\n    [rowIndex]=\"rowIndex\"\n    [row]=\"row\"\n    [colData]=\"colData\"></seam-table-cell-type-selector>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i1.TableCellTypeSelectorComponent, selector: "seam-table-cell-type-selector", inputs: ["type", "value", "rowIndex", "row", "colData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TableCellTypeIntegerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-table-cell-type-integer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"'text-' + textAlign\">\n  <seam-table-cell-type-selector\n    type=\"string\"\n    [value]=\"value\"\n    [rowIndex]=\"rowIndex\"\n    [row]=\"row\"\n    [colData]=\"colData\"></seam-table-cell-type-selector>\n</div>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ChangeDetectorRef }, { type: i1.TableCellTypesHelpersService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [TABLE_CELL_DATA]
+                    }] }];
+    }, propDecorators: { value: [{
+                type: Input
+            }] } });
+
+class TableCellTypePhoneComponent {
+    constructor(_cdf, _tableData) {
+        this._cdf = _cdf;
+        /** @ignore */
+        this._ngUnsubscribe = new Subject();
+        /** @ignore */
+        this._format = THESEAM_DEFAULT_PHONE_NUMBER_FORMAT;
+        const _data = _tableData;
+        this.value = _data && _data.value;
+        if (_data && _data.colData && _data.colData.cellTypeConfig && hasProperty(_data.colData.cellTypeConfig, 'format')) {
+            this.format = _data.colData.cellTypeConfig.format;
+        }
+        if (_data) {
+            _data.changed
+                .pipe(takeUntil(this._ngUnsubscribe))
+                .subscribe(v => {
+                if (v.changes.hasOwnProperty('value')) {
+                    this.value = v.changes.value.currentValue;
+                    this._cdf.markForCheck();
+                }
+                if (v.changes.hasOwnProperty('colData')) {
+                    const colData = v.changes.colData.currentValue;
+                    if (colData && hasProperty(colData, 'cellTypeConfig') &&
+                        hasProperty(colData.cellTypeConfig, 'format') &&
+                        colData.cellTypeConfig.format !== this.format) {
+                        this.format = colData.cellTypeConfig.format;
+                    }
+                    else {
+                        this.format = THESEAM_DEFAULT_PHONE_NUMBER_FORMAT;
+                    }
+                    this._cdf.markForCheck();
+                }
+            });
+        }
+    }
+    set format(value) { this._format = coercePhoneNumberFormat(value); }
+    get format() { return this._format; }
+    ngOnInit() { }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next(undefined);
+        this._ngUnsubscribe.complete();
+    }
+}
+TableCellTypePhoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TableCellTypePhoneComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TABLE_CELL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TableCellTypePhoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: TableCellTypePhoneComponent, selector: "seam-table-cell-type-phone", inputs: { value: "value", format: "format" }, ngImport: i0, template: "<ng-container *ngIf=\"((value || '') | phoneNumber: _format) as num\">\n  <div class=\"td-text-truncate\" [title]=\"num\">\n    {{ num }}\n  </div>\n</ng-container>\n<!-- <div class=\"td-text-truncate\" [title]=\"value | phoneNumber: _format\">\n  {{ value | date: format || 'yyyy-MM-dd h:mm aaa' }}\n</div> -->\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$1.TheSeamPhoneNumberPipe, name: "phoneNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TableCellTypePhoneComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-table-cell-type-phone', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"((value || '') | phoneNumber: _format) as num\">\n  <div class=\"td-text-truncate\" [title]=\"num\">\n    {{ num }}\n  </div>\n</ng-container>\n<!-- <div class=\"td-text-truncate\" [title]=\"value | phoneNumber: _format\">\n  {{ value | date: format || 'yyyy-MM-dd h:mm aaa' }}\n</div> -->\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [TABLE_CELL_DATA]
+                    }] }];
+    }, propDecorators: { value: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }] } });
+
+class TableCellTypeProgressCircleIconComponent {
+    constructor(_cdf, _tableCellTypeHelpers, _tableData) {
+        this._cdf = _cdf;
+        this._tableCellTypeHelpers = _tableCellTypeHelpers;
+        this._ngUnsubscribe = new Subject();
+        this.displayIcon = false;
+        const tableData = _tableData;
+        this.value = tableData && tableData.value;
+        this.row = tableData && tableData.row;
+        this.rowIndex = tableData && tableData.rowIndex;
+        this.colData = tableData && tableData.colData;
+        this._setIcon(tableData);
+        if (tableData) {
+            tableData.changed
+                .pipe(takeUntil(this._ngUnsubscribe))
+                .subscribe(v => {
+                if (v.changes.hasOwnProperty('value')) {
+                    this.value = v.changes.value.currentValue;
+                    this._setIcon(tableData);
+                    this._cdf.markForCheck();
+                }
+                if (v.changes.hasOwnProperty('colData')) {
+                    this.colData = v.changes.colData.currentValue;
+                    this._setIcon(tableData);
+                    this._cdf.markForCheck();
+                }
+                else {
+                    if (v.changes.hasOwnProperty('row')) {
+                        this._setIcon(tableData);
+                        this._cdf.markForCheck();
+                    }
+                }
+            });
+        }
+    }
+    _setIcon(tableData) {
+        if (tableData &&
+            tableData.colData &&
+            tableData.colData.cellTypeConfig &&
+            tableData.colData.cellTypeConfig.displayIcon &&
+            tableData.colData.cellTypeConfig.icon &&
+            this._parseConfigValue(tableData.colData.cellTypeConfig.displayIcon, tableData) &&
+            this._parseConfigValue(tableData.colData.cellTypeConfig.icon, tableData)) {
+            this.icon = this._parseConfigValue(tableData.colData.cellTypeConfig.icon, tableData);
+            this.displayIcon = this._parseConfigValue(tableData.colData.cellTypeConfig.displayIcon, tableData);
+        }
+    }
+    _parseConfigValue(val, tableData) {
+        const contextFn = () => this._tableCellTypeHelpers.getValueContext(val, tableData);
+        return this._tableCellTypeHelpers.parseValueProp(val, contextFn);
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next(undefined);
+        this._ngUnsubscribe.complete();
+    }
+}
+TableCellTypeProgressCircleIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TableCellTypeProgressCircleIconComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TableCellTypesHelpersService }, { token: TABLE_CELL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TableCellTypeProgressCircleIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: TableCellTypeProgressCircleIconComponent, selector: "seam-table-cell-type-progress-circle-icon", inputs: { value: "value" }, ngImport: i0, template: "<seam-table-cell-type-selector\n  *ngIf=\"displayIcon; else progressCircle\"\n  type=\"icon\"\n  [value]=\"icon\"\n  [rowIndex]=\"rowIndex\"\n  [row]=\"row\"\n  [colData]=\"colData\"></seam-table-cell-type-selector>\n<ng-template #progressCircle>\n  <seam-table-cell-type-selector\n    type=\"progress-circle\"\n    [value]=\"value\"\n    [rowIndex]=\"rowIndex\"\n    [row]=\"row\"\n    [colData]=\"colData\"></seam-table-cell-type-selector>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.TableCellTypeSelectorComponent, selector: "seam-table-cell-type-selector", inputs: ["type", "value", "rowIndex", "row", "colData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TableCellTypeProgressCircleIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-table-cell-type-progress-circle-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<seam-table-cell-type-selector\n  *ngIf=\"displayIcon; else progressCircle\"\n  type=\"icon\"\n  [value]=\"icon\"\n  [rowIndex]=\"rowIndex\"\n  [row]=\"row\"\n  [colData]=\"colData\"></seam-table-cell-type-selector>\n<ng-template #progressCircle>\n  <seam-table-cell-type-selector\n    type=\"progress-circle\"\n    [value]=\"value\"\n    [rowIndex]=\"rowIndex\"\n    [row]=\"row\"\n    [colData]=\"colData\"></seam-table-cell-type-selector>\n</ng-template>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ChangeDetectorRef }, { type: i1.TableCellTypesHelpersService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [TABLE_CELL_DATA]
+                    }] }];
+    }, propDecorators: { value: [{
+                type: Input
+            }] } });
+
+class TableCellTypeProgressCircleComponent {
+    constructor(_cdf, _tableCellTypeHelpers, _datatable, _table, _tableData) {
+        this._cdf = _cdf;
+        this._tableCellTypeHelpers = _tableCellTypeHelpers;
+        this._datatable = _datatable;
+        this._table = _table;
+        this._ngUnsubscribe = new Subject();
+        this.fillBackground = false;
+        this.showText = false;
+        this.hiddenOnEmpty = true;
+        this.pending = false;
+        this._tooltipDisabled = false;
+        this._linkClass = ''; // TODO: Decide if this makes sense
+        this._tplType = 'default';
+        this._isDatatable = false;
+        if (_datatable) {
+            this._isDatatable = true;
+        }
+        const tableData = _tableData;
+        this._tableCellData = _tableData;
+        this.value = tableData && coerceNumberProperty(tableData.value);
+        this.colData = tableData && tableData.colData;
+        if (this.colData && this.colData.cellTypeConfig) {
+            this._setCellTypeConfigProps(this.colData.cellTypeConfig);
+        }
+        if (tableData) {
+            tableData.changed
+                .pipe(takeUntil(this._ngUnsubscribe))
+                .subscribe(v => {
+                var _a;
+                if (v.changes.hasOwnProperty('value')) {
+                    this.value = coerceNumberProperty(v.changes.value.currentValue);
+                    if (this._config) {
+                        this._setCellTypeConfigProps(this._config);
+                    }
+                    this._cdf.markForCheck();
+                }
+                if (v.changes.hasOwnProperty('colData')) {
+                    this.colData = v.changes.colData.currentValue;
+                    if (this.colData && this.colData.cellTypeConfig) {
+                        this._setCellTypeConfigProps(this.colData.cellTypeConfig);
+                    }
+                    this._cdf.markForCheck();
+                }
+                else {
+                    if (v.changes.hasOwnProperty('row')) {
+                        if ((_a = this.colData) === null || _a === void 0 ? void 0 : _a.cellTypeConfig) {
+                            this._setCellTypeConfigProps(this.colData.cellTypeConfig);
+                            this._cdf.markForCheck();
+                        }
+                    }
+                }
+            });
+        }
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next(undefined);
+        this._ngUnsubscribe.complete();
+    }
+    _parseConfigValue(val) {
+        const contextFn = () => this._tableCellTypeHelpers.getValueContext(val, this._tableCellData);
+        return this._tableCellTypeHelpers.parseValueProp(val, contextFn);
+    }
+    setAction(configAction) {
+        let newTplType = 'default';
+        let link;
+        let download = false;
+        let detectMimeContent = false;
+        let target;
+        let queryParams;
+        if (configAction) {
+            if (configAction.type === 'link') {
+                link = this._parseConfigValue(configAction.link);
+                if (link !== undefined && link !== null) {
+                    newTplType = this._parseConfigValue(configAction.asset)
+                        ? 'link-encrypted'
+                        : this._parseConfigValue(configAction.external) ? 'link-external' : 'link';
+                    download = !!this._parseConfigValue(configAction.download);
+                    detectMimeContent = !!this._parseConfigValue(configAction.detectMimeContent);
+                    target = this._parseConfigValue(configAction.target);
+                    queryParams = this._parseConfigValue(configAction.queryParams);
+                }
+            }
+            else if (configAction.type === 'modal') {
+                newTplType = 'button';
+                this._buttonAction = configAction;
+            }
+        }
+        this._tplType = newTplType;
+        this._link = link;
+        this._download = download;
+        this._detectMimeContent = detectMimeContent;
+        this._target = target;
+        this._queryParams = queryParams;
+    }
+    _setCellTypeConfigProps(config) {
+        this._config = config;
+        this.setAction(config.action);
+        this.fillBackground = coerceBooleanProperty(this._parseConfigValue(config.fillBackground));
+        this.showText = coerceBooleanProperty(this._parseConfigValue(config.showText));
+        this.hiddenOnEmpty = coerceBooleanProperty(this._parseConfigValue(config.hiddenOnEmpty));
+        this.pending = coerceBooleanProperty(this._parseConfigValue(config.pending));
+        this.tooltip = this._parseConfigValue(config.tooltip);
+        this.tooltip = this._parseConfigValue(config.tooltip);
+        if (this.tooltip) {
+            this.tooltipClass = this._parseConfigValue(config.tooltipClass);
+            this.tooltipPlacement = this._parseConfigValue(config.tooltipPlacement) || 'auto';
+            this.tooltipContainer = this._parseConfigValue(config.tooltipContainer);
+            this._tooltipDisabled = false;
+        }
+        else {
+            this._tooltipDisabled = true;
+        }
+        this._title = this._parseConfigValue(config.titleAttr);
+        this._srOnly = this._parseConfigValue(config.srOnly);
+    }
+    _doButtonAction() {
+        if (this._buttonAction && this._buttonAction.type === 'modal') {
+            const contextFn = () => this._tableCellTypeHelpers.getValueContext(this.value, this._tableCellData);
+            this._tableCellTypeHelpers.handleModalAction(this._buttonAction, contextFn)
+                .subscribe(r => { }, err => console.error(err), () => this._actionRefreshRequest());
+        }
+    }
+    _actionRefreshRequest() {
+        if (this._datatable) {
+            this._datatable.triggerActionRefreshRequest();
+        }
+        else if (this._table) {
+            this._table.triggerActionRefreshRequest();
+        }
+    }
+}
+TableCellTypeProgressCircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TableCellTypeProgressCircleComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TableCellTypesHelpersService }, { token: i2.DatatableComponent, optional: true }, { token: i3.TableComponent, optional: true }, { token: TABLE_CELL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TableCellTypeProgressCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: TableCellTypeProgressCircleComponent, selector: "seam-table-cell-type-progress-circle", inputs: { value: "value" }, host: { properties: { "class.datatable-cell-type": "this._isDatatable" } }, ngImport: i0, template: "<ng-container *ngIf=\"!_tplType || _tplType === 'default'\">\n  <ng-template [ngTemplateOutlet]=\"progressCircleTpl\"></ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"_tplType === 'link'\">\n  <a class=\"d-block m-auto{{ _linkClass ? ' ' + _linkClass : '' }}\"\n    [routerLink]=\"_link\"\n    [queryParams]=\"_queryParams\"\n    [attr.title]=\"_tooltipDisabled ? _title : undefined\"\n    [attr.target]=\"_target\">\n    <ng-template [ngTemplateOutlet]=\"progressCircleTpl\"></ng-template>\n\n  </a>\n</ng-container>\n\n<ng-container *ngIf=\"_tplType === 'link-external'\"\n  class=\"d-flex align-items-center justify-center\"\n  [class.datatable-icon-fix]=\"_isDatatable\">\n  <a class=\"d-block m-auto{{ _linkClass ? ' ' + _linkClass : '' }}\"\n    [attr.href]=\"_link\"\n    [attr.title]=\"_tooltipDisabled ? _title : undefined\"\n    [attr.target]=\"_target\">\n    <ng-template [ngTemplateOutlet]=\"progressCircleTpl\"></ng-template>\n  </a>\n</ng-container>\n\n<ng-container *ngIf=\"_tplType === 'link-encrypted'\"\n  class=\"d-flex align-items-center justify-center\"\n  [class.datatable-icon-fix]=\"_isDatatable\">\n  <button\n    class=\"btn btn-link p-0 m-auto{{ _linkClass ? ' ' + _linkClass : '' }}\"\n    type=\"button\"\n    [seamEncryptedAssetLink]=\"_link\"\n    [seamDetectMimeFromContent]=\"_detectMimeContent\"\n    [seamDownloadAsset]=\"_download\"\n    [attr.title]=\"_tooltipDisabled ? _title : undefined\">\n    <ng-template [ngTemplateOutlet]=\"progressCircleTpl\"></ng-template>\n  </button>\n</ng-container>\n\n<ng-container *ngIf=\"_tplType === 'button'\"\n  class=\"d-flex align-items-center justify-center\"\n  [class.datatable-icon-fix]=\"_isDatatable\"\n  (click)=\"_doButtonAction()\">\n  <button\n    class=\"btn btn-link p-0 m-auto{{ _linkClass ? ' ' + _linkClass : '' }}\"\n    type=\"button\"\n    [attr.title]=\"_tooltipDisabled ? _title : undefined\">\n    <ng-template [ngTemplateOutlet]=\"progressCircleTpl\"></ng-template>\n  </button>\n</ng-container>\n\n<ng-template #progressCircleTpl>\n  <div class=\"progress-circle-wrapper\">\n    <seam-progress-circle\n      class=\"progress-circle\"\n      [fillBackground]=\"fillBackground\"\n      [showText]=\"showText\"\n      [hiddenOnEmpty]=\"hiddenOnEmpty\"\n      [percentage]=\"$any(value)\"\n      [pending]=\"pending\"\n      [ngbTooltip]=\"tooltip\"\n      [tooltipClass]=\"$any(tooltipClass)\"\n      [placement]=\"$any(tooltipPlacement)\"\n      [container]=\"$any(tooltipContainer)\">\n    </seam-progress-circle>\n    <span *ngIf=\"_srOnly\" class=\"sr-only\">{{ _srOnly }}</span>\n  </div>\n</ng-template>\n", styles: [":host.datatable-cell-type .progress-circle-wrapper{max-height:25px}:host.datatable-cell-type .progress-circle{position:relative;width:25px;height:25px;margin:0 auto}:host.datatable-cell-type .progress-circle ::ng-deep .seam-progress-circle{padding:0}:host:not(.datatable-cell-type) .progress-circle-wrapper{height:22px;max-height:22px}:host:not(.datatable-cell-type) .progress-circle{position:relative;width:25px;height:25px;margin:0 auto;margin-top:-.03rem}:host:not(.datatable-cell-type) .progress-circle ::ng-deep .seam-progress-circle{padding:0}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i7$1.ProgressCircleComponent, selector: "seam-progress-circle", inputs: ["fillBackground", "showText", "hiddenOnEmpty", "pending", "percentage"] }, { kind: "directive", type: i8.EncryptedAssetLinkDirective, selector: "[seamEncryptedAssetLink]", inputs: ["seamEncryptedAssetLink", "seamShowLoadingOverlay", "seamDetectMimeFromContent", "seamDownloadAsset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TableCellTypeProgressCircleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-table-cell-type-progress-circle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!_tplType || _tplType === 'default'\">\n  <ng-template [ngTemplateOutlet]=\"progressCircleTpl\"></ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"_tplType === 'link'\">\n  <a class=\"d-block m-auto{{ _linkClass ? ' ' + _linkClass : '' }}\"\n    [routerLink]=\"_link\"\n    [queryParams]=\"_queryParams\"\n    [attr.title]=\"_tooltipDisabled ? _title : undefined\"\n    [attr.target]=\"_target\">\n    <ng-template [ngTemplateOutlet]=\"progressCircleTpl\"></ng-template>\n\n  </a>\n</ng-container>\n\n<ng-container *ngIf=\"_tplType === 'link-external'\"\n  class=\"d-flex align-items-center justify-center\"\n  [class.datatable-icon-fix]=\"_isDatatable\">\n  <a class=\"d-block m-auto{{ _linkClass ? ' ' + _linkClass : '' }}\"\n    [attr.href]=\"_link\"\n    [attr.title]=\"_tooltipDisabled ? _title : undefined\"\n    [attr.target]=\"_target\">\n    <ng-template [ngTemplateOutlet]=\"progressCircleTpl\"></ng-template>\n  </a>\n</ng-container>\n\n<ng-container *ngIf=\"_tplType === 'link-encrypted'\"\n  class=\"d-flex align-items-center justify-center\"\n  [class.datatable-icon-fix]=\"_isDatatable\">\n  <button\n    class=\"btn btn-link p-0 m-auto{{ _linkClass ? ' ' + _linkClass : '' }}\"\n    type=\"button\"\n    [seamEncryptedAssetLink]=\"_link\"\n    [seamDetectMimeFromContent]=\"_detectMimeContent\"\n    [seamDownloadAsset]=\"_download\"\n    [attr.title]=\"_tooltipDisabled ? _title : undefined\">\n    <ng-template [ngTemplateOutlet]=\"progressCircleTpl\"></ng-template>\n  </button>\n</ng-container>\n\n<ng-container *ngIf=\"_tplType === 'button'\"\n  class=\"d-flex align-items-center justify-center\"\n  [class.datatable-icon-fix]=\"_isDatatable\"\n  (click)=\"_doButtonAction()\">\n  <button\n    class=\"btn btn-link p-0 m-auto{{ _linkClass ? ' ' + _linkClass : '' }}\"\n    type=\"button\"\n    [attr.title]=\"_tooltipDisabled ? _title : undefined\">\n    <ng-template [ngTemplateOutlet]=\"progressCircleTpl\"></ng-template>\n  </button>\n</ng-container>\n\n<ng-template #progressCircleTpl>\n  <div class=\"progress-circle-wrapper\">\n    <seam-progress-circle\n      class=\"progress-circle\"\n      [fillBackground]=\"fillBackground\"\n      [showText]=\"showText\"\n      [hiddenOnEmpty]=\"hiddenOnEmpty\"\n      [percentage]=\"$any(value)\"\n      [pending]=\"pending\"\n      [ngbTooltip]=\"tooltip\"\n      [tooltipClass]=\"$any(tooltipClass)\"\n      [placement]=\"$any(tooltipPlacement)\"\n      [container]=\"$any(tooltipContainer)\">\n    </seam-progress-circle>\n    <span *ngIf=\"_srOnly\" class=\"sr-only\">{{ _srOnly }}</span>\n  </div>\n</ng-template>\n", styles: [":host.datatable-cell-type .progress-circle-wrapper{max-height:25px}:host.datatable-cell-type .progress-circle{position:relative;width:25px;height:25px;margin:0 auto}:host.datatable-cell-type .progress-circle ::ng-deep .seam-progress-circle{padding:0}:host:not(.datatable-cell-type) .progress-circle-wrapper{height:22px;max-height:22px}:host:not(.datatable-cell-type) .progress-circle{position:relative;width:25px;height:25px;margin:0 auto;margin-top:-.03rem}:host:not(.datatable-cell-type) .progress-circle ::ng-deep .seam-progress-circle{padding:0}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ChangeDetectorRef }, { type: i1.TableCellTypesHelpersService }, { type: i2.DatatableComponent, decorators: [{
+                        type: Optional
+                    }] }, { type: i3.TableComponent, decorators: [{
+                        type: Optional
+                    }] }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [TABLE_CELL_DATA]
+                    }] }];
+    }, propDecorators: { value: [{
+                type: Input
+            }], _isDatatable: [{
+                type: HostBinding,
+                args: ['class.datatable-cell-type']
+            }] } });
+
+class TableCellTypeStringComponent {
+    constructor(_cdf, _tableCellTypeHelpers, _datatable, _table, _tableData) {
+        this._cdf = _cdf;
+        this._tableCellTypeHelpers = _tableCellTypeHelpers;
+        this._datatable = _datatable;
+        this._table = _table;
+        this._tableData = _tableData;
+        this._ngUnsubscribe = new Subject();
+        this._tplType = 'default';
+        this.canPopover = false;
+        const _data = _tableData;
+        this._tableCellData = _tableData;
+        this._row = _data && _data.row;
+        this._rowIndex = _data && _data.rowIndex;
+        this.value = _data && _data.value;
+        this._colData = _data && _data.colData;
+        if (_data && _data.colData && _data.colData.cellTypeConfig) {
+            this.config = _data.colData.cellTypeConfig;
+        }
+    }
+    get value() { return this._value; }
+    set value(val) {
+        this._value = val;
+        // TODO: This is temporary to test the feature and will be fixed when the
+        // dynamic column data is fixed. The plan is to add a config toggle to
+        // always enable and depending on performance it could try to decide on its
+        // own based on content size.
+        if (this.value && this.value.length > 30) {
+            this.canPopover = true;
+        }
+    }
+    get config() { return this._config; }
+    set config(value) {
+        this._config = value;
+        if (value) {
+            this.setConfig(value);
+        }
+    }
+    set title(value) { this._title = value; }
+    get title() { return this._title; }
+    get _titleAttr() { return this.title || this.value; }
+    set style(value) { this._style = value; }
+    get style() { return this._style; }
+    get _styleAttr() { return this.style; }
+    set classAttr(value) { this._class = value; }
+    get classAttr() { return this._class; }
+    get _classAttr() { return this.classAttr; }
+    ngOnInit() {
+        const _data = this._tableData;
+        if (_data) {
+            _data.changed
+                .pipe(takeUntil(this._ngUnsubscribe))
+                .subscribe(v => {
+                if (v.changes.hasOwnProperty('value')) {
+                    this.value = v.changes.value.currentValue;
+                    this._cdf.markForCheck();
+                }
+                if (v.changes.hasOwnProperty('colData')) {
+                    const colData = v.changes.colData.currentValue;
+                    if (colData && colData.cellTypeConfig !== this.config) {
+                        this.config = colData.cellTypeConfig;
+                    }
+                    else {
+                        this.config = undefined;
+                    }
+                    this._cdf.markForCheck();
+                }
+                else {
+                    if (v.changes.hasOwnProperty('row')) {
+                        this.config = this.config;
+                        this._cdf.markForCheck();
+                    }
+                }
+            });
+        }
+    }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next(undefined);
+        this._ngUnsubscribe.complete();
+    }
+    setAction(configAction) {
+        let newTplType = 'default';
+        let link;
+        let download = false;
+        let detectMimeContent = false;
+        let queryParams;
+        if (configAction) {
+            if (configAction.type === 'link') {
+                link = this._parseConfigValue(configAction.link);
+                if (link !== undefined && link !== null) {
+                    newTplType = this._parseConfigValue(configAction.asset) ? 'link-encrypted' : 'link';
+                    download = !!this._parseConfigValue(configAction.download);
+                    detectMimeContent = !!this._parseConfigValue(configAction.detectMimeContent);
+                    queryParams = this._parseConfigValue(configAction.queryParams);
+                }
+            }
+            else if (configAction.type === 'modal') {
+                newTplType = 'button';
+                this._buttonAction = configAction;
+            }
+        }
+        this._tplType = newTplType;
+        this._link = link;
+        this._download = download;
+        this._detectMimeContent = detectMimeContent;
+        this._queryParams = queryParams;
+    }
+    setConfig(config) {
+        if (!config) {
+            return;
+        }
+        const title = this._parseConfigValue(config.titleAttr);
+        if (title) {
+            this.title = title;
+        }
+        const style = this._parseConfigValue(config.styleAttr);
+        if (style) {
+            this.style = style;
+        }
+        const classAttr = this._parseConfigValue(config.classAttr);
+        if (classAttr) {
+            this.classAttr = classAttr;
+        }
+        this.setAction(config.action);
+    }
+    _parseConfigValue(val) {
+        const contextFn = () => this._tableCellTypeHelpers.getValueContext(val, this._tableCellData);
+        return this._tableCellTypeHelpers.parseValueProp(val, contextFn);
+    }
+    _doButtonAction() {
+        if (this._buttonAction && this._buttonAction.type === 'modal') {
+            const contextFn = () => this._tableCellTypeHelpers.getValueContext(this.value, this._tableCellData);
+            this._tableCellTypeHelpers.handleModalAction(this._buttonAction, contextFn)
+                .subscribe(r => { }, err => console.error(err), () => this._actionRefreshRequest());
+        }
+    }
+    _actionRefreshRequest() {
+        if (this._datatable) {
+            this._datatable.triggerActionRefreshRequest();
+        }
+        else if (this._table) {
+            this._table.triggerActionRefreshRequest();
+        }
+    }
+}
+TableCellTypeStringComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TableCellTypeStringComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TableCellTypesHelpersService }, { token: i2.DatatableComponent, optional: true }, { token: i3.TableComponent, optional: true }, { token: TABLE_CELL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TableCellTypeStringComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: TableCellTypeStringComponent, selector: "seam-table-cell-type-string", inputs: { value: "value", config: "config", title: "title", style: "style", classAttr: "classAttr" }, host: { properties: { "attr.title": "this._titleAttr", "attr.style": "this._styleAttr", "class": "this._classAttr" } }, ngImport: i0, template: "<ng-template #popoverTpl>\n  {{ value }}\n</ng-template>\n\n<ng-template #noPopover>\n  <div class=\"text-truncate\">\n    {{ value }}\n  </div>\n</ng-template>\n\n<ng-container *ngIf=\"!_tplType || _tplType === 'default'\">\n  <div *ngIf=\"canPopover; else noPopover\" [seamPopover]=\"popoverTpl\">\n    <ng-template [ngTemplateOutlet]=\"noPopover\"></ng-template>\n  </div>\n</ng-container>\n\n\n\n<ng-container *ngIf=\"_tplType === 'link'\">\n  <a class=\"d-block text-body text-decoration-none\"\n    [routerLink]=\"_link\"\n    [queryParams]=\"_queryParams\"\n    [attr.title]=\"_title\">\n    <ng-template [ngTemplateOutlet]=\"noPopover\"></ng-template>\n  </a>\n</ng-container>\n\n<ng-container *ngIf=\"_tplType === 'link-external'\">\n  <a class=\"d-block text-body text-decoration-none\"\n    [attr.href]=\"_link\"\n    [attr.title]=\"_title\">\n    <ng-template [ngTemplateOutlet]=\"noPopover\"></ng-template>\n  </a>\n</ng-container>\n\n<ng-container *ngIf=\"_tplType === 'link-encrypted'\">\n  <button\n    class=\"btn btn-link p-0 d-block text-body text-decoration-none\"\n    type=\"button\"\n    [seamEncryptedAssetLink]=\"_link\"\n    [seamDetectMimeFromContent]=\"_detectMimeContent\"\n    [seamDownloadAsset]=\"_download\"\n    [attr.title]=\"_title\">\n    <ng-template [ngTemplateOutlet]=\"noPopover\"></ng-template>\n  </button>\n</ng-container>\n\n<ng-container *ngIf=\"_tplType === 'button'\">\n  <button\n    class=\"btn btn-link p-0 d-block text-body text-decoration-none\"\n    type=\"button\"\n    [attr.title]=\"_title\"\n    (click)=\"_doButtonAction()\">\n    <ng-template [ngTemplateOutlet]=\"noPopover\"></ng-template>\n  </button>\n</ng-container>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i6$1.TheSeamPopoverDirective, selector: "[seamPopover]", inputs: ["seamPopover", "seamPopoverBaseWidth", "seamPopoverDisabled"], exportAs: ["seamPopover"] }, { kind: "directive", type: i8.EncryptedAssetLinkDirective, selector: "[seamEncryptedAssetLink]", inputs: ["seamEncryptedAssetLink", "seamShowLoadingOverlay", "seamDetectMimeFromContent", "seamDownloadAsset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TableCellTypeStringComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-table-cell-type-string', host: {}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #popoverTpl>\n  {{ value }}\n</ng-template>\n\n<ng-template #noPopover>\n  <div class=\"text-truncate\">\n    {{ value }}\n  </div>\n</ng-template>\n\n<ng-container *ngIf=\"!_tplType || _tplType === 'default'\">\n  <div *ngIf=\"canPopover; else noPopover\" [seamPopover]=\"popoverTpl\">\n    <ng-template [ngTemplateOutlet]=\"noPopover\"></ng-template>\n  </div>\n</ng-container>\n\n\n\n<ng-container *ngIf=\"_tplType === 'link'\">\n  <a class=\"d-block text-body text-decoration-none\"\n    [routerLink]=\"_link\"\n    [queryParams]=\"_queryParams\"\n    [attr.title]=\"_title\">\n    <ng-template [ngTemplateOutlet]=\"noPopover\"></ng-template>\n  </a>\n</ng-container>\n\n<ng-container *ngIf=\"_tplType === 'link-external'\">\n  <a class=\"d-block text-body text-decoration-none\"\n    [attr.href]=\"_link\"\n    [attr.title]=\"_title\">\n    <ng-template [ngTemplateOutlet]=\"noPopover\"></ng-template>\n  </a>\n</ng-container>\n\n<ng-container *ngIf=\"_tplType === 'link-encrypted'\">\n  <button\n    class=\"btn btn-link p-0 d-block text-body text-decoration-none\"\n    type=\"button\"\n    [seamEncryptedAssetLink]=\"_link\"\n    [seamDetectMimeFromContent]=\"_detectMimeContent\"\n    [seamDownloadAsset]=\"_download\"\n    [attr.title]=\"_title\">\n    <ng-template [ngTemplateOutlet]=\"noPopover\"></ng-template>\n  </button>\n</ng-container>\n\n<ng-container *ngIf=\"_tplType === 'button'\">\n  <button\n    class=\"btn btn-link p-0 d-block text-body text-decoration-none\"\n    type=\"button\"\n    [attr.title]=\"_title\"\n    (click)=\"_doButtonAction()\">\n    <ng-template [ngTemplateOutlet]=\"noPopover\"></ng-template>\n  </button>\n</ng-container>\n\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ChangeDetectorRef }, { type: i1.TableCellTypesHelpersService }, { type: i2.DatatableComponent, decorators: [{
+                        type: Optional
+                    }] }, { type: i3.TableComponent, decorators: [{
+                        type: Optional
+                    }] }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [TABLE_CELL_DATA]
+                    }] }];
+    }, propDecorators: { value: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], _titleAttr: [{
+                type: HostBinding,
+                args: ['attr.title']
+            }], style: [{
+                type: Input
+            }], _styleAttr: [{
+                type: HostBinding,
+                args: ['attr.style']
+            }], classAttr: [{
+                type: Input
+            }], _classAttr: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+const TABLE_CELL_TYPE_MANIFEST_STRING = {
+    provide: TABLE_CELL_TYPE_MANIFEST,
+    useValue: {
+        name: 'string',
+        component: TableCellTypeStringComponent
+    },
+    multi: true
+};
+const TABLE_CELL_TYPE_MANIFEST_CURRENCY = {
+    provide: TABLE_CELL_TYPE_MANIFEST,
+    useValue: {
+        name: 'currency',
+        component: TableCellTypeCurrencyComponent
+    },
+    multi: true
+};
+const TABLE_CELL_TYPE_MANIFEST_DECIMAL = {
+    provide: TABLE_CELL_TYPE_MANIFEST,
+    useValue: {
+        name: 'decimal',
+        component: TableCellTypeDecimalComponent
+    },
+    multi: true
+};
+const TABLE_CELL_TYPE_MANIFEST_INTEGER = {
+    provide: TABLE_CELL_TYPE_MANIFEST,
+    useValue: {
+        name: 'integer',
+        component: TableCellTypeIntegerComponent
+    },
+    multi: true
+};
+const TABLE_CELL_TYPE_MANIFEST_DATE = {
+    provide: TABLE_CELL_TYPE_MANIFEST,
+    useValue: {
+        name: 'date',
+        component: TableCellTypeDateComponent
+    },
+    multi: true
+};
+const TABLE_CELL_TYPE_MANIFEST_ICON = {
+    provide: TABLE_CELL_TYPE_MANIFEST,
+    useValue: {
+        name: 'icon',
+        component: TableCellTypeIconComponent
+    },
+    multi: true
+};
+const TABLE_CELL_TYPE_MANIFEST_IMAGE = {
+    provide: TABLE_CELL_TYPE_MANIFEST,
+    useValue: {
+        name: 'image',
+        component: TableCellTypeIconComponent
+    },
+    multi: true
+};
+const TABLE_CELL_TYPE_MANIFEST_PROGRESS_CIRCLE = {
+    provide: TABLE_CELL_TYPE_MANIFEST,
+    useValue: {
+        name: 'progress-circle',
+        component: TableCellTypeProgressCircleComponent
+    },
+    multi: true
+};
+const TABLE_CELL_TYPE_MANIFEST_PROGRESS_CIRCLE_ICON = {
+    provide: TABLE_CELL_TYPE_MANIFEST,
+    useValue: {
+        name: 'progress-circle-icon',
+        component: TableCellTypeProgressCircleIconComponent
+    },
+    multi: true
+};
+const TABLE_CELL_TYPE_MANIFEST_PHONE = {
+    provide: TABLE_CELL_TYPE_MANIFEST,
+    useValue: {
+        name: 'phone',
+        component: TableCellTypePhoneComponent
+    },
+    multi: true
+};
+
+const cellTypeComponents = [
+    TableCellTypeStringComponent,
+    TableCellTypeCurrencyComponent,
+    TableCellTypeDateComponent,
+    TableCellTypeDecimalComponent,
+    TableCellTypeIconComponent,
+    TableCellTypeIntegerComponent,
+    TableCellTypeProgressCircleComponent,
+    TableCellTypeProgressCircleIconComponent,
+    TableCellTypePhoneComponent
+];
+const cellTypeProviders = [
+    TABLE_CELL_TYPE_MANIFEST_STRING,
+    TABLE_CELL_TYPE_MANIFEST_INTEGER,
+    TABLE_CELL_TYPE_MANIFEST_CURRENCY,
+    TABLE_CELL_TYPE_MANIFEST_DECIMAL,
+    TABLE_CELL_TYPE_MANIFEST_DATE,
+    TABLE_CELL_TYPE_MANIFEST_ICON,
+    TABLE_CELL_TYPE_MANIFEST_IMAGE,
+    TABLE_CELL_TYPE_MANIFEST_PROGRESS_CIRCLE,
+    TABLE_CELL_TYPE_MANIFEST_PROGRESS_CIRCLE_ICON,
+    TABLE_CELL_TYPE_MANIFEST_PHONE
+];
+class TheSeamTableCellTypesModule {
+}
+TheSeamTableCellTypesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamTableCellTypesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TheSeamTableCellTypesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: TheSeamTableCellTypesModule, declarations: [TableCellTypeStringComponent,
+        TableCellTypeCurrencyComponent,
+        TableCellTypeDateComponent,
+        TableCellTypeDecimalComponent,
+        TableCellTypeIconComponent,
+        TableCellTypeIntegerComponent,
+        TableCellTypeProgressCircleComponent,
+        TableCellTypeProgressCircleIconComponent,
+        TableCellTypePhoneComponent], imports: [CommonModule,
+        NgbTooltipModule,
+        RouterModule,
+        TheSeamSharedModule,
+        TheSeamIconModule,
+        PortalModule,
+        TheSeamPopoverModule,
+        TheSeamProgressModule,
+        TheSeamTelInputModule,
+        TheSeamAssetReaderModule,
+        TheSeamTableCellTypeModule], exports: [TableCellTypeStringComponent,
+        TableCellTypeCurrencyComponent,
+        TableCellTypeDateComponent,
+        TableCellTypeDecimalComponent,
+        TableCellTypeIconComponent,
+        TableCellTypeIntegerComponent,
+        TableCellTypeProgressCircleComponent,
+        TableCellTypeProgressCircleIconComponent,
+        TableCellTypePhoneComponent] });
+TheSeamTableCellTypesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamTableCellTypesModule, providers: [
+        ...cellTypeProviders
+    ], imports: [CommonModule,
+        NgbTooltipModule,
+        RouterModule,
+        TheSeamSharedModule,
+        TheSeamIconModule,
+        PortalModule,
+        TheSeamPopoverModule,
+        TheSeamProgressModule,
+        TheSeamTelInputModule,
+        TheSeamAssetReaderModule,
+        TheSeamTableCellTypeModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamTableCellTypesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ...cellTypeComponents
+                    ],
+                    imports: [
+                        CommonModule,
+                        NgbTooltipModule,
+                        RouterModule,
+                        TheSeamSharedModule,
+                        TheSeamIconModule,
+                        PortalModule,
+                        TheSeamPopoverModule,
+                        TheSeamProgressModule,
+                        TheSeamTelInputModule,
+                        TheSeamAssetReaderModule,
+                        TheSeamTableCellTypeModule
+                    ],
+                    providers: [
+                        ...cellTypeProviders
+                    ],
+                    exports: [
+                        ...cellTypeComponents
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TABLE_CELL_TYPE_MANIFEST_CURRENCY, TABLE_CELL_TYPE_MANIFEST_DATE, TABLE_CELL_TYPE_MANIFEST_DECIMAL, TABLE_CELL_TYPE_MANIFEST_ICON, TABLE_CELL_TYPE_MANIFEST_IMAGE, TABLE_CELL_TYPE_MANIFEST_INTEGER, TABLE_CELL_TYPE_MANIFEST_PHONE, TABLE_CELL_TYPE_MANIFEST_PROGRESS_CIRCLE, TABLE_CELL_TYPE_MANIFEST_PROGRESS_CIRCLE_ICON, TABLE_CELL_TYPE_MANIFEST_STRING, TableCellTypeCurrencyComponent, TableCellTypeDateComponent, TableCellTypeDecimalComponent, TableCellTypeIconComponent, TableCellTypeIntegerComponent, TableCellTypePhoneComponent, TableCellTypeProgressCircleComponent, TableCellTypeProgressCircleIconComponent, TableCellTypeStringComponent, TheSeamTableCellTypesModule };
+//# sourceMappingURL=theseam-ui-common-table-cell-types.mjs.map