@pega/angular-sdk-components 0.242.8 → 0.242.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.
- package/esm2022/lib/_components/field/auto-complete/auto-complete.component.mjs +13 -5
- package/esm2022/lib/_components/field/dropdown/dropdown.component.mjs +2 -2
- package/esm2022/lib/_components/field/list-view-action-buttons/list-view-action-buttons.component.mjs +4 -3
- package/esm2022/lib/_components/field/user-reference/user-reference.component.mjs +7 -2
- package/esm2022/lib/_components/infra/root-container/root-container.component.mjs +3 -3
- package/esm2022/lib/_components/template/confirmation/confirmation.component.mjs +3 -3
- package/esm2022/lib/_components/template/simple-table-manual/simple-table-manual.component.mjs +3 -3
- package/fesm2022/pega-angular-sdk-components.mjs +28 -14
- package/fesm2022/pega-angular-sdk-components.mjs.map +1 -1
- package/lib/_components/field/auto-complete/auto-complete.component.d.ts +5 -0
- package/package.json +1 -1
|
@@ -3325,8 +3325,8 @@ class RootContainerComponent {
|
|
|
3325
3325
|
}
|
|
3326
3326
|
async configureModalContainer() {
|
|
3327
3327
|
const sdkConfig = await this.scService.getSdkConfig();
|
|
3328
|
-
const
|
|
3329
|
-
if (!this.displayOnlyFA$ ||
|
|
3328
|
+
const showModalsInEmbeddedMode = sdkConfig.serverConfig.showModalsInEmbeddedMode;
|
|
3329
|
+
if (!this.displayOnlyFA$ || showModalsInEmbeddedMode) {
|
|
3330
3330
|
const configObjModal = PCore.createPConnect({
|
|
3331
3331
|
meta: {
|
|
3332
3332
|
type: 'ModalViewContainer',
|
|
@@ -4180,6 +4180,12 @@ class AutoCompleteComponent {
|
|
|
4180
4180
|
}
|
|
4181
4181
|
this.filteredOptions = this.fieldControl.valueChanges.pipe(startWith(''), map(value => this._filter(value || '')));
|
|
4182
4182
|
}
|
|
4183
|
+
setOptions(options) {
|
|
4184
|
+
this.options$ = options;
|
|
4185
|
+
const index = this.options$?.findIndex(element => element.key === this.configProps$.value);
|
|
4186
|
+
this.value$ = index > -1 ? this.options$[index].value : this.configProps$.value;
|
|
4187
|
+
this.fieldControl.setValue(this.value$);
|
|
4188
|
+
}
|
|
4183
4189
|
ngOnDestroy() {
|
|
4184
4190
|
if (this.formGroup$) {
|
|
4185
4191
|
this.formGroup$.removeControl(this.controlName$);
|
|
@@ -4213,6 +4219,7 @@ class AutoCompleteComponent {
|
|
|
4213
4219
|
if (this.configProps$.value != undefined) {
|
|
4214
4220
|
const index = this.options$?.findIndex(element => element.key === this.configProps$.value);
|
|
4215
4221
|
this.value$ = index > -1 ? this.options$[index].value : this.configProps$.value;
|
|
4222
|
+
this.fieldControl.setValue(this.value$);
|
|
4216
4223
|
}
|
|
4217
4224
|
this.setPropertyValuesFromProps();
|
|
4218
4225
|
this.actionsApi = this.pConn$.getActionsApi();
|
|
@@ -4247,7 +4254,8 @@ class AutoCompleteComponent {
|
|
|
4247
4254
|
}
|
|
4248
4255
|
this.componentReference = this.pConn$.getStateProps().value;
|
|
4249
4256
|
if (this.listType === 'associated') {
|
|
4250
|
-
|
|
4257
|
+
const optionsList = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject('')); // 1st arg empty string until typedef marked correctly
|
|
4258
|
+
this.setOptions(optionsList);
|
|
4251
4259
|
}
|
|
4252
4260
|
if (!this.displayMode$ && this.listType !== 'associated') {
|
|
4253
4261
|
const results = await this.dataPageService.getDataPageData(datasource, this.parameters, context);
|
|
@@ -4312,7 +4320,7 @@ class AutoCompleteComponent {
|
|
|
4312
4320
|
};
|
|
4313
4321
|
optionsData.push(obj);
|
|
4314
4322
|
});
|
|
4315
|
-
this.
|
|
4323
|
+
this.setOptions(optionsData);
|
|
4316
4324
|
}
|
|
4317
4325
|
flattenParameters(params = {}) {
|
|
4318
4326
|
const flatParams = {};
|
|
@@ -4387,7 +4395,7 @@ class AutoCompleteComponent {
|
|
|
4387
4395
|
return errMessage;
|
|
4388
4396
|
}
|
|
4389
4397
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutoCompleteComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: Utils }, { token: DatapageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4390
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AutoCompleteComponent, isStandalone: true, selector: "app-auto-complete", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$, hideLabel }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n <mat-label>{{ label$ }}</mat-label>\n <input\n matInput\n [placeholder]=\"placeholder\"\n [formControl]=\"fieldControl\"\n [attr.data-test-id]=\"testId\"\n [
|
|
4398
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AutoCompleteComponent, isStandalone: true, selector: "app-auto-complete", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$, hideLabel }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n <mat-label>{{ label$ }}</mat-label>\n <input\n matInput\n [placeholder]=\"placeholder\"\n [formControl]=\"fieldControl\"\n [attr.data-test-id]=\"testId\"\n [required]=\"bRequired$\"\n [matAutocomplete]=\"auto\"\n (input)=\"fieldOnChange($event)\"\n (blur)=\"fieldOnBlur($event)\"\n />\n <mat-autocomplete #auto=\"matAutocomplete\" autoActiveFirstOption (optionSelected)=\"optionChanged($event)\">\n <mat-option *ngFor=\"let opt of filteredOptions | async\" [value]=\"opt.value\">\n <span>{{ opt.value }}</span>\n </mat-option>\n </mat-autocomplete>\n <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n </mat-form-field>\n </div>\n </div>\n</ng-template>\n<ng-template #noEdit>\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i0.forwardRef(() => i3.AsyncPipe), name: "async" }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i4.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i4.RequiredValidator), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i5.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => i6$1.MatInput), selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatAutocompleteModule) }, { kind: "component", type: i0.forwardRef(() => i8.MatAutocomplete), selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i0.forwardRef(() => i7.MatOption), selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i0.forwardRef(() => i8.MatAutocompleteTrigger), selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatOptionModule) }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
|
|
4391
4399
|
}
|
|
4392
4400
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutoCompleteComponent, decorators: [{
|
|
4393
4401
|
type: Component,
|
|
@@ -4399,7 +4407,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
4399
4407
|
MatAutocompleteModule,
|
|
4400
4408
|
MatOptionModule,
|
|
4401
4409
|
forwardRef(() => ComponentMapperComponent)
|
|
4402
|
-
], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$, hideLabel }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n <mat-label>{{ label$ }}</mat-label>\n <input\n matInput\n [placeholder]=\"placeholder\"\n [formControl]=\"fieldControl\"\n [attr.data-test-id]=\"testId\"\n [
|
|
4410
|
+
], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$, hideLabel }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n <mat-label>{{ label$ }}</mat-label>\n <input\n matInput\n [placeholder]=\"placeholder\"\n [formControl]=\"fieldControl\"\n [attr.data-test-id]=\"testId\"\n [required]=\"bRequired$\"\n [matAutocomplete]=\"auto\"\n (input)=\"fieldOnChange($event)\"\n (blur)=\"fieldOnBlur($event)\"\n />\n <mat-autocomplete #auto=\"matAutocomplete\" autoActiveFirstOption (optionSelected)=\"optionChanged($event)\">\n <mat-option *ngFor=\"let opt of filteredOptions | async\" [value]=\"opt.value\">\n <span>{{ opt.value }}</span>\n </mat-option>\n </mat-autocomplete>\n <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n </mat-form-field>\n </div>\n </div>\n</ng-template>\n<ng-template #noEdit>\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"] }]
|
|
4403
4411
|
}], ctorParameters: () => [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: Utils }, { type: DatapageService }], propDecorators: { pConn$: [{
|
|
4404
4412
|
type: Input
|
|
4405
4413
|
}], formGroup$: [{
|
|
@@ -6923,7 +6931,6 @@ class DropdownComponent {
|
|
|
6923
6931
|
// call updateSelf when initializing
|
|
6924
6932
|
this.checkAndUpdate();
|
|
6925
6933
|
// this should get called afer checkAndUpdate
|
|
6926
|
-
this.getDatapageData();
|
|
6927
6934
|
if (this.formGroup$) {
|
|
6928
6935
|
// add control to formGroup
|
|
6929
6936
|
this.formGroup$.addControl(this.controlName$, this.fieldControl);
|
|
@@ -7026,6 +7033,7 @@ class DropdownComponent {
|
|
|
7026
7033
|
this.localePath = this.localeContext === 'datapage' ? displayName : this.localeName;
|
|
7027
7034
|
this.localizedValue = this.pConn$.getLocalizedValue(this.value$, this.localePath, this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName));
|
|
7028
7035
|
this.localizedValue = this.options$?.find(opt => opt.key === this.value$)?.value || this.localizedValue;
|
|
7036
|
+
this.getDatapageData();
|
|
7029
7037
|
// trigger display of error message with field control
|
|
7030
7038
|
if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
|
|
7031
7039
|
const timer = interval(100).subscribe(() => {
|
|
@@ -7518,11 +7526,12 @@ class ListViewActionButtonsComponent {
|
|
|
7518
7526
|
this.pConn$
|
|
7519
7527
|
.getActionsApi()
|
|
7520
7528
|
.submitEmbeddedDataModal(this.context$)
|
|
7521
|
-
.then(() => {
|
|
7529
|
+
.then(() => {
|
|
7530
|
+
this.closeActionsDialog.emit();
|
|
7531
|
+
})
|
|
7522
7532
|
.finally(() => {
|
|
7523
7533
|
this.isDisabled = false;
|
|
7524
7534
|
});
|
|
7525
|
-
this.closeActionsDialog.emit();
|
|
7526
7535
|
}
|
|
7527
7536
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListViewActionButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7528
7537
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ListViewActionButtonsComponent, isStandalone: true, selector: "app-list-view-action-buttons", inputs: { pConn$: "pConn$", context$: "context$" }, outputs: { closeActionsDialog: "closeActionsDialog" }, ngImport: i0, template: "<mat-grid-list cols=\"2\" rowHeight=\"4.25rem\">\n <mat-grid-tile>\n <button mat-raised-button variant=\"contained\" color=\"secondary\" (click)=\"onCancel()\">\n {{ localizedVal('Cancel', localeCategory) }}\n </button>\n </mat-grid-tile>\n <mat-grid-tile>\n <button mat-raised-button variant=\"contained\" color=\"primary\" [disabled]=\"isDisabled\" (click)=\"onSubmit()\">\n {{ localizedVal('Submit', localeCategory) }}\n </button>\n </mat-grid-tile>\n</mat-grid-list>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: i2.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i2.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
@@ -8952,7 +8961,12 @@ class UserReferenceComponent {
|
|
|
8952
8961
|
this.helperText = helperText;
|
|
8953
8962
|
this.placeholder = placeholder || '';
|
|
8954
8963
|
this.displayMode$ = displayMode;
|
|
8955
|
-
|
|
8964
|
+
if (value && typeof value === 'object') {
|
|
8965
|
+
this.value$ = value.userName ? value.userName : '';
|
|
8966
|
+
}
|
|
8967
|
+
else {
|
|
8968
|
+
this.value$ = value || '';
|
|
8969
|
+
}
|
|
8956
8970
|
const { readOnly, required } = props;
|
|
8957
8971
|
[this.bReadonly$, this.bRequired$] = [readOnly, required].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
|
|
8958
8972
|
this.actionsApi = this.pConn$.getActionsApi();
|
|
@@ -9798,11 +9812,11 @@ class ConfirmationComponent {
|
|
|
9798
9812
|
PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CLOSE_CONFIRM_VIEW, this.rootInfo);
|
|
9799
9813
|
}
|
|
9800
9814
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConfirmationComponent, deps: [{ token: AngularPConnectService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9801
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ConfirmationComponent, isStandalone: true, selector: "app-confirmation", inputs: { pConn$: "pConn$" }, ngImport: i0, template: "<div>\n <div *ngIf=\"showConfirmView\">\n <h2 id=\"confirm-label\" class=\"confirm-label\">{{ label }}</h2>\n <div *ngIf=\"showDetails\">\n <component-mapper name=\"Details\" [props]=\"{ pConn$ }\"></component-mapper>\n </div>\n <div *ngIf=\"showTasks && toDoList?.length > 0\">\n <component-mapper\n name=\"Todo\"\n [props]=\"{ pConn$, datasource$: { source: toDoList }, headerText$: 'Open Tasks', type$: CONSTS.TODO, isConfirm: true }\"\n ></component-mapper>\n </div>\n <div class=\"done-button\">\n <button mat-raised-button color=\"primary\" (click)=\"onConfirmViewClose()\">Done</button>\n </div>\n </div>\n <div *ngIf=\"toDoList?.length > 0\">\n <component-mapper\n name=\"Todo\"\n [props]=\"{ pConn$, datasource$: { source: toDoList }, headerText$: 'Tasks', type$: CONSTS.TODO, isConfirm: true }\"\n ></component-mapper>\n </div>\n</div>\n", styles: [".done-button{justify-content:flex-end;display:flex;padding-bottom:1rem}.confirm-label{padding:0 16px;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatButton), selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
|
|
9815
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ConfirmationComponent, isStandalone: true, selector: "app-confirmation", inputs: { pConn$: "pConn$" }, ngImport: i0, template: "<div>\n <div *ngIf=\"showConfirmView\">\n <h2 id=\"confirm-label\" class=\"confirm-label\">{{ label }}</h2>\n <div *ngIf=\"showDetails\">\n <component-mapper name=\"Details\" [props]=\"{ pConn$ }\"></component-mapper>\n </div>\n <div *ngIf=\"showTasks && toDoList?.length > 0\">\n <component-mapper\n name=\"Todo\"\n [props]=\"{ pConn$, datasource$: { source: toDoList }, headerText$: 'Open Tasks', type$: CONSTS.TODO, isConfirm: true }\"\n ></component-mapper>\n </div>\n <div class=\"done-button\">\n <button mat-raised-button color=\"primary\" (click)=\"onConfirmViewClose()\">Done</button>\n </div>\n </div>\n <div *ngIf=\"!showConfirmView && toDoList?.length > 0\">\n <component-mapper\n name=\"Todo\"\n [props]=\"{ pConn$, datasource$: { source: toDoList }, headerText$: 'Tasks', type$: CONSTS.TODO, isConfirm: true }\"\n ></component-mapper>\n </div>\n</div>\n", styles: [".done-button{justify-content:flex-end;display:flex;padding-bottom:1rem}.confirm-label{padding:0 16px;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatButton), selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
|
|
9802
9816
|
}
|
|
9803
9817
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConfirmationComponent, decorators: [{
|
|
9804
9818
|
type: Component,
|
|
9805
|
-
args: [{ selector: 'app-confirmation', standalone: true, imports: [CommonModule, MatButtonModule, forwardRef(() => ComponentMapperComponent)], template: "<div>\n <div *ngIf=\"showConfirmView\">\n <h2 id=\"confirm-label\" class=\"confirm-label\">{{ label }}</h2>\n <div *ngIf=\"showDetails\">\n <component-mapper name=\"Details\" [props]=\"{ pConn$ }\"></component-mapper>\n </div>\n <div *ngIf=\"showTasks && toDoList?.length > 0\">\n <component-mapper\n name=\"Todo\"\n [props]=\"{ pConn$, datasource$: { source: toDoList }, headerText$: 'Open Tasks', type$: CONSTS.TODO, isConfirm: true }\"\n ></component-mapper>\n </div>\n <div class=\"done-button\">\n <button mat-raised-button color=\"primary\" (click)=\"onConfirmViewClose()\">Done</button>\n </div>\n </div>\n <div *ngIf=\"toDoList?.length > 0\">\n <component-mapper\n name=\"Todo\"\n [props]=\"{ pConn$, datasource$: { source: toDoList }, headerText$: 'Tasks', type$: CONSTS.TODO, isConfirm: true }\"\n ></component-mapper>\n </div>\n</div>\n", styles: [".done-button{justify-content:flex-end;display:flex;padding-bottom:1rem}.confirm-label{padding:0 16px;margin:0}\n"] }]
|
|
9819
|
+
args: [{ selector: 'app-confirmation', standalone: true, imports: [CommonModule, MatButtonModule, forwardRef(() => ComponentMapperComponent)], template: "<div>\n <div *ngIf=\"showConfirmView\">\n <h2 id=\"confirm-label\" class=\"confirm-label\">{{ label }}</h2>\n <div *ngIf=\"showDetails\">\n <component-mapper name=\"Details\" [props]=\"{ pConn$ }\"></component-mapper>\n </div>\n <div *ngIf=\"showTasks && toDoList?.length > 0\">\n <component-mapper\n name=\"Todo\"\n [props]=\"{ pConn$, datasource$: { source: toDoList }, headerText$: 'Open Tasks', type$: CONSTS.TODO, isConfirm: true }\"\n ></component-mapper>\n </div>\n <div class=\"done-button\">\n <button mat-raised-button color=\"primary\" (click)=\"onConfirmViewClose()\">Done</button>\n </div>\n </div>\n <div *ngIf=\"!showConfirmView && toDoList?.length > 0\">\n <component-mapper\n name=\"Todo\"\n [props]=\"{ pConn$, datasource$: { source: toDoList }, headerText$: 'Tasks', type$: CONSTS.TODO, isConfirm: true }\"\n ></component-mapper>\n </div>\n</div>\n", styles: [".done-button{justify-content:flex-end;display:flex;padding-bottom:1rem}.confirm-label{padding:0 16px;margin:0}\n"] }]
|
|
9806
9820
|
}], ctorParameters: () => [{ type: AngularPConnectService }], propDecorators: { pConn$: [{
|
|
9807
9821
|
type: Input
|
|
9808
9822
|
}] } });
|
|
@@ -14910,7 +14924,7 @@ class SimpleTableManualComponent {
|
|
|
14910
14924
|
this.elementsData = eleData;
|
|
14911
14925
|
}
|
|
14912
14926
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SimpleTableManualComponent, deps: [{ token: AngularPConnectService }, { token: Utils }, { token: DatapageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14913
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SimpleTableManualComponent, isStandalone: true, selector: "app-simple-table-manual", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"bVisible$\">\n <div class=\"simple-table-wrapper\">\n <h3 *ngIf=\"label\" className=\"label\" style=\"font-weight: bold\">\n {{ label }} <span class=\"results-count\">{{ getResultsText() }}</span>\n </h3>\n <table *ngIf=\"readOnlyMode || allowEditingInModal\" mat-table [dataSource]=\"elementsData\" class=\"mat-elevation-z8\" id=\"readonly-table\" matSort>\n <ng-container *ngFor=\"let dCol of processedFields; let i = index\" [matColumnDef]=\"dCol.config.name\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n <div>{{ dCol.config.label }}</div>\n <div class=\"psdk-mat-header-filter\">\n <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n </div>\n <div (click)=\"$event.stopPropagation()\">\n <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n </button>\n <mat-menu #groupMenu>\n <button mat-menu-item (click)=\"_groupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n </button>\n <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n </button>\n <button mat-menu-item (click)=\"_filter($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n </button>\n </mat-menu>\n </div>\n </th>\n <td mat-cell *matCellDef=\"let element\">\n <component-mapper\n [name]=\"element[i].getPConnect().getComponentName()\"\n [props]=\"{\n pConn$: element[i].getPConnect(),\n formGroup$: formGroup$\n }\"\n errorMsg=\"Table wants component not yet available: {{ element[i].getPConnect().getComponentName() }}\"\n ></component-mapper>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"DeleteIcon\">\n <div *ngIf=\"allowEditingInModal\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let element; index as j\">\n <div class=\"header-icon\">\n <button mat-icon-button [matMenuTriggerFor]=\"utilityMenu\">\n <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n </button>\n <mat-menu #utilityMenu=\"matMenu\" overlapTrigger=\"false\">\n <button mat-menu-item (click)=\"editRecord(element, j)\">Edit</button>\n <button mat-menu-item (click)=\"deleteRecord(j)\">Delete</button>\n </mat-menu>\n </div>\n </td>\n </div>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n <tr class=\"mat-row psdk-no-records\" *matNoDataRow>\n <td id=\"no-records\" class=\"mat-cell\" [attr.colspan]=\"displayedColumns.length\">\n {{ utils.getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.') }}\n </td>\n </tr>\n </table>\n <table *ngIf=\"editableMode && !allowEditingInModal\" mat-table [dataSource]=\"elementsData\" class=\"mat-elevation-z8\" id=\"editable-table\">\n <ng-container *ngFor=\"let dCol of fieldDefs; let i = index\">\n <ng-container *ngIf=\"dCol.name != 'DeleteIcon'\" [matColumnDef]=\"dCol.name\">\n <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\">{{ dCol.label }}</th>\n <td mat-cell *matCellDef=\"let element\">\n <component-mapper\n [name]=\"element[i].getPConnect().getComponentName()\"\n [props]=\"{\n pConn$: element[i].getPConnect(),\n formGroup$: formGroup$\n }\"\n errorMsg=\"Table wants component not yet available: {{ element[i].getPConnect().getComponentName() }}\"\n ></component-mapper>\n </td>\n </ng-container>\n </ng-container>\n <ng-container matColumnDef=\"DeleteIcon\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let element; index as j\">\n <button id=\"delete-button\" mat-icon-button (click)=\"deleteRecord(j)\">\n <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n </button>\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n <tr class=\"mat-row psdk-no-records\" *matNoDataRow>\n <td id=\"no-records\" class=\"mat-cell\" [attr.colspan]=\"displayedColumns.length\">\n {{ utils.getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.') }}\n </td>\n </tr>\n </table>\n </div>\n <button *ngIf=\"showAddRowButton\" mat-button color=\"primary\" style=\"font-size: 16px\" (click)=\"addRecord()\">\n + {{ localizedVal('Add', localeCategory) }}\n </button>\n</ng-container>\n\n<!-- pop overs for filters-->\n<div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n <div class=\"psdk-modal-file-top\">\n <h4>\n Filter:<b> {{ filterContainsLabel$ }}</b>\n </h4>\n <div *ngIf=\"bContains$\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n <mat-option value=\"contains\">Contains</mat-option>\n <mat-option value=\"equals\">Equals</mat-option>\n <mat-option value=\"startswith\">Starts with</mat-option>\n </mat-select>\n </mat-form-field>\n\n <mat-form-field class=\"psdk-full-width\">\n <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n </mat-form-field>\n </div>\n\n <div *ngIf=\"bDateTime$\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n <mat-option value=\"notequal\">is not equal to</mat-option>\n <mat-option value=\"after\">after</mat-option>\n <mat-option value=\"before\">before</mat-option>\n <mat-option value=\"null\">is null</mat-option>\n <mat-option value=\"notnull\">is not null</mat-option>\n </mat-select>\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Date</mat-label>\n <input\n matInput\n #dateInput\n [matDatepicker]=\"pegadate\"\n type=\"text\"\n [value]=\"filterContainsValue$\"\n (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n />\n <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Date time</mat-label>\n <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Time</mat-label>\n <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n </mat-form-field>\n </div>\n\n <component-mapper\n name=\"ActionButtons\"\n [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n ></component-mapper>\n </div>\n</div>\n", styles: [".simple-table-wrapper{width:100%;margin-top:.5rem;margin-bottom:.5rem;overflow-y:auto}table{width:100%}::ng-deep .mat-sort-header-content{white-space:normal}::ng-deep td.mat-mdc-cell{white-space:normal}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{border-right:1px solid var(--app-neutral-light-color);padding:8px!important;min-width:10rem}::ng-deep th.mat-mdc-header-cell:last-child,td.mat-mdc-cell:last-child{min-width:2rem}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:normal;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{display:inline-grid}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}tr.mat-mdc-row{cursor:pointer}tr.mat-mdc-header-row{background:var(--app-table-header-background-color)}.psdk-data-readonly{margin-top:.625rem;width:100%}.psdk-no-records{height:56px;text-align:center;border:1px solid var(--app-neutral-light-color);border-top:none;background:var(--app-form-color)}.psdk-utility-card-action-svg-icon{width:1.4rem}.label{margin:8px}.results-count{opacity:.7;font-size:.8rem;font-weight:700;margin-inline-start:.625rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTableModule) }, { kind: "component", type: i0.forwardRef(() => i5$4.MatTable), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatHeaderCellDef), selector: "[matHeaderCellDef]" }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatHeaderRowDef), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatColumnDef), selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatCellDef), selector: "[matCellDef]" }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatRowDef), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatHeaderCell), selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatCell), selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i0.forwardRef(() => i5$4.MatHeaderRow), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i0.forwardRef(() => i5$4.MatRow), selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatNoDataRow), selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatButton), selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(() => i3$1.MatIconButton), selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatSortModule) }, { kind: "directive", type: i0.forwardRef(() => i7$3.MatSort), selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i0.forwardRef(() => i7$3.MatSortHeader), selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatMenuModule) }, { kind: "component", type: i0.forwardRef(() => i6.MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => i6.MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => i6.MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i5.MatSuffix), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatDatepickerModule) }, { kind: "component", type: i0.forwardRef(() => i4$2.MatDatepicker), selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i0.forwardRef(() => i4$2.MatDatepickerInput), selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i0.forwardRef(() => i4$2.MatDatepickerToggle), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatOptionModule) }, { kind: "component", type: i0.forwardRef(() => i7.MatOption), selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatSelectModule) }, { kind: "component", type: i0.forwardRef(() => i7$1.MatSelect), selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => i6$1.MatInput), selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
|
|
14927
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SimpleTableManualComponent, isStandalone: true, selector: "app-simple-table-manual", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"bVisible$\">\n <div class=\"simple-table-wrapper\">\n <h3 *ngIf=\"label\" className=\"label\" style=\"font-weight: bold\">\n {{ label }} <span class=\"results-count\">{{ getResultsText() }}</span>\n </h3>\n <table *ngIf=\"readOnlyMode || allowEditingInModal\" mat-table [dataSource]=\"elementsData\" class=\"mat-elevation-z8\" id=\"readonly-table\" matSort>\n <ng-container *ngFor=\"let dCol of processedFields; let i = index\" [matColumnDef]=\"dCol.config.name\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n <div>{{ dCol.config.label }}</div>\n <div class=\"psdk-mat-header-filter\">\n <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n </div>\n <div (click)=\"$event.stopPropagation()\">\n <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n </button>\n <mat-menu #groupMenu>\n <button mat-menu-item (click)=\"_groupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n </button>\n <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n </button>\n <button mat-menu-item (click)=\"_filter($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n </button>\n </mat-menu>\n </div>\n </th>\n <td mat-cell *matCellDef=\"let element\">\n <component-mapper\n [name]=\"element[i].getPConnect().getComponentName()\"\n [props]=\"{\n pConn$: element[i].getPConnect(),\n formGroup$: formGroup$\n }\"\n errorMsg=\"Table wants component not yet available: {{ element[i].getPConnect().getComponentName() }}\"\n ></component-mapper>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"DeleteIcon\">\n <div *ngIf=\"allowEditingInModal\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let element; index as j\">\n <div class=\"header-icon\">\n <button mat-icon-button [matMenuTriggerFor]=\"utilityMenu\">\n <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n </button>\n <mat-menu #utilityMenu=\"matMenu\" overlapTrigger=\"false\">\n <button mat-menu-item (click)=\"editRecord(element, j)\">Edit</button>\n <button mat-menu-item (click)=\"deleteRecord(j)\">Delete</button>\n </mat-menu>\n </div>\n </td>\n </div>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n <tr class=\"mat-row psdk-no-records\" *matNoDataRow>\n <td id=\"no-records\" class=\"mat-cell\" [attr.colspan]=\"displayedColumns.length\">\n {{ utils.getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.') }}\n </td>\n </tr>\n </table>\n <table *ngIf=\"editableMode && !allowEditingInModal\" mat-table [dataSource]=\"elementsData\" class=\"mat-elevation-z8\" id=\"editable-table\">\n <ng-container *ngFor=\"let dCol of fieldDefs; let i = index\">\n <ng-container *ngIf=\"dCol.name != 'DeleteIcon'\" [matColumnDef]=\"dCol.name\">\n <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\">{{ dCol.label }}</th>\n <td mat-cell *matCellDef=\"let element\">\n <component-mapper\n [name]=\"element[i].getPConnect().getComponentName()\"\n [props]=\"{\n pConn$: element[i].getPConnect(),\n formGroup$: formGroup$\n }\"\n errorMsg=\"Table wants component not yet available: {{ element[i].getPConnect().getComponentName() }}\"\n ></component-mapper>\n </td>\n </ng-container>\n </ng-container>\n <ng-container matColumnDef=\"DeleteIcon\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let element; index as j\">\n <button id=\"delete-button\" mat-icon-button (click)=\"deleteRecord(j)\">\n <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n </button>\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n <tr class=\"mat-row psdk-no-records\" *matNoDataRow>\n <td id=\"no-records\" class=\"mat-cell\" [attr.colspan]=\"displayedColumns.length\">\n {{ utils.getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.') }}\n </td>\n </tr>\n </table>\n </div>\n <button *ngIf=\"showAddRowButton\" mat-button color=\"primary\" style=\"font-size: 16px\" (click)=\"addRecord()\">\n + {{ localizedVal('Add', localeCategory) }}\n </button>\n</ng-container>\n\n<!-- pop overs for filters-->\n<div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n <div class=\"psdk-modal-file-top\">\n <h4>\n Filter:<b> {{ filterContainsLabel$ }}</b>\n </h4>\n <div *ngIf=\"bContains$\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n <mat-option value=\"contains\">Contains</mat-option>\n <mat-option value=\"equals\">Equals</mat-option>\n <mat-option value=\"startswith\">Starts with</mat-option>\n </mat-select>\n </mat-form-field>\n\n <mat-form-field class=\"psdk-full-width\">\n <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n </mat-form-field>\n </div>\n\n <div *ngIf=\"bDateTime$\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n <mat-option value=\"notequal\">is not equal to</mat-option>\n <mat-option value=\"after\">after</mat-option>\n <mat-option value=\"before\">before</mat-option>\n <mat-option value=\"null\">is null</mat-option>\n <mat-option value=\"notnull\">is not null</mat-option>\n </mat-select>\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Date</mat-label>\n <input\n matInput\n #dateInput\n [matDatepicker]=\"pegadate\"\n type=\"text\"\n [value]=\"filterContainsValue$\"\n (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n />\n <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Date time</mat-label>\n <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Time</mat-label>\n <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n </mat-form-field>\n </div>\n\n <component-mapper\n name=\"ActionButtons\"\n [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n ></component-mapper>\n </div>\n</div>\n", styles: [".simple-table-wrapper{width:100%;margin-top:.5rem;margin-bottom:.5rem;overflow-y:auto;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}table{width:100%}::ng-deep .mat-sort-header-content{white-space:normal}::ng-deep td.mat-mdc-cell{white-space:normal}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{border-right:1px solid var(--app-neutral-light-color);padding:8px!important;min-width:10rem}::ng-deep th.mat-mdc-header-cell:last-child,td.mat-mdc-cell:last-child{min-width:2rem}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:normal;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{display:inline-grid}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}tr.mat-mdc-row{cursor:pointer}tr.mat-mdc-header-row{background:var(--app-table-header-background-color)}.psdk-data-readonly{margin-top:.625rem;width:100%}.psdk-no-records{height:56px;text-align:center;border:1px solid var(--app-neutral-light-color);border-top:none;background:var(--app-form-color)}.psdk-utility-card-action-svg-icon{width:1.4rem}.label{margin:8px}.results-count{opacity:.7;font-size:.8rem;font-weight:700;margin-inline-start:.625rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTableModule) }, { kind: "component", type: i0.forwardRef(() => i5$4.MatTable), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatHeaderCellDef), selector: "[matHeaderCellDef]" }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatHeaderRowDef), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatColumnDef), selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatCellDef), selector: "[matCellDef]" }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatRowDef), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatHeaderCell), selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatCell), selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i0.forwardRef(() => i5$4.MatHeaderRow), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i0.forwardRef(() => i5$4.MatRow), selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatNoDataRow), selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatButton), selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(() => i3$1.MatIconButton), selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatSortModule) }, { kind: "directive", type: i0.forwardRef(() => i7$3.MatSort), selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i0.forwardRef(() => i7$3.MatSortHeader), selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatMenuModule) }, { kind: "component", type: i0.forwardRef(() => i6.MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => i6.MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => i6.MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i5.MatSuffix), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatDatepickerModule) }, { kind: "component", type: i0.forwardRef(() => i4$2.MatDatepicker), selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i0.forwardRef(() => i4$2.MatDatepickerInput), selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i0.forwardRef(() => i4$2.MatDatepickerToggle), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatOptionModule) }, { kind: "component", type: i0.forwardRef(() => i7.MatOption), selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatSelectModule) }, { kind: "component", type: i0.forwardRef(() => i7$1.MatSelect), selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => i6$1.MatInput), selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
|
|
14914
14928
|
}
|
|
14915
14929
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SimpleTableManualComponent, decorators: [{
|
|
14916
14930
|
type: Component,
|
|
@@ -14926,7 +14940,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
14926
14940
|
MatSelectModule,
|
|
14927
14941
|
MatInputModule,
|
|
14928
14942
|
forwardRef(() => ComponentMapperComponent)
|
|
14929
|
-
], template: "<ng-container *ngIf=\"bVisible$\">\n <div class=\"simple-table-wrapper\">\n <h3 *ngIf=\"label\" className=\"label\" style=\"font-weight: bold\">\n {{ label }} <span class=\"results-count\">{{ getResultsText() }}</span>\n </h3>\n <table *ngIf=\"readOnlyMode || allowEditingInModal\" mat-table [dataSource]=\"elementsData\" class=\"mat-elevation-z8\" id=\"readonly-table\" matSort>\n <ng-container *ngFor=\"let dCol of processedFields; let i = index\" [matColumnDef]=\"dCol.config.name\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n <div>{{ dCol.config.label }}</div>\n <div class=\"psdk-mat-header-filter\">\n <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n </div>\n <div (click)=\"$event.stopPropagation()\">\n <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n </button>\n <mat-menu #groupMenu>\n <button mat-menu-item (click)=\"_groupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n </button>\n <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n </button>\n <button mat-menu-item (click)=\"_filter($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n </button>\n </mat-menu>\n </div>\n </th>\n <td mat-cell *matCellDef=\"let element\">\n <component-mapper\n [name]=\"element[i].getPConnect().getComponentName()\"\n [props]=\"{\n pConn$: element[i].getPConnect(),\n formGroup$: formGroup$\n }\"\n errorMsg=\"Table wants component not yet available: {{ element[i].getPConnect().getComponentName() }}\"\n ></component-mapper>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"DeleteIcon\">\n <div *ngIf=\"allowEditingInModal\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let element; index as j\">\n <div class=\"header-icon\">\n <button mat-icon-button [matMenuTriggerFor]=\"utilityMenu\">\n <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n </button>\n <mat-menu #utilityMenu=\"matMenu\" overlapTrigger=\"false\">\n <button mat-menu-item (click)=\"editRecord(element, j)\">Edit</button>\n <button mat-menu-item (click)=\"deleteRecord(j)\">Delete</button>\n </mat-menu>\n </div>\n </td>\n </div>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n <tr class=\"mat-row psdk-no-records\" *matNoDataRow>\n <td id=\"no-records\" class=\"mat-cell\" [attr.colspan]=\"displayedColumns.length\">\n {{ utils.getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.') }}\n </td>\n </tr>\n </table>\n <table *ngIf=\"editableMode && !allowEditingInModal\" mat-table [dataSource]=\"elementsData\" class=\"mat-elevation-z8\" id=\"editable-table\">\n <ng-container *ngFor=\"let dCol of fieldDefs; let i = index\">\n <ng-container *ngIf=\"dCol.name != 'DeleteIcon'\" [matColumnDef]=\"dCol.name\">\n <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\">{{ dCol.label }}</th>\n <td mat-cell *matCellDef=\"let element\">\n <component-mapper\n [name]=\"element[i].getPConnect().getComponentName()\"\n [props]=\"{\n pConn$: element[i].getPConnect(),\n formGroup$: formGroup$\n }\"\n errorMsg=\"Table wants component not yet available: {{ element[i].getPConnect().getComponentName() }}\"\n ></component-mapper>\n </td>\n </ng-container>\n </ng-container>\n <ng-container matColumnDef=\"DeleteIcon\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let element; index as j\">\n <button id=\"delete-button\" mat-icon-button (click)=\"deleteRecord(j)\">\n <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n </button>\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n <tr class=\"mat-row psdk-no-records\" *matNoDataRow>\n <td id=\"no-records\" class=\"mat-cell\" [attr.colspan]=\"displayedColumns.length\">\n {{ utils.getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.') }}\n </td>\n </tr>\n </table>\n </div>\n <button *ngIf=\"showAddRowButton\" mat-button color=\"primary\" style=\"font-size: 16px\" (click)=\"addRecord()\">\n + {{ localizedVal('Add', localeCategory) }}\n </button>\n</ng-container>\n\n<!-- pop overs for filters-->\n<div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n <div class=\"psdk-modal-file-top\">\n <h4>\n Filter:<b> {{ filterContainsLabel$ }}</b>\n </h4>\n <div *ngIf=\"bContains$\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n <mat-option value=\"contains\">Contains</mat-option>\n <mat-option value=\"equals\">Equals</mat-option>\n <mat-option value=\"startswith\">Starts with</mat-option>\n </mat-select>\n </mat-form-field>\n\n <mat-form-field class=\"psdk-full-width\">\n <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n </mat-form-field>\n </div>\n\n <div *ngIf=\"bDateTime$\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n <mat-option value=\"notequal\">is not equal to</mat-option>\n <mat-option value=\"after\">after</mat-option>\n <mat-option value=\"before\">before</mat-option>\n <mat-option value=\"null\">is null</mat-option>\n <mat-option value=\"notnull\">is not null</mat-option>\n </mat-select>\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Date</mat-label>\n <input\n matInput\n #dateInput\n [matDatepicker]=\"pegadate\"\n type=\"text\"\n [value]=\"filterContainsValue$\"\n (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n />\n <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Date time</mat-label>\n <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Time</mat-label>\n <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n </mat-form-field>\n </div>\n\n <component-mapper\n name=\"ActionButtons\"\n [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n ></component-mapper>\n </div>\n</div>\n", styles: [".simple-table-wrapper{width:100%;margin-top:.5rem;margin-bottom:.5rem;overflow-y:auto}table{width:100%}::ng-deep .mat-sort-header-content{white-space:normal}::ng-deep td.mat-mdc-cell{white-space:normal}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{border-right:1px solid var(--app-neutral-light-color);padding:8px!important;min-width:10rem}::ng-deep th.mat-mdc-header-cell:last-child,td.mat-mdc-cell:last-child{min-width:2rem}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:normal;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{display:inline-grid}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}tr.mat-mdc-row{cursor:pointer}tr.mat-mdc-header-row{background:var(--app-table-header-background-color)}.psdk-data-readonly{margin-top:.625rem;width:100%}.psdk-no-records{height:56px;text-align:center;border:1px solid var(--app-neutral-light-color);border-top:none;background:var(--app-form-color)}.psdk-utility-card-action-svg-icon{width:1.4rem}.label{margin:8px}.results-count{opacity:.7;font-size:.8rem;font-weight:700;margin-inline-start:.625rem}\n"] }]
|
|
14943
|
+
], template: "<ng-container *ngIf=\"bVisible$\">\n <div class=\"simple-table-wrapper\">\n <h3 *ngIf=\"label\" className=\"label\" style=\"font-weight: bold\">\n {{ label }} <span class=\"results-count\">{{ getResultsText() }}</span>\n </h3>\n <table *ngIf=\"readOnlyMode || allowEditingInModal\" mat-table [dataSource]=\"elementsData\" class=\"mat-elevation-z8\" id=\"readonly-table\" matSort>\n <ng-container *ngFor=\"let dCol of processedFields; let i = index\" [matColumnDef]=\"dCol.config.name\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n <div>{{ dCol.config.label }}</div>\n <div class=\"psdk-mat-header-filter\">\n <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n </div>\n <div (click)=\"$event.stopPropagation()\">\n <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n </button>\n <mat-menu #groupMenu>\n <button mat-menu-item (click)=\"_groupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n </button>\n <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n </button>\n <button mat-menu-item (click)=\"_filter($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n </button>\n </mat-menu>\n </div>\n </th>\n <td mat-cell *matCellDef=\"let element\">\n <component-mapper\n [name]=\"element[i].getPConnect().getComponentName()\"\n [props]=\"{\n pConn$: element[i].getPConnect(),\n formGroup$: formGroup$\n }\"\n errorMsg=\"Table wants component not yet available: {{ element[i].getPConnect().getComponentName() }}\"\n ></component-mapper>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"DeleteIcon\">\n <div *ngIf=\"allowEditingInModal\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let element; index as j\">\n <div class=\"header-icon\">\n <button mat-icon-button [matMenuTriggerFor]=\"utilityMenu\">\n <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n </button>\n <mat-menu #utilityMenu=\"matMenu\" overlapTrigger=\"false\">\n <button mat-menu-item (click)=\"editRecord(element, j)\">Edit</button>\n <button mat-menu-item (click)=\"deleteRecord(j)\">Delete</button>\n </mat-menu>\n </div>\n </td>\n </div>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n <tr class=\"mat-row psdk-no-records\" *matNoDataRow>\n <td id=\"no-records\" class=\"mat-cell\" [attr.colspan]=\"displayedColumns.length\">\n {{ utils.getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.') }}\n </td>\n </tr>\n </table>\n <table *ngIf=\"editableMode && !allowEditingInModal\" mat-table [dataSource]=\"elementsData\" class=\"mat-elevation-z8\" id=\"editable-table\">\n <ng-container *ngFor=\"let dCol of fieldDefs; let i = index\">\n <ng-container *ngIf=\"dCol.name != 'DeleteIcon'\" [matColumnDef]=\"dCol.name\">\n <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\">{{ dCol.label }}</th>\n <td mat-cell *matCellDef=\"let element\">\n <component-mapper\n [name]=\"element[i].getPConnect().getComponentName()\"\n [props]=\"{\n pConn$: element[i].getPConnect(),\n formGroup$: formGroup$\n }\"\n errorMsg=\"Table wants component not yet available: {{ element[i].getPConnect().getComponentName() }}\"\n ></component-mapper>\n </td>\n </ng-container>\n </ng-container>\n <ng-container matColumnDef=\"DeleteIcon\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let element; index as j\">\n <button id=\"delete-button\" mat-icon-button (click)=\"deleteRecord(j)\">\n <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n </button>\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n <tr class=\"mat-row psdk-no-records\" *matNoDataRow>\n <td id=\"no-records\" class=\"mat-cell\" [attr.colspan]=\"displayedColumns.length\">\n {{ utils.getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.') }}\n </td>\n </tr>\n </table>\n </div>\n <button *ngIf=\"showAddRowButton\" mat-button color=\"primary\" style=\"font-size: 16px\" (click)=\"addRecord()\">\n + {{ localizedVal('Add', localeCategory) }}\n </button>\n</ng-container>\n\n<!-- pop overs for filters-->\n<div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n <div class=\"psdk-modal-file-top\">\n <h4>\n Filter:<b> {{ filterContainsLabel$ }}</b>\n </h4>\n <div *ngIf=\"bContains$\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n <mat-option value=\"contains\">Contains</mat-option>\n <mat-option value=\"equals\">Equals</mat-option>\n <mat-option value=\"startswith\">Starts with</mat-option>\n </mat-select>\n </mat-form-field>\n\n <mat-form-field class=\"psdk-full-width\">\n <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n </mat-form-field>\n </div>\n\n <div *ngIf=\"bDateTime$\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n <mat-option value=\"notequal\">is not equal to</mat-option>\n <mat-option value=\"after\">after</mat-option>\n <mat-option value=\"before\">before</mat-option>\n <mat-option value=\"null\">is null</mat-option>\n <mat-option value=\"notnull\">is not null</mat-option>\n </mat-select>\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Date</mat-label>\n <input\n matInput\n #dateInput\n [matDatepicker]=\"pegadate\"\n type=\"text\"\n [value]=\"filterContainsValue$\"\n (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n />\n <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Date time</mat-label>\n <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Time</mat-label>\n <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n </mat-form-field>\n </div>\n\n <component-mapper\n name=\"ActionButtons\"\n [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n ></component-mapper>\n </div>\n</div>\n", styles: [".simple-table-wrapper{width:100%;margin-top:.5rem;margin-bottom:.5rem;overflow-y:auto;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}table{width:100%}::ng-deep .mat-sort-header-content{white-space:normal}::ng-deep td.mat-mdc-cell{white-space:normal}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{border-right:1px solid var(--app-neutral-light-color);padding:8px!important;min-width:10rem}::ng-deep th.mat-mdc-header-cell:last-child,td.mat-mdc-cell:last-child{min-width:2rem}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:normal;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{display:inline-grid}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}tr.mat-mdc-row{cursor:pointer}tr.mat-mdc-header-row{background:var(--app-table-header-background-color)}.psdk-data-readonly{margin-top:.625rem;width:100%}.psdk-no-records{height:56px;text-align:center;border:1px solid var(--app-neutral-light-color);border-top:none;background:var(--app-form-color)}.psdk-utility-card-action-svg-icon{width:1.4rem}.label{margin:8px}.results-count{opacity:.7;font-size:.8rem;font-weight:700;margin-inline-start:.625rem}\n"] }]
|
|
14930
14944
|
}], ctorParameters: () => [{ type: AngularPConnectService }, { type: Utils }, { type: DatapageService }], propDecorators: { sort: [{
|
|
14931
14945
|
type: ViewChild,
|
|
14932
14946
|
args: [MatSort]
|