@senior-agronegocio/angular-components 0.0.63 → 0.0.64

package/fesm5/senior-agronegocio-angular-components.js

@@ -7,13 +7,13 @@ import { filter, take, finalize, switchMap, map, catchError, takeUntil } from 'r
 import { Client, FrameImpl } from '@stomp/stompjs';
 import { get } from 'js-cookie';
 import { CommonModule, registerLocaleData } from '@angular/common';
+import localePt from '@angular/common/locales/pt';
 import { Validators, FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ButtonPriority, BadgeColors, FormField, FieldType, StepState as StepState$1, ButtonModule, CustomFieldsModule, ControlErrorsModule, EmptyStateModule, DynamicFormModule, TokenListModule, SidebarModule, LoadingStateModule, NumberInputModule, TableModule as TableModule$1, ObjectCardModule, LocaleModule, BadgeModule } from '@seniorsistemas/angular-components';
-import localePt from '@angular/common/locales/pt';
 import { MessageService as MessageService$1, ConfirmationService, DialogModule, FieldsetModule } from 'primeng';
-import { user } from '@seniorsistemas/senior-platform-data';
 import { HttpParams, HttpClient } from '@angular/common/http';
 import { MessageService, SharedModule as SharedModule$1 } from 'primeng/api';
+import { user } from '@seniorsistemas/senior-platform-data';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { PanelModule } from 'primeng/panel';
 import { TabViewModule } from 'primeng/tabview';
