@acorex/components 6.5.11 → 6.5.12

package/fesm2020/acorex-components.mjs

@@ -10323,6 +10323,7 @@ class AXSearchBarComponent {
         this.popoverWidth = '65vw';
         this.rtl = AXConfig.get('layout.rtl');
         this.loadOnInit = false;
+        this.block = false;
         this.onValueChange = new EventEmitter();
         this.onSearchValue = new EventEmitter();
         this._items = [];
@@ -10541,10 +10542,10 @@ class AXSearchBarComponent {
     }
 }
 AXSearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarComponent, deps: [{ token: i0.ChangeDetectorRef }, { 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: { sizeButton: "sizeButton", size: "size", disabled: "disabled", fitParent: "fitParent", popoverWidth: "popoverWidth", rtl: "rtl", loadOnInit: "loadOnInit", caption: "caption", 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: "<ax-button end icon=\"far fa-sliders-h icon\" [selected]=\"_searchCount? true:false\"\r\n    [type]=\" _searchCount ? 'primary':'primary outline'\" [disabled]=\"disabled\" [size]=\"sizeButton\" [tabIndex]=\"-1\"\r\n    (click)=\"handleButtonClick()\"> {{caption? caption:'common.search' | trans}}\r\n    <span *ngIf=\"_searchCount\" class=\"search-count\">{{_searchCount}}</span></ax-button>\r\n\r\n\r\n<ax-popover #searchPop [target]=\"ref\" [rtl]=\"rtl\"\r\n    [position]=\"{originX:'end',originY:'bottom',overlayX:'end',overlayY:'top',offsetY:10}\">\r\n    <div class=\"panel-box ax-dropdown-container-bordered {{size}}\">\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()\">{{'common.reset' | 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}.panel-box.sm{width:30vw}.panel-box.md{width:50vw}.panel-box.lg{width:70vw}.panel-box.full{width:80vw}@media all and (min-width: 1280px){.panel-box.sm{width:420px!important}.panel-box.md{width:680px!important}.panel-box.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md,.panel-box.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.panel-box.sm,.panel-box.md,.panel-box.lg{width:100vw;max-height:100vh}}.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", "rtl", "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.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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSearchBarComponent, selector: "ax-search-bar", inputs: { sizeButton: "sizeButton", size: "size", disabled: "disabled", fitParent: "fitParent", popoverWidth: "popoverWidth", rtl: "rtl", loadOnInit: "loadOnInit", caption: "caption", block: "block", 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: "<ax-button [block]=\"block\" end icon=\"far fa-sliders-h icon\" [selected]=\"_searchCount? true:false\"\r\n    [type]=\" _searchCount ? 'primary':'primary outline'\" [disabled]=\"disabled\" [size]=\"sizeButton\" [tabIndex]=\"-1\"\r\n    (click)=\"handleButtonClick()\"> {{caption? caption:'common.search' | trans}}\r\n    <span *ngIf=\"_searchCount\" class=\"search-count\">{{_searchCount}}</span></ax-button>\r\n\r\n\r\n<ax-popover #searchPop [target]=\"ref\" [rtl]=\"rtl\"\r\n    [position]=\"{originX:'end',originY:'bottom',overlayX:'end',overlayY:'top',offsetY:10}\">\r\n    <div class=\"panel-box ax-dropdown-container-bordered {{size}}\">\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()\">{{'common.reset' | 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}.panel-box.sm{width:30vw}.panel-box.md{width:50vw}.panel-box.lg{width:70vw}.panel-box.full{width:80vw}@media all and (min-width: 1280px){.panel-box.sm{width:420px!important}.panel-box.md{width:680px!important}.panel-box.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md,.panel-box.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.panel-box.sm,.panel-box.md,.panel-box.lg{width:100vw;max-height:100vh}}.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", "rtl", "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.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-button end icon=\"far fa-sliders-h icon\" [selected]=\"_searchCount? true:false\"\r\n    [type]=\" _searchCount ? 'primary':'primary outline'\" [disabled]=\"disabled\" [size]=\"sizeButton\" [tabIndex]=\"-1\"\r\n    (click)=\"handleButtonClick()\"> {{caption? caption:'common.search' | trans}}\r\n    <span *ngIf=\"_searchCount\" class=\"search-count\">{{_searchCount}}</span></ax-button>\r\n\r\n\r\n<ax-popover #searchPop [target]=\"ref\" [rtl]=\"rtl\"\r\n    [position]=\"{originX:'end',originY:'bottom',overlayX:'end',overlayY:'top',offsetY:10}\">\r\n    <div class=\"panel-box ax-dropdown-container-bordered {{size}}\">\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()\">{{'common.reset' | 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}.panel-box.sm{width:30vw}.panel-box.md{width:50vw}.panel-box.lg{width:70vw}.panel-box.full{width:80vw}@media all and (min-width: 1280px){.panel-box.sm{width:420px!important}.panel-box.md{width:680px!important}.panel-box.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md,.panel-box.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.panel-box.sm,.panel-box.md,.panel-box.lg{width:100vw;max-height:100vh}}.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"] }]
+            args: [{ selector: 'ax-search-bar', template: "<ax-button [block]=\"block\" end icon=\"far fa-sliders-h icon\" [selected]=\"_searchCount? true:false\"\r\n    [type]=\" _searchCount ? 'primary':'primary outline'\" [disabled]=\"disabled\" [size]=\"sizeButton\" [tabIndex]=\"-1\"\r\n    (click)=\"handleButtonClick()\"> {{caption? caption:'common.search' | trans}}\r\n    <span *ngIf=\"_searchCount\" class=\"search-count\">{{_searchCount}}</span></ax-button>\r\n\r\n\r\n<ax-popover #searchPop [target]=\"ref\" [rtl]=\"rtl\"\r\n    [position]=\"{originX:'end',originY:'bottom',overlayX:'end',overlayY:'top',offsetY:10}\">\r\n    <div class=\"panel-box ax-dropdown-container-bordered {{size}}\">\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()\">{{'common.reset' | 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}.panel-box.sm{width:30vw}.panel-box.md{width:50vw}.panel-box.lg{width:70vw}.panel-box.full{width:80vw}@media all and (min-width: 1280px){.panel-box.sm{width:420px!important}.panel-box.md{width:680px!important}.panel-box.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md,.panel-box.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.panel-box.sm,.panel-box.md,.panel-box.lg{width:100vw;max-height:100vh}}.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 }, { type: i0.ElementRef }]; }, propDecorators: { searchPopover: [{
                 type: ViewChild,
                 args: ['searchPop']
@@ -10570,6 +10571,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], caption: [{
                 type: Input
+            }], block: [{
+                type: Input
             }], items: [{
                 type: Input
             }], onValueChange: [{