@wertzui/ngx-restworld-client 8.2.0 → 8.2.1
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/components/restworld-form/restworld-form.component.mjs +8 -4
- package/esm2020/lib/components/restworld-inputs/restworld-inputs.mjs +12 -6
- package/fesm2015/wertzui-ngx-restworld-client.mjs +18 -8
- package/fesm2015/wertzui-ngx-restworld-client.mjs.map +1 -1
- package/fesm2020/wertzui-ngx-restworld-client.mjs +18 -8
- package/fesm2020/wertzui-ngx-restworld-client.mjs.map +1 -1
- package/lib/components/restworld-form/restworld-form.component.d.ts.map +1 -1
- package/lib/components/restworld-inputs/restworld-inputs.d.ts +4 -2
- package/lib/components/restworld-inputs/restworld-inputs.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1039,6 +1039,10 @@ class RestWorldInputDropdownComponent {
|
|
|
1039
1039
|
this._messageService = _messageService;
|
|
1040
1040
|
this._clients = _clients;
|
|
1041
1041
|
this._controlContainer = _controlContainer;
|
|
1042
|
+
this._filterValue = "";
|
|
1043
|
+
}
|
|
1044
|
+
get filterValue() {
|
|
1045
|
+
return this._filterValue;
|
|
1042
1046
|
}
|
|
1043
1047
|
get valueField() {
|
|
1044
1048
|
var _a;
|
|
@@ -1097,7 +1101,7 @@ class RestWorldInputDropdownComponent {
|
|
|
1097
1101
|
let filter = `contains(${options.promptField}, '${event.filter}')`;
|
|
1098
1102
|
if (((_c = options.valueField) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === 'id' && !Number.isNaN(Number.parseInt(event.filter)))
|
|
1099
1103
|
filter = `(${options.valueField} eq ${event.filter}) or (${filter})`;
|
|
1100
|
-
yield this.SetInlineOptionsFromFilter(filter);
|
|
1104
|
+
yield this.SetInlineOptionsFromFilter(filter, event.filter);
|
|
1101
1105
|
});
|
|
1102
1106
|
}
|
|
1103
1107
|
setInitialSelectedOptionsElementForProperty() {
|
|
@@ -1110,10 +1114,10 @@ class RestWorldInputDropdownComponent {
|
|
|
1110
1114
|
return;
|
|
1111
1115
|
}
|
|
1112
1116
|
const filter = `${options.valueField} in (${options.selectedValues})`;
|
|
1113
|
-
yield this.SetInlineOptionsFromFilter(filter);
|
|
1117
|
+
yield this.SetInlineOptionsFromFilter(filter, "");
|
|
1114
1118
|
});
|
|
1115
1119
|
}
|
|
1116
|
-
SetInlineOptionsFromFilter(filter) {
|
|
1120
|
+
SetInlineOptionsFromFilter(filter, eventFilter) {
|
|
1117
1121
|
var _a;
|
|
1118
1122
|
return __awaiter(this, void 0, void 0, function* () {
|
|
1119
1123
|
const options = this.property.options;
|
|
@@ -1128,6 +1132,8 @@ class RestWorldInputDropdownComponent {
|
|
|
1128
1132
|
const items = response.body._embedded.items;
|
|
1129
1133
|
const newItems = this.combineInlineWithSelected(items);
|
|
1130
1134
|
options.inline = newItems;
|
|
1135
|
+
// The multiselect component does not update the options when the inline options are updated, so we need to trigger a change detection.
|
|
1136
|
+
this._filterValue = eventFilter;
|
|
1131
1137
|
});
|
|
1132
1138
|
}
|
|
1133
1139
|
combineInlineWithSelected(items) {
|
|
@@ -1160,10 +1166,10 @@ class RestWorldInputDropdownComponent {
|
|
|
1160
1166
|
}
|
|
1161
1167
|
}
|
|
1162
1168
|
RestWorldInputDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldInputDropdownComponent, deps: [{ token: i2$3.MessageService }, { token: RestWorldClientCollection }, { token: i5.ControlContainer }], target: i0.ɵɵFactoryTarget.Component });
|
|
1163
|
-
RestWorldInputDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: RestWorldInputDropdownComponent, selector: "rw-input-dropdown", inputs: { property: "property", apiName: "apiName" }, queries: [{ propertyName: "inputOptionsSingleRef", first: true, predicate: ["inputOptionsSingle"], descendants: true }, { propertyName: "inputOptionsMultipleRef", first: true, predicate: ["inputOptionsMultiple"], descendants: true }], ngImport: i0, template: "<ng-template #defaultInputOptionsSingle let-property=\"property\" let-template=\"template\">\n <p-dropdown\n [formControlName]=\"property.name\"\n [id]=\"property.name\"\n [options]=\"property.options.inline\"\n [filterBy]=\"
|
|
1169
|
+
RestWorldInputDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: RestWorldInputDropdownComponent, selector: "rw-input-dropdown", inputs: { property: "property", apiName: "apiName" }, queries: [{ propertyName: "inputOptionsSingleRef", first: true, predicate: ["inputOptionsSingle"], descendants: true }, { propertyName: "inputOptionsMultipleRef", first: true, predicate: ["inputOptionsMultiple"], descendants: true }], ngImport: i0, template: "<ng-template #defaultInputOptionsSingle let-property=\"property\" let-template=\"template\">\n <p-dropdown\n [formControlName]=\"property.name\"\n [id]=\"property.name\"\n [options]=\"property.options.inline\"\n [filterBy]=\"promptField + ',' + valueField\"\n [optionLabel]=\"promptField\"\n [optionValue]=\"valueField\"\n [readonly]=\"property.readOnly\"\n [required]=\"property.required || property.options.minItems > 0\"\n [filter]=\"true\"\n [filterValue]=\"filterValue\"\n [autoDisplayFirst]=\"false\"\n [showClear]=\"!property.required || property.options.minItems <= 0\"\n (onFilter)=\"onOptionsFiltered($event)\"\n styleClass=\"w-full\"\n [filterPlaceholder]=\"property?.options?.link?.href ? 'search for more results' : ''\"\n >\n <ng-template let-item pTemplate=\"selectedItem\">\n <span [pTooltip]=\"getTooltip(item)\">{{getLabel(item)}}</span>\n </ng-template>\n <ng-template let-item pTemplate=\"item\">\n <span [pTooltip]=\"getTooltip(item)\">{{getLabel(item)}}</span>\n </ng-template>\n </p-dropdown>\n</ng-template>\n<ng-container *ngIf=\"!property.options.maxItems || property.options.maxItems == 1\">\n <ng-container *ngTemplateOutlet=\"inputOptionsSingleRef ?? defaultInputOptionsSingle; context: { property: property, apiName: apiName }\"></ng-container>\n</ng-container>\n\n<ng-template #defaultInputOptionsMultiple let-property=\"property\" let-template=\"template\">\n <p-multiSelect\n [formControlName]=\"property.name\"\n [id]=\"property.name\"\n [options]=\"property.options.inline\"\n [filterBy]=\"promptField + ',' + valueField\"\n [optionLabel]=\"promptField\"\n [optionValue]=\"valueField\"\n [readonly]=\"property.readOnly\"\n [required]=\"property.required || property.options.minItems > 0\"\n [filter]=\"true\"\n [filterValue]=\"filterValue\"\n [showClear]=\"true\"\n [showToggleAll]=\"true\"\n (onFilter)=\"onOptionsFiltered($event)\"\n styleClass=\"w-full\"\n [filterPlaceHolder]=\"property?.options?.link?.href ? 'search for more results' : ''\"\n [selectionLimit]=\"property.options.maxItems\"\n display=\"chip\"\n >\n <ng-template let-value pTemplate=\"selectedItems\">\n <p-chip\n *ngFor=\"let item of value; let i = index\"\n [pTooltip]=\"getTooltip(getItemByValue(item))\"\n [label]=\"getLabel(getItemByValue(item))\"\n [removable]=\"true\"\n (onRemove)=\"removeByValue(item)\"\n >\n </p-chip>\n </ng-template>\n <ng-template let-item pTemplate=\"item\">\n <span [pTooltip]=\"getTooltip(item)\">{{getLabel(item)}}</span>\n </ng-template>\n </p-multiSelect>\n</ng-template>\n<ng-container *ngIf=\"(property.options.maxItems ?? 0) > 1\">\n <ng-container *ngTemplateOutlet=\"inputOptionsMultipleRef ?? defaultInputOptionsMultiple; context: { property: property, apiName: apiName }\"></ng-container>\n</ng-container>\n", styles: ["::ng-deep .p-multiselect-label{display:inline-flex!important}::ng-deep .p-multiselect-label-empty{height:36px}::ng-deep .p-chip{background-color:#eff6ff;color:#1d4ed8}::ng-deep .pi-chip-remove-icon:hover{filter:brightness(.6)}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i13.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "overlayDirection", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i14.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "label", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad"] }, { kind: "component", type: i15.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "style", "styleClass", "removable", "removeIcon"], outputs: ["onRemove", "onImageError"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
|
|
1164
1170
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldInputDropdownComponent, decorators: [{
|
|
1165
1171
|
type: Component,
|
|
1166
|
-
args: [{ selector: 'rw-input-dropdown', viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: "<ng-template #defaultInputOptionsSingle let-property=\"property\" let-template=\"template\">\n <p-dropdown\n [formControlName]=\"property.name\"\n [id]=\"property.name\"\n [options]=\"property.options.inline\"\n [filterBy]=\"
|
|
1172
|
+
args: [{ selector: 'rw-input-dropdown', viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: "<ng-template #defaultInputOptionsSingle let-property=\"property\" let-template=\"template\">\n <p-dropdown\n [formControlName]=\"property.name\"\n [id]=\"property.name\"\n [options]=\"property.options.inline\"\n [filterBy]=\"promptField + ',' + valueField\"\n [optionLabel]=\"promptField\"\n [optionValue]=\"valueField\"\n [readonly]=\"property.readOnly\"\n [required]=\"property.required || property.options.minItems > 0\"\n [filter]=\"true\"\n [filterValue]=\"filterValue\"\n [autoDisplayFirst]=\"false\"\n [showClear]=\"!property.required || property.options.minItems <= 0\"\n (onFilter)=\"onOptionsFiltered($event)\"\n styleClass=\"w-full\"\n [filterPlaceholder]=\"property?.options?.link?.href ? 'search for more results' : ''\"\n >\n <ng-template let-item pTemplate=\"selectedItem\">\n <span [pTooltip]=\"getTooltip(item)\">{{getLabel(item)}}</span>\n </ng-template>\n <ng-template let-item pTemplate=\"item\">\n <span [pTooltip]=\"getTooltip(item)\">{{getLabel(item)}}</span>\n </ng-template>\n </p-dropdown>\n</ng-template>\n<ng-container *ngIf=\"!property.options.maxItems || property.options.maxItems == 1\">\n <ng-container *ngTemplateOutlet=\"inputOptionsSingleRef ?? defaultInputOptionsSingle; context: { property: property, apiName: apiName }\"></ng-container>\n</ng-container>\n\n<ng-template #defaultInputOptionsMultiple let-property=\"property\" let-template=\"template\">\n <p-multiSelect\n [formControlName]=\"property.name\"\n [id]=\"property.name\"\n [options]=\"property.options.inline\"\n [filterBy]=\"promptField + ',' + valueField\"\n [optionLabel]=\"promptField\"\n [optionValue]=\"valueField\"\n [readonly]=\"property.readOnly\"\n [required]=\"property.required || property.options.minItems > 0\"\n [filter]=\"true\"\n [filterValue]=\"filterValue\"\n [showClear]=\"true\"\n [showToggleAll]=\"true\"\n (onFilter)=\"onOptionsFiltered($event)\"\n styleClass=\"w-full\"\n [filterPlaceHolder]=\"property?.options?.link?.href ? 'search for more results' : ''\"\n [selectionLimit]=\"property.options.maxItems\"\n display=\"chip\"\n >\n <ng-template let-value pTemplate=\"selectedItems\">\n <p-chip\n *ngFor=\"let item of value; let i = index\"\n [pTooltip]=\"getTooltip(getItemByValue(item))\"\n [label]=\"getLabel(getItemByValue(item))\"\n [removable]=\"true\"\n (onRemove)=\"removeByValue(item)\"\n >\n </p-chip>\n </ng-template>\n <ng-template let-item pTemplate=\"item\">\n <span [pTooltip]=\"getTooltip(item)\">{{getLabel(item)}}</span>\n </ng-template>\n </p-multiSelect>\n</ng-template>\n<ng-container *ngIf=\"(property.options.maxItems ?? 0) > 1\">\n <ng-container *ngTemplateOutlet=\"inputOptionsMultipleRef ?? defaultInputOptionsMultiple; context: { property: property, apiName: apiName }\"></ng-container>\n</ng-container>\n", styles: ["::ng-deep .p-multiselect-label{display:inline-flex!important}::ng-deep .p-multiselect-label-empty{height:36px}::ng-deep .p-chip{background-color:#eff6ff;color:#1d4ed8}::ng-deep .pi-chip-remove-icon:hover{filter:brightness(.6)}\n"] }]
|
|
1167
1173
|
}], ctorParameters: function () { return [{ type: i2$3.MessageService }, { type: RestWorldClientCollection }, { type: i5.ControlContainer }]; }, propDecorators: { property: [{
|
|
1168
1174
|
type: Input
|
|
1169
1175
|
}], apiName: [{
|
|
@@ -1306,7 +1312,9 @@ class RestWorldFormComponent {
|
|
|
1306
1312
|
get canSubmit() {
|
|
1307
1313
|
return this.allowSubmit &&
|
|
1308
1314
|
this.template.target !== undefined &&
|
|
1309
|
-
!this.isLoading
|
|
1315
|
+
!this.isLoading &&
|
|
1316
|
+
this.formGroup !== undefined &&
|
|
1317
|
+
this.formGroup.valid;
|
|
1310
1318
|
}
|
|
1311
1319
|
get canDelete() {
|
|
1312
1320
|
return this.allowDelete &&
|
|
@@ -1376,8 +1384,10 @@ class RestWorldFormComponent {
|
|
|
1376
1384
|
if (path.length > 0 && path[0] === '$')
|
|
1377
1385
|
path.shift();
|
|
1378
1386
|
const formControl = path.reduce(RestWorldFormComponent.getSubControl, this.formGroup);
|
|
1379
|
-
|
|
1380
|
-
|
|
1387
|
+
if (formControl) {
|
|
1388
|
+
formControl.setErrors(Object.assign(Object.assign({}, formControl.errors), { remote: errorsForKey }));
|
|
1389
|
+
formControl.markAsTouched();
|
|
1390
|
+
}
|
|
1381
1391
|
}
|
|
1382
1392
|
}
|
|
1383
1393
|
}
|