@acorex/components 4.2.45 → 4.2.46
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 +67 -56
- package/fesm2015/acorex-components.mjs +71 -56
- package/fesm2015/acorex-components.mjs.map +1 -1
- package/fesm2020/acorex-components.mjs +66 -55
- package/fesm2020/acorex-components.mjs.map +1 -1
- package/lib/search-bar/search-bar.component.d.ts +4 -1
- package/package.json +1 -1
|
@@ -10255,16 +10255,18 @@ class AXSearchBarComponent {
|
|
|
10255
10255
|
this._items = [];
|
|
10256
10256
|
this._filterItems = [];
|
|
10257
10257
|
this._filterItemsClone = [];
|
|
10258
|
+
this._defultValueCount = [];
|
|
10258
10259
|
this._context = {};
|
|
10259
10260
|
}
|
|
10260
10261
|
set items(v) {
|
|
10262
|
+
this._defultValueCount = v.filter((x) => x.value);
|
|
10261
10263
|
v.forEach((el) => {
|
|
10262
10264
|
if (el.value != null) {
|
|
10263
10265
|
this._filterItems.push({
|
|
10264
10266
|
name: el.property.name,
|
|
10265
10267
|
title: el.property.title,
|
|
10266
|
-
textValue: this.
|
|
10267
|
-
value: el.value,
|
|
10268
|
+
textValue: this._handleTextValue(el),
|
|
10269
|
+
value: el.value ? this._handleDefultVlaue(el) : null,
|
|
10268
10270
|
component: el
|
|
10269
10271
|
});
|
|
10270
10272
|
}
|
|
@@ -10284,52 +10286,7 @@ class AXSearchBarComponent {
|
|
|
10284
10286
|
this.dropdown.toggle();
|
|
10285
10287
|
}
|
|
10286
10288
|
async handleValueChange(e) {
|
|
10287
|
-
|
|
10288
|
-
let text = [];
|
|
10289
|
-
if (e.property.editorOptions?.valueField && e.value != null) {
|
|
10290
|
-
if (e.property.editorOptions.returnAllData) {
|
|
10291
|
-
value = e.value;
|
|
10292
|
-
text = await this.handleTextValue(e);
|
|
10293
|
-
}
|
|
10294
|
-
else if (e.property.editorOptions?.mode == 'multiple') {
|
|
10295
|
-
e.value.forEach((element) => {
|
|
10296
|
-
value.push(element[e.property.editorOptions.valueField]);
|
|
10297
|
-
text.push(element[e.property.editorOptions.textField]);
|
|
10298
|
-
});
|
|
10299
|
-
}
|
|
10300
|
-
else {
|
|
10301
|
-
if (e.value.length) {
|
|
10302
|
-
value = e.value[0][e.property.editorOptions.valueField];
|
|
10303
|
-
text = e.value[0][e.property.editorOptions.textField];
|
|
10304
|
-
}
|
|
10305
|
-
}
|
|
10306
|
-
}
|
|
10307
|
-
else {
|
|
10308
|
-
value = e.value;
|
|
10309
|
-
text = e.value;
|
|
10310
|
-
}
|
|
10311
|
-
const findEl = this._filterItemsClone.find((el) => el.name == e.property.name);
|
|
10312
|
-
if (findEl) {
|
|
10313
|
-
findEl.value = value;
|
|
10314
|
-
findEl.textValue = text ? text.toString() : null;
|
|
10315
|
-
}
|
|
10316
|
-
else if (e.value != null) {
|
|
10317
|
-
this._filterItemsClone.push({
|
|
10318
|
-
name: e.property.name,
|
|
10319
|
-
title: e.property.title,
|
|
10320
|
-
value,
|
|
10321
|
-
textValue: text.toString(),
|
|
10322
|
-
component: e,
|
|
10323
|
-
filterOptions: {
|
|
10324
|
-
filters: e.property?.filterOptions?.filters ? e.property.filterOptions.filters : [],
|
|
10325
|
-
logic: e.property?.filterOptions?.logic ? e.property.filterOptions.logic : 'and',
|
|
10326
|
-
ignoreCase: e.property?.filterOptions?.ignoreCase ? e.property.filterOptions.ignoreCase : true,
|
|
10327
|
-
joinType: e.property?.filterOptions?.joinType ? e.property.filterOptions.joinType : 'INNER',
|
|
10328
|
-
operator: e.property?.filterOptions?.operator ? e.property.filterOptions.operator : null,
|
|
10329
|
-
truncateDate: e.property?.filterOptions?.truncateDate ? e.property.filterOptions.truncateDate : true
|
|
10330
|
-
}
|
|
10331
|
-
});
|
|
10332
|
-
}
|
|
10289
|
+
await this._handleInitVlaue(e);
|
|
10333
10290
|
this.onValueChange.emit(e);
|
|
10334
10291
|
}
|
|
10335
10292
|
handleItemRemoveClick(item) {
|
|
@@ -10345,7 +10302,6 @@ class AXSearchBarComponent {
|
|
|
10345
10302
|
if (c.result) {
|
|
10346
10303
|
this._filterItems = JSON.parse(JSON.stringify(this._filterItemsClone.filter((el) => el.value != null && el.value != '')));
|
|
10347
10304
|
this.handleButtonClick();
|
|
10348
|
-
console.log(this._filterItems);
|
|
10349
10305
|
this.onSearchValue.emit(this._filterItems);
|
|
10350
10306
|
}
|
|
10351
10307
|
});
|
|
@@ -10382,23 +10338,23 @@ class AXSearchBarComponent {
|
|
|
10382
10338
|
}
|
|
10383
10339
|
}
|
|
10384
10340
|
}
|
|
10385
|
-
return className.toString().replace(
|
|
10341
|
+
return className.toString().replace(/,/g, ' ');
|
|
10386
10342
|
}
|
|
10387
10343
|
_handleShowTitleSelected(item) {
|
|
10388
|
-
if (item.
|
|
10344
|
+
if (item.title) {
|
|
10389
10345
|
return item.title + ':';
|
|
10390
10346
|
}
|
|
10391
10347
|
}
|
|
10392
10348
|
_handleShowValueSelected(item) {
|
|
10393
10349
|
if (item.component.property.editorClass === 'ax/editors/check') {
|
|
10394
|
-
return item.
|
|
10350
|
+
return item.component.property.editorOptions.label;
|
|
10395
10351
|
}
|
|
10396
10352
|
else {
|
|
10397
10353
|
return item.textValue;
|
|
10398
10354
|
}
|
|
10399
10355
|
}
|
|
10400
10356
|
ngOnInit() { }
|
|
10401
|
-
|
|
10357
|
+
_handleTextValue(dataItem) {
|
|
10402
10358
|
if (dataItem.value.length) {
|
|
10403
10359
|
let text = '';
|
|
10404
10360
|
dataItem.value.forEach((element, index) => {
|
|
@@ -10413,12 +10369,67 @@ class AXSearchBarComponent {
|
|
|
10413
10369
|
return;
|
|
10414
10370
|
}
|
|
10415
10371
|
}
|
|
10372
|
+
async _handleDefultVlaue(dataItem) {
|
|
10373
|
+
this._handleInitVlaue(dataItem);
|
|
10374
|
+
this._filterItems = JSON.parse(JSON.stringify(this._filterItemsClone.filter((el) => el.value != null && el.value != '')));
|
|
10375
|
+
if (this._filterItems.length === this._defultValueCount.length) {
|
|
10376
|
+
this.onSearchValue.emit(this._filterItems);
|
|
10377
|
+
}
|
|
10378
|
+
}
|
|
10379
|
+
async _handleInitVlaue(e) {
|
|
10380
|
+
let value = [];
|
|
10381
|
+
let text = [];
|
|
10382
|
+
if (e.property.editorOptions?.valueField && e.value != null) {
|
|
10383
|
+
if (e.property.editorOptions.returnAllData) {
|
|
10384
|
+
value = e.value;
|
|
10385
|
+
text = await this._handleTextValue(e);
|
|
10386
|
+
}
|
|
10387
|
+
else if (e.property.editorOptions?.mode == 'multiple') {
|
|
10388
|
+
e.value.forEach((element) => {
|
|
10389
|
+
value.push(element[e.property.editorOptions.valueField]);
|
|
10390
|
+
text.push(element[e.property.editorOptions.textField]);
|
|
10391
|
+
});
|
|
10392
|
+
}
|
|
10393
|
+
else {
|
|
10394
|
+
if (e.value.length) {
|
|
10395
|
+
value = e.value[0][e.property.editorOptions.valueField];
|
|
10396
|
+
text = e.value[0][e.property.editorOptions.textField];
|
|
10397
|
+
}
|
|
10398
|
+
}
|
|
10399
|
+
}
|
|
10400
|
+
else {
|
|
10401
|
+
value = e.value;
|
|
10402
|
+
text = e.value;
|
|
10403
|
+
}
|
|
10404
|
+
const findEl = this._filterItemsClone.find((el) => el.name == e.property.name);
|
|
10405
|
+
if (findEl) {
|
|
10406
|
+
findEl.value = value;
|
|
10407
|
+
findEl.textValue = text ? text.toString() : null;
|
|
10408
|
+
}
|
|
10409
|
+
else if (e.value != null) {
|
|
10410
|
+
this._filterItemsClone.push({
|
|
10411
|
+
name: e.property.name,
|
|
10412
|
+
title: e.property.title,
|
|
10413
|
+
value,
|
|
10414
|
+
textValue: text.toString(),
|
|
10415
|
+
component: e,
|
|
10416
|
+
filterOptions: {
|
|
10417
|
+
filters: e.property?.filterOptions?.filters ? e.property.filterOptions.filters : [],
|
|
10418
|
+
logic: e.property?.filterOptions?.logic ? e.property.filterOptions.logic : 'and',
|
|
10419
|
+
ignoreCase: e.property?.filterOptions?.ignoreCase ? e.property.filterOptions.ignoreCase : true,
|
|
10420
|
+
joinType: e.property?.filterOptions?.joinType ? e.property.filterOptions.joinType : 'INNER',
|
|
10421
|
+
operator: e.property?.filterOptions?.operator ? e.property.filterOptions.operator : null,
|
|
10422
|
+
truncateDate: e.property?.filterOptions?.truncateDate ? e.property.filterOptions.truncateDate : true
|
|
10423
|
+
}
|
|
10424
|
+
});
|
|
10425
|
+
}
|
|
10426
|
+
}
|
|
10416
10427
|
}
|
|
10417
10428
|
AXSearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
10418
|
-
AXSearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSearchBarComponent, selector: "ax-search-bar", inputs: { size: "size", disabled: "disabled", items: "items", rtl: "rtl" }, outputs: { onValueChange: "onValueChange", onSearchValue: "onSearchValue" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }, { propertyName: "_editors", predicate: AXPropertyEditorRendererDirective, descendants: true }], ngImport: i0, template: "<ax-drop-down [fitParent]=\"true\" [size]=\"size\" [showDropDownButton]=\"false\" icon=\"far fa-sliders-h\" #dropdown\r\n maxHeight=\"unset\">\r\n <ng-container start>\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </ng-container>\r\n <ng-container header>\r\n <div class=\"ax chips-container\">\r\n <div class=\"chips\" *ngFor=\"let item of _filterItems\">\r\n <span class=\"chips-text\" style=\"direction:rtl;\">\r\n <b>{{_handleShowTitleSelected(item)}}</b> {{_handleShowValueSelected(item)}}\r\n </span>\r\n <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\">\r\n
|
|
10429
|
+
AXSearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSearchBarComponent, selector: "ax-search-bar", inputs: { size: "size", disabled: "disabled", items: "items", rtl: "rtl" }, outputs: { onValueChange: "onValueChange", onSearchValue: "onSearchValue" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }, { propertyName: "_editors", predicate: AXPropertyEditorRendererDirective, descendants: true }], ngImport: i0, template: "<ax-drop-down [fitParent]=\"true\" [size]=\"size\" [showDropDownButton]=\"false\" icon=\"far fa-sliders-h\" #dropdown\r\n maxHeight=\"unset\">\r\n <ng-container start>\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </ng-container>\r\n <ng-container header>\r\n <div class=\"ax chips-container\">\r\n <div class=\"chips\" *ngFor=\"let item of _filterItems\">\r\n <span class=\"chips-text\" style=\"direction:rtl;\">\r\n <b>{{_handleShowTitleSelected(item)}}</b> {{_handleShowValueSelected(item)}}\r\n </span>\r\n <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\">\r\n </span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container panel>\r\n <div class=\"panel-box\">\r\n <ax-validation-form #form>\r\n <div *ngFor=\"let item of _items\" class=\"row\">\r\n <div *ngFor=\"let prop of item.items\" class=\"{{renderCol(prop.property.col)}}\">\r\n <!-- <ax-form-group> -->\r\n <div *ngIf=\"prop.property.visible != false\">\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 <!-- </ax-form-group> -->\r\n </div>\r\n </div>\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 </ng-container>\r\n <ng-container end>\r\n <ax-button end icon=\"far fa-sliders-h icon\" type=\"light blank\" [disabled]=\"disabled\" [size]=\"size\"\r\n [tabIndex]=\"-1\" (click)=\"handleButtonClick()\">{{'common.search' | trans}}</ax-button>\r\n </ng-container>\r\n\r\n</ax-drop-down>", styles: [".ax.chips-container{height:100%}.panel-box{padding:1rem}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}\n"], components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: ["property", "validationForm", "context", "host", "groupId"], outputs: ["onValueChange"] }], pipes: { "trans": i1$2.AXTranslatorPipe } });
|
|
10419
10430
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarComponent, decorators: [{
|
|
10420
10431
|
type: Component,
|
|
10421
|
-
args: [{ selector: 'ax-search-bar', template: "<ax-drop-down [fitParent]=\"true\" [size]=\"size\" [showDropDownButton]=\"false\" icon=\"far fa-sliders-h\" #dropdown\r\n maxHeight=\"unset\">\r\n <ng-container start>\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </ng-container>\r\n <ng-container header>\r\n <div class=\"ax chips-container\">\r\n <div class=\"chips\" *ngFor=\"let item of _filterItems\">\r\n <span class=\"chips-text\" style=\"direction:rtl;\">\r\n <b>{{_handleShowTitleSelected(item)}}</b> {{_handleShowValueSelected(item)}}\r\n </span>\r\n <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\">\r\n
|
|
10432
|
+
args: [{ selector: 'ax-search-bar', template: "<ax-drop-down [fitParent]=\"true\" [size]=\"size\" [showDropDownButton]=\"false\" icon=\"far fa-sliders-h\" #dropdown\r\n maxHeight=\"unset\">\r\n <ng-container start>\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </ng-container>\r\n <ng-container header>\r\n <div class=\"ax chips-container\">\r\n <div class=\"chips\" *ngFor=\"let item of _filterItems\">\r\n <span class=\"chips-text\" style=\"direction:rtl;\">\r\n <b>{{_handleShowTitleSelected(item)}}</b> {{_handleShowValueSelected(item)}}\r\n </span>\r\n <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\">\r\n </span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container panel>\r\n <div class=\"panel-box\">\r\n <ax-validation-form #form>\r\n <div *ngFor=\"let item of _items\" class=\"row\">\r\n <div *ngFor=\"let prop of item.items\" class=\"{{renderCol(prop.property.col)}}\">\r\n <!-- <ax-form-group> -->\r\n <div *ngIf=\"prop.property.visible != false\">\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 <!-- </ax-form-group> -->\r\n </div>\r\n </div>\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 </ng-container>\r\n <ng-container end>\r\n <ax-button end icon=\"far fa-sliders-h icon\" type=\"light blank\" [disabled]=\"disabled\" [size]=\"size\"\r\n [tabIndex]=\"-1\" (click)=\"handleButtonClick()\">{{'common.search' | trans}}</ax-button>\r\n </ng-container>\r\n\r\n</ax-drop-down>", styles: [".ax.chips-container{height:100%}.panel-box{padding:1rem}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}\n"] }]
|
|
10422
10433
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { dropdown: [{
|
|
10423
10434
|
type: ViewChild,
|
|
10424
10435
|
args: ['dropdown', { static: true }]
|