@acorex/components 5.1.7 → 5.1.8
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/calendar/scheduler/toolbars/scheduler-toolbar-navigator.mjs +1 -1
- package/esm2020/lib/popover/overlay.service.mjs +6 -3
- package/esm2020/lib/popover/popover.component.mjs +17 -5
- package/esm2020/lib/search-bar/search-bar.component.mjs +14 -8
- package/fesm2015/acorex-components.mjs +32 -13
- package/fesm2015/acorex-components.mjs.map +1 -1
- package/fesm2020/acorex-components.mjs +32 -13
- package/fesm2020/acorex-components.mjs.map +1 -1
- package/lib/popover/overlay.service.d.ts +1 -0
- package/lib/popover/popover.component.d.ts +6 -2
- package/lib/search-bar/search-bar.component.d.ts +4 -2
- package/package.json +1 -1
|
@@ -587,7 +587,8 @@ class AXOverlayService {
|
|
|
587
587
|
}
|
|
588
588
|
let positionStrategy;
|
|
589
589
|
if (configs.position && configs.targetElement) {
|
|
590
|
-
positionStrategy = this.overlayService
|
|
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 :
|
|
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,13 @@ 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;
|
|
10318
|
+
this.ref = ref;
|
|
10305
10319
|
this.size = 'md';
|
|
10306
10320
|
this.disabled = false;
|
|
10307
10321
|
this.fitParent = false;
|
|
10308
|
-
this.popoverWidth = '
|
|
10322
|
+
this.popoverWidth = '65vw';
|
|
10309
10323
|
this.rtl = AXConfig.get('layout.rtl');
|
|
10310
10324
|
this.loadOnInit = false;
|
|
10311
10325
|
this.onValueChange = new EventEmitter();
|
|
@@ -10339,6 +10353,11 @@ class AXSearchBarComponent {
|
|
|
10339
10353
|
clearItem(name) {
|
|
10340
10354
|
this._editors.find((x) => x.property.property.name === name).clear();
|
|
10341
10355
|
}
|
|
10356
|
+
ngOnInit() {
|
|
10357
|
+
if (this.rtl == null) {
|
|
10358
|
+
this.rtl = window.getComputedStyle(this.ref.nativeElement, null).getPropertyValue('direction') === 'rtl';
|
|
10359
|
+
}
|
|
10360
|
+
}
|
|
10342
10361
|
refresh() {
|
|
10343
10362
|
this.loadOnInit = true;
|
|
10344
10363
|
this._defultValueCount = [];
|
|
@@ -10501,12 +10520,12 @@ class AXSearchBarComponent {
|
|
|
10501
10520
|
}
|
|
10502
10521
|
}
|
|
10503
10522
|
}
|
|
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: "<
|
|
10523
|
+
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 });
|
|
10524
|
+
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: "<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]=\"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\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\" [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", "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.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 } });
|
|
10506
10525
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarComponent, decorators: [{
|
|
10507
10526
|
type: Component,
|
|
10508
|
-
args: [{ selector: 'ax-search-bar', template: "<
|
|
10509
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { searchPopover: [{
|
|
10527
|
+
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]=\"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\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\" [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"] }]
|
|
10528
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { searchPopover: [{
|
|
10510
10529
|
type: ViewChild,
|
|
10511
10530
|
args: ['searchPop']
|
|
10512
10531
|
}], _editors: [{
|