@acorex/components 5.1.7 → 5.1.10

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.
@@ -610,7 +610,8 @@ class AXOverlayService {
610
610
  }
611
611
  let positionStrategy;
612
612
  if (configs.position && configs.targetElement) {
613
- positionStrategy = this.overlayService.position()
613
+ positionStrategy = this.overlayService
614
+ .position()
614
615
  .flexibleConnectedTo(configs.targetElement)
615
616
  .withPositions(Array.isArray(configs.position) ? configs.position : [configs.position])
616
617
  .withPush(true);
@@ -627,7 +628,7 @@ class AXOverlayService {
627
628
  scrollStrategy,
628
629
  hasBackdrop: configs.hasBackdrop,
629
630
  disposeOnNavigation: true,
630
- backdropClass: configs.backdropClass ? configs.backdropClass : (configs.transparentBackdrop ? 'cdk-overlay-transparent-backdrop' : undefined),
631
+ backdropClass: configs.backdropClass ? configs.backdropClass : configs.transparentBackdrop ? 'cdk-overlay-transparent-backdrop' : undefined,
631
632
  panelClass: configs.panelClass ? configs.panelClass : ['animate__animated', 'animate__fadeIn']
632
633
  };
633
634
  // joon nanat dorost sho
@@ -639,6 +640,8 @@ class AXOverlayService {
639
640
  host.changeDetectorRef.detectChanges();
640
641
  }, 0);
641
642
  }
643
+ if (configs.direction)
644
+ overlayRef.setDirection(configs.direction);
642
645
  if (configs.closeOnClickOutside) {
643
646
  merge(overlayRef.backdropClick(), overlayRef.detachments()).subscribe(() => {
644
647
  overlayRef.dispose();
@@ -1331,15 +1334,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
1331
1334
  }] } });
1332
1335
 
