@acorex/components 4.2.20 → 4.2.21

package/fesm2020/acorex-components.mjs

@@ -3076,7 +3076,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 
 class AXCheckBoxItemClick extends AXHtmlEvent {
 }
-class AXCheckBoxComponent extends AXBaseComponent {
+class AXCheckBoxComponent extends AXValidatableComponent {
     constructor(cdr, ref) {
         super();
         this.cdr = cdr;
@@ -3138,10 +3138,10 @@ class AXCheckBoxComponent extends AXBaseComponent {
     }
 }
 AXCheckBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCheckBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXCheckBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: { readonly: "readonly", disabled: "disabled", size: "size", label: "label", tabIndex: "tabIndex", indeterminate: "indeterminate", value: "value" }, outputs: { onValueChanged: "onValueChanged", valueChange: "valueChange", onClick: "onClick" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, 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\r\n<!-- [(ngModel)]=\"value\" -->\r\n<!-- (click)=\"handleClick($event)\"  -->\r\n\r\n<label class=\"ax-checkbox-container\" for=\"{{uid}}\" [ngClass]=\"{ 'disabled': disabled, 'readonly': readonly }\">\r\n\r\n  <input #input class=\"ax-checkbox\" type=\"checkbox\" id=\"{{uid}}\" [readonly]=\"readonly\" [class.checked]=\"value\"\r\n    [checked]=\"value\" [ngClass]=\"{'indeterminate': indeterminate && value == null}\" (click)=\"handleClick($event)\"\r\n    [disabled]=\"disabled || readonly\" />\r\n\r\n\r\n  <span>{{ label ? label : '&nbsp;' }}</span>\r\n</label>", directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXCheckBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: { readonly: "readonly", disabled: "disabled", size: "size", label: "label", tabIndex: "tabIndex", indeterminate: "indeterminate", value: "value" }, outputs: { onValueChanged: "onValueChanged", valueChange: "valueChange", onClick: "onClick" }, providers: [{ provide: AXValidatableComponent, useExisting: AXCheckBoxComponent }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, 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\r\n<!-- [(ngModel)]=\"value\" -->\r\n<!-- (click)=\"handleClick($event)\"  -->\r\n\r\n<label class=\"ax-checkbox-container\" for=\"{{uid}}\" [ngClass]=\"{ 'disabled': disabled, 'readonly': readonly }\">\r\n\r\n  <input #input class=\"ax-checkbox\" type=\"checkbox\" id=\"{{uid}}\" [readonly]=\"readonly\" [class.checked]=\"value\"\r\n    [checked]=\"value\" [ngClass]=\"{'indeterminate': indeterminate && value == null}\" (click)=\"handleClick($event)\"\r\n    [disabled]=\"disabled || readonly\" />\r\n\r\n\r\n  <span>{{ label ? label : '&nbsp;' }}</span>\r\n</label>", directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCheckBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-check-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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\r\n<!-- [(ngModel)]=\"value\" -->\r\n<!-- (click)=\"handleClick($event)\"  -->\r\n\r\n<label class=\"ax-checkbox-container\" for=\"{{uid}}\" [ngClass]=\"{ 'disabled': disabled, 'readonly': readonly }\">\r\n\r\n  <input #input class=\"ax-checkbox\" type=\"checkbox\" id=\"{{uid}}\" [readonly]=\"readonly\" [class.checked]=\"value\"\r\n    [checked]=\"value\" [ngClass]=\"{'indeterminate': indeterminate && value == null}\" (click)=\"handleClick($event)\"\r\n    [disabled]=\"disabled || readonly\" />\r\n\r\n\r\n  <span>{{ label ? label : '&nbsp;' }}</span>\r\n</label>" }]
+            args: [{ selector: 'ax-check-box', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXValidatableComponent, useExisting: AXCheckBoxComponent }], changeDetection: ChangeDetectionStrategy.OnPush, 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\r\n<!-- [(ngModel)]=\"value\" -->\r\n<!-- (click)=\"handleClick($event)\"  -->\r\n\r\n<label class=\"ax-checkbox-container\" for=\"{{uid}}\" [ngClass]=\"{ 'disabled': disabled, 'readonly': readonly }\">\r\n\r\n  <input #input class=\"ax-checkbox\" type=\"checkbox\" id=\"{{uid}}\" [readonly]=\"readonly\" [class.checked]=\"value\"\r\n    [checked]=\"value\" [ngClass]=\"{'indeterminate': indeterminate && value == null}\" (click)=\"handleClick($event)\"\r\n    [disabled]=\"disabled || readonly\" />\r\n\r\n\r\n  <span>{{ label ? label : '&nbsp;' }}</span>\r\n</label>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input', { static: true }]
@@ -10242,10 +10242,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }] } });
 
 class AXSearchBarComponent {
-    constructor() {
+    constructor(ref) {
+        this.ref = ref;
         this.size = 'md';
         this.disabled = false;
         this.items = [];
+        this.rtl = AXConfig.get('layout.rtl');
         this.onSearchValue = new EventEmitter();
         this._items = [];
         this._filterItems = [];
@@ -10287,6 +10289,7 @@ class AXSearchBarComponent {
         this._filterItems = [];
         this._filterItemsClone = [];
         this.handleButtonClick();
+        this.onSearchValue.emit(this._filterItems);
     }
     renderCol(e) {
         let className = [];
@@ -10314,15 +10317,34 @@ class AXSearchBarComponent {
         return className.toString().replace(/,/, ' ');
     }
     ngOnInit() {
+        this.items.forEach((el) => {
+            if (el.value != null) {
+                this._filterItems.push({
+                    name: el.property.name,
+                    title: el.property.title,
+                    value: el.value
+                });
+            }
+        });
+        if (this.rtl == null) {
+            this.rtl = window.getComputedStyle(this.ref.nativeElement, null).getPropertyValue('direction') === 'rtl';
+        }
+        setTimeout(() => {
+            this.ref.nativeElement.classList.add(this.rtl ? 'rtl' : 'ltr');
+            this.el.nativeElement.classList.add(this.rtl ? 'rtl' : 'ltr');
+        }, 5);
         this._items = _.chain(this.items).groupBy(x => x.property.row).map((value, key) => ({ row: key, items: value })).value();
     }
 }
-AXSearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXSearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSearchBarComponent, selector: "ax-search-bar", inputs: { size: "size", disabled: "disabled", items: "items" }, outputs: { onSearchValue: "onSearchValue" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "_editors", predicate: AXPropertyEditorRendererDirective, descendants: true }], ngImport: i0, template: "<ax-drop-down [fitParent]=\"true\" [size]=\"size\" [showDropDownButton]=\"false\" icon=\"far fa-sliders-h\" #dropdown\r\n    maxHeight=\"unset\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <div class=\"ax chips-container\">\r\n            <div class=\"chips\" *ngFor=\"let item of _filterItems\">\r\n                <span class=\"chips-text\">\r\n                    <b>{{item.title}} :</b> {{item.value}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\">\r\n                    <i class=\"far fa-times close\"></i>\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <div class=\"panel-box\">\r\n            <div *ngFor=\"let item of _items\" class=\"row\">\r\n                <div *ngFor=\"let prop of item.items\" class=\"{{renderCol(prop.property.col)}}\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{prop.property.title}}</ax-label>\r\n                        <ng-container ax-property-editor-renderer [property]=\"prop\" [context]=\"_context\"\r\n                            (onValueChange)=\"handleValueChange($event)\"></ng-container>\r\n                    </ax-form-group>\r\n                </div>\r\n            </div>\r\n            <div class=\"footer-button\">\r\n                <ax-button (click)=\"search()\">{{'common.search' | trans}}</ax-button>\r\n                <ax-button type=\"blank danger\" (click)=\"clear()\">{{'dataGrid.clearFilter' | trans}}</ax-button>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ax-button end icon=\"far fa-sliders-h icon\" type=\"light blank\" [disabled]=\"disabled\" [size]=\"size\"\r\n            [tabIndex]=\"-1\" (click)=\"handleButtonClick()\"></ax-button>\r\n    </ng-container>\r\n\r\n</ax-drop-down>\r\n", styles: [".ax.chips-container{height:100%}.panel-box{padding:1rem}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}\n"], components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: ["property", "validationForm", "context", "host", "groupId"], outputs: ["onValueChange"] }], pipes: { "trans": i1$2.AXTranslatorPipe } });
+AXSearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AXSearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSearchBarComponent, selector: "ax-search-bar", inputs: { size: "size", disabled: "disabled", items: "items", rtl: "rtl" }, outputs: { onSearchValue: "onSearchValue" }, viewQueries: [{ propertyName: "el", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "_editors", predicate: AXPropertyEditorRendererDirective, descendants: true }], ngImport: i0, template: "<ax-drop-down [fitParent]=\"true\" [size]=\"size\" [showDropDownButton]=\"false\" icon=\"far fa-sliders-h\" #dropdown\r\n    maxHeight=\"unset\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <div class=\"ax chips-container\">\r\n            <div class=\"chips\" *ngFor=\"let item of _filterItems\">\r\n                <span class=\"chips-text\">\r\n                    <b>{{item.title}} :</b> {{item.value}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\">\r\n                    <i class=\"far fa-times close\"></i>\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <div class=\"panel-box\">\r\n            <div *ngFor=\"let item of _items\" class=\"row\">\r\n                <div *ngFor=\"let prop of item.items\" class=\"{{renderCol(prop.property.col)}}\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{prop.property.title}}</ax-label>\r\n                        <ng-container ax-property-editor-renderer [property]=\"prop\" [context]=\"_context\"\r\n                            (onValueChange)=\"handleValueChange($event)\"></ng-container>\r\n                    </ax-form-group>\r\n                </div>\r\n            </div>\r\n            <div class=\"footer-button\">\r\n                <ax-button (click)=\"search()\">{{'common.search' | trans}}</ax-button>\r\n                <ax-button type=\"blank danger\" (click)=\"clear()\">{{'dataGrid.clearFilter' | trans}}</ax-button>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ax-button end icon=\"far fa-sliders-h icon\" type=\"light blank\" [disabled]=\"disabled\" [size]=\"size\"\r\n            [tabIndex]=\"-1\" (click)=\"handleButtonClick()\">{{'common.search' | trans}}</ax-button>\r\n    </ng-container>\r\n\r\n</ax-drop-down>\r\n", styles: [".ax.chips-container{height:100%}.panel-box{padding:1rem}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}\n"], components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: ["property", "validationForm", "context", "host", "groupId"], outputs: ["onValueChange"] }], pipes: { "trans": i1$2.AXTranslatorPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-search-bar', template: "<ax-drop-down [fitParent]=\"true\" [size]=\"size\" [showDropDownButton]=\"false\" icon=\"far fa-sliders-h\" #dropdown\r\n    maxHeight=\"unset\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <div class=\"ax chips-container\">\r\n            <div class=\"chips\" *ngFor=\"let item of _filterItems\">\r\n                <span class=\"chips-text\">\r\n                    <b>{{item.title}} :</b> {{item.value}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\">\r\n                    <i class=\"far fa-times close\"></i>\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <div class=\"panel-box\">\r\n            <div *ngFor=\"let item of _items\" class=\"row\">\r\n                <div *ngFor=\"let prop of item.items\" class=\"{{renderCol(prop.property.col)}}\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{prop.property.title}}</ax-label>\r\n                        <ng-container ax-property-editor-renderer [property]=\"prop\" [context]=\"_context\"\r\n                            (onValueChange)=\"handleValueChange($event)\"></ng-container>\r\n                    </ax-form-group>\r\n                </div>\r\n            </div>\r\n            <div class=\"footer-button\">\r\n                <ax-button (click)=\"search()\">{{'common.search' | trans}}</ax-button>\r\n                <ax-button type=\"blank danger\" (click)=\"clear()\">{{'dataGrid.clearFilter' | trans}}</ax-button>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ax-button end icon=\"far fa-sliders-h icon\" type=\"light blank\" [disabled]=\"disabled\" [size]=\"size\"\r\n            [tabIndex]=\"-1\" (click)=\"handleButtonClick()\"></ax-button>\r\n    </ng-container>\r\n\r\n</ax-drop-down>\r\n", styles: [".ax.chips-container{height:100%}.panel-box{padding:1rem}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { dropdown: [{
+            args: [{ selector: 'ax-search-bar', template: "<ax-drop-down [fitParent]=\"true\" [size]=\"size\" [showDropDownButton]=\"false\" icon=\"far fa-sliders-h\" #dropdown\r\n    maxHeight=\"unset\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <div class=\"ax chips-container\">\r\n            <div class=\"chips\" *ngFor=\"let item of _filterItems\">\r\n                <span class=\"chips-text\">\r\n                    <b>{{item.title}} :</b> {{item.value}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\">\r\n                    <i class=\"far fa-times close\"></i>\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <div class=\"panel-box\">\r\n            <div *ngFor=\"let item of _items\" class=\"row\">\r\n                <div *ngFor=\"let prop of item.items\" class=\"{{renderCol(prop.property.col)}}\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{prop.property.title}}</ax-label>\r\n                        <ng-container ax-property-editor-renderer [property]=\"prop\" [context]=\"_context\"\r\n                            (onValueChange)=\"handleValueChange($event)\"></ng-container>\r\n                    </ax-form-group>\r\n                </div>\r\n            </div>\r\n            <div class=\"footer-button\">\r\n                <ax-button (click)=\"search()\">{{'common.search' | trans}}</ax-button>\r\n                <ax-button type=\"blank danger\" (click)=\"clear()\">{{'dataGrid.clearFilter' | trans}}</ax-button>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ax-button end icon=\"far fa-sliders-h icon\" type=\"light blank\" [disabled]=\"disabled\" [size]=\"size\"\r\n            [tabIndex]=\"-1\" (click)=\"handleButtonClick()\">{{'common.search' | trans}}</ax-button>\r\n    </ng-container>\r\n\r\n</ax-drop-down>\r\n", styles: [".ax.chips-container{height:100%}.panel-box{padding:1rem}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { el: [{
+                type: ViewChild,
+                args: ['dropdown', { static: true }]
+            }], dropdown: [{
                 type: ViewChild,
                 args: ['dropdown', { static: true }]
             }], _editors: [{
@@ -10334,6 +10356,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], items: [{
                 type: Input
+            }], rtl: [{
+                type: Input
             }], onSearchValue: [{
                 type: Output
             }] } });
