ng-easycommerce 0.0.447 → 0.0.450

package/README.md

@@ -1,3 +1,14 @@
+# version 0.0.450
+- Se arregla el metodo de decidir para que use las url segun el entorno enviado en el campo public_enviroment
+- Se agrega un metodo en el channel-config.service.ts para poder cambiar de canal via hostname. 
+# version 0.0.449
+- Se quitan los decimales para la moneda de Suecia (SEK)
+
+# version 0.0.448
+- Se agrega la funcionalidad para poder ordenar por columnas las ordenes de los clientes.
+- Se modifica la funcion setSearchValue de header-ec para que acepte una funcion que se ejecuta al presionar enter.
+- Se arregla el problema de estilos en los botones del checkout.
+
 # version 0.0.447
 - Se actualiza el componente de build-your-ec para que trabaje con la toma de los filtros de atributos.
 

package/assets/decidirFormEc.html

@@ -15,6 +15,7 @@
 
         let modoHead = dataDecidirHead?.config?.public_environment || null
         modoHead && (modoHead == 'prod' && (modoHead = false) || modoHead == 'test' && (modoHead = true))
+        //console.log('modo head',modoHead, dataDecidirHead)
         !modoHead && (modoHead = window.location.host.includes('easycommerce'))
         let my_awesome_script = document.createElement('script');
         my_awesome_script.setAttribute('defer', 'defer')
@@ -88,7 +89,7 @@
         my_copy_script.setAttribute('type', 'text/javascript');
         
         let infoDecidir = JSON.parse(localStorage.getItem('dataDecidir')) || undefined
-        console.log(infoDecidir)
+        //console.log(infoDecidir)
         let urlBase = 'https://h.online-metrix.net/fp/tags.js';
         let ord_id = infoDecidir?.config?.public_environment == 'test' ? '1snn5n9w' : 'k8vif92e'
         let merchand_id = infoDecidir?.config?.public_merchand_id || 'decidir_agregador'
@@ -288,10 +289,9 @@
             let cybersource = dataDecidir?.config?.public_cybersource && dataDecidir?.config?.public_cybersource == 'deshabilitado'
             let modo = dataDecidir?.config?.public_environment || null
 
-            modo && (modo == 'prod' && (modo = false) || modo == 'test' && (modo = true))
-            !modo && (modo = window.location.host.includes('easycommerce'))
+            modo ? (modo == 'prod' ? modo = false : modo = true): (modo = window.location.host.includes('easycommerce'))
 
-            const decidir = new Decidir(modo && urlSandbox || urlProduccion, cybersource);
+            const decidir = new Decidir(modo && modo ? urlSandbox : urlProduccion, cybersource);
             decidir.setPublishableKey(publicApiKey);
             decidir.setTimeout(5000);
 

package/bundles/ng-easycommerce.umd.js

@@ -419,7 +419,7 @@
                         code: 'SEK',
                         symbol: 'SEK',
                         position: 'R',
-                        withoutDecimals: false
+                        withoutDecimals: true
                     }
                 ];
                 _this.currency = currencyTypeCofig.find(function (ct) { return ct.code == currencyTypeFind.toUpperCase(); }) || _this.currency;
@@ -3480,6 +3480,30 @@
                 _this.consts.setCurrency(channelObj.baseCurrency);
                 _this.injector.get(AddressingService).setTypeSelectAddress(channelObj.headquarterSelectionOnly || 'LOAD_ADDRESS_AND_SELECTION');
             };
+            /**
+             * @description cambian de canal segun el hostname que recibe por parametro.
+             * @warning  esta funcion es util para el caso en que se necesite manejar url distintas,
+             * cada una con su configuración de canal, pero utilizando el mismo frontend.
+             * En cualquier otro caso, utilizar las demas herramientas.
+             * @param {string} hostname hostname del canal que se requiere utilizar.
+             */
+            this.changeChannelByHostname = function (hostname) {
+                //console.log(this.channelsSubject.getValue())
+                _this.connection.get(_this.channelsApi()).toPromise().then(function (res) {
+                    var channel = res.filter(function (elem) { return elem.hostname == hostname; });
+                    if (channel) {
+                        if (channel[0].code != _this.consts.getChannel()) {
+                            console.log(channel[0]);
+                            _this.changeChannel(channel[0]);
+                            window.location.href = window.location.href;
+                        }
+                    }
+                    else {
+                        console.log("El hostname no coincide con ninguno que venga en los canales");
+                    }
+                });
+                //return channel
+            };
             this.getChannelConfig();
             this.getChannels();
             this.getLocales();
