@acorex/components 4.2.45 → 4.2.50

package/fesm2020/acorex-components.mjs

@@ -10255,16 +10255,19 @@ class AXSearchBarComponent {
         this._items = [];
         this._filterItems = [];
         this._filterItemsClone = [];
+        this._defultValueCount = [];
         this._context = {};
     }
     set items(v) {
+        this._defultValueCount = v.filter((x) => x.value);
         v.forEach((el) => {
             if (el.value != null) {
                 this._filterItems.push({
                     name: el.property.name,
                     title: el.property.title,
-                    textValue: this.handleTextValue(el),
-                    value: el.value,
+                    field: el.property.field,
+                    textValue: this._handleTextValue(el),
+                    value: el.value ? this._handleDefultVlaue(el) : null,
                     component: el
                 });
             }
@@ -10284,52 +10287,7 @@ class AXSearchBarComponent {
         this.dropdown.toggle();
     }
     async handleValueChange(e) {
-        let value = [];
-        let text = [];
-        if (e.property.editorOptions?.valueField && e.value != null) {
-            if (e.property.editorOptions.returnAllData) {
-                value = e.value;
-                text = await this.handleTextValue(e);
-            }
-            else if (e.property.editorOptions?.mode == 'multiple') {
-                e.value.forEach((element) => {
-                    value.push(element[e.property.editorOptions.valueField]);
-                    text.push(element[e.property.editorOptions.textField]);
-                });
-            }
-            else {
-                if (e.value.length) {
-                    value = e.value[0][e.property.editorOptions.valueField];
-                    text = e.value[0][e.property.editorOptions.textField];
-                }
-            }
-        }
-        else {
-            value = e.value;
-            text = e.value;
-        }
-        const findEl = this._filterItemsClone.find((el) => el.name == e.property.name);
-        if (findEl) {
-            findEl.value = value;
-            findEl.textValue = text ? text.toString() : null;
-        }
-        else if (e.value != null) {
-            this._filterItemsClone.push({
-                name: e.property.name,
-                title: e.property.title,
-                value,
-                textValue: text.toString(),
-                component: e,
-                filterOptions: {
-                    filters: e.property?.filterOptions?.filters ? e.property.filterOptions.filters : [],
-                    logic: e.property?.filterOptions?.logic ? e.property.filterOptions.logic : 'and',
-                    ignoreCase: e.property?.filterOptions?.ignoreCase ? e.property.filterOptions.ignoreCase : true,
-                    joinType: e.property?.filterOptions?.joinType ? e.property.filterOptions.joinType : 'INNER',
-                    operator: e.property?.filterOptions?.operator ? e.property.filterOptions.operator : null,
-                    truncateDate: e.property?.filterOptions?.truncateDate ? e.property.filterOptions.truncateDate : true
-                }
-            });
-        }
+        await this._handleInitVlaue(e);
         this.onValueChange.emit(e);
     }
     handleItemRemoveClick(item) {
@@ -10345,7 +10303,6 @@ class AXSearchBarComponent {
             if (c.result) {
                 this._filterItems = JSON.parse(JSON.stringify(this._filterItemsClone.filter((el) => el.value != null && el.value != '')));
                 this.handleButtonClick();
-                console.log(this._filterItems);
                 this.onSearchValue.emit(this._filterItems);
             }
         });
@@ -10382,43 +10339,109 @@ class AXSearchBarComponent {
                 }
             }
         }
-        return className.toString().replace(/,/, ' ');
+        return className.toString().replace(/,/g, ' ');
     }
     _handleShowTitleSelected(item) {
-        if (item.component.property.editorClass !== 'ax/editors/check') {
+        if (item.title) {
             return item.title + ':';
         }
     }
     _handleShowValueSelected(item) {
         if (item.component.property.editorClass === 'ax/editors/check') {
-            return item.title;
+            return item.component.property.editorOptions.label;
         }
         else {
             return item.textValue;
         }
     }
     ngOnInit() { }
-    handleTextValue(dataItem) {
-        if (dataItem.value.length) {
-            let text = '';
-            dataItem.value.forEach((element, index) => {
-                text +=
-                    index === dataItem.value.length - 1
-                        ? element[dataItem.property.editorOptions.textField]
-                        : element[dataItem.property.editorOptions.textField] + ',';
-            });
+    _handleTextValue(dataItem) {
+        let text = '';
+        if (Array.isArray(dataItem.value)) {
+            if (dataItem.value.length) {
+                dataItem.value.forEach((element, index) => {
+                    text +=
+                        index === dataItem.value.length - 1
+                            ? element[dataItem.property.editorOptions.textField]
+                            : element[dataItem.property.editorOptions.textField] + ',';
+                });
+            }
             return text;
         }
+        else if (dataItem.property.editorClass === 'ax/editors/date') {
+            if (dataItem.value) {
+                return new AXDateTime(dataItem.value, 'jalali').format('yyyy/MM/DD');
+            }
+            else {
+                return;
+            }
+        }
         else {
             return;
         }
     }
+    async _handleDefultVlaue(dataItem) {
+        this._handleInitVlaue(dataItem);
+        this._filterItems = JSON.parse(JSON.stringify(this._filterItemsClone.filter((el) => el.value != null && el.value != '')));
+        if (this._filterItems.length === this._defultValueCount.length) {
+            this.onSearchValue.emit(this._filterItems);
+        }
+    }
+    async _handleInitVlaue(e) {
+        let value = [];
+        let text = [];
+        if (e.property.editorOptions?.valueField && e.value != null) {
+            if (e.property.editorOptions.returnAllData) {
+                value = e.value;
+                text = await this._handleTextValue(e);
+            }
+            else if (e.property.editorOptions?.mode == 'multiple') {
+                e.value.forEach((element) => {
+                    value.push(element[e.property.editorOptions.valueField]);
+                    text.push(element[e.property.editorOptions.textField]);
+                });
+            }
+            else {
+                if (e.value.length) {
+                    value = e.value[0][e.property.editorOptions.valueField];
+                    text = e.value[0][e.property.editorOptions.textField];
+                }
+            }
+        }
+        else {
+            value = e.value;
+            text = e.value;
+        }
+        const findEl = this._filterItemsClone.find((el) => el.name == e.property.name);
+        if (findEl) {
+            findEl.value = value;
+            findEl.textValue = e.property.editorClass === 'ax/editors/date' ? new AXDateTime(text, 'jalali').format('yyyy/MM/DD') : text.toString();
+        }
+        else if (e.value != null) {
+            this._filterItemsClone.push({
+                name: e.property.name,
+                field: e.property.field,
+                title: e.property.title,
+                value,
+                textValue: e.property.editorClass === 'ax/editors/date' ? new AXDateTime(text, 'jalali').format('yyyy/MM/DD') : text.toString(),
+                component: e,
+                filterOptions: {
+                    filters: e.property?.filterOptions?.filters ? e.property.filterOptions.filters : [],
+                    logic: e.property?.filterOptions?.logic ? e.property.filterOptions.logic : 'and',
+                    ignoreCase: e.property?.filterOptions?.ignoreCase ? e.property.filterOptions.ignoreCase : true,
+                    joinType: e.property?.filterOptions?.joinType ? e.property.filterOptions.joinType : 'INNER',
+                    operator: e.property?.filterOptions?.operator ? e.property.filterOptions.operator : null,
+                    truncateDate: e.property?.filterOptions?.truncateDate ? e.property.filterOptions.truncateDate : true
+                }
+            });
+        }
+    }
 }
 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: { onValueChange: "onValueChange", onSearchValue: "onSearchValue" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: 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\" style=\"direction:rtl;\">\r\n                    <b>{{_handleShowTitleSelected(item)}}</b> {{_handleShowValueSelected(item)}}\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            <ax-validation-form #form>\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                        <div *ngIf=\"prop.property.visible != false\">\r\n                            <ax-label>{{prop.property.title}}</ax-label>\r\n                            <ng-container ax-property-editor-renderer [validationForm]=\"form\" [property]=\"prop\"\r\n                                [context]=\"_context\" (onValueChange)=\"handleValueChange($event)\"></ng-container>\r\n                        </div>\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            </ax-validation-form>\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>", 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: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { 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: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: ["property", "validationForm", "context", "host", "groupId"], outputs: ["onValueChange"] }], pipes: { "trans": i1$2.AXTranslatorPipe } });
