@energycap/components 0.28.6 → 0.28.7-ECAP-11994-Wizard-Updates.20220428-1313

package/bundles/energycap-components.umd.js

@@ -8591,6 +8591,7 @@
             this.nextLabel = 'Next_TC';
             this.backLabel = 'Back_TC';
             this.cancelLabel = 'Cancel';
+            this.saveLabel = 'Save';
             this.cancelId = 'cancelWizardDialog';
             this.saveId = 'saveWizardDialog';
             this.tabindex = 0;
@@ -8616,7 +8617,7 @@
     WizardButtonsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'ec-wizard-buttons',
-                    template: "<ec-button id=\"{{saveId}}\"\r\n           class=\"ml-2\"\r\n           *ngIf=\"!hideNextSaveButton\"\r\n           type=\"primary\"\r\n           [label]=\"(!showSave ? nextLabel : 'Save')\"\r\n           [tabindex]=\"!tabindex ? 0 : tabindex\"\r\n           (clicked)=\"!showSave ? onNextTab() : onSave($event)\"\r\n           [disabled]=\"status?.status === 'pending' || status?.status === 'error'\">\r\n</ec-button>\r\n<ec-button id=\"previousTab\"\r\n           class=\"ml-2\"\r\n           *ngIf=\"showBack\"\r\n           type=\"secondary\"\r\n           [label]=\"backLabel\"\r\n           [tabindex]=\"!tabindex ? 0 : tabindex+1\"\r\n           (clicked)=\"onPreviousTab()\">\r\n</ec-button>\r\n<ec-button id=\"{{cancelId}}\"\r\n           type=\"secondary\"\r\n           [label]=\"cancelLabel\"\r\n           [tabindex]=\"!tabindex ? 0 : tabindex+2\"\r\n           (clicked)=\"onCancel()\">\r\n</ec-button>\r\n",
+                    template: "<ec-button id=\"{{saveId}}\"\r\n           class=\"ml-2\"\r\n           *ngIf=\"!hideNextSaveButton\"\r\n           type=\"primary\"\r\n           [label]=\"(!showSave ? nextLabel : saveLabel)\"\r\n           [tabindex]=\"!tabindex ? 0 : tabindex\"\r\n           (clicked)=\"!showSave ? onNextTab() : onSave($event)\"\r\n           [disabled]=\"status?.status === 'pending' || status?.status === 'error'\">\r\n</ec-button>\r\n<ec-button id=\"previousTab\"\r\n           class=\"ml-2\"\r\n           *ngIf=\"showBack\"\r\n           type=\"secondary\"\r\n           [label]=\"backLabel\"\r\n           [tabindex]=\"!tabindex ? 0 : tabindex+1\"\r\n           (clicked)=\"onPreviousTab()\">\r\n</ec-button>\r\n<ec-button id=\"{{cancelId}}\"\r\n           type=\"secondary\"\r\n           [label]=\"cancelLabel\"\r\n           [tabindex]=\"!tabindex ? 0 : tabindex+2\"\r\n           (clicked)=\"onCancel()\">\r\n</ec-button>\r\n",
                     styles: [":host{display:flex;flex-direction:row-reverse}:host-context(ec-page-view .titlebar>.actions){flex-direction:row}"]
                 },] }
     ];
@@ -8625,6 +8626,7 @@
         nextLabel: [{ type: i0.Input }],
         backLabel: [{ type: i0.Input }],
         cancelLabel: [{ type: i0.Input }],
+        saveLabel: [{ type: i0.Input }],
         cancelId: [{ type: i0.Input }],
         saveId: [{ type: i0.Input }],
         tabindex: [{ type: i0.Input }],
@@ -8646,8 +8648,8 @@
     WizardProgressComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'ec-wizard-progress',