@@ -8246,8 +8270,12 @@
                 _this.authService.logout();
                 _this.router.navigateByUrl('home');
             };
-            _this.setSearchValue = function (event) {
-                event.key == 'Enter' && _this.getCollectionSearch();
+            _this.setSearchValue = function (event, afterSearch) {
+                var args = [];
+                for (var _i = 2; _i < arguments.length; _i++) {
+                    args[_i - 2] = arguments[_i];
+                }
+                event.key == 'Enter' && _this.getCollectionSearch() && (afterSearch ? afterSearch(args) : null);
                 _this.searchValue = event.target.value;
             };
             _this.getCollectionSearch = function () { return _this.router.navigateByUrl('/collection?search=' + _this.searchValue); };
@@ -10744,6 +10772,21 @@
             _this.router = router;
             _this.consts = consts;
             _this.loading = true;
+            /**
+             * @description name -> nombre de clave de valuesToSort; asc -> true: ascendente, false: descendente
+             */
+            _this.currentSort = { name: '', asc: true };
+            /**
+             * @description true -> ordena de forma ascendente | false -> ordena de forma decreciente
+             */
+            _this.valuesToSort = {
+                number: { asc: true, attribute: 'number' },
+                paymentState: { asc: true, attribute: 'state' },
+                method: { asc: true, attribute: 'method', subAttribute: 'name' },
+                methodState: { asc: true, attribute: 'state' },
+                date: { asc: true, attribute: 'checkoutCompletedAt' },
+                total: { asc: true, attribute: 'total' }
+            };
             _this.sortedByNewest = function (orders) { return orders && orders.length && orders.sort(function (anOrder, otherOrder) { return anOrder.number > otherOrder.number ? -1 : 1; }); };
             _this.goToOrder = function (order) {
                 _this.ordersService.setSelectedOrder(order);
@@ -10770,6 +10813,87 @@
                     }
                 }
             };
