@seniorsistemas/angular-components 17.31.2 → 18.0.0-develop-ae6477c0

package/fesm2022/seniorsistemas-angular-components-table.mjs

@@ -0,0 +1,957 @@
+import * as i0 from '@angular/core';
+import { Directive, HostListener, Input, Component, Inject, ViewChild, NgModule } from '@angular/core';
+import * as i1 from 'primeng/table';
+import { RowToggler } from 'primeng/table';
+import { HostProjectConfigsInjectionToken } from '@seniorsistemas/angular-components/common';
+import { deepClone, isNullOrUndefined } from '@seniorsistemas/angular-components/utils';
+import { applyMask } from '@seniorsistemas/ng2-currency-mask';
+import BigNumber$1 from 'bignumber.js';
+import moment from 'moment';
+import * as i1$1 from '@seniorsistemas/angular-components/locale';
+import { LocaleService } from '@seniorsistemas/angular-components/locale';
+import * as i2 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i3 from '@seniorsistemas/angular-components/numeric';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i5 from '@seniorsistemas/angular-components/tooltip';
+import { TooltipModule } from '@seniorsistemas/angular-components/tooltip';
+import * as i6 from '@seniorsistemas/angular-components/token-list';
+import { TokenListModule } from '@seniorsistemas/angular-components/token-list';
+import * as i7 from '@seniorsistemas/angular-components/info-sign';
+import { InfoSignModule } from '@seniorsistemas/angular-components/info-sign';
+import * as i8 from '@seniorsistemas/angular-components/badge';
+import { BadgeModule } from '@seniorsistemas/angular-components/badge';
+import * as i2$1 from '@seniorsistemas/angular-components/button';
+import { ButtonModule } from '@seniorsistemas/angular-components/button';
+
+class NavigationDirective {
+    onKeyDown(event) {
+        switch (event.key) {
+            case 'Right': // IE 11
+            case 'ArrowRight':
+                if (this._isRow(event.target)) {
+                    this._focusFirstColFromCurrentRow(event.target);
+                }
+                else if (this._isCol(event.target)) {
+                    this._focusNextSelectableCol(event.target);
+                }
+                event.preventDefault();
+                break;
+            case 'Left': // IE 11
+            case 'ArrowLeft':
+                if (this._isRow(event.target)) {
+                    this._focusLastColFromPrevRow(event.target);
+                }
+                else if (this._isCol(event.target)) {
+                    this._focusPrevSelectableCol(event.target);
+                }
+                event.preventDefault();
+                break;
+            case 'Up': // IE 11
+            case 'ArrowUp':
+                if (this._isRow(event.target)) {
+                    this._setPrevRowFocus(event.target);
+                }
+                else if (this._isCol(event.target)) {
+                    this._setAboveColFocus(event.target);
+                }
+                event.preventDefault();
+                break;
+            case 'Down': // IE 11
+            case 'ArrowDown':
+                if (this._isRow(event.target)) {
+                    this._setNextRowFocus(event.target);
+                }
+                else if (this._isCol(event.target)) {
+                    this._setUnderColFocus(event.target);
+                }
+                event.preventDefault();
+                break;
+        }
+    }
+    _focusLastColFromPrevRow(event) {
+        const prevRow = this._findPrevSelectableRow(event);
+        if (prevRow) {
+            prevRow.lastElementChild.focus();
+        }
+    }
+    _focusFirstColFromCurrentRow(row) {
+        const firstCol = row.firstElementChild;
+        if (firstCol) {
+            firstCol.focus();
+        }
+    }
+    _focusNextSelectableCol(col) {
+        const nextCol = col.nextElementSibling;
+        if (nextCol) {
+            nextCol.focus();
+        }
+        else {
+            const currentRow = col.parentElement;
+            return this._setNextRowFocus(currentRow);
+        }
+    }
+    _focusPrevSelectableCol(col) {
+        const prevCol = col.previousElementSibling;
+        if (prevCol) {
+            prevCol.focus();
+        }
+        else {
+            const currentRow = col.parentElement;
+            return currentRow.focus();
+        }
+    }
+    _setAboveColFocus(currentCol) {
+        const cellIndex = currentCol['cellIndex'];
+        const currentRow = currentCol.parentElement;
+        const prevRow = this._findPrevSelectableRow(currentRow);
+        if (prevRow)
+            prevRow.cells[cellIndex].focus();
+    }
+    _setUnderColFocus(currentCol) {
+        const cellIndex = currentCol['cellIndex'];
+        const currentRow = currentCol.parentElement;
+        const nextRow = this._findNextSelectableRow(currentRow);
+        if (nextRow)
+            nextRow.cells[cellIndex].focus();
+    }
+    _setNextRowFocus(row) {
+        const nextRow = this._findNextSelectableRow(row);
+        if (nextRow) {
+            nextRow.focus();
+        }
+    }
+    _setPrevRowFocus(row) {
+        const prevRow = this._findPrevSelectableRow(row);
+        if (prevRow) {
+            prevRow.focus();
+        }
+    }
+    _isRow(event) {
+        return event.tagName.toLocaleLowerCase() === 'tr';
+    }
+    _isCol(event) {
+        return event.tagName.toLocaleLowerCase() === 'td';
+    }
+    _findPrevSelectableRow(row) {
+        const prevRow = row.previousElementSibling;
+        return prevRow ?? null;
+    }
+    _findNextSelectableRow(row) {
+        const nextRow = row.nextElementSibling;
+        return nextRow ?? null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: NavigationDirective, selector: "[sNavigation]", host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NavigationDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[sNavigation]' }]
+        }], propDecorators: { onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class RowTogllerDirective extends RowToggler {
+    dt;
+    data = null;
+    constructor(dt) {
+        super(dt);
+        this.dt = dt;
+    }
+    onKeydown(event) {
+        if (this.isEnabled()) {
+            switch (event.key) {
+                case 'Enter':
+                    this.dt.toggleRow(this.data, event);
+                    event.preventDefault();
+                    break;
+                default:
+                    event.preventDefault();
+                    break;
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowTogllerDirective, deps: [{ token: i1.Table }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: RowTogllerDirective, selector: "[sRowToggler]", inputs: { data: ["sRowToggler", "data"] }, host: { listeners: { "keydown": "onKeydown($event)" } }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowTogllerDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[sRowToggler]' }]
+        }], ctorParameters: () => [{ type: i1.Table }], propDecorators: { data: [{
+                type: Input,
+                args: [{ alias: 'sRowToggler', required: true }]
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+var EnumColumnFieldType;
+(function (EnumColumnFieldType) {
+    EnumColumnFieldType["STRING"] = "STRING";
+    EnumColumnFieldType["NUMBER"] = "NUMBER";
+    EnumColumnFieldType["BOOLEAN"] = "BOOLEAN";
+    EnumColumnFieldType["DATE"] = "DATE";
+    EnumColumnFieldType["CURRENCY"] = "CURRENCY";
+    EnumColumnFieldType["ENUM"] = "ENUM";
+    EnumColumnFieldType["LOOKUP"] = "LOOKUP";
+    EnumColumnFieldType["LINK"] = "LINK";
+    EnumColumnFieldType["TOKENS"] = "TOKENS";
+})(EnumColumnFieldType || (EnumColumnFieldType = {}));
+
+var EnumBadgeColors;
+(function (EnumBadgeColors) {
+    EnumBadgeColors["RED"] = "red";
+    EnumBadgeColors["ORANGE"] = "orange";
+    EnumBadgeColors["YELLOW"] = "yellow";
+    EnumBadgeColors["GREEN"] = "green";
+    EnumBadgeColors["BLUE"] = "blue";
+    EnumBadgeColors["GRAY"] = "gray";
+})(EnumBadgeColors || (EnumBadgeColors = {}));
+
+const convertToMomentDateFormat = (format) => {
+    // A ordem dos replaces é importante.
+    return format
+        .replace(/\bd\b/, "D") // day of month (no leading zero)
+        .replace(/\bdd\b/, "DD") // day of month
+        .replace(/\bo\b/, "DDD") // day of the year (no leading zero)
+        .replace(/\boo\b/, "DDDD") // day of the year
+        .replace(/\bM\b/, "MMM") // month name short
+        .replace(/\bMM\b/, "MMMM") // month name long
+        .replace(/\bm\b/, "M") // month of year (no leading)
+        .replace(/\bmm\b/, "MM") // month of year
+        .replace(/\by\b/, "YY") // year (two digits)
+        .replace(/\byy\b/, "YYYY"); // year (four digits)
+};
+
+class TableColumnsComponent {
+    localeService;
+    viewContainerRef;
+    translate;
+    numericService;
+    hostProjectConfigs;
+    columnsTemplate = null;
+    columns = [];
+    rowValue;
+    locale = null;
+    cellsData = [];
+    formattedColumns = [];
+    constructor(localeService, viewContainerRef, translate, numericService, hostProjectConfigs) {
+        this.localeService = localeService;
+        this.viewContainerRef = viewContainerRef;
+        this.translate = translate;
+        this.numericService = numericService;
+        this.hostProjectConfigs = hostProjectConfigs;
+        this.locale = {
+            calendar: {
+                ...this.localeService.getLocaleOptions()?.calendar,
+                dateFormat: convertToMomentDateFormat(this.localeService.getLocaleOptions()?.calendar.dateFormat ?? ''),
+            },
+            number: {
+                ...this.localeService.getLocaleOptions()?.number,
+                scale: 0,
+            },
+        };
+    }
+    ngOnChanges(changes) {
+        this.validateComponentAttributes(changes);
+        if (changes['columns'] && changes['columns'].currentValue !== changes['columns'].previousValue) {
+            this.columns = this.sortColumnsBySequence(changes['columns'].currentValue);
+        }
+        this.createColumnsTemplate(changes);
+    }
+    isArray(value) {
+        return Array.isArray(value);
+    }
+    getTokensByColumn(column) {
+        return column.columnValue;
+    }
+    getCellData(column) {
+        const { columnValue, separator, uninformed } = column;
+        if (typeof columnValue === 'string') {
+            const splittedString = columnValue.split(separator);
+            return splittedString.map((string, index) => {
+                const isLastIndex = splittedString.length - 1 === index;
+                return {
+                    value: string,
+                    isUninformed: string === uninformed,
+                    separator: !isLastIndex ? separator : null,
+                };
+            });
+        }
+        return null;
+    }
+    validateComponentAttributes(changes) {
+        if (!this.columns && !changes['columns']?.currentValue) {
+            throw new Error("The 'columns' attribute must be informed!");
+        }
+        if (!this.rowValue && !changes['rowValue']?.currentValue) {
+            throw new Error("The 'rowValue' attribute must be informed!");
+        }
+    }
+    createColumnsTemplate(changes) {
+        this.viewContainerRef.clear();
+        const columns = changes['columns']?.currentValue || this.columns;
+        const rowValue = deepClone(changes['rowValue']?.currentValue ?? this.rowValue);
+        const locale = changes['locale']?.currentValue || this.locale;
+        this.formattedColumns = columns.map((column) => this.getColumnValue(column, rowValue, locale));
+        this.cellsData = this.formattedColumns.map((column) => this.getCellData(column));
+        if (!isNullOrUndefined(this.columnsTemplate)) {
+            this.viewContainerRef.createEmbeddedView(this.columnsTemplate);
+        }
+    }
+    getColumnSeparator(column) {
+        return column.separator ? column.separator : ' - ';
+    }
+    getTranslationPrefix(column) {
+        return column.prefix ? column.prefix : `${this.hostProjectConfigs.domain}.${this.hostProjectConfigs.service}.`;
+    }
+    isAttributeValueInvalid(attributeValue) {
+        return (attributeValue === null ||
+            attributeValue === undefined ||
+            (attributeValue?.options?.numberFormatOptions && isNullOrUndefined(attributeValue?.value)) ||
+            (this.isArray(attributeValue) && !attributeValue.length) ||
+            (typeof attributeValue === 'string' && attributeValue.trim() === ''));
+    }
+    getFormattedColumnValue(column, columnValue, unifiedColumnValues, uninformedText, uninformedNumber) {
+        if (uninformedNumber === column.attributes.length) {
+            return uninformedText;
+        }
+        if (column.type === EnumColumnFieldType.TOKENS) {
+            return [].concat.apply([], columnValue.filter((values) => values !== uninformedText));
+        }
+        return unifiedColumnValues;
+    }
+    getAttributeValue(attribute, rowValue) {
+        let attributeValue;
+        attribute.split('/').forEach((value) => {
+            if (!attributeValue) {
+                value.split('.').forEach((val, i) => {
+                    if (!rowValue) {
+                        return;
+                    }
+                    if (i === 0) {
+                        attributeValue = rowValue[val];
+                    }
+                    else {
+                        if (attributeValue) {
+                            attributeValue = attributeValue[val];
+                        }
+                    }
+                });
+            }
+        });
+        return attributeValue;
+    }
+    getNumberConfigs(column) {
+        return {
+            ...this.locale?.number,
+            scale: column.scale !== null && column.scale !== undefined
+                ? this.getColumnScale(column.scale)
+                : this.locale?.number.scale,
+            prefix: `${this.locale?.number.currencySymbol} `,
+        };
+    }
+    getDateFormat(column, locale) {
+        return column.dateFormat ? column.dateFormat : locale.calendar.dateFormat;
+    }
+    getColumnValue(column, rowValue, locale) {
+        const prefix = this.getTranslationPrefix(column);
+        const separator = this.getColumnSeparator(column);
+        const uninformed = this.translate.instant(prefix + 'empty_label');
+        const style = column.style;
+        const columnValue = column.attributes.map((attribute) => {
+            const attributeValue = this.getAttributeValue(attribute, rowValue);
+            if (this.isAttributeValueInvalid(attributeValue)) {
+                return uninformed;
+            }
+            const numberConfigs = this.getNumberConfigs(column);
+            switch (column.type) {
+                case EnumColumnFieldType.ENUM:
+                    return this.translate.instant(column.enumPrefix + attributeValue.toString().toLowerCase());
+                case EnumColumnFieldType.CURRENCY: {
+                    const numberFormatOptions = attributeValue?.options?.numberFormatOptions
+                        ? attributeValue.options.numberFormatOptions
+                        : typeof column.numberFormatOptions === 'function'
+                            ? column.numberFormatOptions({
+                                rowData: rowValue,
+                            })
+                            : column.numberFormatOptions;
+                    return numberFormatOptions
+                        ? this.numericService.instant(attributeValue, {
+                            numberFormatOptions,
+                        })
+                        : applyMask(attributeValue, numberConfigs, this.isNumber(attributeValue));
+                }
+                case EnumColumnFieldType.DATE:
+                    const dateFormat = this.getDateFormat(column, locale);
+                    return moment(attributeValue).format(dateFormat);
+                case EnumColumnFieldType.BOOLEAN:
+                    const value = attributeValue ? 'yes' : 'no';
+                    return this.translate.instant(prefix + value);
+                case EnumColumnFieldType.NUMBER: {
+                    numberConfigs.prefix = '';
+                    const numberFormatOptions = attributeValue?.options?.numberFormatOptions
+                        ? attributeValue.options.numberFormatOptions
+                        : typeof column.numberFormatOptions === 'function'
+                            ? column.numberFormatOptions({
+                                rowData: rowValue,
+                            })
+                            : column.numberFormatOptions;
+                    return numberFormatOptions
+                        ? this.numericService.instant(attributeValue, {
+                            numberFormatOptions,
+                        })
+                        : applyMask(attributeValue, numberConfigs, this.isNumber(attributeValue));
+                }
+                case EnumColumnFieldType.TOKENS:
+                    return this.getTokens(attributeValue);
+                default:
+                    return attributeValue;
+            }
+        });
+        const unifiedColumnValues = columnValue.join(separator);
+        const uninformedNumber = unifiedColumnValues.split(separator).filter((value) => value === uninformed).length;
+        const formattedColumnValue = this.getFormattedColumnValue(column, columnValue, unifiedColumnValues, uninformed, uninformedNumber);
+        return {
+            style,
+            columnValue: formattedColumnValue,
+            separator,
+            uninformed,
+            badgeConfigs: column?.badgeConfigs?.find((badgeConfig) => badgeConfig.enumValue === rowValue[column.attributes[0] ?? column.field]),
+            color: column.color?.(rowValue),
+            type: column.type,
+            tooltip: this.getColumnTooltip(column.tooltip),
+            infoSign: this.getColumnInfoSign(column.infoSign),
+            onLinkClick: column.onLinkClick,
+            onColumnClick: column.onColumnClick,
+            compact: column.compact,
+        };
+    }
+    getColumnScale(scale) {
+        if (typeof scale === 'function') {
+            return scale(deepClone(this.rowValue));
+        }
+        return scale;
+    }
+    getColumnInfoSign(infoSign) {
+        if (!isNullOrUndefined(infoSign)) {
+            if (typeof infoSign === 'function') {
+                return infoSign(deepClone(this.rowValue));
+            }
+            return infoSign;
+        }
+        return null;
+    }
+    getColumnTooltip(tooltip) {
+        if (!isNullOrUndefined(tooltip)) {
+            if (typeof tooltip === 'function') {
+                return tooltip(deepClone(this.rowValue));
+            }
+            return tooltip;
+        }
+        return '';
+    }
+    isNumber(value) {
+        return !new BigNumber$1(value).isNaN();
+    }
+    getTokens(values) {
+        if (!this.isArray(values)) {
+            throw new Error('To use tokens an array must be informed');
+        }
+        if (!this.isValidTokenArray(values)) {
+            throw new Error('Not a valid token array. Must be a primitive values array or an objects with label attribute array');
+        }
+        if (this.isLabelObjectArray(values)) {
+            return values;
+        }
+        return values
+            .filter((value) => value !== undefined && value !== null)
+            .map((value) => {
+            const label = typeof value === 'symbol' ? value.toString() : `${value}`;
+            return {
+                label,
+            };
+        });
+    }
+    isValidTokenArray(values) {
+        return this.isPrimitiveValuesArray(values) || this.isLabelObjectArray(values);
+    }
+    isPrimitiveValuesArray(values) {
+        return values.filter((value) => value !== Object(value)).length === values.length;
+    }
+    isLabelObjectArray(values) {
+        return values.filter((value) => value?.label !== null && value?.label !== undefined).length === values.length;
+    }
+    sortColumnsBySequence(columns) {
+        return columns.sort((a, b) => (a.sequence ?? 0) - (b.sequence ?? 0));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableColumnsComponent, deps: [{ token: i1$1.LocaleService }, { token: i0.ViewContainerRef }, { token: i2.TranslateService }, { token: i3.NumericService }, { token: HostProjectConfigsInjectionToken }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TableColumnsComponent, selector: "s-table-columns", inputs: { columns: "columns", rowValue: "rowValue", locale: "locale" }, viewQueries: [{ propertyName: "columnsTemplate", first: true, predicate: ["columnsTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #columnsTemplate>\n    @for (column of formattedColumns; track $index; let i = $index) {\n        <td\n            [ngStyle]=\"column.style\"\n            (click)=\"column.onColumnClick ? column.onColumnClick(rowValue) : null\"\n        >\n            @if (column.type !== 'TOKENS' || !isArray(column.columnValue)) {\n                <div [ngClass]=\"{ 'compact-column': column.compact }\">\n                    @if (column.type !== 'LINK') {\n                        <span\n                            [sTooltip]=\"column.tooltip\"\n                            [escape]=\"false\"\n                        >\n                            <ng-container *ngTemplateOutlet=\"columnValueTemplate\"></ng-container>\n                        </span>\n                    }\n\n                    @if (column.type === 'LINK') {\n                        @if (cellsData[i]?.[0]?.isUninformed) {\n                            <span class=\"sds-empty-value\">{{ cellsData[i]?.[0]?.value }}</span>\n                        } @else {\n                            <ng-template #anchorTemplate>\n                                <a\n                                    [sTooltip]=\"column.tooltip\"\n                                    [escape]=\"false\"\n                                    (click)=\"column.onLinkClick ? column.onLinkClick(rowValue) : null\"\n                                >\n                                    <ng-container *ngTemplateOutlet=\"columnValueTemplate\"></ng-container>\n                                </a>\n                            </ng-template>\n                        }\n                    }\n\n                    <ng-template #columnValueTemplate>\n                        @for (cellData of cellsData[i]; track $index) {\n                            @if (cellData.isUninformed) {\n                                <span class=\"sds-empty-value\">{{ cellData.value }}</span>\n                            } @else {\n                                @if (column.badgeConfigs) {\n                                    <s-badge\n                                        [sTooltip]=\"column.tooltip\"\n                                        [color]=\"column.badgeConfigs.color\"\n                                        [text]=\"cellData.value\"\n                                    ></s-badge>\n                                } @else {\n                                    <span [ngClass]=\"{\n                                        'column-cell-red': column.color === 'Red',\n                                        'column-cell-orange': column.color === 'Orange',\n                                        'column-cell-yellow': column.color === 'Yellow',\n                                        'column-cell-green': column.color === 'Green',\n                                        'column-cell-blue': column.color === 'Blue'\n                                    }\"\n                                    >{{ cellData.value }}</span>\n                                }\n                            }\n\n                            @if (cellData.separator) {\n                                <span>{{ cellData.separator }}</span>\n                            }\n                        }\n\n                        @if (!!column.infoSign) {\n                            <span *sInfoSign=\"column.infoSign\"></span>\n                        }\n                    </ng-template>\n                </div>\n            } @else {\n                <s-token-list\n                    [tokens]=\"getTokensByColumn(column)\"\n                    [hidePointerEvents]=\"true\"\n                ></s-token-list>\n\n                @if (!!column.infoSign) {\n                    <span *sInfoSign=\"column.infoSign\"></span>\n                }\n            }\n        </td>\n    }\n</ng-template>\n", styles: [":host{display:none}.compact-column{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.column-cell-red{color:#c13018}.column-cell-orange{color:#f8931f}.column-cell-yellow{color:#fcbf10}.column-cell-green{color:#0c9348}.column-cell-blue{color:#428bca}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }, { kind: "component", type: i6.TokenListComponent, selector: "s-token-list", inputs: ["id", "tokens", "removableTokens", "hidePointerEvents"], outputs: ["tokenSelected", "tokenRemoved"] }, { kind: "directive", type: i7.InfoSignDirective, selector: "[sInfoSign]", inputs: ["sInfoSign", "sInfoSignDisplayTime", "sInfoSignFocusedInputRef", "sInfoSignUseFocusedInputRef"] }, { kind: "component", type: i8.BadgeComponent, selector: "s-badge", inputs: ["type", "color", "title", "text", "selectable", "iconClass", "iconPosition", "infoSign"], outputs: ["selected"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableColumnsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's-table-columns', template: "<ng-template #columnsTemplate>\n    @for (column of formattedColumns; track $index; let i = $index) {\n        <td\n            [ngStyle]=\"column.style\"\n            (click)=\"column.onColumnClick ? column.onColumnClick(rowValue) : null\"\n        >\n            @if (column.type !== 'TOKENS' || !isArray(column.columnValue)) {\n                <div [ngClass]=\"{ 'compact-column': column.compact }\">\n                    @if (column.type !== 'LINK') {\n                        <span\n                            [sTooltip]=\"column.tooltip\"\n                            [escape]=\"false\"\n                        >\n                            <ng-container *ngTemplateOutlet=\"columnValueTemplate\"></ng-container>\n                        </span>\n                    }\n\n                    @if (column.type === 'LINK') {\n                        @if (cellsData[i]?.[0]?.isUninformed) {\n                            <span class=\"sds-empty-value\">{{ cellsData[i]?.[0]?.value }}</span>\n                        } @else {\n                            <ng-template #anchorTemplate>\n                                <a\n                                    [sTooltip]=\"column.tooltip\"\n                                    [escape]=\"false\"\n                                    (click)=\"column.onLinkClick ? column.onLinkClick(rowValue) : null\"\n                                >\n                                    <ng-container *ngTemplateOutlet=\"columnValueTemplate\"></ng-container>\n                                </a>\n                            </ng-template>\n                        }\n                    }\n\n                    <ng-template #columnValueTemplate>\n                        @for (cellData of cellsData[i]; track $index) {\n                            @if (cellData.isUninformed) {\n                                <span class=\"sds-empty-value\">{{ cellData.value }}</span>\n                            } @else {\n                                @if (column.badgeConfigs) {\n                                    <s-badge\n                                        [sTooltip]=\"column.tooltip\"\n                                        [color]=\"column.badgeConfigs.color\"\n                                        [text]=\"cellData.value\"\n                                    ></s-badge>\n                                } @else {\n                                    <span [ngClass]=\"{\n                                        'column-cell-red': column.color === 'Red',\n                                        'column-cell-orange': column.color === 'Orange',\n                                        'column-cell-yellow': column.color === 'Yellow',\n                                        'column-cell-green': column.color === 'Green',\n                                        'column-cell-blue': column.color === 'Blue'\n                                    }\"\n                                    >{{ cellData.value }}</span>\n                                }\n                            }\n\n                            @if (cellData.separator) {\n                                <span>{{ cellData.separator }}</span>\n                            }\n                        }\n\n                        @if (!!column.infoSign) {\n                            <span *sInfoSign=\"column.infoSign\"></span>\n                        }\n                    </ng-template>\n                </div>\n            } @else {\n                <s-token-list\n                    [tokens]=\"getTokensByColumn(column)\"\n                    [hidePointerEvents]=\"true\"\n                ></s-token-list>\n\n                @if (!!column.infoSign) {\n                    <span *sInfoSign=\"column.infoSign\"></span>\n                }\n            }\n        </td>\n    }\n</ng-template>\n", styles: [":host{display:none}.compact-column{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.column-cell-red{color:#c13018}.column-cell-orange{color:#f8931f}.column-cell-yellow{color:#fcbf10}.column-cell-green{color:#0c9348}.column-cell-blue{color:#428bca}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.LocaleService }, { type: i0.ViewContainerRef }, { type: i2.TranslateService }, { type: i3.NumericService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [HostProjectConfigsInjectionToken]
+                }] }], propDecorators: { columnsTemplate: [{
+                type: ViewChild,
+                args: ['columnsTemplate', { static: true }]
+            }], columns: [{
+                type: Input
+            }], rowValue: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }] } });
+
+class ExportUtils {
+    static addClass(element, className) {
+        element.nativeElement.className = `${element.nativeElement.className} ${className}`;
+    }
+    static removeClass(element, className) {
+        if (element.nativeElement.className.includes(className)) {
+            element.nativeElement.className = element.nativeElement.className.replace(className, '');
+        }
+    }
+    static exportCSV(columns = [], data = [], csvSeparator = ';', documentName = 'download') {
+        let csv = '\ufeff';
+        columns
+            .filter((column) => column.exportable && column.field)
+            .forEach((column, i) => {
+            csv += `"${column.header || column.field}"`;
+            if (i < columns.length - 1)
+                csv += csvSeparator;
+        });
+        data.forEach((record) => {
+            csv += '\n';
+            columns
+                .filter((column) => column.exportable && column.field)
+                .forEach((column, i) => {
+                let cellData;
+                if (Array.isArray(column.field)) {
+                    const fieldValues = column.field.map((col) => this._resolveFieldData(record, col, column));
+                    cellData = fieldValues
+                        .flat()
+                        .filter((value) => value !== null && value !== undefined)
+                        .join(column.separator);
+                }
+                else {
+                    cellData = this._resolveFieldData(record, column.field, column);
+                }
+                if (cellData !== null)
+                    cellData = String(cellData).replace(/"/g, '""');
+                else
+                    cellData = '';
+                csv += `"${cellData}"`;
+                if (i < columns.length - 1)
+                    csv += csvSeparator;
+            });
+        });
+        const blob = new Blob([csv], {
+            type: 'text/csv;charset=utf-8;',
+        });
+        if (typeof window.navigator.msSaveOrOpenBlob === 'function') {
+            navigator.msSaveOrOpenBlob(blob, documentName + '.csv');
+        }
+        else {
+            const link = document.createElement('a');
+            link.style.display = 'none';
+            document.body.appendChild(link);
+            if (link.download !== undefined) {
+                link.setAttribute('href', URL.createObjectURL(blob));
+                link.setAttribute('download', documentName + '.csv');
+                link.click();
+            }
+            else {
+                csv = 'data:text/csv;charset=utf-8,' + csv;
+                window.open(encodeURI(csv));
+            }
+            document.body.removeChild(link);
+        }
+    }
+    static _resolveFieldData(data, field, column) {
+        if (!data && !field) {
+            return null;
+        }
+        const needSplitValues = field.includes('.');
+        if (this._isFunction(field)) {
+            return field(data);
+        }
+        else if (!needSplitValues) {
+            return data[field];
+        }
+        else {
+            const fields = field.split('.');
+            let value = data;
+            for (let i = 0, len = fields.length; i < len; ++i) {
+                if (value === null || value === undefined) {
+                    return null;
+                }
+                value = value[fields[i]];
+            }
+            return ExportUtils._extractData(value, column);
+        }
+    }
+    static _isFunction(obj) {
+        return !!(obj && obj.constructor && obj.call && obj.apply);
+    }
+    static _extractData(data, column) {
+        const _data = Array.isArray(data) ? data : [data];
+        switch (column.type) {
+            case EnumColumnFieldType.TOKENS:
+                return _data.map((d) => ExportUtils._parseToken(d));
+            default:
+                return data;
+        }
+    }
+    static _parseToken(data) {
+        if (isObject(data)) {
+            return data['label'];
+        }
+        else {
+            return data;
+        }
+    }
+}
+const isObject = (obj) => obj !== null && typeof obj === 'object';
+
+class TablePagingComponent {
+    translate;
+    hostProjectConfigs;
+    totalRecords;
+    exportFileName;
+    table;
+    exportable = true;
+    enableExportSelectedRecords = true;
+    customActions;
+    loadAllRecords;
+    loadCurrentPageRecords;
+    loadSelectedRecords;
+    totalRecordsText = '';
+    localeService = Inject(LocaleService);
+    constructor(translate, hostProjectConfigs) {
+        this.translate = translate;
+        this.hostProjectConfigs = hostProjectConfigs;
+    }
+    ngOnChanges(changes) {
+        if (changes['totalRecords']?.currentValue) {
+            this.totalRecordsText = this.translate.instant(`${this.getTranslatePrefix()}total_records`, {
+                value: changes['totalRecords'].currentValue,
+            });
+        }
+    }
+    getTranslatePrefix() {
+        return `${this.hostProjectConfigs.domain}.${this.hostProjectConfigs.service}.`;
+    }
+    getTooltipText() {
+        return this.translate.instant(`${this.getTranslatePrefix()}export_to_csv`);
+    }
+    getActions() {
+        const actions = [
+            {
+                dataKey: 'exportCurrentPage',
+                label: this.translate.instant(`${this.getTranslatePrefix()}export_current_page`),
+                command: () => this.exportCurrentPage(),
+            },
+        ];
+        if (this.enableExportSelectedRecords) {
+            actions.push({
+                dataKey: 'exportSelected',
+                label: this.translate.instant(`${this.getTranslatePrefix()}export_selected_records`),
+                command: () => this.exportSelectedRecords(),
+            });
+        }
+        if (this.loadAllRecords) {
+            actions.push({
+                dataKey: 'exportAll',
+                label: this.translate.instant(`${this.getTranslatePrefix()}export_all_records`),
+                command: () => this.exportAllRecords(),
+            });
+        }
+        if (this.customActions?.length) {
+            const customMenus = this.customActions.map((p, $index) => ({
+                dataKey: `customAction_${$index}`,
+                label: p.label,
+                command: p.command,
+            }));
+            actions.push(...customMenus);
+        }
+        return actions;
+    }
+    validateComponent() {
+        if (!this.table) {
+            throw new Error('Table component not defined');
+        }
+    }
+    getColumnsToExport() {
+        return [...(this.table.columns ?? [])].map((column) => {
+            const exportColumn = {
+                ...column,
+                header: column.header,
+                exportable: true,
+                field: column.field,
+                separator: column.separator ?? ' - ',
+                enumPrefix: column.enumPrefix,
+                customExport: column.customExport,
+            };
+            if (column.exportable === false) {
+                exportColumn.exportable = false;
+            }
+            if (column.attributes && column.attributes.length) {
+                if (column.attributes.length === 1) {
+                    exportColumn.field = column.attributes[0];
+                }
+                else {
+                    exportColumn.field = column.attributes;
+                }
+            }
+            return exportColumn;
+        });
+    }
+    getCurrentPageRowsToExport(columns) {
+        let tableData = deepClone(this.table.value);
+        if (this.loadCurrentPageRecords) {
+            tableData = this.loadCurrentPageRecords();
+        }
+        tableData = this.mapNumberFormatOptionsExport(columns, tableData);
+        return this.mapColumnsTranslations(columns, tableData);
+    }
+    getSelectedRowsToExport(columns) {
+        let tableData = deepClone(this.table.selection);
+        if (this.loadSelectedRecords) {
+            tableData = this.loadSelectedRecords();
+        }
+        tableData = this.mapNumberFormatOptionsExport(columns, tableData);
+        return this.mapColumnsTranslations(columns, tableData);
+    }
+    getPropertyValue(obj, path) {
+        return path
+            .split('.')
+            .reduce((result, prop) => (result[prop] === undefined ? undefined : result[prop]), obj);
+    }
+    setPropertyValue(obj, path, value) {
+        this.recursionSetValue(obj, path.split('.'), value);
+    }
+    recursionSetValue(obj, keysList, value) {
+        const key = keysList[0];
+        if (keysList.length === 1) {
+            obj[key] = value;
+            return obj;
+        }
+        obj[key] = this.recursionSetValue(obj?.[key] || {}, keysList.slice(1), value);
+        return obj;
+    }
+    mapColumnsTranslations(columns, rows) {
+        const enumColumns = columns.filter((p) => p.enumPrefix);
+        if (!enumColumns.length) {
+            return rows;
+        }
+        return [...rows].map((row) => {
+            const newRow = { ...row };
+            enumColumns.forEach((column) => {
+                const fields = !Array.isArray(column.field) ? [column.field] : column.field;
+                fields.forEach((fieldName) => {
+                    const columnData = this.getPropertyValue(row, fieldName);
+                    if (columnData === null || columnData === undefined) {
+                        return;
+                    }
+                    const newValue = this.translateValue(column, columnData);
+                    this.setPropertyValue(newRow, fieldName, newValue);
+                });
+            });
+            return newRow;
+        });
+    }
+    mapCustomExport(columns, rows) {
+        const customColumns = columns.filter((p) => p.customExport);
+        if (!customColumns.length) {
+            return rows;
+        }
+        return [...rows].map((row) => {
+            const newRow = { ...row };
+            customColumns.forEach((column) => {
+                const fields = !Array.isArray(column.field) ? [column.field] : column.field;
+                fields.forEach((fieldName) => {
+                    const columnData = this.getPropertyValue(row, fieldName);
+                    if (columnData === null || columnData === undefined) {
+                        return;
+                    }
+                    const newValue = column.customExport(columnData);
+                    this.setPropertyValue(newRow, fieldName, newValue);
+                });
+            });
+            return newRow;
+        });
+    }
+    translateValue(column, columnData) {
+        // Default usage: ENUM_VALUE -> domain.service.enum_value
+        const enumValue = columnData.toString().toLowerCase();
+        let translationKey = column.enumPrefix + enumValue;
+        let translatedValue = this.translate.instant(translationKey);
+        // Custom usage 1: V9 -> domain.service.v_9
+        if (translationKey === translatedValue && enumValue.length > 1) {
+            translationKey = `${column.enumPrefix}${enumValue.substring(0, 1)}_${enumValue.substr(1)}`;
+            translatedValue = this.translate.instant(translationKey);
+        }
+        // Custom usage 2: EnumValue -> domain.service.enum_value
+        if (translationKey === translatedValue) {
+            const enumKey = this.convertToSnakeCase(columnData.toString());
+            translationKey = `${column.enumPrefix}${enumKey}`;
+            translatedValue = this.translate.instant(translationKey);
+        }
+        return translatedValue;
+    }
+    convertToSnakeCase(str) {
+        return str.replace(/([A-Z])/g, (_match, group) => `_${group.toLowerCase()}`).replace(/^_/, '');
+    }
+    getExportFileName() {
+        const lang = this.translate.currentLang ?? 'pt-BR';
+        const date = new Date();
+        const fileName = this.exportFileName ?? 'download';
+        const formattedDate = date.toLocaleDateString(lang).replace('_', '-');
+        const formattedTime = date.toLocaleTimeString(lang).replace(' ', '-');
+        return `${fileName}_${formattedDate}_${formattedTime}`;
+    }
+    exportCurrentPage() {
+        this.validateComponent();
+        const columns = this.getColumnsToExport();
+        const dataToExport = this.getCurrentPageRowsToExport(columns);
+        ExportUtils.exportCSV(columns, dataToExport, undefined, this.getExportFileName());
+    }
+    exportSelectedRecords() {
+        this.validateComponent();
+        const columns = this.getColumnsToExport();
+        const dataToExport = this.getSelectedRowsToExport(columns);
+        ExportUtils.exportCSV(columns, dataToExport, undefined, this.getExportFileName());
+    }
+    async exportAllRecords() {
+        this.validateComponent();
+        if (!this.loadAllRecords) {
+            return;
+        }
+        let serverData = await this.loadAllRecords();
+        const columns = this.getColumnsToExport();
+        serverData = this.mapCustomExport(columns, serverData);
+        serverData = this.mapNumberFormatOptionsExport(columns, serverData);
+        const dataToExport = this.mapColumnsTranslations(columns, serverData);
+        ExportUtils.exportCSV(columns, dataToExport, undefined, this.getExportFileName());
+    }
+    /**
+     * The purpose of this method is to map values
+     * from the TableColumnsComponent, which uses the numberFormatOptions
+     * field, along with rows that have a custom numberFormatOptions,
+     * to ensure the correct values are exported by the TablePagingComponent.
+     *
+     * @returns Returns the correctly mapped tableData.
+     */
+    mapNumberFormatOptionsExport(columns, tableData) {
+        const hasNumberFormatOptionsColumns = columns.some((column) => column.numberFormatOptions);
+        const hasNumberFormatOptionsRows = tableData.some((rowData) => Object.keys(rowData).some((key) => rowData[key]?.options?.numberFormatOptions));
+        if (!hasNumberFormatOptionsColumns && !hasNumberFormatOptionsRows)
+            return tableData;
+        if (hasNumberFormatOptionsColumns) {
+            tableData = tableData.map((rowData) => {
+                const columnsWithNumberFormatOptions = columns.filter((column) => column.numberFormatOptions);
+                for (const column of columnsWithNumberFormatOptions) {
+                    const attributes = column.attributes;
+                    const numberFormatOptions = typeof column.numberFormatOptions === 'function'
+                        ? column.numberFormatOptions({
+                            rowData,
+                        })
+                        : column.numberFormatOptions;
+                    for (const attribute of attributes) {
+                        if (isNullOrUndefined(rowData[attribute]))
+                            continue;
+                        if (rowData[attribute].options?.numberFormatOptions) {
+                            continue;
+                        }
+                        const value = rowData[attribute];
+                        const mappedValue = numberFormatOptions?.style === 'percent'
+                            ? new BigNumber(value).times(100)
+                            : new BigNumber(value);
+                        const numberFormat = new Intl.NumberFormat(this.localeService.getLocaleOptions().locale, {
+                            ...numberFormatOptions,
+                            style: 'decimal',
+                            useGrouping: false,
+                            roundingMode: 'trunc',
+                        });
+                        rowData[attribute] = numberFormat.format(mappedValue.toNumber());
+                    }
+                }
+                return rowData;
+            });
+        }
+        if (hasNumberFormatOptionsRows) {
+            tableData = tableData.map((rowData) => {
+                const keysWithNumberFormatOptions = Object.keys(rowData).filter((key) => rowData[key]?.options?.numberFormatOptions);
+                for (const key of keysWithNumberFormatOptions) {
+                    const value = rowData[key].value;
+                    const numberFormatOptions = rowData[key].options?.numberFormatOptions;
+                    const mappedValue = numberFormatOptions?.style === 'percent'
+                        ? new BigNumber(value).times(100)
+                        : new BigNumber(value);
+                    const numberFormat = new Intl.NumberFormat(this.localeService.getLocaleOptions().locale, {
+                        ...numberFormatOptions,
+                        style: 'decimal',
+                        useGrouping: false,
+                        roundingMode: 'trunc',
+                    });
+                    rowData[key] = numberFormat.format(mappedValue.toNumber());
+                }
+                return rowData;
+            });
+        }
+        return tableData;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TablePagingComponent, deps: [{ token: i2.TranslateService }, { token: HostProjectConfigsInjectionToken }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TablePagingComponent, selector: "s-table-paging", inputs: { totalRecords: "totalRecords", exportFileName: "exportFileName", table: "table", exportable: "exportable", enableExportSelectedRecords: "enableExportSelectedRecords", customActions: "customActions", loadAllRecords: "loadAllRecords", loadCurrentPageRecords: "loadCurrentPageRecords", loadSelectedRecords: "loadSelectedRecords" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"paging-container\">\n    <span class=\"total-records\">\n        {{ totalRecordsText }}\n    </span>\n    @if (exportable) {\n        <s-button\n            class=\"export-button\"\n            priority=\"default\"\n            iconClass=\"fa fa-fw fa-file-export\"\n            [disabled]=\"false\"\n            [auxiliary]=\"true\"\n            [tooltip]=\"getTooltipText()\"\n            [menuOptions]=\"getActions()\"\n        >\n        </s-button>\n    }\n</div>\n", styles: [".paging-container{display:flex;align-items:center}.export-button{margin-left:6px}\n"], dependencies: [{ kind: "component", type: i2$1.ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor"], outputs: ["clicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TablePagingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's-table-paging', template: "<div class=\"paging-container\">\n    <span class=\"total-records\">\n        {{ totalRecordsText }}\n    </span>\n    @if (exportable) {\n        <s-button\n            class=\"export-button\"\n            priority=\"default\"\n            iconClass=\"fa fa-fw fa-file-export\"\n            [disabled]=\"false\"\n            [auxiliary]=\"true\"\n            [tooltip]=\"getTooltipText()\"\n            [menuOptions]=\"getActions()\"\n        >\n        </s-button>\n    }\n</div>\n", styles: [".paging-container{display:flex;align-items:center}.export-button{margin-left:6px}\n"] }]
+        }], ctorParameters: () => [{ type: i2.TranslateService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [HostProjectConfigsInjectionToken]
+                }] }], propDecorators: { totalRecords: [{
+                type: Input
+            }], exportFileName: [{
+                type: Input
+            }], table: [{
+                type: Input
+            }], exportable: [{
+                type: Input
+            }], enableExportSelectedRecords: [{
+                type: Input
+            }], customActions: [{
+                type: Input
+            }], loadAllRecords: [{
+                type: Input
+            }], loadCurrentPageRecords: [{
+                type: Input
+            }], loadSelectedRecords: [{
+                type: Input
+            }] } });
+
+class TableModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: TableModule, declarations: [RowTogllerDirective, NavigationDirective, TableColumnsComponent, TablePagingComponent], imports: [CommonModule, TooltipModule, TokenListModule, TranslateModule, ButtonModule, InfoSignModule, BadgeModule], exports: [RowTogllerDirective, NavigationDirective, TableColumnsComponent, TablePagingComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableModule, imports: [CommonModule, TooltipModule, TokenListModule, TranslateModule, ButtonModule, InfoSignModule, BadgeModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, TooltipModule, TokenListModule, TranslateModule, ButtonModule, InfoSignModule, BadgeModule],
+                    exports: [RowTogllerDirective, NavigationDirective, TableColumnsComponent, TablePagingComponent],
+                    declarations: [RowTogllerDirective, NavigationDirective, TableColumnsComponent, TablePagingComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EnumBadgeColors, EnumColumnFieldType, NavigationDirective, RowTogllerDirective, TableColumnsComponent, TableModule, TablePagingComponent };
+//# sourceMappingURL=seniorsistemas-angular-components-table.mjs.map