@@ -12974,6 +12998,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
+class AXCheckBoxPropertyEditorComponent extends AXProperyEditorComponent {
+    constructor(cdr) {
+        super(cdr);
+        this.cdr = cdr;
+        this.disabled = false;
+        this.indeterminate = false;
+        this.readonly = false;
+        this.size = 'md';
+    }
+    ngAfterViewInit() {
+        console.log('checkbox');
+        this.registerForValidationForm(this.textBox);
+        this.onRenderCompleted.emit();
+    }
+}
+AXCheckBoxPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCheckBoxPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXCheckBoxPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXCheckBoxPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "textBox", first: true, predicate: AXCheckBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `<ax-check-box 
+    [disabled]="disabled"
+    [label]="label" 
+    [size]="size"
+    [indeterminate]="indeterminate"
+    [readonly]="readonly"
+    [value]="value">
+        <ax-validation [rules]="validation?.rules">
+        </ax-validation>
+    </ax-check-box>`, isInline: true, components: [{ type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCheckBoxPropertyEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `<ax-check-box 
+    [disabled]="disabled"
+    [label]="label" 
+    [size]="size"
+    [indeterminate]="indeterminate"
+    [readonly]="readonly"
+    [value]="value">
+        <ax-validation [rules]="validation?.rules">
+        </ax-validation>
+    </ax-check-box>`,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { textBox: [{
+                type: ViewChild,
+                args: [AXCheckBoxComponent]
+            }] } });
+
+class AXCheckPropertyEditorModule {
+}
+AXCheckPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCheckPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXCheckPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCheckPropertyEditorModule, declarations: [AXCheckBoxPropertyEditorComponent], imports: [CommonModule, AXCheckBoxModule, FormsModule, AXValidationModule] });
+AXCheckPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCheckPropertyEditorModule, providers: [], imports: [[CommonModule, AXCheckBoxModule, FormsModule, AXValidationModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCheckPropertyEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AXCheckBoxPropertyEditorComponent],
+                    imports: [CommonModule, AXCheckBoxModule, FormsModule, AXValidationModule],
+                    exports: [],
+                    providers: [],
+                }]
+        }] });
+
 const WDIGET_MODULES = [
     AXNumberBoxPropertyEditorModule,
     AXTextPropertyEditorModule,
@@ -12986,7 +13070,8 @@ const WDIGET_MODULES = [
     AXDatePropertyEditorModule,
     AXTimePropertyEditorModule,
     AXTimePropertyEditorModule,
-    AXTextareaPropertyEditorModule
+    AXTextareaPropertyEditorModule,
+    AXCheckPropertyEditorModule
 ];
 class AXProppertyEditorModule {
 }
@@ -13002,10 +13087,15 @@ AXProppertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         AXDatePropertyEditorModule,
         AXTimePropertyEditorModule,
         AXTimePropertyEditorModule,
-        AXTextareaPropertyEditorModule, i1$4.RouterModule], exports: [AXPropertyEditorRendererDirective] });
+        AXTextareaPropertyEditorModule,
+        AXCheckPropertyEditorModule, i1$4.RouterModule], exports: [AXPropertyEditorRendererDirective] });
 AXProppertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXProppertyEditorModule, providers: [], imports: [[
             WDIGET_MODULES,
             RouterModule.forChild([
+                {
+                    component: AXCheckPropertyEditorModule,
+                    path: 'ax/editors/check'
+                },
                 {
                     component: AXTextPropertyEditorComponent,
                     path: 'ax/editors/text'
@@ -13057,6 +13147,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     imports: [
                         WDIGET_MODULES,
                         RouterModule.forChild([
+                            {
+                                component: AXCheckPropertyEditorModule,
+                                path: 'ax/editors/check'
+                            },
                             {
                                 component: AXTextPropertyEditorComponent,
                                 path: 'ax/editors/text'