+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: { onValueChange: "onValueChange", onSearchValue: "onSearchValue" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: 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\" style=\"direction:rtl;\">\r\n                    <b>{{_handleShowTitleSelected(item)}}</b> {{_handleShowValueSelected(item)}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\">\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            <ax-validation-form #form>\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                        <div *ngIf=\"prop.property.visible != false\">\r\n                            <ax-label>{{prop.property.title}}</ax-label>\r\n                            <ng-container ax-property-editor-renderer [validationForm]=\"form\" [property]=\"prop\"\r\n                                [context]=\"_context\" (onValueChange)=\"handleValueChange($event)\"></ng-container>\r\n                        </div>\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            </ax-validation-form>\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>", 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: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { 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: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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\" style=\"direction:rtl;\">\r\n                    <b>{{_handleShowTitleSelected(item)}}</b> {{_handleShowValueSelected(item)}}\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            <ax-validation-form #form>\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                        <div *ngIf=\"prop.property.visible != false\">\r\n                            <ax-label>{{prop.property.title}}</ax-label>\r\n                            <ng-container ax-property-editor-renderer [validationForm]=\"form\" [property]=\"prop\"\r\n                                [context]=\"_context\" (onValueChange)=\"handleValueChange($event)\"></ng-container>\r\n                        </div>\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            </ax-validation-form>\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>", 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"] }]
+            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\" style=\"direction:rtl;\">\r\n                    <b>{{_handleShowTitleSelected(item)}}</b> {{_handleShowValueSelected(item)}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\">\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            <ax-validation-form #form>\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                        <div *ngIf=\"prop.property.visible != false\">\r\n                            <ax-label>{{prop.property.title}}</ax-label>\r\n                            <ng-container ax-property-editor-renderer [validationForm]=\"form\" [property]=\"prop\"\r\n                                [context]=\"_context\" (onValueChange)=\"handleValueChange($event)\"></ng-container>\r\n                        </div>\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            </ax-validation-form>\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>", 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: { dropdown: [{
                 type: ViewChild,
                 args: ['dropdown', { static: true }]