@theseam/ui-common 0.2.8 → 0.2.12

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

@@ -1,15 +1,15 @@
-import { TABLE_CELL_DATA, TableCellTypesHelpersService, TABLE_CELL_TYPE_MANIFEST, TheSeamTableCellTypeModule } from '@theseam/ui-common/table-cell-type';
+import { TableCellTypesHelpersService, TABLE_CELL_DATA, TABLE_CELL_TYPE_MANIFEST, TheSeamTableCellTypeModule } from '@theseam/ui-common/table-cell-type';
+import { formatCurrency, formatNumber, CommonModule } from '@angular/common';
 import { Component, ChangeDetectionStrategy, ChangeDetectorRef, Optional, Inject, Input, HostBinding, NgModule } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { notNullOrUndefined, hasProperty } from '@theseam/ui-common/utils';
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { DatatableComponent } from '@theseam/ui-common/datatable';
 import { getKnownIcon, TheSeamIconModule } from '@theseam/ui-common/icon';
 import { TableComponent } from '@theseam/ui-common/table';
 import { THESEAM_DEFAULT_PHONE_NUMBER_FORMAT, coercePhoneNumberFormat, TheSeamTelInputModule } from '@theseam/ui-common/tel-input';
-import { hasProperty } from '@theseam/ui-common/utils';
-import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { PortalModule } from '@angular/cdk/portal';
-import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { TheSeamAssetReaderModule } from '@theseam/ui-common/asset-reader';
@@ -17,6 +17,75 @@ import { TheSeamPopoverModule } from '@theseam/ui-common/popover';
 import { TheSeamProgressModule } from '@theseam/ui-common/progress';
 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();