-                    template: "<div *ngFor=\"let tab of tabGroup?.items; index as index\"\r\n     class=\"progress-tab font-color-secondary mx-3\"\r\n     [class.is-active]=\"currentTab?.id === tab.id\">\r\n  <i class=\"ec-icon icon-circle-o mr-1\"\r\n     *ngIf=\"!tab.completed\"></i>\r\n  <i class=\"ec-icon icon-check-circle mr-1\"\r\n     *ngIf=\"tab.completed\"></i>\r\n  <span>{{index+1}}. {{tab.label | translate}}</span>\r\n</div>",
-                    styles: [".progress-tab,:host{align-items:center;display:flex}.progress-tab.is-active{font-weight:700}.progress-tab:not(.is-active)>i{opacity:.4}"]
+                    template: "<div *ngFor=\"let tab of tabGroup?.items; index as index; last as isLast\"\r\n     class=\"progress-tab ml-2\"\r\n     [class.is-active]=\"currentTab?.id === tab.id\">\r\n\r\n   <i *ngIf=\"tab.completed\"\r\n      class=\"ec-icon icon-check-circle mr-1 font-color-success\"></i>\r\n   <span *ngIf=\"!tab.completed\">{{index+1}}.&nbsp;</span>\r\n   <span>{{tab.label | translate}}</span>\r\n   <i *ngIf=\"!isLast\" class=\"ec-icon icon-angle-down rotate-270 ml-2\"></i>\r\n</div>",
+                    styles: [":host{padding:0 1rem}.progress-tab,:host{align-items:center;display:flex}.progress-tab.is-active{font-weight:700}"]
                 },] }
     ];
     WizardProgressComponent.ctorParameters = function () { return []; };
@@ -8656,6 +8658,151 @@
         currentTab: [{ type: i0.Input }]
     };
 
