@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.
@@ -587,7 +587,8 @@ class AXOverlayService {
587
587
  }
588
588
  let positionStrategy;
589
589
  if (configs.position && configs.targetElement) {
590
- positionStrategy = this.overlayService.position()
590
+ positionStrategy = this.overlayService
591
+ .position()
591
592
  .flexibleConnectedTo(configs.targetElement)
592
593
  .withPositions(Array.isArray(configs.position) ? configs.position : [configs.position])
593
594
  .withPush(true);
@@ -604,7 +605,7 @@ class AXOverlayService {
604
605
  scrollStrategy,
605
606
  hasBackdrop: configs.hasBackdrop,
606
607
  disposeOnNavigation: true,
607
- backdropClass: configs.backdropClass ? configs.backdropClass : (configs.transparentBackdrop ? 'cdk-overlay-transparent-backdrop' : undefined),
608
+ backdropClass: configs.backdropClass ? configs.backdropClass : configs.transparentBackdrop ? 'cdk-overlay-transparent-backdrop' : undefined,
608
609
  panelClass: configs.panelClass ? configs.panelClass : ['animate__animated', 'animate__fadeIn']
609
610
  };
610
611
  // joon nanat dorost sho
@@ -616,6 +617,8 @@ class AXOverlayService {
616
617
  host.changeDetectorRef.detectChanges();
617
618
  }, 0);
618
619
  }
620
+ if (configs.direction)
621
+ overlayRef.setDirection(configs.direction);
619
622
  if (configs.closeOnClickOutside) {
620
623
  merge(overlayRef.backdropClick(), overlayRef.detachments()).subscribe(() => {
621
624
  overlayRef.dispose();
@@ -1320,15 +1323,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
1320
1323
  }] } });
1321
1324
 
1322
1325
  class AXPopoverComponent {
1323
- constructor(overlayService, zone, cdr) {
1326
+ constructor(overlayService, zone, ref, cdr) {
1324
1327
  this.overlayService = overlayService;
1325
1328
  this.zone = zone;
1329
+ this.ref = ref;
1326
1330
  this.cdr = cdr;
1327
1331
  //
1328
1332
  this.openMode = 'manual';
1329
1333
  //
1330
1334
  this.closeMode = 'clickout';
1331
1335
  //
1336
+ this.rtl = AXConfig.get('layout.rtl');
1332
1337
  this._visible = false;
1333
1338
  }
1334
1339
  get visible() {
@@ -1369,6 +1374,7 @@ class AXPopoverComponent {
1369
1374
  targetElement: this.targetEl,
1370
1375
  hasBackdrop: this.closeMode === 'clickout',
1371
1376
  position: this.position,
1377
+ direction: this.rtl ? 'rtl' : 'ltr',
1372
1378
  onBackdropClick: () => {
1373
1379
  this._visible = false;
1374
1380
  }
@@ -1379,6 +1385,11 @@ class AXPopoverComponent {
1379
1385
  this.overlay.dispose();
1380
1386
  }
1381
1387
  }
1388
+ ngOnInit() {
1389
+ if (this.rtl == null) {
1390
+ this.rtl = window.getComputedStyle(this.ref.nativeElement, null).getPropertyValue('direction') === 'rtl';
1391
+ }
1392
+ }
1382
1393
  ngAfterViewInit() {
1383
1394
  setTimeout(() => {
1384
1395
  this.targetEl = typeof this.target === 'string' ? document.querySelector(this.target) : this.target;
@@ -1406,12 +1417,12 @@ class AXPopoverComponent {
1406
1417
  return this.visible;
1407
1418
  }
1408
1419
  }
1409
- 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 });
1410
- 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 });
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.ElementRef }, { 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", 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 });
1411
1422
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPopoverComponent, decorators: [{
1412
1423
  type: Component,
1413
1424
  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"] }]
1414
- }], ctorParameters: function () { return [{ type: AXOverlayService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { template: [{
1425
+ }], ctorParameters: function () { return [{ type: AXOverlayService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { template: [{
1415
1426
  type: ViewChild,
1416
1427
  args: ['tpl']
1417
1428
  }], target: [{
@@ -1426,6 +1437,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
1426
1437
  }], closeMode: [{
1427
1438
  type: Input,
1428
1439
  args: ['closeMode']
1440
+ }], rtl: [{
1441
+ type: Input
1429
1442
  }], visible: [{
1430
1443
  type: Input
1431
1444
  }] } });
@@ -2270,7 +2283,7 @@ AXToolbarSchedulerNavigatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVers
2270
2283
  <ax-popover target="#nav" placement="bottom-end" alignment="top-end" #pop>
2271
2284
  <ax-calendar-box (onValueChanged)="onDateChange($event)" [depth]="viewDepth" #cal></ax-calendar-box>
2272
2285
  </ax-popover>
2273
- </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 });
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", "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 });
2274
2287
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToolbarSchedulerNavigatorComponent, decorators: [{
2275
2288
  type: Component,
2276
2289
  args: [{
@@ -10300,12 +10313,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
10300
10313
  }] } });
10301
10314
 
10302
10315
  class AXSearchBarComponent {
10303
- constructor(cdr) {
10316
+ constructor(cdr, ref) {
10304
10317
  this.cdr = cdr;
10305
- this.size = 'md';
10318
+ this.ref = ref;
10319
+ this.sizeButton = 'md';
10320
+ this.size = 'sm';
10306
10321
  this.disabled = false;
10307
10322
  this.fitParent = false;
10308
- this.popoverWidth = '60%';
10323
+ this.popoverWidth = '65vw';
10309
10324
  this.rtl = AXConfig.get('layout.rtl');
10310
10325
  this.loadOnInit = false;
10311
10326
  this.onValueChange = new EventEmitter();
@@ -10339,6 +10354,11 @@ class AXSearchBarComponent {
10339
10354
  clearItem(name) {
10340
10355
  this._editors.find((x) => x.property.property.name === name).clear();
10341
10356
  }
10357
+ ngOnInit() {
10358
+ if (this.rtl == null) {
10359
+ this.rtl = window.getComputedStyle(this.ref.nativeElement, null).getPropertyValue('direction') === 'rtl';
10360
+ }
10361
+ }
10342
10362
  refresh() {
10343
10363
  this.loadOnInit = true;
10344
10364
  this._defultValueCount = [];
@@ -10501,12 +10521,12 @@ class AXSearchBarComponent {
10501
10521
  }
10502
10522
  }
10503
10523
  }
10504
- AXSearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
10505
- 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 } });
10524
+ 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: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 } });
10506
10526
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarComponent, decorators: [{
10507
10527
  type: Component,
10508
- 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"] }]
10509
- }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { searchPopover: [{
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: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"] }]
10529
+ }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { searchPopover: [{
10510
10530
  type: ViewChild,
10511
10531
  args: ['searchPop']
10512
10532
  }], _editors: [{
@@ -10515,6 +10535,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
10515
10535
  }], form: [{
10516
10536
  type: ViewChild,
10517
10537
  args: [AXValidationFormComponent]
10538
+ }], sizeButton: [{
10539
+ type: Input
10518
10540
  }], size: [{
10519
10541
  type: Input
10520
10542
  }], disabled: [{