@acorex/components 5.1.5 → 5.1.7

package/fesm2020/acorex-components.mjs

@@ -10300,13 +10300,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }] } });
 
 class AXSearchBarComponent {
-    constructor(ref, cdr) {
-        this.ref = ref;
+    constructor(cdr) {
         this.cdr = cdr;
         this.size = 'md';
         this.disabled = false;
         this.fitParent = false;
-        this.dropdownWidth = '600px';
+        this.popoverWidth = '60%';
         this.rtl = AXConfig.get('layout.rtl');
         this.loadOnInit = false;
         this.onValueChange = new EventEmitter();
@@ -10349,7 +10348,7 @@ class AXSearchBarComponent {
         this.cdr.detectChanges();
     }
     handleButtonClick() {
-        this.dropdown.toggle();
+        this.searchPopover.open();
     }
     async handleValueChange(e) {
         await this._handleInitVlaue(e);
@@ -10367,7 +10366,7 @@ class AXSearchBarComponent {
         this.form.validate().then((c) => {
             if (c.result) {
                 this._filterItems = JSON.parse(JSON.stringify(this._filterItemsClone.filter((el) => el.value != null && el.value != '')));
-                this.handleButtonClick();
+                this.searchPopover.close();
                 this.onSearchValue.emit(this._filterItems);
             }
         });
@@ -10378,7 +10377,7 @@ class AXSearchBarComponent {
         });
         this._filterItems = [];
         this._filterItemsClone = [];
-        this.handleButtonClick();
+        this.searchPopover.close();
         this.onSearchValue.emit(this._filterItems);
     }
     renderCol(e) {
@@ -10419,14 +10418,6 @@ class AXSearchBarComponent {
             return item.textValue;
         }
     }
-    ngOnInit() { }
-    ngAfterViewInit() {
-        setTimeout(() => {
-            if (!this.dropdown.dropdownWidth) {
-                this.dropdown.dropdownWidth = '600px';
-            }
-        });
-    }
     _handleTextValue(dataItem) {
         let text = '';
         if (Array.isArray(dataItem.value)) {
@@ -10510,14 +10501,14 @@ class AXSearchBarComponent {
         }
     }
 }
-AXSearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], 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", fitParent: "fitParent", dropdownWidth: "dropdownWidth", rtl: "rtl", loadOnInit: "loadOnInit", items: "items" }, 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: "<div>\r\n    <ax-drop-down [fitParent]=\"fitParent\" [dropdownWidth]=\"dropdownWidth\" [size]=\"size\" [showDropDownButton]=\"false\"\r\n        icon=\"far fa-sliders-h\" #dropdown 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                    <ng-container *ngFor=\"let item of _items\">\r\n                        <div class=\"row\">\r\n                            <ng-container *ngFor=\"let prop of item.items\">\r\n                                <div *ngIf=\"prop.property.visible != false\" class=\"{{renderCol(prop.property.col)}}\">\r\n                                    <div>\r\n                                        <ax-label>{{prop.property.title}}</ax-label>\r\n                                        <ng-container ax-property-editor-renderer [validationForm]=\"form\"\r\n                                            [property]=\"prop\" [context]=\"_context\"\r\n                                            (onValueChange)=\"handleValueChange($event)\"></ng-container>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </ng-container>\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>\r\n</div>", 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", "dropdownWidth"], 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarComponent, deps: [{ token: i0.ChangeDetectorRef }], 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", fitParent: "fitParent", popoverWidth: "popoverWidth", rtl: "rtl", loadOnInit: "loadOnInit", items: "items" }, outputs: { onValueChange: "onValueChange", onSearchValue: "onSearchValue" }, viewQueries: [{ propertyName: "searchPopover", first: true, predicate: ["searchPop"], descendants: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }, { propertyName: "_editors", predicate: AXPropertyEditorRendererDirective, descendants: true }], ngImport: i0, template: "<div class=\"d-flex align-items-center\">\r\n    <ax-button #searchBtnTarget end icon=\"far fa-sliders-h icon\" [selected]=\"_filterItems.length ? true:false\"\r\n        [type]=\" _filterItems.length ? 'primary':'primary outline'\" [disabled]=\"disabled\" [size]=\"size\" [tabIndex]=\"-1\"\r\n        (click)=\"handleButtonClick()\"> {{'common.search' | trans}} <span *ngIf=\"_filterItems.length\"\r\n            class=\"search-count\">{{_filterItems.length}}</span></ax-button>\r\n</div>\r\n\r\n<ax-popover #searchPop [target]=\"searchBtnTarget\"\r\n    [position]=\"{originX:'center',originY:'bottom',overlayX:'center',overlayY:'top',offsetY:50,offsetX:10}\">\r\n    <div class=\"panel-box ax-dropdown-container-bordered\" [ngStyle]=\"{'width' : popoverWidth }\">\r\n        <ax-validation-form #form>\r\n            <ng-container *ngFor=\"let item of _items\">\r\n                <div class=\"row\">\r\n                    <ng-container *ngFor=\"let prop of item.items\">\r\n                        <div *ngIf=\"prop.property.visible != false\" class=\"{{renderCol(prop.property.col)}}\">\r\n                            <div>\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                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\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</ax-popover>", styles: [".panel-box{padding:1rem}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}.search-count{background:rgba(255,255,255,.2);border-radius:50%;color:var(--ax-white-color);padding:.125rem;width:1.75rem;height:1.75rem;font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;-webkit-margin-start:.5rem;margin-inline-start:.5rem}\n"], components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openMode", "closeMode", "visible"] }, { type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "<div>\r\n    <ax-drop-down [fitParent]=\"fitParent\" [dropdownWidth]=\"dropdownWidth\" [size]=\"size\" [showDropDownButton]=\"false\"\r\n        icon=\"far fa-sliders-h\" #dropdown 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                    <ng-container *ngFor=\"let item of _items\">\r\n                        <div class=\"row\">\r\n                            <ng-container *ngFor=\"let prop of item.items\">\r\n                                <div *ngIf=\"prop.property.visible != false\" class=\"{{renderCol(prop.property.col)}}\">\r\n                                    <div>\r\n                                        <ax-label>{{prop.property.title}}</ax-label>\r\n                                        <ng-container ax-property-editor-renderer [validationForm]=\"form\"\r\n                                            [property]=\"prop\" [context]=\"_context\"\r\n                                            (onValueChange)=\"handleValueChange($event)\"></ng-container>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </ng-container>\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>\r\n</div>", 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 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { dropdown: [{
+            args: [{ selector: 'ax-search-bar', template: "<div class=\"d-flex align-items-center\">\r\n    <ax-button #searchBtnTarget end icon=\"far fa-sliders-h icon\" [selected]=\"_filterItems.length ? true:false\"\r\n        [type]=\" _filterItems.length ? 'primary':'primary outline'\" [disabled]=\"disabled\" [size]=\"size\" [tabIndex]=\"-1\"\r\n        (click)=\"handleButtonClick()\"> {{'common.search' | trans}} <span *ngIf=\"_filterItems.length\"\r\n            class=\"search-count\">{{_filterItems.length}}</span></ax-button>\r\n</div>\r\n\r\n<ax-popover #searchPop [target]=\"searchBtnTarget\"\r\n    [position]=\"{originX:'center',originY:'bottom',overlayX:'center',overlayY:'top',offsetY:50,offsetX:10}\">\r\n    <div class=\"panel-box ax-dropdown-container-bordered\" [ngStyle]=\"{'width' : popoverWidth }\">\r\n        <ax-validation-form #form>\r\n            <ng-container *ngFor=\"let item of _items\">\r\n                <div class=\"row\">\r\n                    <ng-container *ngFor=\"let prop of item.items\">\r\n                        <div *ngIf=\"prop.property.visible != false\" class=\"{{renderCol(prop.property.col)}}\">\r\n                            <div>\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                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\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</ax-popover>", styles: [".panel-box{padding:1rem}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}.search-count{background:rgba(255,255,255,.2);border-radius:50%;color:var(--ax-white-color);padding:.125rem;width:1.75rem;height:1.75rem;font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;-webkit-margin-start:.5rem;margin-inline-start:.5rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { searchPopover: [{
                 type: ViewChild,
-                args: ['dropdown', { static: true }]
+                args: ['searchPop']
             }], _editors: [{
                 type: ViewChildren,
                 args: [AXPropertyEditorRendererDirective]
@@ -10530,7 +10521,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], fitParent: [{
                 type: Input
-            }], dropdownWidth: [{
+            }], popoverWidth: [{
                 type: Input
             }], rtl: [{
                 type: Input
@@ -13564,15 +13555,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class AXSearchBarModule {
 }
 AXSearchBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXSearchBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarModule, declarations: [AXSearchBarComponent], imports: [CommonModule, FormsModule, AXDropdownModule, AXButtonModule, AXTextBoxModule, AXProppertyEditorModule, AXFormGroupModule, AXLabelModule, AXTranslatorModule, AXValidationModule], exports: [AXSearchBarComponent] });
-AXSearchBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarModule, providers: [], imports: [[CommonModule, FormsModule, AXDropdownModule, AXButtonModule, AXTextBoxModule, AXProppertyEditorModule, AXFormGroupModule, AXLabelModule, AXTranslatorModule, AXValidationModule]] });
+AXSearchBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarModule, declarations: [AXSearchBarComponent], imports: [CommonModule,
+        FormsModule,
+        AXDropdownModule,
+        AXButtonModule,
+        AXTextBoxModule,
+        AXProppertyEditorModule,
+        AXFormGroupModule,
+        AXLabelModule,
+        AXTranslatorModule,
+        AXValidationModule,
+        AXPopoverModule], exports: [AXSearchBarComponent] });
+AXSearchBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarModule, providers: [], imports: [[
+            CommonModule,
+            FormsModule,
+            AXDropdownModule,
+            AXButtonModule,
+            AXTextBoxModule,
+            AXProppertyEditorModule,
+            AXFormGroupModule,
+            AXLabelModule,
+            AXTranslatorModule,
+            AXValidationModule,
+            AXPopoverModule
+        ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXSearchBarComponent],
-                    imports: [CommonModule, FormsModule, AXDropdownModule, AXButtonModule, AXTextBoxModule, AXProppertyEditorModule, AXFormGroupModule, AXLabelModule, AXTranslatorModule, AXValidationModule],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        AXDropdownModule,
+                        AXButtonModule,
+                        AXTextBoxModule,
+                        AXProppertyEditorModule,
+                        AXFormGroupModule,
+                        AXLabelModule,
+                        AXTranslatorModule,
+                        AXValidationModule,
+                        AXPopoverModule
+                    ],
                     exports: [AXSearchBarComponent],
-                    providers: [],
+                    providers: []
                 }]
         }] });