+            /**
+            * @description Ordena la lista de ordenes
+            * @param value recibe una valor que debe coincidir con las claves de la variable valuesToSort
+            */
+            _this.sortOrders = function (value) {
+                _this.sortValue = value;
+                _this.setCurrentSort(_this.sortValue, _this.valuesToSort[_this.sortValue].asc);
+                var comparator = (_this.valuesToSort[_this.sortValue].asc)
+                    ? [-1, 1]
+                    : [1, -1];
+                _this.valuesToSort[_this.sortValue].asc = !_this.valuesToSort[_this.sortValue].asc;
+                var typeValue;
+                if (_this.orders.length > 0) {
+                    typeValue = typeof (_this.orders[0]);
+                }
+                var sortFunction = _this.getSortFunction(_this.sortValue);
+                _this.orders =
+                    _this.sortValue
+                        ? _this.orders.sort(function (aOrders, otherOrders) { return sortFunction(aOrders, otherOrders, _this.valuesToSort[_this.sortValue], comparator); })
+                        : _this.orders;
+            };
+            /**
+             * @description retorna la funcion que se debe utilizar para el sort del arreglo
+             * @param value parametro que indica el tipo de funcion que debe retornar
+             * @returns funcion para utilizar en la busqueda
+             */
+            _this.getSortFunction = function (value) {
+                switch (value) {
+                    case 'paymentState':
+                        return _this.sortPaymentState;
+                    case 'method':
+                        return _this.sortShipments;
+                    case 'methodState':
+                        return _this.sortShipments;
+                    case 'total':
+                        return _this.sortNumber;
+                    default:
+                        return _this.sortText;
+                }
+            };
+            /* Funciones para ordernar */
+            _this.sortPaymentState = function (aOrders, otherOrders, data, comparator) {
+                return (aOrders.payments[0][data.attribute] == otherOrders.payments[0][data.attribute])
+                    ? _this.tieBreaker(aOrders, otherOrders, comparator)
+                    : String(aOrders.payments[0][data.attribute]).toLowerCase() < String(otherOrders.payments[0][data.attribute]).toLowerCase() ? comparator[0] : comparator[1];
+            };
+            _this.sortShipments = function (aOrders, otherOrders, data, comparator) {
+                if (data.subAttribute) {
+                    return (aOrders.shipments[0][data.attribute][data.subAttribute] == otherOrders.shipments[0][data.attribute][data.subAttribute])
+                        ? _this.tieBreaker(aOrders, otherOrders, comparator)
+                        : String(aOrders.shipments[0][data.attribute][data.subAttribute]).toLowerCase() < String(otherOrders.shipments[0][data.attribute][data.subAttribute]).toLowerCase() ? comparator[0] : comparator[1];
+                }
+                else {
+                    return (aOrders.shipments[0][data.attribute] == otherOrders.shipments[0][data.attribute])
+                        ? _this.tieBreaker(aOrders, otherOrders, comparator)
+                        : String(aOrders.shipments[0][data.attribute]).toLowerCase() < String(otherOrders.shipments[0][data.attribute]).toLowerCase() ? comparator[0] : comparator[1];
+                }
+            };
+            _this.sortNumber = function (aOrders, otherOrders, data, comparator) { return aOrders[data.attribute] < otherOrders[data.attribute] ? comparator[0] : comparator[1]; };
+            _this.sortText = function (aOrders, otherOrders, data, comparator) {
+                return (aOrders[data.attribute] == otherOrders[data.attribute])
+                    ? aOrders.number.toLowerCase() < otherOrders.number.toLowerCase() ? comparator[0] : comparator[1]
+                    : String(aOrders[data.attribute]).toLowerCase() < String(otherOrders[data.attribute]).toLowerCase() ? comparator[0] : comparator[1];
+            };
+            /**
+             * @description funcion utilizada para desempate.
+             * @param aOrders
+             * @param otherOrders
+             * @param comparator
+             * @returns
+             */
+            _this.tieBreaker = function (aOrders, otherOrders, comparator) { return aOrders.number.toLowerCase() < otherOrders.number.toLowerCase() ? comparator[0] : comparator[1]; };
+            /**
+             * @description cambia los valores de la variable currentSort
+             * @param name
+             * @param asc
+             */
+            _this.setCurrentSort = function (name, asc) {
+                _this.currentSort.name = name;
+                _this.currentSort.asc = asc;
+            };
             _this.mediaUrl = _this.consts.mediaUrl();
             _this.ecOnConstruct();
             return _this;