+        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 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) || 0;
+        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.decorators = [
+    { type: Component, args: [{
+                selector: 'seam-table-cell-type-currency',
+                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",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [""]
+            },] }
+];
+TableCellTypeCurrencyComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: TableCellTypesHelpersService },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [TABLE_CELL_DATA,] }] }
+];
+TableCellTypeCurrencyComponent.propDecorators = {
+    value: [{ type: Input }]
+};
+
 class TableCellTypeDateComponent {
     constructor(_cdf, _tableData) {
         this._cdf = _cdf;
@@ -68,6 +137,72 @@ TableCellTypeDateComponent.propDecorators = {
     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();
+        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 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 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.decorators = [
+    { type: Component, args: [{
+                selector: 'seam-table-cell-type-decimal',
+                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",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [""]
+            },] }
+];
+TableCellTypeDecimalComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: TableCellTypesHelpersService },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [TABLE_CELL_DATA,] }] }
+];
+TableCellTypeDecimalComponent.propDecorators = {
+    value: [{ type: Input }]
+};
+
 class TableCellTypeIconComponent {
     constructor(_cdf, _tableCellTypeHelpers, _datatable, _table, _tableData) {
         this._cdf = _cdf;
@@ -227,6 +362,70 @@ TableCellTypeIconComponent.propDecorators = {
     _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();
+        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 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 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.decorators = [
+    { type: Component, args: [{
+                selector: 'seam-table-cell-type-integer',
+                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",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [""]
+            },] }
+];
+TableCellTypeIntegerComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: TableCellTypesHelpersService },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [TABLE_CELL_DATA,] }] }
+];
+TableCellTypeIntegerComponent.propDecorators = {
+    value: [{ type: Input }]
+};
+
 class TableCellTypePhoneComponent {
     constructor(_cdf, _tableData) {
         this._cdf = _cdf;
@@ -668,17 +867,17 @@ const TABLE_CELL_TYPE_MANIFEST_STRING = {
     multi: true
 };
 const ɵ1 = {
-    name: 'integer',
-    component: TableCellTypeStringComponent
+    name: 'currency',
+    component: TableCellTypeCurrencyComponent
 };
-const TABLE_CELL_TYPE_MANIFEST_INTEGER = {
+const TABLE_CELL_TYPE_MANIFEST_CURRENCY = {
     provide: TABLE_CELL_TYPE_MANIFEST,
     useValue: ɵ1,
     multi: true
 };
 const ɵ2 = {
     name: 'decimal',
-    component: TableCellTypeStringComponent
+    component: TableCellTypeDecimalComponent
 };
 const TABLE_CELL_TYPE_MANIFEST_DECIMAL = {
     provide: TABLE_CELL_TYPE_MANIFEST,
@@ -686,64 +885,76 @@ const TABLE_CELL_TYPE_MANIFEST_DECIMAL = {
     multi: true
 };
 const ɵ3 = {
+    name: 'integer',
+    component: TableCellTypeIntegerComponent
+};
+const TABLE_CELL_TYPE_MANIFEST_INTEGER = {
+    provide: TABLE_CELL_TYPE_MANIFEST,
+    useValue: ɵ3,
+    multi: true
+};
+const ɵ4 = {
     name: 'date',
     component: TableCellTypeDateComponent
 };
 const TABLE_CELL_TYPE_MANIFEST_DATE = {
     provide: TABLE_CELL_TYPE_MANIFEST,
-    useValue: ɵ3,
+    useValue: ɵ4,
     multi: true
 };
-const ɵ4 = {
+const ɵ5 = {
     name: 'icon',
     component: TableCellTypeIconComponent
 };
 const TABLE_CELL_TYPE_MANIFEST_ICON = {
     provide: TABLE_CELL_TYPE_MANIFEST,
-    useValue: ɵ4,
+    useValue: ɵ5,
     multi: true
 };
-const ɵ5 = {
+const ɵ6 = {
     name: 'image',
     component: TableCellTypeIconComponent
 };
 const TABLE_CELL_TYPE_MANIFEST_IMAGE = {
     provide: TABLE_CELL_TYPE_MANIFEST,
-    useValue: ɵ5,
+    useValue: ɵ6,
     multi: true
 };
-const ɵ6 = {
+const ɵ7 = {
     name: 'progress-circle',
     component: TableCellTypeProgressCircleComponent
 };
 const TABLE_CELL_TYPE_MANIFEST_PROGRESS_CIRCLE = {
     provide: TABLE_CELL_TYPE_MANIFEST,
-    useValue: ɵ6,
+    useValue: ɵ7,
     multi: true
 };
-const ɵ7 = {
+const ɵ8 = {
     name: 'progress-circle-icon',
     component: TableCellTypeProgressCircleIconComponent
 };
 const TABLE_CELL_TYPE_MANIFEST_PROGRESS_CIRCLE_ICON = {
     provide: TABLE_CELL_TYPE_MANIFEST,
-    useValue: ɵ7,
+    useValue: ɵ8,
     multi: true
 };
-const ɵ8 = {
+const ɵ9 = {
     name: 'phone',
     component: TableCellTypePhoneComponent
 };
 const TABLE_CELL_TYPE_MANIFEST_PHONE = {
     provide: TABLE_CELL_TYPE_MANIFEST,
-    useValue: ɵ8,
+    useValue: ɵ9,
     multi: true
 };
 
 const cellTypeComponents = [
     TableCellTypeStringComponent,
+    TableCellTypeCurrencyComponent,
     TableCellTypeDateComponent,
+    TableCellTypeDecimalComponent,
     TableCellTypeIconComponent,
+    TableCellTypeIntegerComponent,
     TableCellTypeProgressCircleComponent,
     TableCellTypeProgressCircleIconComponent,
     TableCellTypePhoneComponent
@@ -751,6 +962,7 @@ const cellTypeComponents = [
 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,
@@ -795,5 +1007,5 @@ TheSeamTableCellTypesModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { 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, TableCellTypeDateComponent, TableCellTypeIconComponent, TableCellTypePhoneComponent, TableCellTypeProgressCircleComponent, TableCellTypeProgressCircleIconComponent, TableCellTypeStringComponent, TheSeamTableCellTypesModule, ɵ0, ɵ1, ɵ2, ɵ3, ɵ4, ɵ5, ɵ6, ɵ7, ɵ8 };
+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, ɵ0, ɵ1, ɵ2, ɵ3, ɵ4, ɵ5, ɵ6, ɵ7, ɵ8, ɵ9 };
 //# sourceMappingURL=theseam-ui-common-table-cell-types.js.map