+    var FormControlLabelComponent = /** @class */ (function () {
+        function FormControlLabelComponent(validationMessageService, translateService) {
+            this.validationMessageService = validationMessageService;
+            this.translateService = translateService;
+            /**
+             * The form control label
+             */
+            this.label = '';
+            /**
+               * The position of the form control label (top|bottom|left)
+               */
+            this.labelPosition = "top";
+            /**An optional string to show if any of the underlying controls has an error. If falsy, one of the
+             * errors from the underlying controls will be used.
+             */
+            this.overrideValidationError = "";
+            /**An optional flag to hide the validation messages.
+             */
+            this.hideValidationMessage = false;
+            /**
+             * All current validation errors
+             *
+             * @type {string}
+             * @memberof FormControlBase
+             */
+            this.validationErrors = "";
+            this.allControlsTouched = false;
+            this.componentDestroyed = new rxjs.Subject();
+        }
+        FormControlLabelComponent.prototype.ngOnInit = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    // subscribe to statusChanges Observable to take any errors and translate them
+                    if (this.control) {
+                        this.control.statusChanges
+                            .pipe(operators.takeUntil(this.componentDestroyed))
+                            .subscribe(function () {
+                            _this.translateValidationMessages(_this.getErrors(_this.control));
+                        });
+                        // (re)set validation messages
+                        this.translateValidationMessages(this.getErrors(this.control));
+                    }
+                    if (this.id) {
+                        this.attrId = this.id;
+                    }
+                    return [2 /*return*/];
+                });
+            });
+        };
+        /**
+         * Angular onDestroy lifecyle hook.
+         * Unsubscribe from any observables
+         *
+         * @see https://angular.io/guide/lifecycle-hooks
+         * @memberof FormControlBase
+         */
+        FormControlLabelComponent.prototype.ngOnDestroy = function () {
+            this.componentDestroyed.next();
+            this.componentDestroyed.unsubscribe();
+        };
+        FormControlLabelComponent.prototype.getErrors = function (control) {
+            var _this = this;
+            control.markAsUntouched();
+            var errors = null;
+            var allTouched = true;
+            var controlFound = false;
+            forEachFormControl(control, function (control) {
+                errors = _this.assignErrors(control, errors);
+                if (control.untouched) {
+                    allTouched = false;
+                }
+                controlFound = true;
+            });
+            if (control.errors) {
+                errors = Object.assign(errors || {}, control.errors);
+            }
+            if (allTouched && controlFound) {
+                control.markAsTouched();
+            }
+            return errors;
+        };
+        FormControlLabelComponent.prototype.assignErrors = function (control, errors) {
+            if (control.errors) {
+                errors = Object.assign(errors || {}, control.errors);
+            }
+            return errors;
+        };
+        /**
+         * Function that subscribes to the controls valueChanges Observable
+         * to take any erros and translate them
+         *
+         * @param {*} [data]
+         * @returns
+         * @memberof FormControlBase
+         */
+        FormControlLabelComponent.prototype.translateValidationMessages = function (errors) {
+            return __awaiter(this, void 0, void 0, function () {
+                var messages;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!errors) return [3 /*break*/, 4];
+                            if (!this.overrideValidationError) return [3 /*break*/, 1];
+                            this.validationErrors = this.translateService.instant(this.overrideValidationError);
+                            return [3 /*break*/, 3];
+                        case 1: return [4 /*yield*/, this.validationMessageService.getErrorMessages(errors)];
+                        case 2:
+                            messages = _a.sent();
+                            if (messages) {
+                                this.validationErrors = messages.join('; ');
+                            }
+                            _a.label = 3;
+                        case 3: return [3 /*break*/, 5];
+                        case 4:
+                            this.validationErrors = '';
+                            _a.label = 5;
+                        case 5: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        return FormControlLabelComponent;
+    }());
+    FormControlLabelComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'ec-form-control-label',
+                    template: "<div class=\"control control-label-{{labelPosition}}\" [class.ec-untouched]=\"control?.untouched\">\r\n  <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n\r\n    <span id=\"{{id}}_label\">{{label | translate}}</span>\r\n\r\n    <span *ngIf=\"!hideValidationMessage && validationErrors && control?.touched && control?.invalid\">{{validationErrors | translate}}</span>\r\n  </label>\r\n</div>",
+                    styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{color:#1a1a23;display:block;font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:1rem;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{display:flex;flex-direction:column;width:100%}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-bottom:0;margin-top:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;background-clip:border-box;background-color:rgba(26,26,35,.12);background-image:none;border-color:transparent;color:#1a1a23;opacity:1;overflow:hidden;pointer-events:none;user-select:none;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:#fff8cc;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-position:.25em;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:#ffe433}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:#fff8cc}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:#ffe433}:host .textbox-group{display:flex;position:relative}:host input:focus,:host select:focus,:host textarea:focus{outline:none}label{color:rgba(26,26,35,.66);display:block;font-size:.75rem;line-height:1;margin:.375rem 0}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"%23ffe433\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-position:.25em;background-repeat:no-repeat;background-size:1em 1em;border-color:#d2d7d9;padding-left:1.5em}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:#0084a9;box-shadow:0 0 0 1px #0084a9;position:relative;z-index:1}.control-label-left{display:flex}"]
+                },] }
+    ];
+    FormControlLabelComponent.ctorParameters = function () { return [
+        { type: ValidationMessageService },
+        { type: i1.TranslateService }
+    ]; };
+    FormControlLabelComponent.propDecorators = {
+        id: [{ type: i0.Input }],
+        attrId: [{ type: i0.HostBinding, args: ['attr.id',] }],
+        label: [{ type: i0.Input }],
+        control: [{ type: i0.Input }],
+        labelPosition: [{ type: i0.Input }],
+        overrideValidationError: [{ type: i0.Input }],
+        hideValidationMessage: [{ type: i0.Input }]
+    };
+
     var ComponentsModule = /** @class */ (function () {
         function ComponentsModule() {
         }
@@ -8736,7 +8883,8 @@
                         TreeComponent,
                         RelativeDatePipe,
                         ResizableComponent,
-                        HighlightTextPipe
+                        HighlightTextPipe,
+                        FormControlLabelComponent
                     ],
                     imports: [
                         common.CommonModule,
@@ -8811,7 +8959,8 @@
                         TreeComponent,
                         RelativeDatePipe,
                         ResizableComponent,
-                        HighlightTextPipe
+                        HighlightTextPipe,
+                        FormControlLabelComponent
                     ]
                 },] }
     ];
@@ -9971,6 +10120,7 @@
     exports.FileUploadComponent = FileUploadComponent;
     exports.FormControlBase = FormControlBase;
     exports.FormControlComponent = FormControlComponent;
+    exports.FormControlLabelComponent = FormControlLabelComponent;
     exports.FormGroupComponent = FormGroupComponent;
     exports.FormGroupHelper = FormGroupHelper;
     exports.HierarchyBase = HierarchyBase;