@acorex/components 4.2.31 → 4.2.34
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/date-picker/date-picker.component.mjs +2 -2
- package/esm2020/lib/form-group/form-group.component.mjs +2 -1
- package/esm2020/lib/property-editor/editors/selectbox-editor/selectbox.editor.mjs +12 -5
- package/esm2020/lib/property-editor/editors/selection-editor/selection-editor.mjs +3 -3
- package/esm2020/lib/property-editor/property-editor.class.mjs +2 -1
- package/esm2020/lib/search-bar/search-bar.component.mjs +35 -6
- package/fesm2015/acorex-components.mjs +57 -19
- package/fesm2015/acorex-components.mjs.map +1 -1
- package/fesm2020/acorex-components.mjs +50 -12
- package/fesm2020/acorex-components.mjs.map +1 -1
- package/lib/property-editor/editors/selectbox-editor/selectbox.editor.d.ts +1 -1
- package/lib/search-bar/search-bar.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -3843,7 +3843,7 @@ class AXDatePickerComponent extends AXValidatableComponent {
|
|
|
3843
3843
|
this.selectToday();
|
|
3844
3844
|
}
|
|
3845
3845
|
if (this.dropdown.dropdownWidth > 200 || this.dropdown.dropdownWidth < 200) {
|
|
3846
|
-
this.dropdown.dropdownWidth =
|
|
3846
|
+
this.dropdown.dropdownWidth = 320;
|
|
3847
3847
|
}
|
|
3848
3848
|
this.cdr.markForCheck();
|
|
3849
3849
|
});
|
|
@@ -5460,6 +5460,7 @@ class AXFormGroupComponent extends AXBaseComponent {
|
|
|
5460
5460
|
}
|
|
5461
5461
|
ngAfterViewInit() {
|
|
5462
5462
|
this.required = this.component?.validation?.rules?.some(c => c.type === 'required');
|
|
5463
|
+
this.div.nativeElement.classList.add(this.size);
|
|
5463
5464
|
if (this.required) {
|
|
5464
5465
|
this.div.nativeElement.classList.add('required-state');
|
|
5465
5466
|
}
|
|
@@ -10263,6 +10264,7 @@ class AXSearchBarComponent {
|
|
|
10263
10264
|
this._filterItems.push({
|
|
10264
10265
|
name: el.property.name,
|
|
10265
10266
|
title: el.property.title,
|
|
10267
|
+
textValue: el.value,
|
|
10266
10268
|
value: el.value
|
|
10267
10269
|
});
|
|
10268
10270
|
}
|
|
@@ -10279,14 +10281,42 @@ class AXSearchBarComponent {
|
|
|
10279
10281
|
this.dropdown.toggle();
|
|
10280
10282
|
}
|
|
10281
10283
|
handleValueChange(e) {
|
|
10282
|
-
|
|
10283
|
-
|
|
10284
|
+
let value = [];
|
|
10285
|
+
let text = [];
|
|
10286
|
+
debugger;
|
|
10287
|
+
if (e.property.editorOptions?.valueField && e.value != null) {
|
|
10288
|
+
if (e.property.editorOptions.returnAllData) {
|
|
10289
|
+
value = e.value;
|
|
10290
|
+
e.value.forEach(element => {
|
|
10291
|
+
text.push(element[e.property.editorOptions.textField]);
|
|
10292
|
+
});
|
|
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
|
+
value = e.value[0][e.property.editorOptions.valueField];
|
|
10302
|
+
text = e.value[0][e.property.editorOptions.textField];
|
|
10303
|
+
}
|
|
10304
|
+
}
|
|
10305
|
+
else {
|
|
10306
|
+
value = e.value;
|
|
10307
|
+
text = e.value;
|
|
10308
|
+
}
|
|
10309
|
+
const findEl = this._filterItemsClone.find((el) => el.name == e.property.name);
|
|
10310
|
+
if (findEl) {
|
|
10311
|
+
findEl.value = value;
|
|
10312
|
+
findEl.textValue = text.toString();
|
|
10284
10313
|
}
|
|
10285
10314
|
else if (e.value != null) {
|
|
10286
10315
|
this._filterItemsClone.push({
|
|
10287
10316
|
name: e.property.name,
|
|
10288
10317
|
title: e.property.title,
|
|
10289
|
-
value
|
|
10318
|
+
value,
|
|
10319
|
+
textValue: text.toString(),
|
|
10290
10320
|
filterOptions: {
|
|
10291
10321
|
filters: e.property?.filterOptions?.filters ? e.property.filterOptions.filters : [],
|
|
10292
10322
|
logic: e.property?.filterOptions?.logic ? e.property.filterOptions.logic : 'and',
|
|
@@ -10349,10 +10379,10 @@ class AXSearchBarComponent {
|
|
|
10349
10379
|
ngOnInit() { }
|
|
10350
10380
|
}
|
|
10351
10381
|
AXSearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
10352
|
-
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: "_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\">\r\n <b>{{item.title}} :</b> {{item.
|
|
10382
|
+
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: "_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\">\r\n <b>{{item.title}} :</b> {{item.textValue}}\r\n </span>\r\n <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\">\r\n <i class=\"far fa-times close\"></i>\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 <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 [property]=\"prop\" [context]=\"_context\"\r\n (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 </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>\r\n", 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: 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 } });
|
|
10353
10383
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarComponent, decorators: [{
|
|
10354
10384
|
type: Component,
|
|
10355
|
-
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\">\r\n <b>{{item.title}} :</b> {{item.
|
|
10385
|
+
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\">\r\n <b>{{item.title}} :</b> {{item.textValue}}\r\n </span>\r\n <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\">\r\n <i class=\"far fa-times close\"></i>\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 <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 [property]=\"prop\" [context]=\"_context\"\r\n (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 </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>\r\n", 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"] }]
|
|
10356
10386
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { dropdown: [{
|
|
10357
10387
|
type: ViewChild,
|
|
10358
10388
|
args: ['dropdown', { static: true }]
|
|
@@ -10396,6 +10426,7 @@ class AXProperyEditorComponent {
|
|
|
10396
10426
|
return this._value;
|
|
10397
10427
|
}
|
|
10398
10428
|
set value(v) {
|
|
10429
|
+
console.log('value set');
|
|
10399
10430
|
if (v !== this._value) {
|
|
10400
10431
|
this._value = v;
|
|
10401
10432
|
this.valueChange.emit(v);
|
|
@@ -11774,7 +11805,7 @@ class AXSelectBoxPropertyEditorComponent extends AXProperyEditorComponent {
|
|
|
11774
11805
|
this.cdr = cdr;
|
|
11775
11806
|
this.valueField = 'id';
|
|
11776
11807
|
this.textField = 'text';
|
|
11777
|
-
this.
|
|
11808
|
+
this.mode = 'single';
|
|
11778
11809
|
this.selectionDataMode = 'value';
|
|
11779
11810
|
this.allowSearch = true;
|
|
11780
11811
|
this.allowNull = false;
|
|
@@ -11815,18 +11846,25 @@ class AXSelectBoxPropertyEditorComponent extends AXProperyEditorComponent {
|
|
|
11815
11846
|
}
|
|
11816
11847
|
}
|
|
11817
11848
|
handleValueChange(e) {
|
|
11818
|
-
super.handleValueChange(e.
|
|
11849
|
+
super.handleValueChange(e.selectedItems);
|
|
11819
11850
|
}
|
|
11820
11851
|
ngAfterViewInit() {
|
|
11852
|
+
debugger;
|
|
11853
|
+
if (typeof this.value != 'object') {
|
|
11854
|
+
this.selectBox.selectedValues = this.value;
|
|
11855
|
+
}
|
|
11856
|
+
else {
|
|
11857
|
+
this.selectBox.selectedItems = this.value;
|
|
11858
|
+
}
|
|
11821
11859
|
this.registerForValidationForm(this.selectBox);
|
|
11822
11860
|
this.onRenderCompleted.emit();
|
|
11823
11861
|
}
|
|
11824
11862
|
}
|
|
11825
11863
|
AXSelectBoxPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
11826
|
-
AXSelectBoxPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSelectBoxPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "selectBox", first: true, predicate: AXSelectBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-select-box [mode]=\"
|
|
11864
|
+
AXSelectBoxPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSelectBoxPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "selectBox", first: true, predicate: AXSelectBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-select-box [mode]=\"mode\"\r\n [textField]=\"textField\" \r\n [valueField]=\"valueField\" \r\n [remoteOperation]=\"remoteOperation\"\r\n [allowSearch]=\"allowSearch\" \r\n [allowNull]=\"allowNull\"\r\n [readonly]=\"readonly\"\r\n [disabled]=\"disabled\"\r\n (selectionChanged)=\"handleValueChange($event)\">\r\n <ax-data-source [provideData]=\"provideData\">\r\n </ax-data-source>\r\n <ax-validation [rules]=\"validation?.rules\">\r\n </ax-validation>\r\n</ax-select-box>", components: [{ type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
|
|
11827
11865
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxPropertyEditorComponent, decorators: [{
|
|
11828
11866
|
type: Component,
|
|
11829
|
-
args: [{ template: "<ax-select-box [mode]=\"
|
|
11867
|
+
args: [{ template: "<ax-select-box [mode]=\"mode\"\r\n [textField]=\"textField\" \r\n [valueField]=\"valueField\" \r\n [remoteOperation]=\"remoteOperation\"\r\n [allowSearch]=\"allowSearch\" \r\n [allowNull]=\"allowNull\"\r\n [readonly]=\"readonly\"\r\n [disabled]=\"disabled\"\r\n (selectionChanged)=\"handleValueChange($event)\">\r\n <ax-data-source [provideData]=\"provideData\">\r\n </ax-data-source>\r\n <ax-validation [rules]=\"validation?.rules\">\r\n </ax-validation>\r\n</ax-select-box>" }]
|
|
11830
11868
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectBox: [{
|
|
11831
11869
|
type: ViewChild,
|
|
11832
11870
|
args: [AXSelectBoxComponent, { static: true }]
|
|
@@ -11880,7 +11918,7 @@ AXSelectionListPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVe
|
|
|
11880
11918
|
[value]="value"
|
|
11881
11919
|
[items]="items"
|
|
11882
11920
|
[mode]="mode"
|
|
11883
|
-
(
|
|
11921
|
+
(selectedItemsChange)="handleValueChange($event)"
|
|
11884
11922
|
[textField]="textField"
|
|
11885
11923
|
[valueField]="valueField"
|
|
11886
11924
|
[direction]="direction"
|
|
@@ -11900,7 +11938,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
11900
11938
|
[value]="value"
|
|
11901
11939
|
[items]="items"
|
|
11902
11940
|
[mode]="mode"
|
|
11903
|
-
(
|
|
11941
|
+
(selectedItemsChange)="handleValueChange($event)"
|
|
11904
11942
|
[textField]="textField"
|
|
11905
11943
|
[valueField]="valueField"
|
|
11906
11944
|
[direction]="direction"
|