@3kles/kles-material-dynamicforms 21.2.2 → 21.4.0
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.
|
@@ -346,6 +346,7 @@ class KlesDynamicFieldDirective {
|
|
|
346
346
|
constructor(container, injector) {
|
|
347
347
|
this.container = container;
|
|
348
348
|
this.injector = injector;
|
|
349
|
+
this.context = null;
|
|
349
350
|
this.subComponents = [];
|
|
350
351
|
}
|
|
351
352
|
ngOnDestroy() {
|
|
@@ -361,6 +362,7 @@ class KlesDynamicFieldDirective {
|
|
|
361
362
|
const fieldChanged = !!changes['field'] && !changes['field'].isFirstChange();
|
|
362
363
|
const uiChanged = !!changes['ui'] && !changes['ui'].isFirstChange();
|
|
363
364
|
const siblingFieldsChanged = !!changes['siblingFields'] && !changes['siblingFields'].isFirstChange();
|
|
365
|
+
const contextChanged = !!changes['context'] && !changes['context'].isFirstChange();
|
|
364
366
|
if (groupChanged) {
|
|
365
367
|
this.group = changes['group'].currentValue;
|
|
366
368
|
}
|
|
@@ -373,7 +375,10 @@ class KlesDynamicFieldDirective {
|
|
|
373
375
|
if (siblingFieldsChanged) {
|
|
374
376
|
this.siblingFields = changes['siblingFields'].currentValue;
|
|
375
377
|
}
|
|
376
|
-
if (
|
|
378
|
+
if (contextChanged) {
|
|
379
|
+
this.context = changes['context'].currentValue;
|
|
380
|
+
}
|
|
381
|
+
if (groupChanged || fieldChanged || uiChanged || siblingFieldsChanged || contextChanged) {
|
|
377
382
|
this.buildComponent();
|
|
378
383
|
}
|
|
379
384
|
}
|
|
@@ -421,6 +426,14 @@ class KlesDynamicFieldDirective {
|
|
|
421
426
|
provide: GROUP_UI,
|
|
422
427
|
useValue: this.ui,
|
|
423
428
|
},
|
|
429
|
+
...(this.context
|
|
430
|
+
? [
|
|
431
|
+
{
|
|
432
|
+
provide: FIELD_CONTEXT,
|
|
433
|
+
useValue: this.context,
|
|
434
|
+
},
|
|
435
|
+
]
|
|
436
|
+
: []),
|
|
424
437
|
],
|
|
425
438
|
parent: this.injector,
|
|
426
439
|
};
|
|
@@ -475,7 +488,7 @@ class KlesDynamicFieldDirective {
|
|
|
475
488
|
return component;
|
|
476
489
|
}
|
|
477
490
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesDynamicFieldDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
478
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.19", type: KlesDynamicFieldDirective, isStandalone: true, selector: "[klesDynamicField]", inputs: { field: "field", group: "group", ui: "ui", siblingFields: "siblingFields" }, usesOnChanges: true, ngImport: i0 }); }
|
|
491
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.19", type: KlesDynamicFieldDirective, isStandalone: true, selector: "[klesDynamicField]", inputs: { field: "field", group: "group", ui: "ui", siblingFields: "siblingFields", context: "context" }, usesOnChanges: true, ngImport: i0 }); }
|
|
479
492
|
}
|
|
480
493
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesDynamicFieldDirective, decorators: [{
|
|
481
494
|
type: Directive,
|
|
@@ -491,6 +504,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
491
504
|
type: Input
|
|
492
505
|
}], siblingFields: [{
|
|
493
506
|
type: Input
|
|
507
|
+
}], context: [{
|
|
508
|
+
type: Input
|
|
494
509
|
}] } });
|
|
495
510
|
|
|
496
511
|
function flattenValidators(validations) {
|
|
@@ -641,13 +656,13 @@ class GroupUiState extends AbstractUiState {
|
|
|
641
656
|
|
|
642
657
|
const originFormControlNgOnChanges = FormControlDirective.prototype.ngOnChanges;
|
|
643
658
|
FormControlDirective.prototype.ngOnChanges = function () {
|
|
644
|
-
this.form.nativeElement = this.valueAccessor
|
|
659
|
+
this.form.nativeElement = this.valueAccessor?._elementRef?.nativeElement;
|
|
645
660
|
return originFormControlNgOnChanges.apply(this, arguments);
|
|
646
661
|
};
|
|
647
662
|
const originFormControlNameNgOnChanges = FormControlName.prototype.ngOnChanges;
|
|
648
663
|
FormControlName.prototype.ngOnChanges = function () {
|
|
649
664
|
const result = originFormControlNameNgOnChanges.apply(this, arguments);
|
|
650
|
-
this.control.nativeElement = this.valueAccessor
|
|
665
|
+
this.control.nativeElement = this.valueAccessor?._elementRef?.nativeElement;
|
|
651
666
|
return result;
|
|
652
667
|
};
|
|
653
668
|
class KlesDynamicFormComponent {
|
|
@@ -657,6 +672,7 @@ class KlesDynamicFormComponent {
|
|
|
657
672
|
constructor(fb, ref) {
|
|
658
673
|
this.fb = fb;
|
|
659
674
|
this.ref = ref;
|
|
675
|
+
this.context = null;
|
|
660
676
|
this.fields = [];
|
|
661
677
|
this.validators = [];
|
|
662
678
|
this.asyncValidators = [];
|
|
@@ -816,18 +832,18 @@ class KlesDynamicFormComponent {
|
|
|
816
832
|
return uiGroup;
|
|
817
833
|
}
|
|
818
834
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesDynamicFormComponent, deps: [{ token: i2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
819
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesDynamicFormComponent, isStandalone: true, selector: "app-kles-dynamic-form", inputs: { fields: "fields", validators: "validators", asyncValidators: "asyncValidators", direction: "direction", formClass: "formClass" }, outputs: { submit: "submit", _onLoaded: "_onLoaded" }, providers: [{ provide: ErrorStateMatcher, useClass: KlesFormErrorStateMatcher }], exportAs: ["klesDynamicForm"], usesOnChanges: true, ngImport: i0, template: `
|
|
835
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesDynamicFormComponent, isStandalone: true, selector: "app-kles-dynamic-form", inputs: { context: "context", fields: "fields", validators: "validators", asyncValidators: "asyncValidators", direction: "direction", formClass: "formClass" }, outputs: { submit: "submit", _onLoaded: "_onLoaded" }, providers: [{ provide: ErrorStateMatcher, useClass: KlesFormErrorStateMatcher }], exportAs: ["klesDynamicForm"], usesOnChanges: true, ngImport: i0, template: `
|
|
820
836
|
<form class="{{ orientationClass }}" [ngClass]="formClass" [formGroup]="form" (submit)="onSubmit($event)">
|
|
821
837
|
@for (field of fields; track field.name) {
|
|
822
838
|
@if (field.visible !== false) {
|
|
823
|
-
<ng-container klesDynamicField [field]="field" [group]="form" [ui]="ui" [siblingFields]="fields"> </ng-container>
|
|
839
|
+
<ng-container klesDynamicField [field]="field" [group]="form" [ui]="ui" [siblingFields]="fields" [context]="context"> </ng-container>
|
|
824
840
|
}
|
|
825
841
|
}
|
|
826
842
|
@if (form && form.errors) {
|
|
827
843
|
<mat-error matErrorForm [form]="form" [validations]="validators" [asyncValidations]="asyncValidators"></mat-error>
|
|
828
844
|
}
|
|
829
845
|
</form>
|
|
830
|
-
`, isInline: true, styles: [".dynamic-form-column{display:flex;flex-direction:column}\n", ".dynamic-form-column>*{width:100%}\n", ".dynamic-form-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline}\n", ".dynamic-form-row>*{width:100%}\n", ".dynamic-form-grid{display:grid}\n", ".dynamic-form-inline-grid{display:inline-grid}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatErrorFormDirective, selector: "[matErrorForm]", inputs: ["form", "validations", "asyncValidations"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }] }); }
|
|
846
|
+
`, isInline: true, styles: [".dynamic-form-column{display:flex;flex-direction:column}\n", ".dynamic-form-column>*{width:100%}\n", ".dynamic-form-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline}\n", ".dynamic-form-row>*{width:100%}\n", ".dynamic-form-grid{display:grid}\n", ".dynamic-form-inline-grid{display:inline-grid}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatErrorFormDirective, selector: "[matErrorForm]", inputs: ["form", "validations", "asyncValidations"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }] }); }
|
|
831
847
|
}
|
|
832
848
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesDynamicFormComponent, decorators: [{
|
|
833
849
|
type: Component,
|
|
@@ -835,7 +851,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
835
851
|
<form class="{{ orientationClass }}" [ngClass]="formClass" [formGroup]="form" (submit)="onSubmit($event)">
|
|
836
852
|
@for (field of fields; track field.name) {
|
|
837
853
|
@if (field.visible !== false) {
|
|
838
|
-
<ng-container klesDynamicField [field]="field" [group]="form" [ui]="ui" [siblingFields]="fields"> </ng-container>
|
|
854
|
+
<ng-container klesDynamicField [field]="field" [group]="form" [ui]="ui" [siblingFields]="fields" [context]="context"> </ng-container>
|
|
839
855
|
}
|
|
840
856
|
}
|
|
841
857
|
@if (form && form.errors) {
|
|
@@ -843,7 +859,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
843
859
|
}
|
|
844
860
|
</form>
|
|
845
861
|
`, providers: [{ provide: ErrorStateMatcher, useClass: KlesFormErrorStateMatcher }], imports: [CommonModule, MatErrorFormDirective, KlesDynamicFieldDirective, FormsModule, ReactiveFormsModule, MatError], styles: [".dynamic-form-column{display:flex;flex-direction:column}\n", ".dynamic-form-column>*{width:100%}\n", ".dynamic-form-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline}\n", ".dynamic-form-row>*{width:100%}\n", ".dynamic-form-grid{display:grid}\n", ".dynamic-form-inline-grid{display:inline-grid}\n"] }]
|
|
846
|
-
}], ctorParameters: () => [{ type: i2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: {
|
|
862
|
+
}], ctorParameters: () => [{ type: i2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { context: [{
|
|
863
|
+
type: Input
|
|
864
|
+
}], fields: [{
|
|
847
865
|
type: Input
|
|
848
866
|
}], validators: [{
|
|
849
867
|
type: Input
|
|
@@ -1151,25 +1169,38 @@ class KlesFieldAbstract {
|
|
|
1151
1169
|
this.ui = inject(GROUP_UI, { optional: true });
|
|
1152
1170
|
this.context = inject(FIELD_CONTEXT, { optional: true });
|
|
1153
1171
|
this.fieldUi = computed(() => this.ui?.get(this.field.name)?.value(), ...(ngDevMode ? [{ debugName: "fieldUi" }] : /* istanbul ignore next */ []));
|
|
1154
|
-
this.
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
this.
|
|
1168
|
-
this.
|
|
1169
|
-
this.
|
|
1170
|
-
this.
|
|
1171
|
-
this.
|
|
1172
|
-
this.
|
|
1172
|
+
this.resolvedFieldUi = computed(() => {
|
|
1173
|
+
const fieldUi = this.fieldUi() ?? {};
|
|
1174
|
+
const resolvedUi = this.field.resolveUi?.({
|
|
1175
|
+
context: this.context?.() ?? null,
|
|
1176
|
+
field: this.field,
|
|
1177
|
+
group: this.group,
|
|
1178
|
+
siblingFields: this.siblingFields,
|
|
1179
|
+
}) ?? {};
|
|
1180
|
+
return {
|
|
1181
|
+
...fieldUi,
|
|
1182
|
+
...resolvedUi,
|
|
1183
|
+
};
|
|
1184
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedFieldUi" }] : /* istanbul ignore next */ []));
|
|
1185
|
+
this.appearance = computed(() => this.resolvedFieldUi()?.appearance, ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
1186
|
+
this.inputType = computed(() => this.resolvedFieldUi()?.inputType, ...(ngDevMode ? [{ debugName: "inputType" }] : /* istanbul ignore next */ []));
|
|
1187
|
+
this.min = computed(() => this.resolvedFieldUi()?.min, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
|
|
1188
|
+
this.max = computed(() => this.resolvedFieldUi()?.max, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
|
|
1189
|
+
this.maxLength = computed(() => this.resolvedFieldUi()?.maxLength ?? 524288, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
|
|
1190
|
+
this.step = computed(() => this.resolvedFieldUi()?.step, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
|
|
1191
|
+
this.ngClass = computed(() => this.resolvedFieldUi()?.ngClass, ...(ngDevMode ? [{ debugName: "ngClass" }] : /* istanbul ignore next */ []));
|
|
1192
|
+
this.ngStyle = computed(() => this.resolvedFieldUi()?.ngStyle, ...(ngDevMode ? [{ debugName: "ngStyle" }] : /* istanbul ignore next */ []));
|
|
1193
|
+
this.indeterminate = computed(() => this.resolvedFieldUi()?.indeterminate ?? false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
|
|
1194
|
+
this.color = computed(() => this.resolvedFieldUi()?.color, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
1195
|
+
this.icon = computed(() => this.resolvedFieldUi()?.icon, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
1196
|
+
this.iconSvg = computed(() => this.resolvedFieldUi()?.iconSvg, ...(ngDevMode ? [{ debugName: "iconSvg" }] : /* istanbul ignore next */ []));
|
|
1197
|
+
this.buttonAppearance = computed(() => this.resolvedFieldUi()?.buttonAppearance, ...(ngDevMode ? [{ debugName: "buttonAppearance" }] : /* istanbul ignore next */ []));
|
|
1198
|
+
this.label = computed(() => this.resolvedFieldUi()?.label ?? this.field.label, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1199
|
+
this.hint = computed(() => this.resolvedFieldUi()?.hint ?? this.field.hint, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
1200
|
+
this.placeholder = computed(() => this.resolvedFieldUi()?.placeholder ?? this.field.placeholder, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1201
|
+
this.tooltip = computed(() => this.resolvedFieldUi()?.tooltip ?? this.field.tooltip, ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
|
|
1202
|
+
this.imageUrl = computed(() => this.resolvedFieldUi()?.imageUrl, ...(ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []));
|
|
1203
|
+
this.imageAlt = computed(() => this.resolvedFieldUi()?.imageAlt ?? this.label(), ...(ngDevMode ? [{ debugName: "imageAlt" }] : /* istanbul ignore next */ []));
|
|
1173
1204
|
this.viewRef = inject(ViewContainerRef);
|
|
1174
1205
|
this._onDestroy = new Subject();
|
|
1175
1206
|
if (this.field.directive) {
|
|
@@ -2244,7 +2275,7 @@ let KlesFormListFieldComponent = class KlesFormListFieldComponent extends KlesFi
|
|
|
2244
2275
|
@for (subGroup of formArray.controls; track subGroup.value._id; let idx = $index) {
|
|
2245
2276
|
<div class="subfields">
|
|
2246
2277
|
@for (subfield of collections[idx]; track subfield.name) {
|
|
2247
|
-
<ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="collections[idx]"> </ng-container>
|
|
2278
|
+
<ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="collections[idx]" [context]="context"> </ng-container>
|
|
2248
2279
|
}
|
|
2249
2280
|
@if (collections[idx]) {
|
|
2250
2281
|
<button matIconButton (click)="deleteField(idx)" color="primary">
|
|
@@ -2269,7 +2300,7 @@ let KlesFormListFieldComponent = class KlesFormListFieldComponent extends KlesFi
|
|
|
2269
2300
|
}
|
|
2270
2301
|
</div>
|
|
2271
2302
|
</div>
|
|
2272
|
-
`, isInline: true, styles: [".subfields{display:flex;flex-direction:row;gap:5px}\n", ".label{display:flex;align-items:center;flex-direction:row;gap:5px}\n"], dependencies: [{ kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }] }); }
|
|
2303
|
+
`, isInline: true, styles: [".subfields{display:flex;flex-direction:row;gap:5px}\n", ".label{display:flex;align-items:center;flex-direction:row;gap:5px}\n"], dependencies: [{ kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }] }); }
|
|
2273
2304
|
};
|
|
2274
2305
|
KlesFormListFieldComponent = __decorate([
|
|
2275
2306
|
FieldMapper({ type: 'listfield', factory: (field) => new KlesFormArray(field).create() })
|
|
@@ -2289,7 +2320,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
2289
2320
|
@for (subGroup of formArray.controls; track subGroup.value._id; let idx = $index) {
|
|
2290
2321
|
<div class="subfields">
|
|
2291
2322
|
@for (subfield of collections[idx]; track subfield.name) {
|
|
2292
|
-
<ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="collections[idx]"> </ng-container>
|
|
2323
|
+
<ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="collections[idx]" [context]="context"> </ng-container>
|
|
2293
2324
|
}
|
|
2294
2325
|
@if (collections[idx]) {
|
|
2295
2326
|
<button matIconButton (click)="deleteField(idx)" color="primary">
|
|
@@ -3190,12 +3221,12 @@ let KlesFormGroupComponent = class KlesFormGroupComponent extends KlesFieldAbstr
|
|
|
3190
3221
|
|
|
3191
3222
|
@for (subfield of field.collections; track subfield.name) {
|
|
3192
3223
|
@if (subfield.visible !== false) {
|
|
3193
|
-
<ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections" [ui]="subUi"> </ng-container>
|
|
3224
|
+
<ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections" [ui]="subUi" [context]="context"> </ng-container>
|
|
3194
3225
|
}
|
|
3195
3226
|
}
|
|
3196
3227
|
</ng-container>
|
|
3197
3228
|
</ng-container>
|
|
3198
|
-
`, isInline: true, styles: ["mat-form-field{width:100%}\n", ":host.group-container{display:flex;flex-direction:inherit;width:inherit;justify-content:inherit}\n", ":host.group-container-column{display:flex;flex-direction:column;justify-content:inherit}\n", ":host.group-container-column>*{width:100%}\n", ":host.group-container-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:inherit}\n", ":host.group-container-row>*{width:100%}\n", ":host.group-container-grid{display:grid}\n", ":host.group-container-inline-grid{display:inline-grid}\n"], dependencies: [{ kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }] }); }
|
|
3229
|
+
`, isInline: true, styles: ["mat-form-field{width:100%}\n", ":host.group-container{display:flex;flex-direction:inherit;width:inherit;justify-content:inherit}\n", ":host.group-container-column{display:flex;flex-direction:column;justify-content:inherit}\n", ":host.group-container-column>*{width:100%}\n", ":host.group-container-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:inherit}\n", ":host.group-container-row>*{width:100%}\n", ":host.group-container-grid{display:grid}\n", ":host.group-container-inline-grid{display:inline-grid}\n"], dependencies: [{ kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }] }); }
|
|
3199
3230
|
};
|
|
3200
3231
|
KlesFormGroupComponent = __decorate([
|
|
3201
3232
|
FieldMapper({ type: EnumType.group, factory: (field) => new KlesFormGroup(field).create(), ui: (field) => new KlesFormUiGroup(field).create() })
|
|
@@ -3213,7 +3244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
3213
3244
|
|
|
3214
3245
|
@for (subfield of field.collections; track subfield.name) {
|
|
3215
3246
|
@if (subfield.visible !== false) {
|
|
3216
|
-
<ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections" [ui]="subUi"> </ng-container>
|
|
3247
|
+
<ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections" [ui]="subUi" [context]="context"> </ng-container>
|
|
3217
3248
|
}
|
|
3218
3249
|
}
|
|
3219
3250
|
</ng-container>
|
|
@@ -4555,18 +4586,18 @@ let KlesFormArrayComponent = class KlesFormArrayComponent extends KlesFieldAbstr
|
|
|
4555
4586
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesFormArrayComponent, isStandalone: true, selector: "kles-array", usesInheritance: true, ngImport: i0, template: `
|
|
4556
4587
|
<div [formGroup]="group" class="container" [ngClass]="{ 'container-column': field.direction === 'column' }">
|
|
4557
4588
|
<ng-container [formArrayName]="field.name">
|
|
4558
|
-
@for (subGroup of formArray.controls; track subGroup.value._id; let index = $index
|
|
4589
|
+
@for (subGroup of formArray.controls; track subGroup.value._id; let index = $index) {
|
|
4559
4590
|
<div class="group-container" [ngClass]="field.direction === 'column' ? 'column' : 'row'">
|
|
4560
4591
|
@for (subfield of field.collections; track subfield.name) {
|
|
4561
4592
|
@if (subfield.visible !== false) {
|
|
4562
|
-
<ng-container klesDynamicField [field]="subfield" [group]="subGroup" [ui]="subUi?.at(index)" [siblingFields]="field.collections"> </ng-container>
|
|
4593
|
+
<ng-container klesDynamicField [field]="subfield" [group]="subGroup" [ui]="subUi?.at(index)" [siblingFields]="field.collections" [context]="context"> </ng-container>
|
|
4563
4594
|
}
|
|
4564
4595
|
}
|
|
4565
4596
|
</div>
|
|
4566
4597
|
}
|
|
4567
4598
|
</ng-container>
|
|
4568
4599
|
</div>
|
|
4569
|
-
`, isInline: true, styles: ["mat-form-field{width:100%}\n", ":host{display:flex;flex-direction:inherit}\n", ".container{display:flex;flex-direction:inherit}\n", ".container-column{gap:10px}\n", ".group-container{display:flex;flex-direction:inherit}\n", ".row{gap:10px;flex-direction:row;align-items:baseline}\n", ".column{flex-direction:column;gap:0px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }] }); }
|
|
4600
|
+
`, isInline: true, styles: ["mat-form-field{width:100%}\n", ":host{display:flex;flex-direction:inherit}\n", ".container{display:flex;flex-direction:inherit}\n", ".container-column{gap:10px}\n", ".group-container{display:flex;flex-direction:inherit}\n", ".row{gap:10px;flex-direction:row;align-items:baseline}\n", ".column{flex-direction:column;gap:0px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }] }); }
|
|
4570
4601
|
};
|
|
4571
4602
|
KlesFormArrayComponent = __decorate([
|
|
4572
4603
|
FieldMapper({ type: EnumType.array, factory: (field) => new KlesFormArray(field).create(), ui: (field) => new KlesFormUiArray(field).create() })
|
|
@@ -4576,11 +4607,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
4576
4607
|
args: [{ selector: 'kles-array', template: `
|
|
4577
4608
|
<div [formGroup]="group" class="container" [ngClass]="{ 'container-column': field.direction === 'column' }">
|
|
4578
4609
|
<ng-container [formArrayName]="field.name">
|
|
4579
|
-
@for (subGroup of formArray.controls; track subGroup.value._id; let index = $index
|
|
4610
|
+
@for (subGroup of formArray.controls; track subGroup.value._id; let index = $index) {
|
|
4580
4611
|
<div class="group-container" [ngClass]="field.direction === 'column' ? 'column' : 'row'">
|
|
4581
4612
|
@for (subfield of field.collections; track subfield.name) {
|
|
4582
4613
|
@if (subfield.visible !== false) {
|
|
4583
|
-
<ng-container klesDynamicField [field]="subfield" [group]="subGroup" [ui]="subUi?.at(index)" [siblingFields]="field.collections"> </ng-container>
|
|
4614
|
+
<ng-container klesDynamicField [field]="subfield" [group]="subGroup" [ui]="subUi?.at(index)" [siblingFields]="field.collections" [context]="context"> </ng-container>
|
|
4584
4615
|
}
|
|
4585
4616
|
}
|
|
4586
4617
|
</div>
|
|
@@ -5869,7 +5900,7 @@ class KlesFormTileComponent extends KlesFieldAbstract {
|
|
|
5869
5900
|
}
|
|
5870
5901
|
</div>
|
|
5871
5902
|
</div>
|
|
5872
|
-
`, isInline: true, styles: [":host{display:
|
|
5903
|
+
`, isInline: true, styles: [":host{display:flex;justify-content:inherit}.kles-tile{display:flex;align-items:center;min-width:0;gap:12px;padding:8px}.kles-tile__image{width:36px;height:36px;flex:0 0 36px;object-fit:contain}.kles-tile__content{display:flex;flex-direction:column;min-width:0;gap:2px}.kles-tile__label{overflow:hidden;color:var(--mat-sys-on-surface);font-size:14px;font-weight:500;line-height:20px;text-overflow:ellipsis;white-space:nowrap}.kles-tile__hint{overflow:hidden;color:var(--mat-sys-on-surface-variant);font-size:12px;font-weight:400;line-height:16px;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5873
5904
|
}
|
|
5874
5905
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormTileComponent, decorators: [{
|
|
5875
5906
|
type: Component,
|
|
@@ -5893,7 +5924,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
5893
5924
|
}
|
|
5894
5925
|
</div>
|
|
5895
5926
|
</div>
|
|
5896
|
-
`, styles: [":host{display:
|
|
5927
|
+
`, styles: [":host{display:flex;justify-content:inherit}.kles-tile{display:flex;align-items:center;min-width:0;gap:12px;padding:8px}.kles-tile__image{width:36px;height:36px;flex:0 0 36px;object-fit:contain}.kles-tile__content{display:flex;flex-direction:column;min-width:0;gap:2px}.kles-tile__label{overflow:hidden;color:var(--mat-sys-on-surface);font-size:14px;font-weight:500;line-height:20px;text-overflow:ellipsis;white-space:nowrap}.kles-tile__hint{overflow:hidden;color:var(--mat-sys-on-surface-variant);font-size:12px;font-weight:400;line-height:16px;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
5897
5928
|
}] });
|
|
5898
5929
|
|
|
5899
5930
|
/**
|
|
@@ -6257,7 +6288,7 @@ let KlesFormStatusComponent = class KlesFormStatusComponent extends KlesFieldAbs
|
|
|
6257
6288
|
this.controlStatus = toSignal(this.control.statusChanges.pipe(startWith(this.control.status)), {
|
|
6258
6289
|
initialValue: this.control.status,
|
|
6259
6290
|
});
|
|
6260
|
-
this.
|
|
6291
|
+
this.statusAppearance = computed(() => this.field.statusOptions?.appearance ?? 'chip', ...(ngDevMode ? [{ debugName: "statusAppearance" }] : /* istanbul ignore next */ []));
|
|
6261
6292
|
this.showDot = computed(() => this.field.statusOptions?.showDot ?? true, ...(ngDevMode ? [{ debugName: "showDot" }] : /* istanbul ignore next */ []));
|
|
6262
6293
|
this.disabled = computed(() => {
|
|
6263
6294
|
this.controlStatus();
|
|
@@ -6316,9 +6347,9 @@ let KlesFormStatusComponent = class KlesFormStatusComponent extends KlesFieldAbs
|
|
|
6316
6347
|
} @else if (resolvedStatus(); as status) {
|
|
6317
6348
|
<span
|
|
6318
6349
|
class="kles-status"
|
|
6319
|
-
[class.kles-status--chip]="
|
|
6320
|
-
[class.kles-status--badge]="
|
|
6321
|
-
[class.kles-status--text]="
|
|
6350
|
+
[class.kles-status--chip]="statusAppearance() === 'chip'"
|
|
6351
|
+
[class.kles-status--badge]="statusAppearance() === 'badge'"
|
|
6352
|
+
[class.kles-status--text]="statusAppearance() === 'text'"
|
|
6322
6353
|
[class.kles-status--neutral]="status.tone === 'neutral'"
|
|
6323
6354
|
[class.kles-status--info]="status.tone === 'info'"
|
|
6324
6355
|
[class.kles-status--success]="status.tone === 'success'"
|
|
@@ -6361,9 +6392,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
6361
6392
|
} @else if (resolvedStatus(); as status) {
|
|
6362
6393
|
<span
|
|
6363
6394
|
class="kles-status"
|
|
6364
|
-
[class.kles-status--chip]="
|
|
6365
|
-
[class.kles-status--badge]="
|
|
6366
|
-
[class.kles-status--text]="
|
|
6395
|
+
[class.kles-status--chip]="statusAppearance() === 'chip'"
|
|
6396
|
+
[class.kles-status--badge]="statusAppearance() === 'badge'"
|
|
6397
|
+
[class.kles-status--text]="statusAppearance() === 'text'"
|
|
6367
6398
|
[class.kles-status--neutral]="status.tone === 'neutral'"
|
|
6368
6399
|
[class.kles-status--info]="status.tone === 'info'"
|
|
6369
6400
|
[class.kles-status--success]="status.tone === 'success'"
|