@@ -10795,8 +10919,8 @@
         OrdersEcComponent = __decorate$1g([
             core.Component({
                 selector: 'app-orders-ec',
-                template: "<div class=\"container-fluid\" id=\"ordersEcComponent\">\n    <section id=\"orders\" class=\"w-100\" *ngIf=\"!loading; else loadingView\">\n        <div *ngIf=\"orders && orders.length; else noOrders\">\n            <div class=\"row item border-bottom\" *ngFor=\"let order of orders\">\n                <div class=\"col-lg-2 col-12\">\n                    <p class=\"st dropdown-toggle\">{{ 'order' | translate }}:</p>\n                    <h5 class=\"fw-bold\">\n                        {{ order.number }}\n                    </h5>\n                    <ng-container *ngIf=\"order.items[0].product.variants[0]?.images?.length ; else defaultpicture\">\n                        <img class=\"smc maxwidth\" [src]=\"mediaUrl +   order.items[0].product.variants[0].images[0]\" alt=\"\">\n                    </ng-container>\n                    <ng-template #defaultpicture>\n                        <img *ngIf=\"order.items[0].product.picturesdefault\" class=\"smc maxwidth\"\n                            [src]=\"mediaUrl + order.items[0].product.picturesdefault[0]\" alt=\"\">\n                    </ng-template>\n                </div>\n                <div class=\"col-lg-2 col-12\">\n                    <p class=\"st dropdown-toggle\">{{ 'payment-state' | translate }}:</p>\n                    <p class=\"price\">\n                        {{ order.payments[0].state | translate | titlecase }}\n                    </p>\n                </div>\n                <div class=\"col-lg-2 col-12\">\n                    <p class=\"st dropdown-toggle\">{{ 'shipment-method' | translate }}:</p>\n                    <p class=\"price\">\n                        {{ order.shipments[0].method.name }}\n                    </p>\n                </div>\n                <div class=\"col-lg-2 col-12\">\n                    <p class=\"st dropdown-toggle\">{{ 'shipment-state' | translate }}:</p>\n                    <p class=\"price\">\n                        {{ order.shipments[0].state | translate | titlecase }}\n                    </p>\n                    <!-- ACA DEBERIA IR EL LINK DE SEGUIMIENTO -->\n                    <!-- <button class=\"btn btn-outline-dark btnLogout px-3 py-1 font-size-10 w-auto btn-sm\">Ver seguimiento</button> -->\n                </div>\n                <div class=\"col-lg-2 col-12\">\n                    <p class=\"st dropdown-toggle\">{{ 'date' | translate }}:</p>\n                    <p class=\"price\">\n                        {{ toDate(order.checkoutCompletedAt, 'DD/MM/YYYY') | translate }}<br>\n                        {{ toDate(order.checkoutCompletedAt, 'h:mm:ss a') | translate }}\n                    </p>\n                </div>\n                <div class=\"col-lg-2 col-12\">\n                    <p class=\"st dropdown-toggle\">{{ 'total' | translate }}:</p>\n                    <h5 class=\"fw-bold text-nowrap\">\n                        {{ (order.totals.total) | ecCurrencySymbol }}\n                    </h5>\n                    <button class=\"btn px-0 w-100 btdetalle\" (click)=\"goToOrder(order)\">{{\n                        'see-order' | translate }}</button>\n                </div>\n            </div>\n        </div>\n    </section>\n</div>\n\n<ng-template #noOrders>\n    <div class=\"w-100 h-50\">\n        <div class=\"d-flex flex-row justify-content-center align-items-center text-center\">\n            <h5>{{ 'no-orders' | translate }}</h5>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #errorView>\n    <div class=\"w-100 h-50\">\n        <div class=\"d-flex flex-row justify-content-center align-items-center text-center\">\n            <h4>{{ 'orders-error' | translate }}</h4>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #loadingView>\n    <div class=\"w-100 h-50 py-5\">\n        <div class=\"d-flex flex-row justify-content-center align-items-center text-center\">\n            <app-loading-full-ec></app-loading-full-ec>\n        </div>\n    </div>\n</ng-template>",
-                styles: ["#ordersEcComponent .btn.btdetalle{background-color:#000;color:#fff;border-color:#000;border-width:1px;border-radius:10px;padding:10px 0}#ordersEcComponent .btn.btdetalle:hover{background-color:#fff;color:#000;border-color:#000}"]
+                template: "<div class=\"container-fluid\" id=\"ordersEcComponent\">\n    <section id=\"orders\" class=\"w-100\" *ngIf=\"!loading; else loadingView\">\n        <div *ngIf=\"orders && orders.length; else noOrders\">\n            <div class=\"row mb-1 border-bottom\">\n                <div class=\"col-lg-2 col-12\">\n                    <p [class]=\"'st dropdown-toggle cursor-pointer my-2 '+ (currentSort.name == 'number' ? 'applied ' + (!currentSort.asc ? 'asc' : 'desc') : '')\"\n                        (click)=\"sortOrders('number')\">{{ 'order' | translate }}:</p>\n                </div>\n                <div class=\"col-lg-2 col-12\">\n                    <p [class]=\"'st dropdown-toggle cursor-pointer my-2 '+ (currentSort.name == 'paymentState' ? 'applied ' + (!currentSort.asc ? 'asc' : 'desc') : '')\"\n                        (click)=\"sortOrders('paymentState')\">{{ 'payment-state' | translate }}:</p>\n                </div>\n                <div class=\"col-lg-2 col-12\">\n                    <p [class]=\"'st dropdown-toggle cursor-pointer my-2 '+ (currentSort.name == 'method' ? 'applied ' + (!currentSort.asc ? 'asc' : 'desc') : '')\"\n                        (click)=\"sortOrders('method')\">{{ 'shipment-method' | translate }}:</p>\n                </div>\n                <div class=\"col-lg-2 col-12 \">\n                    <p\n                        [class]=\"'st dropdown-toggle cursor-pointer my-2 '+ (currentSort.name == 'methodState' ? 'applied ' + (!currentSort.asc ? 'asc' : 'desc') : '')\"\n                         (click)=\"sortOrders('methodState')\">\n                        {{ 'shipment-state' | translate }}:</p>\n                </div>\n                <div class=\"col-lg-2 col-12\">\n                    <p [class]=\"'st dropdown-toggle cursor-pointer my-2 '+ (currentSort.name == 'date' ? 'applied ' + (!currentSort.asc ? 'asc' : 'desc') : '')\"\n                        (click)=\"sortOrders('date')\">{{ 'date' | translate }}:</p>\n                </div>\n                <div class=\"col-lg-2 col-12\">\n                    <p [class]=\"'st dropdown-toggle cursor-pointer my-2 '+ (currentSort.name == 'total' ? 'applied ' + (!currentSort.asc ? 'asc' : 'desc') : '')\"\n                        (click)=\"sortOrders('total')\">{{ 'total' | translate }}:</p>\n                </div>\n            </div>\n            <div class=\"row item border-bottom\" *ngFor=\"let order of orders\">\n                <div class=\"col-lg-2 col-12\">\n                    <h5 class=\"fw-bold\">\n                        {{ order.number }}\n                    </h5>\n                    <ng-container *ngIf=\"order.items[0].product.variants[0]?.images?.length ; else defaultpicture\">\n                        <img class=\"smc maxwidth\" [src]=\"mediaUrl +   order.items[0].product.variants[0].images[0]\" alt=\"\">\n                    </ng-container>\n                    <ng-template #defaultpicture>\n                        <img *ngIf=\"order.items[0].product.picturesdefault\" class=\"smc maxwidth\"\n                            [src]=\"mediaUrl + order.items[0].product.picturesdefault[0]\" alt=\"\">\n                    </ng-template>\n                </div>\n                <div class=\"col-lg-2 col-12\">\n                    <p class=\"price\">\n                        {{ order.payments[0].state | translate | titlecase }}\n                    </p>\n                </div>\n                <div class=\"col-lg-2 col-12\">\n                   \n                    <p class=\"price\">\n                        {{ order.shipments[0].method.name }}\n                    </p>\n                </div>\n                <div class=\"col-lg-2 col-12\">\n                    <p class=\"price\">\n                        {{ order.shipments[0].state | translate | titlecase }}\n                    </p>\n                    <!-- ACA DEBERIA IR EL LINK DE SEGUIMIENTO -->\n                    <!-- <button class=\"btn btn-outline-dark btnLogout px-3 py-1 font-size-10 w-auto btn-sm\">Ver seguimiento</button> -->\n                    <a *ngIf=\"order.tracking\" [href]=\"order.tracking\" class=\"btn btn-outline-dark btnLogout px-3 py-1 font-size-10 w-auto btn-sm\">Ver seguimiento</a>\n                </div>\n                <div class=\"col-lg-2 col-12\">\n                    <p class=\"price\">\n                        {{ toDate(order.checkoutCompletedAt, 'DD/MM/YYYY') | translate }}<br>\n                        {{ toDate(order.checkoutCompletedAt, 'h:mm:ss a') | translate }}\n                    </p>\n                </div>\n                <div class=\"col-lg-2 col-12\">\n                    <h5 class=\"fw-bold text-nowrap\">\n                        {{ (order.totals.total) | ecCurrencySymbol }}\n                    </h5>\n                    <button class=\"btn px-0 w-100 btdetalle\" (click)=\"goToOrder(order)\">{{\n                        'see-order' | translate }}</button>\n                </div>\n            </div>\n        </div>\n    </section>\n</div>\n\n<ng-template #noOrders>\n    <div class=\"w-100 h-50\">\n        <div class=\"d-flex flex-row justify-content-center align-items-center text-center\">\n            <h5>{{ 'no-orders' | translate }}</h5>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #errorView>\n    <div class=\"w-100 h-50\">\n        <div class=\"d-flex flex-row justify-content-center align-items-center text-center\">\n            <h4>{{ 'orders-error' | translate }}</h4>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #loadingView>\n    <div class=\"w-100 h-50 py-5\">\n        <div class=\"d-flex flex-row justify-content-center align-items-center text-center\">\n            <app-loading-full-ec></app-loading-full-ec>\n        </div>\n    </div>\n</ng-template>",
+                styles: ["#ordersEcComponent .btn.btdetalle{background-color:#000;color:#fff;border-color:#000;border-width:1px;border-radius:10px;padding:10px 0}#ordersEcComponent .btn.btdetalle:hover{background-color:#fff;color:#000;border-color:#000}.asc.dropdown-toggle::after{transform:rotate(180deg)}.applied.dropdown-toggle::after{color:#198754}"]
             })
         ], OrdersEcComponent);
         return OrdersEcComponent;