@@ -3489,7 +3489,14 @@ var ptBR = {
     "agro.angular_components.warn_cancel_fixation_message_title": "Cancelamento de fixação",
     "agro.angular_components.warn_cancel_fixation_message_description": "Não é permitido cancelar a fixação de compra imediata.",
     "agro.angular_components.warn_immediate_cancel_fixation_message_description": "Não é possível cancelar uma fixação realizada via compra imediata.",
-    "agro.angular_components.cancel_fixation_event": "Cancelamento de fixação"
+    "agro.angular_components.cancel_fixation_event": "Cancelamento de fixação",
+    "agro.angular_components.invoice_type_INCOMING": "Entrada",
+    "agro.angular_components.invoice_type_COMPLEMENT": "Complementar",
+    "agro.angular_components.invoice_type_ADJUSTMENT": "Ajuste",
+    "agro.angular_components.invoice_type_OUTGOING": "Saída",
+    "agro.angular_components.invoice_type_RETURN": "Devolução",
+    "agro.angular_components.invoice_type_SERVICE": "Serviço",
+    "agro.angular_components.invoice_type_SYMBOLIC_RETURN": "Devolução simbólica"
 };
 
 var enUS = {
@@ -3712,7 +3719,14 @@ var enUS = {
     "agro.angular_components.warn_cancel_fixation_message_title": "It is not possible to cancel the fixation",
     "agro.angular_components.warn_cancel_fixation_message_description": "It is not possible to cancel a fixation that is already cancelled or in process.",
     "agro.angular_components.warn_immediate_cancel_fixation_message_description": "It is not possible to cancel a fixation made via immediate buy.",
-    "agro.angular_components.cancel_fixation_event": "Cancel fixation"
+    "agro.angular_components.cancel_fixation_event": "Cancel fixation",
+    "agro.angular_components.invoice_type_INCOMING": "Incoming",
+    "agro.angular_components.invoice_type_COMPLEMENT": "Complementary",
+    "agro.angular_components.invoice_type_ADJUSTMENT": "Adjustment",
+    "agro.angular_components.invoice_type_OUTGOING": "Outgoing",
+    "agro.angular_components.invoice_type_RETURN": "Return",
+    "agro.angular_components.invoice_type_SERVICE": "Service",
+    "agro.angular_components.invoice_type_SYMBOLIC_RETURN": "Symbolic return"
 };
 
 var esCO = {
@@ -3935,7 +3949,14 @@ var esCO = {
     "agro.angular_components.warn_cancel_fixation_message_title": "No es posible cancelar la fijación",
     "agro.angular_components.warn_cancel_fixation_message_description": "No es posible cancelar una fijación que ya esté cancelada o en proceso.",
     "agro.angular_components.warn_immediate_cancel_fixation_message_description": "No es posible cancelar una fijación realizada vía compra inmediata.",
-    "agro.angular_components.cancel_fixation_event": "Cancelación de fijación"
+    "agro.angular_components.cancel_fixation_event": "Cancelación de fijación",
+    "agro.angular_components.invoice_type_INCOMING": "Entrada",
+    "agro.angular_components.invoice_type_COMPLEMENT": "Complementaria",
+    "agro.angular_components.invoice_type_ADJUSTMENT": "Ajuste",
+    "agro.angular_components.invoice_type_OUTGOING": "Salida",
+    "agro.angular_components.invoice_type_RETURN": "Devolución",
+    "agro.angular_components.invoice_type_SERVICE": "Servicio",
+    "agro.angular_components.invoice_type_SYMBOLIC_RETURN": "Devolución simbólica"
 };
 
 var LibTranslationService = /** @class */ (function () {
@@ -3989,93 +4010,15 @@ var LibTranslationService = /** @class */ (function () {
     return LibTranslationService;
 }());
 
-var LookupErrorMessages = {
-    required: 'agro.angular_components.error_required',
-    min: 'agro.angular_components.error_min_value',
-    max: 'agro.angular_components.error_max_value',
-    minlength: 'agro.angular_components.error_min_length',
-    maxlength: 'agro.angular_components.error_max_length',
-    pattern: 'agro.angular_components.error_invalid',
-    FormDateError_data1: 'agro.angular_components.initial_invalid_date',
-    FormDateError_data2: 'agro.angular_components.end_invalid_date'
-};
-
-var PaginatorStorageService = /** @class */ (function () {
-    function PaginatorStorageService() {
-        this.GET_USER_ID = user.getUserData().then(function (user) { return user.id; });
-        this.PAGINATOR_KEY = 'SENIOR_PAGINATOR';
-    }
-    PaginatorStorageService.prototype.store = function (key, value) {
-        return __awaiter(this, void 0, void 0, function () {
-            var _a, _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0:
-                        _b = (_a = sessionStorage).setItem;
-                        return [4 /*yield*/, this.GET_USER_ID];
-                    case 1:
-                        _b.apply(_a, [(_c.sent()) + "_" + key, JSON.stringify(value)]);
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    PaginatorStorageService.prototype.get = function (key) {
-        return __awaiter(this, void 0, void 0, function () {
-            var _a, _b, _c, _d;
-            return __generator(this, function (_e) {
-                switch (_e.label) {
-                    case 0:
-                        _b = (_a = JSON).parse;
-                        _d = (_c = sessionStorage).getItem;
-                        return [4 /*yield*/, this.GET_USER_ID];
-                    case 1: return [2 /*return*/, _b.apply(_a, [_d.apply(_c, [(_e.sent()) + "_" + key]) || '']) || {}];
-                }
-            });
-        });
-    };
-    PaginatorStorageService.prototype.storePaginator = function (key, listParams) {
-        if (listParams === void 0) { listParams = {}; }
-        return __awaiter(this, void 0, void 0, function () {
-            var store;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, this.get(this.PAGINATOR_KEY)];
-                    case 1:
-                        store = (_a.sent()) || {};
-                        store[key] = listParams;
-                        return [4 /*yield*/, this.store(this.PAGINATOR_KEY, store)];
-                    case 2:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    PaginatorStorageService.prototype.getPaginator = function (key) {
-        return __awaiter(this, void 0, void 0, function () {
-            var store;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, this.get(this.PAGINATOR_KEY)];
-                    case 1:
-                        store = (_a.sent()) || {};
-                        return [2 /*return*/, store[key] || {}];
-                }
-            });
-        });
-    };
-    return PaginatorStorageService;
-}());
-
-var EventStatus;
-(function (EventStatus) {
-    EventStatus["PENDING"] = "PENDING";
-    EventStatus["PROCESSING"] = "PROCESSING";
-    EventStatus["SUCCESS"] = "SUCCESS";
-    EventStatus["FAILED"] = "FAILED";
-    EventStatus["CANCELED"] = "CANCELED";
-})(EventStatus || (EventStatus = {}));
+var FixationStatus;
+(function (FixationStatus) {
+    FixationStatus["APPROVED"] = "APPROVED";
+    FixationStatus["CANCELED"] = "CANCELED";
+    FixationStatus["IN_ANALYSIS"] = "IN_ANALYSIS";
+    FixationStatus["FINISHED"] = "FINISHED";
+    FixationStatus["REJECTED"] = "REJECTED";
+    FixationStatus["IN_PROGRESS"] = "IN_PROGRESS";
+})(FixationStatus || (FixationStatus = {}));
 
 var EventOperation;
 (function (EventOperation) {
@@ -4113,6 +4056,20 @@ var EventOrigin;
     EventOrigin["CANCEL_FIXATION"] = "CANCEL_FIXATION";
 })(EventOrigin || (EventOrigin = {}));
 
+var EventStatus;
+(function (EventStatus) {
+    EventStatus["PENDING"] = "PENDING";
+    EventStatus["PROCESSING"] = "PROCESSING";
+    EventStatus["SUCCESS"] = "SUCCESS";
+    EventStatus["FAILED"] = "FAILED";
+    EventStatus["CANCELED"] = "CANCELED";
+})(EventStatus || (EventStatus = {}));
+
+var InputFields;
+(function (InputFields) {
+    InputFields["AGRO_INVOICE_TYPE"] = "agroInvoiceType";
+})(InputFields || (InputFields = {}));
+
 var eventOrigin = [
     { label: "agro.angular_components.balance_entry_control_event", value: EventOrigin.BALANCE_ENTRY_CONTROL },
     { label: "agro.angular_components.invoice_creating_event", value: EventOrigin.INVOICE },
@@ -4122,14 +4079,14 @@ var eventOrigin = [
 var eventItem = [
     { label: "agro.angular_components.ticket_event", value: EventOperation.TICKET },
     { label: "agro.angular_components.provisional_event", value: EventOperation.PROVISIONAL },
-    { label: "agro.angular_components.invoice_creating_event", value: EventOperation.CREATE_INVOICE },
+    { label: "agro.angular_components.invoice_creating_event", value: EventOperation.CREATE_INVOICE, subLabelField: InputFields.AGRO_INVOICE_TYPE },
     { label: "agro.angular_components.remove_provisional_event", value: EventOperation.REMOVE_PROVISIONAL },
     { label: "agro.angular_components.effective_event", value: EventOperation.EFFECTIVE },
     { label: "agro.angular_components.effective_confirmation_event", value: EventOperation.EFFECTIVE_CONFIRMATION },
     { label: "agro.angular_components.change_request_event_summary", value: EventOperation.CHANGE_REQUEST },
     { label: "agro.angular_components.change_response_event", value: EventOperation.CHANGE_RESPONSE },
     { label: "agro.angular_components.fixation_event", value: EventOperation.PROCESS_FIXATION },
-    { label: "agro.angular_components." + EventOperation.CANCEL_INVOICE, value: EventOperation.CANCEL_INVOICE },
+    { label: "agro.angular_components." + EventOperation.CANCEL_INVOICE, value: EventOperation.CANCEL_INVOICE, subLabelField: InputFields.AGRO_INVOICE_TYPE },
     { label: "agro.angular_components." + EventOperation.REPROCESS_INVOICE, value: EventOperation.REPROCESS_INVOICE },
     { label: "agro.angular_components." + EventOperation.EFFECTIVE_CONFIRMATION, value: EventOperation.EFFECTIVE_CONFIRMATION },
     { label: "agro.angular_components." + EventOperation.CHANGE_REQUEST, value: EventOperation.CHANGE_REQUEST },
@@ -4151,8 +4108,29 @@ var eventStatus = [
     { label: "agro.angular_components.pending", value: EventStatus.PENDING },
     { label: "agro.angular_components.processing", value: EventStatus.PROCESSING },
     { label: "agro.angular_components.canceled", value: EventStatus.CANCELED },
+];
+var inputFieldsPath = [
+    { path: "invoice", field: InputFields.AGRO_INVOICE_TYPE },
 ];
 
+var LookupErrorMessages = {
+    required: 'agro.angular_components.error_required',
+    min: 'agro.angular_components.error_min_value',
+    max: 'agro.angular_components.error_max_value',
+    minlength: 'agro.angular_components.error_min_length',
+    maxlength: 'agro.angular_components.error_max_length',
+    pattern: 'agro.angular_components.error_invalid',
+    FormDateError_data1: 'agro.angular_components.initial_invalid_date',
+    FormDateError_data2: 'agro.angular_components.end_invalid_date'
+};
+
+var OriginOperation;
+(function (OriginOperation) {
+    OriginOperation["ENTRY_IN_DEPOSIT"] = "ENTRY_IN_DEPOSIT";
+    OriginOperation["IMMEDIATE_BUY_ENTRY"] = "IMMEDIATE_BUY_ENTRY";
+    OriginOperation["ENTRY_TO_BE_FIXED"] = "ENTRY_TO_BE_FIXED";
+})(OriginOperation || (OriginOperation = {}));
+
 var EntityService = /** @class */ (function () {
     function EntityService(http, messageService, entityUrl, actionsUrl, queriesUrl, translate) {
         this.http = http;
@@ -4436,22 +4414,94 @@ var EventControlBoardService = /** @class */ (function () {
     return EventControlBoardService;
 }());
 
-var FixationStatus;
-(function (FixationStatus) {
-    FixationStatus["APPROVED"] = "APPROVED";
-    FixationStatus["CANCELED"] = "CANCELED";
-    FixationStatus["IN_ANALYSIS"] = "IN_ANALYSIS";
-    FixationStatus["FINISHED"] = "FINISHED";
-    FixationStatus["REJECTED"] = "REJECTED";
-    FixationStatus["IN_PROGRESS"] = "IN_PROGRESS";
-})(FixationStatus || (FixationStatus = {}));
+var PaginatorStorageService = /** @class */ (function () {
+    function PaginatorStorageService() {
+        this.GET_USER_ID = user.getUserData().then(function (user) { return user.id; });
+        this.PAGINATOR_KEY = 'SENIOR_PAGINATOR';
+    }
+    PaginatorStorageService.prototype.store = function (key, value) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        _b = (_a = sessionStorage).setItem;
+                        return [4 /*yield*/, this.GET_USER_ID];
+                    case 1:
+                        _b.apply(_a, [(_c.sent()) + "_" + key, JSON.stringify(value)]);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    PaginatorStorageService.prototype.get = function (key) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, _b, _c, _d;
+            return __generator(this, function (_e) {
+                switch (_e.label) {
+                    case 0:
+                        _b = (_a = JSON).parse;
+                        _d = (_c = sessionStorage).getItem;
+                        return [4 /*yield*/, this.GET_USER_ID];
+                    case 1: return [2 /*return*/, _b.apply(_a, [_d.apply(_c, [(_e.sent()) + "_" + key]) || '']) || {}];
+                }
+            });
+        });
+    };
+    PaginatorStorageService.prototype.storePaginator = function (key, listParams) {
+        if (listParams === void 0) { listParams = {}; }
+        return __awaiter(this, void 0, void 0, function () {
+            var store;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.get(this.PAGINATOR_KEY)];
+                    case 1:
+                        store = (_a.sent()) || {};
+                        store[key] = listParams;
+                        return [4 /*yield*/, this.store(this.PAGINATOR_KEY, store)];
+                    case 2:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    PaginatorStorageService.prototype.getPaginator = function (key) {
+        return __awaiter(this, void 0, void 0, function () {
+            var store;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.get(this.PAGINATOR_KEY)];
+                    case 1:
+                        store = (_a.sent()) || {};
+                        return [2 /*return*/, store[key] || {}];
+                }
+            });
+        });
+    };
+    return PaginatorStorageService;
+}());
 
-var OriginOperation;
-(function (OriginOperation) {
-    OriginOperation["ENTRY_IN_DEPOSIT"] = "ENTRY_IN_DEPOSIT";
-    OriginOperation["IMMEDIATE_BUY_ENTRY"] = "IMMEDIATE_BUY_ENTRY";
-    OriginOperation["ENTRY_TO_BE_FIXED"] = "ENTRY_TO_BE_FIXED";
-})(OriginOperation || (OriginOperation = {}));
+var InvoiceType;
+(function (InvoiceType) {
+    InvoiceType["INCOMING"] = "INCOMING";
+    InvoiceType["OUTGOING"] = "OUTGOING";
+    InvoiceType["RETURN"] = "RETURN";
+    InvoiceType["COMPLEMENT"] = "COMPLEMENT";
+    InvoiceType["SYMBOLIC_RETURN"] = "SYMBOLIC_RETURN";
+    InvoiceType["ADJUSTMENT"] = "ADJUSTMENT";
+    InvoiceType["SERVICE"] = "SERVICE";
+})(InvoiceType || (InvoiceType = {}));
+
+var invoiceTypeTranslate = [
+    { value: InvoiceType.INCOMING, label: "agro.angular_components.invoice_type_" + InvoiceType.INCOMING },
+    { value: InvoiceType.COMPLEMENT, label: "agro.angular_components.invoice_type_" + InvoiceType.COMPLEMENT },
+    { value: InvoiceType.ADJUSTMENT, label: "agro.angular_components.invoice_type_" + InvoiceType.ADJUSTMENT },
+    { value: InvoiceType.OUTGOING, label: "agro.angular_components.invoice_type_" + InvoiceType.OUTGOING },
+    { value: InvoiceType.RETURN, label: "agro.angular_components.invoice_type_" + InvoiceType.RETURN },
+    { value: InvoiceType.SERVICE, label: "agro.angular_components.invoice_type_" + InvoiceType.SERVICE },
+    { value: InvoiceType.SYMBOLIC_RETURN, label: "agro.angular_components.invoice_type_" + InvoiceType.SYMBOLIC_RETURN },
+];
 
 var EventControlBoardComponent = /** @class */ (function () {
     function EventControlBoardComponent(translate, formBuilder, websocketService, eventControlBoardService, paginatorStorageService, messageService, confirmationService) {
@@ -4475,6 +4525,8 @@ var EventControlBoardComponent = /** @class */ (function () {
         this.currentListParams = { page: AGRO_NUMBERS.ZERO, size: AGRO_NUMBERS.TEN, sort: [], filterData: {} };
         this.ngUnsubscribe = new Subject();
         this.eventItem = eventItem;
+        this.inputFieldsPath = inputFieldsPath;
+        this.invoiceTypeTranslate = invoiceTypeTranslate;
         registerLocaleData(localePt);
     }
     EventControlBoardComponent.prototype.ngOnInit = function () {
@@ -4669,6 +4721,7 @@ var EventControlBoardComponent = /** @class */ (function () {
             controlCode: item.controlCode,
             eventType: item.eventOrigin,
             label: this.getEventLabel(detail),
+            subLabel: this.getEventSubLabel(detail),
             disabled: detail.status === EventStatus.PENDING && detailIndex !== this.calculateActiveIndex(item.eventControlItem),
             tooltip: this.getEventLabel(detail),
             state: this.determineStepState(detail)
@@ -4688,6 +4741,38 @@ var EventControlBoardComponent = /** @class */ (function () {
         var eventLabel = (_a = this.eventItem.find(function (e) { return e.value === detail.eventOperation; })) === null || _a === void 0 ? void 0 : _a.label;
         return eventLabel ? this.translate.instant(eventLabel) : detail.eventOperation;
     };
+    EventControlBoardComponent.prototype.getEventSubLabel = function (detail) {
+        var _a, _b;
+        var field = (_a = this.eventItem.find(function (e) { return e.value === detail.eventOperation; })) === null || _a === void 0 ? void 0 : _a.subLabelField;
+        if (!field || !detail.input) {
+            return null;
+        }
+        var path = (_b = this.inputFieldsPath.find(function (f) { return f.field === field; })) === null || _b === void 0 ? void 0 : _b.path;
+        var fullPath = path ? path + "." + field : field;
+        var value = this.getValueFieldJsonFromPath(detail.input, fullPath);
+        return this.formatFieldValue(field, value);
+    };
+    EventControlBoardComponent.prototype.getValueFieldJsonFromPath = function (json, path) {
+        try {
+            var parsedJson = JSON.parse(json);
+            var keys = path.split('.');
+            return keys.reduce(function (acc, key) { return acc && acc[key]; }, parsedJson);
+        }
+        catch (error) {
+            console.error('Erro ao acessar o objeto pelo path: ' + path, error);
+            return null;
+        }
+    };
+    EventControlBoardComponent.prototype.formatFieldValue = function (field, value) {
+        var _a;
+        switch (field) {
+            case InputFields.AGRO_INVOICE_TYPE:
+                var label = (_a = this.invoiceTypeTranslate.find(function (e) { return e.value === value; })) === null || _a === void 0 ? void 0 : _a.label;
+                return label ? this.translate.instant(label) : value;
+            default:
+                return value;
+        }
+    };
     EventControlBoardComponent.prototype.getSortedFields = function () {
         var _this = this;
         var _a;
@@ -5053,7 +5138,7 @@ var EventStepsComponent = /** @class */ (function () {
     EventStepsComponent = EventStepsComponent_1 = __decorate([
         Component({
             selector: "s-event-steps",
-            template: "<div [id]=\"id\" class=\"s-steps-container\">\r\n    <ng-container *ngFor=\"let step of visibledStep; let i = index; let isFirst = first; let isLast = last\">\r\n        <div *ngIf=\"!isFirst\" class=\"s-step-progress-bar\"\r\n            [@activeDesative]=\"barAnimation(i, activeIndex) ? 'active': 'desactive'\" [ngClass]=\"{\r\n            's-step-success': (step.state === stepState.Success),\r\n            's-step-warning': (step.state === stepState.Warning),\r\n            's-step-disabled': step.disabled,\r\n            's-step-visited': (i < activeIndex),\r\n            's-step-active': (i === activeIndex)\r\n        }\"></div>\r\n        <div [id]=\"id + '-step-' + (i)\" class=\"s-step-header\" (click)=\"stepClick(step, i, $event)\" role=\"tab\"\r\n            tabindex=\"0\" [attr.aria-label]=\"step.ariaLabel || null\" [attr.aria-controls]=\"step.ariaControls\"\r\n            [attr.aria-labelledby]=\"!step.ariaLabel ? 'step-label-' + i : null\" [attr.aria-posinset]=\"i + 1\"\r\n            [attr.aria-setsize]=\"visibledStep.length\" [attr.aria-selected]=\"activeIndex == i\" [ngClass]=\"{\r\n            's-step-success': (step.state === stepState.Success),\r\n            's-step-warning': (step.state === stepState.Warning),\r\n            's-step-visited': (i < activeIndex),\r\n            's-step-active': (i === activeIndex),\r\n            's-step-previous': (i === activeIndex - 1),\r\n            'success-status': (step.state === stepState.Success),\r\n            'failed-status': (step.state === stepState.Warning)\r\n        }\">\r\n            <div *ngIf=\"!isFirst\"\r\n                [@beforeActiveDesative]=\"barAnimation(i, activeIndex) ? 'active': 'desactive'\"\r\n                class=\"s-step-progress-bar-before\" [ngClass]=\"{\r\n                's-step-success': (step.state === stepState.Success),\r\n                's-step-warning': (step.state === stepState.Warning),\r\n                's-step-disabled': step.disabled,\r\n                's-step-visited': (i < activeIndex),\r\n                's-step-active': (i === activeIndex)\r\n            }\"></div>\r\n            <div *ngIf=\"!isLast\"\r\n                [@afterActiveDesative]=\"afterBarAnimation(i, activeIndex) ? 'active': 'desactive'\"\r\n                class=\"s-step-progress-bar-after\" [ngClass]=\"{\r\n                's-step-success': (step.state === stepState.Success),\r\n                's-step-warning': (step.state === stepState.Warning),\r\n                's-step-disabled': visibledStep[i + 1].disabled,\r\n                's-step-visited': ((i + 1) < activeIndex),\r\n                's-step-active': (i === (activeIndex - 1))\r\n            }\"></div>\r\n            <div\r\n                class=\"s-step-index\"\r\n                [ngClass]=\"{'s-step-disabled': step.disabled, 'loading-status': !step.disabled}\"\r\n                [pTooltip]=\"step.tooltip\"\r\n                tooltipPosition=\"top\">\r\n                <div class=\"s-step-index-content\">\r\n                    <span\r\n                        *ngIf=\"step.state !== stepState.Warning && (step.state == stepState.Success || activeIndex > i)\"\r\n                        class=\"fas fa-check\"\r\n                        aria-hidden=\"true\"\r\n                        [attr.aria-label]=\"i + 1\"></span>\r\n                        <span\r\n                        *ngIf=\"step.state == stepState.Warning\"\r\n                        class=\"fas fa-exclamation-triangle\"\r\n                        aria-hidden=\"true\"\r\n                        [attr.aria-label]=\"i + 1\"></span>\r\n                        <span\r\n                        *ngIf=\"step.state != stepState.Success && step.state != stepState.Warning\r\n                         && activeIndex <= i && !step.disabled\"\r\n                        class=\"fa fa-hourglass-half loading-status\"\r\n                        aria-hidden=\"true\"\r\n                        [attr.aria-label]=\"i + 1\"></span>\r\n                        <span\r\n                            *ngIf=\"step.disabled\">\r\n                            {{i + 1}}\r\n                        </span>\r\n                </div>\r\n            </div>\r\n            <div\r\n                [id]=\"'step-label-' + i\"\r\n                class=\"s-step-label\"\r\n                [ngClass]=\"{'s-step-disabled': step.disabled}\">\r\n                <span>\r\n                    {{step.label}}\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</div>\r\n",
+            template: "<div [id]=\"id\" class=\"s-steps-container\">\r\n    <ng-container *ngFor=\"let step of visibledStep; let i = index; let isFirst = first; let isLast = last\">\r\n        <div *ngIf=\"!isFirst\" class=\"s-step-progress-bar\"\r\n            [@activeDesative]=\"barAnimation(i, activeIndex) ? 'active': 'desactive'\" [ngClass]=\"{\r\n            's-step-success': (step.state === stepState.Success),\r\n            's-step-warning': (step.state === stepState.Warning),\r\n            's-step-disabled': step.disabled,\r\n            's-step-visited': (i < activeIndex),\r\n            's-step-active': (i === activeIndex)\r\n        }\"></div>\r\n        <div [id]=\"id + '-step-' + (i)\" class=\"s-step-header\" (click)=\"stepClick(step, i, $event)\" role=\"tab\"\r\n            tabindex=\"0\" [attr.aria-label]=\"step.ariaLabel || null\" [attr.aria-controls]=\"step.ariaControls\"\r\n            [attr.aria-labelledby]=\"!step.ariaLabel ? 'step-label-' + i : null\" [attr.aria-posinset]=\"i + 1\"\r\n            [attr.aria-setsize]=\"visibledStep.length\" [attr.aria-selected]=\"activeIndex == i\" [ngClass]=\"{\r\n            's-step-success': (step.state === stepState.Success),\r\n            's-step-warning': (step.state === stepState.Warning),\r\n            's-step-visited': (i < activeIndex),\r\n            's-step-active': (i === activeIndex),\r\n            's-step-previous': (i === activeIndex - 1),\r\n            'success-status': (step.state === stepState.Success),\r\n            'failed-status': (step.state === stepState.Warning)\r\n        }\">\r\n            <div *ngIf=\"!isFirst\"\r\n                [@beforeActiveDesative]=\"barAnimation(i, activeIndex) ? 'active': 'desactive'\"\r\n                class=\"s-step-progress-bar-before\" [ngClass]=\"{\r\n                's-step-success': (step.state === stepState.Success),\r\n                's-step-warning': (step.state === stepState.Warning),\r\n                's-step-disabled': step.disabled,\r\n                's-step-visited': (i < activeIndex),\r\n                's-step-active': (i === activeIndex)\r\n            }\"></div>\r\n            <div *ngIf=\"!isLast\"\r\n                [@afterActiveDesative]=\"afterBarAnimation(i, activeIndex) ? 'active': 'desactive'\"\r\n                class=\"s-step-progress-bar-after\" [ngClass]=\"{\r\n                's-step-success': (step.state === stepState.Success),\r\n                's-step-warning': (step.state === stepState.Warning),\r\n                's-step-disabled': visibledStep[i + 1].disabled,\r\n                's-step-visited': ((i + 1) < activeIndex),\r\n                's-step-active': (i === (activeIndex - 1))\r\n            }\"></div>\r\n            <div\r\n                class=\"s-step-index\"\r\n                [ngClass]=\"{'s-step-disabled': step.disabled, 'loading-status': !step.disabled}\"\r\n                [pTooltip]=\"step.tooltip\"\r\n                tooltipPosition=\"top\">\r\n                <div class=\"s-step-index-content\">\r\n                    <span\r\n                        *ngIf=\"step.state !== stepState.Warning && (step.state == stepState.Success || activeIndex > i)\"\r\n                        class=\"fas fa-check\"\r\n                        aria-hidden=\"true\"\r\n                        [attr.aria-label]=\"i + 1\"></span>\r\n                        <span\r\n                        *ngIf=\"step.state == stepState.Warning\"\r\n                        class=\"fas fa-exclamation-triangle\"\r\n                        aria-hidden=\"true\"\r\n                        [attr.aria-label]=\"i + 1\"></span>\r\n                        <span\r\n                        *ngIf=\"step.state != stepState.Success && step.state != stepState.Warning\r\n                         && activeIndex <= i && !step.disabled\"\r\n                        class=\"fa fa-hourglass-half loading-status\"\r\n                        aria-hidden=\"true\"\r\n                        [attr.aria-label]=\"i + 1\"></span>\r\n                        <span\r\n                            *ngIf=\"step.disabled\">\r\n                            {{i + 1}}\r\n                        </span>\r\n                </div>\r\n            </div>\r\n            <div\r\n                [id]=\"'step-label-' + i\"\r\n                class=\"s-step-label\"\r\n                [ngClass]=\"{'s-step-disabled': step.disabled}\">\r\n                <span>\r\n                    {{step.label}}\r\n                </span>\r\n            </div>\r\n            <div\r\n                *ngIf=\"step.subLabel\"\r\n                [id]=\"'step-label-' + i\"\r\n                class=\"s-step-label\"\r\n                [ngClass]=\"{'s-step-disabled': step.disabled}\">\r\n                <span>\r\n                    {{step.subLabel}}\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</div>\r\n",
             host: {
                 "aria-orientation": "horizontal",
                 role: "tablist",
@@ -5091,7 +5176,7 @@ var EventStepsComponent = /** @class */ (function () {
                     transition(desactiveActive, [animate("50ms 100ms linear")]),
                 ]),
             ],
-            styles: [".s-steps-container{display:-ms-flexbox;display:flex;white-space:nowrap;-ms-flex-align:start;align-items:flex-start;overflow-x:auto;padding:20px 10px;text-align:center}.s-step-header{box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;position:relative;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:66px;padding:0 10px}.s-step-header .s-step-label{white-space:pre;color:#999;font-size:14px;font-weight:400;padding-top:5px}.s-step-header .s-step-progress-bar-before{margin:0;position:absolute;top:20px;-ms-flex:auto;flex:auto;height:3px;overflow:hidden;width:calc(50% - 20px);background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%;left:0}.s-step-header .s-step-progress-bar-before.s-step-active,.s-step-header .s-step-progress-bar-before.s-step-visited{background-position:left bottom}.s-step-header .s-step-progress-bar-after{margin:0;position:absolute;top:20px;-ms-flex:auto;flex:auto;height:3px;overflow:hidden;width:calc(50% - 20px);background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%;right:0}.s-step-header .s-step-progress-bar-after.s-step-active,.s-step-header .s-step-progress-bar-after.s-step-visited{background-position:left bottom}.s-step-progress-bar{margin:0;position:relative;top:20px;-ms-flex:auto;flex:auto;height:3px;overflow:hidden;width:100%;background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%}.s-step-disabled{opacity:.5;filter:Alpha(Opacity=50)}.s-step-disabled,.s-step-disabled *{cursor:text!important}.s-step-active.s-step-disabled{opacity:1}.s-step-index{background-color:#fff;border:3px solid #ccc;border-radius:50%;color:#999;display:inline-block;font-weight:700;position:relative;transition:background-color .2s ease-out;height:40px;width:40px;-ms-flex:none;flex:none}.s-step-index .s-step-index-content{line-height:18px;font-size:18px;padding-top:8.5px;text-align:center;position:relative;cursor:pointer}.s-step-index:hover{background-color:#f7f7f7}.s-step-warning .s-step-index .s-step-index-content{padding-top:7px}.s-step-visited .s-step-index{border-color:#7892a1;animation:.1s ease-out alternate scale-up-center;background-color:#7892a1}.s-step-visited .s-step-index-content>span{color:#fff}.s-step-active.s-step-progress-bar,.s-step-visited.s-step-progress-bar{background-position:left bottom}.s-step-active .s-step-index{border-color:#7892a1;color:#7892a1;cursor:default}.s-step-active .s-step-label{color:#333;font-weight:700}@media (max-width:767px){.s-step-label{display:none}}@keyframes scale-up-center{0%{transform:scale(.5)}100%{transform:scale(1)}}.failed-status .fa-exclamation-triangle{color:#fff}.failed-status .s-step-index{border-color:#de3218!important;background-color:#de3218!important}.success-status .s-step-index{border-color:#1e973a!important;background-color:#1e973a!important}.loading-status .s-step-index{border-color:#72a9cf!important;background-color:#72a9cf!important;color:#72a9cf}@keyframes blink{0%,100%{opacity:.8}50%{opacity:.5}}@keyframes rotate-and-pause{0%,10%{transform:rotate(0)}10%,45%{transform:rotate(180deg)}100%,55%{transform:rotate(360deg)}}.fa-hourglass-half{animation:3s linear infinite blink,4s linear infinite rotate-and-pause}"]
+            styles: [".s-steps-container{display:-ms-flexbox;display:flex;white-space:nowrap;-ms-flex-align:start;align-items:flex-start;overflow-x:auto;padding:20px 10px;text-align:center}.s-step-header{box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;position:relative;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:76px;padding:0 10px}.s-step-header .s-step-label{white-space:pre;color:#999;font-size:14px;font-weight:400;padding-top:5px}.s-step-header .s-step-progress-bar-before{margin:0;position:absolute;top:20px;-ms-flex:auto;flex:auto;height:3px;overflow:hidden;width:calc(50% - 20px);background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%;left:0}.s-step-header .s-step-progress-bar-before.s-step-active,.s-step-header .s-step-progress-bar-before.s-step-visited{background-position:left bottom}.s-step-header .s-step-progress-bar-after{margin:0;position:absolute;top:20px;-ms-flex:auto;flex:auto;height:3px;overflow:hidden;width:calc(50% - 20px);background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%;right:0}.s-step-header .s-step-progress-bar-after.s-step-active,.s-step-header .s-step-progress-bar-after.s-step-visited{background-position:left bottom}.s-step-progress-bar{margin:0;position:relative;top:20px;-ms-flex:auto;flex:auto;height:3px;overflow:hidden;width:100%;background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%}.s-step-disabled{opacity:.5;filter:Alpha(Opacity=50)}.s-step-disabled,.s-step-disabled *{cursor:text!important}.s-step-active.s-step-disabled{opacity:1}.s-step-index{background-color:#fff;border:3px solid #ccc;border-radius:50%;color:#999;display:inline-block;font-weight:700;position:relative;transition:background-color .2s ease-out;height:40px;width:40px;-ms-flex:none;flex:none}.s-step-index .s-step-index-content{line-height:18px;font-size:18px;padding-top:8.5px;text-align:center;position:relative;cursor:pointer}.s-step-index:hover{background-color:#f7f7f7}.s-step-warning .s-step-index .s-step-index-content{padding-top:7px}.s-step-visited .s-step-index{border-color:#7892a1;animation:.1s ease-out alternate scale-up-center;background-color:#7892a1}.s-step-visited .s-step-index-content>span{color:#fff}.s-step-active.s-step-progress-bar,.s-step-visited.s-step-progress-bar{background-position:left bottom}.s-step-active .s-step-index{border-color:#7892a1;color:#7892a1;cursor:default}.s-step-active .s-step-label{color:#333;font-weight:700}@media (max-width:767px){.s-step-label{display:none}}@keyframes scale-up-center{0%{transform:scale(.5)}100%{transform:scale(1)}}.failed-status .fa-exclamation-triangle{color:#fff}.failed-status .s-step-index{border-color:#de3218!important;background-color:#de3218!important}.success-status .s-step-index{border-color:#1e973a!important;background-color:#1e973a!important}.loading-status .s-step-index{border-color:#72a9cf!important;background-color:#72a9cf!important;color:#72a9cf}@keyframes blink{0%,100%{opacity:.8}50%{opacity:.5}}@keyframes rotate-and-pause{0%,10%{transform:rotate(0)}10%,45%{transform:rotate(180deg)}100%,55%{transform:rotate(360deg)}}.fa-hourglass-half{animation:3s linear infinite blink,4s linear infinite rotate-and-pause}"]
         })
     ], EventStepsComponent);
     return EventStepsComponent;