@cccteam/ccc-lib 0.0.24 → 0.0.26
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/cccteam-ccc-lib-auth-forms.mjs +13 -13
- package/fesm2022/cccteam-ccc-lib-auth-forms.mjs.map +1 -1
- package/fesm2022/cccteam-ccc-lib-auth-has-permission.mjs +4 -4
- package/fesm2022/cccteam-ccc-lib-auth-has-permission.mjs.map +1 -1
- package/fesm2022/cccteam-ccc-lib-auth-service.mjs +15 -8
- package/fesm2022/cccteam-ccc-lib-auth-service.mjs.map +1 -1
- package/fesm2022/cccteam-ccc-lib-ccc-camel-case-to-title.mjs +3 -3
- package/fesm2022/cccteam-ccc-lib-ccc-grid.mjs +20 -20
- package/fesm2022/cccteam-ccc-lib-ccc-grid.mjs.map +1 -1
- package/fesm2022/cccteam-ccc-lib-ccc-resource-modals.mjs +3 -3
- package/fesm2022/cccteam-ccc-lib-ccc-resource-services.mjs +5 -5
- package/fesm2022/cccteam-ccc-lib-ccc-resource-services.mjs.map +1 -1
- package/fesm2022/cccteam-ccc-lib-ccc-resource.mjs +296 -285
- package/fesm2022/cccteam-ccc-lib-ccc-resource.mjs.map +1 -1
- package/fesm2022/cccteam-ccc-lib-types.mjs +71 -18
- package/fesm2022/cccteam-ccc-lib-types.mjs.map +1 -1
- package/fesm2022/cccteam-ccc-lib-ui-alert.mjs +3 -3
- package/fesm2022/cccteam-ccc-lib-ui-core-service.mjs +7 -7
- package/fesm2022/cccteam-ccc-lib-ui-core-service.mjs.map +1 -1
- package/fesm2022/cccteam-ccc-lib-ui-idle-service.mjs +18 -11
- package/fesm2022/cccteam-ccc-lib-ui-idle-service.mjs.map +1 -1
- package/fesm2022/cccteam-ccc-lib-ui-interceptor.mjs +3 -3
- package/fesm2022/cccteam-ccc-lib-ui-notification-service.mjs +5 -5
- package/fesm2022/cccteam-ccc-lib-ui-notification-service.mjs.map +1 -1
- package/fesm2022/cccteam-ccc-lib-ui-sidenav.mjs +4 -4
- package/fesm2022/cccteam-ccc-lib-ui-sidenav.mjs.map +1 -1
- package/package.json +1 -1
- package/types/cccteam-ccc-lib-auth-service.d.ts +2 -1
- package/types/cccteam-ccc-lib-ccc-resource.d.ts +2 -1
- package/types/cccteam-ccc-lib-forms.d.ts +1 -1
- package/types/cccteam-ccc-lib-types.d.ts +48 -1
- package/types/cccteam-ccc-lib-ui-idle-service.d.ts +2 -1
|
@@ -45,7 +45,7 @@ import { cleanStringForm, sparseFormData } from '@cccteam/ccc-lib/forms';
|
|
|
45
45
|
import { AppGridComponent } from '@cccteam/ccc-lib/ccc-grid';
|
|
46
46
|
|
|
47
47
|
class ActionAccessControlWrapperComponent {
|
|
48
|
-
actionContext = input(
|
|
48
|
+
actionContext = input(...(ngDevMode ? [undefined, { debugName: "actionContext" }] : []));
|
|
49
49
|
showAction = computed(() => {
|
|
50
50
|
const context = this.actionContext();
|
|
51
51
|
let isActionPermittedForUser = true;
|
|
@@ -79,13 +79,13 @@ class ActionAccessControlWrapperComponent {
|
|
|
79
79
|
console.error(e);
|
|
80
80
|
}
|
|
81
81
|
return showAction;
|
|
82
|
-
},
|
|
83
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
84
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
82
|
+
}, ...(ngDevMode ? [{ debugName: "showAction" }] : []));
|
|
83
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ActionAccessControlWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
84
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ActionAccessControlWrapperComponent, isStandalone: true, selector: "action-access-control-wrapper", inputs: { actionContext: { classPropertyName: "actionContext", publicName: "actionContext", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `@if (showAction()) {
|
|
85
85
|
<ng-content />
|
|
86
86
|
}`, isInline: true, styles: [":host{margin-top:auto;margin-bottom:auto}\n"] });
|
|
87
87
|
}
|
|
88
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
88
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ActionAccessControlWrapperComponent, decorators: [{
|
|
89
89
|
type: Component,
|
|
90
90
|
args: [{ selector: 'action-access-control-wrapper', template: `@if (showAction()) {
|
|
91
91
|
<ng-content />
|
|
@@ -191,17 +191,17 @@ const resourceValidators = Object.freeze({
|
|
|
191
191
|
});
|
|
192
192
|
|
|
193
193
|
class PaddingElementComponent {
|
|
194
|
-
paddingElement = input.required(
|
|
194
|
+
paddingElement = input.required(...(ngDevMode ? [{ debugName: "paddingElement" }] : []));
|
|
195
195
|
class = 'col-6';
|
|
196
196
|
ngOnInit() {
|
|
197
197
|
if (this.paddingElement().cols) {
|
|
198
198
|
this.class = 'col-' + this.paddingElement()?.cols;
|
|
199
199
|
}
|
|
200
200
|
}
|
|
201
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
202
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.
|
|
201
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PaddingElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
202
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: PaddingElementComponent, isStandalone: true, selector: "ccc-padding-element", inputs: { paddingElement: { classPropertyName: "paddingElement", publicName: "paddingElement", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div class=\"padding-container\"></div>\n", styles: [".padding-container{height:52px}\n"] });
|
|
203
203
|
}
|
|
204
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
204
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PaddingElementComponent, decorators: [{
|
|
205
205
|
type: Component,
|
|
206
206
|
args: [{ selector: 'ccc-padding-element', imports: [], template: "<div class=\"padding-container\"></div>\n", styles: [".padding-container{height:52px}\n"] }]
|
|
207
207
|
}], propDecorators: { paddingElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingElement", required: true }] }], class: [{
|
|
@@ -210,9 +210,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
210
210
|
}] } });
|
|
211
211
|
|
|
212
212
|
class ComputedFieldComponent {
|
|
213
|
-
fieldConfig = input.required(
|
|
214
|
-
fieldClass = input(
|
|
215
|
-
formDataState = input(
|
|
213
|
+
fieldConfig = input.required(...(ngDevMode ? [{ debugName: "fieldConfig" }] : []));
|
|
214
|
+
fieldClass = input(...(ngDevMode ? [undefined, { debugName: "fieldClass" }] : []));
|
|
215
|
+
formDataState = input(...(ngDevMode ? [undefined, { debugName: "formDataState" }] : []));
|
|
216
216
|
computedValue = computed(() => {
|
|
217
217
|
try {
|
|
218
218
|
return this.fieldConfig().calculatedValue(this.formDataState());
|
|
@@ -222,7 +222,7 @@ class ComputedFieldComponent {
|
|
|
222
222
|
console.error(e);
|
|
223
223
|
return '';
|
|
224
224
|
}
|
|
225
|
-
},
|
|
225
|
+
}, ...(ngDevMode ? [{ debugName: "computedValue" }] : []));
|
|
226
226
|
showField = computed(() => {
|
|
227
227
|
const shouldRender = this.fieldConfig().shouldRender;
|
|
228
228
|
if (typeof shouldRender === 'boolean') {
|
|
@@ -236,17 +236,17 @@ class ComputedFieldComponent {
|
|
|
236
236
|
console.error(e);
|
|
237
237
|
return true;
|
|
238
238
|
}
|
|
239
|
-
},
|
|
239
|
+
}, ...(ngDevMode ? [{ debugName: "showField" }] : []));
|
|
240
240
|
class = '';
|
|
241
241
|
constructor() {
|
|
242
242
|
effect(() => {
|
|
243
243
|
this.class = this.showField() ? 'col-' + this.fieldConfig()?.cols : 'hidden-field';
|
|
244
244
|
});
|
|
245
245
|
}
|
|
246
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
247
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
246
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ComputedFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
247
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ComputedFieldComponent, isStandalone: true, selector: "ccc-computed-field", inputs: { fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: true, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: true, isRequired: false, transformFunction: null }, formDataState: { classPropertyName: "formDataState", publicName: "formDataState", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "@if (showField()) {\n <div class=\"readonly-field\">\n <mat-form-field class=\"field {{ fieldClass() }}\" [subscriptSizing]=\"'dynamic'\">\n <mat-label>{{ fieldConfig().label }}</mat-label>\n <input\n matInput\n (keydown.enter)=\"$event.preventDefault()\"\n [readonly]=\"true\"\n type=\"text\"\n [value]=\"computedValue()\" />\n </mat-form-field>\n </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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"] }] });
|
|
248
248
|
}
|
|
249
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
249
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ComputedFieldComponent, decorators: [{
|
|
250
250
|
type: Component,
|
|
251
251
|
args: [{ selector: 'ccc-computed-field', imports: [MatFormFieldModule, MatButtonModule, MatInputModule], template: "@if (showField()) {\n <div class=\"readonly-field\">\n <mat-form-field class=\"field {{ fieldClass() }}\" [subscriptSizing]=\"'dynamic'\">\n <mat-label>{{ fieldConfig().label }}</mat-label>\n <input\n matInput\n (keydown.enter)=\"$event.preventDefault()\"\n [readonly]=\"true\"\n type=\"text\"\n [value]=\"computedValue()\" />\n </mat-form-field>\n </div>\n}\n" }]
|
|
252
252
|
}], ctorParameters: () => [], propDecorators: { fieldConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldConfig", required: true }] }], fieldClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldClass", required: false }] }], formDataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "formDataState", required: false }] }], class: [{
|
|
@@ -255,57 +255,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
255
255
|
}] } });
|
|
256
256
|
|
|
257
257
|
class EmptyReadonlyFieldComponent {
|
|
258
|
-
label = input.required(
|
|
258
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
259
259
|
displayValue = defaultEmptyFieldValue;
|
|
260
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
261
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.
|
|
260
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: EmptyReadonlyFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
261
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: EmptyReadonlyFieldComponent, isStandalone: true, selector: "ccc-empty-readonly-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"readonly-field\">\n <mat-form-field class=\"field\" [subscriptSizing]=\"'dynamic'\">\n <mat-label>{{ label() }}</mat-label>\n <input\n matInput\n (keydown.enter)=\"$event.preventDefault()\"\n [readonly]=\"true\"\n type=\"text\"\n [value]=\"displayValue\"\n id=\"{{ label() }}-readonly-input-text\" />\n </mat-form-field>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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"] }] });
|
|
262
262
|
}
|
|
263
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
263
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: EmptyReadonlyFieldComponent, decorators: [{
|
|
264
264
|
type: Component,
|
|
265
265
|
args: [{ selector: 'ccc-empty-readonly-field', imports: [MatFormFieldModule, MatButtonModule, MatInputModule], template: "<div class=\"readonly-field\">\n <mat-form-field class=\"field\" [subscriptSizing]=\"'dynamic'\">\n <mat-label>{{ label() }}</mat-label>\n <input\n matInput\n (keydown.enter)=\"$event.preventDefault()\"\n [readonly]=\"true\"\n type=\"text\"\n [value]=\"displayValue\"\n id=\"{{ label() }}-readonly-input-text\" />\n </mat-form-field>\n</div>\n" }]
|
|
266
266
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }] } });
|
|
267
267
|
|
|
268
268
|
class ResourceStore {
|
|
269
|
-
resourceMeta = signal({},
|
|
270
|
-
resourceName = signal('',
|
|
271
|
-
filter = signal('',
|
|
272
|
-
disableCacheForFilterPii = signal(false,
|
|
273
|
-
searchTokens = signal('',
|
|
274
|
-
sorts = signal([],
|
|
275
|
-
listColumns = signal([],
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
269
|
+
resourceMeta = signal({}, ...(ngDevMode ? [{ debugName: "resourceMeta" }] : []));
|
|
270
|
+
resourceName = signal('', ...(ngDevMode ? [{ debugName: "resourceName" }] : []));
|
|
271
|
+
filter = signal('', ...(ngDevMode ? [{ debugName: "filter" }] : []));
|
|
272
|
+
disableCacheForFilterPii = signal(false, ...(ngDevMode ? [{ debugName: "disableCacheForFilterPii" }] : []));
|
|
273
|
+
searchTokens = signal('', ...(ngDevMode ? [{ debugName: "searchTokens" }] : []));
|
|
274
|
+
sorts = signal([], ...(ngDevMode ? [{ debugName: "sorts" }] : []));
|
|
275
|
+
listColumns = signal([], ...(ngDevMode ? [{ debugName: "listColumns" }] : []));
|
|
276
|
+
limit = signal(undefined, ...(ngDevMode ? [{ debugName: "limit" }] : []));
|
|
277
|
+
requireSearchToDisplayResults = signal(false, ...(ngDevMode ? [{ debugName: "requireSearchToDisplayResults" }] : []));
|
|
278
|
+
uuid = signal('', ...(ngDevMode ? [{ debugName: "uuid" }] : []));
|
|
279
|
+
error = signal('', ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
279
280
|
notifications = inject(NotificationService);
|
|
280
281
|
http = inject(HttpClient);
|
|
281
282
|
router = inject(Router);
|
|
282
283
|
injector = inject(Injector);
|
|
283
284
|
apiUrl = inject(API_URL);
|
|
284
285
|
methodMeta = inject(METHOD_META);
|
|
285
|
-
resourceListRef = signal(undefined,
|
|
286
|
+
resourceListRef = signal(undefined, ...(ngDevMode ? [{ debugName: "resourceListRef" }] : []));
|
|
286
287
|
listData = computed(() => {
|
|
287
288
|
const ref = this.resourceListRef();
|
|
288
289
|
if (ref && ref.status() === 'resolved') {
|
|
289
290
|
return ref.value();
|
|
290
291
|
}
|
|
291
292
|
return [];
|
|
292
|
-
},
|
|
293
|
+
}, ...(ngDevMode ? [{ debugName: "listData" }] : []));
|
|
293
294
|
listStatus = computed(() => {
|
|
294
295
|
return this.resourceListRef()?.status();
|
|
295
|
-
},
|
|
296
|
-
resourceViewRef = signal(undefined,
|
|
296
|
+
}, ...(ngDevMode ? [{ debugName: "listStatus" }] : []));
|
|
297
|
+
resourceViewRef = signal(undefined, ...(ngDevMode ? [{ debugName: "resourceViewRef" }] : []));
|
|
297
298
|
viewData = computed(() => {
|
|
298
299
|
const ref = this.resourceViewRef();
|
|
299
300
|
if (ref && ref.status() === 'resolved') {
|
|
300
301
|
return ref.value();
|
|
301
302
|
}
|
|
302
303
|
return {};
|
|
303
|
-
},
|
|
304
|
+
}, ...(ngDevMode ? [{ debugName: "viewData" }] : []));
|
|
304
305
|
viewStatus = computed(() => {
|
|
305
306
|
return this.resourceViewRef()?.status();
|
|
306
|
-
},
|
|
307
|
-
overrideRoute = signal('',
|
|
308
|
-
resourceRoute = computed(() => this.resourceMeta()?.route,
|
|
307
|
+
}, ...(ngDevMode ? [{ debugName: "viewStatus" }] : []));
|
|
308
|
+
overrideRoute = signal('', ...(ngDevMode ? [{ debugName: "overrideRoute" }] : []));
|
|
309
|
+
resourceRoute = computed(() => this.resourceMeta()?.route, ...(ngDevMode ? [{ debugName: "resourceRoute" }] : []));
|
|
309
310
|
route = computed(() => {
|
|
310
311
|
if (this.overrideRoute()) {
|
|
311
312
|
return this.overrideRoute();
|
|
@@ -315,7 +316,7 @@ class ResourceStore {
|
|
|
315
316
|
return route;
|
|
316
317
|
}
|
|
317
318
|
return '';
|
|
318
|
-
},
|
|
319
|
+
}, ...(ngDevMode ? [{ debugName: "route" }] : []));
|
|
319
320
|
reloadViewData() {
|
|
320
321
|
this.resourceViewRef()?.reload();
|
|
321
322
|
}
|
|
@@ -335,8 +336,8 @@ class ResourceStore {
|
|
|
335
336
|
if (resourceMeta && resourceMeta.fields.some((field) => field.fieldName === 'id')) {
|
|
336
337
|
columnIds.push('id');
|
|
337
338
|
}
|
|
338
|
-
const uniqueColumns = signal([...new Set([...columnIds])],
|
|
339
|
-
const ref = this.resourceList(this.route, this.filter, uniqueColumns, this.disableCacheForFilterPii, this.searchTokens, this.sorts);
|
|
339
|
+
const uniqueColumns = signal([...new Set([...columnIds])], ...(ngDevMode ? [{ debugName: "uniqueColumns" }] : []));
|
|
340
|
+
const ref = this.resourceList(this.route, this.filter, uniqueColumns, this.disableCacheForFilterPii, this.searchTokens, this.sorts, this.limit);
|
|
340
341
|
this.resourceListRef.set(ref);
|
|
341
342
|
this.reloadListData();
|
|
342
343
|
}
|
|
@@ -392,7 +393,7 @@ class ResourceStore {
|
|
|
392
393
|
},
|
|
393
394
|
}));
|
|
394
395
|
}
|
|
395
|
-
resourceList(route, filter = signal(''), columns = signal([]), disableCacheForFilterPii = signal(false), searchTokens = signal(''), sorts = signal([]), defaultEmpty = false) {
|
|
396
|
+
resourceList(route, filter = signal(''), columns = signal([]), disableCacheForFilterPii = signal(false), searchTokens = signal(''), sorts = signal([]), limit = signal(undefined), defaultEmpty = false) {
|
|
396
397
|
return untracked(() => {
|
|
397
398
|
return rxResource({
|
|
398
399
|
defaultValue: [],
|
|
@@ -403,6 +404,7 @@ class ResourceStore {
|
|
|
403
404
|
columns: columns(),
|
|
404
405
|
searchTokens: searchTokens(),
|
|
405
406
|
sorts: sorts(),
|
|
407
|
+
limit: limit(),
|
|
406
408
|
}),
|
|
407
409
|
stream: ({ params }) => {
|
|
408
410
|
if (!params.route)
|
|
@@ -410,15 +412,17 @@ class ResourceStore {
|
|
|
410
412
|
if (defaultEmpty && (!params.searchTokens || params.searchTokens.trim() === '')) {
|
|
411
413
|
return of([]);
|
|
412
414
|
}
|
|
413
|
-
return this.list(String(params.route), params.filter, disableCacheForFilterPii(), params.columns, params.searchTokens, params.sorts);
|
|
415
|
+
return this.list(String(params.route), params.filter, disableCacheForFilterPii(), params.columns, params.searchTokens, params.sorts, params.limit);
|
|
414
416
|
},
|
|
415
417
|
});
|
|
416
418
|
});
|
|
417
419
|
}
|
|
418
|
-
list(resourceRoute, filter, disableCacheForFilterPii, columns, searchTokens, sort) {
|
|
420
|
+
list(resourceRoute, filter, disableCacheForFilterPii, columns, searchTokens, sort, limit) {
|
|
419
421
|
const paramsObj = {};
|
|
420
422
|
if (filter && filter.trim() !== '')
|
|
421
423
|
paramsObj['filter'] = filter;
|
|
424
|
+
if (limit && limit > 0)
|
|
425
|
+
paramsObj['limit'] = String(limit);
|
|
422
426
|
if (columns && columns.length > 0)
|
|
423
427
|
paramsObj['columns'] = columns.join(',');
|
|
424
428
|
if (searchTokens && searchTokens.trim() !== '')
|
|
@@ -457,10 +461,10 @@ class ResourceStore {
|
|
|
457
461
|
}
|
|
458
462
|
}));
|
|
459
463
|
}
|
|
460
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
461
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
464
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
465
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceStore });
|
|
462
466
|
}
|
|
463
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
467
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceStore, decorators: [{
|
|
464
468
|
type: Injectable
|
|
465
469
|
}] });
|
|
466
470
|
|
|
@@ -536,15 +540,15 @@ class BaseInputComponent {
|
|
|
536
540
|
resourceMeta = inject(RESOURCE_META);
|
|
537
541
|
injector = inject(Injector);
|
|
538
542
|
store = inject(ResourceStore);
|
|
539
|
-
meta = input.required(
|
|
540
|
-
pristineValue = input(
|
|
541
|
-
editMode = input.required(
|
|
542
|
-
showField = input(
|
|
543
|
-
fieldConfig = input.required(
|
|
544
|
-
fieldClass = input(
|
|
545
|
-
fieldMeta = input.required(
|
|
546
|
-
form = input.required(
|
|
547
|
-
relatedData = input(
|
|
543
|
+
meta = input.required(...(ngDevMode ? [{ debugName: "meta" }] : []));
|
|
544
|
+
pristineValue = input(...(ngDevMode ? [undefined, { debugName: "pristineValue" }] : []));
|
|
545
|
+
editMode = input.required(...(ngDevMode ? [{ debugName: "editMode" }] : []));
|
|
546
|
+
showField = input(...(ngDevMode ? [undefined, { debugName: "showField" }] : []));
|
|
547
|
+
fieldConfig = input.required(...(ngDevMode ? [{ debugName: "fieldConfig" }] : []));
|
|
548
|
+
fieldClass = input(...(ngDevMode ? [undefined, { debugName: "fieldClass" }] : []));
|
|
549
|
+
fieldMeta = input.required(...(ngDevMode ? [{ debugName: "fieldMeta" }] : []));
|
|
550
|
+
form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
|
|
551
|
+
relatedData = input(...(ngDevMode ? [undefined, { debugName: "relatedData" }] : []));
|
|
548
552
|
/**
|
|
549
553
|
* Resets the field back to its pristine value.
|
|
550
554
|
*/
|
|
@@ -591,7 +595,7 @@ class BaseInputComponent {
|
|
|
591
595
|
}
|
|
592
596
|
});
|
|
593
597
|
return builtPrefix;
|
|
594
|
-
},
|
|
598
|
+
}, ...(ngDevMode ? [{ debugName: "prefixString" }] : []));
|
|
595
599
|
suffixString = computed(() => {
|
|
596
600
|
const relatedData = this.relatedData();
|
|
597
601
|
let builtSuffix = '';
|
|
@@ -627,7 +631,7 @@ class BaseInputComponent {
|
|
|
627
631
|
}
|
|
628
632
|
});
|
|
629
633
|
return builtSuffix;
|
|
630
|
-
},
|
|
634
|
+
}, ...(ngDevMode ? [{ debugName: "suffixString" }] : []));
|
|
631
635
|
floatLabel = computed(() => {
|
|
632
636
|
if (this.fieldConfig().prefixes.length > 0 || this.fieldConfig().suffixes.length > 0) {
|
|
633
637
|
return 'always';
|
|
@@ -635,28 +639,28 @@ class BaseInputComponent {
|
|
|
635
639
|
else {
|
|
636
640
|
return 'auto';
|
|
637
641
|
}
|
|
638
|
-
},
|
|
639
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
640
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.
|
|
642
|
+
}, ...(ngDevMode ? [{ debugName: "floatLabel" }] : []));
|
|
643
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BaseInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
644
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: BaseInputComponent, isStandalone: true, inputs: { meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: true, transformFunction: null }, pristineValue: { classPropertyName: "pristineValue", publicName: "pristineValue", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: true, transformFunction: null }, showField: { classPropertyName: "showField", publicName: "showField", isSignal: true, isRequired: false, transformFunction: null }, fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: true, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: true, isRequired: false, transformFunction: null }, fieldMeta: { classPropertyName: "fieldMeta", publicName: "fieldMeta", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, relatedData: { classPropertyName: "relatedData", publicName: "relatedData", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
641
645
|
}
|
|
642
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
646
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BaseInputComponent, decorators: [{
|
|
643
647
|
type: Directive
|
|
644
648
|
}], propDecorators: { meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: true }] }], pristineValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "pristineValue", required: false }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: true }] }], showField: [{ type: i0.Input, args: [{ isSignal: true, alias: "showField", required: false }] }], fieldConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldConfig", required: true }] }], fieldClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldClass", required: false }] }], fieldMeta: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldMeta", required: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], relatedData: [{ type: i0.Input, args: [{ isSignal: true, alias: "relatedData", required: false }] }] } });
|
|
645
649
|
|
|
646
650
|
class BooleanFieldComponent extends BaseInputComponent {
|
|
647
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
648
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
651
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BooleanFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
652
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: BooleanFieldComponent, isStandalone: true, selector: "ccc-boolean-field", usesInheritance: true, ngImport: i0, template: "@if (showField()) {\n <ng-container [formGroup]=\"form()\">\n <div [class.readonly-field]=\"editMode() === 'view'\">\n <mat-checkbox\n class=\"field checkbox {{ fieldClass() }}\"\n [formControlName]=\"fieldConfig().name\"\n (keydown.enter)=\"$event.preventDefault()\">\n {{ fieldConfig().label }}\n </mat-checkbox>\n </div>\n </ng-container>\n} @else {\n <ng-container [formGroup]=\"form()\">\n <input type=\"hidden\" [formControlName]=\"fieldConfig().name\" />\n </ng-container>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$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"] }] });
|
|
649
653
|
}
|
|
650
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
654
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BooleanFieldComponent, decorators: [{
|
|
651
655
|
type: Component,
|
|
652
656
|
args: [{ selector: 'ccc-boolean-field', imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, ReactiveFormsModule, MatCheckboxModule], template: "@if (showField()) {\n <ng-container [formGroup]=\"form()\">\n <div [class.readonly-field]=\"editMode() === 'view'\">\n <mat-checkbox\n class=\"field checkbox {{ fieldClass() }}\"\n [formControlName]=\"fieldConfig().name\"\n (keydown.enter)=\"$event.preventDefault()\">\n {{ fieldConfig().label }}\n </mat-checkbox>\n </div>\n </ng-container>\n} @else {\n <ng-container [formGroup]=\"form()\">\n <input type=\"hidden\" [formControlName]=\"fieldConfig().name\" />\n </ng-container>\n}\n" }]
|
|
653
657
|
}] });
|
|
654
658
|
|
|
655
659
|
class DateFieldComponent extends BaseInputComponent {
|
|
656
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
657
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
660
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DateFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
661
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DateFieldComponent, isStandalone: true, selector: "ccc-date-field", usesInheritance: true, ngImport: i0, template: "@if (showField()) {\n <div [class.readonly-field]=\"editMode() === 'view'\">\n <mat-form-field class=\"field {{ fieldClass() }}\" [formGroup]=\"form()\" [subscriptSizing]=\"'dynamic'\">\n <mat-label>{{ fieldConfig().label }}</mat-label>\n <input\n matInput\n [readonly]=\"editMode() === 'view'\"\n [matDatepicker]=\"picker\"\n type=\"text\"\n (keydown.enter)=\"$event.preventDefault()\"\n [formControlName]=\"fieldConfig().name\" />\n @if (editMode() === 'edit') {\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n }\n <mat-datepicker #picker></mat-datepicker>\n </mat-form-field>\n </div>\n} @else {\n <ng-container [formGroup]=\"form()\">\n <input type=\"hidden\" [formControlName]=\"fieldConfig().name\" />\n </ng-container>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: MatDatepickerModule }, { kind: "component", type: i3$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
|
|
658
662
|
}
|
|
659
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
663
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DateFieldComponent, decorators: [{
|
|
660
664
|
type: Component,
|
|
661
665
|
args: [{ selector: 'ccc-date-field', imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, ReactiveFormsModule], template: "@if (showField()) {\n <div [class.readonly-field]=\"editMode() === 'view'\">\n <mat-form-field class=\"field {{ fieldClass() }}\" [formGroup]=\"form()\" [subscriptSizing]=\"'dynamic'\">\n <mat-label>{{ fieldConfig().label }}</mat-label>\n <input\n matInput\n [readonly]=\"editMode() === 'view'\"\n [matDatepicker]=\"picker\"\n type=\"text\"\n (keydown.enter)=\"$event.preventDefault()\"\n [formControlName]=\"fieldConfig().name\" />\n @if (editMode() === 'edit') {\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n }\n <mat-datepicker #picker></mat-datepicker>\n </mat-form-field>\n </div>\n} @else {\n <ng-container [formGroup]=\"form()\">\n <input type=\"hidden\" [formControlName]=\"fieldConfig().name\" />\n </ng-container>\n}\n" }]
|
|
662
666
|
}] });
|
|
@@ -837,28 +841,28 @@ function camelCase(str) {
|
|
|
837
841
|
class EnumeratedFieldComponent extends BaseInputComponent {
|
|
838
842
|
activatedRoute = inject(ActivatedRoute);
|
|
839
843
|
router = inject(Router);
|
|
840
|
-
reloadSignal = signal(false,
|
|
841
|
-
query = signal('',
|
|
844
|
+
reloadSignal = signal(false, ...(ngDevMode ? [{ debugName: "reloadSignal" }] : []));
|
|
845
|
+
query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : []));
|
|
842
846
|
resource = computed(() => {
|
|
843
847
|
if (this.fieldConfig()?.enumeratedConfig?.overrideResource) {
|
|
844
848
|
return this.fieldConfig()?.enumeratedConfig?.overrideResource;
|
|
845
849
|
}
|
|
846
850
|
return this.fieldMeta()?.enumeratedResource;
|
|
847
|
-
},
|
|
851
|
+
}, ...(ngDevMode ? [{ debugName: "resource" }] : []));
|
|
848
852
|
tooltipMessage = computed(() => {
|
|
849
853
|
const label = this.fieldConfig().label;
|
|
850
854
|
return 'View ' + label + ' details';
|
|
851
|
-
},
|
|
855
|
+
}, ...(ngDevMode ? [{ debugName: "tooltipMessage" }] : []));
|
|
852
856
|
route = computed(() => {
|
|
853
857
|
const resource = this.fieldMeta()?.enumeratedResource;
|
|
854
858
|
return this.resourceMeta(resource)?.route;
|
|
855
|
-
},
|
|
859
|
+
}, ...(ngDevMode ? [{ debugName: "route" }] : []));
|
|
856
860
|
viewDetails = computed(() => {
|
|
857
861
|
return this.editMode() === 'view' && this.fieldConfig().enumeratedConfig.viewDetails === true;
|
|
858
|
-
},
|
|
862
|
+
}, ...(ngDevMode ? [{ debugName: "viewDetails" }] : []));
|
|
859
863
|
sorts = computed(() => {
|
|
860
864
|
return this.fieldConfig().enumeratedConfig.sorts;
|
|
861
|
-
},
|
|
865
|
+
}, ...(ngDevMode ? [{ debugName: "sorts" }] : []));
|
|
862
866
|
singleEnumResourceRef = computed(() => {
|
|
863
867
|
this.editMode();
|
|
864
868
|
if (this.showField() === false) {
|
|
@@ -872,13 +876,13 @@ class EnumeratedFieldComponent extends BaseInputComponent {
|
|
|
872
876
|
return untracked(() => this.store.resourceView(this.route, signal(fieldValue)));
|
|
873
877
|
}
|
|
874
878
|
return undefined;
|
|
875
|
-
},
|
|
879
|
+
}, ...(ngDevMode ? [{ debugName: "singleEnumResourceRef" }] : []));
|
|
876
880
|
rootResourceRef = computed(() => {
|
|
877
881
|
const rootConfig = this.activatedRoute.snapshot.data['config'];
|
|
878
882
|
const uuid = (this.activatedRoute.snapshot.params['uuid'] || '');
|
|
879
883
|
const rootMeta = this.resourceMeta(rootConfig.parentConfig.primaryResource);
|
|
880
884
|
return this.store.resourceView(signal(rootMeta.route), signal(uuid));
|
|
881
|
-
},
|
|
885
|
+
}, ...(ngDevMode ? [{ debugName: "rootResourceRef" }] : []));
|
|
882
886
|
enumResourceRef = computed(() => {
|
|
883
887
|
if (this.showField() === false)
|
|
884
888
|
return undefined;
|
|
@@ -888,7 +892,7 @@ class EnumeratedFieldComponent extends BaseInputComponent {
|
|
|
888
892
|
? config?.filter?.(this.rootResourceRef()?.value() || {})
|
|
889
893
|
: config?.filter?.(this.relatedData() || {});
|
|
890
894
|
return this.store.resourceList(signal(enumeratedMeta.route), signal(filter), signal([]), signal(config.disableCacheForFilterPii), this.query, this.sorts);
|
|
891
|
-
},
|
|
895
|
+
}, ...(ngDevMode ? [{ debugName: "enumResourceRef" }] : []));
|
|
892
896
|
singleEnumDisplayText = computed(() => {
|
|
893
897
|
const showField = this.showField();
|
|
894
898
|
if (showField === false) {
|
|
@@ -906,7 +910,7 @@ class EnumeratedFieldComponent extends BaseInputComponent {
|
|
|
906
910
|
}
|
|
907
911
|
const enumeratedValues = this.toEnumerated(record, fieldConfig);
|
|
908
912
|
return enumeratedValues.display;
|
|
909
|
-
},
|
|
913
|
+
}, ...(ngDevMode ? [{ debugName: "singleEnumDisplayText" }] : []));
|
|
910
914
|
hasRequiredValidator = computed(() => {
|
|
911
915
|
const form = this.form();
|
|
912
916
|
const fieldConfig = this.fieldConfig();
|
|
@@ -918,7 +922,7 @@ class EnumeratedFieldComponent extends BaseInputComponent {
|
|
|
918
922
|
return false;
|
|
919
923
|
}
|
|
920
924
|
return control.hasValidator(Validators.required);
|
|
921
|
-
},
|
|
925
|
+
}, ...(ngDevMode ? [{ debugName: "hasRequiredValidator" }] : []));
|
|
922
926
|
singleEnumValue = computed(() => {
|
|
923
927
|
if (this.showField() === false)
|
|
924
928
|
return undefined;
|
|
@@ -929,7 +933,7 @@ class EnumeratedFieldComponent extends BaseInputComponent {
|
|
|
929
933
|
if (!record)
|
|
930
934
|
return [];
|
|
931
935
|
return [this.toEnumerated(record, this.fieldConfig())];
|
|
932
|
-
},
|
|
936
|
+
}, ...(ngDevMode ? [{ debugName: "singleEnumValue" }] : []));
|
|
933
937
|
listEnumValues = computed(() => {
|
|
934
938
|
if (this.showField() === false)
|
|
935
939
|
return [];
|
|
@@ -938,13 +942,17 @@ class EnumeratedFieldComponent extends BaseInputComponent {
|
|
|
938
942
|
if (!records || !records.length)
|
|
939
943
|
return currentValue || [];
|
|
940
944
|
return records.map((record) => this.toEnumerated(record, this.fieldConfig()));
|
|
941
|
-
},
|
|
945
|
+
}, ...(ngDevMode ? [{ debugName: "listEnumValues" }] : []));
|
|
942
946
|
availableEnumOptions = computed(() => {
|
|
943
|
-
|
|
944
|
-
|
|
947
|
+
const editMode = this.editMode() === 'edit';
|
|
948
|
+
const options = editMode ? this.listEnumValues() : this.singleEnumValue();
|
|
949
|
+
const meta = this.fieldMeta();
|
|
950
|
+
const metaRequired = 'required' in meta && meta.required;
|
|
951
|
+
if (editMode && !this.hasRequiredValidator() && options && options.length > 0 && !metaRequired) {
|
|
952
|
+
return [{ id: null, display: defaultEmptyFieldValue }, ...options];
|
|
945
953
|
}
|
|
946
|
-
return
|
|
947
|
-
},
|
|
954
|
+
return options;
|
|
955
|
+
}, ...(ngDevMode ? [{ debugName: "availableEnumOptions" }] : []));
|
|
948
956
|
toEnumerated(resource, element) {
|
|
949
957
|
const enumeratedConfig = element.enumeratedConfig;
|
|
950
958
|
const displayFields = this.editMode() === 'edit' && enumeratedConfig.listDisplay.length > 0
|
|
@@ -964,7 +972,9 @@ class EnumeratedFieldComponent extends BaseInputComponent {
|
|
|
964
972
|
return '';
|
|
965
973
|
if (typeof value === 'string') {
|
|
966
974
|
const option = this.availableEnumOptions()?.find((o) => o.id === value);
|
|
967
|
-
|
|
975
|
+
if (!option)
|
|
976
|
+
return '';
|
|
977
|
+
return option['display'] || (option.id !== null ? this.formatDisplay(option) : '');
|
|
968
978
|
}
|
|
969
979
|
return value['display'] || this.formatDisplay(value);
|
|
970
980
|
};
|
|
@@ -980,10 +990,10 @@ class EnumeratedFieldComponent extends BaseInputComponent {
|
|
|
980
990
|
this.form().markAsTouched();
|
|
981
991
|
this.reloadSignal.update((prev) => !prev);
|
|
982
992
|
}
|
|
983
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
984
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
993
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: EnumeratedFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
994
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: EnumeratedFieldComponent, isStandalone: true, selector: "ccc-enumerated-field", usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"form()\">\n @if (showField()) {\n @let options = availableEnumOptions();\n @if (editMode() === 'edit') {\n <div class=\"enumerated-field-container\">\n <mat-form-field class=\"field {{ fieldClass() }}\" [subscriptSizing]=\"'dynamic'\">\n <mat-label>{{ fieldConfig().label }}</mat-label>\n @if (fieldConfig().enumeratedConfig.searchable) {\n <input\n #input\n type=\"text\"\n placeholder=\"Search\"\n matInput\n [matAutocomplete]=\"auto\"\n [formControlName]=\"fieldConfig().name\"\n (input)=\"search(input.value)\" />\n <mat-autocomplete\n (optionSelected)=\"select($event.option.value)\"\n #auto=\"matAutocomplete\"\n [displayWith]=\"getDisplayText\">\n @for (option of options; track option.id) {\n <mat-option [value]=\"option.id\">{{ option?.display }}</mat-option>\n }\n </mat-autocomplete>\n } @else {\n <mat-select\n [formControlName]=\"fieldConfig().name\"\n (keydown.enter)=\"$event.preventDefault()\"\n (selectionChange)=\"select($event.value)\"\n [ariaReadOnly]=\"editMode() === 'view'\">\n @for (option of options; track option.id) {\n @if (option?.id === form().get(this.fieldConfig().name)?.value) {\n <mat-option [value]=\"option?.id\" selected>{{ option?.display }}</mat-option>\n } @else {\n <mat-option [value]=\"option?.id\">{{ option?.display }}</mat-option>\n }\n }\n </mat-select>\n }\n </mat-form-field>\n </div>\n } @else {\n <div class=\"enumerated-field-container readonly-field\">\n <mat-form-field class=\"field {{ fieldClass() }}\" [subscriptSizing]=\"'dynamic'\">\n <mat-label>{{ fieldConfig().label }}</mat-label>\n <input\n id=\"{{ fieldConfig().name }}-readonly-input-text\"\n matInput\n (keydown.enter)=\"$event.preventDefault()\"\n [readonly]=\"true\"\n type=\"text\"\n [required]=\"hasRequiredValidator()\"\n [value]=\"singleEnumDisplayText()\" />\n </mat-form-field>\n @if (viewDetails()) {\n <a\n mat-icon-button\n color=\"accent\"\n [matTooltip]=\"tooltipMessage()\"\n matTooltipPosition=\"below\"\n [routerLink]=\"['/', route(), form().get(this.fieldConfig().name)?.value]\">\n <mat-icon>arrow_forward</mat-icon>\n </a>\n }\n </div>\n <input class=\"display-none\" [formControlName]=\"fieldConfig().name\" />\n }\n } @else {\n <input class=\"display-none\" [formControlName]=\"fieldConfig().name\" />\n }\n</ng-container>\n", styles: [".enumerated-field-container{display:flex;flex-direction:row;gap:10px}.display-none{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: MatDatepickerModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.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: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i9.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i10.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
985
995
|
}
|
|
986
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
996
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: EnumeratedFieldComponent, decorators: [{
|
|
987
997
|
type: Component,
|
|
988
998
|
args: [{ selector: 'ccc-enumerated-field', imports: [
|
|
989
999
|
MatFormFieldModule,
|
|
@@ -1011,7 +1021,7 @@ class NullBooleanFieldComponent extends BaseInputComponent {
|
|
|
1011
1021
|
valueMap.set(value.value, value.label);
|
|
1012
1022
|
});
|
|
1013
1023
|
return valueMap;
|
|
1014
|
-
},
|
|
1024
|
+
}, ...(ngDevMode ? [{ debugName: "availableEnumOptions" }] : []));
|
|
1015
1025
|
currentValue = computed(() => {
|
|
1016
1026
|
const form = this.form();
|
|
1017
1027
|
const fieldConfig = this.fieldConfig();
|
|
@@ -1019,7 +1029,7 @@ class NullBooleanFieldComponent extends BaseInputComponent {
|
|
|
1019
1029
|
return;
|
|
1020
1030
|
}
|
|
1021
1031
|
return form.get(fieldConfig.name)?.value;
|
|
1022
|
-
},
|
|
1032
|
+
}, ...(ngDevMode ? [{ debugName: "currentValue" }] : []));
|
|
1023
1033
|
currentDisplayText = computed(() => {
|
|
1024
1034
|
const value = this.currentValue();
|
|
1025
1035
|
const availableOptions = this.availableEnumOptions();
|
|
@@ -1027,7 +1037,7 @@ class NullBooleanFieldComponent extends BaseInputComponent {
|
|
|
1027
1037
|
return;
|
|
1028
1038
|
}
|
|
1029
1039
|
return availableOptions.get(value);
|
|
1030
|
-
},
|
|
1040
|
+
}, ...(ngDevMode ? [{ debugName: "currentDisplayText" }] : []));
|
|
1031
1041
|
hasRequiredValidator = computed(() => {
|
|
1032
1042
|
const form = this.form();
|
|
1033
1043
|
const fieldConfig = this.fieldConfig();
|
|
@@ -1039,11 +1049,11 @@ class NullBooleanFieldComponent extends BaseInputComponent {
|
|
|
1039
1049
|
return false;
|
|
1040
1050
|
}
|
|
1041
1051
|
return control.hasValidator(Validators.required);
|
|
1042
|
-
},
|
|
1043
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1044
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1052
|
+
}, ...(ngDevMode ? [{ debugName: "hasRequiredValidator" }] : []));
|
|
1053
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NullBooleanFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1054
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: NullBooleanFieldComponent, isStandalone: true, selector: "ccc-nullboolean-field", usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"form()\">\n @if (showField()) {\n @let options = availableEnumOptions();\n @if (editMode() === 'edit') {\n <mat-form-field class=\"field {{ fieldClass() }}\" [subscriptSizing]=\"'dynamic'\">\n <mat-label>{{ fieldConfig().label }}</mat-label>\n <mat-select\n [formControlName]=\"fieldConfig().name\"\n (keydown.enter)=\"$event.preventDefault()\"\n [canSelectNullableOptions]=\"true\"\n [ariaReadOnly]=\"editMode() === 'view'\">\n @for (option of options; track option[0]) {\n @if (option[0] === currentValue()) {\n <mat-option [value]=\"option[0]\" selected>{{ option[1] }}</mat-option>\n } @else {\n <mat-option [value]=\"option[0]\">{{ option[1] }}</mat-option>\n }\n }\n </mat-select>\n </mat-form-field>\n } @else {\n <div class=\"readonly-field\">\n <mat-form-field class=\"field {{ fieldClass() }}\" [subscriptSizing]=\"'dynamic'\">\n <mat-label>{{ fieldConfig().label }}</mat-label>\n <input\n matInput\n (keydown.enter)=\"$event.preventDefault()\"\n [readonly]=\"true\"\n type=\"text\"\n [required]=\"hasRequiredValidator()\"\n [value]=\"currentDisplayText()\" />\n </mat-form-field>\n </div>\n }\n } @else {\n <input class=\"display-none\" [formControlName]=\"fieldConfig().name\" />\n }\n</ng-container>\n", styles: [".display-none{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: MatDatepickerModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.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: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatAutocompleteModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1045
1055
|
}
|
|
1046
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1056
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NullBooleanFieldComponent, decorators: [{
|
|
1047
1057
|
type: Component,
|
|
1048
1058
|
args: [{ selector: 'ccc-nullboolean-field', imports: [
|
|
1049
1059
|
MatFormFieldModule,
|
|
@@ -1061,19 +1071,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
1061
1071
|
}] });
|
|
1062
1072
|
|
|
1063
1073
|
class NumberFieldComponent extends BaseInputComponent {
|
|
1064
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1065
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1074
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NumberFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1075
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: NumberFieldComponent, isStandalone: true, selector: "ccc-number-field", usesInheritance: true, ngImport: i0, template: "@if (showField()) {\n <div [class.readonly-field]=\"editMode() === 'view'\">\n <mat-form-field\n class=\"field {{ fieldClass() }}\"\n [formGroup]=\"form()\"\n [subscriptSizing]=\"'dynamic'\"\n [floatLabel]=\"floatLabel()\">\n <mat-label>{{ fieldConfig().label }}</mat-label>\n <span matTextPrefix class=\"prefix\">{{ prefixString() }}</span>\n <span matTextSuffix class=\"suffix\">{{ suffixString() }}</span>\n <input\n matInput\n (keydown.enter)=\"$event.preventDefault()\"\n [readonly]=\"editMode() === 'view'\"\n type=\"number\"\n [formControlName]=\"fieldConfig().name\" />\n </mat-form-field>\n </div>\n} @else {\n <ng-container [formGroup]=\"form()\">\n <input type=\"hidden\" [formControlName]=\"fieldConfig().name\" />\n </ng-container>\n}\n", styles: [".prefix,.suffix{font-style:italic;color:gray;padding-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: MatDatepickerModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
|
|
1066
1076
|
}
|
|
1067
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1077
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NumberFieldComponent, decorators: [{
|
|
1068
1078
|
type: Component,
|
|
1069
1079
|
args: [{ selector: 'ccc-number-field', imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, ReactiveFormsModule], template: "@if (showField()) {\n <div [class.readonly-field]=\"editMode() === 'view'\">\n <mat-form-field\n class=\"field {{ fieldClass() }}\"\n [formGroup]=\"form()\"\n [subscriptSizing]=\"'dynamic'\"\n [floatLabel]=\"floatLabel()\">\n <mat-label>{{ fieldConfig().label }}</mat-label>\n <span matTextPrefix class=\"prefix\">{{ prefixString() }}</span>\n <span matTextSuffix class=\"suffix\">{{ suffixString() }}</span>\n <input\n matInput\n (keydown.enter)=\"$event.preventDefault()\"\n [readonly]=\"editMode() === 'view'\"\n type=\"number\"\n [formControlName]=\"fieldConfig().name\" />\n </mat-form-field>\n </div>\n} @else {\n <ng-container [formGroup]=\"form()\">\n <input type=\"hidden\" [formControlName]=\"fieldConfig().name\" />\n </ng-container>\n}\n", styles: [".prefix,.suffix{font-style:italic;color:gray;padding-right:5px}\n"] }]
|
|
1070
1080
|
}] });
|
|
1071
1081
|
|
|
1072
1082
|
class TextFieldComponent extends BaseInputComponent {
|
|
1073
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1074
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1083
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1084
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TextFieldComponent, isStandalone: true, selector: "ccc-text-field", usesInheritance: true, ngImport: i0, template: "@if (showField()) {\n <div [class.readonly-field]=\"editMode() === 'view'\">\n <mat-form-field\n class=\"field {{ fieldClass() }}\"\n [formGroup]=\"form()\"\n [subscriptSizing]=\"'dynamic'\"\n [floatLabel]=\"floatLabel()\">\n <mat-label>{{ fieldConfig().label }}</mat-label>\n <span matTextPrefix class=\"prefix\">{{ prefixString() }}</span>\n <span matTextSuffix class=\"suffix\">{{ suffixString() }}</span>\n <input\n matInput\n (keydown.enter)=\"$event.preventDefault()\"\n [readonly]=\"editMode() === 'view'\"\n type=\"text\"\n [formControlName]=\"fieldConfig().name\"\n [class.dirty-input]=\"form().get(fieldConfig().name)?.dirty\" />\n @if (editMode() === 'edit' && form().get(fieldConfig().name)?.dirty) {\n <button matSuffix mat-icon-button (click)=\"reset()\" tabindex=\"-1\">\n <mat-icon>refresh</mat-icon>\n </button>\n }\n </mat-form-field>\n </div>\n} @else {\n <ng-container [formGroup]=\"form()\">\n <input type=\"hidden\" [formControlName]=\"fieldConfig().name\" />\n </ng-container>\n}\n", styles: [".prefix,.suffix{font-style:italic;color:gray;padding-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: MatDatepickerModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
|
|
1075
1085
|
}
|
|
1076
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1086
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TextFieldComponent, decorators: [{
|
|
1077
1087
|
type: Component,
|
|
1078
1088
|
args: [{ selector: 'ccc-text-field', imports: [
|
|
1079
1089
|
MatFormFieldModule,
|
|
@@ -1086,25 +1096,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
1086
1096
|
}] });
|
|
1087
1097
|
|
|
1088
1098
|
class ResourceFieldComponent {
|
|
1089
|
-
fieldConfig = input.required(
|
|
1090
|
-
meta = input.required(
|
|
1091
|
-
fieldClass = input(
|
|
1092
|
-
editMode = input('edit',
|
|
1093
|
-
form = input.required(
|
|
1094
|
-
formDataState = input(
|
|
1095
|
-
pristineValue = input(
|
|
1096
|
-
data = input(
|
|
1099
|
+
fieldConfig = input.required(...(ngDevMode ? [{ debugName: "fieldConfig" }] : []));
|
|
1100
|
+
meta = input.required(...(ngDevMode ? [{ debugName: "meta" }] : []));
|
|
1101
|
+
fieldClass = input(...(ngDevMode ? [undefined, { debugName: "fieldClass" }] : []));
|
|
1102
|
+
editMode = input('edit', ...(ngDevMode ? [{ debugName: "editMode" }] : []));
|
|
1103
|
+
form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
|
|
1104
|
+
formDataState = input(...(ngDevMode ? [undefined, { debugName: "formDataState" }] : []));
|
|
1105
|
+
pristineValue = input(...(ngDevMode ? [undefined, { debugName: "pristineValue" }] : []));
|
|
1106
|
+
data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
|
|
1097
1107
|
previouslyNulled = null;
|
|
1098
1108
|
fieldMeta = computed(() => {
|
|
1099
1109
|
return (this.meta().fields?.find((field) => field.fieldName === this.fieldConfig().name) ||
|
|
1100
1110
|
{});
|
|
1101
|
-
},
|
|
1111
|
+
}, ...(ngDevMode ? [{ debugName: "fieldMeta" }] : []));
|
|
1102
1112
|
mode = computed(() => {
|
|
1103
1113
|
if (this.fieldConfig().readOnly) {
|
|
1104
1114
|
return 'view';
|
|
1105
1115
|
}
|
|
1106
1116
|
return this.editMode();
|
|
1107
|
-
},
|
|
1117
|
+
}, ...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
1108
1118
|
showField = computed(() => {
|
|
1109
1119
|
const shouldRender = this.fieldConfig().shouldRender;
|
|
1110
1120
|
const conditionallyNull = this.fieldConfig().nullIfConditionallyHidden;
|
|
@@ -1143,7 +1153,7 @@ class ResourceFieldComponent {
|
|
|
1143
1153
|
console.error(e);
|
|
1144
1154
|
return true;
|
|
1145
1155
|
}
|
|
1146
|
-
},
|
|
1156
|
+
}, ...(ngDevMode ? [{ debugName: "showField" }] : []));
|
|
1147
1157
|
showEmptyField = computed(() => {
|
|
1148
1158
|
const editMode = this.mode();
|
|
1149
1159
|
const showField = this.showField();
|
|
@@ -1164,7 +1174,7 @@ class ResourceFieldComponent {
|
|
|
1164
1174
|
return true;
|
|
1165
1175
|
}
|
|
1166
1176
|
return false;
|
|
1167
|
-
},
|
|
1177
|
+
}, ...(ngDevMode ? [{ debugName: "showEmptyField" }] : []));
|
|
1168
1178
|
class = '';
|
|
1169
1179
|
booleanEditDisplayType = computed(() => {
|
|
1170
1180
|
const fieldConfig = this.fieldConfig();
|
|
@@ -1185,7 +1195,7 @@ class ResourceFieldComponent {
|
|
|
1185
1195
|
return 'nullboolean';
|
|
1186
1196
|
}
|
|
1187
1197
|
return 'boolean';
|
|
1188
|
-
},
|
|
1198
|
+
}, ...(ngDevMode ? [{ debugName: "booleanEditDisplayType" }] : []));
|
|
1189
1199
|
previousValidatorCount = 0;
|
|
1190
1200
|
constructor() {
|
|
1191
1201
|
effect(() => {
|
|
@@ -1222,10 +1232,10 @@ class ResourceFieldComponent {
|
|
|
1222
1232
|
}
|
|
1223
1233
|
});
|
|
1224
1234
|
}
|
|
1225
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1226
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1235
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1236
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ResourceFieldComponent, isStandalone: true, selector: "ccc-resource-field", inputs: { fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: true, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: true, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, formDataState: { classPropertyName: "formDataState", publicName: "formDataState", isSignal: true, isRequired: false, transformFunction: null }, pristineValue: { classPropertyName: "pristineValue", publicName: "pristineValue", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div [class.hidden-field]=\"!showField()\">\n @if (showEmptyField()) {\n <ccc-empty-readonly-field [label]=\"fieldConfig().label\"></ccc-empty-readonly-field>\n } @else {\n @switch (fieldMeta().displayType) {\n @case ('date') {\n <ccc-date-field\n [form]=\"form()\"\n [fieldConfig]=\"fieldConfig()\"\n [editMode]=\"mode()\"\n [fieldClass]=\"fieldClass()\"\n [meta]=\"meta()\"\n [pristineValue]=\"pristineValue()\"\n [relatedData]=\"data()\"\n [fieldMeta]=\"fieldMeta()\"\n [showField]=\"showField()\">\n </ccc-date-field>\n }\n\n @case ('civildate') {\n <ccc-date-field\n [form]=\"form()\"\n [fieldConfig]=\"fieldConfig()\"\n [editMode]=\"mode()\"\n [fieldClass]=\"fieldClass()\"\n [meta]=\"meta()\"\n [pristineValue]=\"pristineValue()\"\n [relatedData]=\"data()\"\n [fieldMeta]=\"fieldMeta()\"\n [showField]=\"showField()\">\n </ccc-date-field>\n }\n\n @case ('number') {\n <ccc-number-field\n [form]=\"form()\"\n [fieldConfig]=\"fieldConfig()\"\n [editMode]=\"mode()\"\n [fieldClass]=\"fieldClass()\"\n [meta]=\"meta()\"\n [pristineValue]=\"pristineValue()\"\n [relatedData]=\"data()\"\n [fieldMeta]=\"fieldMeta()\"\n [showField]=\"showField()\">\n </ccc-number-field>\n }\n\n @case ('boolean') {\n <ng-container *ngTemplateOutlet=\"booleanFragment\"></ng-container>\n }\n @case ('nullboolean') {\n <ng-container *ngTemplateOutlet=\"booleanFragment\"></ng-container>\n }\n\n @case ('enumerated') {\n <ccc-enumerated-field\n [form]=\"form()\"\n [fieldConfig]=\"fieldConfig()\"\n [editMode]=\"mode()\"\n [fieldClass]=\"fieldClass()\"\n [meta]=\"meta()\"\n [pristineValue]=\"pristineValue()\"\n [relatedData]=\"data()\"\n [fieldMeta]=\"fieldMeta()\"\n [showField]=\"showField()\">\n </ccc-enumerated-field>\n }\n\n @default {\n <ccc-text-field\n [form]=\"form()\"\n [fieldConfig]=\"fieldConfig()\"\n [editMode]=\"mode()\"\n [fieldClass]=\"fieldClass()\"\n [meta]=\"meta()\"\n [pristineValue]=\"pristineValue()\"\n [relatedData]=\"data()\"\n [fieldMeta]=\"fieldMeta()\"\n [showField]=\"showField()\">\n </ccc-text-field>\n }\n }\n }\n</div>\n\n<ng-template #booleanFragment>\n @if (booleanEditDisplayType() === 'boolean') {\n <ccc-boolean-field\n [form]=\"form()\"\n [fieldConfig]=\"fieldConfig()\"\n [editMode]=\"mode()\"\n [fieldClass]=\"fieldClass()\"\n [meta]=\"meta()\"\n [pristineValue]=\"pristineValue()\"\n [relatedData]=\"data()\"\n [fieldMeta]=\"fieldMeta()\"\n [showField]=\"showField()\">\n </ccc-boolean-field>\n } @else if (booleanEditDisplayType() === 'nullboolean') {\n <ccc-nullboolean-field\n [form]=\"form()\"\n [fieldConfig]=\"fieldConfig()\"\n [editMode]=\"mode()\"\n [fieldClass]=\"fieldClass()\"\n [meta]=\"meta()\"\n [pristineValue]=\"pristineValue()\"\n [relatedData]=\"data()\"\n [fieldMeta]=\"fieldMeta()\"\n [showField]=\"showField()\">\n </ccc-nullboolean-field>\n }\n</ng-template>\n", styles: [".checkbox{margin-top:10px}.dirty-input{background-color:#00617f26}\n"], dependencies: [{ kind: "component", type: DateFieldComponent, selector: "ccc-date-field" }, { kind: "component", type: BooleanFieldComponent, selector: "ccc-boolean-field" }, { kind: "component", type: TextFieldComponent, selector: "ccc-text-field" }, { kind: "component", type: NumberFieldComponent, selector: "ccc-number-field" }, { kind: "component", type: EnumeratedFieldComponent, selector: "ccc-enumerated-field" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: EmptyReadonlyFieldComponent, selector: "ccc-empty-readonly-field", inputs: ["label"] }, { kind: "component", type: NullBooleanFieldComponent, selector: "ccc-nullboolean-field" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1227
1237
|
}
|
|
1228
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1238
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceFieldComponent, decorators: [{
|
|
1229
1239
|
type: Component,
|
|
1230
1240
|
args: [{ selector: 'ccc-resource-field', imports: [
|
|
1231
1241
|
DateFieldComponent,
|
|
@@ -1244,16 +1254,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
1244
1254
|
}] } });
|
|
1245
1255
|
|
|
1246
1256
|
class ResourceLayoutComponent {
|
|
1247
|
-
element = input.required(
|
|
1248
|
-
meta = input.required(
|
|
1249
|
-
fieldClass = input(
|
|
1250
|
-
editMode = input.required(
|
|
1251
|
-
form = input.required(
|
|
1252
|
-
formDataState = model(
|
|
1253
|
-
pristineValue = input('',
|
|
1254
|
-
relatedData = input(
|
|
1255
|
-
parentClass = input(
|
|
1256
|
-
layoutNestingDepth = input(1,
|
|
1257
|
+
element = input.required(...(ngDevMode ? [{ debugName: "element" }] : []));
|
|
1258
|
+
meta = input.required(...(ngDevMode ? [{ debugName: "meta" }] : []));
|
|
1259
|
+
fieldClass = input(...(ngDevMode ? [undefined, { debugName: "fieldClass" }] : []));
|
|
1260
|
+
editMode = input.required(...(ngDevMode ? [{ debugName: "editMode" }] : []));
|
|
1261
|
+
form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
|
|
1262
|
+
formDataState = model(...(ngDevMode ? [undefined, { debugName: "formDataState" }] : []));
|
|
1263
|
+
pristineValue = input('', ...(ngDevMode ? [{ debugName: "pristineValue" }] : []));
|
|
1264
|
+
relatedData = input(...(ngDevMode ? [undefined, { debugName: "relatedData" }] : []));
|
|
1265
|
+
parentClass = input(...(ngDevMode ? [undefined, { debugName: "parentClass" }] : []));
|
|
1266
|
+
layoutNestingDepth = input(1, ...(ngDevMode ? [{ debugName: "layoutNestingDepth" }] : []));
|
|
1257
1267
|
maxLayoutNestingDepth = maxLayoutNestingDepth;
|
|
1258
1268
|
children = computed(() => {
|
|
1259
1269
|
const element = this.element();
|
|
@@ -1261,10 +1271,10 @@ class ResourceLayoutComponent {
|
|
|
1261
1271
|
return element.children;
|
|
1262
1272
|
}
|
|
1263
1273
|
return [];
|
|
1264
|
-
},
|
|
1274
|
+
}, ...(ngDevMode ? [{ debugName: "children" }] : []));
|
|
1265
1275
|
layoutChildrenConfig = computed(() => {
|
|
1266
1276
|
return flattenElements(this.children());
|
|
1267
|
-
},
|
|
1277
|
+
}, ...(ngDevMode ? [{ debugName: "layoutChildrenConfig" }] : []));
|
|
1268
1278
|
previouslyNulled = false;
|
|
1269
1279
|
nullIfConditionallyHidden = computed(() => {
|
|
1270
1280
|
const element = this.element();
|
|
@@ -1275,7 +1285,7 @@ class ResourceLayoutComponent {
|
|
|
1275
1285
|
return element.nullAllChildrenIfConditionallyHidden;
|
|
1276
1286
|
}
|
|
1277
1287
|
return false;
|
|
1278
|
-
},
|
|
1288
|
+
}, ...(ngDevMode ? [{ debugName: "nullIfConditionallyHidden" }] : []));
|
|
1279
1289
|
showLayout = computed(() => {
|
|
1280
1290
|
const element = this.element();
|
|
1281
1291
|
const shouldRender = element.shouldRender;
|
|
@@ -1322,7 +1332,7 @@ class ResourceLayoutComponent {
|
|
|
1322
1332
|
console.error(e);
|
|
1323
1333
|
return true;
|
|
1324
1334
|
}
|
|
1325
|
-
},
|
|
1335
|
+
}, ...(ngDevMode ? [{ debugName: "showLayout" }] : []));
|
|
1326
1336
|
class = '';
|
|
1327
1337
|
constructor() {
|
|
1328
1338
|
// TODO: Remove this effect once Angular supports signals in Reactive forms to obtain changes to form values.
|
|
@@ -1374,10 +1384,10 @@ class ResourceLayoutComponent {
|
|
|
1374
1384
|
}
|
|
1375
1385
|
return true;
|
|
1376
1386
|
}
|
|
1377
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1378
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1387
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1388
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ResourceLayoutComponent, isStandalone: true, selector: "ccc-resource-layout-template", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: true, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, formDataState: { classPropertyName: "formDataState", publicName: "formDataState", isSignal: true, isRequired: false, transformFunction: null }, pristineValue: { classPropertyName: "pristineValue", publicName: "pristineValue", isSignal: true, isRequired: false, transformFunction: null }, relatedData: { classPropertyName: "relatedData", publicName: "relatedData", isSignal: true, isRequired: false, transformFunction: null }, parentClass: { classPropertyName: "parentClass", publicName: "parentClass", isSignal: true, isRequired: false, transformFunction: null }, layoutNestingDepth: { classPropertyName: "layoutNestingDepth", publicName: "layoutNestingDepth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formDataState: "formDataStateChange" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div class=\"section {{ parentClass() }}\" [class.hidden-field]=\"!showLayout()\">\n @let parentElement = element();\n @if (children().length > 0) {\n <div\n class=\"section-elements dense-1 resource-layout-container\"\n [class]=\"layoutNestingDepth() % 2 === 0 ? 'resource-layout-container-even' : 'resource-layout-container-odd'\">\n @if (parentElement.type !== 'padding' && parentElement.label !== '') {\n <div class=\"label\">{{ parentElement.label }}</div>\n }\n @for (elementField of children(); track elementField) {\n @let childElement = elementField;\n @if (childElement.type === 'section') {\n @if (layoutNestingDepth() < maxLayoutNestingDepth) {\n <ccc-resource-layout-template\n [layoutNestingDepth]=\"layoutNestingDepth() + 1\"\n [element]=\"childElement\"\n [meta]=\"meta()\"\n [fieldClass]=\"fieldClass()\"\n [editMode]=\"editMode()\"\n [form]=\"form()\"\n [formDataState]=\"formDataState()\"\n [pristineValue]=\"pristineValue()\"\n [relatedData]=\"relatedData()\"\n [parentClass]=\"parentClass()\">\n </ccc-resource-layout-template>\n }\n } @else if (childElement.type === 'field') {\n <ccc-resource-field\n [meta]=\"meta()\"\n [fieldClass]=\"fieldClass()\"\n [fieldConfig]=\"childElement\"\n [editMode]=\"editMode()\"\n [form]=\"form()\"\n [formDataState]=\"formDataState()\"\n [pristineValue]=\"pristineValue()\"\n [data]=\"relatedData()\">\n </ccc-resource-field>\n } @else if (childElement.type === 'computedDisplayField') {\n <ccc-computed-field\n [fieldClass]=\"fieldClass()\"\n [fieldConfig]=\"childElement\"\n [formDataState]=\"formDataState()\"></ccc-computed-field>\n } @else if (childElement.type === 'padding') {\n <ccc-padding-element [paddingElement]=\"childElement\"></ccc-padding-element>\n }\n }\n </div>\n } @else {\n @if (parentElement.type === 'field') {\n <div\n class=\"section-elements dense-1 resource-layout-container\"\n [class]=\"layoutNestingDepth() % 2 === 0 ? 'resource-layout-container-even' : 'resource-layout-container-odd'\">\n <ccc-resource-field\n [meta]=\"meta()\"\n [fieldClass]=\"fieldClass()\"\n [fieldConfig]=\"parentElement\"\n [editMode]=\"editMode()\"\n [form]=\"form()\"\n [formDataState]=\"formDataState()\"\n [pristineValue]=\"pristineValue()\"\n [data]=\"relatedData()\">\n </ccc-resource-field>\n </div>\n } @else if (parentElement.type === 'computedDisplayField') {\n <ccc-computed-field\n [fieldClass]=\"fieldClass()\"\n [fieldConfig]=\"parentElement\"\n [formDataState]=\"formDataState()\"></ccc-computed-field>\n } @else if (parentElement.type === 'padding') {\n <ccc-padding-element [paddingElement]=\"parentElement\"></ccc-padding-element>\n }\n }\n</div>\n", styles: [".section{margin-top:15px}.section-elements{display:flex;flex-wrap:wrap;padding-bottom:4px}.label{position:absolute;top:-15px;left:20px;height:20px;background-color:var(--layout-label-background-color);border-radius:8px;margin:0 10px;padding:0 10px;text-align:center;z-index:10;font-weight:500;font:18px Roboto,sans-serif}\n"], dependencies: [{ kind: "component", type: ResourceLayoutComponent, selector: "ccc-resource-layout-template", inputs: ["element", "meta", "fieldClass", "editMode", "form", "formDataState", "pristineValue", "relatedData", "parentClass", "layoutNestingDepth"], outputs: ["formDataStateChange"] }, { kind: "component", type: PaddingElementComponent, selector: "ccc-padding-element", inputs: ["paddingElement"] }, { kind: "component", type: ResourceFieldComponent, selector: "ccc-resource-field", inputs: ["fieldConfig", "meta", "fieldClass", "editMode", "form", "formDataState", "pristineValue", "data"] }, { kind: "component", type: ComputedFieldComponent, selector: "ccc-computed-field", inputs: ["fieldConfig", "fieldClass", "formDataState"] }] });
|
|
1379
1389
|
}
|
|
1380
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1390
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceLayoutComponent, decorators: [{
|
|
1381
1391
|
type: Component,
|
|
1382
1392
|
args: [{ selector: 'ccc-resource-layout-template', imports: [PaddingElementComponent, ResourceFieldComponent, ComputedFieldComponent], template: "<div class=\"section {{ parentClass() }}\" [class.hidden-field]=\"!showLayout()\">\n @let parentElement = element();\n @if (children().length > 0) {\n <div\n class=\"section-elements dense-1 resource-layout-container\"\n [class]=\"layoutNestingDepth() % 2 === 0 ? 'resource-layout-container-even' : 'resource-layout-container-odd'\">\n @if (parentElement.type !== 'padding' && parentElement.label !== '') {\n <div class=\"label\">{{ parentElement.label }}</div>\n }\n @for (elementField of children(); track elementField) {\n @let childElement = elementField;\n @if (childElement.type === 'section') {\n @if (layoutNestingDepth() < maxLayoutNestingDepth) {\n <ccc-resource-layout-template\n [layoutNestingDepth]=\"layoutNestingDepth() + 1\"\n [element]=\"childElement\"\n [meta]=\"meta()\"\n [fieldClass]=\"fieldClass()\"\n [editMode]=\"editMode()\"\n [form]=\"form()\"\n [formDataState]=\"formDataState()\"\n [pristineValue]=\"pristineValue()\"\n [relatedData]=\"relatedData()\"\n [parentClass]=\"parentClass()\">\n </ccc-resource-layout-template>\n }\n } @else if (childElement.type === 'field') {\n <ccc-resource-field\n [meta]=\"meta()\"\n [fieldClass]=\"fieldClass()\"\n [fieldConfig]=\"childElement\"\n [editMode]=\"editMode()\"\n [form]=\"form()\"\n [formDataState]=\"formDataState()\"\n [pristineValue]=\"pristineValue()\"\n [data]=\"relatedData()\">\n </ccc-resource-field>\n } @else if (childElement.type === 'computedDisplayField') {\n <ccc-computed-field\n [fieldClass]=\"fieldClass()\"\n [fieldConfig]=\"childElement\"\n [formDataState]=\"formDataState()\"></ccc-computed-field>\n } @else if (childElement.type === 'padding') {\n <ccc-padding-element [paddingElement]=\"childElement\"></ccc-padding-element>\n }\n }\n </div>\n } @else {\n @if (parentElement.type === 'field') {\n <div\n class=\"section-elements dense-1 resource-layout-container\"\n [class]=\"layoutNestingDepth() % 2 === 0 ? 'resource-layout-container-even' : 'resource-layout-container-odd'\">\n <ccc-resource-field\n [meta]=\"meta()\"\n [fieldClass]=\"fieldClass()\"\n [fieldConfig]=\"parentElement\"\n [editMode]=\"editMode()\"\n [form]=\"form()\"\n [formDataState]=\"formDataState()\"\n [pristineValue]=\"pristineValue()\"\n [data]=\"relatedData()\">\n </ccc-resource-field>\n </div>\n } @else if (parentElement.type === 'computedDisplayField') {\n <ccc-computed-field\n [fieldClass]=\"fieldClass()\"\n [fieldConfig]=\"parentElement\"\n [formDataState]=\"formDataState()\"></ccc-computed-field>\n } @else if (parentElement.type === 'padding') {\n <ccc-padding-element [paddingElement]=\"parentElement\"></ccc-padding-element>\n }\n }\n</div>\n", styles: [".section{margin-top:15px}.section-elements{display:flex;flex-wrap:wrap;padding-bottom:4px}.label{position:absolute;top:-15px;left:20px;height:20px;background-color:var(--layout-label-background-color);border-radius:8px;margin:0 10px;padding:0 10px;text-align:center;z-index:10;font-weight:500;font:18px Roboto,sans-serif}\n"] }]
|
|
1383
1393
|
}], ctorParameters: () => [], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: true }] }], fieldClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldClass", required: false }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], formDataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "formDataState", required: false }] }, { type: i0.Output, args: ["formDataStateChange"] }], pristineValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "pristineValue", required: false }] }], relatedData: [{ type: i0.Input, args: [{ isSignal: true, alias: "relatedData", required: false }] }], parentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentClass", required: false }] }], layoutNestingDepth: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutNestingDepth", required: false }] }], class: [{
|
|
@@ -1389,10 +1399,10 @@ class BaseRPCModalComponent {
|
|
|
1389
1399
|
methodMeta = inject(METHOD_META);
|
|
1390
1400
|
dialogRef = inject(MatDialogRef);
|
|
1391
1401
|
data = inject(MAT_DIALOG_DATA);
|
|
1392
|
-
formData = signal({},
|
|
1402
|
+
formData = signal({}, ...(ngDevMode ? [{ debugName: "formData" }] : []));
|
|
1393
1403
|
meta = computed(() => {
|
|
1394
1404
|
return this.methodMeta(this.formData().method);
|
|
1395
|
-
},
|
|
1405
|
+
}, ...(ngDevMode ? [{ debugName: "meta" }] : []));
|
|
1396
1406
|
constructor() {
|
|
1397
1407
|
this.formData.set(this.data);
|
|
1398
1408
|
if (this.data.width) {
|
|
@@ -1424,12 +1434,12 @@ class BaseRPCModalComponent {
|
|
|
1424
1434
|
}
|
|
1425
1435
|
}
|
|
1426
1436
|
return fg;
|
|
1427
|
-
},
|
|
1437
|
+
}, ...(ngDevMode ? [{ debugName: "form" }] : []));
|
|
1428
1438
|
pristineForm = {};
|
|
1429
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1430
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1439
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BaseRPCModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1440
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: BaseRPCModalComponent, isStandalone: true, selector: "ccc-base-rpc-modal", providers: [ResourceStore], ngImport: i0, template: "<div mat-dialog-title>{{ formData().label }}</div>\n<mat-dialog-content>\n <div class=\"resource-container\">\n <form [formGroup]=\"form()\">\n <div class=\"resource row\">\n @for (element of formData().elements; track element) {\n <ccc-resource-layout-template\n [element]=\"element\"\n [meta]=\"meta()\"\n [pristineValue]=\"pristineForm[element.name]\"\n editMode=\"edit\"\n [form]=\"form()\"></ccc-resource-layout-template>\n }\n </div>\n </form>\n </div>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n <button mat-raised-button color=\"warn\" [mat-dialog-close]=\"false\">Cancel</button>\n <button mat-raised-button color=\"accent\" [mat-dialog-close]=\"form().getRawValue()\" [disabled]=\"!form().valid\">\n Complete\n </button>\n</mat-dialog-actions>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.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: ResourceLayoutComponent, selector: "ccc-resource-layout-template", inputs: ["element", "meta", "fieldClass", "editMode", "form", "formDataState", "pristineValue", "relatedData", "parentClass", "layoutNestingDepth"], outputs: ["formDataStateChange"] }, { 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],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
|
|
1431
1441
|
}
|
|
1432
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1442
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BaseRPCModalComponent, decorators: [{
|
|
1433
1443
|
type: Component,
|
|
1434
1444
|
args: [{ selector: 'ccc-base-rpc-modal', imports: [
|
|
1435
1445
|
MatDialogModule,
|
|
@@ -1451,14 +1461,14 @@ class RpcButtonComponent {
|
|
|
1451
1461
|
store = inject(ResourceStore);
|
|
1452
1462
|
methodMeta = inject(METHOD_META);
|
|
1453
1463
|
relatedData = input.required({ ...(ngDevMode ? { debugName: "relatedData" } : {}) });
|
|
1454
|
-
rpcConfig = input.required(
|
|
1455
|
-
primaryResource = input.required(
|
|
1456
|
-
dependentResources = input([],
|
|
1464
|
+
rpcConfig = input.required(...(ngDevMode ? [{ debugName: "rpcConfig" }] : []));
|
|
1465
|
+
primaryResource = input.required(...(ngDevMode ? [{ debugName: "primaryResource" }] : []));
|
|
1466
|
+
dependentResources = input([], ...(ngDevMode ? [{ debugName: "dependentResources" }] : []));
|
|
1457
1467
|
resourceConfigRouteSnapshot = computed(() => {
|
|
1458
1468
|
return (this.rpcConfig() ||
|
|
1459
1469
|
this.activatedRoute.snapshot.data['config']?.parentConfig ||
|
|
1460
1470
|
{});
|
|
1461
|
-
},
|
|
1471
|
+
}, ...(ngDevMode ? [{ debugName: "resourceConfigRouteSnapshot" }] : []));
|
|
1462
1472
|
showRPCButton = computed(() => {
|
|
1463
1473
|
const rpcConfig = this.rpcConfig();
|
|
1464
1474
|
if (!rpcConfig) {
|
|
@@ -1481,7 +1491,7 @@ class RpcButtonComponent {
|
|
|
1481
1491
|
}
|
|
1482
1492
|
}
|
|
1483
1493
|
return canView;
|
|
1484
|
-
},
|
|
1494
|
+
}, ...(ngDevMode ? [{ debugName: "showRPCButton" }] : []));
|
|
1485
1495
|
submitRPC() {
|
|
1486
1496
|
const rpcConfig = this.rpcConfig();
|
|
1487
1497
|
if (!rpcConfig) {
|
|
@@ -1584,10 +1594,10 @@ class RpcButtonComponent {
|
|
|
1584
1594
|
ref.reload();
|
|
1585
1595
|
}
|
|
1586
1596
|
}
|
|
1587
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1588
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1597
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: RpcButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1598
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: RpcButtonComponent, isStandalone: true, selector: "ccc-rpc-button", inputs: { relatedData: { classPropertyName: "relatedData", publicName: "relatedData", isSignal: true, isRequired: true, transformFunction: null }, rpcConfig: { classPropertyName: "rpcConfig", publicName: "rpcConfig", isSignal: true, isRequired: true, transformFunction: null }, primaryResource: { classPropertyName: "primaryResource", publicName: "primaryResource", isSignal: true, isRequired: true, transformFunction: null }, dependentResources: { classPropertyName: "dependentResources", publicName: "dependentResources", isSignal: true, isRequired: false, transformFunction: null } }, providers: [ResourceStore], ngImport: i0, template: "@if (showRPCButton()) {\n <div class=\"button-container\">\n <button mat-raised-button color=\"accent\" (click)=\"submitRPC()\" [disabled]=\"formState.isDirty()\">\n {{ rpcConfig().label }}\n </button>\n </div>\n}\n", styles: [":host{display:flex;flex-direction:row;margin-top:auto;margin-bottom:auto;justify-content:right;flex-grow:1;gap:20px;margin-right:20px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.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"] }] });
|
|
1589
1599
|
}
|
|
1590
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1600
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: RpcButtonComponent, decorators: [{
|
|
1591
1601
|
type: Component,
|
|
1592
1602
|
args: [{ selector: 'ccc-rpc-button', imports: [MatButtonModule], providers: [ResourceStore], template: "@if (showRPCButton()) {\n <div class=\"button-container\">\n <button mat-raised-button color=\"accent\" (click)=\"submitRPC()\" [disabled]=\"formState.isDirty()\">\n {{ rpcConfig().label }}\n </button>\n </div>\n}\n", styles: [":host{display:flex;flex-direction:row;margin-top:auto;margin-bottom:auto;justify-content:right;flex-grow:1;gap:20px;margin-right:20px}\n"] }]
|
|
1593
1603
|
}], propDecorators: { relatedData: [{ type: i0.Input, args: [{ isSignal: true, alias: "relatedData", required: true }] }], rpcConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "rpcConfig", required: true }] }], primaryResource: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryResource", required: true }] }], dependentResources: [{ type: i0.Input, args: [{ isSignal: true, alias: "dependentResources", required: false }] }] } });
|
|
@@ -1600,28 +1610,28 @@ class ResourceCreateComponent {
|
|
|
1600
1610
|
router = inject(Router);
|
|
1601
1611
|
destroyRef = inject(DestroyRef);
|
|
1602
1612
|
formState = inject(FormStateService);
|
|
1603
|
-
isDirty = signal(false,
|
|
1604
|
-
submitted = signal(false,
|
|
1613
|
+
isDirty = signal(false, ...(ngDevMode ? [{ debugName: "isDirty" }] : []));
|
|
1614
|
+
submitted = signal(false, ...(ngDevMode ? [{ debugName: "submitted" }] : []));
|
|
1605
1615
|
complete = output();
|
|
1606
|
-
resourceConfig = input(
|
|
1607
|
-
parentData = input({},
|
|
1608
|
-
loadCreatedResource = input(false,
|
|
1616
|
+
resourceConfig = input(...(ngDevMode ? [undefined, { debugName: "resourceConfig" }] : []));
|
|
1617
|
+
parentData = input({}, ...(ngDevMode ? [{ debugName: "parentData" }] : []));
|
|
1618
|
+
loadCreatedResource = input(false, ...(ngDevMode ? [{ debugName: "loadCreatedResource" }] : []));
|
|
1609
1619
|
rootConfig = computed(() => {
|
|
1610
1620
|
return this.activatedRoute.snapshot.data['config'];
|
|
1611
|
-
},
|
|
1621
|
+
}, ...(ngDevMode ? [{ debugName: "rootConfig" }] : []));
|
|
1612
1622
|
config = computed(() => {
|
|
1613
1623
|
const inputConfig = this.resourceConfig();
|
|
1614
1624
|
if (inputConfig !== undefined) {
|
|
1615
1625
|
return inputConfig;
|
|
1616
1626
|
}
|
|
1617
1627
|
return this.rootConfig().parentConfig;
|
|
1618
|
-
},
|
|
1628
|
+
}, ...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
1619
1629
|
indentTitle = computed(() => {
|
|
1620
1630
|
if (this.config().collapsible || this.resourceConfig() === undefined) {
|
|
1621
1631
|
return false;
|
|
1622
1632
|
}
|
|
1623
1633
|
return true;
|
|
1624
|
-
},
|
|
1634
|
+
}, ...(ngDevMode ? [{ debugName: "indentTitle" }] : []));
|
|
1625
1635
|
form = computed(() => {
|
|
1626
1636
|
const meta = this.store.resourceMeta();
|
|
1627
1637
|
const fg = new FormGroup({});
|
|
@@ -1669,13 +1679,13 @@ class ResourceCreateComponent {
|
|
|
1669
1679
|
fg.addControl(field.fieldName, control);
|
|
1670
1680
|
}
|
|
1671
1681
|
return fg;
|
|
1672
|
-
},
|
|
1682
|
+
}, ...(ngDevMode ? [{ debugName: "form" }] : []));
|
|
1673
1683
|
route = computed(() => {
|
|
1674
1684
|
const meta = this.store.resourceMeta();
|
|
1675
1685
|
if (!meta)
|
|
1676
1686
|
return '';
|
|
1677
1687
|
return meta.consolidatedRoute || meta.route;
|
|
1678
|
-
},
|
|
1688
|
+
}, ...(ngDevMode ? [{ debugName: "route" }] : []));
|
|
1679
1689
|
primaryKeys = computed(() => {
|
|
1680
1690
|
const meta = this.store.resourceMeta();
|
|
1681
1691
|
if (!meta)
|
|
@@ -1683,14 +1693,14 @@ class ResourceCreateComponent {
|
|
|
1683
1693
|
return meta.fields
|
|
1684
1694
|
.filter((field) => field.primaryKey)
|
|
1685
1695
|
.sort((a, b) => a.primaryKey.ordinalPosition - b.primaryKey.ordinalPosition);
|
|
1686
|
-
},
|
|
1696
|
+
}, ...(ngDevMode ? [{ debugName: "primaryKeys" }] : []));
|
|
1687
1697
|
hasRequiredPrimaryKey = computed(() => {
|
|
1688
1698
|
const meta = this.store.resourceMeta();
|
|
1689
1699
|
if (!meta) {
|
|
1690
1700
|
return false;
|
|
1691
1701
|
}
|
|
1692
1702
|
return meta.fields.some((field) => field.primaryKey && field.required);
|
|
1693
|
-
},
|
|
1703
|
+
}, ...(ngDevMode ? [{ debugName: "hasRequiredPrimaryKey" }] : []));
|
|
1694
1704
|
primaryKeyPath = computed(() => {
|
|
1695
1705
|
const meta = this.store.resourceMeta();
|
|
1696
1706
|
const isConsolidated = meta.consolidatedRoute !== undefined;
|
|
@@ -1705,7 +1715,7 @@ class ResourceCreateComponent {
|
|
|
1705
1715
|
return pathPrefix;
|
|
1706
1716
|
}
|
|
1707
1717
|
return pathPrefix + '/' + keyPath;
|
|
1708
|
-
},
|
|
1718
|
+
}, ...(ngDevMode ? [{ debugName: "primaryKeyPath" }] : []));
|
|
1709
1719
|
camelCaseToTitlePipe = new CamelCaseToTitlePipe();
|
|
1710
1720
|
ngOnInit() {
|
|
1711
1721
|
if (this.resourceMeta(this.config().primaryResource)) {
|
|
@@ -1802,10 +1812,10 @@ class ResourceCreateComponent {
|
|
|
1802
1812
|
.subscribe();
|
|
1803
1813
|
});
|
|
1804
1814
|
}
|
|
1805
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1806
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1815
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1816
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ResourceCreateComponent, isStandalone: true, selector: "ccc-resource-create", inputs: { resourceConfig: { classPropertyName: "resourceConfig", publicName: "resourceConfig", isSignal: true, isRequired: false, transformFunction: null }, parentData: { classPropertyName: "parentData", publicName: "parentData", isSignal: true, isRequired: false, transformFunction: null }, loadCreatedResource: { classPropertyName: "loadCreatedResource", publicName: "loadCreatedResource", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { complete: "complete" }, providers: [ResourceStore], ngImport: i0, template: "<div class=\"page-container\">\n <div class=\"header-container\">\n <div class=\"title\" [class.indent]=\"indentTitle()\">\n <h1>Create {{ config().title }}</h1>\n </div>\n\n <div class=\"state-buttons\">\n @if (!form().valid && submitted()) {\n <div class=\"invalid message\">Please complete or fix required fields.</div>\n }\n <button mat-raised-button color=\"primary\" (click)=\"cancelForm()\">Cancel</button>\n <button mat-raised-button color=\"accent\" (click)=\"saveForm()\" [disabled]=\"form().pristine\">Create</button>\n </div>\n </div>\n\n <div class=\"resource-container\">\n <form [formGroup]=\"form()\">\n <div class=\"resource row\">\n @for (element of config().elements; track element) {\n <ccc-resource-layout-template\n [element]=\"element\"\n [meta]=\"store.resourceMeta()\"\n [fieldClass]=\"config().fieldClass\"\n [relatedData]=\"parentData()\"\n editMode=\"edit\"\n [form]=\"form()\"></ccc-resource-layout-template>\n }\n </div>\n </form>\n </div>\n</div>\n", styles: [".container{border:1px solid #8e8e8e;border-radius:5px;position:relative;margin-bottom:20px;padding-top:10px}.label{position:absolute;top:-15px;left:20px;height:20px;background-color:#fff;margin:0 10px;padding:0 10px;text-align:center;z-index:10;font-weight:500;font:18px Roboto,sans-serif}.page-container{position:relative}.header-container{margin:20px 20px 0;display:flex;flex-direction:row;top:0;z-index:11;background:transparent}.title{display:flex;align-items:center;flex-shrink:0}.indent{padding-left:20px}.message{margin-top:auto;margin-bottom:auto}.state-buttons{display:flex;flex-direction:row;margin-top:auto;margin-bottom:auto;justify-content:right;flex-grow:1;gap:20px}.mode-text{margin-top:auto;margin-bottom:auto}.resource{margin:10px}.section h2{font-size:1.5em;border-bottom:2px solid #ccc;padding-bottom:8px;margin-bottom:100px}.section{margin-top:15px}.divider{margin:16px 0}.section-elements{display:flex;flex-wrap:wrap}.mat-input-element:disabled[readonly]{color:currentColor}.unsaved{color:#f44336}.edit-button{margin-top:auto;margin-bottom:auto;padding-left:10px}.button-text{display:flex;flex-direction:row;align-items:center}.button-text .edit{color:#003b49}.button-text .mat-icon{margin-right:8px}.shaded{background-color:#e9e9e9}.rounded{border-radius:8px}.dotted-outline{border:1px dotted #ccc;padding:8px}\n"], dependencies: [{ 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],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.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: MatIconModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: ResourceLayoutComponent, selector: "ccc-resource-layout-template", inputs: ["element", "meta", "fieldClass", "editMode", "form", "formDataState", "pristineValue", "relatedData", "parentClass", "layoutNestingDepth"], outputs: ["formDataStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1807
1817
|
}
|
|
1808
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1818
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceCreateComponent, decorators: [{
|
|
1809
1819
|
type: Component,
|
|
1810
1820
|
args: [{ selector: 'ccc-resource-create', imports: [
|
|
1811
1821
|
FormsModule,
|
|
@@ -1824,13 +1834,13 @@ class ResourceArrayViewComponent {
|
|
|
1824
1834
|
resourceMeta = inject(RESOURCE_META);
|
|
1825
1835
|
store = inject(ResourceStore);
|
|
1826
1836
|
injector = inject(Injector);
|
|
1827
|
-
resourceConfig = input.required(
|
|
1828
|
-
parentData = input({},
|
|
1837
|
+
resourceConfig = input.required(...(ngDevMode ? [{ debugName: "resourceConfig" }] : []));
|
|
1838
|
+
parentData = input({}, ...(ngDevMode ? [{ debugName: "parentData" }] : []));
|
|
1829
1839
|
expPanel = viewChild('expPanel', { ...(ngDevMode ? { debugName: "expPanel" } : {}), read: MatExpansionPanel });
|
|
1830
1840
|
emptyOneToOne = output();
|
|
1831
|
-
createMode = signal(false,
|
|
1841
|
+
createMode = signal(false, ...(ngDevMode ? [{ debugName: "createMode" }] : []));
|
|
1832
1842
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
1833
|
-
compoundResourceComponent = input.required(
|
|
1843
|
+
compoundResourceComponent = input.required(...(ngDevMode ? [{ debugName: "compoundResourceComponent" }] : []));
|
|
1834
1844
|
showCreateButton = computed(() => {
|
|
1835
1845
|
const list = this.store.listData();
|
|
1836
1846
|
const resourceConfig = this.resourceConfig();
|
|
@@ -1843,7 +1853,7 @@ class ResourceArrayViewComponent {
|
|
|
1843
1853
|
return true;
|
|
1844
1854
|
}
|
|
1845
1855
|
return false;
|
|
1846
|
-
},
|
|
1856
|
+
}, ...(ngDevMode ? [{ debugName: "showCreateButton" }] : []));
|
|
1847
1857
|
createActionConfig = computed(() => {
|
|
1848
1858
|
const config = this.resourceConfig();
|
|
1849
1859
|
const showCreate = this.showCreateButton();
|
|
@@ -1857,7 +1867,7 @@ class ResourceArrayViewComponent {
|
|
|
1857
1867
|
shouldRender: () => (showCreate && config.shouldRenderActions?.create?.(this.parentData())) ?? false,
|
|
1858
1868
|
resourceData: this.parentData(),
|
|
1859
1869
|
};
|
|
1860
|
-
},
|
|
1870
|
+
}, ...(ngDevMode ? [{ debugName: "createActionConfig" }] : []));
|
|
1861
1871
|
createConfig = computed(() => {
|
|
1862
1872
|
const config = this.resourceConfig();
|
|
1863
1873
|
if (config.createConfig && Object.keys(config.createConfig).length !== 0) {
|
|
@@ -1867,12 +1877,12 @@ class ResourceArrayViewComponent {
|
|
|
1867
1877
|
return config.iteratedConfig;
|
|
1868
1878
|
}
|
|
1869
1879
|
return config;
|
|
1870
|
-
},
|
|
1880
|
+
}, ...(ngDevMode ? [{ debugName: "createConfig" }] : []));
|
|
1871
1881
|
resourceListRoute = computed(() => {
|
|
1872
1882
|
const config = this.resourceConfig();
|
|
1873
1883
|
const meta = this.resourceMeta(config.connectorResource || config.primaryResource);
|
|
1874
1884
|
return meta.route;
|
|
1875
|
-
},
|
|
1885
|
+
}, ...(ngDevMode ? [{ debugName: "resourceListRoute" }] : []));
|
|
1876
1886
|
setCreateMode(value) {
|
|
1877
1887
|
this.createMode.set(value);
|
|
1878
1888
|
if (value && this.expPanel && this.expPanel()?.closed) {
|
|
@@ -1925,10 +1935,10 @@ class ResourceArrayViewComponent {
|
|
|
1925
1935
|
this.store.reloadListData();
|
|
1926
1936
|
this.setCreateMode(false);
|
|
1927
1937
|
}
|
|
1928
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1929
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1938
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceArrayViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1939
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ResourceArrayViewComponent, isStandalone: true, selector: "ccc-resource-array-view", inputs: { resourceConfig: { classPropertyName: "resourceConfig", publicName: "resourceConfig", isSignal: true, isRequired: true, transformFunction: null }, parentData: { classPropertyName: "parentData", publicName: "parentData", isSignal: true, isRequired: false, transformFunction: null }, compoundResourceComponent: { classPropertyName: "compoundResourceComponent", publicName: "compoundResourceComponent", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { emptyOneToOne: "emptyOneToOne" }, providers: [ResourceStore], viewQueries: [{ propertyName: "expPanel", first: true, predicate: ["expPanel"], descendants: true, read: MatExpansionPanel, isSignal: true }], ngImport: i0, template: "@if (resourceConfig().title !== '') {\n <div class=\"resource-array-view\">\n <mat-expansion-panel\n #expPanel\n [@.disabled]=\"true\"\n [disabled]=\"!resourceConfig().collapsible\"\n [expanded]=\"!resourceConfig().collapsible\">\n <mat-expansion-panel-header>\n @if (resourceConfig().title) {\n <mat-panel-title>\n <h1 class=\"title\">\n {{ resourceConfig().title }}\n </h1>\n </mat-panel-title>\n }\n <action-access-control-wrapper [actionContext]=\"createActionConfig()\">\n <button\n mat-icon-button\n class=\"exp-panel-add-element-btn\"\n color=\"accent\"\n (click)=\"createResource($event)\"\n [matTooltip]=\"resourceConfig().createButtonLabel\"\n matTooltipPosition=\"above\">\n <mat-icon color=\"accent\">add_circle</mat-icon>\n </button>\n </action-access-control-wrapper>\n </mat-expansion-panel-header>\n\n @if (!resourceConfig().collapsible && !resourceConfig().title) {\n <div class=\"no-title-exp-panel-padding\"></div>\n }\n\n @if (createMode()) {\n <ccc-resource-create\n [resourceConfig]=\"createConfig()\"\n [parentData]=\"parentData()\"\n (complete)=\"onCreateCompleted()\">\n </ccc-resource-create>\n }\n @if (store.listStatus() === 'resolved') {\n @for (resource of store.listData(); track resource['id']; let i = $index) {\n @let resourceId = (resource[resourceConfig().connectorField] || resource['id']) + '';\n\n @if (parentData() && resourceConfig().iteratedConfig && resourceId && i + 1 <= resourceConfig().limit) {\n <ng-container *ngComponentOutlet=\"compoundResourceComponent();\n inputs: { \n uuid: resourceId, \n parentData: parentData(), \n isArrayChild: true, \n resourceConfig: resourceConfig().iteratedConfig \n }\">\n </ng-container>\n }\n }\n } @else {\n <div class=\"resource-container empty\">\n <div class=\"resource row\"></div>\n </div>\n }\n\n @if (store.listData().length === 0) {\n <div>No records found</div>\n }\n </mat-expansion-panel>\n </div>\n} @else {\n @if (createMode()) {\n <ccc-resource-create [resourceConfig]=\"createConfig()\" [parentData]=\"parentData()\" (complete)=\"onCreateCompleted()\">\n </ccc-resource-create>\n }\n @if (store.listStatus() === 'resolved') {\n @for (resource of store.listData(); track resource['id']; let i = $index) {\n @if (parentData() && resourceConfig().iteratedConfig && resource['id'] && i + 1 <= resourceConfig().limit) {\n <ng-container *ngComponentOutlet=\"compoundResourceComponent();\n inputs: { \n uuid: resource['id'] + '', \n parentData: parentData(), \n isArrayChild: true, \n resourceConfig: resourceConfig().iteratedConfig \n }\">\n </ng-container>\n }\n }\n } @else {\n <div class=\"resource-container empty\">\n <div class=\"resource row\"></div>\n </div>\n }\n\n @if (store.listData().length === 0) {\n <div>No records found</div>\n }\n}\n", styles: [".resource-array-view{display:flex;flex-direction:column;min-height:36px;padding:10px 0 0}.title{display:flex;align-items:center;flex-shrink:0}.exp-panel-add-element-btn{margin-right:10px;transform:scale(1.2)}.no-title-exp-panel-padding{padding:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i2$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ResourceCreateComponent, selector: "ccc-resource-create", inputs: ["resourceConfig", "parentData", "loadCreatedResource"], outputs: ["complete"] }, { kind: "component", type: ActionAccessControlWrapperComponent, selector: "action-access-control-wrapper", inputs: ["actionContext"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
|
|
1930
1940
|
}
|
|
1931
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1941
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceArrayViewComponent, decorators: [{
|
|
1932
1942
|
type: Component,
|
|
1933
1943
|
args: [{ selector: 'ccc-resource-array-view', imports: [
|
|
1934
1944
|
MatButtonModule,
|
|
@@ -1980,19 +1990,19 @@ function formatDateString(formatString, value) {
|
|
|
1980
1990
|
|
|
1981
1991
|
class ResourceListComponent {
|
|
1982
1992
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
1983
|
-
compoundResourceComponent = input.required(
|
|
1993
|
+
compoundResourceComponent = input.required(...(ngDevMode ? [{ debugName: "compoundResourceComponent" }] : []));
|
|
1984
1994
|
resourceMeta = inject(RESOURCE_META);
|
|
1985
1995
|
router = inject(Router);
|
|
1986
1996
|
store = inject(ResourceStore);
|
|
1987
1997
|
injector = inject(Injector);
|
|
1988
1998
|
activatedRoute = inject(ActivatedRoute);
|
|
1989
|
-
hideCreateButton = input(true,
|
|
1999
|
+
hideCreateButton = input(true, ...(ngDevMode ? [{ debugName: "hideCreateButton" }] : []));
|
|
1990
2000
|
createMode = output();
|
|
1991
|
-
resourceConfig = input(
|
|
1992
|
-
viewRoute = input(
|
|
1993
|
-
filter = input('',
|
|
1994
|
-
linkCreateType = input(false,
|
|
1995
|
-
isRootList = input(true,
|
|
2001
|
+
resourceConfig = input(...(ngDevMode ? [undefined, { debugName: "resourceConfig" }] : []));
|
|
2002
|
+
viewRoute = input(...(ngDevMode ? [undefined, { debugName: "viewRoute" }] : []));
|
|
2003
|
+
filter = input('', ...(ngDevMode ? [{ debugName: "filter" }] : []));
|
|
2004
|
+
linkCreateType = input(false, ...(ngDevMode ? [{ debugName: "linkCreateType" }] : []));
|
|
2005
|
+
isRootList = input(true, ...(ngDevMode ? [{ debugName: "isRootList" }] : []));
|
|
1996
2006
|
showCreateButton = computed(() => {
|
|
1997
2007
|
const config = this.config();
|
|
1998
2008
|
if (config.createTitle !== '' && !config.collapsible && !this.hideCreateButton()) {
|
|
@@ -2002,7 +2012,7 @@ class ResourceListComponent {
|
|
|
2002
2012
|
return true;
|
|
2003
2013
|
}
|
|
2004
2014
|
return false;
|
|
2005
|
-
},
|
|
2015
|
+
}, ...(ngDevMode ? [{ debugName: "showCreateButton" }] : []));
|
|
2006
2016
|
createButtonContext = computed(() => {
|
|
2007
2017
|
const config = this.resourceConfig();
|
|
2008
2018
|
const showCreate = this.showCreateButton();
|
|
@@ -2018,7 +2028,7 @@ class ResourceListComponent {
|
|
|
2018
2028
|
shouldRender: (data) => showCreate && config.shouldRenderActions.create(data),
|
|
2019
2029
|
resourceData: this.relatedData() ?? {},
|
|
2020
2030
|
};
|
|
2021
|
-
},
|
|
2031
|
+
}, ...(ngDevMode ? [{ debugName: "createButtonContext" }] : []));
|
|
2022
2032
|
searchableFields = computed(() => {
|
|
2023
2033
|
const meta = this.meta();
|
|
2024
2034
|
if (!meta)
|
|
@@ -2026,54 +2036,54 @@ class ResourceListComponent {
|
|
|
2026
2036
|
return `over fields of ${meta.route}`;
|
|
2027
2037
|
// TODO: implement searchable fields based on resource meta
|
|
2028
2038
|
// return meta.searchableFields.join(', ') || '';
|
|
2029
|
-
},
|
|
2030
|
-
relatedData = input(
|
|
2031
|
-
parentId = input(
|
|
2039
|
+
}, ...(ngDevMode ? [{ debugName: "searchableFields" }] : []));
|
|
2040
|
+
relatedData = input(...(ngDevMode ? [undefined, { debugName: "relatedData" }] : []));
|
|
2041
|
+
parentId = input(...(ngDevMode ? [undefined, { debugName: "parentId" }] : []));
|
|
2032
2042
|
routeConfig = computed(() => {
|
|
2033
2043
|
return this.activatedRoute.snapshot.data['config'];
|
|
2034
|
-
},
|
|
2044
|
+
}, ...(ngDevMode ? [{ debugName: "routeConfig" }] : []));
|
|
2035
2045
|
config = computed(() => {
|
|
2036
2046
|
return this.resourceConfig();
|
|
2037
|
-
},
|
|
2047
|
+
}, ...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
2038
2048
|
expansionConfig = computed(() => {
|
|
2039
2049
|
const config = this.config().rowExpansionConfig;
|
|
2040
2050
|
if (config.type !== 'Component' && config.type !== 'Array') {
|
|
2041
2051
|
config.showBackButton = false;
|
|
2042
2052
|
}
|
|
2043
2053
|
return config;
|
|
2044
|
-
},
|
|
2054
|
+
}, ...(ngDevMode ? [{ debugName: "expansionConfig" }] : []));
|
|
2045
2055
|
viewRouteFallback = computed(() => {
|
|
2046
2056
|
if (this.viewRoute()) {
|
|
2047
2057
|
return this.viewRoute();
|
|
2048
2058
|
}
|
|
2049
2059
|
return this.resourceMeta(this.config().primaryResource).route;
|
|
2050
|
-
},
|
|
2060
|
+
}, ...(ngDevMode ? [{ debugName: "viewRouteFallback" }] : []));
|
|
2051
2061
|
listTitle = computed(() => {
|
|
2052
2062
|
if (this.config()?.collapsible)
|
|
2053
2063
|
return '';
|
|
2054
2064
|
return this.config().title || '';
|
|
2055
|
-
},
|
|
2065
|
+
}, ...(ngDevMode ? [{ debugName: "listTitle" }] : []));
|
|
2056
2066
|
indentTitle = computed(() => {
|
|
2057
2067
|
if (this.config() === undefined) {
|
|
2058
2068
|
return false;
|
|
2059
2069
|
}
|
|
2060
2070
|
return true;
|
|
2061
|
-
},
|
|
2071
|
+
}, ...(ngDevMode ? [{ debugName: "indentTitle" }] : []));
|
|
2062
2072
|
createButtonLabel = computed(() => {
|
|
2063
2073
|
return this.config().createButtonLabel || 'Create';
|
|
2064
|
-
},
|
|
2074
|
+
}, ...(ngDevMode ? [{ debugName: "createButtonLabel" }] : []));
|
|
2065
2075
|
meta = computed(() => {
|
|
2066
2076
|
const config = this.config();
|
|
2067
2077
|
return this.resourceMeta(config.overrideResource || config.primaryResource);
|
|
2068
|
-
},
|
|
2069
|
-
resourceRefMap = signal(new Map(),
|
|
2078
|
+
}, ...(ngDevMode ? [{ debugName: "meta" }] : []));
|
|
2079
|
+
resourceRefMap = signal(new Map(), ...(ngDevMode ? [{ debugName: "resourceRefMap" }] : []));
|
|
2070
2080
|
primaryKeys = computed(() => {
|
|
2071
2081
|
const meta = this.meta();
|
|
2072
2082
|
if (!meta) {
|
|
2073
2083
|
return [];
|
|
2074
2084
|
}
|
|
2075
2085
|
return meta.fields.filter((field) => field.primaryKey !== undefined);
|
|
2076
|
-
},
|
|
2086
|
+
}, ...(ngDevMode ? [{ debugName: "primaryKeys" }] : []));
|
|
2077
2087
|
rootColumns = computed(() => {
|
|
2078
2088
|
const config = this.config();
|
|
2079
2089
|
const idCols = [];
|
|
@@ -2099,7 +2109,7 @@ class ResourceListComponent {
|
|
|
2099
2109
|
}
|
|
2100
2110
|
}
|
|
2101
2111
|
return [...new Set([...idCols, ...config.listColumns])];
|
|
2102
|
-
},
|
|
2112
|
+
}, ...(ngDevMode ? [{ debugName: "rootColumns" }] : []));
|
|
2103
2113
|
columns = computed(() => {
|
|
2104
2114
|
const refmap = this.resourceRefMap();
|
|
2105
2115
|
const cols = this.rootColumns();
|
|
@@ -2208,7 +2218,7 @@ class ResourceListComponent {
|
|
|
2208
2218
|
});
|
|
2209
2219
|
}
|
|
2210
2220
|
return columns;
|
|
2211
|
-
},
|
|
2221
|
+
}, ...(ngDevMode ? [{ debugName: "columns" }] : []));
|
|
2212
2222
|
reloadListData() {
|
|
2213
2223
|
this.store.reloadListData();
|
|
2214
2224
|
}
|
|
@@ -2234,7 +2244,7 @@ class ResourceListComponent {
|
|
|
2234
2244
|
}
|
|
2235
2245
|
return updatedRow;
|
|
2236
2246
|
});
|
|
2237
|
-
},
|
|
2247
|
+
}, ...(ngDevMode ? [{ debugName: "processedRowData" }] : []));
|
|
2238
2248
|
filters = computed(() => {
|
|
2239
2249
|
const configFilter = this.config().filter?.(this.relatedData()) || '';
|
|
2240
2250
|
const inputFilter = this.filter();
|
|
@@ -2245,7 +2255,7 @@ class ResourceListComponent {
|
|
|
2245
2255
|
return `(${inputFilter})`;
|
|
2246
2256
|
}
|
|
2247
2257
|
return configFilter || '';
|
|
2248
|
-
},
|
|
2258
|
+
}, ...(ngDevMode ? [{ debugName: "filters" }] : []));
|
|
2249
2259
|
createResource(event) {
|
|
2250
2260
|
event.stopPropagation();
|
|
2251
2261
|
this.createMode.emit(true);
|
|
@@ -2256,13 +2266,13 @@ class ResourceListComponent {
|
|
|
2256
2266
|
}
|
|
2257
2267
|
const parent = this.config().parentRelation?.parentKey;
|
|
2258
2268
|
return this.relatedData()?.[parent] || '';
|
|
2259
|
-
},
|
|
2269
|
+
}, ...(ngDevMode ? [{ debugName: "parentKey" }] : []));
|
|
2260
2270
|
childKey = computed(() => {
|
|
2261
2271
|
if (!this.config().parentRelation) {
|
|
2262
2272
|
return '';
|
|
2263
2273
|
}
|
|
2264
2274
|
return this.config().parentRelation?.childKey;
|
|
2265
|
-
},
|
|
2275
|
+
}, ...(ngDevMode ? [{ debugName: "childKey" }] : []));
|
|
2266
2276
|
getUniqueId(baseId, usedIds) {
|
|
2267
2277
|
if (!usedIds.has(baseId)) {
|
|
2268
2278
|
return baseId;
|
|
@@ -2283,6 +2293,7 @@ class ResourceListComponent {
|
|
|
2283
2293
|
this.store.listColumns.set(this.config().listColumns || []);
|
|
2284
2294
|
this.store.requireSearchToDisplayResults.set(this.config().requireSearchToDisplayResults || false);
|
|
2285
2295
|
this.store.sorts.set(this.config().sorts || []);
|
|
2296
|
+
this.store.limit.set(this.config().limit);
|
|
2286
2297
|
}
|
|
2287
2298
|
this.store.filter.set(this.filters());
|
|
2288
2299
|
this.store.disableCacheForFilterPii.set(this.config().disableCacheForFilterPii);
|
|
@@ -2299,8 +2310,8 @@ class ResourceListComponent {
|
|
|
2299
2310
|
if (meta === undefined) {
|
|
2300
2311
|
return;
|
|
2301
2312
|
}
|
|
2302
|
-
const route = signal(meta.route,
|
|
2303
|
-
const resource = signal(id.resource,
|
|
2313
|
+
const route = signal(meta.route, ...(ngDevMode ? [{ debugName: "route" }] : []));
|
|
2314
|
+
const resource = signal(id.resource, ...(ngDevMode ? [{ debugName: "resource" }] : []));
|
|
2304
2315
|
if (!this.resourceRefMap().has(resource())) {
|
|
2305
2316
|
const ref = this.store.resourceList(route);
|
|
2306
2317
|
if (ref === undefined) {
|
|
@@ -2319,10 +2330,10 @@ class ResourceListComponent {
|
|
|
2319
2330
|
});
|
|
2320
2331
|
});
|
|
2321
2332
|
}
|
|
2322
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2323
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
2333
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2334
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ResourceListComponent, isStandalone: true, selector: "ccc-resource-list", inputs: { compoundResourceComponent: { classPropertyName: "compoundResourceComponent", publicName: "compoundResourceComponent", isSignal: true, isRequired: true, transformFunction: null }, hideCreateButton: { classPropertyName: "hideCreateButton", publicName: "hideCreateButton", isSignal: true, isRequired: false, transformFunction: null }, resourceConfig: { classPropertyName: "resourceConfig", publicName: "resourceConfig", isSignal: true, isRequired: false, transformFunction: null }, viewRoute: { classPropertyName: "viewRoute", publicName: "viewRoute", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, linkCreateType: { classPropertyName: "linkCreateType", publicName: "linkCreateType", isSignal: true, isRequired: false, transformFunction: null }, isRootList: { classPropertyName: "isRootList", publicName: "isRootList", isSignal: true, isRequired: false, transformFunction: null }, relatedData: { classPropertyName: "relatedData", publicName: "relatedData", isSignal: true, isRequired: false, transformFunction: null }, parentId: { classPropertyName: "parentId", publicName: "parentId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { createMode: "createMode" }, providers: [ResourceStore], ngImport: i0, template: "<div [class]=\"linkCreateType() ? 'page-container hide' : 'page-container'\">\n <div class=\"header-container\" [class.show-background]=\"!config().collapsible\" [class.indent]=\"indentTitle()\">\n <h1 class=\"title\">{{ listTitle() }}</h1>\n <action-access-control-wrapper [actionContext]=\"createButtonContext()\">\n <div class=\"create-button\">\n <button mat-raised-button color=\"accent\" (click)=\"createResource($event)\">\n <div class=\"edit-text\">\n <mat-icon>create</mat-icon>\n <span class=\"edit-button-text\"> {{ createButtonLabel() }} </span>\n </div>\n </button>\n </div>\n </action-access-control-wrapper>\n </div>\n <div class=\"resource-container\">\n @if (config().searchable) {\n <mat-form-field class=\"search\">\n <input matInput #qry (keyup)=\"store.searchTokens.set(qry.value)\" placeholder=\"Search\" aria-label=\"Search\" />\n @if (searchableFields() !== '') {\n <mat-hint>Search {{ searchableFields() }}</mat-hint>\n }\n <mat-icon matPrefix>search</mat-icon>\n </mat-form-field>\n }\n <ccc-grid\n [rowData]=\"processedRowData()\"\n [columnDefs]=\"columns()\"\n [enableRowExpansion]=\"config().enableRowExpansion\"\n [detailTemplate]=\"expandedRowTemplate\">\n </ccc-grid>\n </div>\n</div>\n\n<ng-template #expandedRowTemplate let-rowData>\n <ng-container\n *ngComponentOutlet=\"\n compoundResourceComponent();\n inputs: {\n uuid: rowData.id,\n navAfterDelete: false,\n deleted: store.reloadListData.bind(store),\n resourceConfig: expansionConfig(),\n }\n \">\n </ng-container>\n</ng-template>\n", styles: [".page-container{position:relative;margin:10px 0 0}.header-container{margin-top:10px;display:flex;flex-direction:row;justify-content:space-between;top:0;z-index:10;width:100%}.title{display:flex;align-items:center;flex-shrink:0}.create-button{margin-top:auto;margin-bottom:auto;padding-left:10px}.edit-text{display:flex;flex-direction:row;align-items:center}.edit-text .edit{color:#003b49}.edit-text .mat-icon{margin-right:8px}.edit-button-text{margin-top:auto;margin-bottom:auto}.exp-panel-add-element-btn{margin-right:10px;transform:scale(1.2)}.hide{display:none}.show-background{background-color:#fff;padding-bottom:20px}.indent{padding-left:20px}.search{width:100%}\n"], dependencies: [{ kind: "component", type: AppGridComponent, selector: "ccc-grid", inputs: ["rowData", "columnDefs", "enableRowExpansion", "detailTemplate", "selectionType"], outputs: ["selectedRows"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.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: MatExpansionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: ActionAccessControlWrapperComponent, selector: "action-access-control-wrapper", inputs: ["actionContext"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
|
|
2324
2335
|
}
|
|
2325
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2336
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceListComponent, decorators: [{
|
|
2326
2337
|
type: Component,
|
|
2327
2338
|
args: [{ standalone: true, imports: [
|
|
2328
2339
|
AppGridComponent,
|
|
@@ -2340,59 +2351,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
2340
2351
|
|
|
2341
2352
|
class ResourceListCreateComponent {
|
|
2342
2353
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
2343
|
-
compoundResourceComponent = input.required(
|
|
2354
|
+
compoundResourceComponent = input.required(...(ngDevMode ? [{ debugName: "compoundResourceComponent" }] : []));
|
|
2344
2355
|
injector = inject(Injector);
|
|
2345
2356
|
store = inject(ResourceStore);
|
|
2346
2357
|
listChild = viewChild('list', { ...(ngDevMode ? { debugName: "listChild" } : {}), read: ResourceListComponent });
|
|
2347
2358
|
route = inject(ActivatedRoute);
|
|
2348
2359
|
router = inject(Router);
|
|
2349
|
-
create = signal(false,
|
|
2350
|
-
parentId = input(
|
|
2351
|
-
parentData = input({},
|
|
2352
|
-
searchParams = input([],
|
|
2353
|
-
resourceConfig = input(
|
|
2354
|
-
isRootList = input(true,
|
|
2360
|
+
create = signal(false, ...(ngDevMode ? [{ debugName: "create" }] : []));
|
|
2361
|
+
parentId = input(...(ngDevMode ? [undefined, { debugName: "parentId" }] : []));
|
|
2362
|
+
parentData = input({}, ...(ngDevMode ? [{ debugName: "parentData" }] : []));
|
|
2363
|
+
searchParams = input([], ...(ngDevMode ? [{ debugName: "searchParams" }] : []));
|
|
2364
|
+
resourceConfig = input(...(ngDevMode ? [undefined, { debugName: "resourceConfig" }] : []));
|
|
2365
|
+
isRootList = input(true, ...(ngDevMode ? [{ debugName: "isRootList" }] : []));
|
|
2355
2366
|
childKey = computed(() => {
|
|
2356
2367
|
if (!this.config().parentRelation) {
|
|
2357
2368
|
return '';
|
|
2358
2369
|
}
|
|
2359
2370
|
return this.config().parentRelation?.childKey;
|
|
2360
|
-
},
|
|
2371
|
+
}, ...(ngDevMode ? [{ debugName: "childKey" }] : []));
|
|
2361
2372
|
filter = computed(() => {
|
|
2362
2373
|
const filters = [];
|
|
2363
2374
|
if (this.childKey() !== '' && this.parentKey() !== '') {
|
|
2364
2375
|
filters.push(`${this.childKey()}:eq:${this.parentKey()}`);
|
|
2365
2376
|
}
|
|
2366
2377
|
return filters.join(',');
|
|
2367
|
-
},
|
|
2378
|
+
}, ...(ngDevMode ? [{ debugName: "filter" }] : []));
|
|
2368
2379
|
parentKey = computed(() => {
|
|
2369
2380
|
if (this.parentData() === undefined || this.childKey() === undefined) {
|
|
2370
2381
|
return '';
|
|
2371
2382
|
}
|
|
2372
2383
|
const parent = this.config().parentRelation?.parentKey;
|
|
2373
2384
|
return this.parentData()?.[parent] || '';
|
|
2374
|
-
},
|
|
2385
|
+
}, ...(ngDevMode ? [{ debugName: "parentKey" }] : []));
|
|
2375
2386
|
config = computed(() => {
|
|
2376
2387
|
const inputConfig = this.resourceConfig();
|
|
2377
2388
|
if (inputConfig) {
|
|
2378
2389
|
return inputConfig;
|
|
2379
2390
|
}
|
|
2380
2391
|
return this.rootConfig().parentConfig;
|
|
2381
|
-
},
|
|
2392
|
+
}, ...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
2382
2393
|
expPanel = viewChild('expPanel', { ...(ngDevMode ? { debugName: "expPanel" } : {}), read: MatExpansionPanel });
|
|
2383
2394
|
rootConfig = computed(() => {
|
|
2384
2395
|
return this.route.snapshot.data['config'];
|
|
2385
|
-
},
|
|
2396
|
+
}, ...(ngDevMode ? [{ debugName: "rootConfig" }] : []));
|
|
2386
2397
|
createLinkType = computed(() => {
|
|
2387
2398
|
return this.config().loadCreatedResource && this.create();
|
|
2388
|
-
},
|
|
2399
|
+
}, ...(ngDevMode ? [{ debugName: "createLinkType" }] : []));
|
|
2389
2400
|
createConfig = computed(() => {
|
|
2390
2401
|
const config = this.config();
|
|
2391
2402
|
if (Object.keys(config.createConfig).length !== 0) {
|
|
2392
2403
|
return config.createConfig;
|
|
2393
2404
|
}
|
|
2394
2405
|
return config;
|
|
2395
|
-
},
|
|
2406
|
+
}, ...(ngDevMode ? [{ debugName: "createConfig" }] : []));
|
|
2396
2407
|
createResource(event) {
|
|
2397
2408
|
event.stopPropagation();
|
|
2398
2409
|
this.create.set(true);
|
|
@@ -2406,10 +2417,10 @@ class ResourceListCreateComponent {
|
|
|
2406
2417
|
this.create.set(false);
|
|
2407
2418
|
}
|
|
2408
2419
|
}
|
|
2409
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2410
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
2420
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceListCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2421
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ResourceListCreateComponent, isStandalone: true, selector: "ccc-resource-list-create", inputs: { compoundResourceComponent: { classPropertyName: "compoundResourceComponent", publicName: "compoundResourceComponent", isSignal: true, isRequired: true, transformFunction: null }, parentId: { classPropertyName: "parentId", publicName: "parentId", isSignal: true, isRequired: false, transformFunction: null }, parentData: { classPropertyName: "parentData", publicName: "parentData", isSignal: true, isRequired: false, transformFunction: null }, searchParams: { classPropertyName: "searchParams", publicName: "searchParams", isSignal: true, isRequired: false, transformFunction: null }, resourceConfig: { classPropertyName: "resourceConfig", publicName: "resourceConfig", isSignal: true, isRequired: false, transformFunction: null }, isRootList: { classPropertyName: "isRootList", publicName: "isRootList", isSignal: true, isRequired: false, transformFunction: null } }, providers: [ResourceStore], viewQueries: [{ propertyName: "listChild", first: true, predicate: ["list"], descendants: true, read: ResourceListComponent, isSignal: true }, { propertyName: "expPanel", first: true, predicate: ["expPanel"], descendants: true, read: MatExpansionPanel, isSignal: true }], ngImport: i0, template: "@if (config().collapsible) {\n <div class=\"page-container\">\n <mat-expansion-panel\n #expPanel\n [@.disabled]=\"true\"\n disabled=\"{{ !config().collapsible }}\"\n expanded=\"{{ !config().collapsible }}\">\n @if (config().collapsible || config().title) {\n <mat-expansion-panel-header>\n <mat-panel-title>\n <h1 class=\"title\">\n {{ config().title }}\n </h1>\n </mat-panel-title>\n @if (config().createTitle !== '') {\n <button\n mat-icon-button\n class=\"exp-panel-add-element-btn\"\n color=\"accent\"\n (click)=\"createResource($event)\"\n matTooltip=\"{{ config().createButtonLabel }}\"\n matTooltipPosition=\"above\">\n <mat-icon color=\"accent\">add_circle</mat-icon>\n </button>\n }\n </mat-expansion-panel-header>\n } @else {\n <div class=\"no-title-exp-panel-padding\"></div>\n }\n\n <ng-container *ngTemplateOutlet=\"resourceComponents\"></ng-container>\n </mat-expansion-panel>\n </div>\n} @else {\n <ng-container *ngTemplateOutlet=\"resourceComponents\"></ng-container>\n}\n\n<ng-template #resourceComponents>\n @if (create()) {\n <ccc-resource-create\n [resourceConfig]=\"createConfig()\"\n [parentData]=\"parentData()\"\n [loadCreatedResource]=\"config().loadCreatedResource\"\n (complete)=\"makeCreatePatches()\">\n </ccc-resource-create>\n }\n\n <ccc-resource-list\n #list\n [viewRoute]=\"rootConfig().routeData.route\"\n [resourceConfig]=\"config()\"\n [filter]=\"filter()\"\n [hideCreateButton]=\"create()\"\n [relatedData]=\"parentData()\"\n [parentId]=\"parentId()\"\n [linkCreateType]=\"createLinkType()\"\n [isRootList]=\"isRootList()\"\n (createMode)=\"create.set($event)\"\n [compoundResourceComponent]=\"compoundResourceComponent()\">\n </ccc-resource-list>\n</ng-template>\n", styles: [".page-container{position:relative;margin:10px 0 0}.exp-panel-add-element-btn{margin-right:10px;transform:scale(1.2)}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i2$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ResourceCreateComponent, selector: "ccc-resource-create", inputs: ["resourceConfig", "parentData", "loadCreatedResource"], outputs: ["complete"] }, { kind: "component", type: ResourceListComponent, selector: "ccc-resource-list", inputs: ["compoundResourceComponent", "hideCreateButton", "resourceConfig", "viewRoute", "filter", "linkCreateType", "isRootList", "relatedData", "parentId"], outputs: ["createMode"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
2411
2422
|
}
|
|
2412
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2423
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceListCreateComponent, decorators: [{
|
|
2413
2424
|
type: Component,
|
|
2414
2425
|
args: [{ standalone: true, selector: 'ccc-resource-list-create', imports: [
|
|
2415
2426
|
MatExpansionModule,
|
|
@@ -2424,13 +2435,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
2424
2435
|
|
|
2425
2436
|
class ResourceResolverComponent {
|
|
2426
2437
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
2427
|
-
compoundResourceComponent = input.required(
|
|
2428
|
-
resourceConfig = input(
|
|
2438
|
+
compoundResourceComponent = input.required(...(ngDevMode ? [{ debugName: "compoundResourceComponent" }] : []));
|
|
2439
|
+
resourceConfig = input(...(ngDevMode ? [undefined, { debugName: "resourceConfig" }] : []));
|
|
2429
2440
|
config = computed(() => {
|
|
2430
2441
|
return this.resourceConfig();
|
|
2431
|
-
},
|
|
2442
|
+
}, ...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
2432
2443
|
dynamicSlot = viewChild.required('dynamicSlot', { read: ViewContainerRef });
|
|
2433
|
-
parentData = input.required(
|
|
2444
|
+
parentData = input.required(...(ngDevMode ? [{ debugName: "parentData" }] : []));
|
|
2434
2445
|
constructor() {
|
|
2435
2446
|
effect(() => {
|
|
2436
2447
|
const parentData = this.parentData();
|
|
@@ -2475,19 +2486,19 @@ class ResourceResolverComponent {
|
|
|
2475
2486
|
});
|
|
2476
2487
|
});
|
|
2477
2488
|
}
|
|
2478
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2479
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.
|
|
2489
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceResolverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2490
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.1", type: ResourceResolverComponent, isStandalone: true, selector: "ccc-resource-resolver", inputs: { compoundResourceComponent: { classPropertyName: "compoundResourceComponent", publicName: "compoundResourceComponent", isSignal: true, isRequired: true, transformFunction: null }, resourceConfig: { classPropertyName: "resourceConfig", publicName: "resourceConfig", isSignal: true, isRequired: false, transformFunction: null }, parentData: { classPropertyName: "parentData", publicName: "parentData", isSignal: true, isRequired: true, transformFunction: null } }, providers: [ResourceStore], viewQueries: [{ propertyName: "dynamicSlot", first: true, predicate: ["dynamicSlot"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<ng-template #dynamicSlot></ng-template>", styles: [""] });
|
|
2480
2491
|
}
|
|
2481
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2492
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceResolverComponent, decorators: [{
|
|
2482
2493
|
type: Component,
|
|
2483
2494
|
args: [{ selector: 'ccc-resource-resolver', imports: [], providers: [ResourceStore], template: "<ng-template #dynamicSlot></ng-template>" }]
|
|
2484
2495
|
}], ctorParameters: () => [], propDecorators: { compoundResourceComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "compoundResourceComponent", required: true }] }], resourceConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "resourceConfig", required: false }] }], dynamicSlot: [{ type: i0.ViewChild, args: ['dynamicSlot', { ...{ read: ViewContainerRef }, isSignal: true }] }], parentData: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentData", required: true }] }] } });
|
|
2485
2496
|
|
|
2486
2497
|
class DeleteResourceConfirmationModalComponent {
|
|
2487
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2488
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
2498
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DeleteResourceConfirmationModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2499
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DeleteResourceConfirmationModalComponent, isStandalone: true, selector: "ccc-delete-resource-confirmation-modal", ngImport: i0, template: "<div mat-dialog-title>Are you sure you want to delete this resource?</div>\n<mat-dialog-actions align=\"end\">\n <button mat-raised-button color=\"warn\" [mat-dialog-close]=\"false\">Cancel</button>\n <button mat-raised-button color=\"accent\" [mat-dialog-close]=\"true\">Confirm</button>\n</mat-dialog-actions>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.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: MatInputModule }] });
|
|
2489
2500
|
}
|
|
2490
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2501
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DeleteResourceConfirmationModalComponent, decorators: [{
|
|
2491
2502
|
type: Component,
|
|
2492
2503
|
args: [{ selector: 'ccc-delete-resource-confirmation-modal', imports: [MatDialogModule, MatFormFieldModule, MatDialogActions, MatButtonModule, MatInputModule], template: "<div mat-dialog-title>Are you sure you want to delete this resource?</div>\n<mat-dialog-actions align=\"end\">\n <button mat-raised-button color=\"warn\" [mat-dialog-close]=\"false\">Cancel</button>\n <button mat-raised-button color=\"accent\" [mat-dialog-close]=\"true\">Confirm</button>\n</mat-dialog-actions>\n" }]
|
|
2493
2504
|
}] });
|
|
@@ -2503,25 +2514,25 @@ class ResourceViewComponent {
|
|
|
2503
2514
|
destroyRef = inject(DestroyRef);
|
|
2504
2515
|
formState = inject(FormStateService);
|
|
2505
2516
|
dialog = inject(MatDialog);
|
|
2506
|
-
editMode = signal('view',
|
|
2507
|
-
uuid = input.required(
|
|
2508
|
-
config = input.required(
|
|
2509
|
-
relatedData = input({},
|
|
2510
|
-
compoundResourceView = input(false,
|
|
2511
|
-
isDirty = signal(false,
|
|
2512
|
-
displayFormInvalidMessage = signal(false,
|
|
2517
|
+
editMode = signal('view', ...(ngDevMode ? [{ debugName: "editMode" }] : []));
|
|
2518
|
+
uuid = input.required(...(ngDevMode ? [{ debugName: "uuid" }] : []));
|
|
2519
|
+
config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
2520
|
+
relatedData = input({}, ...(ngDevMode ? [{ debugName: "relatedData" }] : []));
|
|
2521
|
+
compoundResourceView = input(false, ...(ngDevMode ? [{ debugName: "compoundResourceView" }] : []));
|
|
2522
|
+
isDirty = signal(false, ...(ngDevMode ? [{ debugName: "isDirty" }] : []));
|
|
2523
|
+
displayFormInvalidMessage = signal(false, ...(ngDevMode ? [{ debugName: "displayFormInvalidMessage" }] : []));
|
|
2513
2524
|
deleted = output();
|
|
2514
|
-
navAfterDelete = input(true,
|
|
2515
|
-
showCreateForm = model(false,
|
|
2525
|
+
navAfterDelete = input(true, ...(ngDevMode ? [{ debugName: "navAfterDelete" }] : []));
|
|
2526
|
+
showCreateForm = model(false, ...(ngDevMode ? [{ debugName: "showCreateForm" }] : []));
|
|
2516
2527
|
createConfig = computed(() => {
|
|
2517
2528
|
if (Object.keys(this.config().createConfig || {}).length > 0) {
|
|
2518
2529
|
return this.config().createConfig;
|
|
2519
2530
|
}
|
|
2520
2531
|
return this.config();
|
|
2521
|
-
},
|
|
2532
|
+
}, ...(ngDevMode ? [{ debugName: "createConfig" }] : []));
|
|
2522
2533
|
rootConfig = computed(() => {
|
|
2523
2534
|
return this.activatedRoute.snapshot.data['config'];
|
|
2524
|
-
},
|
|
2535
|
+
}, ...(ngDevMode ? [{ debugName: "rootConfig" }] : []));
|
|
2525
2536
|
showCloseButton = computed(() => {
|
|
2526
2537
|
const config = this.config();
|
|
2527
2538
|
const showBackButton = config.showBackButton ?? true;
|
|
@@ -2529,7 +2540,7 @@ class ResourceViewComponent {
|
|
|
2529
2540
|
return showBackButton && config.primaryResource === this.rootConfig().parentConfig.primaryResource;
|
|
2530
2541
|
}
|
|
2531
2542
|
return showBackButton;
|
|
2532
|
-
},
|
|
2543
|
+
}, ...(ngDevMode ? [{ debugName: "showCloseButton" }] : []));
|
|
2533
2544
|
commonButtonConfig = computed(() => {
|
|
2534
2545
|
const config = this.config();
|
|
2535
2546
|
if (config === undefined) {
|
|
@@ -2543,7 +2554,7 @@ class ResourceViewComponent {
|
|
|
2543
2554
|
resourceData: this.relatedData(),
|
|
2544
2555
|
config,
|
|
2545
2556
|
};
|
|
2546
|
-
},
|
|
2557
|
+
}, ...(ngDevMode ? [{ debugName: "commonButtonConfig" }] : []));
|
|
2547
2558
|
editButtonContext = computed(() => {
|
|
2548
2559
|
const commonConfig = this.commonButtonConfig();
|
|
2549
2560
|
if (commonConfig === undefined) {
|
|
@@ -2555,7 +2566,7 @@ class ResourceViewComponent {
|
|
|
2555
2566
|
resourceData: commonConfig.resourceData,
|
|
2556
2567
|
shouldRender: commonConfig.config.shouldRenderActions.edit,
|
|
2557
2568
|
};
|
|
2558
|
-
},
|
|
2569
|
+
}, ...(ngDevMode ? [{ debugName: "editButtonContext" }] : []));
|
|
2559
2570
|
deleteButtonContext = computed(() => {
|
|
2560
2571
|
const commonConfig = this.commonButtonConfig();
|
|
2561
2572
|
if (commonConfig === undefined) {
|
|
@@ -2567,7 +2578,7 @@ class ResourceViewComponent {
|
|
|
2567
2578
|
resourceData: commonConfig.resourceData,
|
|
2568
2579
|
shouldRender: (data) => commonConfig.config.shouldRenderActions.delete(data),
|
|
2569
2580
|
};
|
|
2570
|
-
},
|
|
2581
|
+
}, ...(ngDevMode ? [{ debugName: "deleteButtonContext" }] : []));
|
|
2571
2582
|
inlineRpcConfigs = computed(() => {
|
|
2572
2583
|
const config = this.config();
|
|
2573
2584
|
if (config === undefined) {
|
|
@@ -2584,7 +2595,7 @@ class ResourceViewComponent {
|
|
|
2584
2595
|
},
|
|
2585
2596
|
};
|
|
2586
2597
|
});
|
|
2587
|
-
},
|
|
2598
|
+
}, ...(ngDevMode ? [{ debugName: "inlineRpcConfigs" }] : []));
|
|
2588
2599
|
endRpcConfigs = computed(() => {
|
|
2589
2600
|
const config = this.config();
|
|
2590
2601
|
if (config === undefined) {
|
|
@@ -2601,7 +2612,7 @@ class ResourceViewComponent {
|
|
|
2601
2612
|
},
|
|
2602
2613
|
};
|
|
2603
2614
|
});
|
|
2604
|
-
},
|
|
2615
|
+
}, ...(ngDevMode ? [{ debugName: "endRpcConfigs" }] : []));
|
|
2605
2616
|
useExpansionPanel = computed(() => {
|
|
2606
2617
|
const config = this.config();
|
|
2607
2618
|
// TODO: Investigate why we're doing this check, it's weird because viewType is not part of the input configs
|
|
@@ -2609,12 +2620,12 @@ class ResourceViewComponent {
|
|
|
2609
2620
|
return false;
|
|
2610
2621
|
}
|
|
2611
2622
|
return config.collapsible || !this.compoundResourceView();
|
|
2612
|
-
},
|
|
2623
|
+
}, ...(ngDevMode ? [{ debugName: "useExpansionPanel" }] : []));
|
|
2613
2624
|
resourceConfigRouteSnapshot = computed(() => {
|
|
2614
2625
|
return (this.config() ||
|
|
2615
2626
|
this.activatedRoute.snapshot.data['config']?.parentConfig ||
|
|
2616
2627
|
{});
|
|
2617
|
-
},
|
|
2628
|
+
}, ...(ngDevMode ? [{ debugName: "resourceConfigRouteSnapshot" }] : []));
|
|
2618
2629
|
emptyFormGroup = new FormGroup({});
|
|
2619
2630
|
form = computed(() => {
|
|
2620
2631
|
const meta = this.store.resourceMeta();
|
|
@@ -2653,14 +2664,14 @@ class ResourceViewComponent {
|
|
|
2653
2664
|
}
|
|
2654
2665
|
this.pristineFormValues = pristineValues;
|
|
2655
2666
|
return fg;
|
|
2656
|
-
},
|
|
2667
|
+
}, ...(ngDevMode ? [{ debugName: "form" }] : []));
|
|
2657
2668
|
pristineFormValues = {};
|
|
2658
2669
|
route = computed(() => {
|
|
2659
2670
|
const meta = this.store.resourceMeta();
|
|
2660
2671
|
if (!meta)
|
|
2661
2672
|
return '';
|
|
2662
2673
|
return meta.consolidatedRoute || meta.route;
|
|
2663
|
-
},
|
|
2674
|
+
}, ...(ngDevMode ? [{ debugName: "route" }] : []));
|
|
2664
2675
|
primaryKeys = computed(() => {
|
|
2665
2676
|
const meta = this.store.resourceMeta();
|
|
2666
2677
|
if (!meta)
|
|
@@ -2668,7 +2679,7 @@ class ResourceViewComponent {
|
|
|
2668
2679
|
return meta.fields
|
|
2669
2680
|
.filter((field) => field.primaryKey)
|
|
2670
2681
|
.sort((a, b) => a.primaryKey.ordinalPosition - b.primaryKey.ordinalPosition);
|
|
2671
|
-
},
|
|
2682
|
+
}, ...(ngDevMode ? [{ debugName: "primaryKeys" }] : []));
|
|
2672
2683
|
primaryKeyPath = computed(() => {
|
|
2673
2684
|
const meta = this.store.resourceMeta();
|
|
2674
2685
|
const isConsolidated = !!meta.consolidatedRoute;
|
|
@@ -2681,7 +2692,7 @@ class ResourceViewComponent {
|
|
|
2681
2692
|
this.primaryKeys()
|
|
2682
2693
|
.map((field) => this.store.viewData()[field.fieldName])
|
|
2683
2694
|
.join('/'));
|
|
2684
|
-
},
|
|
2695
|
+
}, ...(ngDevMode ? [{ debugName: "primaryKeyPath" }] : []));
|
|
2685
2696
|
ngOnInit() {
|
|
2686
2697
|
if (this.resourceMeta(this.config().primaryResource)) {
|
|
2687
2698
|
this.store.resourceName.set(this.config().primaryResource);
|
|
@@ -2819,10 +2830,10 @@ class ResourceViewComponent {
|
|
|
2819
2830
|
this.showCreateForm.set(false);
|
|
2820
2831
|
this.store.buildStoreViewData();
|
|
2821
2832
|
}
|
|
2822
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2823
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: ResourceViewComponent, isStandalone: true, selector: "ccc-resource-view", inputs: { uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, relatedData: { classPropertyName: "relatedData", publicName: "relatedData", isSignal: true, isRequired: false, transformFunction: null }, compoundResourceView: { classPropertyName: "compoundResourceView", publicName: "compoundResourceView", isSignal: true, isRequired: false, transformFunction: null }, navAfterDelete: { classPropertyName: "navAfterDelete", publicName: "navAfterDelete", isSignal: true, isRequired: false, transformFunction: null }, showCreateForm: { classPropertyName: "showCreateForm", publicName: "showCreateForm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleted: "deleted", showCreateForm: "showCreateFormChange" }, providers: [ResourceStore], ngImport: i0, template: "@if (useExpansionPanel()) {\n <div class=\"resource-view\">\n <mat-expansion-panel [@.disabled]=\"true\" [disabled]=\"!config().collapsible\" [expanded]=\"!config().collapsible\">\n @if (config().title) {\n <mat-expansion-panel-header>\n <mat-panel-title>\n <h1 class=\"title\">{{ showCreateForm() ? 'Create' : '' }}{{ config().title }}</h1>\n </mat-panel-title>\n </mat-expansion-panel-header>\n } @else {\n <div class=\"no-title-exp-panel-padding\"></div>\n }\n <ng-container *ngTemplateOutlet=\"headerSlot\"></ng-container>\n @if (store.viewStatus() === 'resolved') {\n <div class=\"resource-container\" [class.form-edit-mode]=\"editMode() === 'edit'\">\n <form [formGroup]=\"form()\">\n <div class=\"resource row\">\n @if (showCreateForm()) {\n <ccc-resource-create\n [resourceConfig]=\"createConfig()\"\n [parentData]=\"relatedData()\"\n (complete)=\"createResource()\">\n </ccc-resource-create>\n } @else {\n <ng-container *ngTemplateOutlet=\"formSlot\"></ng-container>\n }\n </div>\n </form>\n <ng-container *ngTemplateOutlet=\"footerSlot\"></ng-container>\n </div>\n } @else {\n <div class=\"resource-container empty\">\n <div class=\"resource row\"></div>\n </div>\n }\n </mat-expansion-panel>\n </div>\n} @else {\n <div class=\"page-container\">\n @if (!showCreateForm()) {\n <ng-container *ngTemplateOutlet=\"headerSlot\"></ng-container>\n }\n @if (store.viewStatus() === 'resolved') {\n <div class=\"resource-container base-container-bg\" [class.form-edit-mode]=\"editMode() === 'edit'\">\n <form [formGroup]=\"form()\">\n <div class=\"resource row\">\n @if (showCreateForm()) {\n <ccc-resource-create\n [resourceConfig]=\"createConfig()\"\n [parentData]=\"relatedData()\"\n (complete)=\"createResource()\">\n </ccc-resource-create>\n } @else {\n <ng-container *ngTemplateOutlet=\"formSlot\"></ng-container>\n }\n </div>\n </form>\n </div>\n } @else {\n <div class=\"resource-container\">\n <div class=\"resource row empty\"></div>\n </div>\n }\n <ng-container *ngTemplateOutlet=\"footerSlot\"></ng-container>\n </div>\n}\n\n<ng-template #formSlot>\n @for (element of config().elements; track element) {\n @if (element.type === 'section' || element.type === 'computedDisplayField' || element.type === 'padding') {\n <ccc-resource-layout-template\n [element]=\"element\"\n [meta]=\"store.resourceMeta()\"\n [fieldClass]=\"config().fieldClass\"\n [editMode]=\"editMode()\"\n [relatedData]=\"relatedData()\"\n [form]=\"form()\">\n </ccc-resource-layout-template>\n } @else {\n <ccc-resource-layout-template\n [element]=\"element\"\n [meta]=\"store.resourceMeta()\"\n [fieldClass]=\"config().fieldClass\"\n [pristineValue]=\"pristineFormValues[element.name]\"\n [editMode]=\"editMode()\"\n [relatedData]=\"relatedData()\"\n [form]=\"form()\">\n </ccc-resource-layout-template>\n }\n }\n</ng-template>\n\n<ng-template #headerSlot>\n <div class=\"header-container\">\n <div class=\"state-buttons\">\n @if (store.viewStatus() === 'resolved') {\n @for (rpc of inlineRpcConfigs(); track rpc.context) {\n <action-access-control-wrapper [actionContext]=\"rpc.context\">\n <ccc-rpc-button\n [rpcConfig]=\"rpc.config\"\n [relatedData]=\"relatedData()\"\n [primaryResource]=\"config().primaryResource\">\n </ccc-rpc-button>\n </action-access-control-wrapper>\n }\n @if (editMode() === 'view') {\n <action-access-control-wrapper [actionContext]=\"editButtonContext()\">\n <div class=\"edit-button\">\n <button mat-raised-button color=\"accent\" (click)=\"setEditMode('edit')\">\n <div class=\"button-text\">\n <mat-icon>edit</mat-icon>\n <span class=\"mode-text\"> Edit </span>\n </div>\n </button>\n </div>\n </action-access-control-wrapper>\n\n <action-access-control-wrapper [actionContext]=\"deleteButtonContext()\">\n <button mat-raised-button color=\"primary\" (click)=\"confirmDeleteResource()\">Delete</button>\n </action-access-control-wrapper>\n }\n\n @if (editMode() === 'edit') {\n @if (form().dirty) {\n <div class=\"unsaved message\">You have unsaved changes!</div>\n }\n @if (!form().valid && displayFormInvalidMessage()) {\n <div class=\"invalid message\">Please complete or fix required fields.</div>\n }\n <button mat-raised-button color=\"primary\" (click)=\"resetForm()\">Cancel</button>\n <button mat-raised-button color=\"accent\" (click)=\"saveForm()\" [disabled]=\"form().pristine\">Save</button>\n }\n\n @if (showCloseButton()) {\n <div class=\"close-button\">\n <button mat-icon-button color=\"warn\" (click)=\"location.back()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n }\n }\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerSlot>\n @for (rpc of endRpcConfigs(); track rpc) {\n <action-access-control-wrapper [actionContext]=\"rpc.context\">\n <ccc-rpc-button\n [rpcConfig]=\"rpc.config\"\n [relatedData]=\"relatedData()\"\n [primaryResource]=\"config().primaryResource\">\n </ccc-rpc-button>\n </action-access-control-wrapper>\n }\n</ng-template>\n", styles: [".container{border:1px solid #8e8e8e;border-radius:5px;position:relative;margin-bottom:20px;padding-top:10px}.label{position:absolute;top:-15px;left:20px;height:20px;background-color:#fff;margin:0 10px;padding:0 10px;text-align:center;z-index:10;font-weight:500;font:18px Roboto,sans-serif}.padding{width:100px}.page-container{position:relative}.header-container{display:flex;flex-direction:row;top:0;z-index:11;background:transparent}.title{display:flex;align-items:center;flex-shrink:0}.message{margin-top:auto;margin-bottom:auto}.state-buttons{display:flex;flex-direction:row;margin-top:auto;margin-bottom:auto;justify-content:right;flex-grow:1;gap:20px;margin-right:20px;min-height:36px}.action-button,.mode-text{margin-top:auto;margin-bottom:auto}.resource{margin:10px}.section h2{font-size:1.5em;border-bottom:2px solid #ccc;padding-bottom:8px;margin-bottom:100px}.section{margin-top:15px}.divider{margin:16px 0}.section-elements{display:flex;flex-wrap:wrap}.mat-input-element:disabled[readonly]{color:currentColor}.unsaved{color:#f44336}.edit-button{margin-top:auto;margin-bottom:auto;padding-left:10px}.button-text{display:flex;flex-direction:row;align-items:center}.button-text .edit{color:#003b49}.button-text .mat-icon{margin-right:8px}.shaded{background-color:#e9e9e9}.rounded{border-radius:8px}.dotted-outline{border:1px dotted #ccc;padding:8px}.margin-top{margin-top:50px}.resource-view{display:flex;flex-direction:column;min-height:36px;padding:10px 0 0}.no-title-exp-panel-padding{padding:10px}.base-container-bg{background-color:var(--app-background-color)}\n"], dependencies: [{ 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],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.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: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: ResourceLayoutComponent, selector: "ccc-resource-layout-template", inputs: ["element", "meta", "fieldClass", "editMode", "form", "formDataState", "pristineValue", "relatedData", "parentClass", "layoutNestingDepth"], outputs: ["formDataStateChange"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: RpcButtonComponent, selector: "ccc-rpc-button", inputs: ["relatedData", "rpcConfig", "primaryResource", "dependentResources"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionAccessControlWrapperComponent, selector: "action-access-control-wrapper", inputs: ["actionContext"] }, { kind: "component", type: ResourceCreateComponent, selector: "ccc-resource-create", inputs: ["resourceConfig", "parentData", "loadCreatedResource"], outputs: ["complete"] }] });
|
|
2833
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2834
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ResourceViewComponent, isStandalone: true, selector: "ccc-resource-view", inputs: { uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, relatedData: { classPropertyName: "relatedData", publicName: "relatedData", isSignal: true, isRequired: false, transformFunction: null }, compoundResourceView: { classPropertyName: "compoundResourceView", publicName: "compoundResourceView", isSignal: true, isRequired: false, transformFunction: null }, navAfterDelete: { classPropertyName: "navAfterDelete", publicName: "navAfterDelete", isSignal: true, isRequired: false, transformFunction: null }, showCreateForm: { classPropertyName: "showCreateForm", publicName: "showCreateForm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleted: "deleted", showCreateForm: "showCreateFormChange" }, providers: [ResourceStore], ngImport: i0, template: "@if (useExpansionPanel()) {\n <div class=\"resource-view\">\n <mat-expansion-panel [@.disabled]=\"true\" [disabled]=\"!config().collapsible\" [expanded]=\"!config().collapsible\">\n @if (config().title) {\n <mat-expansion-panel-header>\n <mat-panel-title>\n <h1 class=\"title\">{{ showCreateForm() ? 'Create' : '' }}{{ config().title }}</h1>\n </mat-panel-title>\n </mat-expansion-panel-header>\n } @else {\n <div class=\"no-title-exp-panel-padding\"></div>\n }\n <ng-container *ngTemplateOutlet=\"headerSlot\"></ng-container>\n @if (store.viewStatus() === 'resolved') {\n <div class=\"resource-container\" [class.form-edit-mode]=\"editMode() === 'edit'\">\n <form [formGroup]=\"form()\">\n <div class=\"resource row\">\n @if (showCreateForm()) {\n <ccc-resource-create\n [resourceConfig]=\"createConfig()\"\n [parentData]=\"relatedData()\"\n (complete)=\"createResource()\">\n </ccc-resource-create>\n } @else {\n <ng-container *ngTemplateOutlet=\"formSlot\"></ng-container>\n }\n </div>\n </form>\n <ng-container *ngTemplateOutlet=\"footerSlot\"></ng-container>\n </div>\n } @else {\n <div class=\"resource-container empty\">\n <div class=\"resource row\"></div>\n </div>\n }\n </mat-expansion-panel>\n </div>\n} @else {\n <div class=\"page-container\">\n @if (!showCreateForm()) {\n <ng-container *ngTemplateOutlet=\"headerSlot\"></ng-container>\n }\n @if (store.viewStatus() === 'resolved') {\n <div class=\"resource-container base-container-bg\" [class.form-edit-mode]=\"editMode() === 'edit'\">\n <form [formGroup]=\"form()\">\n <div class=\"resource row\">\n @if (showCreateForm()) {\n <ccc-resource-create\n [resourceConfig]=\"createConfig()\"\n [parentData]=\"relatedData()\"\n (complete)=\"createResource()\">\n </ccc-resource-create>\n } @else {\n <ng-container *ngTemplateOutlet=\"formSlot\"></ng-container>\n }\n </div>\n </form>\n </div>\n } @else {\n <div class=\"resource-container\">\n <div class=\"resource row empty\"></div>\n </div>\n }\n <ng-container *ngTemplateOutlet=\"footerSlot\"></ng-container>\n </div>\n}\n\n<ng-template #formSlot>\n @for (element of config().elements; track element) {\n @if (element.type === 'section' || element.type === 'computedDisplayField' || element.type === 'padding') {\n <ccc-resource-layout-template\n [element]=\"element\"\n [meta]=\"store.resourceMeta()\"\n [fieldClass]=\"config().fieldClass\"\n [editMode]=\"editMode()\"\n [relatedData]=\"relatedData()\"\n [form]=\"form()\">\n </ccc-resource-layout-template>\n } @else {\n <ccc-resource-layout-template\n [element]=\"element\"\n [meta]=\"store.resourceMeta()\"\n [fieldClass]=\"config().fieldClass\"\n [pristineValue]=\"pristineFormValues[element.name]\"\n [editMode]=\"editMode()\"\n [relatedData]=\"relatedData()\"\n [form]=\"form()\">\n </ccc-resource-layout-template>\n }\n }\n</ng-template>\n\n<ng-template #headerSlot>\n <div class=\"header-container\">\n <div class=\"state-buttons\">\n @if (store.viewStatus() === 'resolved') {\n @for (rpc of inlineRpcConfigs(); track rpc.context) {\n <action-access-control-wrapper [actionContext]=\"rpc.context\">\n <ccc-rpc-button\n [rpcConfig]=\"rpc.config\"\n [relatedData]=\"relatedData()\"\n [primaryResource]=\"config().primaryResource\">\n </ccc-rpc-button>\n </action-access-control-wrapper>\n }\n @if (editMode() === 'view') {\n <action-access-control-wrapper [actionContext]=\"editButtonContext()\">\n <div class=\"edit-button\">\n <button mat-raised-button color=\"accent\" (click)=\"setEditMode('edit')\">\n <div class=\"button-text\">\n <mat-icon>edit</mat-icon>\n <span class=\"mode-text\"> Edit </span>\n </div>\n </button>\n </div>\n </action-access-control-wrapper>\n\n <action-access-control-wrapper [actionContext]=\"deleteButtonContext()\">\n <button mat-raised-button color=\"primary\" (click)=\"confirmDeleteResource()\">Delete</button>\n </action-access-control-wrapper>\n }\n\n @if (editMode() === 'edit') {\n @if (form().dirty) {\n <div class=\"unsaved message\">You have unsaved changes!</div>\n }\n @if (!form().valid && displayFormInvalidMessage()) {\n <div class=\"invalid message\">Please complete or fix required fields.</div>\n }\n <button mat-raised-button color=\"primary\" (click)=\"resetForm()\">Cancel</button>\n <button mat-raised-button color=\"accent\" (click)=\"saveForm()\" [disabled]=\"form().pristine\">Save</button>\n }\n\n @if (showCloseButton()) {\n <div class=\"close-button\">\n <button mat-icon-button color=\"warn\" (click)=\"location.back()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n }\n }\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerSlot>\n @for (rpc of endRpcConfigs(); track rpc) {\n <action-access-control-wrapper [actionContext]=\"rpc.context\">\n <ccc-rpc-button\n [rpcConfig]=\"rpc.config\"\n [relatedData]=\"relatedData()\"\n [primaryResource]=\"config().primaryResource\">\n </ccc-rpc-button>\n </action-access-control-wrapper>\n }\n</ng-template>\n", styles: [".container{border:1px solid #8e8e8e;border-radius:5px;position:relative;margin-bottom:20px;padding-top:10px}.label{position:absolute;top:-15px;left:20px;height:20px;background-color:#fff;margin:0 10px;padding:0 10px;text-align:center;z-index:10;font-weight:500;font:18px Roboto,sans-serif}.padding{width:100px}.page-container{position:relative}.header-container{display:flex;flex-direction:row;top:0;z-index:11;background:transparent}.title{display:flex;align-items:center;flex-shrink:0}.message{margin-top:auto;margin-bottom:auto}.state-buttons{display:flex;flex-direction:row;margin-top:auto;margin-bottom:auto;justify-content:right;flex-grow:1;gap:20px;margin-right:20px;min-height:36px}.action-button,.mode-text{margin-top:auto;margin-bottom:auto}.resource{margin:10px}.section h2{font-size:1.5em;border-bottom:2px solid #ccc;padding-bottom:8px;margin-bottom:100px}.section{margin-top:15px}.divider{margin:16px 0}.section-elements{display:flex;flex-wrap:wrap}.mat-input-element:disabled[readonly]{color:currentColor}.unsaved{color:#f44336}.edit-button{margin-top:auto;margin-bottom:auto;padding-left:10px}.button-text{display:flex;flex-direction:row;align-items:center}.button-text .edit{color:#003b49}.button-text .mat-icon{margin-right:8px}.shaded{background-color:#e9e9e9}.rounded{border-radius:8px}.dotted-outline{border:1px dotted #ccc;padding:8px}.margin-top{margin-top:50px}.resource-view{display:flex;flex-direction:column;min-height:36px;padding:10px 0 0}.no-title-exp-panel-padding{padding:10px}.base-container-bg{background-color:var(--app-background-color)}\n"], dependencies: [{ 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],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.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: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: ResourceLayoutComponent, selector: "ccc-resource-layout-template", inputs: ["element", "meta", "fieldClass", "editMode", "form", "formDataState", "pristineValue", "relatedData", "parentClass", "layoutNestingDepth"], outputs: ["formDataStateChange"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: RpcButtonComponent, selector: "ccc-rpc-button", inputs: ["relatedData", "rpcConfig", "primaryResource", "dependentResources"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionAccessControlWrapperComponent, selector: "action-access-control-wrapper", inputs: ["actionContext"] }, { kind: "component", type: ResourceCreateComponent, selector: "ccc-resource-create", inputs: ["resourceConfig", "parentData", "loadCreatedResource"], outputs: ["complete"] }] });
|
|
2824
2835
|
}
|
|
2825
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2836
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceViewComponent, decorators: [{
|
|
2826
2837
|
type: Component,
|
|
2827
2838
|
args: [{ selector: 'ccc-resource-view', imports: [
|
|
2828
2839
|
FormsModule,
|
|
@@ -2852,26 +2863,26 @@ class CompoundResourceComponent {
|
|
|
2852
2863
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
2853
2864
|
componentRef = CompoundResourceComponent;
|
|
2854
2865
|
resourceMeta = inject(RESOURCE_META);
|
|
2855
|
-
resourceConfig = input(
|
|
2856
|
-
isArrayChild = input(false,
|
|
2857
|
-
uuid = input.required(
|
|
2858
|
-
parentData = input(
|
|
2859
|
-
rootConfig = computed(() => this.route.snapshot.data['config'],
|
|
2860
|
-
emptyOneToOne = signal(false,
|
|
2861
|
-
missingRoot = input(false,
|
|
2866
|
+
resourceConfig = input(...(ngDevMode ? [undefined, { debugName: "resourceConfig" }] : []));
|
|
2867
|
+
isArrayChild = input(false, ...(ngDevMode ? [{ debugName: "isArrayChild" }] : []));
|
|
2868
|
+
uuid = input.required(...(ngDevMode ? [{ debugName: "uuid" }] : []));
|
|
2869
|
+
parentData = input(...(ngDevMode ? [undefined, { debugName: "parentData" }] : []));
|
|
2870
|
+
rootConfig = computed(() => this.route.snapshot.data['config'], ...(ngDevMode ? [{ debugName: "rootConfig" }] : []));
|
|
2871
|
+
emptyOneToOne = signal(false, ...(ngDevMode ? [{ debugName: "emptyOneToOne" }] : []));
|
|
2872
|
+
missingRoot = input(false, ...(ngDevMode ? [{ debugName: "missingRoot" }] : []));
|
|
2862
2873
|
resourceCreate = output();
|
|
2863
2874
|
deleted = output();
|
|
2864
|
-
navAfterDelete = input(true,
|
|
2875
|
+
navAfterDelete = input(true, ...(ngDevMode ? [{ debugName: "navAfterDelete" }] : []));
|
|
2865
2876
|
navAfterDeleteConsideringRoot = computed(() => {
|
|
2866
2877
|
const navAfterDeleteInput = this.navAfterDelete();
|
|
2867
2878
|
if (navAfterDeleteInput === undefined)
|
|
2868
2879
|
return true;
|
|
2869
2880
|
return false;
|
|
2870
|
-
},
|
|
2881
|
+
}, ...(ngDevMode ? [{ debugName: "navAfterDeleteConsideringRoot" }] : []));
|
|
2871
2882
|
hasElements = computed(() => {
|
|
2872
2883
|
const config = this.primaryConfig();
|
|
2873
2884
|
return config && (config.type === 'ListView' || config.type === 'View') && config.elements.length > 0;
|
|
2874
|
-
},
|
|
2885
|
+
}, ...(ngDevMode ? [{ debugName: "hasElements" }] : []));
|
|
2875
2886
|
primaryConfigParentId = computed(() => {
|
|
2876
2887
|
const config = this.primaryConfig();
|
|
2877
2888
|
const data = this.resolvedData();
|
|
@@ -2882,14 +2893,14 @@ class CompoundResourceComponent {
|
|
|
2882
2893
|
}
|
|
2883
2894
|
}
|
|
2884
2895
|
return this.uuid();
|
|
2885
|
-
},
|
|
2896
|
+
}, ...(ngDevMode ? [{ debugName: "primaryConfigParentId" }] : []));
|
|
2886
2897
|
primaryConfig = computed(() => {
|
|
2887
2898
|
const config = this.resourceConfig();
|
|
2888
2899
|
if (config) {
|
|
2889
2900
|
return config;
|
|
2890
2901
|
}
|
|
2891
2902
|
return this.rootConfig().parentConfig;
|
|
2892
|
-
},
|
|
2903
|
+
}, ...(ngDevMode ? [{ debugName: "primaryConfig" }] : []));
|
|
2893
2904
|
title = computed(() => {
|
|
2894
2905
|
if (this.isArrayChild()) {
|
|
2895
2906
|
return '';
|
|
@@ -2899,10 +2910,10 @@ class CompoundResourceComponent {
|
|
|
2899
2910
|
return config.title;
|
|
2900
2911
|
}
|
|
2901
2912
|
return '';
|
|
2902
|
-
},
|
|
2913
|
+
}, ...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
2903
2914
|
isRootConfig = computed(() => {
|
|
2904
2915
|
return this.resourceConfig() === undefined;
|
|
2905
|
-
},
|
|
2916
|
+
}, ...(ngDevMode ? [{ debugName: "isRootConfig" }] : []));
|
|
2906
2917
|
configs = computed(() => {
|
|
2907
2918
|
if (this.hasElements() && this.emptyOneToOne()) {
|
|
2908
2919
|
return [];
|
|
@@ -2915,7 +2926,7 @@ class CompoundResourceComponent {
|
|
|
2915
2926
|
return config.relatedConfigs;
|
|
2916
2927
|
}
|
|
2917
2928
|
return [];
|
|
2918
|
-
},
|
|
2929
|
+
}, ...(ngDevMode ? [{ debugName: "configs" }] : []));
|
|
2919
2930
|
rpcConfigs = computed(() => {
|
|
2920
2931
|
const isRootConfig = this.isRootConfig();
|
|
2921
2932
|
const rootConfig = this.rootConfig();
|
|
@@ -2933,14 +2944,14 @@ class CompoundResourceComponent {
|
|
|
2933
2944
|
resourceData: this.resolvedData(),
|
|
2934
2945
|
},
|
|
2935
2946
|
}));
|
|
2936
|
-
},
|
|
2937
|
-
hasRpcConfigs = computed(() => !!this.rpcConfigs() && this.rpcConfigs().length > 0,
|
|
2947
|
+
}, ...(ngDevMode ? [{ debugName: "rpcConfigs" }] : []));
|
|
2948
|
+
hasRpcConfigs = computed(() => !!this.rpcConfigs() && this.rpcConfigs().length > 0, ...(ngDevMode ? [{ debugName: "hasRpcConfigs" }] : []));
|
|
2938
2949
|
resolvedData = computed(() => {
|
|
2939
2950
|
if (Object.keys(this.store.viewData()).length > 0) {
|
|
2940
2951
|
return this.store.viewData();
|
|
2941
2952
|
}
|
|
2942
2953
|
return this.parentData() || {};
|
|
2943
|
-
},
|
|
2954
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedData" }] : []));
|
|
2944
2955
|
ngOnInit() {
|
|
2945
2956
|
const resource = this.primaryConfig().primaryResource;
|
|
2946
2957
|
const meta = this.resourceMeta(resource);
|
|
@@ -2968,10 +2979,10 @@ class CompoundResourceComponent {
|
|
|
2968
2979
|
goBack() {
|
|
2969
2980
|
this.location.back();
|
|
2970
2981
|
}
|
|
2971
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2972
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
2982
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CompoundResourceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2983
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: CompoundResourceComponent, isStandalone: true, selector: "compound-resource", inputs: { resourceConfig: { classPropertyName: "resourceConfig", publicName: "resourceConfig", isSignal: true, isRequired: false, transformFunction: null }, isArrayChild: { classPropertyName: "isArrayChild", publicName: "isArrayChild", isSignal: true, isRequired: false, transformFunction: null }, uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: true, isRequired: true, transformFunction: null }, parentData: { classPropertyName: "parentData", publicName: "parentData", isSignal: true, isRequired: false, transformFunction: null }, missingRoot: { classPropertyName: "missingRoot", publicName: "missingRoot", isSignal: true, isRequired: false, transformFunction: null }, navAfterDelete: { classPropertyName: "navAfterDelete", publicName: "navAfterDelete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resourceCreate: "resourceCreate", deleted: "deleted" }, providers: [ResourceStore], ngImport: i0, template: "<div class=\"page-container\">\n <div class=\"header-container\">\n <div class=\"title\" [class.title-without-back]=\"title()\">\n @if (title() !== '') {\n <h1>{{ title() }}</h1>\n }\n </div>\n </div>\n\n @if (hasElements() || configs().length > 0) {\n <div class=\"resource-container\" [class.empty-elements]=\"!hasElements()\">\n @let primaryConfigRef = primaryConfig();\n @if (primaryConfigRef.type === 'View' || primaryConfigRef.type === 'ListView') {\n <ccc-resource-view\n [uuid]=\"uuid()\"\n [config]=\"primaryConfigRef\"\n [relatedData]=\"resolvedData()\"\n [showCreateForm]=\"missingRoot()\"\n [compoundResourceView]=\"true\"\n [navAfterDelete]=\"navAfterDeleteConsideringRoot()\"\n (createChange)=\"resourceCreate.emit()\"\n (deleted)=\"deleted.emit(true)\">\n </ccc-resource-view>\n }\n\n @for (config of configs(); track config) {\n @let hasrelatedConfigs = 'relatedConfigs' in config && config.relatedConfigs.length > 0;\n @if (hasrelatedConfigs) {\n <compound-resource [uuid]=\"primaryConfigParentId()\" [parentData]=\"resolvedData()\" [resourceConfig]=\"config\">\n </compound-resource>\n } @else if (config.type === 'ListView') {\n <ccc-resource-list-create\n [resourceConfig]=\"config\"\n [parentData]=\"resolvedData()\"\n [isRootList]=\"false\"\n [parentId]=\"primaryConfigParentId()\"\n [compoundResourceComponent]=\"componentRef\">\n </ccc-resource-list-create>\n } @else if (config.type === 'Array') {\n <ccc-resource-array-view\n [resourceConfig]=\"config\"\n [parentData]=\"store.viewData()\"\n [compoundResourceComponent]=\"componentRef\">\n </ccc-resource-array-view>\n } @else if (config.type === 'View') {\n @let relatedId = resolvedData()[config.parentRelation.parentKey] || primaryConfigParentId();\n @if (relatedId) {\n <ccc-resource-view\n [navAfterDelete]=\"navAfterDeleteConsideringRoot()\"\n [uuid]=\"relatedId + ''\"\n [config]=\"config\"\n [relatedData]=\"resolvedData()\"></ccc-resource-view>\n }\n } @else if (config.type === 'Component') {\n <ccc-resource-resolver\n [parentData]=\"resolvedData()\"\n [resourceConfig]=\"config\"\n [compoundResourceComponent]=\"componentRef\">\n </ccc-resource-resolver>\n }\n }\n @if (hasRpcConfigs()) {\n <div class=\"rpc-buttons-container\">\n @for (rpc of rpcConfigs(); track rpc.config.label) {\n <action-access-control-wrapper [actionContext]=\"rpc.context\">\n <ccc-rpc-button\n [rpcConfig]=\"rpc.config\"\n [relatedData]=\"resolvedData()\"\n [primaryResource]=\"primaryConfig().primaryResource\">\n </ccc-rpc-button>\n </action-access-control-wrapper>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".page-container{position:relative}.header-container{display:flex;flex-direction:row;position:absolute;top:0;z-index:11;background:transparent}.title{display:flex;align-items:center;flex-shrink:0}.title-without-back{margin-left:48px;height:48px}.message{margin-top:auto;margin-bottom:auto}.state-buttons{display:flex;flex-direction:row;margin-bottom:auto;justify-content:right;flex-grow:1;gap:20px;margin-right:32px}.mode-text{margin-top:auto;margin-bottom:auto}.resource{margin:10px}.mat-input-element:disabled[readonly]{color:currentColor}.unsaved{color:#f44336}.edit-button{margin-top:auto;margin-bottom:auto;padding-left:10px}.button-text{display:flex;flex-direction:row;align-items:center}.button-text .edit{color:#003b49}.button-text .mat-icon{margin-right:8px}.empty-elements{padding-top:30px}.rpc-buttons-container{display:flex;flex-direction:row;justify-content:flex-end;padding-bottom:10px}\n"], dependencies: [{ kind: "component", type: CompoundResourceComponent, selector: "compound-resource", inputs: ["resourceConfig", "isArrayChild", "uuid", "parentData", "missingRoot", "navAfterDelete"], outputs: ["resourceCreate", "deleted"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: RpcButtonComponent, selector: "ccc-rpc-button", inputs: ["relatedData", "rpcConfig", "primaryResource", "dependentResources"] }, { kind: "component", type: ResourceViewComponent, selector: "ccc-resource-view", inputs: ["uuid", "config", "relatedData", "compoundResourceView", "navAfterDelete", "showCreateForm"], outputs: ["deleted", "showCreateFormChange"] }, { kind: "component", type: ResourceListCreateComponent, selector: "ccc-resource-list-create", inputs: ["compoundResourceComponent", "parentId", "parentData", "searchParams", "resourceConfig", "isRootList"] }, { kind: "component", type: ResourceArrayViewComponent, selector: "ccc-resource-array-view", inputs: ["resourceConfig", "parentData", "compoundResourceComponent"], outputs: ["emptyOneToOne"] }, { kind: "component", type: ResourceResolverComponent, selector: "ccc-resource-resolver", inputs: ["compoundResourceComponent", "resourceConfig", "parentData"] }, { kind: "component", type: ActionAccessControlWrapperComponent, selector: "action-access-control-wrapper", inputs: ["actionContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2973
2984
|
}
|
|
2974
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2985
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CompoundResourceComponent, decorators: [{
|
|
2975
2986
|
type: Component,
|
|
2976
2987
|
args: [{ selector: 'compound-resource', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
2977
2988
|
MatIconModule,
|