ngx-material-entity 20.0.0 → 20.0.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/fesm2022/ngx-material-entity.mjs +30 -29
- package/fesm2022/ngx-material-entity.mjs.map +1 -1
- package/index.d.ts +10 -10
- package/package.json +1 -1
|
@@ -1755,7 +1755,7 @@ class NgxMatEntityConfirmDialogComponent {
|
|
|
1755
1755
|
this.dialogRef.close(false);
|
|
1756
1756
|
}
|
|
1757
1757
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgxMatEntityConfirmDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: NGX_COMPLETE_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
|
|
1758
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: NgxMatEntityConfirmDialogComponent, isStandalone: true, selector: "ngx-mat-entity-confirm-dialog", ngImport: i0, template: "@if (data.title) {\n <h2 mat-dialog-title>{{data.title}}</h2>\n}\n\n<mat-dialog-content>\n @for (paragraph of data.text; track $index) {\n <p>{{paragraph}}</p>\n }\n @if (data.requireConfirmation) {\n <div class=\"checkbox-wrapper\">\n <mat-checkbox name=\"confirm\" [(ngModel)]=\"confirm\">\n {{data.confirmationText}}\n </mat-checkbox>\n </div>\n }\n</mat-dialog-content>\n\n<mat-dialog-actions>\n @if (data.type === 'delete') {\n <button type=\"button\" mat-raised-button color=\"warn\" class=\"confirm-button\" [disabled]=\"data.requireConfirmation && !confirm\" (click)=\"confirmAction()\">\n {{data.confirmButtonLabel}}\n </button>\n }\n @if (data.type !== 'delete') {\n <button type=\"button\" mat-raised-button class=\"confirm-button\" [disabled]=\"data.requireConfirmation && !confirm\" (click)=\"confirmAction()\">\n {{data.confirmButtonLabel}}\n </button>\n }\n @if (data.type !== 'info-only') {\n <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"cancel()\">\n {{data.cancelButtonLabel}}\n </button>\n }\n</mat-dialog-actions>", styles: [".checkbox-wrapper{min-height:50px;display:flex}.checkbox-wrapper>mat-checkbox{align-self:center}\n", "::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}.mat-dialog-title{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
|
|
1758
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: NgxMatEntityConfirmDialogComponent, isStandalone: true, selector: "ngx-mat-entity-confirm-dialog", ngImport: i0, template: "<!-- eslint-disable angular/cyclomatic-complexity -->\n@if (data.title) {\n <h2 mat-dialog-title>{{data.title}}</h2>\n}\n\n<mat-dialog-content>\n @for (paragraph of data.text; track $index) {\n <p>{{paragraph}}</p>\n }\n @if (data.requireConfirmation) {\n <div class=\"checkbox-wrapper\">\n <mat-checkbox name=\"confirm\" [(ngModel)]=\"confirm\">\n {{data.confirmationText}}\n </mat-checkbox>\n </div>\n }\n</mat-dialog-content>\n\n<mat-dialog-actions>\n @if (data.type === 'delete') {\n <button type=\"button\" mat-raised-button color=\"warn\" class=\"confirm-button\" [disabled]=\"data.requireConfirmation && !confirm\" (click)=\"confirmAction()\">\n {{data.confirmButtonLabel}}\n </button>\n }\n @if (data.type !== 'delete') {\n <button type=\"button\" mat-raised-button class=\"confirm-button\" [disabled]=\"data.requireConfirmation && !confirm\" (click)=\"confirmAction()\">\n {{data.confirmButtonLabel}}\n </button>\n }\n @if (data.type !== 'info-only') {\n <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"cancel()\">\n {{data.cancelButtonLabel}}\n </button>\n }\n</mat-dialog-actions>", styles: [".checkbox-wrapper{min-height:50px;display:flex}.checkbox-wrapper>mat-checkbox{align-self:center}\n", "::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}.mat-dialog-title{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
|
|
1759
1759
|
}
|
|
1760
1760
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgxMatEntityConfirmDialogComponent, decorators: [{
|
|
1761
1761
|
type: Component,
|
|
@@ -1765,7 +1765,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
|
|
|
1765
1765
|
FormsModule,
|
|
1766
1766
|
MatCheckboxModule,
|
|
1767
1767
|
MatButtonModule
|
|
1768
|
-
], template: "@if (data.title) {\n <h2 mat-dialog-title>{{data.title}}</h2>\n}\n\n<mat-dialog-content>\n @for (paragraph of data.text; track $index) {\n <p>{{paragraph}}</p>\n }\n @if (data.requireConfirmation) {\n <div class=\"checkbox-wrapper\">\n <mat-checkbox name=\"confirm\" [(ngModel)]=\"confirm\">\n {{data.confirmationText}}\n </mat-checkbox>\n </div>\n }\n</mat-dialog-content>\n\n<mat-dialog-actions>\n @if (data.type === 'delete') {\n <button type=\"button\" mat-raised-button color=\"warn\" class=\"confirm-button\" [disabled]=\"data.requireConfirmation && !confirm\" (click)=\"confirmAction()\">\n {{data.confirmButtonLabel}}\n </button>\n }\n @if (data.type !== 'delete') {\n <button type=\"button\" mat-raised-button class=\"confirm-button\" [disabled]=\"data.requireConfirmation && !confirm\" (click)=\"confirmAction()\">\n {{data.confirmButtonLabel}}\n </button>\n }\n @if (data.type !== 'info-only') {\n <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"cancel()\">\n {{data.cancelButtonLabel}}\n </button>\n }\n</mat-dialog-actions>", styles: [".checkbox-wrapper{min-height:50px;display:flex}.checkbox-wrapper>mat-checkbox{align-self:center}\n", "::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}.mat-dialog-title{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}\n"] }]
|
|
1768
|
+
], template: "<!-- eslint-disable angular/cyclomatic-complexity -->\n@if (data.title) {\n <h2 mat-dialog-title>{{data.title}}</h2>\n}\n\n<mat-dialog-content>\n @for (paragraph of data.text; track $index) {\n <p>{{paragraph}}</p>\n }\n @if (data.requireConfirmation) {\n <div class=\"checkbox-wrapper\">\n <mat-checkbox name=\"confirm\" [(ngModel)]=\"confirm\">\n {{data.confirmationText}}\n </mat-checkbox>\n </div>\n }\n</mat-dialog-content>\n\n<mat-dialog-actions>\n @if (data.type === 'delete') {\n <button type=\"button\" mat-raised-button color=\"warn\" class=\"confirm-button\" [disabled]=\"data.requireConfirmation && !confirm\" (click)=\"confirmAction()\">\n {{data.confirmButtonLabel}}\n </button>\n }\n @if (data.type !== 'delete') {\n <button type=\"button\" mat-raised-button class=\"confirm-button\" [disabled]=\"data.requireConfirmation && !confirm\" (click)=\"confirmAction()\">\n {{data.confirmButtonLabel}}\n </button>\n }\n @if (data.type !== 'info-only') {\n <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"cancel()\">\n {{data.cancelButtonLabel}}\n </button>\n }\n</mat-dialog-actions>", styles: [".checkbox-wrapper{min-height:50px;display:flex}.checkbox-wrapper>mat-checkbox{align-self:center}\n", "::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}.mat-dialog-title{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}\n"] }]
|
|
1769
1769
|
}], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
|
|
1770
1770
|
type: Inject,
|
|
1771
1771
|
args: [MAT_DIALOG_DATA]
|
|
@@ -2000,7 +2000,7 @@ class EntityService {
|
|
|
2000
2000
|
for (const key of filePropertyKeys) {
|
|
2001
2001
|
const metadata = EntityUtilities.getPropertyMetadata(entity, key, DecoratorTypes.FILE_DEFAULT);
|
|
2002
2002
|
if (metadata.multiple) {
|
|
2003
|
-
const fileDataValues = body[key];
|
|
2003
|
+
const fileDataValues = body[key] ?? [];
|
|
2004
2004
|
for (const value of fileDataValues) {
|
|
2005
2005
|
formData.append(key, (await FileUtilities.getFileData(value, this.http)).file, value.name);
|
|
2006
2006
|
}
|
|
@@ -2107,7 +2107,7 @@ class EntityService {
|
|
|
2107
2107
|
for (const key of filePropertyKeys) {
|
|
2108
2108
|
const metadata = EntityUtilities.getPropertyMetadata(entity, key, DecoratorTypes.FILE_DEFAULT);
|
|
2109
2109
|
if (metadata.multiple) {
|
|
2110
|
-
const fileDataValues = body[key];
|
|
2110
|
+
const fileDataValues = body[key] ?? [];
|
|
2111
2111
|
for (const value of fileDataValues) {
|
|
2112
2112
|
formData.append(key, (await FileUtilities.getFileData(value, this.http)).file, value.name);
|
|
2113
2113
|
}
|
|
@@ -3860,7 +3860,6 @@ class UUIDUtilities {
|
|
|
3860
3860
|
* - ngOnInit: Gets the metadata for the property, be aware of this when overriding this method.
|
|
3861
3861
|
* - emitChange: Should be called when the input has changed. This is needed to trigger validation and dirty checks.
|
|
3862
3862
|
*/
|
|
3863
|
-
// eslint-disable-next-line angular/prefer-standalone
|
|
3864
3863
|
class NgxMatEntityBaseInputComponent {
|
|
3865
3864
|
/**
|
|
3866
3865
|
* The entity that the property to display as an input comes from.
|
|
@@ -3946,7 +3945,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
|
|
|
3946
3945
|
/**
|
|
3947
3946
|
* The base component needed for all arrays that are displayed as a table.
|
|
3948
3947
|
*/
|
|
3949
|
-
// eslint-disable-next-line angular/prefer-standalone
|
|
3950
3948
|
class ArrayTableComponent extends NgxMatEntityBaseInputComponent {
|
|
3951
3949
|
dialog;
|
|
3952
3950
|
http;
|
|
@@ -4054,7 +4052,7 @@ class ArrayDateInputComponent extends ArrayTableComponent {
|
|
|
4054
4052
|
this.setTableConfig();
|
|
4055
4053
|
}
|
|
4056
4054
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ArrayDateInputComponent, deps: [{ token: i1.MatDialog }, { token: i2$1.HttpClient }, { token: NGX_COMPLETE_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
|
|
4057
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: ArrayDateInputComponent, isStandalone: true, selector: "array-date-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n <div class=\"array-headline\">\n <b>{{metadata.displayName}}</b>\n </div>\n @if (!isReadOnly) {\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n #model=\"ngModel\"\n matInput\n [name]=\"name\"\n [matDatepicker]=\"picker\"\n [required]=\"metadata.required(entity)\"\n [min]=\"metadata.min ? metadata.min(input) : undefined\"\n [max]=\"metadata.max ? metadata.max(input) : undefined\"\n [matDatepickerFilter]=\"metadata.filter ?? DateUtilities.defaultDateFilter\"\n [(ngModel)]=\"input\"\n >\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n \n <div class=\"buttons\">\n <button type=\"button\" mat-raised-button\n [disabled]=\"model.errors\"\n (click)=\"add()\">\n {{metadata.addButtonLabel}}\n </button>\n <button type=\"button\" mat-raised-button\n [disabled]=\"!selected.length\"\n (click)=\"remove()\">\n {{metadata.removeButtonLabel}}\n </button>\n </div>\n }\n\n <custom-table
|
|
4055
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: ArrayDateInputComponent, isStandalone: true, selector: "array-date-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n <div class=\"array-headline\">\n <b>{{metadata.displayName}}</b>\n </div>\n @if (!isReadOnly) {\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n #model=\"ngModel\"\n matInput\n [name]=\"name\"\n [matDatepicker]=\"picker\"\n [required]=\"metadata.required(entity)\"\n [min]=\"metadata.min ? metadata.min(input) : undefined\"\n [max]=\"metadata.max ? metadata.max(input) : undefined\"\n [matDatepickerFilter]=\"metadata.filter ?? DateUtilities.defaultDateFilter\"\n [(ngModel)]=\"input\"\n >\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n \n <div class=\"buttons\">\n <button type=\"button\" mat-raised-button\n [disabled]=\"model.errors\"\n (click)=\"add()\">\n {{metadata.addButtonLabel}}\n </button>\n <button type=\"button\" mat-raised-button\n [disabled]=\"!selected.length\"\n (click)=\"remove()\">\n {{metadata.removeButtonLabel}}\n </button>\n </div>\n }\n\n <!-- eslint-disable-next-line angular/no-any -->\n <custom-table [configuration]=\"tableConfig\" [data]=\"propertyValue\" [required]=\"metadata.required(entity)\" (selectionChanged)=\"selected = $any($event)\">\n </custom-table>\n</div> ", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px;column-gap:24px}.buttons button{flex-grow:1}.elevation-container{border-radius:5px;padding:15px 15px 0;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: CustomTableComponent, selector: "custom-table", inputs: ["data", "searchString", "required", "isLoading", "configuration"], outputs: ["cellClicked", "selectionChanged"] }] });
|
|
4058
4056
|
}
|
|
4059
4057
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ArrayDateInputComponent, decorators: [{
|
|
4060
4058
|
type: Component,
|
|
@@ -4066,7 +4064,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
|
|
|
4066
4064
|
MatInputModule,
|
|
4067
4065
|
MatButtonModule,
|
|
4068
4066
|
CustomTableComponent
|
|
4069
|
-
], template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n <div class=\"array-headline\">\n <b>{{metadata.displayName}}</b>\n </div>\n @if (!isReadOnly) {\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n #model=\"ngModel\"\n matInput\n [name]=\"name\"\n [matDatepicker]=\"picker\"\n [required]=\"metadata.required(entity)\"\n [min]=\"metadata.min ? metadata.min(input) : undefined\"\n [max]=\"metadata.max ? metadata.max(input) : undefined\"\n [matDatepickerFilter]=\"metadata.filter ?? DateUtilities.defaultDateFilter\"\n [(ngModel)]=\"input\"\n >\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n \n <div class=\"buttons\">\n <button type=\"button\" mat-raised-button\n [disabled]=\"model.errors\"\n (click)=\"add()\">\n {{metadata.addButtonLabel}}\n </button>\n <button type=\"button\" mat-raised-button\n [disabled]=\"!selected.length\"\n (click)=\"remove()\">\n {{metadata.removeButtonLabel}}\n </button>\n </div>\n }\n\n <custom-table
|
|
4067
|
+
], template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n <div class=\"array-headline\">\n <b>{{metadata.displayName}}</b>\n </div>\n @if (!isReadOnly) {\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n #model=\"ngModel\"\n matInput\n [name]=\"name\"\n [matDatepicker]=\"picker\"\n [required]=\"metadata.required(entity)\"\n [min]=\"metadata.min ? metadata.min(input) : undefined\"\n [max]=\"metadata.max ? metadata.max(input) : undefined\"\n [matDatepickerFilter]=\"metadata.filter ?? DateUtilities.defaultDateFilter\"\n [(ngModel)]=\"input\"\n >\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n \n <div class=\"buttons\">\n <button type=\"button\" mat-raised-button\n [disabled]=\"model.errors\"\n (click)=\"add()\">\n {{metadata.addButtonLabel}}\n </button>\n <button type=\"button\" mat-raised-button\n [disabled]=\"!selected.length\"\n (click)=\"remove()\">\n {{metadata.removeButtonLabel}}\n </button>\n </div>\n }\n\n <!-- eslint-disable-next-line angular/no-any -->\n <custom-table [configuration]=\"tableConfig\" [data]=\"propertyValue\" [required]=\"metadata.required(entity)\" (selectionChanged)=\"selected = $any($event)\">\n </custom-table>\n</div> ", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px;column-gap:24px}.buttons button{flex-grow:1}.elevation-container{border-radius:5px;padding:15px 15px 0;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}\n"] }]
|
|
4070
4068
|
}], ctorParameters: () => [{ type: i1.MatDialog }, { type: i2$1.HttpClient }, { type: undefined, decorators: [{
|
|
4071
4069
|
type: Inject,
|
|
4072
4070
|
args: [NGX_COMPLETE_GLOBAL_DEFAULT_VALUES]
|
|
@@ -4116,7 +4114,7 @@ class ArrayDateRangeInputComponent extends ArrayTableComponent {
|
|
|
4116
4114
|
this.dateRangeEnd = undefined;
|
|
4117
4115
|
}
|
|
4118
4116
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ArrayDateRangeInputComponent, deps: [{ token: i1.MatDialog }, { token: i2$1.HttpClient }, { token: NGX_COMPLETE_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
|
|
4119
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: ArrayDateRangeInputComponent, isStandalone: true, selector: "array-date-range-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n <div class=\"array-headline\">\n <b>{{metadata.displayName}}</b>\n </div>\n @if (!isReadOnly) {\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n \n <mat-date-range-input [rangePicker]=\"picker\" [required]=\"metadata.required(entity)\" [dateFilter]=\"metadata.filter ? metadata.filter : DateUtilities.defaultDateFilter\">\n <input #startModel=\"ngModel\"\n matStartDate\n [name]=\"name + 'start'\"\n [required]=\"metadata.required(entity)\"\n [min]=\"metadata.minStart ? metadata.minStart(input?.start) : undefined\"\n [max]=\"metadata.maxStart ? metadata.maxStart(input?.start) : undefined\"\n [placeholder]=\"metadata.placeholderStart\"\n [(ngModel)]=\"dateRangeStart\"\n >\n <input #endModel=\"ngModel\"\n matEndDate\n [name]=\"name + 'end'\"\n [required]=\"metadata.required(entity)\"\n [min]=\"metadata.minEnd ? metadata.minEnd(input?.end) : undefined\"\n [max]=\"metadata.maxEnd ? metadata.maxEnd(input?.end) : undefined\"\n [placeholder]=\"metadata.placeholderEnd\"\n [(ngModel)]=\"dateRangeEnd\"\n >\n </mat-date-range-input>\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-date-range-picker #picker></mat-date-range-picker>\n \n @if (startModel.errors) {\n <mat-error>{{getValidationErrorMessage(startModel)}}</mat-error>\n }\n @if (!startModel.errors && endModel.errors) {\n <mat-error>{{getValidationErrorMessage(endModel)}}</mat-error>\n }\n </mat-form-field>\n \n <div class=\"buttons\">\n <button type=\"button\" mat-raised-button\n [disabled]=\"startModel.errors || endModel.errors\"\n (click)=\"add()\">\n {{metadata.addButtonLabel}}\n </button>\n <button type=\"button\" mat-raised-button\n [disabled]=\"!selected.length\"\n (click)=\"remove()\">\n {{metadata.removeButtonLabel}}\n </button>\n </div>\n }\n\n <custom-table
|
|
4117
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: ArrayDateRangeInputComponent, isStandalone: true, selector: "array-date-range-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n <div class=\"array-headline\">\n <b>{{metadata.displayName}}</b>\n </div>\n @if (!isReadOnly) {\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n \n <mat-date-range-input [rangePicker]=\"picker\" [required]=\"metadata.required(entity)\" [dateFilter]=\"metadata.filter ? metadata.filter : DateUtilities.defaultDateFilter\">\n <input #startModel=\"ngModel\"\n matStartDate\n [name]=\"name + 'start'\"\n [required]=\"metadata.required(entity)\"\n [min]=\"metadata.minStart ? metadata.minStart(input?.start) : undefined\"\n [max]=\"metadata.maxStart ? metadata.maxStart(input?.start) : undefined\"\n [placeholder]=\"metadata.placeholderStart\"\n [(ngModel)]=\"dateRangeStart\"\n >\n <input #endModel=\"ngModel\"\n matEndDate\n [name]=\"name + 'end'\"\n [required]=\"metadata.required(entity)\"\n [min]=\"metadata.minEnd ? metadata.minEnd(input?.end) : undefined\"\n [max]=\"metadata.maxEnd ? metadata.maxEnd(input?.end) : undefined\"\n [placeholder]=\"metadata.placeholderEnd\"\n [(ngModel)]=\"dateRangeEnd\"\n >\n </mat-date-range-input>\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-date-range-picker #picker></mat-date-range-picker>\n \n @if (startModel.errors) {\n <mat-error>{{getValidationErrorMessage(startModel)}}</mat-error>\n }\n @if (!startModel.errors && endModel.errors) {\n <mat-error>{{getValidationErrorMessage(endModel)}}</mat-error>\n }\n </mat-form-field>\n \n <div class=\"buttons\">\n <button type=\"button\" mat-raised-button\n [disabled]=\"startModel.errors || endModel.errors\"\n (click)=\"add()\">\n {{metadata.addButtonLabel}}\n </button>\n <button type=\"button\" mat-raised-button\n [disabled]=\"!selected.length\"\n (click)=\"remove()\">\n {{metadata.removeButtonLabel}}\n </button>\n </div>\n }\n\n <!-- eslint-disable-next-line angular/no-any -->\n <custom-table [configuration]=\"tableConfig\" [data]=\"propertyValue\" [required]=\"metadata.required(entity)\" (selectionChanged)=\"selected = $any($event)\">\n </custom-table>\n</div>", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px;column-gap:24px}.buttons button{flex-grow:1}.elevation-container{border-radius:5px;padding:15px 15px 0;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: CustomTableComponent, selector: "custom-table", inputs: ["data", "searchString", "required", "isLoading", "configuration"], outputs: ["cellClicked", "selectionChanged"] }] });
|
|
4120
4118
|
}
|
|
4121
4119
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ArrayDateRangeInputComponent, decorators: [{
|
|
4122
4120
|
type: Component,
|
|
@@ -4127,7 +4125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
|
|
|
4127
4125
|
FormsModule,
|
|
4128
4126
|
MatButtonModule,
|
|
4129
4127
|
CustomTableComponent
|
|
4130
|
-
], template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n <div class=\"array-headline\">\n <b>{{metadata.displayName}}</b>\n </div>\n @if (!isReadOnly) {\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n \n <mat-date-range-input [rangePicker]=\"picker\" [required]=\"metadata.required(entity)\" [dateFilter]=\"metadata.filter ? metadata.filter : DateUtilities.defaultDateFilter\">\n <input #startModel=\"ngModel\"\n matStartDate\n [name]=\"name + 'start'\"\n [required]=\"metadata.required(entity)\"\n [min]=\"metadata.minStart ? metadata.minStart(input?.start) : undefined\"\n [max]=\"metadata.maxStart ? metadata.maxStart(input?.start) : undefined\"\n [placeholder]=\"metadata.placeholderStart\"\n [(ngModel)]=\"dateRangeStart\"\n >\n <input #endModel=\"ngModel\"\n matEndDate\n [name]=\"name + 'end'\"\n [required]=\"metadata.required(entity)\"\n [min]=\"metadata.minEnd ? metadata.minEnd(input?.end) : undefined\"\n [max]=\"metadata.maxEnd ? metadata.maxEnd(input?.end) : undefined\"\n [placeholder]=\"metadata.placeholderEnd\"\n [(ngModel)]=\"dateRangeEnd\"\n >\n </mat-date-range-input>\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-date-range-picker #picker></mat-date-range-picker>\n \n @if (startModel.errors) {\n <mat-error>{{getValidationErrorMessage(startModel)}}</mat-error>\n }\n @if (!startModel.errors && endModel.errors) {\n <mat-error>{{getValidationErrorMessage(endModel)}}</mat-error>\n }\n </mat-form-field>\n \n <div class=\"buttons\">\n <button type=\"button\" mat-raised-button\n [disabled]=\"startModel.errors || endModel.errors\"\n (click)=\"add()\">\n {{metadata.addButtonLabel}}\n </button>\n <button type=\"button\" mat-raised-button\n [disabled]=\"!selected.length\"\n (click)=\"remove()\">\n {{metadata.removeButtonLabel}}\n </button>\n </div>\n }\n\n <custom-table
|
|
4128
|
+
], template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n <div class=\"array-headline\">\n <b>{{metadata.displayName}}</b>\n </div>\n @if (!isReadOnly) {\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n \n <mat-date-range-input [rangePicker]=\"picker\" [required]=\"metadata.required(entity)\" [dateFilter]=\"metadata.filter ? metadata.filter : DateUtilities.defaultDateFilter\">\n <input #startModel=\"ngModel\"\n matStartDate\n [name]=\"name + 'start'\"\n [required]=\"metadata.required(entity)\"\n [min]=\"metadata.minStart ? metadata.minStart(input?.start) : undefined\"\n [max]=\"metadata.maxStart ? metadata.maxStart(input?.start) : undefined\"\n [placeholder]=\"metadata.placeholderStart\"\n [(ngModel)]=\"dateRangeStart\"\n >\n <input #endModel=\"ngModel\"\n matEndDate\n [name]=\"name + 'end'\"\n [required]=\"metadata.required(entity)\"\n [min]=\"metadata.minEnd ? metadata.minEnd(input?.end) : undefined\"\n [max]=\"metadata.maxEnd ? metadata.maxEnd(input?.end) : undefined\"\n [placeholder]=\"metadata.placeholderEnd\"\n [(ngModel)]=\"dateRangeEnd\"\n >\n </mat-date-range-input>\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-date-range-picker #picker></mat-date-range-picker>\n \n @if (startModel.errors) {\n <mat-error>{{getValidationErrorMessage(startModel)}}</mat-error>\n }\n @if (!startModel.errors && endModel.errors) {\n <mat-error>{{getValidationErrorMessage(endModel)}}</mat-error>\n }\n </mat-form-field>\n \n <div class=\"buttons\">\n <button type=\"button\" mat-raised-button\n [disabled]=\"startModel.errors || endModel.errors\"\n (click)=\"add()\">\n {{metadata.addButtonLabel}}\n </button>\n <button type=\"button\" mat-raised-button\n [disabled]=\"!selected.length\"\n (click)=\"remove()\">\n {{metadata.removeButtonLabel}}\n </button>\n </div>\n }\n\n <!-- eslint-disable-next-line angular/no-any -->\n <custom-table [configuration]=\"tableConfig\" [data]=\"propertyValue\" [required]=\"metadata.required(entity)\" (selectionChanged)=\"selected = $any($event)\">\n </custom-table>\n</div>", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px;column-gap:24px}.buttons button{flex-grow:1}.elevation-container{border-radius:5px;padding:15px 15px 0;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}\n"] }]
|
|
4131
4129
|
}], ctorParameters: () => [{ type: i1.MatDialog }, { type: i2$1.HttpClient }, { type: undefined, decorators: [{
|
|
4132
4130
|
type: Inject,
|
|
4133
4131
|
args: [NGX_COMPLETE_GLOBAL_DEFAULT_VALUES]
|
|
@@ -4170,7 +4168,7 @@ class ArrayDateTimeInputComponent extends ArrayTableComponent {
|
|
|
4170
4168
|
}
|
|
4171
4169
|
}
|
|
4172
4170
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ArrayDateTimeInputComponent, deps: [{ token: i1.MatDialog }, { token: i2$1.HttpClient }, { token: NGX_COMPLETE_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
|
|
4173
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: ArrayDateTimeInputComponent, isStandalone: true, selector: "array-date-time-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n <div class=\"array-headline\">\n <b>{{metadata.displayName}}</b>\n </div>\n @if (!isReadOnly) {\n <div class=\"date-time\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n #model=\"ngModel\"\n matInput\n [name]=\"name\"\n [matDatepicker]=\"picker\"\n [required]=\"metadata.required(entity)\"\n [min]=\"metadata.minDate ? metadata.minDate(input) : undefined\"\n [max]=\"metadata.maxDate ? metadata.maxDate(input) : undefined\"\n [matDatepickerFilter]=\"metadata.filterDate ?? DateUtilities.defaultDateFilter\"\n [(ngModel)]=\"input\"\n >\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n <mat-form-field class=\"timepicker\">\n <mat-label>{{metadata.timeDisplayName}}</mat-label>\n <mat-select\n #timeModel=\"ngModel\"\n [name]=\"name + 'time'\"\n [required]=\"metadata.required(entity)\"\n [(ngModel)]=\"time\"\n >\n @for (validTime of DateUtilities.getValidTimesForDropdown(metadata.times, input, metadata.minTime, metadata.maxTime, metadata.filterTime); track $index) {\n <mat-option [value]=\"validTime.value\">{{validTime.displayName}}</mat-option>\n }\n \n </mat-select>\n <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n </mat-form-field>\n </div>\n <div class=\"buttons\">\n <button type=\"button\" mat-raised-button\n [disabled]=\"model.errors || timeModel.errors || DateUtilities.timeIsUnprocessable(time)\"\n (click)=\"addDateTime()\">\n {{metadata.addButtonLabel}}\n </button>\n <button type=\"button\" mat-raised-button\n [disabled]=\"!selected.length\"\n (click)=\"remove()\">\n {{metadata.removeButtonLabel}}\n </button>\n </div>\n }\n\n <custom-table
|
|
4171
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: ArrayDateTimeInputComponent, isStandalone: true, selector: "array-date-time-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n <div class=\"array-headline\">\n <b>{{metadata.displayName}}</b>\n </div>\n @if (!isReadOnly) {\n <div class=\"date-time\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n #model=\"ngModel\"\n matInput\n [name]=\"name\"\n [matDatepicker]=\"picker\"\n [required]=\"metadata.required(entity)\"\n [min]=\"metadata.minDate ? metadata.minDate(input) : undefined\"\n [max]=\"metadata.maxDate ? metadata.maxDate(input) : undefined\"\n [matDatepickerFilter]=\"metadata.filterDate ?? DateUtilities.defaultDateFilter\"\n [(ngModel)]=\"input\"\n >\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n <mat-form-field class=\"timepicker\">\n <mat-label>{{metadata.timeDisplayName}}</mat-label>\n <mat-select\n #timeModel=\"ngModel\"\n [name]=\"name + 'time'\"\n [required]=\"metadata.required(entity)\"\n [(ngModel)]=\"time\"\n >\n @for (validTime of DateUtilities.getValidTimesForDropdown(metadata.times, input, metadata.minTime, metadata.maxTime, metadata.filterTime); track $index) {\n <mat-option [value]=\"validTime.value\">{{validTime.displayName}}</mat-option>\n }\n \n </mat-select>\n <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n </mat-form-field>\n </div>\n <div class=\"buttons\">\n <button type=\"button\" mat-raised-button\n [disabled]=\"model.errors || timeModel.errors || DateUtilities.timeIsUnprocessable(time)\"\n (click)=\"addDateTime()\">\n {{metadata.addButtonLabel}}\n </button>\n <button type=\"button\" mat-raised-button\n [disabled]=\"!selected.length\"\n (click)=\"remove()\">\n {{metadata.removeButtonLabel}}\n </button>\n </div>\n }\n\n <!-- eslint-disable-next-line angular/no-any -->\n <custom-table [configuration]=\"tableConfig\" [data]=\"propertyValue\" [required]=\"metadata.required(entity)\" (selectionChanged)=\"selected = $any($event)\">\n </custom-table>\n</div>", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px;column-gap:24px}.buttons button{flex-grow:1}.elevation-container{border-radius:5px;padding:15px 15px 0;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}.date-time{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$3.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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: CustomTableComponent, selector: "custom-table", inputs: ["data", "searchString", "required", "isLoading", "configuration"], outputs: ["cellClicked", "selectionChanged"] }] });
|
|
4174
4172
|
}
|
|
4175
4173
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ArrayDateTimeInputComponent, decorators: [{
|
|
4176
4174
|
type: Component,
|
|
@@ -4183,7 +4181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
|
|
|
4183
4181
|
MatInputModule,
|
|
4184
4182
|
MatButtonModule,
|
|
4185
4183
|
CustomTableComponent
|
|
4186
|
-
], template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n <div class=\"array-headline\">\n <b>{{metadata.displayName}}</b>\n </div>\n @if (!isReadOnly) {\n <div class=\"date-time\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n #model=\"ngModel\"\n matInput\n [name]=\"name\"\n [matDatepicker]=\"picker\"\n [required]=\"metadata.required(entity)\"\n [min]=\"metadata.minDate ? metadata.minDate(input) : undefined\"\n [max]=\"metadata.maxDate ? metadata.maxDate(input) : undefined\"\n [matDatepickerFilter]=\"metadata.filterDate ?? DateUtilities.defaultDateFilter\"\n [(ngModel)]=\"input\"\n >\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n <mat-form-field class=\"timepicker\">\n <mat-label>{{metadata.timeDisplayName}}</mat-label>\n <mat-select\n #timeModel=\"ngModel\"\n [name]=\"name + 'time'\"\n [required]=\"metadata.required(entity)\"\n [(ngModel)]=\"time\"\n >\n @for (validTime of DateUtilities.getValidTimesForDropdown(metadata.times, input, metadata.minTime, metadata.maxTime, metadata.filterTime); track $index) {\n <mat-option [value]=\"validTime.value\">{{validTime.displayName}}</mat-option>\n }\n \n </mat-select>\n <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n </mat-form-field>\n </div>\n <div class=\"buttons\">\n <button type=\"button\" mat-raised-button\n [disabled]=\"model.errors || timeModel.errors || DateUtilities.timeIsUnprocessable(time)\"\n (click)=\"addDateTime()\">\n {{metadata.addButtonLabel}}\n </button>\n <button type=\"button\" mat-raised-button\n [disabled]=\"!selected.length\"\n (click)=\"remove()\">\n {{metadata.removeButtonLabel}}\n </button>\n </div>\n }\n\n <custom-table
|
|
4184
|
+
], template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n <div class=\"array-headline\">\n <b>{{metadata.displayName}}</b>\n </div>\n @if (!isReadOnly) {\n <div class=\"date-time\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n #model=\"ngModel\"\n matInput\n [name]=\"name\"\n [matDatepicker]=\"picker\"\n [required]=\"metadata.required(entity)\"\n [min]=\"metadata.minDate ? metadata.minDate(input) : undefined\"\n [max]=\"metadata.maxDate ? metadata.maxDate(input) : undefined\"\n [matDatepickerFilter]=\"metadata.filterDate ?? DateUtilities.defaultDateFilter\"\n [(ngModel)]=\"input\"\n >\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n <mat-form-field class=\"timepicker\">\n <mat-label>{{metadata.timeDisplayName}}</mat-label>\n <mat-select\n #timeModel=\"ngModel\"\n [name]=\"name + 'time'\"\n [required]=\"metadata.required(entity)\"\n [(ngModel)]=\"time\"\n >\n @for (validTime of DateUtilities.getValidTimesForDropdown(metadata.times, input, metadata.minTime, metadata.maxTime, metadata.filterTime); track $index) {\n <mat-option [value]=\"validTime.value\">{{validTime.displayName}}</mat-option>\n }\n \n </mat-select>\n <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n </mat-form-field>\n </div>\n <div class=\"buttons\">\n <button type=\"button\" mat-raised-button\n [disabled]=\"model.errors || timeModel.errors || DateUtilities.timeIsUnprocessable(time)\"\n (click)=\"addDateTime()\">\n {{metadata.addButtonLabel}}\n </button>\n <button type=\"button\" mat-raised-button\n [disabled]=\"!selected.length\"\n (click)=\"remove()\">\n {{metadata.removeButtonLabel}}\n </button>\n </div>\n }\n\n <!-- eslint-disable-next-line angular/no-any -->\n <custom-table [configuration]=\"tableConfig\" [data]=\"propertyValue\" [required]=\"metadata.required(entity)\" (selectionChanged)=\"selected = $any($event)\">\n </custom-table>\n</div>", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px;column-gap:24px}.buttons button{flex-grow:1}.elevation-container{border-radius:5px;padding:15px 15px 0;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}.date-time{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px}\n"] }]
|
|
4187
4185
|
}], ctorParameters: () => [{ type: i1.MatDialog }, { type: i2$1.HttpClient }, { type: undefined, decorators: [{
|
|
4188
4186
|
type: Inject,
|
|
4189
4187
|
args: [NGX_COMPLETE_GLOBAL_DEFAULT_VALUES]
|
|
@@ -4212,8 +4210,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
|
|
|
4212
4210
|
type: Directive,
|
|
4213
4211
|
args: [{
|
|
4214
4212
|
selector: '[includedIn]',
|
|
4215
|
-
|
|
4216
|
-
|
|
4213
|
+
standalone: true,
|
|
4214
|
+
providers: [{ provide: NG_VALIDATORS, useExisting: IncludedInValidatorDirective, multi: true }]
|
|
4217
4215
|
}]
|
|
4218
4216
|
}], propDecorators: { includedIn: [{
|
|
4219
4217
|
type: Input
|
|
@@ -4653,6 +4651,10 @@ class DateTimeInputComponent extends NgxMatEntityBaseInputComponent {
|
|
|
4653
4651
|
globalConfig;
|
|
4654
4652
|
DateUtilities = DateUtilities;
|
|
4655
4653
|
timeDropdownValues;
|
|
4654
|
+
get timeIncludedInDropdownValues() {
|
|
4655
|
+
return DateUtilities.getValidTimesForDropdown(this.metadata.times, this.propertyValue, this.metadata.minTime, this.metadata.maxTime, this.metadata.filterTime).map(t => t.value)
|
|
4656
|
+
.includes(this.time);
|
|
4657
|
+
}
|
|
4656
4658
|
get time() {
|
|
4657
4659
|
return ReflectUtilities.getMetadata(EntityUtilities.TIME_KEY, this.entity, this.key);
|
|
4658
4660
|
}
|
|
@@ -4700,7 +4702,7 @@ class DateTimeInputComponent extends NgxMatEntityBaseInputComponent {
|
|
|
4700
4702
|
this.emitChange();
|
|
4701
4703
|
}
|
|
4702
4704
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DateTimeInputComponent, deps: [{ token: NGX_COMPLETE_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
|
|
4703
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: DateTimeInputComponent, isStandalone: true, selector: "date-time-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"date-time\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n #model=\"ngModel\"\n matInput\n [name]=\"name\"\n [matDatepicker]=\"picker\"\n [required]=\"metadata.required(entity)\"\n [min]=\"metadata.minDate ? metadata.minDate(propertyValue) : undefined\"\n [max]=\"metadata.maxDate ? metadata.maxDate(propertyValue) : undefined\"\n [matDatepickerFilter]=\"metadata.filterDate ?? defaultDateFilter\"\n [disabled]=\"isReadOnly\"\n [(ngModel)]=\"propertyValue\"\n (dateChange)=\"setTime()\"\n >\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n <mat-form-field class=\"timepicker\">\n <mat-label>{{metadata.timeDisplayName}}</mat-label>\n <mat-select\n #timeModel=\"ngModel\"\n [name]=\"name + 'time'\"\n [required]=\"metadata.required(entity)\"\n [compareWith]=\"compareTimes\"\n [disabled]=\"isReadOnly\"\n [(ngModel)]=\"time\"\n (selectionChange)=\"setTime()\"\n >\n @for (validTime of DateUtilities.getValidTimesForDropdown(metadata.times, propertyValue, metadata.minTime, metadata.maxTime, metadata.filterTime); track $index) {\n <mat-option [value]=\"validTime.value\">{{validTime.displayName}}</mat-option>\n }\n </mat-select>\n <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n </mat-form-field>\n</div>", styles: ["mat-form-field{width:100%}.date-time{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$3.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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: CommonModule }] });
|
|
4705
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: DateTimeInputComponent, isStandalone: true, selector: "date-time-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"date-time\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n #model=\"ngModel\"\n matInput\n [name]=\"name\"\n [matDatepicker]=\"picker\"\n [required]=\"metadata.required(entity)\"\n [min]=\"metadata.minDate ? metadata.minDate(propertyValue) : undefined\"\n [max]=\"metadata.maxDate ? metadata.maxDate(propertyValue) : undefined\"\n [matDatepickerFilter]=\"metadata.filterDate ?? defaultDateFilter\"\n [disabled]=\"isReadOnly\"\n [(ngModel)]=\"propertyValue\"\n (dateChange)=\"setTime()\"\n >\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n <mat-form-field class=\"timepicker\">\n <mat-label>{{metadata.timeDisplayName}}</mat-label>\n <mat-select\n #timeModel=\"ngModel\"\n [name]=\"name + 'time'\"\n [required]=\"metadata.required(entity)\"\n [compareWith]=\"compareTimes\"\n [disabled]=\"isReadOnly\"\n [(ngModel)]=\"time\"\n (selectionChange)=\"setTime()\"\n >\n @for (validTime of DateUtilities.getValidTimesForDropdown(metadata.times, propertyValue, metadata.minTime, metadata.maxTime, metadata.filterTime); track $index) {\n <mat-option [value]=\"validTime.value\">{{validTime.displayName}}</mat-option>\n }\n @if (time && !timeIncludedInDropdownValues) {\n <mat-option [value]=\"time\">{{time}}</mat-option>\n }\n </mat-select>\n <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n </mat-form-field>\n</div>", styles: ["mat-form-field{width:100%}.date-time{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$3.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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: CommonModule }] });
|
|
4704
4706
|
}
|
|
4705
4707
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DateTimeInputComponent, decorators: [{
|
|
4706
4708
|
type: Component,
|
|
@@ -4711,7 +4713,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
|
|
|
4711
4713
|
FormsModule,
|
|
4712
4714
|
MatSelectModule,
|
|
4713
4715
|
CommonModule
|
|
4714
|
-
], template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"date-time\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n #model=\"ngModel\"\n matInput\n [name]=\"name\"\n [matDatepicker]=\"picker\"\n [required]=\"metadata.required(entity)\"\n [min]=\"metadata.minDate ? metadata.minDate(propertyValue) : undefined\"\n [max]=\"metadata.maxDate ? metadata.maxDate(propertyValue) : undefined\"\n [matDatepickerFilter]=\"metadata.filterDate ?? defaultDateFilter\"\n [disabled]=\"isReadOnly\"\n [(ngModel)]=\"propertyValue\"\n (dateChange)=\"setTime()\"\n >\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n <mat-form-field class=\"timepicker\">\n <mat-label>{{metadata.timeDisplayName}}</mat-label>\n <mat-select\n #timeModel=\"ngModel\"\n [name]=\"name + 'time'\"\n [required]=\"metadata.required(entity)\"\n [compareWith]=\"compareTimes\"\n [disabled]=\"isReadOnly\"\n [(ngModel)]=\"time\"\n (selectionChange)=\"setTime()\"\n >\n @for (validTime of DateUtilities.getValidTimesForDropdown(metadata.times, propertyValue, metadata.minTime, metadata.maxTime, metadata.filterTime); track $index) {\n <mat-option [value]=\"validTime.value\">{{validTime.displayName}}</mat-option>\n }\n </mat-select>\n <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n </mat-form-field>\n</div>", styles: ["mat-form-field{width:100%}.date-time{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px}\n"] }]
|
|
4716
|
+
], template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"date-time\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n #model=\"ngModel\"\n matInput\n [name]=\"name\"\n [matDatepicker]=\"picker\"\n [required]=\"metadata.required(entity)\"\n [min]=\"metadata.minDate ? metadata.minDate(propertyValue) : undefined\"\n [max]=\"metadata.maxDate ? metadata.maxDate(propertyValue) : undefined\"\n [matDatepickerFilter]=\"metadata.filterDate ?? defaultDateFilter\"\n [disabled]=\"isReadOnly\"\n [(ngModel)]=\"propertyValue\"\n (dateChange)=\"setTime()\"\n >\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n <mat-form-field class=\"timepicker\">\n <mat-label>{{metadata.timeDisplayName}}</mat-label>\n <mat-select\n #timeModel=\"ngModel\"\n [name]=\"name + 'time'\"\n [required]=\"metadata.required(entity)\"\n [compareWith]=\"compareTimes\"\n [disabled]=\"isReadOnly\"\n [(ngModel)]=\"time\"\n (selectionChange)=\"setTime()\"\n >\n @for (validTime of DateUtilities.getValidTimesForDropdown(metadata.times, propertyValue, metadata.minTime, metadata.maxTime, metadata.filterTime); track $index) {\n <mat-option [value]=\"validTime.value\">{{validTime.displayName}}</mat-option>\n }\n @if (time && !timeIncludedInDropdownValues) {\n <mat-option [value]=\"time\">{{time}}</mat-option>\n }\n </mat-select>\n <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n </mat-form-field>\n</div>", styles: ["mat-form-field{width:100%}.date-time{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px}\n"] }]
|
|
4715
4717
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4716
4718
|
type: Inject,
|
|
4717
4719
|
args: [NGX_COMPLETE_GLOBAL_DEFAULT_VALUES]
|
|
@@ -5081,11 +5083,11 @@ class FileImageInputComponent extends NgxMatEntityBaseInputComponent {
|
|
|
5081
5083
|
this.imageIndex = index;
|
|
5082
5084
|
}
|
|
5083
5085
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: FileImageInputComponent, deps: [{ token: i2$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
|
|
5084
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: FileImageInputComponent, isStandalone: true, selector: "file-image-input", usesInheritance: true, ngImport: i0, template: " \n<!-- eslint-disable angular/prefer-ngsrc -->\n<!-- eslint-disable angular/alt-text -->\n \n@if (!metadata.dragAndDrop && !metadata.preview) {\n <file-input\n [propertyValue]=\"propertyValue\"\n [metadata]=\"metadata\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n [isReadOnly]=\"isReadOnly\"\n [entity]=\"entity\"\n [key]=\"key\"\n (fileDataChangeEvent)=\"refreshFileData($event)\"\n >\n </file-input>\n}\n \n@if (metadata.dragAndDrop || metadata.preview) {\n <div class=\"file-input mat-elevation-z8\">\n <file-input\n [propertyValue]=\"propertyValue\"\n [metadata]=\"metadata\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n [isReadOnly]=\"isReadOnly\"\n [entity]=\"entity\"\n [key]=\"key\"\n (fileDataChangeEvent)=\"refreshFileData($event)\"\n >\n </file-input>\n\n @if (metadata.preview) {\n @if (metadata.multiple) {\n <div class=\"image-preview\">\n @if (multiPreviewImages?.[imageIndex]) {\n <img class=\"mat-elevation-z2\" [src]=\"multiPreviewImages?.[imageIndex]\">\n }\n @else {\n <img class=\"mat-elevation-z2\" [src]=\"metadata.previewPlaceholderUrl ?? placeHolder\">\n }\n </div>\n \n <div class=\"preview-nav\">\n <fa-icon class=\"left-button\" [icon]=\"faAngleLeft\" [class.disabled]=\"imageIndex === 0\" (click)=\"prev()\"></fa-icon>\n @if (\n multiPreviewImages\n && multiPreviewImages[imageIndex-4]\n && imageIndex === (multiPreviewImages.length - 1)\n ) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex-4)\">\n <div class=\"image-index\">{{imageIndex - 3}}</div>\n </div>\n }\n @if (\n multiPreviewImages\n && multiPreviewImages[imageIndex-3]\n && (\n imageIndex === (multiPreviewImages.length - 2)\n || imageIndex === (multiPreviewImages.length - 1)\n )\n ) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex-3)\">\n <div class=\"image-index\">{{imageIndex - 2}}</div>\n </div>\n }\n @if (multiPreviewImages?.[imageIndex-2]) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex-2)\">\n <div class=\"image-index\">{{imageIndex - 1}}</div>\n </div>\n }\n @if (multiPreviewImages?.[imageIndex-1]) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex-1)\">\n <div class=\"image-index\">{{imageIndex}}</div>\n </div>\n } \n <div class=\"dot selected disabled\">\n <div class=\"image-index\">{{imageIndex + 1}}</div>\n </div>\n @if (multiPreviewImages?.[imageIndex+1]) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex+1)\">\n <div class=\"image-index\">{{imageIndex + 2}}</div>\n </div>\n }\n @if (multiPreviewImages?.[imageIndex+2]) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex+2)\">\n <div class=\"image-index\">{{imageIndex + 3}}</div>\n </div>\n }\n @if (multiPreviewImages?.[imageIndex+3] && imageIndex <= 1) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex+3)\">\n <div class=\"image-index\">{{imageIndex + 4}}</div>\n </div>\n }\n @if (multiPreviewImages?.[imageIndex+4] && imageIndex === 0) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex+4)\">\n <div class=\"image-index\">{{imageIndex + 5}}</div>\n </div>\n }\n <fa-icon class=\"right-button\" [icon]=\"faAngleRight\" [class.disabled]=\"!multiPreviewImages || !multiPreviewImages.length || imageIndex === (multiPreviewImages.length - 1)\" (click)=\"next()\"></fa-icon>\n </div>\n }\n @else {\n <div class=\"image-preview\">\n <img class=\"mat-elevation-z2\" [src]=\"singlePreviewImage ?? metadata.previewPlaceholderUrl ?? placeHolder\">\n </div>\n }\n }\n </div>\n}", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}.image-preview{height:250px;display:flex;align-items:center;padding-top:15px;padding-bottom:15px}.image-preview img{max-width:100%;max-height:100%;margin-left:auto;margin-right:auto;border-radius:3px}.preview-nav{display:flex;align-items:center;justify-content:center;column-gap:5px}.preview-nav .left-button,.preview-nav .right-button{font-size:30px;color:#00000061}.preview-nav .left-button:hover,.preview-nav .right-button:hover{color:#0000008a;cursor:pointer;transition:all .3s ease}.preview-nav .left-button.disabled,.preview-nav .right-button.disabled{color:#00000042}.preview-nav .left-button.disabled:hover,.preview-nav .right-button.disabled:hover{color:#00000042;transition:none;cursor:default}.preview-nav .dot{display:flex;align-items:center;justify-content:center;height:30px;width:30px;min-width:30px;background-color:#00000061;border-radius:50%}.preview-nav .dot .image-index{color:#fff;font-size:24px;font-weight:600}.preview-nav .dot.selected{background-color:#0000008a}.preview-nav .dot:hover{background-color:#0000008a;cursor:pointer;transition:all .3s ease}.preview-nav .dot.disabled:hover{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FileInputComponent, selector: "file-input", inputs: ["propertyValue", "entity", "key", "metadata", "getValidationErrorMessage", "isReadOnly"], outputs: ["fileDataChangeEvent"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
|
|
5086
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: FileImageInputComponent, isStandalone: true, selector: "file-image-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/cyclomatic-complexity -->\n \n<!-- eslint-disable angular/prefer-ngsrc -->\n<!-- eslint-disable angular/alt-text -->\n \n@if (!metadata.dragAndDrop && !metadata.preview) {\n <file-input\n [propertyValue]=\"propertyValue\"\n [metadata]=\"metadata\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n [isReadOnly]=\"isReadOnly\"\n [entity]=\"entity\"\n [key]=\"key\"\n (fileDataChangeEvent)=\"refreshFileData($event)\"\n >\n </file-input>\n}\n \n@if (metadata.dragAndDrop || metadata.preview) {\n <div class=\"file-input mat-elevation-z8\">\n <file-input\n [propertyValue]=\"propertyValue\"\n [metadata]=\"metadata\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n [isReadOnly]=\"isReadOnly\"\n [entity]=\"entity\"\n [key]=\"key\"\n (fileDataChangeEvent)=\"refreshFileData($event)\"\n >\n </file-input>\n\n @if (metadata.preview) {\n @if (metadata.multiple) {\n <div class=\"image-preview\">\n @if (multiPreviewImages?.[imageIndex]) {\n <img class=\"mat-elevation-z2\" [src]=\"multiPreviewImages?.[imageIndex]\">\n }\n @else {\n <img class=\"mat-elevation-z2\" [src]=\"metadata.previewPlaceholderUrl ?? placeHolder\">\n }\n </div>\n \n <div class=\"preview-nav\">\n <fa-icon class=\"left-button\" [icon]=\"faAngleLeft\" [class.disabled]=\"imageIndex === 0\" (click)=\"prev()\"></fa-icon>\n @if (\n multiPreviewImages\n && multiPreviewImages[imageIndex-4]\n && imageIndex === (multiPreviewImages.length - 1)\n ) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex-4)\">\n <div class=\"image-index\">{{imageIndex - 3}}</div>\n </div>\n }\n @if (\n multiPreviewImages\n && multiPreviewImages[imageIndex-3]\n && (\n imageIndex === (multiPreviewImages.length - 2)\n || imageIndex === (multiPreviewImages.length - 1)\n )\n ) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex-3)\">\n <div class=\"image-index\">{{imageIndex - 2}}</div>\n </div>\n }\n @if (multiPreviewImages?.[imageIndex-2]) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex-2)\">\n <div class=\"image-index\">{{imageIndex - 1}}</div>\n </div>\n }\n @if (multiPreviewImages?.[imageIndex-1]) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex-1)\">\n <div class=\"image-index\">{{imageIndex}}</div>\n </div>\n } \n <div class=\"dot selected disabled\">\n <div class=\"image-index\">{{imageIndex + 1}}</div>\n </div>\n @if (multiPreviewImages?.[imageIndex+1]) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex+1)\">\n <div class=\"image-index\">{{imageIndex + 2}}</div>\n </div>\n }\n @if (multiPreviewImages?.[imageIndex+2]) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex+2)\">\n <div class=\"image-index\">{{imageIndex + 3}}</div>\n </div>\n }\n @if (multiPreviewImages?.[imageIndex+3] && imageIndex <= 1) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex+3)\">\n <div class=\"image-index\">{{imageIndex + 4}}</div>\n </div>\n }\n @if (multiPreviewImages?.[imageIndex+4] && imageIndex === 0) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex+4)\">\n <div class=\"image-index\">{{imageIndex + 5}}</div>\n </div>\n }\n <fa-icon class=\"right-button\" [icon]=\"faAngleRight\" [class.disabled]=\"!multiPreviewImages || !multiPreviewImages.length || imageIndex === (multiPreviewImages.length - 1)\" (click)=\"next()\"></fa-icon>\n </div>\n }\n @else {\n <div class=\"image-preview\">\n <img class=\"mat-elevation-z2\" [src]=\"singlePreviewImage ?? metadata.previewPlaceholderUrl ?? placeHolder\">\n </div>\n }\n }\n </div>\n}", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}.image-preview{height:250px;display:flex;align-items:center;padding-top:15px;padding-bottom:15px}.image-preview img{max-width:100%;max-height:100%;margin-left:auto;margin-right:auto;border-radius:3px}.preview-nav{display:flex;align-items:center;justify-content:center;column-gap:5px}.preview-nav .left-button,.preview-nav .right-button{font-size:30px;color:#00000061}.preview-nav .left-button:hover,.preview-nav .right-button:hover{color:#0000008a;cursor:pointer;transition:all .3s ease}.preview-nav .left-button.disabled,.preview-nav .right-button.disabled{color:#00000042}.preview-nav .left-button.disabled:hover,.preview-nav .right-button.disabled:hover{color:#00000042;transition:none;cursor:default}.preview-nav .dot{display:flex;align-items:center;justify-content:center;height:30px;width:30px;min-width:30px;background-color:#00000061;border-radius:50%}.preview-nav .dot .image-index{color:#fff;font-size:24px;font-weight:600}.preview-nav .dot.selected{background-color:#0000008a}.preview-nav .dot:hover{background-color:#0000008a;cursor:pointer;transition:all .3s ease}.preview-nav .dot.disabled:hover{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FileInputComponent, selector: "file-input", inputs: ["propertyValue", "entity", "key", "metadata", "getValidationErrorMessage", "isReadOnly"], outputs: ["fileDataChangeEvent"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
|
|
5085
5087
|
}
|
|
5086
5088
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: FileImageInputComponent, decorators: [{
|
|
5087
5089
|
type: Component,
|
|
5088
|
-
args: [{ selector: 'file-image-input', standalone: true, imports: [CommonModule, FileInputComponent, FaIconComponent], template: " \n<!-- eslint-disable angular/prefer-ngsrc -->\n<!-- eslint-disable angular/alt-text -->\n \n@if (!metadata.dragAndDrop && !metadata.preview) {\n <file-input\n [propertyValue]=\"propertyValue\"\n [metadata]=\"metadata\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n [isReadOnly]=\"isReadOnly\"\n [entity]=\"entity\"\n [key]=\"key\"\n (fileDataChangeEvent)=\"refreshFileData($event)\"\n >\n </file-input>\n}\n \n@if (metadata.dragAndDrop || metadata.preview) {\n <div class=\"file-input mat-elevation-z8\">\n <file-input\n [propertyValue]=\"propertyValue\"\n [metadata]=\"metadata\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n [isReadOnly]=\"isReadOnly\"\n [entity]=\"entity\"\n [key]=\"key\"\n (fileDataChangeEvent)=\"refreshFileData($event)\"\n >\n </file-input>\n\n @if (metadata.preview) {\n @if (metadata.multiple) {\n <div class=\"image-preview\">\n @if (multiPreviewImages?.[imageIndex]) {\n <img class=\"mat-elevation-z2\" [src]=\"multiPreviewImages?.[imageIndex]\">\n }\n @else {\n <img class=\"mat-elevation-z2\" [src]=\"metadata.previewPlaceholderUrl ?? placeHolder\">\n }\n </div>\n \n <div class=\"preview-nav\">\n <fa-icon class=\"left-button\" [icon]=\"faAngleLeft\" [class.disabled]=\"imageIndex === 0\" (click)=\"prev()\"></fa-icon>\n @if (\n multiPreviewImages\n && multiPreviewImages[imageIndex-4]\n && imageIndex === (multiPreviewImages.length - 1)\n ) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex-4)\">\n <div class=\"image-index\">{{imageIndex - 3}}</div>\n </div>\n }\n @if (\n multiPreviewImages\n && multiPreviewImages[imageIndex-3]\n && (\n imageIndex === (multiPreviewImages.length - 2)\n || imageIndex === (multiPreviewImages.length - 1)\n )\n ) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex-3)\">\n <div class=\"image-index\">{{imageIndex - 2}}</div>\n </div>\n }\n @if (multiPreviewImages?.[imageIndex-2]) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex-2)\">\n <div class=\"image-index\">{{imageIndex - 1}}</div>\n </div>\n }\n @if (multiPreviewImages?.[imageIndex-1]) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex-1)\">\n <div class=\"image-index\">{{imageIndex}}</div>\n </div>\n } \n <div class=\"dot selected disabled\">\n <div class=\"image-index\">{{imageIndex + 1}}</div>\n </div>\n @if (multiPreviewImages?.[imageIndex+1]) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex+1)\">\n <div class=\"image-index\">{{imageIndex + 2}}</div>\n </div>\n }\n @if (multiPreviewImages?.[imageIndex+2]) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex+2)\">\n <div class=\"image-index\">{{imageIndex + 3}}</div>\n </div>\n }\n @if (multiPreviewImages?.[imageIndex+3] && imageIndex <= 1) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex+3)\">\n <div class=\"image-index\">{{imageIndex + 4}}</div>\n </div>\n }\n @if (multiPreviewImages?.[imageIndex+4] && imageIndex === 0) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex+4)\">\n <div class=\"image-index\">{{imageIndex + 5}}</div>\n </div>\n }\n <fa-icon class=\"right-button\" [icon]=\"faAngleRight\" [class.disabled]=\"!multiPreviewImages || !multiPreviewImages.length || imageIndex === (multiPreviewImages.length - 1)\" (click)=\"next()\"></fa-icon>\n </div>\n }\n @else {\n <div class=\"image-preview\">\n <img class=\"mat-elevation-z2\" [src]=\"singlePreviewImage ?? metadata.previewPlaceholderUrl ?? placeHolder\">\n </div>\n }\n }\n </div>\n}", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}.image-preview{height:250px;display:flex;align-items:center;padding-top:15px;padding-bottom:15px}.image-preview img{max-width:100%;max-height:100%;margin-left:auto;margin-right:auto;border-radius:3px}.preview-nav{display:flex;align-items:center;justify-content:center;column-gap:5px}.preview-nav .left-button,.preview-nav .right-button{font-size:30px;color:#00000061}.preview-nav .left-button:hover,.preview-nav .right-button:hover{color:#0000008a;cursor:pointer;transition:all .3s ease}.preview-nav .left-button.disabled,.preview-nav .right-button.disabled{color:#00000042}.preview-nav .left-button.disabled:hover,.preview-nav .right-button.disabled:hover{color:#00000042;transition:none;cursor:default}.preview-nav .dot{display:flex;align-items:center;justify-content:center;height:30px;width:30px;min-width:30px;background-color:#00000061;border-radius:50%}.preview-nav .dot .image-index{color:#fff;font-size:24px;font-weight:600}.preview-nav .dot.selected{background-color:#0000008a}.preview-nav .dot:hover{background-color:#0000008a;cursor:pointer;transition:all .3s ease}.preview-nav .dot.disabled:hover{cursor:default}\n"] }]
|
|
5090
|
+
args: [{ selector: 'file-image-input', standalone: true, imports: [CommonModule, FileInputComponent, FaIconComponent], template: "<!-- eslint-disable angular/cyclomatic-complexity -->\n \n<!-- eslint-disable angular/prefer-ngsrc -->\n<!-- eslint-disable angular/alt-text -->\n \n@if (!metadata.dragAndDrop && !metadata.preview) {\n <file-input\n [propertyValue]=\"propertyValue\"\n [metadata]=\"metadata\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n [isReadOnly]=\"isReadOnly\"\n [entity]=\"entity\"\n [key]=\"key\"\n (fileDataChangeEvent)=\"refreshFileData($event)\"\n >\n </file-input>\n}\n \n@if (metadata.dragAndDrop || metadata.preview) {\n <div class=\"file-input mat-elevation-z8\">\n <file-input\n [propertyValue]=\"propertyValue\"\n [metadata]=\"metadata\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n [isReadOnly]=\"isReadOnly\"\n [entity]=\"entity\"\n [key]=\"key\"\n (fileDataChangeEvent)=\"refreshFileData($event)\"\n >\n </file-input>\n\n @if (metadata.preview) {\n @if (metadata.multiple) {\n <div class=\"image-preview\">\n @if (multiPreviewImages?.[imageIndex]) {\n <img class=\"mat-elevation-z2\" [src]=\"multiPreviewImages?.[imageIndex]\">\n }\n @else {\n <img class=\"mat-elevation-z2\" [src]=\"metadata.previewPlaceholderUrl ?? placeHolder\">\n }\n </div>\n \n <div class=\"preview-nav\">\n <fa-icon class=\"left-button\" [icon]=\"faAngleLeft\" [class.disabled]=\"imageIndex === 0\" (click)=\"prev()\"></fa-icon>\n @if (\n multiPreviewImages\n && multiPreviewImages[imageIndex-4]\n && imageIndex === (multiPreviewImages.length - 1)\n ) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex-4)\">\n <div class=\"image-index\">{{imageIndex - 3}}</div>\n </div>\n }\n @if (\n multiPreviewImages\n && multiPreviewImages[imageIndex-3]\n && (\n imageIndex === (multiPreviewImages.length - 2)\n || imageIndex === (multiPreviewImages.length - 1)\n )\n ) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex-3)\">\n <div class=\"image-index\">{{imageIndex - 2}}</div>\n </div>\n }\n @if (multiPreviewImages?.[imageIndex-2]) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex-2)\">\n <div class=\"image-index\">{{imageIndex - 1}}</div>\n </div>\n }\n @if (multiPreviewImages?.[imageIndex-1]) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex-1)\">\n <div class=\"image-index\">{{imageIndex}}</div>\n </div>\n } \n <div class=\"dot selected disabled\">\n <div class=\"image-index\">{{imageIndex + 1}}</div>\n </div>\n @if (multiPreviewImages?.[imageIndex+1]) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex+1)\">\n <div class=\"image-index\">{{imageIndex + 2}}</div>\n </div>\n }\n @if (multiPreviewImages?.[imageIndex+2]) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex+2)\">\n <div class=\"image-index\">{{imageIndex + 3}}</div>\n </div>\n }\n @if (multiPreviewImages?.[imageIndex+3] && imageIndex <= 1) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex+3)\">\n <div class=\"image-index\">{{imageIndex + 4}}</div>\n </div>\n }\n @if (multiPreviewImages?.[imageIndex+4] && imageIndex === 0) {\n <div class=\"dot\" (click)=\"setIndex(imageIndex+4)\">\n <div class=\"image-index\">{{imageIndex + 5}}</div>\n </div>\n }\n <fa-icon class=\"right-button\" [icon]=\"faAngleRight\" [class.disabled]=\"!multiPreviewImages || !multiPreviewImages.length || imageIndex === (multiPreviewImages.length - 1)\" (click)=\"next()\"></fa-icon>\n </div>\n }\n @else {\n <div class=\"image-preview\">\n <img class=\"mat-elevation-z2\" [src]=\"singlePreviewImage ?? metadata.previewPlaceholderUrl ?? placeHolder\">\n </div>\n }\n }\n </div>\n}", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}.image-preview{height:250px;display:flex;align-items:center;padding-top:15px;padding-bottom:15px}.image-preview img{max-width:100%;max-height:100%;margin-left:auto;margin-right:auto;border-radius:3px}.preview-nav{display:flex;align-items:center;justify-content:center;column-gap:5px}.preview-nav .left-button,.preview-nav .right-button{font-size:30px;color:#00000061}.preview-nav .left-button:hover,.preview-nav .right-button:hover{color:#0000008a;cursor:pointer;transition:all .3s ease}.preview-nav .left-button.disabled,.preview-nav .right-button.disabled{color:#00000042}.preview-nav .left-button.disabled:hover,.preview-nav .right-button.disabled:hover{color:#00000042;transition:none;cursor:default}.preview-nav .dot{display:flex;align-items:center;justify-content:center;height:30px;width:30px;min-width:30px;background-color:#00000061;border-radius:50%}.preview-nav .dot .image-index{color:#fff;font-size:24px;font-weight:600}.preview-nav .dot.selected{background-color:#0000008a}.preview-nav .dot:hover{background-color:#0000008a;cursor:pointer;transition:all .3s ease}.preview-nav .dot.disabled:hover{cursor:default}\n"] }]
|
|
5089
5091
|
}], ctorParameters: () => [{ type: i2$1.HttpClient }] });
|
|
5090
5092
|
|
|
5091
5093
|
/* eslint-disable jsdoc/require-jsdoc */
|
|
@@ -5323,7 +5325,7 @@ class ReferencesManyInputComponent extends NgxMatEntityBaseInputComponent {
|
|
|
5323
5325
|
this.emitChange();
|
|
5324
5326
|
}
|
|
5325
5327
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ReferencesManyInputComponent, deps: [{ token: i0.EnvironmentInjector }, { token: NGX_COMPLETE_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
|
|
5326
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: ReferencesManyInputComponent, isStandalone: true, selector: "references-many-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n <div class=\"array-headline\">\n <b>{{metadata.displayName}}</b>\n </div>\n\n <mat-form-field>\n <mat-label>{{metadata.dropdownLabel}}</mat-label>\n <mat-select #inputModel=\"ngModel\" [name]=\"name + 'input'\" [disabled]=\"isReadOnly\" [(ngModel)]=\"input\" (opened)=\"selectSearchInput.focus()\">\n <mat-form-field class=\"select-search-input\">\n <!-- eslint-disable-next-line angular/no-any -->\n <input #selectSearchInput matInput (keyup)=\"filterDropdownValues($any($event.target).value)\">\n <fa-icon matSuffix [icon]=\"faSearch\"></fa-icon>\n </mat-form-field>\n <mat-option>-</mat-option>\n @if (shouldDisplayCurrentValue) {\n <mat-option [value]=\"currentDropdownValue?.value\">{{currentDropdownValue?.displayName}}</mat-option>\n }\n @for (value of filteredDropdownValues; track $index) {\n <mat-option [value]=\"value.value\">{{value.displayName}}</mat-option>\n }\n </mat-select>\n <mat-error>{{getValidationErrorMessage(inputModel)}}</mat-error>\n </mat-form-field>\n\n @if (metadata.addAll) {\n <button type=\"button\" style=\"margin-left: 20px;\" mat-raised-button [disabled]=\"!dropdownValues.length || isReadOnly\" (click)=\"addAll()\">\n {{metadata.addAllButtonLabel}}\n </button>\n }\n\n <div class=\"buttons\">\n <button type=\"button\" mat-raised-button [disabled]=\"!input\" (click)=\"add()\">\n {{metadata.addButtonLabel}}\n </button>\n <button type=\"button\" mat-raised-button [disabled]=\"!selected.length\" (click)=\"remove()\">\n {{metadata.removeButtonLabel}}\n </button>\n </div>\n\n <custom-table
|
|
5328
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: ReferencesManyInputComponent, isStandalone: true, selector: "references-many-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n <div class=\"array-headline\">\n <b>{{metadata.displayName}}</b>\n </div>\n\n <mat-form-field>\n <mat-label>{{metadata.dropdownLabel}}</mat-label>\n <mat-select #inputModel=\"ngModel\" [name]=\"name + 'input'\" [disabled]=\"isReadOnly\" [(ngModel)]=\"input\" (opened)=\"selectSearchInput.focus()\">\n <mat-form-field class=\"select-search-input\">\n <!-- eslint-disable-next-line angular/no-any -->\n <input #selectSearchInput matInput (keyup)=\"filterDropdownValues($any($event.target).value)\">\n <fa-icon matSuffix [icon]=\"faSearch\"></fa-icon>\n </mat-form-field>\n <mat-option>-</mat-option>\n @if (shouldDisplayCurrentValue) {\n <mat-option [value]=\"currentDropdownValue?.value\">{{currentDropdownValue?.displayName}}</mat-option>\n }\n @for (value of filteredDropdownValues; track $index) {\n <mat-option [value]=\"value.value\">{{value.displayName}}</mat-option>\n }\n </mat-select>\n <mat-error>{{getValidationErrorMessage(inputModel)}}</mat-error>\n </mat-form-field>\n\n @if (metadata.addAll) {\n <button type=\"button\" style=\"margin-left: 20px;\" mat-raised-button [disabled]=\"!dropdownValues.length || isReadOnly\" (click)=\"addAll()\">\n {{metadata.addAllButtonLabel}}\n </button>\n }\n\n <div class=\"buttons\">\n <button type=\"button\" mat-raised-button [disabled]=\"!input\" (click)=\"add()\">\n {{metadata.addButtonLabel}}\n </button>\n <button type=\"button\" mat-raised-button [disabled]=\"!selected.length\" (click)=\"remove()\">\n {{metadata.removeButtonLabel}}\n </button>\n </div>\n\n <!-- eslint-disable-next-line angular/no-any -->\n <custom-table [configuration]=\"tableConfig\" [data]=\"propertyValue\" (selectionChanged)=\"selected = $any($event)\">\n </custom-table>\n</div>", styles: [".array-headline{padding-bottom:10px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px;column-gap:24px}.buttons button{flex-grow:1}mat-form-field{max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$3.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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: CustomTableComponent, selector: "custom-table", inputs: ["data", "searchString", "required", "isLoading", "configuration"], outputs: ["cellClicked", "selectionChanged"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
|
|
5327
5329
|
}
|
|
5328
5330
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ReferencesManyInputComponent, decorators: [{
|
|
5329
5331
|
type: Component,
|
|
@@ -5336,7 +5338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
|
|
|
5336
5338
|
MatButtonModule,
|
|
5337
5339
|
CustomTableComponent,
|
|
5338
5340
|
FaIconComponent
|
|
5339
|
-
], template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n <div class=\"array-headline\">\n <b>{{metadata.displayName}}</b>\n </div>\n\n <mat-form-field>\n <mat-label>{{metadata.dropdownLabel}}</mat-label>\n <mat-select #inputModel=\"ngModel\" [name]=\"name + 'input'\" [disabled]=\"isReadOnly\" [(ngModel)]=\"input\" (opened)=\"selectSearchInput.focus()\">\n <mat-form-field class=\"select-search-input\">\n <!-- eslint-disable-next-line angular/no-any -->\n <input #selectSearchInput matInput (keyup)=\"filterDropdownValues($any($event.target).value)\">\n <fa-icon matSuffix [icon]=\"faSearch\"></fa-icon>\n </mat-form-field>\n <mat-option>-</mat-option>\n @if (shouldDisplayCurrentValue) {\n <mat-option [value]=\"currentDropdownValue?.value\">{{currentDropdownValue?.displayName}}</mat-option>\n }\n @for (value of filteredDropdownValues; track $index) {\n <mat-option [value]=\"value.value\">{{value.displayName}}</mat-option>\n }\n </mat-select>\n <mat-error>{{getValidationErrorMessage(inputModel)}}</mat-error>\n </mat-form-field>\n\n @if (metadata.addAll) {\n <button type=\"button\" style=\"margin-left: 20px;\" mat-raised-button [disabled]=\"!dropdownValues.length || isReadOnly\" (click)=\"addAll()\">\n {{metadata.addAllButtonLabel}}\n </button>\n }\n\n <div class=\"buttons\">\n <button type=\"button\" mat-raised-button [disabled]=\"!input\" (click)=\"add()\">\n {{metadata.addButtonLabel}}\n </button>\n <button type=\"button\" mat-raised-button [disabled]=\"!selected.length\" (click)=\"remove()\">\n {{metadata.removeButtonLabel}}\n </button>\n </div>\n\n <custom-table
|
|
5341
|
+
], template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n <div class=\"array-headline\">\n <b>{{metadata.displayName}}</b>\n </div>\n\n <mat-form-field>\n <mat-label>{{metadata.dropdownLabel}}</mat-label>\n <mat-select #inputModel=\"ngModel\" [name]=\"name + 'input'\" [disabled]=\"isReadOnly\" [(ngModel)]=\"input\" (opened)=\"selectSearchInput.focus()\">\n <mat-form-field class=\"select-search-input\">\n <!-- eslint-disable-next-line angular/no-any -->\n <input #selectSearchInput matInput (keyup)=\"filterDropdownValues($any($event.target).value)\">\n <fa-icon matSuffix [icon]=\"faSearch\"></fa-icon>\n </mat-form-field>\n <mat-option>-</mat-option>\n @if (shouldDisplayCurrentValue) {\n <mat-option [value]=\"currentDropdownValue?.value\">{{currentDropdownValue?.displayName}}</mat-option>\n }\n @for (value of filteredDropdownValues; track $index) {\n <mat-option [value]=\"value.value\">{{value.displayName}}</mat-option>\n }\n </mat-select>\n <mat-error>{{getValidationErrorMessage(inputModel)}}</mat-error>\n </mat-form-field>\n\n @if (metadata.addAll) {\n <button type=\"button\" style=\"margin-left: 20px;\" mat-raised-button [disabled]=\"!dropdownValues.length || isReadOnly\" (click)=\"addAll()\">\n {{metadata.addAllButtonLabel}}\n </button>\n }\n\n <div class=\"buttons\">\n <button type=\"button\" mat-raised-button [disabled]=\"!input\" (click)=\"add()\">\n {{metadata.addButtonLabel}}\n </button>\n <button type=\"button\" mat-raised-button [disabled]=\"!selected.length\" (click)=\"remove()\">\n {{metadata.removeButtonLabel}}\n </button>\n </div>\n\n <!-- eslint-disable-next-line angular/no-any -->\n <custom-table [configuration]=\"tableConfig\" [data]=\"propertyValue\" (selectionChanged)=\"selected = $any($event)\">\n </custom-table>\n</div>", styles: [".array-headline{padding-bottom:10px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px;column-gap:24px}.buttons button{flex-grow:1}mat-form-field{max-width:100%}\n"] }]
|
|
5340
5342
|
}], ctorParameters: () => [{ type: i0.EnvironmentInjector }, { type: undefined, decorators: [{
|
|
5341
5343
|
type: Inject,
|
|
5342
5344
|
args: [NGX_COMPLETE_GLOBAL_DEFAULT_VALUES]
|
|
@@ -5467,8 +5469,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
|
|
|
5467
5469
|
type: Directive,
|
|
5468
5470
|
args: [{
|
|
5469
5471
|
selector: '[passwordMatch]',
|
|
5470
|
-
|
|
5471
|
-
|
|
5472
|
+
standalone: true,
|
|
5473
|
+
providers: [{ provide: NG_VALIDATORS, useExisting: PasswordMatchValidatorDirective, multi: true }]
|
|
5472
5474
|
}]
|
|
5473
5475
|
}], propDecorators: { passwordMatch: [{
|
|
5474
5476
|
type: Input
|
|
@@ -7039,7 +7041,7 @@ class NgxMatEntityInputComponent {
|
|
|
7039
7041
|
this.emitChange();
|
|
7040
7042
|
}
|
|
7041
7043
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgxMatEntityInputComponent, deps: [{ token: i1.MatDialog }, { token: i0.EnvironmentInjector }, { token: i2$6.Router }, { token: NGX_GET_VALIDATION_ERROR_MESSAGE }, { token: NGX_COMPLETE_GLOBAL_DEFAULT_VALUES }, { token: i2$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
|
|
7042
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: NgxMatEntityInputComponent, isStandalone: true, selector: "ngx-mat-entity-input", inputs: { entity: "entity", propertyKey: "propertyKey", getValidationErrorMessage: "getValidationErrorMessage", hideOmitForCreate: "hideOmitForCreate", hideOmitForEdit: "hideOmitForEdit", validEmpty: "validEmpty", isReadOnly: "isReadOnly" }, outputs: { inputChangeEvent: "inputChangeEvent" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "addArrayItemDialog", first: true, predicate: ["addArrayItemDialog"], descendants: true }, { propertyName: "editArrayItemDialog", first: true, predicate: ["editArrayItemDialog"], descendants: true }, { propertyName: "createHasManyDialog", first: true, predicate: ["createHasManyDialog"], descendants: true }, { propertyName: "editHasManyDialog", first: true, predicate: ["editHasManyDialog"], descendants: true }], ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n@if(!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)) {\n @switch (type) {\n <!-------------------------------------------->\n <!-----------------Strings-------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.STRING) {\n <string-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </string-input>\n }\n @case (DecoratorTypes.STRING_TEXTBOX) {\n <string-textbox-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </string-textbox-input>\n }\n @case (DecoratorTypes.STRING_AUTOCOMPLETE) {\n <string-autocomplete-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </string-autocomplete-input>\n }\n @case (DecoratorTypes.STRING_DROPDOWN) {\n <string-dropdown-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </string-dropdown-input>\n }\n @case (DecoratorTypes.STRING_PASSWORD) {\n <string-password-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </string-password-input>\n }\n <!-------------------------------------------->\n <!-----------------Booleans------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.BOOLEAN_CHECKBOX) {\n <boolean-checkbox-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </boolean-checkbox-input>\n }\n @case (DecoratorTypes.BOOLEAN_TOGGLE) {\n <boolean-toggle-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </boolean-toggle-input>\n }\n @case (DecoratorTypes.BOOLEAN_DROPDOWN) {\n <boolean-dropdown-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </boolean-dropdown-input>\n }\n <!-------------------------------------------->\n <!------------------Numbers------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.NUMBER) {\n <number-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </number-input>\n }\n @case (DecoratorTypes.NUMBER_DROPDOWN) {\n <number-dropdown-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </number-dropdown-input>\n }\n @case (DecoratorTypes.NUMBER_SLIDER) {\n <number-slider-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </number-slider-input>\n }\n <!-------------------------------------------->\n <!-------------------Array-------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.ARRAY_DATE) {\n <array-date-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </array-date-input>\n }\n @case (DecoratorTypes.ARRAY_DATE_TIME) {\n <array-date-time-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </array-date-time-input>\n }\n @case (DecoratorTypes.ARRAY_DATE_RANGE) {\n <array-date-range-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </array-date-range-input>\n }\n @case (DecoratorTypes.ARRAY_STRING_CHIPS) {\n <array-string-chips-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </array-string-chips-input>\n }\n @case (DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS) {\n <array-string-autocomplete-chips\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </array-string-autocomplete-chips>\n }\n <!-------------------------------------------->\n <!-------------------Dates-------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.DATE) {\n <date-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </date-input>\n }\n @case (DecoratorTypes.DATE_RANGE) {\n <date-range-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </date-range-input>\n }\n @case (DecoratorTypes.DATE_TIME) {\n <date-time-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </date-time-input>\n }\n <!-------------------------------------------->\n <!-------------------Files-------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.FILE_DEFAULT) {\n <file-default-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </file-default-input>\n }\n @case (DecoratorTypes.FILE_IMAGE) {\n <file-image-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </file-image-input>\n }\n <!-------------------------------------------->\n <!-------------- references many ------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.REFERENCES_MANY) {\n <references-many-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </references-many-input>\n }\n <!-------------------------------------------->\n <!-------------------Custom------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.CUSTOM) {\n <custom-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </custom-input>\n }\n <!-------------------------------------------->\n <!-------------------Object------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.OBJECT) {\n <b>{{metadataDefaultObject.displayName}}</b>\n <!-- iterates over the object properties -->\n <ng-container *ngTemplateOutlet=\"form; context: objectFormContext\"></ng-container>\n }\n <!-------------------------------------------->\n <!---------------Object Dropdown-------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.OBJECT_DROPDOWN) {\n <mat-form-field class=\"w-full\">\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select #model=\"ngModel\"\n [name]=\"objectDropdownName\"\n [required]=\"metadata.required(entity)\"\n [disabled]=\"internalIsReadOnly\"\n [compareWith]=\"compareObjectsBound\"\n [(ngModel)]=\"entity[propertyKey]\"\n (selectionChange)=\"emitChange()\"\n (opened)=\"selectSearchInput.focus()\"\n >\n <mat-form-field class=\"select-search-input\">\n <!-- eslint-disable-next-line angular/no-any -->\n <input #selectSearchInput matInput (keyup)=\"filterObjectDropdownValues($any($event.target).value)\">\n <fa-icon matSuffix [icon]=\"faSearch\"></fa-icon>\n </mat-form-field>\n @if (!metadata.required(entity)) {\n <mat-option>-</mat-option>\n }\n @if (shouldDisplayCurrentObjectDropdownValue) {\n <mat-option [value]=\"currentObjectDropdownValue?.value\">{{currentObjectDropdownValue?.displayName}}</mat-option>\n }\n @for (value of filteredObjectDropdownValues; track $index) {\n <mat-option [value]=\"value.value\">{{value.displayName}}</mat-option>\n }\n </mat-select>\n <mat-error>{{internalGetValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n }\n <!-------------------------------------------->\n <!-------------- references one -------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.REFERENCES_ONE) {\n <mat-form-field [class.w-full]=\"metadataReferencesOne.dropdownOnly\">\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select #inputModel=\"ngModel\"\n [name]=\"referencesOneName\"\n [disabled]=\"internalIsReadOnly\"\n [required]=\"metadata.required(entity)\"\n [(ngModel)]=\"entity[propertyKey]\"\n (selectionChange)=\"setReferencesOneObject()\"\n (opened)=\"selectSearchInput.focus()\"\n >\n <mat-form-field class=\"select-search-input\">\n <!-- eslint-disable-next-line angular/no-any -->\n <input #selectSearchInput matInput (keyup)=\"filterReferencesOneValues($any($event.target).value)\">\n <fa-icon matSuffix [icon]=\"faSearch\"></fa-icon>\n </mat-form-field>\n @if (!metadata.required(entity)) {\n <mat-option>-</mat-option>\n }\n @if (shouldDisplayCurrentReferencesOneDropdownValue) {\n <mat-option [value]=\"currentReferencesOneDropdownValue?.value\">{{currentReferencesOneDropdownValue?.displayName}}</mat-option>\n }\n @for (value of filteredReferencesOneDropdownValues; track $index) {\n <mat-option [value]=\"value.value\">{{value.displayName}}</mat-option>\n }\n </mat-select>\n <mat-error>{{internalGetValidationErrorMessage(inputModel)}}</mat-error>\n </mat-form-field>\n <!-- iterates over the references one properties -->\n @if (referencesOneFormContext) {\n <ng-container *ngTemplateOutlet=\"form; context: referencesOneFormContext\"></ng-container>\n }\n }\n <!-------------------------------------------->\n <!-------------------Array-------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.ARRAY) {\n <div class=\"entityArray\">\n <div class=\"mat-elevation-z8 elevation-container\">\n <div class=\"array-headline\">\n <b>{{metadataEntityArray.displayName}}</b>\n </div>\n @if (metadataEntityArray.createInline && !internalIsReadOnly) {\n @if (addArrayItemFormContext) {\n <ng-container *ngTemplateOutlet=\"form; context: addArrayItemFormContext\"></ng-container>\n }\n @else if (addArrayItemFormContext2) {\n <ng-container *ngTemplateOutlet=\"form; context: addArrayItemFormContext2\"></ng-container>\n }\n }\n @if (!internalIsReadOnly && entityArrayTableContext) {\n <div class=\"buttons\">\n <button type=\"button\" mat-raised-button\n [disabled]=\"metadataEntityArray.createInline && !isArrayItemValid\"\n (click)=\"addEntity()\">\n {{metadataEntityArray.addButtonLabel}}\n </button>\n <button type=\"button\" mat-raised-button\n [disabled]=\"!entityArrayTableContext.$implicit.selection.selected.length\"\n (click)=\"removeFromEntityArray()\">\n {{metadataEntityArray.removeButtonLabel}}\n </button>\n </div>\n }\n @if (entityArrayTableContext) {\n <ng-container *ngTemplateOutlet=\"table; context: entityArrayTableContext\"></ng-container>\n }\n </div>\n </div>\n }\n <!-------------------------------------------->\n <!------------------ has many ---------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.HAS_MANY) {\n <div class=\"hasMany\">\n <h2 class=\"title\">{{metadataHasMany.tableData.baseData.title}}</h2>\n <div class=\"grid grid-cols-12 gap-x-6\">\n <mat-form-field class=\"lg:col-span-8 md:col-span-6 col-span-12\">\n <mat-label>{{metadataHasMany.tableData.baseData.searchLabel}}</mat-label>\n <input matInput (keyup)=\"applyHasManyFilter($event)\">\n </mat-form-field>\n @if (metadataHasMany.tableData.baseData.tableActions.length) {\n <div\n [class.lg:col-span-2]=\"hasManyAllowCreate\"\n [class.lg:col-span-4]=\"!hasManyAllowCreate\"\n [class.md:col-span-3]=\"hasManyAllowCreate\"\n [class.md:col-span-6]=\"!hasManyAllowCreate\"\n [class.col-span-6]=\"hasManyAllowCreate\"\n [class.col-span-12]=\"!hasManyAllowCreate\"\n >\n <button type=\"button\" class=\"actions-button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n {{metadataHasMany.tableData.baseData.tableActionsLabel}}\n </button>\n </div>\n }\n <mat-menu #menu=\"matMenu\">\n @if (metadataHasMany.tableData.baseData.allowJsonImport) {\n <button type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(hasManyImportAction)\" (click)=\"runHasManyTableAction(hasManyImportAction)\">\n {{hasManyImportAction.displayName}}\n </button>\n }\n @for (action of metadataHasMany.tableData.baseData.tableActions; track $index) {\n <button type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(action)\" (click)=\"runHasManyTableAction(action)\">\n {{action.displayName}}\n </button>\n }\n </mat-menu>\n @if (hasManyAllowCreate) {\n <div\n [class.lg:col-span-2]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n [class.lg:col-span-4]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n [class.md:col-span-3]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n [class.md:col-span-6]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n [class.col-span-6]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n [class.col-span-12]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n >\n <button type=\"button\" class=\"create-button\" mat-raised-button (click)=\"createHasManyEntity()\">\n {{metadataHasMany.tableData.baseData.createButtonLabel}}\n </button>\n </div>\n }\n </div>\n \n <div class=\"mat-elevation-z8 elevation-container\">\n @if (hasManyTableContext) {\n <ng-container *ngTemplateOutlet=\"table; context: hasManyTableContext\"></ng-container>\n }\n </div>\n </div>\n }\n \n @default {\n <div>ERROR: The type {{type}} is not known.</div>\n }\n }\n}\n\n\n<ng-template #table let-context>\n <mat-table matSort [dataSource]=\"context.dataSource\" [class.table-with-error-slot]=\"context.shouldShowMissingError\">\n <!-- select Column -->\n <ng-container matColumnDef=\"select\">\n <mat-header-cell *matHeaderCellDef>\n <mat-checkbox [checked]=\"context.selection.hasValue() && SelectionUtilities.isAllSelected(context.selection, context.dataSource)\"\n [indeterminate]=\"context.selection.hasValue() && !SelectionUtilities.isAllSelected(context.selection, context.dataSource)\"\n (change)=\"$event ? SelectionUtilities.masterToggle(context.selection, context.dataSource) : null\">\n </mat-checkbox>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let value\" [dynamicStyleClasses]=\"context.dynamicRowStyleClasses\" [value]=\"value\">\n <mat-checkbox [checked]=\"context.selection.isSelected(value)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? context.selection.toggle(value) : null\">\n </mat-checkbox>\n </mat-cell>\n </ng-container>\n\n @for (dCol of context.displayColumns; track $index) {\n <ng-container [matColumnDef]=\"dCol.displayName\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n {{dCol.displayName}}\n </mat-header-cell>\n <mat-cell *matCellDef=\"let value\" [class.enabled]=\"!dCol.disableClick && context.allowClick(value)\"\n [dynamicStyleClasses]=\"context.dynamicRowStyleClasses\" [value]=\"value\"\n (click)=\"clickCell(value, dCol, context)\"\n >\n @if (dCol.Component) {\n <display-column-value [entity]=\"value\" [ComponentClass]=\"dCol.Component\"></display-column-value>\n }\n @else {\n {{getDisplayColumnValue(value, dCol)}}\n }\n </mat-cell>\n </ng-container>\n }\n\n <mat-header-row *matHeaderRowDef=\"context.displayedColumns\"></mat-header-row>\n <mat-row *matRowDef=\"let row; columns: context.displayedColumns\"></mat-row>\n </mat-table>\n\n @if (context.displayLoadingSpinner && context.isLoading) {\n <mat-spinner>\n </mat-spinner>\n }\n @else if (context.shouldShowMissingError && !context.dataSource.data.length) {\n <div class=\"table-error\">{{context.emptyErrorMessage}}</div>\n }\n\n <mat-paginator [length]=\"context.dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n</ng-template>\n\n<!--------------------------------------------------------->\n<!---------------------------Form-------------------------->\n<!--------------------------------------------------------->\n<ng-template #form let-context>\n <!-- eslint-disable angular/no-call-expression -->\n @if (context.tabs.length > 1) {\n <mat-tab-group preserveContent>\n @for (tab of context.tabs; track $index) {\n <mat-tab [label]=\"tab.tabName\">\n @for (row of tab.rows; track $index) {\n <div class=\"grid grid-cols-12 gap-x-6\">\n @for (key of row.keys; track key) {\n <ngx-mat-entity-input\n [entity]=\"context.entity\"\n [propertyKey]=\"key\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [validEmpty]=\"context.validEmpty?.()\"\n [isReadOnly]=\"context.isReadOnly?.(context.entity, key)\"\n [class]=\"EntityUtilities.getWidthClasses(context.entity, key)\"\n [hideOmitForEdit]=\"context.hideOmitForEdit\"\n [hideOmitForCreate]=\"context.hideOmitForCreate\"\n (inputChangeEvent)=\"context.inputChangeEvent()\"\n >\n </ngx-mat-entity-input>\n }\n </div>\n }\n </mat-tab>\n }\n </mat-tab-group>\n }\n @else {\n @if (!context.tabs.length) {\n <span class=\"no-entity-tabs\">\n ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n </span>\n }\n @else {\n @for (row of context.tabs[0].rows; track $index) {\n <div class=\"grid grid-cols-12 gap-x-6\">\n @for (key of row.keys; track key) {\n <ngx-mat-entity-input\n [entity]=\"context.entity\"\n [propertyKey]=\"key\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [validEmpty]=\"context.validEmpty?.()\"\n [isReadOnly]=\"context.isReadOnly?.(context.entity, key)\"\n [class]=\"EntityUtilities.getWidthClasses(context.entity, key)\"\n [hideOmitForEdit]=\"context.hideOmitForEdit\"\n [hideOmitForCreate]=\"context.hideOmitForCreate\"\n (inputChangeEvent)=\"context.inputChangeEvent()\"\n >\n </ngx-mat-entity-input>\n }\n </div>\n }\n }\n }\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Add Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #addArrayItemDialog>\n <div class=\"mat-dialog-title\">\n <div>{{addArrayItemDialogData.title}}</div>\n </div>\n\n <form (ngSubmit)=\"addArrayItem()\">\n <mat-dialog-content>\n @if (addArrayItemFormContext) {\n <ng-container *ngTemplateOutlet=\"form; context: addArrayItemFormContext\"></ng-container>\n }\n </mat-dialog-content>\n \n <mat-dialog-actions>\n <div class=\"dialog-button-with-info-icon\">\n <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n [disabled]=\"!isArrayItemValid\"\n [matBadge]=\"arrayItemValidationErrors.length\"\n [matBadgeHidden]=\"!arrayItemValidationErrors.length\"\n >\n {{addArrayItemDialogData.createButtonLabel}}\n </button>\n @if (arrayItemValidationErrors.length) {\n <ngx-mat-entity-tooltip [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n }\n </div>\n <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"closeAddArrayItemDialog()\">\n {{addArrayItemDialogData.cancelButtonLabel}}\n </button>\n </mat-dialog-actions>\n </form>\n\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Edit Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #editArrayItemDialog>\n <div class=\"mat-dialog-title\">\n <div>{{editArrayItemDialogData.title(arrayItemPriorChanges)}}</div>\n </div>\n \n <form (ngSubmit)=\"saveArrayItem()\">\n <mat-dialog-content>\n @if (editArrayItemFormContext) {\n <ng-container *ngTemplateOutlet=\"form; context: editArrayItemFormContext\"></ng-container>\n }\n </mat-dialog-content>\n \n <mat-dialog-actions>\n <div class=\"dialog-button-with-info-icon\">\n <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n [class.badge-changes]=\"!arrayItemValidationErrors.length\"\n [disabled]=\"internalIsReadOnly || !isArrayItemValid || !isArrayItemDirty\"\n [matBadge]=\"arrayItemValidationErrors.length > 0 ? arrayItemValidationErrors.length : arrayItemChanges.length\"\n [matBadgeHidden]=\"!arrayItemValidationErrors.length && !arrayItemChanges.length\"\n >\n {{editArrayItemDialogData.confirmButtonLabel}}\n </button>\n @if (arrayItemValidationErrors.length || arrayItemChanges.length) {\n <ngx-mat-entity-tooltip [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n }\n </div>\n <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"closeEditArrayItemDialog()\">\n {{editArrayItemDialogData.cancelButtonLabel}}\n </button>\n </mat-dialog-actions>\n </form>\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Create Has Many Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #createHasManyDialog>\n <div class=\"mat-dialog-title\">\n <div>{{metadataHasMany.tableData.createData.title}}</div>\n </div>\n \n <form (ngSubmit)=\"dialogCreateHasMany()\">\n <mat-dialog-content>\n @if (hasManyCreateFormContext) {\n <ng-container *ngTemplateOutlet=\"form; context: hasManyCreateFormContext\"></ng-container>\n }\n </mat-dialog-content>\n \n <mat-dialog-actions>\n <div class=\"dialog-button-with-info-icon\">\n <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n [disabled]=\"!isHasManyEntityValid\"\n [matBadge]=\"hasManyValidationErrors.length\"\n [matBadgeHidden]=\"!hasManyValidationErrors.length\"\n >\n {{metadataHasMany.tableData.createData.createButtonLabel}}\n </button>\n @if (hasManyValidationErrors.length) {\n <ngx-mat-entity-tooltip [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n }\n </div>\n <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"dialogCancelCreateHasMany()\">\n {{metadataHasMany.tableData.createData.cancelButtonLabel}}\n </button>\n </mat-dialog-actions>\n </form>\n \n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Edit Has Many Dialog----------------->\n<!--------------------------------------------------------->\n<ng-template #editHasManyDialog>\n <div class=\"mat-dialog-title\">\n <div>{{metadataHasMany.tableData.editData.title(hasManyEntityPriorChanges)}}</div>\n\n <div class=\"actions-container\">\n @if (metadataHasMany.tableData.editData.actions.length) {\n <button type=\"button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n {{metadataHasMany.tableData.editData.actionsLabel}}\n </button>\n }\n <mat-menu #menu=\"matMenu\">\n @for (action of metadataHasMany.tableData.editData.actions; track $index) {\n <button type=\"button\" mat-menu-item [disabled]=\"hasManyEditActionDisabled(action)\" (click)=\"hasManyRunEditAction(action)\">\n {{action.displayName}}\n </button>\n }\n </mat-menu>\n \n @if (hasManyAllowDelete(hasManyEntity)) {\n <button type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"deleteHasManyEntity()\">\n {{metadataHasMany.tableData.editData.deleteButtonLabel}}\n </button>\n }\n </div>\n </div>\n \n <form (ngSubmit)=\"dialogEditHasMany()\">\n <mat-dialog-content>\n @if (hasManyEditFormContext) {\n <ng-container *ngTemplateOutlet=\"form; context: hasManyEditFormContext\"></ng-container>\n }\n </mat-dialog-content>\n \n <mat-dialog-actions>\n <div class=\"dialog-button-with-info-icon\">\n <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n [class.badge-changes]=\"!hasManyValidationErrors.length\"\n [disabled]=\"internalIsReadOnly || !isHasManyEntityValid || !isHasManyEntityDirty\"\n [matBadge]=\"hasManyValidationErrors.length > 0 ? hasManyValidationErrors.length : hasManyChanges.length\"\n [matBadgeHidden]=\"!hasManyValidationErrors.length && !hasManyChanges.length\"\n >\n {{metadataHasMany.tableData.editData.confirmButtonLabel}}\n </button>\n @if (hasManyValidationErrors.length || hasManyChanges.length) {\n <ngx-mat-entity-tooltip [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n }\n </div>\n <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"dialogCancelEditHasMany()\">\n {{metadataHasMany.tableData.editData.cancelButtonLabel}}\n </button>\n </mat-dialog-actions>\n </form>\n</ng-template>", styles: ["::ng-deep mat-tab-body{padding-top:10px;padding-left:12px;padding-right:12px}::ng-deep mat-tab-body .mat-mdc-tab-body-content{overflow:initial}::ng-deep .mat-mdc-tab-body-wrapper{margin-left:-12px;margin-right:-12px}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:16px}::ng-deep .select-search-input{width:100%;margin-top:-8px;margin-bottom:8px}::ng-deep .select-search-input .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-form-field.mat-form-field-disabled label{color:#0009}::ng-deep .mat-mdc-form-field.mat-form-field-disabled input,::ng-deep .mat-mdc-form-field.mat-form-field-disabled textarea,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-disabled,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#000!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:#707070}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:checked~.mdc-checkbox__background,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:indeterminate~.mdc-checkbox__background,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true][disabled]~.mdc-checkbox__background{background-color:#000}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled{opacity:1}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled button{opacity:.2}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__icons,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icons{opacity:1}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__handle:after,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__handle:after{opacity:1;background:#000}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__track,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__track{opacity:.3}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-date-range-input-inner:disabled{color:#000}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled{opacity:1}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled .mdc-slider__input{cursor:default}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mat-mdc-slider,::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mdc-slider__thumb:hover,::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mdc-slider__thumb-knob{background-color:#000;border-color:#000}::ng-deep .mat-mdc-form-field .mat-mdc-slide-toggle{opacity:1}::ng-deep .badge-changes .mat-badge-content{background-color:orange;color:#fff}mat-spinner{margin:10px auto}.mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}mat-paginator{padding-top:10px;padding-bottom:10px}.dialog-button-with-info-icon{margin-top:10px;gap:12px;display:flex;align-items:center}.actions-container{display:flex;gap:10px}.w-full{width:100%}.table-with-error-slot{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:5px}.mat-column-select{flex:0 0 48px;padding-left:0;padding-right:0;justify-content:center}.enabled:hover{cursor:pointer}.table-error{display:flex;align-items:center;justify-content:center;margin-top:-6px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:fit-content;padding-left:4px;padding-right:4px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.entityArray .elevation-container{border-radius:5px;padding:15px 15px 0;margin-bottom:15px;margin-top:15px}.entityArray .array-headline{padding-bottom:10px}.entityArray .buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px;column-gap:24px}.entityArray .buttons button{flex:1}.hasMany button{width:100%;height:56px;line-height:24px;font-size:16px}.hasMany .title{text-align:center}.hasMany .elevation-container{margin-bottom:15px}\n", "::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}.mat-dialog-title{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}\n", ".grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.gap-x-6{column-gap:24px}.grid{display:grid}@media (min-width: 1024px){.lg\\:col-span-12{grid-column:span 12/span 12!important}.lg\\:col-span-11{grid-column:span 11/span 11!important}.lg\\:col-span-10{grid-column:span 10/span 10!important}.lg\\:col-span-9{grid-column:span 9/span 9!important}.lg\\:col-span-8{grid-column:span 8/span 8!important}.lg\\:col-span-7{grid-column:span 7/span 7!important}.lg\\:col-span-6{grid-column:span 6/span 6!important}.lg\\:col-span-5{grid-column:span 5/span 5!important}.lg\\:col-span-4{grid-column:span 4/span 4!important}.lg\\:col-span-3{grid-column:span 3/span 3!important}.lg\\:col-span-2{grid-column:span 2/span 2!important}.lg\\:col-span-1{grid-column:span 1/span 1!important}}@media (min-width: 768px) and (max-width: 1023px){.md\\:col-span-12{grid-column:span 12/span 12!important}.md\\:col-span-11{grid-column:span 11/span 11!important}.md\\:col-span-10{grid-column:span 10/span 10!important}.md\\:col-span-9{grid-column:span 9/span 9!important}.md\\:col-span-8{grid-column:span 8/span 8!important}.md\\:col-span-7{grid-column:span 7/span 7!important}.md\\:col-span-6{grid-column:span 6/span 6!important}.md\\:col-span-5{grid-column:span 5/span 5!important}.md\\:col-span-4{grid-column:span 4/span 4!important}.md\\:col-span-3{grid-column:span 3/span 3!important}.md\\:col-span-2{grid-column:span 2/span 2!important}.md\\:col-span-1{grid-column:span 1/span 1!important}}.col-span-12{grid-column:span 12/span 12}.col-span-11{grid-column:span 11/span 11}.col-span-10{grid-column:span 10/span 10}.col-span-9{grid-column:span 9/span 9}.col-span-8{grid-column:span 8/span 8}.col-span-7{grid-column:span 7/span 7}.col-span-6{grid-column:span 6/span 6}.col-span-5{grid-column:span 5/span 5}.col-span-4{grid-column:span 4/span 4}.col-span-3{grid-column:span 3/span 3}.col-span-2{grid-column:span 2/span 2}.col-span-1{grid-column:span 1/span 1}\n"], dependencies: [{ kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "validEmpty", "isReadOnly"], outputs: ["inputChangeEvent"] }, { kind: "component", type: DisplayColumnValueComponent, selector: "display-column-value", inputs: ["entity", "ComponentClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i5$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i5$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$3.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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i9.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.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: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.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: MatPaginatorModule }, { kind: "component", type: i3$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: TooltipComponent, selector: "ngx-mat-entity-tooltip", inputs: ["tooltipContent"] }, { kind: "component", type: StringInputComponent, selector: "string-input" }, { kind: "component", type: StringTextboxInputComponent, selector: "string-textbox-input" }, { kind: "component", type: StringAutocompleteInputComponent, selector: "string-autocomplete-input" }, { kind: "component", type: StringDropdownInputComponent, selector: "string-dropdown-input" }, { kind: "component", type: StringPasswordInputComponent, selector: "string-password-input" }, { kind: "component", type: BooleanCheckboxInputComponent, selector: "boolean-checkbox-input" }, { kind: "component", type: BooleanToggleInputComponent, selector: "boolean-toggle-input" }, { kind: "component", type: BooleanDropdownInputComponent, selector: "boolean-dropdown-input" }, { kind: "component", type: NumberInputComponent, selector: "number-input" }, { kind: "component", type: NumberDropdownInputComponent, selector: "number-dropdown-input" }, { kind: "component", type: NumberSliderInputComponent, selector: "number-slider-input" }, { kind: "component", type: ArrayDateInputComponent, selector: "array-date-input" }, { kind: "component", type: ArrayDateRangeInputComponent, selector: "array-date-range-input" }, { kind: "component", type: ArrayDateTimeInputComponent, selector: "array-date-time-input" }, { kind: "component", type: ArrayStringAutocompleteChipsComponent, selector: "array-string-autocomplete-chips" }, { kind: "component", type: ArrayStringChipsInputComponent, selector: "array-string-chips-input" }, { kind: "component", type: DateInputComponent, selector: "date-input" }, { kind: "component", type: DateRangeInputComponent, selector: "date-range-input" }, { kind: "component", type: DateTimeInputComponent, selector: "date-time-input" }, { kind: "component", type: FileDefaultInputComponent, selector: "file-default-input" }, { kind: "component", type: FileImageInputComponent, selector: "file-image-input" }, { kind: "component", type: ReferencesManyInputComponent, selector: "references-many-input" }, { kind: "component", type: CustomInputComponent, selector: "custom-input" }, { kind: "directive", type: DynamicStyleClassDirective, selector: "[dynamicStyleClasses]", inputs: ["dynamicStyleClasses", "value"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
|
|
7044
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: NgxMatEntityInputComponent, isStandalone: true, selector: "ngx-mat-entity-input", inputs: { entity: "entity", propertyKey: "propertyKey", getValidationErrorMessage: "getValidationErrorMessage", hideOmitForCreate: "hideOmitForCreate", hideOmitForEdit: "hideOmitForEdit", validEmpty: "validEmpty", isReadOnly: "isReadOnly" }, outputs: { inputChangeEvent: "inputChangeEvent" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "addArrayItemDialog", first: true, predicate: ["addArrayItemDialog"], descendants: true }, { propertyName: "editArrayItemDialog", first: true, predicate: ["editArrayItemDialog"], descendants: true }, { propertyName: "createHasManyDialog", first: true, predicate: ["createHasManyDialog"], descendants: true }, { propertyName: "editHasManyDialog", first: true, predicate: ["editHasManyDialog"], descendants: true }], ngImport: i0, template: "<!-- eslint-disable angular/cyclomatic-complexity -->\n<!-- eslint-disable angular/no-call-expression -->\n@if(!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)) {\n @switch (type) {\n <!-------------------------------------------->\n <!-----------------Strings-------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.STRING) {\n <string-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </string-input>\n }\n @case (DecoratorTypes.STRING_TEXTBOX) {\n <string-textbox-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </string-textbox-input>\n }\n @case (DecoratorTypes.STRING_AUTOCOMPLETE) {\n <string-autocomplete-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </string-autocomplete-input>\n }\n @case (DecoratorTypes.STRING_DROPDOWN) {\n <string-dropdown-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </string-dropdown-input>\n }\n @case (DecoratorTypes.STRING_PASSWORD) {\n <string-password-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </string-password-input>\n }\n <!-------------------------------------------->\n <!-----------------Booleans------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.BOOLEAN_CHECKBOX) {\n <boolean-checkbox-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </boolean-checkbox-input>\n }\n @case (DecoratorTypes.BOOLEAN_TOGGLE) {\n <boolean-toggle-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </boolean-toggle-input>\n }\n @case (DecoratorTypes.BOOLEAN_DROPDOWN) {\n <boolean-dropdown-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </boolean-dropdown-input>\n }\n <!-------------------------------------------->\n <!------------------Numbers------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.NUMBER) {\n <number-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </number-input>\n }\n @case (DecoratorTypes.NUMBER_DROPDOWN) {\n <number-dropdown-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </number-dropdown-input>\n }\n @case (DecoratorTypes.NUMBER_SLIDER) {\n <number-slider-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </number-slider-input>\n }\n <!-------------------------------------------->\n <!-------------------Array-------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.ARRAY_DATE) {\n <array-date-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </array-date-input>\n }\n @case (DecoratorTypes.ARRAY_DATE_TIME) {\n <array-date-time-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </array-date-time-input>\n }\n @case (DecoratorTypes.ARRAY_DATE_RANGE) {\n <array-date-range-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </array-date-range-input>\n }\n @case (DecoratorTypes.ARRAY_STRING_CHIPS) {\n <array-string-chips-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </array-string-chips-input>\n }\n @case (DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS) {\n <array-string-autocomplete-chips\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </array-string-autocomplete-chips>\n }\n <!-------------------------------------------->\n <!-------------------Dates-------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.DATE) {\n <date-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </date-input>\n }\n @case (DecoratorTypes.DATE_RANGE) {\n <date-range-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </date-range-input>\n }\n @case (DecoratorTypes.DATE_TIME) {\n <date-time-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </date-time-input>\n }\n <!-------------------------------------------->\n <!-------------------Files-------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.FILE_DEFAULT) {\n <file-default-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </file-default-input>\n }\n @case (DecoratorTypes.FILE_IMAGE) {\n <file-image-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </file-image-input>\n }\n <!-------------------------------------------->\n <!-------------- references many ------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.REFERENCES_MANY) {\n <references-many-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </references-many-input>\n }\n <!-------------------------------------------->\n <!-------------------Custom------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.CUSTOM) {\n <custom-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </custom-input>\n }\n <!-------------------------------------------->\n <!-------------------Object------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.OBJECT) {\n <b>{{metadataDefaultObject.displayName}}</b>\n <!-- iterates over the object properties -->\n <ng-container *ngTemplateOutlet=\"form; context: objectFormContext\"></ng-container>\n }\n <!-------------------------------------------->\n <!---------------Object Dropdown-------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.OBJECT_DROPDOWN) {\n <mat-form-field class=\"w-full\">\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select #model=\"ngModel\"\n [name]=\"objectDropdownName\"\n [required]=\"metadata.required(entity)\"\n [disabled]=\"internalIsReadOnly\"\n [compareWith]=\"compareObjectsBound\"\n [(ngModel)]=\"entity[propertyKey]\"\n (selectionChange)=\"emitChange()\"\n (opened)=\"selectSearchInput.focus()\"\n >\n <mat-form-field class=\"select-search-input\">\n <!-- eslint-disable-next-line angular/no-any -->\n <input #selectSearchInput matInput (keyup)=\"filterObjectDropdownValues($any($event.target).value)\">\n <fa-icon matSuffix [icon]=\"faSearch\"></fa-icon>\n </mat-form-field>\n @if (!metadata.required(entity)) {\n <mat-option>-</mat-option>\n }\n @if (shouldDisplayCurrentObjectDropdownValue) {\n <mat-option [value]=\"currentObjectDropdownValue?.value\">{{currentObjectDropdownValue?.displayName}}</mat-option>\n }\n @for (value of filteredObjectDropdownValues; track $index) {\n <mat-option [value]=\"value.value\">{{value.displayName}}</mat-option>\n }\n </mat-select>\n <mat-error>{{internalGetValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n }\n <!-------------------------------------------->\n <!-------------- references one -------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.REFERENCES_ONE) {\n <mat-form-field [class.w-full]=\"metadataReferencesOne.dropdownOnly\">\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select #inputModel=\"ngModel\"\n [name]=\"referencesOneName\"\n [disabled]=\"internalIsReadOnly\"\n [required]=\"metadata.required(entity)\"\n [(ngModel)]=\"entity[propertyKey]\"\n (selectionChange)=\"setReferencesOneObject()\"\n (opened)=\"selectSearchInput.focus()\"\n >\n <mat-form-field class=\"select-search-input\">\n <!-- eslint-disable-next-line angular/no-any -->\n <input #selectSearchInput matInput (keyup)=\"filterReferencesOneValues($any($event.target).value)\">\n <fa-icon matSuffix [icon]=\"faSearch\"></fa-icon>\n </mat-form-field>\n @if (!metadata.required(entity)) {\n <mat-option>-</mat-option>\n }\n @if (shouldDisplayCurrentReferencesOneDropdownValue) {\n <mat-option [value]=\"currentReferencesOneDropdownValue?.value\">{{currentReferencesOneDropdownValue?.displayName}}</mat-option>\n }\n @for (value of filteredReferencesOneDropdownValues; track $index) {\n <mat-option [value]=\"value.value\">{{value.displayName}}</mat-option>\n }\n </mat-select>\n <mat-error>{{internalGetValidationErrorMessage(inputModel)}}</mat-error>\n </mat-form-field>\n <!-- iterates over the references one properties -->\n @if (referencesOneFormContext) {\n <ng-container *ngTemplateOutlet=\"form; context: referencesOneFormContext\"></ng-container>\n }\n }\n <!-------------------------------------------->\n <!-------------------Array-------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.ARRAY) {\n <div class=\"entityArray\">\n <div class=\"mat-elevation-z8 elevation-container\">\n <div class=\"array-headline\">\n <b>{{metadataEntityArray.displayName}}</b>\n </div>\n @if (metadataEntityArray.createInline && !internalIsReadOnly) {\n @if (addArrayItemFormContext) {\n <ng-container *ngTemplateOutlet=\"form; context: addArrayItemFormContext\"></ng-container>\n }\n @else if (addArrayItemFormContext2) {\n <ng-container *ngTemplateOutlet=\"form; context: addArrayItemFormContext2\"></ng-container>\n }\n }\n @if (!internalIsReadOnly && entityArrayTableContext) {\n <div class=\"buttons\">\n <button type=\"button\" mat-raised-button\n [disabled]=\"metadataEntityArray.createInline && !isArrayItemValid\"\n (click)=\"addEntity()\">\n {{metadataEntityArray.addButtonLabel}}\n </button>\n <button type=\"button\" mat-raised-button\n [disabled]=\"!entityArrayTableContext.$implicit.selection.selected.length\"\n (click)=\"removeFromEntityArray()\">\n {{metadataEntityArray.removeButtonLabel}}\n </button>\n </div>\n }\n @if (entityArrayTableContext) {\n <ng-container *ngTemplateOutlet=\"table; context: entityArrayTableContext\"></ng-container>\n }\n </div>\n </div>\n }\n <!-------------------------------------------->\n <!------------------ has many ---------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.HAS_MANY) {\n <div class=\"hasMany\">\n <h2 class=\"title\">{{metadataHasMany.tableData.baseData.title}}</h2>\n <div class=\"grid grid-cols-12 gap-x-6\">\n <mat-form-field class=\"lg:col-span-8 md:col-span-6 col-span-12\">\n <mat-label>{{metadataHasMany.tableData.baseData.searchLabel}}</mat-label>\n <input matInput (keyup)=\"applyHasManyFilter($event)\">\n </mat-form-field>\n @if (metadataHasMany.tableData.baseData.tableActions.length) {\n <div\n [class.lg:col-span-2]=\"hasManyAllowCreate\"\n [class.lg:col-span-4]=\"!hasManyAllowCreate\"\n [class.md:col-span-3]=\"hasManyAllowCreate\"\n [class.md:col-span-6]=\"!hasManyAllowCreate\"\n [class.col-span-6]=\"hasManyAllowCreate\"\n [class.col-span-12]=\"!hasManyAllowCreate\"\n >\n <button type=\"button\" class=\"actions-button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n {{metadataHasMany.tableData.baseData.tableActionsLabel}}\n </button>\n </div>\n }\n <mat-menu #menu=\"matMenu\">\n @if (metadataHasMany.tableData.baseData.allowJsonImport) {\n <button type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(hasManyImportAction)\" (click)=\"runHasManyTableAction(hasManyImportAction)\">\n {{hasManyImportAction.displayName}}\n </button>\n }\n @for (action of metadataHasMany.tableData.baseData.tableActions; track $index) {\n <button type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(action)\" (click)=\"runHasManyTableAction(action)\">\n {{action.displayName}}\n </button>\n }\n </mat-menu>\n @if (hasManyAllowCreate) {\n <div\n [class.lg:col-span-2]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n [class.lg:col-span-4]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n [class.md:col-span-3]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n [class.md:col-span-6]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n [class.col-span-6]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n [class.col-span-12]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n >\n <button type=\"button\" class=\"create-button\" mat-raised-button (click)=\"createHasManyEntity()\">\n {{metadataHasMany.tableData.baseData.createButtonLabel}}\n </button>\n </div>\n }\n </div>\n \n <div class=\"mat-elevation-z8 elevation-container\">\n @if (hasManyTableContext) {\n <ng-container *ngTemplateOutlet=\"table; context: hasManyTableContext\"></ng-container>\n }\n </div>\n </div>\n }\n \n @default {\n <div>ERROR: The type {{type}} is not known.</div>\n }\n }\n}\n\n\n<ng-template #table let-context>\n <mat-table matSort [dataSource]=\"context.dataSource\" [class.table-with-error-slot]=\"context.shouldShowMissingError\">\n <!-- select Column -->\n <ng-container matColumnDef=\"select\">\n <mat-header-cell *matHeaderCellDef>\n <mat-checkbox [checked]=\"context.selection.hasValue() && SelectionUtilities.isAllSelected(context.selection, context.dataSource)\"\n [indeterminate]=\"context.selection.hasValue() && !SelectionUtilities.isAllSelected(context.selection, context.dataSource)\"\n (change)=\"$event ? SelectionUtilities.masterToggle(context.selection, context.dataSource) : null\">\n </mat-checkbox>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let value\" [dynamicStyleClasses]=\"context.dynamicRowStyleClasses\" [value]=\"value\">\n <mat-checkbox [checked]=\"context.selection.isSelected(value)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? context.selection.toggle(value) : null\">\n </mat-checkbox>\n </mat-cell>\n </ng-container>\n\n @for (dCol of context.displayColumns; track $index) {\n <ng-container [matColumnDef]=\"dCol.displayName\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n {{dCol.displayName}}\n </mat-header-cell>\n <mat-cell *matCellDef=\"let value\" [class.enabled]=\"!dCol.disableClick && context.allowClick(value)\"\n [dynamicStyleClasses]=\"context.dynamicRowStyleClasses\" [value]=\"value\"\n (click)=\"clickCell(value, dCol, context)\"\n >\n @if (dCol.Component) {\n <display-column-value [entity]=\"value\" [ComponentClass]=\"dCol.Component\"></display-column-value>\n }\n @else {\n {{getDisplayColumnValue(value, dCol)}}\n }\n </mat-cell>\n </ng-container>\n }\n\n <mat-header-row *matHeaderRowDef=\"context.displayedColumns\"></mat-header-row>\n <mat-row *matRowDef=\"let row; columns: context.displayedColumns\"></mat-row>\n </mat-table>\n\n @if (context.displayLoadingSpinner && context.isLoading) {\n <mat-spinner>\n </mat-spinner>\n }\n @else if (context.shouldShowMissingError && !context.dataSource.data.length) {\n <div class=\"table-error\">{{context.emptyErrorMessage}}</div>\n }\n\n <mat-paginator [length]=\"context.dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n</ng-template>\n\n<!--------------------------------------------------------->\n<!---------------------------Form-------------------------->\n<!--------------------------------------------------------->\n<ng-template #form let-context>\n <!-- eslint-disable angular/no-call-expression -->\n @if (context.tabs.length > 1) {\n <mat-tab-group preserveContent>\n @for (tab of context.tabs; track $index) {\n <mat-tab [label]=\"tab.tabName\">\n @for (row of tab.rows; track $index) {\n <div class=\"grid grid-cols-12 gap-x-6\">\n @for (key of row.keys; track key) {\n <ngx-mat-entity-input\n [entity]=\"context.entity\"\n [propertyKey]=\"key\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [validEmpty]=\"context.validEmpty?.()\"\n [isReadOnly]=\"context.isReadOnly?.(context.entity, key)\"\n [class]=\"EntityUtilities.getWidthClasses(context.entity, key)\"\n [hideOmitForEdit]=\"context.hideOmitForEdit\"\n [hideOmitForCreate]=\"context.hideOmitForCreate\"\n (inputChangeEvent)=\"context.inputChangeEvent()\"\n >\n </ngx-mat-entity-input>\n }\n </div>\n }\n </mat-tab>\n }\n </mat-tab-group>\n }\n @else {\n @if (!context.tabs.length) {\n <span class=\"no-entity-tabs\">\n ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n </span>\n }\n @else {\n @for (row of context.tabs[0].rows; track $index) {\n <div class=\"grid grid-cols-12 gap-x-6\">\n @for (key of row.keys; track key) {\n <ngx-mat-entity-input\n [entity]=\"context.entity\"\n [propertyKey]=\"key\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [validEmpty]=\"context.validEmpty?.()\"\n [isReadOnly]=\"context.isReadOnly?.(context.entity, key)\"\n [class]=\"EntityUtilities.getWidthClasses(context.entity, key)\"\n [hideOmitForEdit]=\"context.hideOmitForEdit\"\n [hideOmitForCreate]=\"context.hideOmitForCreate\"\n (inputChangeEvent)=\"context.inputChangeEvent()\"\n >\n </ngx-mat-entity-input>\n }\n </div>\n }\n }\n }\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Add Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #addArrayItemDialog>\n <div class=\"mat-dialog-title\">\n <div>{{addArrayItemDialogData.title}}</div>\n </div>\n\n <form (ngSubmit)=\"addArrayItem()\">\n <mat-dialog-content>\n @if (addArrayItemFormContext) {\n <ng-container *ngTemplateOutlet=\"form; context: addArrayItemFormContext\"></ng-container>\n }\n </mat-dialog-content>\n \n <mat-dialog-actions>\n <div class=\"dialog-button-with-info-icon\">\n <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n [disabled]=\"!isArrayItemValid\"\n [matBadge]=\"arrayItemValidationErrors.length\"\n [matBadgeHidden]=\"!arrayItemValidationErrors.length\"\n >\n {{addArrayItemDialogData.createButtonLabel}}\n </button>\n @if (arrayItemValidationErrors.length) {\n <ngx-mat-entity-tooltip [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n }\n </div>\n <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"closeAddArrayItemDialog()\">\n {{addArrayItemDialogData.cancelButtonLabel}}\n </button>\n </mat-dialog-actions>\n </form>\n\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Edit Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #editArrayItemDialog>\n <div class=\"mat-dialog-title\">\n <div>{{editArrayItemDialogData.title(arrayItemPriorChanges)}}</div>\n </div>\n \n <form (ngSubmit)=\"saveArrayItem()\">\n <mat-dialog-content>\n @if (editArrayItemFormContext) {\n <ng-container *ngTemplateOutlet=\"form; context: editArrayItemFormContext\"></ng-container>\n }\n </mat-dialog-content>\n \n <mat-dialog-actions>\n <div class=\"dialog-button-with-info-icon\">\n <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n [class.badge-changes]=\"!arrayItemValidationErrors.length\"\n [disabled]=\"internalIsReadOnly || !isArrayItemValid || !isArrayItemDirty\"\n [matBadge]=\"arrayItemValidationErrors.length > 0 ? arrayItemValidationErrors.length : arrayItemChanges.length\"\n [matBadgeHidden]=\"!arrayItemValidationErrors.length && !arrayItemChanges.length\"\n >\n {{editArrayItemDialogData.confirmButtonLabel}}\n </button>\n @if (arrayItemValidationErrors.length || arrayItemChanges.length) {\n <ngx-mat-entity-tooltip [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n }\n </div>\n <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"closeEditArrayItemDialog()\">\n {{editArrayItemDialogData.cancelButtonLabel}}\n </button>\n </mat-dialog-actions>\n </form>\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Create Has Many Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #createHasManyDialog>\n <div class=\"mat-dialog-title\">\n <div>{{metadataHasMany.tableData.createData.title}}</div>\n </div>\n \n <form (ngSubmit)=\"dialogCreateHasMany()\">\n <mat-dialog-content>\n @if (hasManyCreateFormContext) {\n <ng-container *ngTemplateOutlet=\"form; context: hasManyCreateFormContext\"></ng-container>\n }\n </mat-dialog-content>\n \n <mat-dialog-actions>\n <div class=\"dialog-button-with-info-icon\">\n <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n [disabled]=\"!isHasManyEntityValid\"\n [matBadge]=\"hasManyValidationErrors.length\"\n [matBadgeHidden]=\"!hasManyValidationErrors.length\"\n >\n {{metadataHasMany.tableData.createData.createButtonLabel}}\n </button>\n @if (hasManyValidationErrors.length) {\n <ngx-mat-entity-tooltip [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n }\n </div>\n <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"dialogCancelCreateHasMany()\">\n {{metadataHasMany.tableData.createData.cancelButtonLabel}}\n </button>\n </mat-dialog-actions>\n </form>\n \n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Edit Has Many Dialog----------------->\n<!--------------------------------------------------------->\n<ng-template #editHasManyDialog>\n <div class=\"mat-dialog-title\">\n <div>{{metadataHasMany.tableData.editData.title(hasManyEntityPriorChanges)}}</div>\n\n <div class=\"actions-container\">\n @if (metadataHasMany.tableData.editData.actions.length) {\n <button type=\"button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n {{metadataHasMany.tableData.editData.actionsLabel}}\n </button>\n }\n <mat-menu #menu=\"matMenu\">\n @for (action of metadataHasMany.tableData.editData.actions; track $index) {\n <button type=\"button\" mat-menu-item [disabled]=\"hasManyEditActionDisabled(action)\" (click)=\"hasManyRunEditAction(action)\">\n {{action.displayName}}\n </button>\n }\n </mat-menu>\n \n @if (hasManyAllowDelete(hasManyEntity)) {\n <button type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"deleteHasManyEntity()\">\n {{metadataHasMany.tableData.editData.deleteButtonLabel}}\n </button>\n }\n </div>\n </div>\n \n <form (ngSubmit)=\"dialogEditHasMany()\">\n <mat-dialog-content>\n @if (hasManyEditFormContext) {\n <ng-container *ngTemplateOutlet=\"form; context: hasManyEditFormContext\"></ng-container>\n }\n </mat-dialog-content>\n \n <mat-dialog-actions>\n <div class=\"dialog-button-with-info-icon\">\n <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n [class.badge-changes]=\"!hasManyValidationErrors.length\"\n [disabled]=\"internalIsReadOnly || !isHasManyEntityValid || !isHasManyEntityDirty\"\n [matBadge]=\"hasManyValidationErrors.length > 0 ? hasManyValidationErrors.length : hasManyChanges.length\"\n [matBadgeHidden]=\"!hasManyValidationErrors.length && !hasManyChanges.length\"\n >\n {{metadataHasMany.tableData.editData.confirmButtonLabel}}\n </button>\n @if (hasManyValidationErrors.length || hasManyChanges.length) {\n <ngx-mat-entity-tooltip [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n }\n </div>\n <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"dialogCancelEditHasMany()\">\n {{metadataHasMany.tableData.editData.cancelButtonLabel}}\n </button>\n </mat-dialog-actions>\n </form>\n</ng-template>", styles: ["::ng-deep mat-tab-body{padding-top:10px;padding-left:12px;padding-right:12px}::ng-deep mat-tab-body .mat-mdc-tab-body-content{overflow:initial}::ng-deep .mat-mdc-tab-body-wrapper{margin-left:-12px;margin-right:-12px}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:16px}::ng-deep .select-search-input{width:100%;margin-top:-8px;margin-bottom:8px}::ng-deep .select-search-input .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-form-field.mat-form-field-disabled label{color:#0009}::ng-deep .mat-mdc-form-field.mat-form-field-disabled input,::ng-deep .mat-mdc-form-field.mat-form-field-disabled textarea,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-disabled,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#000!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:#707070}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:checked~.mdc-checkbox__background,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:indeterminate~.mdc-checkbox__background,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true][disabled]~.mdc-checkbox__background{background-color:#000}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled{opacity:1}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled button{opacity:.2}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__icons,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icons{opacity:1}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__handle:after,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__handle:after{opacity:1;background:#000}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__track,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__track{opacity:.3}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-date-range-input-inner:disabled{color:#000}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled{opacity:1}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled .mdc-slider__input{cursor:default}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mat-mdc-slider,::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mdc-slider__thumb:hover,::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mdc-slider__thumb-knob{background-color:#000;border-color:#000}::ng-deep .mat-mdc-form-field .mat-mdc-slide-toggle{opacity:1}::ng-deep .badge-changes .mat-badge-content{background-color:orange;color:#fff}mat-spinner{margin:10px auto}.mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}mat-paginator{padding-top:10px;padding-bottom:10px}.dialog-button-with-info-icon{margin-top:10px;gap:12px;display:flex;align-items:center}.actions-container{display:flex;gap:10px}.w-full{width:100%}.table-with-error-slot{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:5px}.mat-column-select{flex:0 0 48px;padding-left:0;padding-right:0;justify-content:center}.enabled:hover{cursor:pointer}.table-error{display:flex;align-items:center;justify-content:center;margin-top:-6px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:fit-content;padding-left:4px;padding-right:4px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.entityArray .elevation-container{border-radius:5px;padding:15px 15px 0;margin-bottom:15px;margin-top:15px}.entityArray .array-headline{padding-bottom:10px}.entityArray .buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px;column-gap:24px}.entityArray .buttons button{flex:1}.hasMany button{width:100%;height:56px;line-height:24px;font-size:16px}.hasMany .title{text-align:center}.hasMany .elevation-container{margin-bottom:15px}\n", "::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}.mat-dialog-title{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}\n", ".grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.gap-x-6{column-gap:24px}.grid{display:grid}@media (min-width: 1024px){.lg\\:col-span-12{grid-column:span 12/span 12!important}.lg\\:col-span-11{grid-column:span 11/span 11!important}.lg\\:col-span-10{grid-column:span 10/span 10!important}.lg\\:col-span-9{grid-column:span 9/span 9!important}.lg\\:col-span-8{grid-column:span 8/span 8!important}.lg\\:col-span-7{grid-column:span 7/span 7!important}.lg\\:col-span-6{grid-column:span 6/span 6!important}.lg\\:col-span-5{grid-column:span 5/span 5!important}.lg\\:col-span-4{grid-column:span 4/span 4!important}.lg\\:col-span-3{grid-column:span 3/span 3!important}.lg\\:col-span-2{grid-column:span 2/span 2!important}.lg\\:col-span-1{grid-column:span 1/span 1!important}}@media (min-width: 768px) and (max-width: 1023px){.md\\:col-span-12{grid-column:span 12/span 12!important}.md\\:col-span-11{grid-column:span 11/span 11!important}.md\\:col-span-10{grid-column:span 10/span 10!important}.md\\:col-span-9{grid-column:span 9/span 9!important}.md\\:col-span-8{grid-column:span 8/span 8!important}.md\\:col-span-7{grid-column:span 7/span 7!important}.md\\:col-span-6{grid-column:span 6/span 6!important}.md\\:col-span-5{grid-column:span 5/span 5!important}.md\\:col-span-4{grid-column:span 4/span 4!important}.md\\:col-span-3{grid-column:span 3/span 3!important}.md\\:col-span-2{grid-column:span 2/span 2!important}.md\\:col-span-1{grid-column:span 1/span 1!important}}.col-span-12{grid-column:span 12/span 12}.col-span-11{grid-column:span 11/span 11}.col-span-10{grid-column:span 10/span 10}.col-span-9{grid-column:span 9/span 9}.col-span-8{grid-column:span 8/span 8}.col-span-7{grid-column:span 7/span 7}.col-span-6{grid-column:span 6/span 6}.col-span-5{grid-column:span 5/span 5}.col-span-4{grid-column:span 4/span 4}.col-span-3{grid-column:span 3/span 3}.col-span-2{grid-column:span 2/span 2}.col-span-1{grid-column:span 1/span 1}\n"], dependencies: [{ kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "validEmpty", "isReadOnly"], outputs: ["inputChangeEvent"] }, { kind: "component", type: DisplayColumnValueComponent, selector: "display-column-value", inputs: ["entity", "ComponentClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i5$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i5$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$3.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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i9.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.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: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.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: MatPaginatorModule }, { kind: "component", type: i3$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: TooltipComponent, selector: "ngx-mat-entity-tooltip", inputs: ["tooltipContent"] }, { kind: "component", type: StringInputComponent, selector: "string-input" }, { kind: "component", type: StringTextboxInputComponent, selector: "string-textbox-input" }, { kind: "component", type: StringAutocompleteInputComponent, selector: "string-autocomplete-input" }, { kind: "component", type: StringDropdownInputComponent, selector: "string-dropdown-input" }, { kind: "component", type: StringPasswordInputComponent, selector: "string-password-input" }, { kind: "component", type: BooleanCheckboxInputComponent, selector: "boolean-checkbox-input" }, { kind: "component", type: BooleanToggleInputComponent, selector: "boolean-toggle-input" }, { kind: "component", type: BooleanDropdownInputComponent, selector: "boolean-dropdown-input" }, { kind: "component", type: NumberInputComponent, selector: "number-input" }, { kind: "component", type: NumberDropdownInputComponent, selector: "number-dropdown-input" }, { kind: "component", type: NumberSliderInputComponent, selector: "number-slider-input" }, { kind: "component", type: ArrayDateInputComponent, selector: "array-date-input" }, { kind: "component", type: ArrayDateRangeInputComponent, selector: "array-date-range-input" }, { kind: "component", type: ArrayDateTimeInputComponent, selector: "array-date-time-input" }, { kind: "component", type: ArrayStringAutocompleteChipsComponent, selector: "array-string-autocomplete-chips" }, { kind: "component", type: ArrayStringChipsInputComponent, selector: "array-string-chips-input" }, { kind: "component", type: DateInputComponent, selector: "date-input" }, { kind: "component", type: DateRangeInputComponent, selector: "date-range-input" }, { kind: "component", type: DateTimeInputComponent, selector: "date-time-input" }, { kind: "component", type: FileDefaultInputComponent, selector: "file-default-input" }, { kind: "component", type: FileImageInputComponent, selector: "file-image-input" }, { kind: "component", type: ReferencesManyInputComponent, selector: "references-many-input" }, { kind: "component", type: CustomInputComponent, selector: "custom-input" }, { kind: "directive", type: DynamicStyleClassDirective, selector: "[dynamicStyleClasses]", inputs: ["dynamicStyleClasses", "value"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
|
|
7043
7045
|
}
|
|
7044
7046
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgxMatEntityInputComponent, decorators: [{
|
|
7045
7047
|
type: Component,
|
|
@@ -7086,7 +7088,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
|
|
|
7086
7088
|
DynamicStyleClassDirective,
|
|
7087
7089
|
MatSortModule,
|
|
7088
7090
|
FaIconComponent
|
|
7089
|
-
], template: "<!-- eslint-disable angular/no-call-expression -->\n@if(!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)) {\n @switch (type) {\n <!-------------------------------------------->\n <!-----------------Strings-------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.STRING) {\n <string-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </string-input>\n }\n @case (DecoratorTypes.STRING_TEXTBOX) {\n <string-textbox-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </string-textbox-input>\n }\n @case (DecoratorTypes.STRING_AUTOCOMPLETE) {\n <string-autocomplete-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </string-autocomplete-input>\n }\n @case (DecoratorTypes.STRING_DROPDOWN) {\n <string-dropdown-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </string-dropdown-input>\n }\n @case (DecoratorTypes.STRING_PASSWORD) {\n <string-password-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </string-password-input>\n }\n <!-------------------------------------------->\n <!-----------------Booleans------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.BOOLEAN_CHECKBOX) {\n <boolean-checkbox-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </boolean-checkbox-input>\n }\n @case (DecoratorTypes.BOOLEAN_TOGGLE) {\n <boolean-toggle-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </boolean-toggle-input>\n }\n @case (DecoratorTypes.BOOLEAN_DROPDOWN) {\n <boolean-dropdown-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </boolean-dropdown-input>\n }\n <!-------------------------------------------->\n <!------------------Numbers------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.NUMBER) {\n <number-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </number-input>\n }\n @case (DecoratorTypes.NUMBER_DROPDOWN) {\n <number-dropdown-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </number-dropdown-input>\n }\n @case (DecoratorTypes.NUMBER_SLIDER) {\n <number-slider-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </number-slider-input>\n }\n <!-------------------------------------------->\n <!-------------------Array-------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.ARRAY_DATE) {\n <array-date-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </array-date-input>\n }\n @case (DecoratorTypes.ARRAY_DATE_TIME) {\n <array-date-time-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </array-date-time-input>\n }\n @case (DecoratorTypes.ARRAY_DATE_RANGE) {\n <array-date-range-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </array-date-range-input>\n }\n @case (DecoratorTypes.ARRAY_STRING_CHIPS) {\n <array-string-chips-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </array-string-chips-input>\n }\n @case (DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS) {\n <array-string-autocomplete-chips\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </array-string-autocomplete-chips>\n }\n <!-------------------------------------------->\n <!-------------------Dates-------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.DATE) {\n <date-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </date-input>\n }\n @case (DecoratorTypes.DATE_RANGE) {\n <date-range-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </date-range-input>\n }\n @case (DecoratorTypes.DATE_TIME) {\n <date-time-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </date-time-input>\n }\n <!-------------------------------------------->\n <!-------------------Files-------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.FILE_DEFAULT) {\n <file-default-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </file-default-input>\n }\n @case (DecoratorTypes.FILE_IMAGE) {\n <file-image-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </file-image-input>\n }\n <!-------------------------------------------->\n <!-------------- references many ------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.REFERENCES_MANY) {\n <references-many-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </references-many-input>\n }\n <!-------------------------------------------->\n <!-------------------Custom------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.CUSTOM) {\n <custom-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </custom-input>\n }\n <!-------------------------------------------->\n <!-------------------Object------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.OBJECT) {\n <b>{{metadataDefaultObject.displayName}}</b>\n <!-- iterates over the object properties -->\n <ng-container *ngTemplateOutlet=\"form; context: objectFormContext\"></ng-container>\n }\n <!-------------------------------------------->\n <!---------------Object Dropdown-------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.OBJECT_DROPDOWN) {\n <mat-form-field class=\"w-full\">\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select #model=\"ngModel\"\n [name]=\"objectDropdownName\"\n [required]=\"metadata.required(entity)\"\n [disabled]=\"internalIsReadOnly\"\n [compareWith]=\"compareObjectsBound\"\n [(ngModel)]=\"entity[propertyKey]\"\n (selectionChange)=\"emitChange()\"\n (opened)=\"selectSearchInput.focus()\"\n >\n <mat-form-field class=\"select-search-input\">\n <!-- eslint-disable-next-line angular/no-any -->\n <input #selectSearchInput matInput (keyup)=\"filterObjectDropdownValues($any($event.target).value)\">\n <fa-icon matSuffix [icon]=\"faSearch\"></fa-icon>\n </mat-form-field>\n @if (!metadata.required(entity)) {\n <mat-option>-</mat-option>\n }\n @if (shouldDisplayCurrentObjectDropdownValue) {\n <mat-option [value]=\"currentObjectDropdownValue?.value\">{{currentObjectDropdownValue?.displayName}}</mat-option>\n }\n @for (value of filteredObjectDropdownValues; track $index) {\n <mat-option [value]=\"value.value\">{{value.displayName}}</mat-option>\n }\n </mat-select>\n <mat-error>{{internalGetValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n }\n <!-------------------------------------------->\n <!-------------- references one -------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.REFERENCES_ONE) {\n <mat-form-field [class.w-full]=\"metadataReferencesOne.dropdownOnly\">\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select #inputModel=\"ngModel\"\n [name]=\"referencesOneName\"\n [disabled]=\"internalIsReadOnly\"\n [required]=\"metadata.required(entity)\"\n [(ngModel)]=\"entity[propertyKey]\"\n (selectionChange)=\"setReferencesOneObject()\"\n (opened)=\"selectSearchInput.focus()\"\n >\n <mat-form-field class=\"select-search-input\">\n <!-- eslint-disable-next-line angular/no-any -->\n <input #selectSearchInput matInput (keyup)=\"filterReferencesOneValues($any($event.target).value)\">\n <fa-icon matSuffix [icon]=\"faSearch\"></fa-icon>\n </mat-form-field>\n @if (!metadata.required(entity)) {\n <mat-option>-</mat-option>\n }\n @if (shouldDisplayCurrentReferencesOneDropdownValue) {\n <mat-option [value]=\"currentReferencesOneDropdownValue?.value\">{{currentReferencesOneDropdownValue?.displayName}}</mat-option>\n }\n @for (value of filteredReferencesOneDropdownValues; track $index) {\n <mat-option [value]=\"value.value\">{{value.displayName}}</mat-option>\n }\n </mat-select>\n <mat-error>{{internalGetValidationErrorMessage(inputModel)}}</mat-error>\n </mat-form-field>\n <!-- iterates over the references one properties -->\n @if (referencesOneFormContext) {\n <ng-container *ngTemplateOutlet=\"form; context: referencesOneFormContext\"></ng-container>\n }\n }\n <!-------------------------------------------->\n <!-------------------Array-------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.ARRAY) {\n <div class=\"entityArray\">\n <div class=\"mat-elevation-z8 elevation-container\">\n <div class=\"array-headline\">\n <b>{{metadataEntityArray.displayName}}</b>\n </div>\n @if (metadataEntityArray.createInline && !internalIsReadOnly) {\n @if (addArrayItemFormContext) {\n <ng-container *ngTemplateOutlet=\"form; context: addArrayItemFormContext\"></ng-container>\n }\n @else if (addArrayItemFormContext2) {\n <ng-container *ngTemplateOutlet=\"form; context: addArrayItemFormContext2\"></ng-container>\n }\n }\n @if (!internalIsReadOnly && entityArrayTableContext) {\n <div class=\"buttons\">\n <button type=\"button\" mat-raised-button\n [disabled]=\"metadataEntityArray.createInline && !isArrayItemValid\"\n (click)=\"addEntity()\">\n {{metadataEntityArray.addButtonLabel}}\n </button>\n <button type=\"button\" mat-raised-button\n [disabled]=\"!entityArrayTableContext.$implicit.selection.selected.length\"\n (click)=\"removeFromEntityArray()\">\n {{metadataEntityArray.removeButtonLabel}}\n </button>\n </div>\n }\n @if (entityArrayTableContext) {\n <ng-container *ngTemplateOutlet=\"table; context: entityArrayTableContext\"></ng-container>\n }\n </div>\n </div>\n }\n <!-------------------------------------------->\n <!------------------ has many ---------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.HAS_MANY) {\n <div class=\"hasMany\">\n <h2 class=\"title\">{{metadataHasMany.tableData.baseData.title}}</h2>\n <div class=\"grid grid-cols-12 gap-x-6\">\n <mat-form-field class=\"lg:col-span-8 md:col-span-6 col-span-12\">\n <mat-label>{{metadataHasMany.tableData.baseData.searchLabel}}</mat-label>\n <input matInput (keyup)=\"applyHasManyFilter($event)\">\n </mat-form-field>\n @if (metadataHasMany.tableData.baseData.tableActions.length) {\n <div\n [class.lg:col-span-2]=\"hasManyAllowCreate\"\n [class.lg:col-span-4]=\"!hasManyAllowCreate\"\n [class.md:col-span-3]=\"hasManyAllowCreate\"\n [class.md:col-span-6]=\"!hasManyAllowCreate\"\n [class.col-span-6]=\"hasManyAllowCreate\"\n [class.col-span-12]=\"!hasManyAllowCreate\"\n >\n <button type=\"button\" class=\"actions-button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n {{metadataHasMany.tableData.baseData.tableActionsLabel}}\n </button>\n </div>\n }\n <mat-menu #menu=\"matMenu\">\n @if (metadataHasMany.tableData.baseData.allowJsonImport) {\n <button type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(hasManyImportAction)\" (click)=\"runHasManyTableAction(hasManyImportAction)\">\n {{hasManyImportAction.displayName}}\n </button>\n }\n @for (action of metadataHasMany.tableData.baseData.tableActions; track $index) {\n <button type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(action)\" (click)=\"runHasManyTableAction(action)\">\n {{action.displayName}}\n </button>\n }\n </mat-menu>\n @if (hasManyAllowCreate) {\n <div\n [class.lg:col-span-2]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n [class.lg:col-span-4]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n [class.md:col-span-3]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n [class.md:col-span-6]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n [class.col-span-6]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n [class.col-span-12]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n >\n <button type=\"button\" class=\"create-button\" mat-raised-button (click)=\"createHasManyEntity()\">\n {{metadataHasMany.tableData.baseData.createButtonLabel}}\n </button>\n </div>\n }\n </div>\n \n <div class=\"mat-elevation-z8 elevation-container\">\n @if (hasManyTableContext) {\n <ng-container *ngTemplateOutlet=\"table; context: hasManyTableContext\"></ng-container>\n }\n </div>\n </div>\n }\n \n @default {\n <div>ERROR: The type {{type}} is not known.</div>\n }\n }\n}\n\n\n<ng-template #table let-context>\n <mat-table matSort [dataSource]=\"context.dataSource\" [class.table-with-error-slot]=\"context.shouldShowMissingError\">\n <!-- select Column -->\n <ng-container matColumnDef=\"select\">\n <mat-header-cell *matHeaderCellDef>\n <mat-checkbox [checked]=\"context.selection.hasValue() && SelectionUtilities.isAllSelected(context.selection, context.dataSource)\"\n [indeterminate]=\"context.selection.hasValue() && !SelectionUtilities.isAllSelected(context.selection, context.dataSource)\"\n (change)=\"$event ? SelectionUtilities.masterToggle(context.selection, context.dataSource) : null\">\n </mat-checkbox>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let value\" [dynamicStyleClasses]=\"context.dynamicRowStyleClasses\" [value]=\"value\">\n <mat-checkbox [checked]=\"context.selection.isSelected(value)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? context.selection.toggle(value) : null\">\n </mat-checkbox>\n </mat-cell>\n </ng-container>\n\n @for (dCol of context.displayColumns; track $index) {\n <ng-container [matColumnDef]=\"dCol.displayName\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n {{dCol.displayName}}\n </mat-header-cell>\n <mat-cell *matCellDef=\"let value\" [class.enabled]=\"!dCol.disableClick && context.allowClick(value)\"\n [dynamicStyleClasses]=\"context.dynamicRowStyleClasses\" [value]=\"value\"\n (click)=\"clickCell(value, dCol, context)\"\n >\n @if (dCol.Component) {\n <display-column-value [entity]=\"value\" [ComponentClass]=\"dCol.Component\"></display-column-value>\n }\n @else {\n {{getDisplayColumnValue(value, dCol)}}\n }\n </mat-cell>\n </ng-container>\n }\n\n <mat-header-row *matHeaderRowDef=\"context.displayedColumns\"></mat-header-row>\n <mat-row *matRowDef=\"let row; columns: context.displayedColumns\"></mat-row>\n </mat-table>\n\n @if (context.displayLoadingSpinner && context.isLoading) {\n <mat-spinner>\n </mat-spinner>\n }\n @else if (context.shouldShowMissingError && !context.dataSource.data.length) {\n <div class=\"table-error\">{{context.emptyErrorMessage}}</div>\n }\n\n <mat-paginator [length]=\"context.dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n</ng-template>\n\n<!--------------------------------------------------------->\n<!---------------------------Form-------------------------->\n<!--------------------------------------------------------->\n<ng-template #form let-context>\n <!-- eslint-disable angular/no-call-expression -->\n @if (context.tabs.length > 1) {\n <mat-tab-group preserveContent>\n @for (tab of context.tabs; track $index) {\n <mat-tab [label]=\"tab.tabName\">\n @for (row of tab.rows; track $index) {\n <div class=\"grid grid-cols-12 gap-x-6\">\n @for (key of row.keys; track key) {\n <ngx-mat-entity-input\n [entity]=\"context.entity\"\n [propertyKey]=\"key\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [validEmpty]=\"context.validEmpty?.()\"\n [isReadOnly]=\"context.isReadOnly?.(context.entity, key)\"\n [class]=\"EntityUtilities.getWidthClasses(context.entity, key)\"\n [hideOmitForEdit]=\"context.hideOmitForEdit\"\n [hideOmitForCreate]=\"context.hideOmitForCreate\"\n (inputChangeEvent)=\"context.inputChangeEvent()\"\n >\n </ngx-mat-entity-input>\n }\n </div>\n }\n </mat-tab>\n }\n </mat-tab-group>\n }\n @else {\n @if (!context.tabs.length) {\n <span class=\"no-entity-tabs\">\n ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n </span>\n }\n @else {\n @for (row of context.tabs[0].rows; track $index) {\n <div class=\"grid grid-cols-12 gap-x-6\">\n @for (key of row.keys; track key) {\n <ngx-mat-entity-input\n [entity]=\"context.entity\"\n [propertyKey]=\"key\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [validEmpty]=\"context.validEmpty?.()\"\n [isReadOnly]=\"context.isReadOnly?.(context.entity, key)\"\n [class]=\"EntityUtilities.getWidthClasses(context.entity, key)\"\n [hideOmitForEdit]=\"context.hideOmitForEdit\"\n [hideOmitForCreate]=\"context.hideOmitForCreate\"\n (inputChangeEvent)=\"context.inputChangeEvent()\"\n >\n </ngx-mat-entity-input>\n }\n </div>\n }\n }\n }\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Add Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #addArrayItemDialog>\n <div class=\"mat-dialog-title\">\n <div>{{addArrayItemDialogData.title}}</div>\n </div>\n\n <form (ngSubmit)=\"addArrayItem()\">\n <mat-dialog-content>\n @if (addArrayItemFormContext) {\n <ng-container *ngTemplateOutlet=\"form; context: addArrayItemFormContext\"></ng-container>\n }\n </mat-dialog-content>\n \n <mat-dialog-actions>\n <div class=\"dialog-button-with-info-icon\">\n <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n [disabled]=\"!isArrayItemValid\"\n [matBadge]=\"arrayItemValidationErrors.length\"\n [matBadgeHidden]=\"!arrayItemValidationErrors.length\"\n >\n {{addArrayItemDialogData.createButtonLabel}}\n </button>\n @if (arrayItemValidationErrors.length) {\n <ngx-mat-entity-tooltip [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n }\n </div>\n <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"closeAddArrayItemDialog()\">\n {{addArrayItemDialogData.cancelButtonLabel}}\n </button>\n </mat-dialog-actions>\n </form>\n\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Edit Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #editArrayItemDialog>\n <div class=\"mat-dialog-title\">\n <div>{{editArrayItemDialogData.title(arrayItemPriorChanges)}}</div>\n </div>\n \n <form (ngSubmit)=\"saveArrayItem()\">\n <mat-dialog-content>\n @if (editArrayItemFormContext) {\n <ng-container *ngTemplateOutlet=\"form; context: editArrayItemFormContext\"></ng-container>\n }\n </mat-dialog-content>\n \n <mat-dialog-actions>\n <div class=\"dialog-button-with-info-icon\">\n <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n [class.badge-changes]=\"!arrayItemValidationErrors.length\"\n [disabled]=\"internalIsReadOnly || !isArrayItemValid || !isArrayItemDirty\"\n [matBadge]=\"arrayItemValidationErrors.length > 0 ? arrayItemValidationErrors.length : arrayItemChanges.length\"\n [matBadgeHidden]=\"!arrayItemValidationErrors.length && !arrayItemChanges.length\"\n >\n {{editArrayItemDialogData.confirmButtonLabel}}\n </button>\n @if (arrayItemValidationErrors.length || arrayItemChanges.length) {\n <ngx-mat-entity-tooltip [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n }\n </div>\n <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"closeEditArrayItemDialog()\">\n {{editArrayItemDialogData.cancelButtonLabel}}\n </button>\n </mat-dialog-actions>\n </form>\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Create Has Many Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #createHasManyDialog>\n <div class=\"mat-dialog-title\">\n <div>{{metadataHasMany.tableData.createData.title}}</div>\n </div>\n \n <form (ngSubmit)=\"dialogCreateHasMany()\">\n <mat-dialog-content>\n @if (hasManyCreateFormContext) {\n <ng-container *ngTemplateOutlet=\"form; context: hasManyCreateFormContext\"></ng-container>\n }\n </mat-dialog-content>\n \n <mat-dialog-actions>\n <div class=\"dialog-button-with-info-icon\">\n <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n [disabled]=\"!isHasManyEntityValid\"\n [matBadge]=\"hasManyValidationErrors.length\"\n [matBadgeHidden]=\"!hasManyValidationErrors.length\"\n >\n {{metadataHasMany.tableData.createData.createButtonLabel}}\n </button>\n @if (hasManyValidationErrors.length) {\n <ngx-mat-entity-tooltip [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n }\n </div>\n <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"dialogCancelCreateHasMany()\">\n {{metadataHasMany.tableData.createData.cancelButtonLabel}}\n </button>\n </mat-dialog-actions>\n </form>\n \n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Edit Has Many Dialog----------------->\n<!--------------------------------------------------------->\n<ng-template #editHasManyDialog>\n <div class=\"mat-dialog-title\">\n <div>{{metadataHasMany.tableData.editData.title(hasManyEntityPriorChanges)}}</div>\n\n <div class=\"actions-container\">\n @if (metadataHasMany.tableData.editData.actions.length) {\n <button type=\"button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n {{metadataHasMany.tableData.editData.actionsLabel}}\n </button>\n }\n <mat-menu #menu=\"matMenu\">\n @for (action of metadataHasMany.tableData.editData.actions; track $index) {\n <button type=\"button\" mat-menu-item [disabled]=\"hasManyEditActionDisabled(action)\" (click)=\"hasManyRunEditAction(action)\">\n {{action.displayName}}\n </button>\n }\n </mat-menu>\n \n @if (hasManyAllowDelete(hasManyEntity)) {\n <button type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"deleteHasManyEntity()\">\n {{metadataHasMany.tableData.editData.deleteButtonLabel}}\n </button>\n }\n </div>\n </div>\n \n <form (ngSubmit)=\"dialogEditHasMany()\">\n <mat-dialog-content>\n @if (hasManyEditFormContext) {\n <ng-container *ngTemplateOutlet=\"form; context: hasManyEditFormContext\"></ng-container>\n }\n </mat-dialog-content>\n \n <mat-dialog-actions>\n <div class=\"dialog-button-with-info-icon\">\n <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n [class.badge-changes]=\"!hasManyValidationErrors.length\"\n [disabled]=\"internalIsReadOnly || !isHasManyEntityValid || !isHasManyEntityDirty\"\n [matBadge]=\"hasManyValidationErrors.length > 0 ? hasManyValidationErrors.length : hasManyChanges.length\"\n [matBadgeHidden]=\"!hasManyValidationErrors.length && !hasManyChanges.length\"\n >\n {{metadataHasMany.tableData.editData.confirmButtonLabel}}\n </button>\n @if (hasManyValidationErrors.length || hasManyChanges.length) {\n <ngx-mat-entity-tooltip [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n }\n </div>\n <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"dialogCancelEditHasMany()\">\n {{metadataHasMany.tableData.editData.cancelButtonLabel}}\n </button>\n </mat-dialog-actions>\n </form>\n</ng-template>", styles: ["::ng-deep mat-tab-body{padding-top:10px;padding-left:12px;padding-right:12px}::ng-deep mat-tab-body .mat-mdc-tab-body-content{overflow:initial}::ng-deep .mat-mdc-tab-body-wrapper{margin-left:-12px;margin-right:-12px}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:16px}::ng-deep .select-search-input{width:100%;margin-top:-8px;margin-bottom:8px}::ng-deep .select-search-input .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-form-field.mat-form-field-disabled label{color:#0009}::ng-deep .mat-mdc-form-field.mat-form-field-disabled input,::ng-deep .mat-mdc-form-field.mat-form-field-disabled textarea,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-disabled,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#000!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:#707070}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:checked~.mdc-checkbox__background,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:indeterminate~.mdc-checkbox__background,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true][disabled]~.mdc-checkbox__background{background-color:#000}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled{opacity:1}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled button{opacity:.2}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__icons,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icons{opacity:1}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__handle:after,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__handle:after{opacity:1;background:#000}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__track,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__track{opacity:.3}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-date-range-input-inner:disabled{color:#000}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled{opacity:1}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled .mdc-slider__input{cursor:default}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mat-mdc-slider,::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mdc-slider__thumb:hover,::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mdc-slider__thumb-knob{background-color:#000;border-color:#000}::ng-deep .mat-mdc-form-field .mat-mdc-slide-toggle{opacity:1}::ng-deep .badge-changes .mat-badge-content{background-color:orange;color:#fff}mat-spinner{margin:10px auto}.mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}mat-paginator{padding-top:10px;padding-bottom:10px}.dialog-button-with-info-icon{margin-top:10px;gap:12px;display:flex;align-items:center}.actions-container{display:flex;gap:10px}.w-full{width:100%}.table-with-error-slot{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:5px}.mat-column-select{flex:0 0 48px;padding-left:0;padding-right:0;justify-content:center}.enabled:hover{cursor:pointer}.table-error{display:flex;align-items:center;justify-content:center;margin-top:-6px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:fit-content;padding-left:4px;padding-right:4px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.entityArray .elevation-container{border-radius:5px;padding:15px 15px 0;margin-bottom:15px;margin-top:15px}.entityArray .array-headline{padding-bottom:10px}.entityArray .buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px;column-gap:24px}.entityArray .buttons button{flex:1}.hasMany button{width:100%;height:56px;line-height:24px;font-size:16px}.hasMany .title{text-align:center}.hasMany .elevation-container{margin-bottom:15px}\n", "::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}.mat-dialog-title{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}\n", ".grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.gap-x-6{column-gap:24px}.grid{display:grid}@media (min-width: 1024px){.lg\\:col-span-12{grid-column:span 12/span 12!important}.lg\\:col-span-11{grid-column:span 11/span 11!important}.lg\\:col-span-10{grid-column:span 10/span 10!important}.lg\\:col-span-9{grid-column:span 9/span 9!important}.lg\\:col-span-8{grid-column:span 8/span 8!important}.lg\\:col-span-7{grid-column:span 7/span 7!important}.lg\\:col-span-6{grid-column:span 6/span 6!important}.lg\\:col-span-5{grid-column:span 5/span 5!important}.lg\\:col-span-4{grid-column:span 4/span 4!important}.lg\\:col-span-3{grid-column:span 3/span 3!important}.lg\\:col-span-2{grid-column:span 2/span 2!important}.lg\\:col-span-1{grid-column:span 1/span 1!important}}@media (min-width: 768px) and (max-width: 1023px){.md\\:col-span-12{grid-column:span 12/span 12!important}.md\\:col-span-11{grid-column:span 11/span 11!important}.md\\:col-span-10{grid-column:span 10/span 10!important}.md\\:col-span-9{grid-column:span 9/span 9!important}.md\\:col-span-8{grid-column:span 8/span 8!important}.md\\:col-span-7{grid-column:span 7/span 7!important}.md\\:col-span-6{grid-column:span 6/span 6!important}.md\\:col-span-5{grid-column:span 5/span 5!important}.md\\:col-span-4{grid-column:span 4/span 4!important}.md\\:col-span-3{grid-column:span 3/span 3!important}.md\\:col-span-2{grid-column:span 2/span 2!important}.md\\:col-span-1{grid-column:span 1/span 1!important}}.col-span-12{grid-column:span 12/span 12}.col-span-11{grid-column:span 11/span 11}.col-span-10{grid-column:span 10/span 10}.col-span-9{grid-column:span 9/span 9}.col-span-8{grid-column:span 8/span 8}.col-span-7{grid-column:span 7/span 7}.col-span-6{grid-column:span 6/span 6}.col-span-5{grid-column:span 5/span 5}.col-span-4{grid-column:span 4/span 4}.col-span-3{grid-column:span 3/span 3}.col-span-2{grid-column:span 2/span 2}.col-span-1{grid-column:span 1/span 1}\n"] }]
|
|
7091
|
+
], template: "<!-- eslint-disable angular/cyclomatic-complexity -->\n<!-- eslint-disable angular/no-call-expression -->\n@if(!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)) {\n @switch (type) {\n <!-------------------------------------------->\n <!-----------------Strings-------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.STRING) {\n <string-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </string-input>\n }\n @case (DecoratorTypes.STRING_TEXTBOX) {\n <string-textbox-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </string-textbox-input>\n }\n @case (DecoratorTypes.STRING_AUTOCOMPLETE) {\n <string-autocomplete-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </string-autocomplete-input>\n }\n @case (DecoratorTypes.STRING_DROPDOWN) {\n <string-dropdown-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </string-dropdown-input>\n }\n @case (DecoratorTypes.STRING_PASSWORD) {\n <string-password-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </string-password-input>\n }\n <!-------------------------------------------->\n <!-----------------Booleans------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.BOOLEAN_CHECKBOX) {\n <boolean-checkbox-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </boolean-checkbox-input>\n }\n @case (DecoratorTypes.BOOLEAN_TOGGLE) {\n <boolean-toggle-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </boolean-toggle-input>\n }\n @case (DecoratorTypes.BOOLEAN_DROPDOWN) {\n <boolean-dropdown-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </boolean-dropdown-input>\n }\n <!-------------------------------------------->\n <!------------------Numbers------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.NUMBER) {\n <number-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </number-input>\n }\n @case (DecoratorTypes.NUMBER_DROPDOWN) {\n <number-dropdown-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </number-dropdown-input>\n }\n @case (DecoratorTypes.NUMBER_SLIDER) {\n <number-slider-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </number-slider-input>\n }\n <!-------------------------------------------->\n <!-------------------Array-------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.ARRAY_DATE) {\n <array-date-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </array-date-input>\n }\n @case (DecoratorTypes.ARRAY_DATE_TIME) {\n <array-date-time-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </array-date-time-input>\n }\n @case (DecoratorTypes.ARRAY_DATE_RANGE) {\n <array-date-range-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </array-date-range-input>\n }\n @case (DecoratorTypes.ARRAY_STRING_CHIPS) {\n <array-string-chips-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </array-string-chips-input>\n }\n @case (DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS) {\n <array-string-autocomplete-chips\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </array-string-autocomplete-chips>\n }\n <!-------------------------------------------->\n <!-------------------Dates-------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.DATE) {\n <date-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </date-input>\n }\n @case (DecoratorTypes.DATE_RANGE) {\n <date-range-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </date-range-input>\n }\n @case (DecoratorTypes.DATE_TIME) {\n <date-time-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </date-time-input>\n }\n <!-------------------------------------------->\n <!-------------------Files-------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.FILE_DEFAULT) {\n <file-default-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </file-default-input>\n }\n @case (DecoratorTypes.FILE_IMAGE) {\n <file-image-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </file-image-input>\n }\n <!-------------------------------------------->\n <!-------------- references many ------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.REFERENCES_MANY) {\n <references-many-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </references-many-input>\n }\n <!-------------------------------------------->\n <!-------------------Custom------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.CUSTOM) {\n <custom-input\n [entity]=\"entity\"\n [key]=\"propertyKey\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [isReadOnly]=\"internalIsReadOnly\"\n (inputChangeEvent)=\"emitChange()\"\n >\n </custom-input>\n }\n <!-------------------------------------------->\n <!-------------------Object------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.OBJECT) {\n <b>{{metadataDefaultObject.displayName}}</b>\n <!-- iterates over the object properties -->\n <ng-container *ngTemplateOutlet=\"form; context: objectFormContext\"></ng-container>\n }\n <!-------------------------------------------->\n <!---------------Object Dropdown-------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.OBJECT_DROPDOWN) {\n <mat-form-field class=\"w-full\">\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select #model=\"ngModel\"\n [name]=\"objectDropdownName\"\n [required]=\"metadata.required(entity)\"\n [disabled]=\"internalIsReadOnly\"\n [compareWith]=\"compareObjectsBound\"\n [(ngModel)]=\"entity[propertyKey]\"\n (selectionChange)=\"emitChange()\"\n (opened)=\"selectSearchInput.focus()\"\n >\n <mat-form-field class=\"select-search-input\">\n <!-- eslint-disable-next-line angular/no-any -->\n <input #selectSearchInput matInput (keyup)=\"filterObjectDropdownValues($any($event.target).value)\">\n <fa-icon matSuffix [icon]=\"faSearch\"></fa-icon>\n </mat-form-field>\n @if (!metadata.required(entity)) {\n <mat-option>-</mat-option>\n }\n @if (shouldDisplayCurrentObjectDropdownValue) {\n <mat-option [value]=\"currentObjectDropdownValue?.value\">{{currentObjectDropdownValue?.displayName}}</mat-option>\n }\n @for (value of filteredObjectDropdownValues; track $index) {\n <mat-option [value]=\"value.value\">{{value.displayName}}</mat-option>\n }\n </mat-select>\n <mat-error>{{internalGetValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n }\n <!-------------------------------------------->\n <!-------------- references one -------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.REFERENCES_ONE) {\n <mat-form-field [class.w-full]=\"metadataReferencesOne.dropdownOnly\">\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select #inputModel=\"ngModel\"\n [name]=\"referencesOneName\"\n [disabled]=\"internalIsReadOnly\"\n [required]=\"metadata.required(entity)\"\n [(ngModel)]=\"entity[propertyKey]\"\n (selectionChange)=\"setReferencesOneObject()\"\n (opened)=\"selectSearchInput.focus()\"\n >\n <mat-form-field class=\"select-search-input\">\n <!-- eslint-disable-next-line angular/no-any -->\n <input #selectSearchInput matInput (keyup)=\"filterReferencesOneValues($any($event.target).value)\">\n <fa-icon matSuffix [icon]=\"faSearch\"></fa-icon>\n </mat-form-field>\n @if (!metadata.required(entity)) {\n <mat-option>-</mat-option>\n }\n @if (shouldDisplayCurrentReferencesOneDropdownValue) {\n <mat-option [value]=\"currentReferencesOneDropdownValue?.value\">{{currentReferencesOneDropdownValue?.displayName}}</mat-option>\n }\n @for (value of filteredReferencesOneDropdownValues; track $index) {\n <mat-option [value]=\"value.value\">{{value.displayName}}</mat-option>\n }\n </mat-select>\n <mat-error>{{internalGetValidationErrorMessage(inputModel)}}</mat-error>\n </mat-form-field>\n <!-- iterates over the references one properties -->\n @if (referencesOneFormContext) {\n <ng-container *ngTemplateOutlet=\"form; context: referencesOneFormContext\"></ng-container>\n }\n }\n <!-------------------------------------------->\n <!-------------------Array-------------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.ARRAY) {\n <div class=\"entityArray\">\n <div class=\"mat-elevation-z8 elevation-container\">\n <div class=\"array-headline\">\n <b>{{metadataEntityArray.displayName}}</b>\n </div>\n @if (metadataEntityArray.createInline && !internalIsReadOnly) {\n @if (addArrayItemFormContext) {\n <ng-container *ngTemplateOutlet=\"form; context: addArrayItemFormContext\"></ng-container>\n }\n @else if (addArrayItemFormContext2) {\n <ng-container *ngTemplateOutlet=\"form; context: addArrayItemFormContext2\"></ng-container>\n }\n }\n @if (!internalIsReadOnly && entityArrayTableContext) {\n <div class=\"buttons\">\n <button type=\"button\" mat-raised-button\n [disabled]=\"metadataEntityArray.createInline && !isArrayItemValid\"\n (click)=\"addEntity()\">\n {{metadataEntityArray.addButtonLabel}}\n </button>\n <button type=\"button\" mat-raised-button\n [disabled]=\"!entityArrayTableContext.$implicit.selection.selected.length\"\n (click)=\"removeFromEntityArray()\">\n {{metadataEntityArray.removeButtonLabel}}\n </button>\n </div>\n }\n @if (entityArrayTableContext) {\n <ng-container *ngTemplateOutlet=\"table; context: entityArrayTableContext\"></ng-container>\n }\n </div>\n </div>\n }\n <!-------------------------------------------->\n <!------------------ has many ---------------->\n <!-------------------------------------------->\n @case (DecoratorTypes.HAS_MANY) {\n <div class=\"hasMany\">\n <h2 class=\"title\">{{metadataHasMany.tableData.baseData.title}}</h2>\n <div class=\"grid grid-cols-12 gap-x-6\">\n <mat-form-field class=\"lg:col-span-8 md:col-span-6 col-span-12\">\n <mat-label>{{metadataHasMany.tableData.baseData.searchLabel}}</mat-label>\n <input matInput (keyup)=\"applyHasManyFilter($event)\">\n </mat-form-field>\n @if (metadataHasMany.tableData.baseData.tableActions.length) {\n <div\n [class.lg:col-span-2]=\"hasManyAllowCreate\"\n [class.lg:col-span-4]=\"!hasManyAllowCreate\"\n [class.md:col-span-3]=\"hasManyAllowCreate\"\n [class.md:col-span-6]=\"!hasManyAllowCreate\"\n [class.col-span-6]=\"hasManyAllowCreate\"\n [class.col-span-12]=\"!hasManyAllowCreate\"\n >\n <button type=\"button\" class=\"actions-button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n {{metadataHasMany.tableData.baseData.tableActionsLabel}}\n </button>\n </div>\n }\n <mat-menu #menu=\"matMenu\">\n @if (metadataHasMany.tableData.baseData.allowJsonImport) {\n <button type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(hasManyImportAction)\" (click)=\"runHasManyTableAction(hasManyImportAction)\">\n {{hasManyImportAction.displayName}}\n </button>\n }\n @for (action of metadataHasMany.tableData.baseData.tableActions; track $index) {\n <button type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(action)\" (click)=\"runHasManyTableAction(action)\">\n {{action.displayName}}\n </button>\n }\n </mat-menu>\n @if (hasManyAllowCreate) {\n <div\n [class.lg:col-span-2]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n [class.lg:col-span-4]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n [class.md:col-span-3]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n [class.md:col-span-6]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n [class.col-span-6]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n [class.col-span-12]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n >\n <button type=\"button\" class=\"create-button\" mat-raised-button (click)=\"createHasManyEntity()\">\n {{metadataHasMany.tableData.baseData.createButtonLabel}}\n </button>\n </div>\n }\n </div>\n \n <div class=\"mat-elevation-z8 elevation-container\">\n @if (hasManyTableContext) {\n <ng-container *ngTemplateOutlet=\"table; context: hasManyTableContext\"></ng-container>\n }\n </div>\n </div>\n }\n \n @default {\n <div>ERROR: The type {{type}} is not known.</div>\n }\n }\n}\n\n\n<ng-template #table let-context>\n <mat-table matSort [dataSource]=\"context.dataSource\" [class.table-with-error-slot]=\"context.shouldShowMissingError\">\n <!-- select Column -->\n <ng-container matColumnDef=\"select\">\n <mat-header-cell *matHeaderCellDef>\n <mat-checkbox [checked]=\"context.selection.hasValue() && SelectionUtilities.isAllSelected(context.selection, context.dataSource)\"\n [indeterminate]=\"context.selection.hasValue() && !SelectionUtilities.isAllSelected(context.selection, context.dataSource)\"\n (change)=\"$event ? SelectionUtilities.masterToggle(context.selection, context.dataSource) : null\">\n </mat-checkbox>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let value\" [dynamicStyleClasses]=\"context.dynamicRowStyleClasses\" [value]=\"value\">\n <mat-checkbox [checked]=\"context.selection.isSelected(value)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? context.selection.toggle(value) : null\">\n </mat-checkbox>\n </mat-cell>\n </ng-container>\n\n @for (dCol of context.displayColumns; track $index) {\n <ng-container [matColumnDef]=\"dCol.displayName\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n {{dCol.displayName}}\n </mat-header-cell>\n <mat-cell *matCellDef=\"let value\" [class.enabled]=\"!dCol.disableClick && context.allowClick(value)\"\n [dynamicStyleClasses]=\"context.dynamicRowStyleClasses\" [value]=\"value\"\n (click)=\"clickCell(value, dCol, context)\"\n >\n @if (dCol.Component) {\n <display-column-value [entity]=\"value\" [ComponentClass]=\"dCol.Component\"></display-column-value>\n }\n @else {\n {{getDisplayColumnValue(value, dCol)}}\n }\n </mat-cell>\n </ng-container>\n }\n\n <mat-header-row *matHeaderRowDef=\"context.displayedColumns\"></mat-header-row>\n <mat-row *matRowDef=\"let row; columns: context.displayedColumns\"></mat-row>\n </mat-table>\n\n @if (context.displayLoadingSpinner && context.isLoading) {\n <mat-spinner>\n </mat-spinner>\n }\n @else if (context.shouldShowMissingError && !context.dataSource.data.length) {\n <div class=\"table-error\">{{context.emptyErrorMessage}}</div>\n }\n\n <mat-paginator [length]=\"context.dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n</ng-template>\n\n<!--------------------------------------------------------->\n<!---------------------------Form-------------------------->\n<!--------------------------------------------------------->\n<ng-template #form let-context>\n <!-- eslint-disable angular/no-call-expression -->\n @if (context.tabs.length > 1) {\n <mat-tab-group preserveContent>\n @for (tab of context.tabs; track $index) {\n <mat-tab [label]=\"tab.tabName\">\n @for (row of tab.rows; track $index) {\n <div class=\"grid grid-cols-12 gap-x-6\">\n @for (key of row.keys; track key) {\n <ngx-mat-entity-input\n [entity]=\"context.entity\"\n [propertyKey]=\"key\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [validEmpty]=\"context.validEmpty?.()\"\n [isReadOnly]=\"context.isReadOnly?.(context.entity, key)\"\n [class]=\"EntityUtilities.getWidthClasses(context.entity, key)\"\n [hideOmitForEdit]=\"context.hideOmitForEdit\"\n [hideOmitForCreate]=\"context.hideOmitForCreate\"\n (inputChangeEvent)=\"context.inputChangeEvent()\"\n >\n </ngx-mat-entity-input>\n }\n </div>\n }\n </mat-tab>\n }\n </mat-tab-group>\n }\n @else {\n @if (!context.tabs.length) {\n <span class=\"no-entity-tabs\">\n ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n </span>\n }\n @else {\n @for (row of context.tabs[0].rows; track $index) {\n <div class=\"grid grid-cols-12 gap-x-6\">\n @for (key of row.keys; track key) {\n <ngx-mat-entity-input\n [entity]=\"context.entity\"\n [propertyKey]=\"key\"\n [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n [validEmpty]=\"context.validEmpty?.()\"\n [isReadOnly]=\"context.isReadOnly?.(context.entity, key)\"\n [class]=\"EntityUtilities.getWidthClasses(context.entity, key)\"\n [hideOmitForEdit]=\"context.hideOmitForEdit\"\n [hideOmitForCreate]=\"context.hideOmitForCreate\"\n (inputChangeEvent)=\"context.inputChangeEvent()\"\n >\n </ngx-mat-entity-input>\n }\n </div>\n }\n }\n }\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Add Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #addArrayItemDialog>\n <div class=\"mat-dialog-title\">\n <div>{{addArrayItemDialogData.title}}</div>\n </div>\n\n <form (ngSubmit)=\"addArrayItem()\">\n <mat-dialog-content>\n @if (addArrayItemFormContext) {\n <ng-container *ngTemplateOutlet=\"form; context: addArrayItemFormContext\"></ng-container>\n }\n </mat-dialog-content>\n \n <mat-dialog-actions>\n <div class=\"dialog-button-with-info-icon\">\n <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n [disabled]=\"!isArrayItemValid\"\n [matBadge]=\"arrayItemValidationErrors.length\"\n [matBadgeHidden]=\"!arrayItemValidationErrors.length\"\n >\n {{addArrayItemDialogData.createButtonLabel}}\n </button>\n @if (arrayItemValidationErrors.length) {\n <ngx-mat-entity-tooltip [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n }\n </div>\n <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"closeAddArrayItemDialog()\">\n {{addArrayItemDialogData.cancelButtonLabel}}\n </button>\n </mat-dialog-actions>\n </form>\n\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Edit Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #editArrayItemDialog>\n <div class=\"mat-dialog-title\">\n <div>{{editArrayItemDialogData.title(arrayItemPriorChanges)}}</div>\n </div>\n \n <form (ngSubmit)=\"saveArrayItem()\">\n <mat-dialog-content>\n @if (editArrayItemFormContext) {\n <ng-container *ngTemplateOutlet=\"form; context: editArrayItemFormContext\"></ng-container>\n }\n </mat-dialog-content>\n \n <mat-dialog-actions>\n <div class=\"dialog-button-with-info-icon\">\n <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n [class.badge-changes]=\"!arrayItemValidationErrors.length\"\n [disabled]=\"internalIsReadOnly || !isArrayItemValid || !isArrayItemDirty\"\n [matBadge]=\"arrayItemValidationErrors.length > 0 ? arrayItemValidationErrors.length : arrayItemChanges.length\"\n [matBadgeHidden]=\"!arrayItemValidationErrors.length && !arrayItemChanges.length\"\n >\n {{editArrayItemDialogData.confirmButtonLabel}}\n </button>\n @if (arrayItemValidationErrors.length || arrayItemChanges.length) {\n <ngx-mat-entity-tooltip [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n }\n </div>\n <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"closeEditArrayItemDialog()\">\n {{editArrayItemDialogData.cancelButtonLabel}}\n </button>\n </mat-dialog-actions>\n </form>\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Create Has Many Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #createHasManyDialog>\n <div class=\"mat-dialog-title\">\n <div>{{metadataHasMany.tableData.createData.title}}</div>\n </div>\n \n <form (ngSubmit)=\"dialogCreateHasMany()\">\n <mat-dialog-content>\n @if (hasManyCreateFormContext) {\n <ng-container *ngTemplateOutlet=\"form; context: hasManyCreateFormContext\"></ng-container>\n }\n </mat-dialog-content>\n \n <mat-dialog-actions>\n <div class=\"dialog-button-with-info-icon\">\n <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n [disabled]=\"!isHasManyEntityValid\"\n [matBadge]=\"hasManyValidationErrors.length\"\n [matBadgeHidden]=\"!hasManyValidationErrors.length\"\n >\n {{metadataHasMany.tableData.createData.createButtonLabel}}\n </button>\n @if (hasManyValidationErrors.length) {\n <ngx-mat-entity-tooltip [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n }\n </div>\n <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"dialogCancelCreateHasMany()\">\n {{metadataHasMany.tableData.createData.cancelButtonLabel}}\n </button>\n </mat-dialog-actions>\n </form>\n \n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Edit Has Many Dialog----------------->\n<!--------------------------------------------------------->\n<ng-template #editHasManyDialog>\n <div class=\"mat-dialog-title\">\n <div>{{metadataHasMany.tableData.editData.title(hasManyEntityPriorChanges)}}</div>\n\n <div class=\"actions-container\">\n @if (metadataHasMany.tableData.editData.actions.length) {\n <button type=\"button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n {{metadataHasMany.tableData.editData.actionsLabel}}\n </button>\n }\n <mat-menu #menu=\"matMenu\">\n @for (action of metadataHasMany.tableData.editData.actions; track $index) {\n <button type=\"button\" mat-menu-item [disabled]=\"hasManyEditActionDisabled(action)\" (click)=\"hasManyRunEditAction(action)\">\n {{action.displayName}}\n </button>\n }\n </mat-menu>\n \n @if (hasManyAllowDelete(hasManyEntity)) {\n <button type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"deleteHasManyEntity()\">\n {{metadataHasMany.tableData.editData.deleteButtonLabel}}\n </button>\n }\n </div>\n </div>\n \n <form (ngSubmit)=\"dialogEditHasMany()\">\n <mat-dialog-content>\n @if (hasManyEditFormContext) {\n <ng-container *ngTemplateOutlet=\"form; context: hasManyEditFormContext\"></ng-container>\n }\n </mat-dialog-content>\n \n <mat-dialog-actions>\n <div class=\"dialog-button-with-info-icon\">\n <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n [class.badge-changes]=\"!hasManyValidationErrors.length\"\n [disabled]=\"internalIsReadOnly || !isHasManyEntityValid || !isHasManyEntityDirty\"\n [matBadge]=\"hasManyValidationErrors.length > 0 ? hasManyValidationErrors.length : hasManyChanges.length\"\n [matBadgeHidden]=\"!hasManyValidationErrors.length && !hasManyChanges.length\"\n >\n {{metadataHasMany.tableData.editData.confirmButtonLabel}}\n </button>\n @if (hasManyValidationErrors.length || hasManyChanges.length) {\n <ngx-mat-entity-tooltip [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n }\n </div>\n <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"dialogCancelEditHasMany()\">\n {{metadataHasMany.tableData.editData.cancelButtonLabel}}\n </button>\n </mat-dialog-actions>\n </form>\n</ng-template>", styles: ["::ng-deep mat-tab-body{padding-top:10px;padding-left:12px;padding-right:12px}::ng-deep mat-tab-body .mat-mdc-tab-body-content{overflow:initial}::ng-deep .mat-mdc-tab-body-wrapper{margin-left:-12px;margin-right:-12px}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:16px}::ng-deep .select-search-input{width:100%;margin-top:-8px;margin-bottom:8px}::ng-deep .select-search-input .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-form-field.mat-form-field-disabled label{color:#0009}::ng-deep .mat-mdc-form-field.mat-form-field-disabled input,::ng-deep .mat-mdc-form-field.mat-form-field-disabled textarea,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-disabled,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#000!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:#707070}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:checked~.mdc-checkbox__background,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:indeterminate~.mdc-checkbox__background,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true][disabled]~.mdc-checkbox__background{background-color:#000}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled{opacity:1}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled button{opacity:.2}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__icons,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icons{opacity:1}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__handle:after,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__handle:after{opacity:1;background:#000}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__track,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__track{opacity:.3}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-date-range-input-inner:disabled{color:#000}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled{opacity:1}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled .mdc-slider__input{cursor:default}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mat-mdc-slider,::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mdc-slider__thumb:hover,::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mdc-slider__thumb-knob{background-color:#000;border-color:#000}::ng-deep .mat-mdc-form-field .mat-mdc-slide-toggle{opacity:1}::ng-deep .badge-changes .mat-badge-content{background-color:orange;color:#fff}mat-spinner{margin:10px auto}.mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}mat-paginator{padding-top:10px;padding-bottom:10px}.dialog-button-with-info-icon{margin-top:10px;gap:12px;display:flex;align-items:center}.actions-container{display:flex;gap:10px}.w-full{width:100%}.table-with-error-slot{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:5px}.mat-column-select{flex:0 0 48px;padding-left:0;padding-right:0;justify-content:center}.enabled:hover{cursor:pointer}.table-error{display:flex;align-items:center;justify-content:center;margin-top:-6px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:fit-content;padding-left:4px;padding-right:4px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.entityArray .elevation-container{border-radius:5px;padding:15px 15px 0;margin-bottom:15px;margin-top:15px}.entityArray .array-headline{padding-bottom:10px}.entityArray .buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px;column-gap:24px}.entityArray .buttons button{flex:1}.hasMany button{width:100%;height:56px;line-height:24px;font-size:16px}.hasMany .title{text-align:center}.hasMany .elevation-container{margin-bottom:15px}\n", "::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}.mat-dialog-title{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}\n", ".grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.gap-x-6{column-gap:24px}.grid{display:grid}@media (min-width: 1024px){.lg\\:col-span-12{grid-column:span 12/span 12!important}.lg\\:col-span-11{grid-column:span 11/span 11!important}.lg\\:col-span-10{grid-column:span 10/span 10!important}.lg\\:col-span-9{grid-column:span 9/span 9!important}.lg\\:col-span-8{grid-column:span 8/span 8!important}.lg\\:col-span-7{grid-column:span 7/span 7!important}.lg\\:col-span-6{grid-column:span 6/span 6!important}.lg\\:col-span-5{grid-column:span 5/span 5!important}.lg\\:col-span-4{grid-column:span 4/span 4!important}.lg\\:col-span-3{grid-column:span 3/span 3!important}.lg\\:col-span-2{grid-column:span 2/span 2!important}.lg\\:col-span-1{grid-column:span 1/span 1!important}}@media (min-width: 768px) and (max-width: 1023px){.md\\:col-span-12{grid-column:span 12/span 12!important}.md\\:col-span-11{grid-column:span 11/span 11!important}.md\\:col-span-10{grid-column:span 10/span 10!important}.md\\:col-span-9{grid-column:span 9/span 9!important}.md\\:col-span-8{grid-column:span 8/span 8!important}.md\\:col-span-7{grid-column:span 7/span 7!important}.md\\:col-span-6{grid-column:span 6/span 6!important}.md\\:col-span-5{grid-column:span 5/span 5!important}.md\\:col-span-4{grid-column:span 4/span 4!important}.md\\:col-span-3{grid-column:span 3/span 3!important}.md\\:col-span-2{grid-column:span 2/span 2!important}.md\\:col-span-1{grid-column:span 1/span 1!important}}.col-span-12{grid-column:span 12/span 12}.col-span-11{grid-column:span 11/span 11}.col-span-10{grid-column:span 10/span 10}.col-span-9{grid-column:span 9/span 9}.col-span-8{grid-column:span 8/span 8}.col-span-7{grid-column:span 7/span 7}.col-span-6{grid-column:span 6/span 6}.col-span-5{grid-column:span 5/span 5}.col-span-4{grid-column:span 4/span 4}.col-span-3{grid-column:span 3/span 3}.col-span-2{grid-column:span 2/span 2}.col-span-1{grid-column:span 1/span 1}\n"] }]
|
|
7090
7092
|
}], ctorParameters: () => [{ type: i1.MatDialog }, { type: i0.EnvironmentInjector }, { type: i2$6.Router }, { type: undefined, decorators: [{
|
|
7091
7093
|
type: Inject,
|
|
7092
7094
|
args: [NGX_GET_VALIDATION_ERROR_MESSAGE]
|
|
@@ -7204,7 +7206,7 @@ class NgxMatEntityFormComponent {
|
|
|
7204
7206
|
this.formChange.emit();
|
|
7205
7207
|
}
|
|
7206
7208
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgxMatEntityFormComponent, deps: [{ token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component });
|
|
7207
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: NgxMatEntityFormComponent, isStandalone: true, selector: "ngx-mat-entity-form", inputs: { entity: "entity", isEntityReadOnly: "isEntityReadOnly", hideOmitForCreate: "hideOmitForCreate", hideOmitForEdit: "hideOmitForEdit", additionalOmitKeys: "additionalOmitKeys" }, outputs: { formChange: "formChange", selectedTabChange: "selectedTabChange" }, ngImport: i0, template: " <!-- eslint-disable angular/no-call-expression -->\n@if (entityTabs.length > 1) {\n <mat-tab-group preserveContent (selectedTabChange)=\"selectedTabChange.emit()\">\n @for (tab of entityTabs; track $index) {\n <mat-tab [label]=\"tab.tabName\">\n @for (row of tab.rows; track $index) {\n <div class=\"grid grid-cols-12 gap-x-6\">\n @for (key of row.keys; track key) {\n <ngx-mat-entity-input\n [entity]=\"entity\"\n [propertyKey]=\"key\"\n [hideOmitForEdit]=\"hideOmitForEdit\"\n [hideOmitForCreate]=\"hideOmitForCreate\"\n [class]=\"EntityUtilities.getWidthClasses(entity, key)\"\n [isReadOnly]=\"isReadOnly(key)\"\n (inputChangeEvent)=\"inputChange()\"\n >\n </ngx-mat-entity-input>\n }\n </div>\n }\n </mat-tab>\n }\n </mat-tab-group>\n}\n@else {\n @if (!entityTabs.length) {\n <span class=\"no-entity-tabs\">\n ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n </span>\n }\n @else {\n @for (row of entityTabs[0].rows; track $index) {\n <div class=\"grid grid-cols-12 gap-x-6\">\n @for (key of row.keys; track key) {\n <ngx-mat-entity-input\n [entity]=\"entity\"\n [propertyKey]=\"key\"\n [hideOmitForEdit]=\"hideOmitForEdit\"\n [hideOmitForCreate]=\"hideOmitForCreate\"\n [class]=\"EntityUtilities.getWidthClasses(entity, key)\"\n [isReadOnly]=\"isReadOnly(key)\"\n (inputChangeEvent)=\"inputChange()\"\n >\n </ngx-mat-entity-input>\n }\n </div>\n }\n }\n}", styles: [".no-entity-tabs{padding:10px;background-color:red;color:#f5f5f5}\n", ".grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.gap-x-6{column-gap:24px}.grid{display:grid}@media (min-width: 1024px){.lg\\:col-span-12{grid-column:span 12/span 12!important}.lg\\:col-span-11{grid-column:span 11/span 11!important}.lg\\:col-span-10{grid-column:span 10/span 10!important}.lg\\:col-span-9{grid-column:span 9/span 9!important}.lg\\:col-span-8{grid-column:span 8/span 8!important}.lg\\:col-span-7{grid-column:span 7/span 7!important}.lg\\:col-span-6{grid-column:span 6/span 6!important}.lg\\:col-span-5{grid-column:span 5/span 5!important}.lg\\:col-span-4{grid-column:span 4/span 4!important}.lg\\:col-span-3{grid-column:span 3/span 3!important}.lg\\:col-span-2{grid-column:span 2/span 2!important}.lg\\:col-span-1{grid-column:span 1/span 1!important}}@media (min-width: 768px) and (max-width: 1023px){.md\\:col-span-12{grid-column:span 12/span 12!important}.md\\:col-span-11{grid-column:span 11/span 11!important}.md\\:col-span-10{grid-column:span 10/span 10!important}.md\\:col-span-9{grid-column:span 9/span 9!important}.md\\:col-span-8{grid-column:span 8/span 8!important}.md\\:col-span-7{grid-column:span 7/span 7!important}.md\\:col-span-6{grid-column:span 6/span 6!important}.md\\:col-span-5{grid-column:span 5/span 5!important}.md\\:col-span-4{grid-column:span 4/span 4!important}.md\\:col-span-3{grid-column:span 3/span 3!important}.md\\:col-span-2{grid-column:span 2/span 2!important}.md\\:col-span-1{grid-column:span 1/span 1!important}}.col-span-12{grid-column:span 12/span 12}.col-span-11{grid-column:span 11/span 11}.col-span-10{grid-column:span 10/span 10}.col-span-9{grid-column:span 9/span 9}.col-span-8{grid-column:span 8/span 8}.col-span-7{grid-column:span 7/span 7}.col-span-6{grid-column:span 6/span 6}.col-span-5{grid-column:span 5/span 5}.col-span-4{grid-column:span 4/span 4}.col-span-3{grid-column:span 3/span 3}.col-span-2{grid-column:span 2/span 2}.col-span-1{grid-column:span 1/span 1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i5$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i5$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "validEmpty", "isReadOnly"], outputs: ["inputChangeEvent"] }] });
|
|
7209
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: NgxMatEntityFormComponent, isStandalone: true, selector: "ngx-mat-entity-form", inputs: { entity: "entity", isEntityReadOnly: "isEntityReadOnly", hideOmitForCreate: "hideOmitForCreate", hideOmitForEdit: "hideOmitForEdit", additionalOmitKeys: "additionalOmitKeys" }, outputs: { formChange: "formChange", selectedTabChange: "selectedTabChange" }, ngImport: i0, template: "<!-- eslint-disable angular/cyclomatic-complexity -->\n <!-- eslint-disable angular/no-call-expression -->\n@if (entityTabs.length > 1) {\n <mat-tab-group preserveContent (selectedTabChange)=\"selectedTabChange.emit()\">\n @for (tab of entityTabs; track $index) {\n <mat-tab [label]=\"tab.tabName\">\n @for (row of tab.rows; track $index) {\n <div class=\"grid grid-cols-12 gap-x-6\">\n @for (key of row.keys; track key) {\n <ngx-mat-entity-input\n [entity]=\"entity\"\n [propertyKey]=\"key\"\n [hideOmitForEdit]=\"hideOmitForEdit\"\n [hideOmitForCreate]=\"hideOmitForCreate\"\n [class]=\"EntityUtilities.getWidthClasses(entity, key)\"\n [isReadOnly]=\"isReadOnly(key)\"\n (inputChangeEvent)=\"inputChange()\"\n >\n </ngx-mat-entity-input>\n }\n </div>\n }\n </mat-tab>\n }\n </mat-tab-group>\n}\n@else {\n @if (!entityTabs.length) {\n <span class=\"no-entity-tabs\">\n ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n </span>\n }\n @else {\n @for (row of entityTabs[0].rows; track $index) {\n <div class=\"grid grid-cols-12 gap-x-6\">\n @for (key of row.keys; track key) {\n <ngx-mat-entity-input\n [entity]=\"entity\"\n [propertyKey]=\"key\"\n [hideOmitForEdit]=\"hideOmitForEdit\"\n [hideOmitForCreate]=\"hideOmitForCreate\"\n [class]=\"EntityUtilities.getWidthClasses(entity, key)\"\n [isReadOnly]=\"isReadOnly(key)\"\n (inputChangeEvent)=\"inputChange()\"\n >\n </ngx-mat-entity-input>\n }\n </div>\n }\n }\n}", styles: [".no-entity-tabs{padding:10px;background-color:red;color:#f5f5f5}\n", ".grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.gap-x-6{column-gap:24px}.grid{display:grid}@media (min-width: 1024px){.lg\\:col-span-12{grid-column:span 12/span 12!important}.lg\\:col-span-11{grid-column:span 11/span 11!important}.lg\\:col-span-10{grid-column:span 10/span 10!important}.lg\\:col-span-9{grid-column:span 9/span 9!important}.lg\\:col-span-8{grid-column:span 8/span 8!important}.lg\\:col-span-7{grid-column:span 7/span 7!important}.lg\\:col-span-6{grid-column:span 6/span 6!important}.lg\\:col-span-5{grid-column:span 5/span 5!important}.lg\\:col-span-4{grid-column:span 4/span 4!important}.lg\\:col-span-3{grid-column:span 3/span 3!important}.lg\\:col-span-2{grid-column:span 2/span 2!important}.lg\\:col-span-1{grid-column:span 1/span 1!important}}@media (min-width: 768px) and (max-width: 1023px){.md\\:col-span-12{grid-column:span 12/span 12!important}.md\\:col-span-11{grid-column:span 11/span 11!important}.md\\:col-span-10{grid-column:span 10/span 10!important}.md\\:col-span-9{grid-column:span 9/span 9!important}.md\\:col-span-8{grid-column:span 8/span 8!important}.md\\:col-span-7{grid-column:span 7/span 7!important}.md\\:col-span-6{grid-column:span 6/span 6!important}.md\\:col-span-5{grid-column:span 5/span 5!important}.md\\:col-span-4{grid-column:span 4/span 4!important}.md\\:col-span-3{grid-column:span 3/span 3!important}.md\\:col-span-2{grid-column:span 2/span 2!important}.md\\:col-span-1{grid-column:span 1/span 1!important}}.col-span-12{grid-column:span 12/span 12}.col-span-11{grid-column:span 11/span 11}.col-span-10{grid-column:span 10/span 10}.col-span-9{grid-column:span 9/span 9}.col-span-8{grid-column:span 8/span 8}.col-span-7{grid-column:span 7/span 7}.col-span-6{grid-column:span 6/span 6}.col-span-5{grid-column:span 5/span 5}.col-span-4{grid-column:span 4/span 4}.col-span-3{grid-column:span 3/span 3}.col-span-2{grid-column:span 2/span 2}.col-span-1{grid-column:span 1/span 1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i5$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i5$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "validEmpty", "isReadOnly"], outputs: ["inputChangeEvent"] }] });
|
|
7208
7210
|
}
|
|
7209
7211
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgxMatEntityFormComponent, decorators: [{
|
|
7210
7212
|
type: Component,
|
|
@@ -7212,7 +7214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
|
|
|
7212
7214
|
CommonModule,
|
|
7213
7215
|
MatTabsModule,
|
|
7214
7216
|
NgxMatEntityInputComponent
|
|
7215
|
-
], template: " <!-- eslint-disable angular/no-call-expression -->\n@if (entityTabs.length > 1) {\n <mat-tab-group preserveContent (selectedTabChange)=\"selectedTabChange.emit()\">\n @for (tab of entityTabs; track $index) {\n <mat-tab [label]=\"tab.tabName\">\n @for (row of tab.rows; track $index) {\n <div class=\"grid grid-cols-12 gap-x-6\">\n @for (key of row.keys; track key) {\n <ngx-mat-entity-input\n [entity]=\"entity\"\n [propertyKey]=\"key\"\n [hideOmitForEdit]=\"hideOmitForEdit\"\n [hideOmitForCreate]=\"hideOmitForCreate\"\n [class]=\"EntityUtilities.getWidthClasses(entity, key)\"\n [isReadOnly]=\"isReadOnly(key)\"\n (inputChangeEvent)=\"inputChange()\"\n >\n </ngx-mat-entity-input>\n }\n </div>\n }\n </mat-tab>\n }\n </mat-tab-group>\n}\n@else {\n @if (!entityTabs.length) {\n <span class=\"no-entity-tabs\">\n ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n </span>\n }\n @else {\n @for (row of entityTabs[0].rows; track $index) {\n <div class=\"grid grid-cols-12 gap-x-6\">\n @for (key of row.keys; track key) {\n <ngx-mat-entity-input\n [entity]=\"entity\"\n [propertyKey]=\"key\"\n [hideOmitForEdit]=\"hideOmitForEdit\"\n [hideOmitForCreate]=\"hideOmitForCreate\"\n [class]=\"EntityUtilities.getWidthClasses(entity, key)\"\n [isReadOnly]=\"isReadOnly(key)\"\n (inputChangeEvent)=\"inputChange()\"\n >\n </ngx-mat-entity-input>\n }\n </div>\n }\n }\n}", styles: [".no-entity-tabs{padding:10px;background-color:red;color:#f5f5f5}\n", ".grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.gap-x-6{column-gap:24px}.grid{display:grid}@media (min-width: 1024px){.lg\\:col-span-12{grid-column:span 12/span 12!important}.lg\\:col-span-11{grid-column:span 11/span 11!important}.lg\\:col-span-10{grid-column:span 10/span 10!important}.lg\\:col-span-9{grid-column:span 9/span 9!important}.lg\\:col-span-8{grid-column:span 8/span 8!important}.lg\\:col-span-7{grid-column:span 7/span 7!important}.lg\\:col-span-6{grid-column:span 6/span 6!important}.lg\\:col-span-5{grid-column:span 5/span 5!important}.lg\\:col-span-4{grid-column:span 4/span 4!important}.lg\\:col-span-3{grid-column:span 3/span 3!important}.lg\\:col-span-2{grid-column:span 2/span 2!important}.lg\\:col-span-1{grid-column:span 1/span 1!important}}@media (min-width: 768px) and (max-width: 1023px){.md\\:col-span-12{grid-column:span 12/span 12!important}.md\\:col-span-11{grid-column:span 11/span 11!important}.md\\:col-span-10{grid-column:span 10/span 10!important}.md\\:col-span-9{grid-column:span 9/span 9!important}.md\\:col-span-8{grid-column:span 8/span 8!important}.md\\:col-span-7{grid-column:span 7/span 7!important}.md\\:col-span-6{grid-column:span 6/span 6!important}.md\\:col-span-5{grid-column:span 5/span 5!important}.md\\:col-span-4{grid-column:span 4/span 4!important}.md\\:col-span-3{grid-column:span 3/span 3!important}.md\\:col-span-2{grid-column:span 2/span 2!important}.md\\:col-span-1{grid-column:span 1/span 1!important}}.col-span-12{grid-column:span 12/span 12}.col-span-11{grid-column:span 11/span 11}.col-span-10{grid-column:span 10/span 10}.col-span-9{grid-column:span 9/span 9}.col-span-8{grid-column:span 8/span 8}.col-span-7{grid-column:span 7/span 7}.col-span-6{grid-column:span 6/span 6}.col-span-5{grid-column:span 5/span 5}.col-span-4{grid-column:span 4/span 4}.col-span-3{grid-column:span 3/span 3}.col-span-2{grid-column:span 2/span 2}.col-span-1{grid-column:span 1/span 1}\n"] }]
|
|
7217
|
+
], template: "<!-- eslint-disable angular/cyclomatic-complexity -->\n <!-- eslint-disable angular/no-call-expression -->\n@if (entityTabs.length > 1) {\n <mat-tab-group preserveContent (selectedTabChange)=\"selectedTabChange.emit()\">\n @for (tab of entityTabs; track $index) {\n <mat-tab [label]=\"tab.tabName\">\n @for (row of tab.rows; track $index) {\n <div class=\"grid grid-cols-12 gap-x-6\">\n @for (key of row.keys; track key) {\n <ngx-mat-entity-input\n [entity]=\"entity\"\n [propertyKey]=\"key\"\n [hideOmitForEdit]=\"hideOmitForEdit\"\n [hideOmitForCreate]=\"hideOmitForCreate\"\n [class]=\"EntityUtilities.getWidthClasses(entity, key)\"\n [isReadOnly]=\"isReadOnly(key)\"\n (inputChangeEvent)=\"inputChange()\"\n >\n </ngx-mat-entity-input>\n }\n </div>\n }\n </mat-tab>\n }\n </mat-tab-group>\n}\n@else {\n @if (!entityTabs.length) {\n <span class=\"no-entity-tabs\">\n ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n </span>\n }\n @else {\n @for (row of entityTabs[0].rows; track $index) {\n <div class=\"grid grid-cols-12 gap-x-6\">\n @for (key of row.keys; track key) {\n <ngx-mat-entity-input\n [entity]=\"entity\"\n [propertyKey]=\"key\"\n [hideOmitForEdit]=\"hideOmitForEdit\"\n [hideOmitForCreate]=\"hideOmitForCreate\"\n [class]=\"EntityUtilities.getWidthClasses(entity, key)\"\n [isReadOnly]=\"isReadOnly(key)\"\n (inputChangeEvent)=\"inputChange()\"\n >\n </ngx-mat-entity-input>\n }\n </div>\n }\n }\n}", styles: [".no-entity-tabs{padding:10px;background-color:red;color:#f5f5f5}\n", ".grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.gap-x-6{column-gap:24px}.grid{display:grid}@media (min-width: 1024px){.lg\\:col-span-12{grid-column:span 12/span 12!important}.lg\\:col-span-11{grid-column:span 11/span 11!important}.lg\\:col-span-10{grid-column:span 10/span 10!important}.lg\\:col-span-9{grid-column:span 9/span 9!important}.lg\\:col-span-8{grid-column:span 8/span 8!important}.lg\\:col-span-7{grid-column:span 7/span 7!important}.lg\\:col-span-6{grid-column:span 6/span 6!important}.lg\\:col-span-5{grid-column:span 5/span 5!important}.lg\\:col-span-4{grid-column:span 4/span 4!important}.lg\\:col-span-3{grid-column:span 3/span 3!important}.lg\\:col-span-2{grid-column:span 2/span 2!important}.lg\\:col-span-1{grid-column:span 1/span 1!important}}@media (min-width: 768px) and (max-width: 1023px){.md\\:col-span-12{grid-column:span 12/span 12!important}.md\\:col-span-11{grid-column:span 11/span 11!important}.md\\:col-span-10{grid-column:span 10/span 10!important}.md\\:col-span-9{grid-column:span 9/span 9!important}.md\\:col-span-8{grid-column:span 8/span 8!important}.md\\:col-span-7{grid-column:span 7/span 7!important}.md\\:col-span-6{grid-column:span 6/span 6!important}.md\\:col-span-5{grid-column:span 5/span 5!important}.md\\:col-span-4{grid-column:span 4/span 4!important}.md\\:col-span-3{grid-column:span 3/span 3!important}.md\\:col-span-2{grid-column:span 2/span 2!important}.md\\:col-span-1{grid-column:span 1/span 1!important}}.col-span-12{grid-column:span 12/span 12}.col-span-11{grid-column:span 11/span 11}.col-span-10{grid-column:span 10/span 10}.col-span-9{grid-column:span 9/span 9}.col-span-8{grid-column:span 8/span 8}.col-span-7{grid-column:span 7/span 7}.col-span-6{grid-column:span 6/span 6}.col-span-5{grid-column:span 5/span 5}.col-span-4{grid-column:span 4/span 4}.col-span-3{grid-column:span 3/span 3}.col-span-2{grid-column:span 2/span 2}.col-span-1{grid-column:span 1/span 1}\n"] }]
|
|
7216
7218
|
}], ctorParameters: () => [{ type: i0.EnvironmentInjector }], propDecorators: { entity: [{
|
|
7217
7219
|
type: Input,
|
|
7218
7220
|
args: [{ required: true }]
|
|
@@ -7814,7 +7816,7 @@ class NgxMatEntityEditPageComponent {
|
|
|
7814
7816
|
return runInInjectionContext(this.injector, () => !action.enabled(this.entityPriorChanges));
|
|
7815
7817
|
}
|
|
7816
7818
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgxMatEntityEditPageComponent, deps: [{ token: i1.MatDialog }, { token: i2$7.Location }, { token: i2$6.ActivatedRoute }, { token: i0.EnvironmentInjector }, { token: NGX_EDIT_DATA_ENTITY_SERVICE }, { token: NGX_EDIT_DATA_ENTITY }, { token: NGX_EDIT_DATA }, { token: i2$1.HttpClient }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: NGX_COMPLETE_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
|
|
7817
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: NgxMatEntityEditPageComponent, isStandalone: true, selector: "ngx-mat-entity-edit-page", host: { listeners: { "window:scroll": "checkOffset()", "window:beforeunload": "canDeactivate()" } }, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n@if (!isLoaded && data.displayLoadingSpinner) {\n <div class=\"page-container\">\n <br>\n <mat-spinner></mat-spinner>\n <br>\n </div>\n}\n\n@if (isLoaded) {\n <div class=\"page-container\">\n <br>\n \n <!------------>\n <!-- Header -->\n <!------------>\n <div class=\"header\">\n <div class=\"cancel-container\">\n <button type=\"button\" mat-raised-button class=\"back-button\" tabindex=\"-1\" [class.unsavedChanges]=\"hasUnsavedChanges\" (click)=\"navigateBack()\">\n <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\n {{data.editData.cancelButtonLabel}}\n @if (hasUnsavedChanges) {\n <fa-icon style=\"color: orange;\" [icon]=\"faWarning\"></fa-icon>\n }\n </button>\n </div>\n <div class=\"actions-container\">\n @if (data.editData.actions.length) {\n <button type=\"button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n {{data.editData.actionsLabel}}\n </button>\n }\n <mat-menu #menu=\"matMenu\">\n @for (action of data.editData.actions; track $index) {\n <button type=\"button\" mat-menu-item [disabled]=\"editActionDisabled(action)\" (click)=\"runEditAction(action)\">\n {{action.displayName}}\n </button>\n }\n </mat-menu>\n \n @if (allowDelete) {\n <button type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"delete()\">\n {{data.editData.deleteButtonLabel}}\n </button>\n }\n </div>\n </div>\n \n <h1>{{data.editData.title(entityPriorChanges)}}</h1>\n \n <!----------->\n <!-- Input -->\n <!----------->\n <form (ngSubmit)=\"edit()\">\n <ngx-mat-entity-form [hideOmitForEdit]=\"true\" [isEntityReadOnly]=\"isEntityReadOnly\" [entity]=\"entity\" (selectedTabChange)=\"checkOffset()\" (formChange)=\"checkEntity()\">\n </ngx-mat-entity-form>\n \n <div class=\"bottom-row-container\">\n <div class=\"bottom-row container\">\n <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n [class.badge-changes]=\"!validationErrors.length\"\n [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\"\n [matBadge]=\"validationErrors.length > 0 ? validationErrors.length : changes.length\"\n [matBadgeHidden]=\"!validationErrors.length && !changes.length\"\n >\n {{data.editData.confirmButtonLabel}}\n </button>\n @if (validationErrors.length || changes.length) {\n <ngx-mat-entity-tooltip [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n }\n </div>\n </div>\n </form>\n <br>\n </div>\n}", styles: ["::ng-deep .badge-changes .mat-badge-content{background-color:orange;color:#fff}h1{text-align:center}mat-spinner{margin:10px auto}.page-container{width:100%;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}@media (min-width: 640px){.page-container{max-width:640px}}@media (min-width: 768px){.page-container{max-width:768px}}@media (min-width: 1024px){.page-container{max-width:1024px}}@media (min-width: 1280px){.page-container{max-width:1280px}}@media (min-width: 1536px){.page-container{max-width:1536px}}.bottom-row{display:flex;align-items:center;column-gap:10px;margin-top:10px}.fixed{position:fixed;bottom:0;left:0;right:0;width:100%;z-index:1000;padding:8px 20px;background-color:#fff}.header{display:flex;margin-bottom:5px;gap:10px;flex-wrap:wrap}.header button{min-width:150px}.header .cancel-container{display:flex;justify-content:flex-start;align-items:center;column-gap:10px;width:calc(50% - 10px)}.header .actions-container{display:flex;justify-content:flex-end;gap:10px;width:calc(50% - 10px)}.unsavedChanges{background-color:#ffe48d}@media (max-width: 800px){.header{margin-bottom:10px;gap:15px}.header button{min-width:0px;width:50%}.header .cancel-container,.header .actions-container{width:100%;gap:15px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.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: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.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: MatBadgeModule }, { kind: "directive", type: i9.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: TooltipComponent, selector: "ngx-mat-entity-tooltip", inputs: ["tooltipContent"] }, { kind: "component", type: NgxMatEntityFormComponent, selector: "ngx-mat-entity-form", inputs: ["entity", "isEntityReadOnly", "hideOmitForCreate", "hideOmitForEdit", "additionalOmitKeys"], outputs: ["formChange", "selectedTabChange"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
|
|
7819
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: NgxMatEntityEditPageComponent, isStandalone: true, selector: "ngx-mat-entity-edit-page", host: { listeners: { "window:scroll": "checkOffset()", "window:beforeunload": "canDeactivate()" } }, ngImport: i0, template: "<!-- eslint-disable angular/cyclomatic-complexity -->\n<!-- eslint-disable angular/no-call-expression -->\n@if (!isLoaded && data.displayLoadingSpinner) {\n <div class=\"page-container\">\n <br>\n <mat-spinner></mat-spinner>\n <br>\n </div>\n}\n\n@if (isLoaded) {\n <div class=\"page-container\">\n <br>\n \n <!------------>\n <!-- Header -->\n <!------------>\n <div class=\"header\">\n <div class=\"cancel-container\">\n <button type=\"button\" mat-raised-button class=\"back-button\" tabindex=\"-1\" [class.unsavedChanges]=\"hasUnsavedChanges\" (click)=\"navigateBack()\">\n <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\n {{data.editData.cancelButtonLabel}}\n @if (hasUnsavedChanges) {\n <fa-icon style=\"color: orange;\" [icon]=\"faWarning\"></fa-icon>\n }\n </button>\n </div>\n <div class=\"actions-container\">\n @if (data.editData.actions.length) {\n <button type=\"button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n {{data.editData.actionsLabel}}\n </button>\n }\n <mat-menu #menu=\"matMenu\">\n @for (action of data.editData.actions; track $index) {\n <button type=\"button\" mat-menu-item [disabled]=\"editActionDisabled(action)\" (click)=\"runEditAction(action)\">\n {{action.displayName}}\n </button>\n }\n </mat-menu>\n \n @if (allowDelete) {\n <button type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"delete()\">\n {{data.editData.deleteButtonLabel}}\n </button>\n }\n </div>\n </div>\n \n <h1>{{data.editData.title(entityPriorChanges)}}</h1>\n \n <!----------->\n <!-- Input -->\n <!----------->\n <form (ngSubmit)=\"edit()\">\n <ngx-mat-entity-form [hideOmitForEdit]=\"true\" [isEntityReadOnly]=\"isEntityReadOnly\" [entity]=\"entity\" (selectedTabChange)=\"checkOffset()\" (formChange)=\"checkEntity()\">\n </ngx-mat-entity-form>\n \n <div class=\"bottom-row-container\">\n <div class=\"bottom-row container\">\n <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n [class.badge-changes]=\"!validationErrors.length\"\n [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\"\n [matBadge]=\"validationErrors.length > 0 ? validationErrors.length : changes.length\"\n [matBadgeHidden]=\"!validationErrors.length && !changes.length\"\n >\n {{data.editData.confirmButtonLabel}}\n </button>\n @if (validationErrors.length || changes.length) {\n <ngx-mat-entity-tooltip [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n }\n </div>\n </div>\n </form>\n <br>\n </div>\n}", styles: ["::ng-deep .badge-changes .mat-badge-content{background-color:orange;color:#fff}h1{text-align:center}mat-spinner{margin:10px auto}.page-container{width:100%;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}@media (min-width: 640px){.page-container{max-width:640px}}@media (min-width: 768px){.page-container{max-width:768px}}@media (min-width: 1024px){.page-container{max-width:1024px}}@media (min-width: 1280px){.page-container{max-width:1280px}}@media (min-width: 1536px){.page-container{max-width:1536px}}.bottom-row{display:flex;align-items:center;column-gap:10px;margin-top:10px}.fixed{position:fixed;bottom:0;left:0;right:0;width:100%;z-index:1000;padding:8px 20px;background-color:#fff}.header{display:flex;margin-bottom:5px;gap:10px;flex-wrap:wrap}.header button{min-width:150px}.header .cancel-container{display:flex;justify-content:flex-start;align-items:center;column-gap:10px;width:calc(50% - 10px)}.header .actions-container{display:flex;justify-content:flex-end;gap:10px;width:calc(50% - 10px)}.unsavedChanges{background-color:#ffe48d}@media (max-width: 800px){.header{margin-bottom:10px;gap:15px}.header button{min-width:0px;width:50%}.header .cancel-container,.header .actions-container{width:100%;gap:15px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.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: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.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: MatBadgeModule }, { kind: "directive", type: i9.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: TooltipComponent, selector: "ngx-mat-entity-tooltip", inputs: ["tooltipContent"] }, { kind: "component", type: NgxMatEntityFormComponent, selector: "ngx-mat-entity-form", inputs: ["entity", "isEntityReadOnly", "hideOmitForCreate", "hideOmitForEdit", "additionalOmitKeys"], outputs: ["formChange", "selectedTabChange"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
|
|
7818
7820
|
}
|
|
7819
7821
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgxMatEntityEditPageComponent, decorators: [{
|
|
7820
7822
|
type: Component,
|
|
@@ -7828,7 +7830,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
|
|
|
7828
7830
|
NgxMatEntityFormComponent,
|
|
7829
7831
|
FaIconComponent,
|
|
7830
7832
|
FormsModule
|
|
7831
|
-
], template: "<!-- eslint-disable angular/no-call-expression -->\n@if (!isLoaded && data.displayLoadingSpinner) {\n <div class=\"page-container\">\n <br>\n <mat-spinner></mat-spinner>\n <br>\n </div>\n}\n\n@if (isLoaded) {\n <div class=\"page-container\">\n <br>\n \n <!------------>\n <!-- Header -->\n <!------------>\n <div class=\"header\">\n <div class=\"cancel-container\">\n <button type=\"button\" mat-raised-button class=\"back-button\" tabindex=\"-1\" [class.unsavedChanges]=\"hasUnsavedChanges\" (click)=\"navigateBack()\">\n <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\n {{data.editData.cancelButtonLabel}}\n @if (hasUnsavedChanges) {\n <fa-icon style=\"color: orange;\" [icon]=\"faWarning\"></fa-icon>\n }\n </button>\n </div>\n <div class=\"actions-container\">\n @if (data.editData.actions.length) {\n <button type=\"button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n {{data.editData.actionsLabel}}\n </button>\n }\n <mat-menu #menu=\"matMenu\">\n @for (action of data.editData.actions; track $index) {\n <button type=\"button\" mat-menu-item [disabled]=\"editActionDisabled(action)\" (click)=\"runEditAction(action)\">\n {{action.displayName}}\n </button>\n }\n </mat-menu>\n \n @if (allowDelete) {\n <button type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"delete()\">\n {{data.editData.deleteButtonLabel}}\n </button>\n }\n </div>\n </div>\n \n <h1>{{data.editData.title(entityPriorChanges)}}</h1>\n \n <!----------->\n <!-- Input -->\n <!----------->\n <form (ngSubmit)=\"edit()\">\n <ngx-mat-entity-form [hideOmitForEdit]=\"true\" [isEntityReadOnly]=\"isEntityReadOnly\" [entity]=\"entity\" (selectedTabChange)=\"checkOffset()\" (formChange)=\"checkEntity()\">\n </ngx-mat-entity-form>\n \n <div class=\"bottom-row-container\">\n <div class=\"bottom-row container\">\n <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n [class.badge-changes]=\"!validationErrors.length\"\n [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\"\n [matBadge]=\"validationErrors.length > 0 ? validationErrors.length : changes.length\"\n [matBadgeHidden]=\"!validationErrors.length && !changes.length\"\n >\n {{data.editData.confirmButtonLabel}}\n </button>\n @if (validationErrors.length || changes.length) {\n <ngx-mat-entity-tooltip [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n }\n </div>\n </div>\n </form>\n <br>\n </div>\n}", styles: ["::ng-deep .badge-changes .mat-badge-content{background-color:orange;color:#fff}h1{text-align:center}mat-spinner{margin:10px auto}.page-container{width:100%;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}@media (min-width: 640px){.page-container{max-width:640px}}@media (min-width: 768px){.page-container{max-width:768px}}@media (min-width: 1024px){.page-container{max-width:1024px}}@media (min-width: 1280px){.page-container{max-width:1280px}}@media (min-width: 1536px){.page-container{max-width:1536px}}.bottom-row{display:flex;align-items:center;column-gap:10px;margin-top:10px}.fixed{position:fixed;bottom:0;left:0;right:0;width:100%;z-index:1000;padding:8px 20px;background-color:#fff}.header{display:flex;margin-bottom:5px;gap:10px;flex-wrap:wrap}.header button{min-width:150px}.header .cancel-container{display:flex;justify-content:flex-start;align-items:center;column-gap:10px;width:calc(50% - 10px)}.header .actions-container{display:flex;justify-content:flex-end;gap:10px;width:calc(50% - 10px)}.unsavedChanges{background-color:#ffe48d}@media (max-width: 800px){.header{margin-bottom:10px;gap:15px}.header button{min-width:0px;width:50%}.header .cancel-container,.header .actions-container{width:100%;gap:15px}}\n"] }]
|
|
7833
|
+
], template: "<!-- eslint-disable angular/cyclomatic-complexity -->\n<!-- eslint-disable angular/no-call-expression -->\n@if (!isLoaded && data.displayLoadingSpinner) {\n <div class=\"page-container\">\n <br>\n <mat-spinner></mat-spinner>\n <br>\n </div>\n}\n\n@if (isLoaded) {\n <div class=\"page-container\">\n <br>\n \n <!------------>\n <!-- Header -->\n <!------------>\n <div class=\"header\">\n <div class=\"cancel-container\">\n <button type=\"button\" mat-raised-button class=\"back-button\" tabindex=\"-1\" [class.unsavedChanges]=\"hasUnsavedChanges\" (click)=\"navigateBack()\">\n <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\n {{data.editData.cancelButtonLabel}}\n @if (hasUnsavedChanges) {\n <fa-icon style=\"color: orange;\" [icon]=\"faWarning\"></fa-icon>\n }\n </button>\n </div>\n <div class=\"actions-container\">\n @if (data.editData.actions.length) {\n <button type=\"button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n {{data.editData.actionsLabel}}\n </button>\n }\n <mat-menu #menu=\"matMenu\">\n @for (action of data.editData.actions; track $index) {\n <button type=\"button\" mat-menu-item [disabled]=\"editActionDisabled(action)\" (click)=\"runEditAction(action)\">\n {{action.displayName}}\n </button>\n }\n </mat-menu>\n \n @if (allowDelete) {\n <button type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"delete()\">\n {{data.editData.deleteButtonLabel}}\n </button>\n }\n </div>\n </div>\n \n <h1>{{data.editData.title(entityPriorChanges)}}</h1>\n \n <!----------->\n <!-- Input -->\n <!----------->\n <form (ngSubmit)=\"edit()\">\n <ngx-mat-entity-form [hideOmitForEdit]=\"true\" [isEntityReadOnly]=\"isEntityReadOnly\" [entity]=\"entity\" (selectedTabChange)=\"checkOffset()\" (formChange)=\"checkEntity()\">\n </ngx-mat-entity-form>\n \n <div class=\"bottom-row-container\">\n <div class=\"bottom-row container\">\n <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n [class.badge-changes]=\"!validationErrors.length\"\n [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\"\n [matBadge]=\"validationErrors.length > 0 ? validationErrors.length : changes.length\"\n [matBadgeHidden]=\"!validationErrors.length && !changes.length\"\n >\n {{data.editData.confirmButtonLabel}}\n </button>\n @if (validationErrors.length || changes.length) {\n <ngx-mat-entity-tooltip [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n }\n </div>\n </div>\n </form>\n <br>\n </div>\n}", styles: ["::ng-deep .badge-changes .mat-badge-content{background-color:orange;color:#fff}h1{text-align:center}mat-spinner{margin:10px auto}.page-container{width:100%;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}@media (min-width: 640px){.page-container{max-width:640px}}@media (min-width: 768px){.page-container{max-width:768px}}@media (min-width: 1024px){.page-container{max-width:1024px}}@media (min-width: 1280px){.page-container{max-width:1280px}}@media (min-width: 1536px){.page-container{max-width:1536px}}.bottom-row{display:flex;align-items:center;column-gap:10px;margin-top:10px}.fixed{position:fixed;bottom:0;left:0;right:0;width:100%;z-index:1000;padding:8px 20px;background-color:#fff}.header{display:flex;margin-bottom:5px;gap:10px;flex-wrap:wrap}.header button{min-width:150px}.header .cancel-container{display:flex;justify-content:flex-start;align-items:center;column-gap:10px;width:calc(50% - 10px)}.header .actions-container{display:flex;justify-content:flex-end;gap:10px;width:calc(50% - 10px)}.unsavedChanges{background-color:#ffe48d}@media (max-width: 800px){.header{margin-bottom:10px;gap:15px}.header button{min-width:0px;width:50%}.header .cancel-container,.header .actions-container{width:100%;gap:15px}}\n"] }]
|
|
7832
7834
|
}], ctorParameters: () => [{ type: i1.MatDialog }, { type: i2$7.Location }, { type: i2$6.ActivatedRoute }, { type: i0.EnvironmentInjector }, { type: EntityService, decorators: [{
|
|
7833
7835
|
type: Inject,
|
|
7834
7836
|
args: [NGX_EDIT_DATA_ENTITY_SERVICE]
|
|
@@ -8142,7 +8144,6 @@ function getLineForHeader(entity, head) {
|
|
|
8142
8144
|
*
|
|
8143
8145
|
* Contains the entity for which the component gets displayed.
|
|
8144
8146
|
*/
|
|
8145
|
-
// eslint-disable-next-line angular/prefer-standalone
|
|
8146
8147
|
class NgxMatEntityBaseDisplayColumnValueComponent {
|
|
8147
8148
|
/**
|
|
8148
8149
|
* The entity for which the component gets displayed.
|