@acorex/components 3.0.0 → 3.0.4

package/fesm2015/acorex-components.js

@@ -233,12 +233,15 @@ class AXValidatableComponent extends AXBaseComponent {
         this.__nativeElement = elementRef.nativeElement;
         this.__valueField = valueField;
         this.__validation = validation;
+        const value = this[this.__valueField];
+        if ((!Array.isArray(value) && value) || (Array.isArray(value) && value.length > 0))
+            this.validate();
     }
     get validation() {
         return this.__validation;
     }
     validate() {
-        if (this.__validation !== undefined) {
+        if (this.__validation !== undefined && (this.__validation.rules || []).length > 0) {
             const result = this.__validation.validate(this[this.__valueField]);
             result.then(c => {
                 if (c.result) {
@@ -256,40 +259,44 @@ class AXValidatableComponent extends AXBaseComponent {
     }
     clearValidationStyle(element, clear = false) {
         var _a, _b, _c, _d, _e, _f, _g;
-        const formGroup = element.closest('.form-group');
-        const formItem = ((_a = formGroup) === null || _a === void 0 ? void 0 : _a.querySelector('.form-item')) || element.closest('.form-item') || element.querySelector('.form-item');
-        ;
-        const label = (_b = formGroup) === null || _b === void 0 ? void 0 : _b.querySelector('.form-group-label');
-        const 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) {
+            const formGroup = element.closest('.form-group');
+            const formItem = ((_a = formGroup) === null || _a === void 0 ? void 0 : _a.querySelector('.form-item')) || element.closest('.form-item') || element.querySelector('.form-item');
+            ;
+            const label = (_b = formGroup) === null || _b === void 0 ? void 0 : _b.querySelector('.form-group-label');
+            const 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'));
+            }
         }
     }
     applyValidationStyle(element, v) {
         var _a, _b, _c, _d, _e, _f;
-        const formGroup = element.closest('.form-group');
-        const formItem = ((_a = formGroup) === null || _a === void 0 ? void 0 : _a.querySelector('.form-item')) || element.closest('.form-item') || element.querySelector('.form-item');
-        const label = (_b = formGroup) === null || _b === void 0 ? void 0 : _b.querySelector('.form-group-label');
-        const 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) {
-            const span = document.createElement('span');
-            span.innerText = v.message;
-            span.classList.add('ax', 'error-text');
-            parent.appendChild(span);
-        }
-        (_f = label) === null || _f === void 0 ? void 0 : _f.classList.add('error-text');
+        if (this.__validation !== undefined && (this.__validation.rules || []).length > 0) {
+            const formGroup = element.closest('.form-group');
+            const formItem = ((_a = formGroup) === null || _a === void 0 ? void 0 : _a.querySelector('.form-item')) || element.closest('.form-item') || element.querySelector('.form-item');
+            const label = (_b = formGroup) === null || _b === void 0 ? void 0 : _b.querySelector('.form-group-label');
+            const 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) {
+                const span = document.createElement('span');
+                span.innerText = v.message;
+                span.classList.add('ax', 'error-text');
+                parent.appendChild(span);
+            }
+            (_f = label) === null || _f === void 0 ? void 0 : _f.classList.add('error-text');
+        }
     }
 }
 __decorate([
@@ -359,7 +366,6 @@ class AXBaseTextComponent extends AXValidatableComponent {
                 isUserChange: this.userChange
             });
             this.userChange = false;
-            debugger;
             this.clearValidationStyle(this.input.nativeElement, v ? false : true);
             this.cdr.detectChanges();
         }
@@ -3242,7 +3248,7 @@ __decorate([
 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
     }),
@@ -8180,11 +8186,11 @@ let AXSelectBoxComponent = AXSelectBoxComponent_1 = class AXSelectBoxComponent e
             // this.clearValidationStyle(this.ref.nativeElement);
         }
         // this.text = '';
+        this.validate();
         this.cdr.markForCheck();
     }
     onFocusTextBox(e) { }
     onTextBoxClick(e) {
-        debugger;
         if (this.disabled == false && this.readonly == false) {
             this.dropdown.open();
         }
@@ -11801,7 +11807,7 @@ __decorate([
 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 }]