@acorex/components 3.0.0 → 3.0.4

package/fesm5/acorex-components.js

@@ -277,6 +277,9 @@ var AXValidatableComponent = /** @class */ (function (_super) {
         this.__nativeElement = elementRef.nativeElement;
         this.__valueField = valueField;
         this.__validation = validation;
+        var value = this[this.__valueField];
+        if ((!Array.isArray(value) && value) || (Array.isArray(value) && value.length > 0))
+            this.validate();
     };
     Object.defineProperty(AXValidatableComponent.prototype, "validation", {
         get: function () {
@@ -287,7 +290,7 @@ var AXValidatableComponent = /** @class */ (function (_super) {
     });
     AXValidatableComponent.prototype.validate = function () {
         var _this = this;
-        if (this.__validation !== undefined) {
+        if (this.__validation !== undefined && (this.__validation.rules || []).length > 0) {
             var result = this.__validation.validate(this[this.__valueField]);
             result.then(function (c) {
                 if (c.result) {
@@ -306,40 +309,44 @@ var AXValidatableComponent = /** @class */ (function (_super) {
     AXValidatableComponent.prototype.clearValidationStyle = function (element, clear) {
         if (clear === void 0) { clear = false; }
         var _a, _b, _c, _d, _e, _f, _g;
-        var formGroup = element.closest('.form-group');
-        var formItem = ((_a = formGroup) === null || _a === void 0 ? void 0 : _a.querySelector('.form-item')) || element.closest('.form-item') || element.querySelector('.form-item');
-        ;
-        var label = (_b = formGroup) === null || _b === void 0 ? void 0 : _b.querySelector('.form-group-label');
-        var parent = ((_c = formItem) === null || _c === void 0 ? void 0 : _c.parentElement) || element.parentElement;
-        (_d = formItem) === null || _d === void 0 ? void 0 : _d.classList.remove('success-state');
-        (_e = formItem) === null || _e === void 0 ? void 0 : _e.classList.remove('error-state');
-        //formItem?.classList.remove('required-state');
-        if (!clear) {
-            (_f = formItem) === null || _f === void 0 ? void 0 : _f.classList.add('success-state');
-        }
-        (_g = label) === null || _g === void 0 ? void 0 : _g.classList.remove('error-text');
-        if (parent.querySelector('span.error-text')) {
-            parent.removeChild(parent.querySelector('span.error-text'));
+        if (this.__validation !== undefined && (this.__validation.rules || []).length > 0) {
+            var formGroup = element.closest('.form-group');
+            var formItem = ((_a = formGroup) === null || _a === void 0 ? void 0 : _a.querySelector('.form-item')) || element.closest('.form-item') || element.querySelector('.form-item');
+            ;
+            var label = (_b = formGroup) === null || _b === void 0 ? void 0 : _b.querySelector('.form-group-label');
+            var parent_1 = ((_c = formItem) === null || _c === void 0 ? void 0 : _c.parentElement) || element.parentElement;
+            (_d = formItem) === null || _d === void 0 ? void 0 : _d.classList.remove('success-state');
+            (_e = formItem) === null || _e === void 0 ? void 0 : _e.classList.remove('error-state');
+            //formItem?.classList.remove('required-state');
+            if (!clear) {
+                (_f = formItem) === null || _f === void 0 ? void 0 : _f.classList.add('success-state');
+            }
+            (_g = label) === null || _g === void 0 ? void 0 : _g.classList.remove('error-text');
+            if (parent_1.querySelector('span.error-text')) {
+                parent_1.removeChild(parent_1.querySelector('span.error-text'));
+            }
         }
     };
     AXValidatableComponent.prototype.applyValidationStyle = function (element, v) {
         var _a, _b, _c, _d, _e, _f;
-        var formGroup = element.closest('.form-group');
-        var formItem = ((_a = formGroup) === null || _a === void 0 ? void 0 : _a.querySelector('.form-item')) || element.closest('.form-item') || element.querySelector('.form-item');
-        var label = (_b = formGroup) === null || _b === void 0 ? void 0 : _b.querySelector('.form-group-label');
-        var parent = ((_c = formItem) === null || _c === void 0 ? void 0 : _c.parentElement) || element.parentElement;
-        (_d = formItem) === null || _d === void 0 ? void 0 : _d.classList.add('error-state');
-        (_e = formItem) === null || _e === void 0 ? void 0 : _e.classList.remove('success-state');
-        if (parent.querySelector('span.error-text')) {
-            parent.removeChild(parent.querySelector('span.error-text'));
-        }
-        if (this.__validation.showMessage) {
-            var span = document.createElement('span');
-            span.innerText = v.message;
-            span.classList.add('ax', 'error-text');
-            parent.appendChild(span);
+        if (this.__validation !== undefined && (this.__validation.rules || []).length > 0) {
+            var formGroup = element.closest('.form-group');
+            var formItem = ((_a = formGroup) === null || _a === void 0 ? void 0 : _a.querySelector('.form-item')) || element.closest('.form-item') || element.querySelector('.form-item');
+            var label = (_b = formGroup) === null || _b === void 0 ? void 0 : _b.querySelector('.form-group-label');
+            var parent_2 = ((_c = formItem) === null || _c === void 0 ? void 0 : _c.parentElement) || element.parentElement;
+            (_d = formItem) === null || _d === void 0 ? void 0 : _d.classList.add('error-state');
+            (_e = formItem) === null || _e === void 0 ? void 0 : _e.classList.remove('success-state');
+            if (parent_2.querySelector('span.error-text')) {
+                parent_2.removeChild(parent_2.querySelector('span.error-text'));
+            }
+            if (this.__validation.showMessage) {
+                var span = document.createElement('span');
+                span.innerText = v.message;
+                span.classList.add('ax', 'error-text');
+                parent_2.appendChild(span);
+            }
+            (_f = label) === null || _f === void 0 ? void 0 : _f.classList.add('error-text');
         }
-        (_f = label) === null || _f === void 0 ? void 0 : _f.classList.add('error-text');
     };
     __decorate([
         Input(),
@@ -418,7 +425,6 @@ var AXBaseTextComponent = /** @class */ (function (_super) {
                     isUserChange: this.userChange
                 });
                 this.userChange = false;
-                debugger;
                 this.clearValidationStyle(this.input.nativeElement, v ? false : true);
                 this.cdr.detectChanges();
             }
@@ -3474,7 +3480,7 @@ var AXCheckBoxComponent = /** @class */ (function (_super) {
     AXCheckBoxComponent = __decorate([
         Component({
             selector: 'ax-check-box',
-            template: "<!-- <label class=\"ax checkbox {{size}}\" for=\"{{uid}}\" [ngClass]=\"{ 'disabled': disabled, 'readonly': readonly }\"\r\n  (click)=\"handleClick($event)\">\r\n  {{ label }}\r\n  <input #input type=\"checkbox\" id=\"{{uid}}\" [readonly]=\"readonly\" [checked]=\"value\"\r\n    [disabled]=\"disabled || readonly\" />\r\n  <span class=\"checkmark\" [ngClass]=\"{'indeterminate': indeterminate && value == null}\"></span>\r\n\r\n</label> -->\r\n\r\n<label for=\"{{uid}}\" class=\"ax-checkbox-container\" (click)=\"handleClick($event)\">\r\n  <input #input type=\"checkbox\" class=\"ax-checkbox\" id=\"{{uid}}\" [readonly]=\"readonly\" [checked]=\"value\"\r\n    [(ngModel)]=\"value\" [disabled]=\"disabled || readonly\" />\r\n  <span>{{ label ? label : '&nbsp;' }}</span>\r\n</label>",
+            template: "<!-- <label class=\"ax checkbox {{size}}\" for=\"{{uid}}\" [ngClass]=\"{ 'disabled': disabled, 'readonly': readonly }\"\r\n  (click)=\"handleClick($event)\">\r\n  {{ label }}\r\n  <input #input type=\"checkbox\" id=\"{{uid}}\" [readonly]=\"readonly\" [checked]=\"value\"\r\n    [disabled]=\"disabled || readonly\" />\r\n  <span class=\"checkmark\" [ngClass]=\"{'indeterminate': indeterminate && value == null}\"></span>\r\n\r\n</label> -->\r\n\r\n<label for=\"{{uid}}\" class=\"ax-checkbox-container\" (click)=\"handleClick($event)\">\r\n  <input #input type=\"checkbox\" class=\"ax-checkbox\" [ngClass]=\"{'indeterminate': indeterminate && value == null}\"\r\n    id=\"{{uid}}\" [readonly]=\"readonly\" [checked]=\"value\" [(ngModel)]=\"value\" [disabled]=\"disabled || readonly\" />\r\n  <span>{{ label ? label : '&nbsp;' }}</span>\r\n</label>",
             encapsulation: ViewEncapsulation.None,
             changeDetection: ChangeDetectionStrategy.OnPush
         }),
@@ -8710,11 +8716,11 @@ var AXSelectBoxComponent = /** @class */ (function (_super) {
             // this.clearValidationStyle(this.ref.nativeElement);
         }
         // this.text = '';
+        this.validate();
         this.cdr.markForCheck();
     };
     AXSelectBoxComponent.prototype.onFocusTextBox = function (e) { };
     AXSelectBoxComponent.prototype.onTextBoxClick = function (e) {
-        debugger;
         if (this.disabled == false && this.readonly == false) {
             this.dropdown.open();
         }
@@ -12493,7 +12499,7 @@ var AXTimePickerComponent = /** @class */ (function (_super) {
     AXTimePickerComponent = AXTimePickerComponent_1 = __decorate([
         Component({
             selector: 'ax-time-picker',
-            template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\r\n    <div class=\"ax items-wrapper\">\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </div>\r\n    <div class=\"content\" #content>\r\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\r\n            [class.icon]=\"icon\">\r\n            <input #input type=\"text\" class=\"ax {{size}}\" [textMask]=\"timeType\" [(ngModel)]=\"textValue\"\r\n                placeholder=\"{{placeholder}}\" [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\"\r\n                [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus()\" (blur)=\"handleInputBlur($event)\"\r\n                (keypress)='handleKeyPress($event)' (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\"\r\n                (click)=\"handleClick($event)\">\r\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </div>\r\n</div>\r\n<!-- [textMask]=\"{mask: mask , showMask:showMask , guid: maskGuid , keepCharPositions: maskKeepCharPositions}\" -->\r\n<!-- <input #input id=\"timePickerValue\" [textMask]=\"timeType\" type=\"text\" [(ngModel)]=\"value\" (keypress)='handleKeyPress($event)'\r\n    (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick($event)\"> -->",
+            template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\r\n    <div class=\"ax items-wrapper\">\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </div>\r\n    <div class=\"content\" #content>\r\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\r\n            <input #input type=\"text\" class=\"ax {{size}}\" [textMask]=\"timeType\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus()\"\r\n                (blur)=\"handleInputBlur($event)\" (keypress)='handleKeyPress($event)' (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick($event)\">\r\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\" [disabled]=\"disabled\" [tabIndex]=\"-1\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </div>\r\n</div>\r\n<!-- [textMask]=\"{mask: mask , showMask:showMask , guid: maskGuid , keepCharPositions: maskKeepCharPositions}\" -->\r\n<!-- <input #input id=\"timePickerValue\" [textMask]=\"timeType\" type=\"text\" [(ngModel)]=\"value\" (keypress)='handleKeyPress($event)'\r\n    (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick($event)\"> -->",
             changeDetection: ChangeDetectionStrategy.OnPush,
             host: { style: 'display: contents;' },
             providers: [{ provide: AXValidatableComponent, useExisting: AXTimePickerComponent_1 }]