@3kles/kles-material-dynamicforms 21.3.0 → 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.
|
@@ -656,13 +656,13 @@ class GroupUiState extends AbstractUiState {
|
|
|
656
656
|
|
|
657
657
|
const originFormControlNgOnChanges = FormControlDirective.prototype.ngOnChanges;
|
|
658
658
|
FormControlDirective.prototype.ngOnChanges = function () {
|
|
659
|
-
this.form.nativeElement = this.valueAccessor
|
|
659
|
+
this.form.nativeElement = this.valueAccessor?._elementRef?.nativeElement;
|
|
660
660
|
return originFormControlNgOnChanges.apply(this, arguments);
|
|
661
661
|
};
|
|
662
662
|
const originFormControlNameNgOnChanges = FormControlName.prototype.ngOnChanges;
|
|
663
663
|
FormControlName.prototype.ngOnChanges = function () {
|
|
664
664
|
const result = originFormControlNameNgOnChanges.apply(this, arguments);
|
|
665
|
-
this.control.nativeElement = this.valueAccessor
|
|
665
|
+
this.control.nativeElement = this.valueAccessor?._elementRef?.nativeElement;
|
|
666
666
|
return result;
|
|
667
667
|
};
|
|
668
668
|
class KlesDynamicFormComponent {
|
|
@@ -1169,25 +1169,38 @@ class KlesFieldAbstract {
|
|
|
1169
1169
|
this.ui = inject(GROUP_UI, { optional: true });
|
|
1170
1170
|
this.context = inject(FIELD_CONTEXT, { optional: true });
|
|
1171
1171
|
this.fieldUi = computed(() => this.ui?.get(this.field.name)?.value(), ...(ngDevMode ? [{ debugName: "fieldUi" }] : /* istanbul ignore next */ []));
|
|
1172
|
-
this.
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
this.
|
|
1186
|
-
this.
|
|
1187
|
-
this.
|
|
1188
|
-
this.
|
|
1189
|
-
this.
|
|
1190
|
-
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 */ []));
|
|
1191
1204
|
this.viewRef = inject(ViewContainerRef);
|
|
1192
1205
|
this._onDestroy = new Subject();
|
|
1193
1206
|
if (this.field.directive) {
|
|
@@ -2262,7 +2275,7 @@ let KlesFormListFieldComponent = class KlesFormListFieldComponent extends KlesFi
|
|
|
2262
2275
|
@for (subGroup of formArray.controls; track subGroup.value._id; let idx = $index) {
|
|
2263
2276
|
<div class="subfields">
|
|
2264
2277
|
@for (subfield of collections[idx]; track subfield.name) {
|
|
2265
|
-
<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>
|
|
2266
2279
|
}
|
|
2267
2280
|
@if (collections[idx]) {
|
|
2268
2281
|
<button matIconButton (click)="deleteField(idx)" color="primary">
|
|
@@ -2307,7 +2320,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
2307
2320
|
@for (subGroup of formArray.controls; track subGroup.value._id; let idx = $index) {
|
|
2308
2321
|
<div class="subfields">
|
|
2309
2322
|
@for (subfield of collections[idx]; track subfield.name) {
|
|
2310
|
-
<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>
|
|
2311
2324
|
}
|
|
2312
2325
|
@if (collections[idx]) {
|
|
2313
2326
|
<button matIconButton (click)="deleteField(idx)" color="primary">
|
|
@@ -3208,7 +3221,7 @@ let KlesFormGroupComponent = class KlesFormGroupComponent extends KlesFieldAbstr
|
|
|
3208
3221
|
|
|
3209
3222
|
@for (subfield of field.collections; track subfield.name) {
|
|
3210
3223
|
@if (subfield.visible !== false) {
|
|
3211
|
-
<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>
|
|
3212
3225
|
}
|
|
3213
3226
|
}
|
|
3214
3227
|
</ng-container>
|
|
@@ -3231,7 +3244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
3231
3244
|
|
|
3232
3245
|
@for (subfield of field.collections; track subfield.name) {
|
|
3233
3246
|
@if (subfield.visible !== false) {
|
|
3234
|
-
<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>
|
|
3235
3248
|
}
|
|
3236
3249
|
}
|
|
3237
3250
|
</ng-container>
|
|
@@ -4573,11 +4586,11 @@ let KlesFormArrayComponent = class KlesFormArrayComponent extends KlesFieldAbstr
|
|
|
4573
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: `
|
|
4574
4587
|
<div [formGroup]="group" class="container" [ngClass]="{ 'container-column': field.direction === 'column' }">
|
|
4575
4588
|
<ng-container [formArrayName]="field.name">
|
|
4576
|
-
@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) {
|
|
4577
4590
|
<div class="group-container" [ngClass]="field.direction === 'column' ? 'column' : 'row'">
|
|
4578
4591
|
@for (subfield of field.collections; track subfield.name) {
|
|
4579
4592
|
@if (subfield.visible !== false) {
|
|
4580
|
-
<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>
|
|
4581
4594
|
}
|
|
4582
4595
|
}
|
|
4583
4596
|
</div>
|
|
@@ -4594,11 +4607,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
4594
4607
|
args: [{ selector: 'kles-array', template: `
|
|
4595
4608
|
<div [formGroup]="group" class="container" [ngClass]="{ 'container-column': field.direction === 'column' }">
|
|
4596
4609
|
<ng-container [formArrayName]="field.name">
|
|
4597
|
-
@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) {
|
|
4598
4611
|
<div class="group-container" [ngClass]="field.direction === 'column' ? 'column' : 'row'">
|
|
4599
4612
|
@for (subfield of field.collections; track subfield.name) {
|
|
4600
4613
|
@if (subfield.visible !== false) {
|
|
4601
|
-
<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>
|
|
4602
4615
|
}
|
|
4603
4616
|
}
|
|
4604
4617
|
</div>
|
|
@@ -5887,7 +5900,7 @@ class KlesFormTileComponent extends KlesFieldAbstract {
|
|
|
5887
5900
|
}
|
|
5888
5901
|
</div>
|
|
5889
5902
|
</div>
|
|
5890
|
-
`, 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 }); }
|
|
5891
5904
|
}
|
|
5892
5905
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormTileComponent, decorators: [{
|
|
5893
5906
|
type: Component,
|
|
@@ -5911,7 +5924,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
5911
5924
|
}
|
|
5912
5925
|
</div>
|
|
5913
5926
|
</div>
|
|
5914
|
-
`, 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"] }]
|
|
5915
5928
|
}] });
|
|
5916
5929
|
|
|
5917
5930
|
/**
|
|
@@ -6275,7 +6288,7 @@ let KlesFormStatusComponent = class KlesFormStatusComponent extends KlesFieldAbs
|
|
|
6275
6288
|
this.controlStatus = toSignal(this.control.statusChanges.pipe(startWith(this.control.status)), {
|
|
6276
6289
|
initialValue: this.control.status,
|
|
6277
6290
|
});
|
|
6278
|
-
this.
|
|
6291
|
+
this.statusAppearance = computed(() => this.field.statusOptions?.appearance ?? 'chip', ...(ngDevMode ? [{ debugName: "statusAppearance" }] : /* istanbul ignore next */ []));
|
|
6279
6292
|
this.showDot = computed(() => this.field.statusOptions?.showDot ?? true, ...(ngDevMode ? [{ debugName: "showDot" }] : /* istanbul ignore next */ []));
|
|
6280
6293
|
this.disabled = computed(() => {
|
|
6281
6294
|
this.controlStatus();
|
|
@@ -6334,9 +6347,9 @@ let KlesFormStatusComponent = class KlesFormStatusComponent extends KlesFieldAbs
|
|
|
6334
6347
|
} @else if (resolvedStatus(); as status) {
|
|
6335
6348
|
<span
|
|
6336
6349
|
class="kles-status"
|
|
6337
|
-
[class.kles-status--chip]="
|
|
6338
|
-
[class.kles-status--badge]="
|
|
6339
|
-
[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'"
|
|
6340
6353
|
[class.kles-status--neutral]="status.tone === 'neutral'"
|
|
6341
6354
|
[class.kles-status--info]="status.tone === 'info'"
|
|
6342
6355
|
[class.kles-status--success]="status.tone === 'success'"
|
|
@@ -6379,9 +6392,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
6379
6392
|
} @else if (resolvedStatus(); as status) {
|
|
6380
6393
|
<span
|
|
6381
6394
|
class="kles-status"
|
|
6382
|
-
[class.kles-status--chip]="
|
|
6383
|
-
[class.kles-status--badge]="
|
|
6384
|
-
[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'"
|
|
6385
6398
|
[class.kles-status--neutral]="status.tone === 'neutral'"
|
|
6386
6399
|
[class.kles-status--info]="status.tone === 'info'"
|
|
6387
6400
|
[class.kles-status--success]="status.tone === 'success'"
|