@3kles/kles-material-dynamicforms 21.3.0 → 21.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -224,6 +224,7 @@ class KlesFormUiControl extends KlesAbstractFormUiControl {
|
|
|
224
224
|
hint: this.field.hint,
|
|
225
225
|
placeholder: this.field.placeholder,
|
|
226
226
|
tooltip: this.field.tooltip,
|
|
227
|
+
currencyOptions: this.field.currencyOptions,
|
|
227
228
|
});
|
|
228
229
|
}
|
|
229
230
|
}
|
|
@@ -656,13 +657,13 @@ class GroupUiState extends AbstractUiState {
|
|
|
656
657
|
|
|
657
658
|
const originFormControlNgOnChanges = FormControlDirective.prototype.ngOnChanges;
|
|
658
659
|
FormControlDirective.prototype.ngOnChanges = function () {
|
|
659
|
-
this.form.nativeElement = this.valueAccessor
|
|
660
|
+
this.form.nativeElement = this.valueAccessor?._elementRef?.nativeElement;
|
|
660
661
|
return originFormControlNgOnChanges.apply(this, arguments);
|
|
661
662
|
};
|
|
662
663
|
const originFormControlNameNgOnChanges = FormControlName.prototype.ngOnChanges;
|
|
663
664
|
FormControlName.prototype.ngOnChanges = function () {
|
|
664
665
|
const result = originFormControlNameNgOnChanges.apply(this, arguments);
|
|
665
|
-
this.control.nativeElement = this.valueAccessor
|
|
666
|
+
this.control.nativeElement = this.valueAccessor?._elementRef?.nativeElement;
|
|
666
667
|
return result;
|
|
667
668
|
};
|
|
668
669
|
class KlesDynamicFormComponent {
|
|
@@ -1169,25 +1170,38 @@ class KlesFieldAbstract {
|
|
|
1169
1170
|
this.ui = inject(GROUP_UI, { optional: true });
|
|
1170
1171
|
this.context = inject(FIELD_CONTEXT, { optional: true });
|
|
1171
1172
|
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.
|
|
1173
|
+
this.resolvedFieldUi = computed(() => {
|
|
1174
|
+
const fieldUi = this.fieldUi() ?? {};
|
|
1175
|
+
const resolvedUi = this.field.resolveUi?.({
|
|
1176
|
+
context: this.context?.() ?? null,
|
|
1177
|
+
field: this.field,
|
|
1178
|
+
group: this.group,
|
|
1179
|
+
siblingFields: this.siblingFields,
|
|
1180
|
+
}) ?? {};
|
|
1181
|
+
return {
|
|
1182
|
+
...fieldUi,
|
|
1183
|
+
...resolvedUi,
|
|
1184
|
+
};
|
|
1185
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedFieldUi" }] : /* istanbul ignore next */ []));
|
|
1186
|
+
this.appearance = computed(() => this.resolvedFieldUi()?.appearance, ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
1187
|
+
this.inputType = computed(() => this.resolvedFieldUi()?.inputType, ...(ngDevMode ? [{ debugName: "inputType" }] : /* istanbul ignore next */ []));
|
|
1188
|
+
this.min = computed(() => this.resolvedFieldUi()?.min, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
|
|
1189
|
+
this.max = computed(() => this.resolvedFieldUi()?.max, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
|
|
1190
|
+
this.maxLength = computed(() => this.resolvedFieldUi()?.maxLength ?? 524288, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
|
|
1191
|
+
this.step = computed(() => this.resolvedFieldUi()?.step, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
|
|
1192
|
+
this.ngClass = computed(() => this.resolvedFieldUi()?.ngClass, ...(ngDevMode ? [{ debugName: "ngClass" }] : /* istanbul ignore next */ []));
|
|
1193
|
+
this.ngStyle = computed(() => this.resolvedFieldUi()?.ngStyle, ...(ngDevMode ? [{ debugName: "ngStyle" }] : /* istanbul ignore next */ []));
|
|
1194
|
+
this.indeterminate = computed(() => this.resolvedFieldUi()?.indeterminate ?? false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
|
|
1195
|
+
this.color = computed(() => this.resolvedFieldUi()?.color, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
1196
|
+
this.icon = computed(() => this.resolvedFieldUi()?.icon, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
1197
|
+
this.iconSvg = computed(() => this.resolvedFieldUi()?.iconSvg, ...(ngDevMode ? [{ debugName: "iconSvg" }] : /* istanbul ignore next */ []));
|
|
1198
|
+
this.buttonAppearance = computed(() => this.resolvedFieldUi()?.buttonAppearance, ...(ngDevMode ? [{ debugName: "buttonAppearance" }] : /* istanbul ignore next */ []));
|
|
1199
|
+
this.label = computed(() => this.resolvedFieldUi()?.label ?? this.field.label, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1200
|
+
this.hint = computed(() => this.resolvedFieldUi()?.hint ?? this.field.hint, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
1201
|
+
this.placeholder = computed(() => this.resolvedFieldUi()?.placeholder ?? this.field.placeholder, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1202
|
+
this.tooltip = computed(() => this.resolvedFieldUi()?.tooltip ?? this.field.tooltip, ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
|
|
1203
|
+
this.imageUrl = computed(() => this.resolvedFieldUi()?.imageUrl, ...(ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []));
|
|
1204
|
+
this.imageAlt = computed(() => this.resolvedFieldUi()?.imageAlt ?? this.label(), ...(ngDevMode ? [{ debugName: "imageAlt" }] : /* istanbul ignore next */ []));
|
|
1191
1205
|
this.viewRef = inject(ViewContainerRef);
|
|
1192
1206
|
this._onDestroy = new Subject();
|
|
1193
1207
|
if (this.field.directive) {
|
|
@@ -2262,7 +2276,7 @@ let KlesFormListFieldComponent = class KlesFormListFieldComponent extends KlesFi
|
|
|
2262
2276
|
@for (subGroup of formArray.controls; track subGroup.value._id; let idx = $index) {
|
|
2263
2277
|
<div class="subfields">
|
|
2264
2278
|
@for (subfield of collections[idx]; track subfield.name) {
|
|
2265
|
-
<ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="collections[idx]"> </ng-container>
|
|
2279
|
+
<ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="collections[idx]" [context]="context"> </ng-container>
|
|
2266
2280
|
}
|
|
2267
2281
|
@if (collections[idx]) {
|
|
2268
2282
|
<button matIconButton (click)="deleteField(idx)" color="primary">
|
|
@@ -2307,7 +2321,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
2307
2321
|
@for (subGroup of formArray.controls; track subGroup.value._id; let idx = $index) {
|
|
2308
2322
|
<div class="subfields">
|
|
2309
2323
|
@for (subfield of collections[idx]; track subfield.name) {
|
|
2310
|
-
<ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="collections[idx]"> </ng-container>
|
|
2324
|
+
<ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="collections[idx]" [context]="context"> </ng-container>
|
|
2311
2325
|
}
|
|
2312
2326
|
@if (collections[idx]) {
|
|
2313
2327
|
<button matIconButton (click)="deleteField(idx)" color="primary">
|
|
@@ -3208,7 +3222,7 @@ let KlesFormGroupComponent = class KlesFormGroupComponent extends KlesFieldAbstr
|
|
|
3208
3222
|
|
|
3209
3223
|
@for (subfield of field.collections; track subfield.name) {
|
|
3210
3224
|
@if (subfield.visible !== false) {
|
|
3211
|
-
<ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections" [ui]="subUi"> </ng-container>
|
|
3225
|
+
<ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections" [ui]="subUi" [context]="context"> </ng-container>
|
|
3212
3226
|
}
|
|
3213
3227
|
}
|
|
3214
3228
|
</ng-container>
|
|
@@ -3231,7 +3245,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
3231
3245
|
|
|
3232
3246
|
@for (subfield of field.collections; track subfield.name) {
|
|
3233
3247
|
@if (subfield.visible !== false) {
|
|
3234
|
-
<ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections" [ui]="subUi"> </ng-container>
|
|
3248
|
+
<ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections" [ui]="subUi" [context]="context"> </ng-container>
|
|
3235
3249
|
}
|
|
3236
3250
|
}
|
|
3237
3251
|
</ng-container>
|
|
@@ -4573,11 +4587,11 @@ let KlesFormArrayComponent = class KlesFormArrayComponent extends KlesFieldAbstr
|
|
|
4573
4587
|
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
4588
|
<div [formGroup]="group" class="container" [ngClass]="{ 'container-column': field.direction === 'column' }">
|
|
4575
4589
|
<ng-container [formArrayName]="field.name">
|
|
4576
|
-
@for (subGroup of formArray.controls; track subGroup.value._id; let index = $index
|
|
4590
|
+
@for (subGroup of formArray.controls; track subGroup.value._id; let index = $index) {
|
|
4577
4591
|
<div class="group-container" [ngClass]="field.direction === 'column' ? 'column' : 'row'">
|
|
4578
4592
|
@for (subfield of field.collections; track subfield.name) {
|
|
4579
4593
|
@if (subfield.visible !== false) {
|
|
4580
|
-
<ng-container klesDynamicField [field]="subfield" [group]="subGroup" [ui]="subUi?.at(index)" [siblingFields]="field.collections"> </ng-container>
|
|
4594
|
+
<ng-container klesDynamicField [field]="subfield" [group]="subGroup" [ui]="subUi?.at(index)" [siblingFields]="field.collections" [context]="context"> </ng-container>
|
|
4581
4595
|
}
|
|
4582
4596
|
}
|
|
4583
4597
|
</div>
|
|
@@ -4594,11 +4608,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
4594
4608
|
args: [{ selector: 'kles-array', template: `
|
|
4595
4609
|
<div [formGroup]="group" class="container" [ngClass]="{ 'container-column': field.direction === 'column' }">
|
|
4596
4610
|
<ng-container [formArrayName]="field.name">
|
|
4597
|
-
@for (subGroup of formArray.controls; track subGroup.value._id; let index = $index
|
|
4611
|
+
@for (subGroup of formArray.controls; track subGroup.value._id; let index = $index) {
|
|
4598
4612
|
<div class="group-container" [ngClass]="field.direction === 'column' ? 'column' : 'row'">
|
|
4599
4613
|
@for (subfield of field.collections; track subfield.name) {
|
|
4600
4614
|
@if (subfield.visible !== false) {
|
|
4601
|
-
<ng-container klesDynamicField [field]="subfield" [group]="subGroup" [ui]="subUi?.at(index)" [siblingFields]="field.collections"> </ng-container>
|
|
4615
|
+
<ng-container klesDynamicField [field]="subfield" [group]="subGroup" [ui]="subUi?.at(index)" [siblingFields]="field.collections" [context]="context"> </ng-container>
|
|
4602
4616
|
}
|
|
4603
4617
|
}
|
|
4604
4618
|
</div>
|
|
@@ -5887,7 +5901,7 @@ class KlesFormTileComponent extends KlesFieldAbstract {
|
|
|
5887
5901
|
}
|
|
5888
5902
|
</div>
|
|
5889
5903
|
</div>
|
|
5890
|
-
`, isInline: true, styles: [":host{display:
|
|
5904
|
+
`, 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
5905
|
}
|
|
5892
5906
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormTileComponent, decorators: [{
|
|
5893
5907
|
type: Component,
|
|
@@ -5911,7 +5925,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
5911
5925
|
}
|
|
5912
5926
|
</div>
|
|
5913
5927
|
</div>
|
|
5914
|
-
`, styles: [":host{display:
|
|
5928
|
+
`, 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
5929
|
}] });
|
|
5916
5930
|
|
|
5917
5931
|
/**
|
|
@@ -6134,6 +6148,7 @@ let KlesFormCurrencyComponent = class KlesFormCurrencyComponent extends KlesFiel
|
|
|
6134
6148
|
constructor() {
|
|
6135
6149
|
super(...arguments);
|
|
6136
6150
|
this.localeId = inject(LOCALE_ID);
|
|
6151
|
+
this.currencyOptions = computed(() => this.resolvedFieldUi()?.currencyOptions, ...(ngDevMode ? [{ debugName: "currencyOptions" }] : /* istanbul ignore next */ []));
|
|
6137
6152
|
this.defaultCurrencyCode = inject(DEFAULT_CURRENCY_CODE);
|
|
6138
6153
|
}
|
|
6139
6154
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormCurrencyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -6164,13 +6179,13 @@ let KlesFormCurrencyComponent = class KlesFormCurrencyComponent extends KlesFiel
|
|
|
6164
6179
|
[matTooltip]="tooltip()"
|
|
6165
6180
|
[formControlName]="field.name"
|
|
6166
6181
|
[placeholder]="placeholder()"
|
|
6167
|
-
[currency]="
|
|
6168
|
-
[locale]="
|
|
6169
|
-
[currencyDisplay]="
|
|
6170
|
-
[minimumFractionDigits]="
|
|
6171
|
-
[maximumFractionDigits]="
|
|
6172
|
-
[useGrouping]="
|
|
6173
|
-
[allowNegative]="
|
|
6182
|
+
[currency]="currencyOptions()?.code || defaultCurrencyCode"
|
|
6183
|
+
[locale]="currencyOptions()?.locale || localeId"
|
|
6184
|
+
[currencyDisplay]="currencyOptions()?.display || 'symbol'"
|
|
6185
|
+
[minimumFractionDigits]="currencyOptions()?.minimumFractionDigits"
|
|
6186
|
+
[maximumFractionDigits]="currencyOptions()?.maximumFractionDigits"
|
|
6187
|
+
[useGrouping]="currencyOptions()?.useGrouping !== false"
|
|
6188
|
+
[allowNegative]="currencyOptions()?.allowNegative !== false"
|
|
6174
6189
|
(focus)="onFocus()"
|
|
6175
6190
|
(blur)="onBlur()"
|
|
6176
6191
|
/>
|
|
@@ -6231,13 +6246,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
6231
6246
|
[matTooltip]="tooltip()"
|
|
6232
6247
|
[formControlName]="field.name"
|
|
6233
6248
|
[placeholder]="placeholder()"
|
|
6234
|
-
[currency]="
|
|
6235
|
-
[locale]="
|
|
6236
|
-
[currencyDisplay]="
|
|
6237
|
-
[minimumFractionDigits]="
|
|
6238
|
-
[maximumFractionDigits]="
|
|
6239
|
-
[useGrouping]="
|
|
6240
|
-
[allowNegative]="
|
|
6249
|
+
[currency]="currencyOptions()?.code || defaultCurrencyCode"
|
|
6250
|
+
[locale]="currencyOptions()?.locale || localeId"
|
|
6251
|
+
[currencyDisplay]="currencyOptions()?.display || 'symbol'"
|
|
6252
|
+
[minimumFractionDigits]="currencyOptions()?.minimumFractionDigits"
|
|
6253
|
+
[maximumFractionDigits]="currencyOptions()?.maximumFractionDigits"
|
|
6254
|
+
[useGrouping]="currencyOptions()?.useGrouping !== false"
|
|
6255
|
+
[allowNegative]="currencyOptions()?.allowNegative !== false"
|
|
6241
6256
|
(focus)="onFocus()"
|
|
6242
6257
|
(blur)="onBlur()"
|
|
6243
6258
|
/>
|
|
@@ -6275,7 +6290,7 @@ let KlesFormStatusComponent = class KlesFormStatusComponent extends KlesFieldAbs
|
|
|
6275
6290
|
this.controlStatus = toSignal(this.control.statusChanges.pipe(startWith(this.control.status)), {
|
|
6276
6291
|
initialValue: this.control.status,
|
|
6277
6292
|
});
|
|
6278
|
-
this.
|
|
6293
|
+
this.statusAppearance = computed(() => this.field.statusOptions?.appearance ?? 'chip', ...(ngDevMode ? [{ debugName: "statusAppearance" }] : /* istanbul ignore next */ []));
|
|
6279
6294
|
this.showDot = computed(() => this.field.statusOptions?.showDot ?? true, ...(ngDevMode ? [{ debugName: "showDot" }] : /* istanbul ignore next */ []));
|
|
6280
6295
|
this.disabled = computed(() => {
|
|
6281
6296
|
this.controlStatus();
|
|
@@ -6334,9 +6349,9 @@ let KlesFormStatusComponent = class KlesFormStatusComponent extends KlesFieldAbs
|
|
|
6334
6349
|
} @else if (resolvedStatus(); as status) {
|
|
6335
6350
|
<span
|
|
6336
6351
|
class="kles-status"
|
|
6337
|
-
[class.kles-status--chip]="
|
|
6338
|
-
[class.kles-status--badge]="
|
|
6339
|
-
[class.kles-status--text]="
|
|
6352
|
+
[class.kles-status--chip]="statusAppearance() === 'chip'"
|
|
6353
|
+
[class.kles-status--badge]="statusAppearance() === 'badge'"
|
|
6354
|
+
[class.kles-status--text]="statusAppearance() === 'text'"
|
|
6340
6355
|
[class.kles-status--neutral]="status.tone === 'neutral'"
|
|
6341
6356
|
[class.kles-status--info]="status.tone === 'info'"
|
|
6342
6357
|
[class.kles-status--success]="status.tone === 'success'"
|
|
@@ -6379,9 +6394,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
6379
6394
|
} @else if (resolvedStatus(); as status) {
|
|
6380
6395
|
<span
|
|
6381
6396
|
class="kles-status"
|
|
6382
|
-
[class.kles-status--chip]="
|
|
6383
|
-
[class.kles-status--badge]="
|
|
6384
|
-
[class.kles-status--text]="
|
|
6397
|
+
[class.kles-status--chip]="statusAppearance() === 'chip'"
|
|
6398
|
+
[class.kles-status--badge]="statusAppearance() === 'badge'"
|
|
6399
|
+
[class.kles-status--text]="statusAppearance() === 'text'"
|
|
6385
6400
|
[class.kles-status--neutral]="status.tone === 'neutral'"
|
|
6386
6401
|
[class.kles-status--info]="status.tone === 'info'"
|
|
6387
6402
|
[class.kles-status--success]="status.tone === 'success'"
|