1333
1336
  class AXPopoverComponent {
1334
- constructor(overlayService, zone, cdr) {
1337
+ constructor(overlayService, zone, ref, cdr) {
1335
1338
  this.overlayService = overlayService;
1336
1339
  this.zone = zone;
1340
+ this.ref = ref;
1337
1341
  this.cdr = cdr;
1338
1342
  //
1339
1343
  this.openMode = 'manual';
1340
1344
  //
1341
1345
  this.closeMode = 'clickout';
1342
1346
  //
1347
+ this.rtl = AXConfig.get('layout.rtl');
1343
1348
  this._visible = false;
1344
1349
  }
1345
1350
  get visible() {
@@ -1380,6 +1385,7 @@ class AXPopoverComponent {
1380
1385
  targetElement: this.targetEl,
1381
1386
  hasBackdrop: this.closeMode === 'clickout',
1382
1387
  position: this.position,
1388
+ direction: this.rtl ? 'rtl' : 'ltr',
1383
1389
  onBackdropClick: () => {
1384
1390
  this._visible = false;
1385
1391
  }
@@ -1390,6 +1396,11 @@ class AXPopoverComponent {
1390
1396
  this.overlay.dispose();
1391
1397
  }
1392
1398
  }
1399
+ ngOnInit() {
1400
+ if (this.rtl == null) {
1401
+ this.rtl = window.getComputedStyle(this.ref.nativeElement, null).getPropertyValue('direction') === 'rtl';
1402
+ }
1403
+ }
1393
1404
  ngAfterViewInit() {
1394
1405
  setTimeout(() => {
1395
1406
  this.targetEl = typeof this.target === 'string' ? document.querySelector(this.target) : this.target;
@@ -1417,12 +1428,12 @@ class AXPopoverComponent {
1417
1428
  return this.visible;
1418
1429
  }
1419
1430
  }
1420
- AXPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPopoverComponent, deps: [{ token: AXOverlayService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1421
- AXPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXPopoverComponent, selector: "ax-popover", inputs: { target: "target", position: "position", openMode: "openMode", closeMode: "closeMode", visible: "visible" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["tpl"], descendants: true }], ngImport: i0, template: "<ng-template #tpl>\r\n <div class=\"ax-popover-container animate__animated animate__fadeIn\">\r\n <ng-content></ng-content>\r\n </div>\r\n</ng-template>", styles: [".ax-popover-container .ax-popover-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1431
+ AXPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPopoverComponent, deps: [{ token: AXOverlayService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1432
+ AXPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXPopoverComponent, selector: "ax-popover", inputs: { target: "target", position: "position", openMode: "openMode", closeMode: "closeMode", rtl: "rtl", visible: "visible" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["tpl"], descendants: true }], ngImport: i0, template: "<ng-template #tpl>\r\n <div class=\"ax-popover-container animate__animated animate__fadeIn\">\r\n <ng-content></ng-content>\r\n </div>\r\n</ng-template>", styles: [".ax-popover-container .ax-popover-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1422
1433
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPopoverComponent, decorators: [{
1423
1434
  type: Component,
1424
1435
  args: [{ selector: 'ax-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #tpl>\r\n <div class=\"ax-popover-container animate__animated animate__fadeIn\">\r\n <ng-content></ng-content>\r\n </div>\r\n</ng-template>", styles: [".ax-popover-container .ax-popover-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}\n"] }]
1425
- }], ctorParameters: function () { return [{ type: AXOverlayService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { template: [{
1436
+ }], ctorParameters: function () { return [{ type: AXOverlayService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { template: [{
1426
1437
  type: ViewChild,
1427
1438
  args: ['tpl']
1428
1439
  }], target: [{
@@ -1437,6 +1448,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
1437
1448
  }], closeMode: [{
1438
1449
  type: Input,
1439
1450
  args: ['closeMode']
1451
+ }], rtl: [{
1452
+ type: Input
1440
1453
  }], visible: [{
1441
1454
  type: Input
1442
1455
  }] } });
@@ -2283,7 +2296,7 @@ AXToolbarSchedulerNavigatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVers
2283
2296
  <ax-popover target="#nav" placement="bottom-end" alignment="top-end" #pop>
2284
2297
  <ax-calendar-box (onValueChanged)="onDateChange($event)" [depth]="viewDepth" #cal></ax-calendar-box>
2285
2298
  </ax-popover>
2286
- </div>`, isInline: true, components: [{ type: AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: ["menuTemplate", "selection", "items"], outputs: ["onItemClick"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openMode", "closeMode", "visible"] }, { type: AXCalendarBoxComponent, selector: "ax-calendar-box", inputs: ["size", "type", "locale", "dir", "min", "max", "selectableHoliday", "dayStyle", "dayMinMaxResoan", "showTodayButton", "view", "depth", "value"], outputs: ["onValueChanged", "onClick", "valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2299
+ </div>`, isInline: true, components: [{ type: AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: ["menuTemplate", "selection", "items"], outputs: ["onItemClick"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openMode", "closeMode", "rtl", "visible"] }, { type: AXCalendarBoxComponent, selector: "ax-calendar-box", inputs: ["size", "type", "locale", "dir", "min", "max", "selectableHoliday", "dayStyle", "dayMinMaxResoan", "showTodayButton", "view", "depth", "value"], outputs: ["onValueChanged", "onClick", "valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2287
2300
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToolbarSchedulerNavigatorComponent, decorators: [{
2288
2301
  type: Component,
2289
2302
  args: [{
@@ -10346,12 +10359,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
10346
10359
  }] } });
10347
10360
 
10348
10361
  class AXSearchBarComponent {
10349
- constructor(cdr) {
10362
+ constructor(cdr, ref) {
10350
10363
  this.cdr = cdr;
10351
- this.size = 'md';
10364
+ this.ref = ref;
10365
+ this.sizeButton = 'md';
10366
+ this.size = 'sm';
10352
10367
  this.disabled = false;
10353
10368
  this.fitParent = false;
10354
- this.popoverWidth = '60%';
10369
+ this.popoverWidth = '65vw';
10355
10370
  this.rtl = AXConfig.get('layout.rtl');
10356
10371
  this.loadOnInit = false;
10357
10372
  this.onValueChange = new EventEmitter();
@@ -10385,6 +10400,11 @@ class AXSearchBarComponent {
10385
10400
  clearItem(name) {
10386
10401
  this._editors.find((x) => x.property.property.name === name).clear();
10387
10402
  }
10403
+ ngOnInit() {
10404
+ if (this.rtl == null) {
10405
+ this.rtl = window.getComputedStyle(this.ref.nativeElement, null).getPropertyValue('direction') === 'rtl';
10406
+ }
10407
+ }
10388
10408
  refresh() {
10389
10409
  this.loadOnInit = true;
10390
10410
  this._defultValueCount = [];
@@ -10554,12 +10574,12 @@ class AXSearchBarComponent {
10554
10574
  });
10555
10575
  }
10556
10576
  }
10557
- AXSearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
10558
- 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 } });
10577
+ 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 });
10578
+ 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:90vw}@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 } });
10559
10579
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarComponent, decorators: [{
10560
10580
  type: Component,
10561
- 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"] }]
10562
- }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { searchPopover: [{
10581
+ 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:90vw}@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"] }]
10582
+ }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { searchPopover: [{
10563
10583
  type: ViewChild,
10564
10584
  args: ['searchPop']
10565
10585
  }], _editors: [{
@@ -10568,6 +10588,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
10568
10588
  }], form: [{
10569
10589
  type: ViewChild,
10570
10590
  args: [AXValidationFormComponent]
10591
+ }], sizeButton: [{
10592
+ type: Input
10571
10593
  }], size: [{
10572
10594
  type: Input
10573
10595
  }], disabled: [{