@acorex/components 5.1.10 → 5.1.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/search-bar/search-bar.component.mjs +16 -4
- package/fesm2015/acorex-components.mjs +15 -3
- package/fesm2015/acorex-components.mjs.map +1 -1
- package/fesm2020/acorex-components.mjs +15 -3
- package/fesm2020/acorex-components.mjs.map +1 -1
- package/lib/search-bar/search-bar.component.d.ts +2 -0
- package/package.json +1 -1
|
@@ -10468,7 +10468,9 @@ class AXSearchBarComponent {
|
|
|
10468
10468
|
this._filterItems = JSON.parse(JSON.stringify(this._filterItemsClone.filter((el) => el.value != null && el.value != '')));
|
|
10469
10469
|
if (this._filterItems.length === this._defultValueCount.length && this.loadOnInit && !this._isEmitted) {
|
|
10470
10470
|
this._isEmitted = true;
|
|
10471
|
-
|
|
10471
|
+
setTimeout(() => {
|
|
10472
|
+
this.onSearchValue.emit(this._filterItems);
|
|
10473
|
+
});
|
|
10472
10474
|
}
|
|
10473
10475
|
}
|
|
10474
10476
|
async _handleInitVlaue(e) {
|
|
@@ -10520,12 +10522,22 @@ class AXSearchBarComponent {
|
|
|
10520
10522
|
});
|
|
10521
10523
|
}
|
|
10522
10524
|
}
|
|
10525
|
+
open() {
|
|
10526
|
+
setTimeout(() => {
|
|
10527
|
+
this.searchPopover.open();
|
|
10528
|
+
this.cdr.detectChanges();
|
|
10529
|
+
this.cdr.markForCheck();
|
|
10530
|
+
}, 100);
|
|
10531
|
+
}
|
|
10532
|
+
close() {
|
|
10533
|
+
this.searchPopover.close();
|
|
10534
|
+
}
|
|
10523
10535
|
}
|
|
10524
10536
|
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 });
|
|
10525
|
-
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", 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]=\"_filterItems.length ? true:false\"\r\n [type]=\" _filterItems.length ? 'primary':'primary outline'\" [disabled]=\"disabled\" [size]=\"sizeButton\"\r\n [tabIndex]=\"-1\" (click)=\"handleButtonClick()\"> {{'common.search' | trans}} <span *ngIf=\"_filterItems.length\"\r\n class=\"search-count\">{{_filterItems.length}}</span></ax-button>\r\n\r\n\r\n<ax-popover #searchPop [target]=\"ref\" [rtl]=\"rtl\"\r\n [position]=\"{originX:'start',originY:'bottom',overlayX:'start',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()\">{{'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}.panel-box.sm{width:30vw}.panel-box.md{width:50vw}.panel-box.lg{width:70vw}.panel-box.full{width:
|
|
10537
|
+
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", 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]=\"_filterItems.length ? true:false\"\r\n [type]=\" _filterItems.length ? 'primary':'primary outline'\" [disabled]=\"disabled\" [size]=\"sizeButton\"\r\n [tabIndex]=\"-1\" (click)=\"handleButtonClick()\"> {{'common.search' | trans}} <span *ngIf=\"_filterItems.length\"\r\n class=\"search-count\">{{_filterItems.length}}</span></ax-button>\r\n\r\n\r\n<ax-popover #searchPop [target]=\"ref\" [rtl]=\"rtl\"\r\n [position]=\"{originX:'start',originY:'bottom',overlayX:'start',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()\">{{'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}.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 } });
|
|
10526
10538
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarComponent, decorators: [{
|
|
10527
10539
|
type: Component,
|
|
10528
|
-
args: [{ selector: 'ax-search-bar', template: "<ax-button end icon=\"far fa-sliders-h icon\" [selected]=\"_filterItems.length ? true:false\"\r\n [type]=\" _filterItems.length ? 'primary':'primary outline'\" [disabled]=\"disabled\" [size]=\"sizeButton\"\r\n [tabIndex]=\"-1\" (click)=\"handleButtonClick()\"> {{'common.search' | trans}} <span *ngIf=\"_filterItems.length\"\r\n class=\"search-count\">{{_filterItems.length}}</span></ax-button>\r\n\r\n\r\n<ax-popover #searchPop [target]=\"ref\" [rtl]=\"rtl\"\r\n [position]=\"{originX:'start',originY:'bottom',overlayX:'start',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()\">{{'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}.panel-box.sm{width:30vw}.panel-box.md{width:50vw}.panel-box.lg{width:70vw}.panel-box.full{width:
|
|
10540
|
+
args: [{ selector: 'ax-search-bar', template: "<ax-button end icon=\"far fa-sliders-h icon\" [selected]=\"_filterItems.length ? true:false\"\r\n [type]=\" _filterItems.length ? 'primary':'primary outline'\" [disabled]=\"disabled\" [size]=\"sizeButton\"\r\n [tabIndex]=\"-1\" (click)=\"handleButtonClick()\"> {{'common.search' | trans}} <span *ngIf=\"_filterItems.length\"\r\n class=\"search-count\">{{_filterItems.length}}</span></ax-button>\r\n\r\n\r\n<ax-popover #searchPop [target]=\"ref\" [rtl]=\"rtl\"\r\n [position]=\"{originX:'start',originY:'bottom',overlayX:'start',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()\">{{'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}.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"] }]
|
|
10529
10541
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { searchPopover: [{
|
|
10530
10542
|
type: ViewChild,
|
|
10531
10543
|
args: ['searchPop']
|