@@ -14582,8 +14706,8 @@
         StepEcComponent = __decorate$1J([
             core.Component({
                 selector: 'app-step-ec',
-                template: "<ng-container [ngSwitch]=\"step_id\">\n\n    <ng-container *ngSwitchCase=\"1\">\n        <app-dataform-ec [step_id]=\"1\">\n        </app-dataform-ec>\n        <div class=\"checkout-btn-unique text-end\">\n            <button *ngIf=\"isStepReady('address')\" class=\"btn valid-btn\"\n                (click)=\"nextStep()\"> {{(lastStep ? 'finish-checkout' : 'ready-form')|translate}}</button>\n        </div>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"2\">\n        <ng-container *ngIf=\"isStepReady('address')\">\n            <app-shipment-ec [step_id]=\"2\">\n            </app-shipment-ec>\n            <div class=\"checkout-btn-container mt-2\">\n                <button class=\"btn valid-btn\" (click)=\"goBack()\">{{'back'|translate}}</button>\n                <ng-container *ngIf=\"(checkoutService.order$ | async) as order\">\n                    <button *ngIf=\"isStepReady('shipment')\" (click)=\"nextStep()\"\n                        class=\"btn valid-btn float-end\">{{ (lastStep ? 'finish-checkout' : 'ready-form') |translate}}\n                    </button>\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"3\">\n        <ng-container *ngIf=\"isStepReady(previousStep)\">\n            <app-payment-ec [step_id]=\"3\">\n            </app-payment-ec>\n            <div class=\"checkout-btn-container mt-2\">\n                <button class=\"btn valid-btn\"\n                    (click)=\"goBack()\">{{'back'|translate}}</button>\n            </div>\n        </ng-container>\n    </ng-container>\n\n</ng-container>\n",
-                styles: [""]
+                template: "<ng-container [ngSwitch]=\"step_id\">\n\n    <ng-container *ngSwitchCase=\"1\">\n        <app-dataform-ec [step_id]=\"1\">\n        </app-dataform-ec>\n        <div class=\"checkout-btn-unique text-end\">\n            <button *ngIf=\"isStepReady('address')\" class=\"btn valid-btn mt-2\"\n                (click)=\"nextStep()\"> {{(lastStep ? 'finish-checkout' : 'ready-form')|translate}}</button>\n        </div>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"2\">\n        <ng-container *ngIf=\"isStepReady('address')\">\n            <app-shipment-ec [step_id]=\"2\">\n            </app-shipment-ec>\n            <div class=\"checkout-btn-container mt-2\">\n                <button class=\"btn valid-btn\" (click)=\"goBack()\">{{'back'|translate}}</button>\n                <ng-container *ngIf=\"(checkoutService.order$ | async) as order\">\n                    <button *ngIf=\"isStepReady('shipment')\" (click)=\"nextStep()\"\n                        class=\"btn valid-btn float-end\">{{ (lastStep ? 'finish-checkout' : 'ready-form') |translate}}\n                    </button>\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"3\">\n        <ng-container *ngIf=\"isStepReady(previousStep)\">\n            <app-payment-ec [step_id]=\"3\">\n            </app-payment-ec>\n            <div class=\"checkout-btn-container mt-2\">\n                <button class=\"btn valid-btn\"\n                    (click)=\"goBack()\">{{'back'|translate}}</button>\n            </div>\n        </ng-container>\n    </ng-container>\n\n</ng-container>\n",
+                styles: [".btn:disabled{opacity:.65}.btn.valid-btn{background-color:#000;color:#fff;margin-right:12px}"]
             })
         ], StepEcComponent);
         return StepEcComponent;