@3kles/kles-material-dynamicforms 22.0.2 → 22.1.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.
|
@@ -3,7 +3,7 @@ import { signal, InjectionToken, inject, Component, Injector, Input, Directive,
|
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, AsyncPipe } from '@angular/common';
|
|
5
5
|
import * as i2 from '@angular/forms';
|
|
6
|
-
import { Validators, FormControl, ReactiveFormsModule, FormsModule,
|
|
6
|
+
import { Validators, FormControl, ReactiveFormsModule, FormsModule, UntypedFormGroup, FormArray, NG_VALUE_ACCESSOR, FormGroup } from '@angular/forms';
|
|
7
7
|
import { concat, of, combineLatest, startWith, map as map$1, switchMap, Subject, Observable, defer, ReplaySubject, isObservable, takeUntil as takeUntil$1, timer, distinctUntilChanged as distinctUntilChanged$1, shareReplay as shareReplay$1 } from 'rxjs';
|
|
8
8
|
import { tap, take, catchError, map, takeUntil, distinctUntilChanged, filter, switchMap as switchMap$1, startWith as startWith$1, shareReplay, debounceTime, debounce } from 'rxjs/operators';
|
|
9
9
|
import * as i3 from '@angular/material/form-field';
|
|
@@ -11,7 +11,7 @@ import { MatError, MatFormFieldModule, MatFormField, MatHint, MatLabel, MatSuffi
|
|
|
11
11
|
import { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS, ErrorStateMatcher, MatNativeDateModule, MatOptionModule, MatOption as MatOption$1 } from '@angular/material/core';
|
|
12
12
|
import * as i2$1 from '@angular/material/icon';
|
|
13
13
|
import { MatIcon, MatIconModule } from '@angular/material/icon';
|
|
14
|
-
import * as
|
|
14
|
+
import * as i2$2 from '@angular/material/button';
|
|
15
15
|
import { MatIconButton, MatButtonModule, MatButton } from '@angular/material/button';
|
|
16
16
|
import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
17
17
|
import { MatSliderModule } from '@angular/material/slider';
|
|
@@ -64,7 +64,7 @@ import { parseColor, toCssRgba, readableTextColor, MaterialColorPickerTriggerCom
|
|
|
64
64
|
import * as i3$3 from '@angular/cdk/text-field';
|
|
65
65
|
import { TextFieldModule } from '@angular/cdk/text-field';
|
|
66
66
|
import { getMultipleValuesInSingleSelectionError } from '@angular/cdk/collections';
|
|
67
|
-
import * as i4$
|
|
67
|
+
import * as i4$2 from '@3kles/kles-material-datepicker';
|
|
68
68
|
import { KlesMaterialDatepickerModule } from '@3kles/kles-material-datepicker';
|
|
69
69
|
import { Clipboard, ClipboardModule } from '@angular/cdk/clipboard';
|
|
70
70
|
import { MatDividerModule } from '@angular/material/divider';
|
|
@@ -534,9 +534,9 @@ class MatErrorFormDirective {
|
|
|
534
534
|
...(ngDevMode ? [{ debugName: "validations" }] : /* istanbul ignore next */ []));
|
|
535
535
|
this.asyncValidations = input([], /* @ts-ignore */
|
|
536
536
|
...(ngDevMode ? [{ debugName: "asyncValidations" }] : /* istanbul ignore next */ []));
|
|
537
|
-
this.validationsKeys = computed(() => flattenValidators(this.validations()), /* @ts-ignore */
|
|
537
|
+
this.validationsKeys = computed(() => flattenValidators(this.validations() ?? []), /* @ts-ignore */
|
|
538
538
|
...(ngDevMode ? [{ debugName: "validationsKeys" }] : /* istanbul ignore next */ []));
|
|
539
|
-
this.asyncValidationsKeys = computed(() => flattenValidators(this.asyncValidations()), /* @ts-ignore */
|
|
539
|
+
this.asyncValidationsKeys = computed(() => flattenValidators(this.asyncValidations() ?? []), /* @ts-ignore */
|
|
540
540
|
...(ngDevMode ? [{ debugName: "asyncValidationsKeys" }] : /* istanbul ignore next */ []));
|
|
541
541
|
this.formErrors = toSignal(toObservable(this.form).pipe(switchMap((form) => form.statusChanges.pipe(startWith(form.status), map$1(() => form.errors)))), { initialValue: null });
|
|
542
542
|
}
|
|
@@ -555,13 +555,11 @@ class MatErrorFormDirective {
|
|
|
555
555
|
}
|
|
556
556
|
}
|
|
557
557
|
}
|
|
558
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] }); }
|
|
558
|
+
`, isInline: true, styles: [":host{overflow-wrap:break-word}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] }); }
|
|
559
559
|
}
|
|
560
560
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MatErrorFormDirective, decorators: [{
|
|
561
561
|
type: Component,
|
|
562
|
-
args: [{
|
|
563
|
-
selector: '[matErrorForm]',
|
|
564
|
-
template: `
|
|
562
|
+
args: [{ selector: '[matErrorForm]', template: `
|
|
565
563
|
@if (formErrors()) {
|
|
566
564
|
@for (validation of validationsKeys(); track validation.name) {
|
|
567
565
|
@if (form().hasError(validation.name) && validation.message) {
|
|
@@ -575,10 +573,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
575
573
|
}
|
|
576
574
|
}
|
|
577
575
|
}
|
|
578
|
-
`,
|
|
579
|
-
standalone: true,
|
|
580
|
-
imports: [ReactiveFormsModule, FormsModule],
|
|
581
|
-
}]
|
|
576
|
+
`, standalone: true, imports: [ReactiveFormsModule, FormsModule], styles: [":host{overflow-wrap:break-word}\n"] }]
|
|
582
577
|
}], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], validations: [{ type: i0.Input, args: [{ isSignal: true, alias: "validations", required: false }] }], asyncValidations: [{ type: i0.Input, args: [{ isSignal: true, alias: "asyncValidations", required: false }] }] } });
|
|
583
578
|
|
|
584
579
|
class KlesFormErrorStateMatcher {
|
|
@@ -674,7 +669,7 @@ function flattenKlesFields(elements) {
|
|
|
674
669
|
}
|
|
675
670
|
|
|
676
671
|
const DEFAULT_COLUMNS = 12;
|
|
677
|
-
const DEFAULT_GAP = '
|
|
672
|
+
const DEFAULT_GAP = '0';
|
|
678
673
|
class KlesFormElementsComponent {
|
|
679
674
|
constructor() {
|
|
680
675
|
this._elements = [];
|
|
@@ -786,7 +781,7 @@ class KlesFormElementsComponent {
|
|
|
786
781
|
</div>
|
|
787
782
|
}
|
|
788
783
|
}
|
|
789
|
-
`, isInline: true, styles: [".kles-layout-item{min-width:0;grid-column-start:var(--kles-effective-col-start, var(--kles-col-start, auto));grid-column-end:span var(--kles-effective-col-span, var(--kles-col-span, 12));grid-row-start:var(--kles-effective-row-start, var(--kles-row-start, auto));grid-row-end:span var(--kles-effective-row-span, var(--kles-row-span, 1))}.kles-layout-grid{display:grid;grid-template-columns:repeat(var(--kles-grid-columns, 12),minmax(0,1fr));gap:var(--kles-grid-gap,
|
|
784
|
+
`, isInline: true, styles: [".kles-layout-item{min-width:0;grid-column-start:var(--kles-effective-col-start, var(--kles-col-start, auto));grid-column-end:span var(--kles-effective-col-span, var(--kles-col-span, 12));grid-row-start:var(--kles-effective-row-start, var(--kles-row-start, auto));grid-row-end:span var(--kles-effective-row-span, var(--kles-row-span, 1))}.kles-layout-grid{display:grid;grid-template-columns:repeat(var(--kles-grid-columns, 12),minmax(0,1fr));gap:var(--kles-grid-gap, 0)}.kles-form-section-header{margin-bottom:14px}.kles-form-section-title{display:flex;align-items:center;gap:8px}.kles-form-section-title mat-icon{width:24px;height:24px;font-size:24px;color:var(--mat-sys-primary, currentColor)}.kles-form-section-header h3{margin:0;font-size:1.25rem;line-height:1.5rem;font-weight:500}.kles-form-section-header p{margin:4px 0 0}.kles-form-divider{border:0;border-top:1px solid currentColor;margin:8px 0;opacity:.2}@media(max-width:599.98px){.kles-layout-item{--kles-effective-col-span: var(--kles-col-span-xs, var(--kles-col-span, 12));--kles-effective-row-span: var(--kles-row-span-xs, var(--kles-row-span, 1));--kles-effective-col-start: var(--kles-col-start-xs, var(--kles-col-start, auto));--kles-effective-row-start: var(--kles-row-start-xs, var(--kles-row-start, auto))}}@media(min-width:600px){.kles-layout-item{--kles-effective-col-span: var(--kles-col-span-sm, var(--kles-col-span, 12));--kles-effective-row-span: var(--kles-row-span-sm, var(--kles-row-span, 1));--kles-effective-col-start: var(--kles-col-start-sm, var(--kles-col-start, auto));--kles-effective-row-start: var(--kles-row-start-sm, var(--kles-row-start, auto))}}@media(min-width:960px){.kles-layout-item{--kles-effective-col-span: var(--kles-col-span-md, var(--kles-col-span-sm, var(--kles-col-span, 12)));--kles-effective-row-span: var(--kles-row-span-md, var(--kles-row-span-sm, var(--kles-row-span, 1)));--kles-effective-col-start: var(--kles-col-start-md, var(--kles-col-start-sm, var(--kles-col-start, auto)));--kles-effective-row-start: var(--kles-row-start-md, var(--kles-row-start-sm, var(--kles-row-start, auto)))}}@media(min-width:1280px){.kles-layout-item{--kles-effective-col-span: var(--kles-col-span-lg, var(--kles-col-span-md, var(--kles-col-span-sm, var(--kles-col-span, 12))));--kles-effective-row-span: var(--kles-row-span-lg, var(--kles-row-span-md, var(--kles-row-span-sm, var(--kles-row-span, 1))));--kles-effective-col-start: var(--kles-col-start-lg, var(--kles-col-start-md, var(--kles-col-start-sm, var(--kles-col-start, auto))));--kles-effective-row-start: var(--kles-row-start-lg, var(--kles-row-start-md, var(--kles-row-start-sm, var(--kles-row-start, auto))))}}@media(min-width:1920px){.kles-layout-item{--kles-effective-col-span: var(--kles-col-span-xl, var(--kles-col-span-lg, var(--kles-col-span-md, var(--kles-col-span-sm, var(--kles-col-span, 12)))));--kles-effective-row-span: var(--kles-row-span-xl, var(--kles-row-span-lg, var(--kles-row-span-md, var(--kles-row-span-sm, var(--kles-row-span, 1)))));--kles-effective-col-start: var(--kles-col-start-xl, var(--kles-col-start-lg, var(--kles-col-start-md, var(--kles-col-start-sm, var(--kles-col-start, auto)))));--kles-effective-row-start: var(--kles-row-start-xl, var(--kles-row-start-lg, var(--kles-row-start-md, var(--kles-row-start-sm, var(--kles-row-start, auto)))))}}\n"], dependencies: [{ kind: "component", type: KlesFormElementsComponent, selector: "kles-form-elements", inputs: ["elements", "group", "ui", "context", "layoutConfig"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
790
785
|
}
|
|
791
786
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesFormElementsComponent, decorators: [{
|
|
792
787
|
type: Component,
|
|
@@ -827,7 +822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
827
822
|
</div>
|
|
828
823
|
}
|
|
829
824
|
}
|
|
830
|
-
`, styles: [".kles-layout-item{min-width:0;grid-column-start:var(--kles-effective-col-start, var(--kles-col-start, auto));grid-column-end:span var(--kles-effective-col-span, var(--kles-col-span, 12));grid-row-start:var(--kles-effective-row-start, var(--kles-row-start, auto));grid-row-end:span var(--kles-effective-row-span, var(--kles-row-span, 1))}.kles-layout-grid{display:grid;grid-template-columns:repeat(var(--kles-grid-columns, 12),minmax(0,1fr));gap:var(--kles-grid-gap,
|
|
825
|
+
`, styles: [".kles-layout-item{min-width:0;grid-column-start:var(--kles-effective-col-start, var(--kles-col-start, auto));grid-column-end:span var(--kles-effective-col-span, var(--kles-col-span, 12));grid-row-start:var(--kles-effective-row-start, var(--kles-row-start, auto));grid-row-end:span var(--kles-effective-row-span, var(--kles-row-span, 1))}.kles-layout-grid{display:grid;grid-template-columns:repeat(var(--kles-grid-columns, 12),minmax(0,1fr));gap:var(--kles-grid-gap, 0)}.kles-form-section-header{margin-bottom:14px}.kles-form-section-title{display:flex;align-items:center;gap:8px}.kles-form-section-title mat-icon{width:24px;height:24px;font-size:24px;color:var(--mat-sys-primary, currentColor)}.kles-form-section-header h3{margin:0;font-size:1.25rem;line-height:1.5rem;font-weight:500}.kles-form-section-header p{margin:4px 0 0}.kles-form-divider{border:0;border-top:1px solid currentColor;margin:8px 0;opacity:.2}@media(max-width:599.98px){.kles-layout-item{--kles-effective-col-span: var(--kles-col-span-xs, var(--kles-col-span, 12));--kles-effective-row-span: var(--kles-row-span-xs, var(--kles-row-span, 1));--kles-effective-col-start: var(--kles-col-start-xs, var(--kles-col-start, auto));--kles-effective-row-start: var(--kles-row-start-xs, var(--kles-row-start, auto))}}@media(min-width:600px){.kles-layout-item{--kles-effective-col-span: var(--kles-col-span-sm, var(--kles-col-span, 12));--kles-effective-row-span: var(--kles-row-span-sm, var(--kles-row-span, 1));--kles-effective-col-start: var(--kles-col-start-sm, var(--kles-col-start, auto));--kles-effective-row-start: var(--kles-row-start-sm, var(--kles-row-start, auto))}}@media(min-width:960px){.kles-layout-item{--kles-effective-col-span: var(--kles-col-span-md, var(--kles-col-span-sm, var(--kles-col-span, 12)));--kles-effective-row-span: var(--kles-row-span-md, var(--kles-row-span-sm, var(--kles-row-span, 1)));--kles-effective-col-start: var(--kles-col-start-md, var(--kles-col-start-sm, var(--kles-col-start, auto)));--kles-effective-row-start: var(--kles-row-start-md, var(--kles-row-start-sm, var(--kles-row-start, auto)))}}@media(min-width:1280px){.kles-layout-item{--kles-effective-col-span: var(--kles-col-span-lg, var(--kles-col-span-md, var(--kles-col-span-sm, var(--kles-col-span, 12))));--kles-effective-row-span: var(--kles-row-span-lg, var(--kles-row-span-md, var(--kles-row-span-sm, var(--kles-row-span, 1))));--kles-effective-col-start: var(--kles-col-start-lg, var(--kles-col-start-md, var(--kles-col-start-sm, var(--kles-col-start, auto))));--kles-effective-row-start: var(--kles-row-start-lg, var(--kles-row-start-md, var(--kles-row-start-sm, var(--kles-row-start, auto))))}}@media(min-width:1920px){.kles-layout-item{--kles-effective-col-span: var(--kles-col-span-xl, var(--kles-col-span-lg, var(--kles-col-span-md, var(--kles-col-span-sm, var(--kles-col-span, 12)))));--kles-effective-row-span: var(--kles-row-span-xl, var(--kles-row-span-lg, var(--kles-row-span-md, var(--kles-row-span-sm, var(--kles-row-span, 1)))));--kles-effective-col-start: var(--kles-col-start-xl, var(--kles-col-start-lg, var(--kles-col-start-md, var(--kles-col-start-sm, var(--kles-col-start, auto)))));--kles-effective-row-start: var(--kles-row-start-xl, var(--kles-row-start-lg, var(--kles-row-start-md, var(--kles-row-start-sm, var(--kles-row-start, auto)))))}}\n"] }]
|
|
831
826
|
}], propDecorators: { elements: [{
|
|
832
827
|
type: Input,
|
|
833
828
|
args: [{ required: true }]
|
|
@@ -843,6 +838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
843
838
|
type: Input
|
|
844
839
|
}] } });
|
|
845
840
|
|
|
841
|
+
const DEFAULT_GRID_GAP = '0';
|
|
846
842
|
class KlesDynamicFormComponent {
|
|
847
843
|
get orientationClass() {
|
|
848
844
|
if (this.hasRootElementLayout && this.direction !== 'inline-grid')
|
|
@@ -867,7 +863,7 @@ class KlesDynamicFormComponent {
|
|
|
867
863
|
return null;
|
|
868
864
|
return {
|
|
869
865
|
'--kles-grid-columns': this.normalizeColumns(this.layout.columns),
|
|
870
|
-
'--kles-grid-gap': this.layout.gap?.trim() ||
|
|
866
|
+
'--kles-grid-gap': this.layout.gap?.trim() || DEFAULT_GRID_GAP,
|
|
871
867
|
};
|
|
872
868
|
}
|
|
873
869
|
get hasRootElementLayout() {
|
|
@@ -1036,7 +1032,7 @@ class KlesDynamicFormComponent {
|
|
|
1036
1032
|
<mat-error matErrorForm [form]="form" [validations]="validators" [asyncValidations]="asyncValidators"></mat-error>
|
|
1037
1033
|
}
|
|
1038
1034
|
</form>
|
|
1039
|
-
`, 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.dynamic-form-nowrap{flex-wrap:nowrap}\n", ".dynamic-form-row>*{width:100%}\n", ".dynamic-form-grid{display:grid;grid-template-columns:repeat(var(--kles-grid-columns, 12),minmax(0,1fr));gap:var(--kles-grid-gap,
|
|
1035
|
+
`, 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.dynamic-form-nowrap{flex-wrap:nowrap}\n", ".dynamic-form-row>*{width:100%}\n", ".dynamic-form-grid{display:grid;grid-template-columns:repeat(var(--kles-grid-columns, 12),minmax(0,1fr));gap:var(--kles-grid-gap, 0)}\n", ".dynamic-form-inline-grid{display:inline-grid;grid-template-columns:repeat(var(--kles-grid-columns, 12),minmax(0,1fr));gap:var(--kles-grid-gap, 0)}\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: "component", type: MatErrorFormDirective, selector: "[matErrorForm]", inputs: ["form", "validations", "asyncValidations"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "component", type: KlesFormElementsComponent, selector: "kles-form-elements", inputs: ["elements", "group", "ui", "context", "layoutConfig"] }, { 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"] }] }); }
|
|
1040
1036
|
}
|
|
1041
1037
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesDynamicFormComponent, decorators: [{
|
|
1042
1038
|
type: Component,
|
|
@@ -1055,7 +1051,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
1055
1051
|
<mat-error matErrorForm [form]="form" [validations]="validators" [asyncValidations]="asyncValidators"></mat-error>
|
|
1056
1052
|
}
|
|
1057
1053
|
</form>
|
|
1058
|
-
`, providers: [{ provide: ErrorStateMatcher, useClass: KlesFormErrorStateMatcher }], imports: [CommonModule, MatErrorFormDirective, KlesDynamicFieldDirective, KlesFormElementsComponent, 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.dynamic-form-nowrap{flex-wrap:nowrap}\n", ".dynamic-form-row>*{width:100%}\n", ".dynamic-form-grid{display:grid;grid-template-columns:repeat(var(--kles-grid-columns, 12),minmax(0,1fr));gap:var(--kles-grid-gap,
|
|
1054
|
+
`, providers: [{ provide: ErrorStateMatcher, useClass: KlesFormErrorStateMatcher }], imports: [CommonModule, MatErrorFormDirective, KlesDynamicFieldDirective, KlesFormElementsComponent, 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.dynamic-form-nowrap{flex-wrap:nowrap}\n", ".dynamic-form-row>*{width:100%}\n", ".dynamic-form-grid{display:grid;grid-template-columns:repeat(var(--kles-grid-columns, 12),minmax(0,1fr));gap:var(--kles-grid-gap, 0)}\n", ".dynamic-form-inline-grid{display:inline-grid;grid-template-columns:repeat(var(--kles-grid-columns, 12),minmax(0,1fr));gap:var(--kles-grid-gap, 0)}\n"] }]
|
|
1059
1055
|
}], ctorParameters: () => [{ type: i2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { context: [{
|
|
1060
1056
|
type: Input
|
|
1061
1057
|
}], fields: [{
|
|
@@ -1621,13 +1617,11 @@ class MatErrorMessageDirective {
|
|
|
1621
1617
|
}
|
|
1622
1618
|
}
|
|
1623
1619
|
}
|
|
1624
|
-
`, isInline: true }); }
|
|
1620
|
+
`, isInline: true, styles: [":host{overflow-wrap:break-word}\n"] }); }
|
|
1625
1621
|
}
|
|
1626
1622
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MatErrorMessageDirective, decorators: [{
|
|
1627
1623
|
type: Component,
|
|
1628
|
-
args: [{
|
|
1629
|
-
selector: '[matErrorMessage]',
|
|
1630
|
-
template: `
|
|
1624
|
+
args: [{ selector: '[matErrorMessage]', template: `
|
|
1631
1625
|
@if (errors(); as errors) {
|
|
1632
1626
|
@for (validation of validationsKeys(); track validation.name) {
|
|
1633
1627
|
@if (errors[validation.name] && validation.message) {
|
|
@@ -1641,9 +1635,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
1641
1635
|
}
|
|
1642
1636
|
}
|
|
1643
1637
|
}
|
|
1644
|
-
`,
|
|
1645
|
-
standalone: true,
|
|
1646
|
-
}]
|
|
1638
|
+
`, standalone: true, styles: [":host{overflow-wrap:break-word}\n"] }]
|
|
1647
1639
|
}], propDecorators: { validations: [{ type: i0.Input, args: [{ isSignal: true, alias: "validations", required: false }] }], asyncValidations: [{ type: i0.Input, args: [{ isSignal: true, alias: "asyncValidations", required: false }] }] } });
|
|
1648
1640
|
|
|
1649
1641
|
class KlesDynamicFormIntl {
|
|
@@ -1652,7 +1644,10 @@ class KlesDynamicFormIntl {
|
|
|
1652
1644
|
this.selectAll = 'Select all';
|
|
1653
1645
|
this.clearSearch = 'Clear';
|
|
1654
1646
|
this.search = 'Search';
|
|
1647
|
+
this.add = 'Add';
|
|
1648
|
+
this.delete = 'Delete';
|
|
1655
1649
|
this.copy = 'Copied value';
|
|
1650
|
+
this.empty = 'No items';
|
|
1656
1651
|
this.imageUploadChange = 'Change image';
|
|
1657
1652
|
this.imageUploadDelete = 'Delete';
|
|
1658
1653
|
this.imageUploadInvalidType = 'Unsupported image format.';
|
|
@@ -2088,50 +2083,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
2088
2083
|
`, standalone: true, imports: [CommonModule, ReactiveFormsModule, MatCheckbox, MatTooltip, KlesFocusTargetDirective] }]
|
|
2089
2084
|
}], propDecorators: { checkbox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatCheckbox), { isSignal: true }] }] } });
|
|
2090
2085
|
|
|
2086
|
+
function createKlesFormArrayGroup(field, ref, value) {
|
|
2087
|
+
const line = {
|
|
2088
|
+
...(value ?? {}),
|
|
2089
|
+
_id: value?._id ?? v4(),
|
|
2090
|
+
};
|
|
2091
|
+
const group = new UntypedFormGroup({
|
|
2092
|
+
_id: new FormControl(line._id),
|
|
2093
|
+
});
|
|
2094
|
+
for (const subfield of field.collections ?? []) {
|
|
2095
|
+
const data = line[subfield.name];
|
|
2096
|
+
const childField = {
|
|
2097
|
+
...subfield,
|
|
2098
|
+
...(data !== undefined ? { value: data } : {}),
|
|
2099
|
+
};
|
|
2100
|
+
let control;
|
|
2101
|
+
if (subfield.type) {
|
|
2102
|
+
control = componentMapper.find((c) => c.type === subfield.type)?.factory(childField, ref) ?? klesFieldControlFactory(childField, ref);
|
|
2103
|
+
}
|
|
2104
|
+
else {
|
|
2105
|
+
control = componentMapper.find((c) => c.component === subfield.component)?.factory(childField, ref) ?? klesFieldControlFactory(childField, ref);
|
|
2106
|
+
}
|
|
2107
|
+
group.addControl(subfield.name, control);
|
|
2108
|
+
}
|
|
2109
|
+
return group;
|
|
2110
|
+
}
|
|
2111
|
+
|
|
2091
2112
|
class KlesFormArray extends KlesFormControl {
|
|
2092
2113
|
create() {
|
|
2093
2114
|
const array = new FormArray([], {
|
|
2094
2115
|
validators: this.bindValidations(this.field.validations || []),
|
|
2095
2116
|
asyncValidators: this.bindAsyncValidations(this.field.asyncValidations || []),
|
|
2096
|
-
updateOn: this.field.updateOn || 'change'
|
|
2117
|
+
updateOn: this.field.updateOn || 'change',
|
|
2097
2118
|
});
|
|
2098
|
-
if (
|
|
2099
|
-
|
|
2100
|
-
this.field.value
|
|
2101
|
-
const line = { ...val, _id: val?._id || v4() };
|
|
2102
|
-
const group = new UntypedFormGroup({ _id: new FormControl(line._id) });
|
|
2103
|
-
this.field.collections?.forEach(subfield => {
|
|
2104
|
-
const data = line[subfield.name] || null;
|
|
2105
|
-
let control;
|
|
2106
|
-
if (subfield.type) {
|
|
2107
|
-
control = componentMapper.find(c => c.type === subfield.type)?.factory({ ...subfield, ...(data && { value: data }) }, this.ref)
|
|
2108
|
-
|| klesFieldControlFactory({ ...subfield, ...(data && { value: data }) }, this.ref);
|
|
2109
|
-
}
|
|
2110
|
-
else {
|
|
2111
|
-
control = componentMapper.find(c => c.component === subfield.component)?.factory({ ...subfield, ...(data && { value: data }) }, this.ref)
|
|
2112
|
-
|| klesFieldControlFactory({ ...subfield, ...(data && { value: data }) }, this.ref);
|
|
2113
|
-
}
|
|
2114
|
-
group.addControl(subfield.name, control);
|
|
2115
|
-
});
|
|
2116
|
-
array.push(group);
|
|
2117
|
-
});
|
|
2119
|
+
if (Array.isArray(this.field.value)) {
|
|
2120
|
+
for (const value of this.field.value) {
|
|
2121
|
+
array.push(createKlesFormArrayGroup(this.field, this.ref, value));
|
|
2118
2122
|
}
|
|
2119
2123
|
}
|
|
2120
2124
|
else {
|
|
2121
|
-
|
|
2122
|
-
this.field.collections?.forEach(subfield => {
|
|
2123
|
-
let control;
|
|
2124
|
-
if (subfield.type) {
|
|
2125
|
-
control = componentMapper.find(c => c.type === subfield.type)?.factory({ ...subfield }, this.ref)
|
|
2126
|
-
|| klesFieldControlFactory({ ...subfield }, this.ref);
|
|
2127
|
-
}
|
|
2128
|
-
else {
|
|
2129
|
-
control = componentMapper.find(c => c.component === subfield.component)?.factory({ ...subfield }, this.ref)
|
|
2130
|
-
|| klesFieldControlFactory({ ...subfield }, this.ref);
|
|
2131
|
-
}
|
|
2132
|
-
group.addControl(subfield.name, control);
|
|
2133
|
-
});
|
|
2134
|
-
array.push(group);
|
|
2125
|
+
array.push(createKlesFormArrayGroup(this.field, this.ref));
|
|
2135
2126
|
}
|
|
2136
2127
|
if (this.field.disabled) {
|
|
2137
2128
|
array.disable();
|
|
@@ -2142,98 +2133,112 @@ class KlesFormArray extends KlesFormControl {
|
|
|
2142
2133
|
|
|
2143
2134
|
let KlesFormListFieldComponent = class KlesFormListFieldComponent extends KlesFieldAbstract {
|
|
2144
2135
|
constructor() {
|
|
2145
|
-
super(
|
|
2136
|
+
super();
|
|
2137
|
+
this.intl = inject(KlesDynamicFormIntl);
|
|
2146
2138
|
this.collections = signal([], /* @ts-ignore */
|
|
2147
2139
|
...(ngDevMode ? [{ debugName: "collections" }] : /* istanbul ignore next */ []));
|
|
2148
|
-
this.fb = inject(UntypedFormBuilder);
|
|
2149
|
-
}
|
|
2150
|
-
ngOnInit() {
|
|
2151
2140
|
this.formArray = this.group.controls[this.field.name];
|
|
2152
2141
|
this.collections.set(this.formArray.controls.map(() => {
|
|
2153
|
-
return
|
|
2142
|
+
return cloneDeep(this.field.collections ?? []);
|
|
2154
2143
|
}));
|
|
2144
|
+
}
|
|
2145
|
+
ngOnInit() {
|
|
2155
2146
|
super.ngOnInit();
|
|
2156
2147
|
}
|
|
2157
|
-
|
|
2158
|
-
|
|
2159
|
-
|
|
2160
|
-
|
|
2161
|
-
|
|
2162
|
-
|
|
2163
|
-
|
|
2148
|
+
get hasLayout() {
|
|
2149
|
+
return (this.field.collections ?? []).some((subfield) => subfield.layout != null);
|
|
2150
|
+
}
|
|
2151
|
+
get fieldsDirection() {
|
|
2152
|
+
if (this.hasLayout) {
|
|
2153
|
+
return this.field.direction === 'inline-grid' ? 'inline-grid' : 'grid';
|
|
2154
|
+
}
|
|
2155
|
+
return this.field.direction ?? 'row';
|
|
2164
2156
|
}
|
|
2165
2157
|
deleteField(index) {
|
|
2166
|
-
this.collections.update((collections) => collections.filter((_, currentIndex) => currentIndex !== index));
|
|
2167
2158
|
this.formArray.removeAt(index);
|
|
2159
|
+
this.collections.update((collections) => collections.filter((_, currentIndex) => currentIndex !== index));
|
|
2168
2160
|
}
|
|
2169
2161
|
addField() {
|
|
2170
|
-
|
|
2171
|
-
this.collections.update((collections) => [...collections,
|
|
2172
|
-
this.formArray.push(this.createFormGroup());
|
|
2162
|
+
this.formArray.push(createKlesFormArrayGroup(this.field));
|
|
2163
|
+
this.collections.update((collections) => [...collections, cloneDeep(this.field.collections ?? [])]);
|
|
2173
2164
|
}
|
|
2174
|
-
|
|
2175
|
-
|
|
2176
|
-
const validList = [];
|
|
2177
|
-
validations.forEach((valid) => {
|
|
2178
|
-
validList.push(valid.validator);
|
|
2179
|
-
});
|
|
2180
|
-
return Validators.compose(validList);
|
|
2181
|
-
}
|
|
2182
|
-
return null;
|
|
2165
|
+
ngOnDestroy() {
|
|
2166
|
+
super.ngOnDestroy();
|
|
2183
2167
|
}
|
|
2184
|
-
|
|
2185
|
-
|
|
2186
|
-
|
|
2187
|
-
|
|
2188
|
-
|
|
2189
|
-
});
|
|
2190
|
-
return Validators.composeAsync(validList);
|
|
2168
|
+
getGridColumn(field) {
|
|
2169
|
+
const colSpan = field.layout?.colSpan ?? 12;
|
|
2170
|
+
const colStart = field.layout?.colStart;
|
|
2171
|
+
if (colStart) {
|
|
2172
|
+
return `${colStart} / span ${colSpan}`;
|
|
2191
2173
|
}
|
|
2192
|
-
return
|
|
2174
|
+
return `span ${colSpan}`;
|
|
2193
2175
|
}
|
|
2194
|
-
|
|
2195
|
-
|
|
2176
|
+
getGridRow(field) {
|
|
2177
|
+
const rowSpan = field.layout?.rowSpan;
|
|
2178
|
+
const rowStart = field.layout?.rowStart;
|
|
2179
|
+
if (rowStart && rowSpan) {
|
|
2180
|
+
return `${rowStart} / span ${rowSpan}`;
|
|
2181
|
+
}
|
|
2182
|
+
if (rowStart) {
|
|
2183
|
+
return `${rowStart}`;
|
|
2184
|
+
}
|
|
2185
|
+
if (rowSpan) {
|
|
2186
|
+
return `span ${rowSpan}`;
|
|
2187
|
+
}
|
|
2188
|
+
return undefined;
|
|
2196
2189
|
}
|
|
2197
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesFormListFieldComponent, deps:
|
|
2190
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesFormListFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2198
2191
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: KlesFormListFieldComponent, isStandalone: true, selector: "kles-form-listfield", usesInheritance: true, ngImport: i0, template: `
|
|
2199
|
-
<div [formGroup]="group" class="form-element">
|
|
2200
|
-
<div class="
|
|
2201
|
-
|
|
2202
|
-
|
|
2192
|
+
<div [formGroup]="group" class="form-element list-field">
|
|
2193
|
+
<div class="list-field__header">
|
|
2194
|
+
@if (label()) {
|
|
2195
|
+
<span class="list-field__label">
|
|
2196
|
+
{{ label() }}
|
|
2197
|
+
</span>
|
|
2198
|
+
}
|
|
2199
|
+
|
|
2200
|
+
<button type="button" matButton class="list-field__add" (click)="addField()">
|
|
2203
2201
|
<mat-icon>add</mat-icon>
|
|
2202
|
+
{{ intl.add }}
|
|
2204
2203
|
</button>
|
|
2205
2204
|
</div>
|
|
2206
2205
|
|
|
2207
|
-
<div class="
|
|
2208
|
-
@for (subGroup of formArray.controls; track subGroup
|
|
2209
|
-
<div class="
|
|
2210
|
-
|
|
2211
|
-
|
|
2212
|
-
|
|
2213
|
-
|
|
2214
|
-
|
|
2215
|
-
|
|
2216
|
-
|
|
2217
|
-
|
|
2206
|
+
<div class="list-field__content" [formArrayName]="field.name">
|
|
2207
|
+
@for (subGroup of formArray.controls; track subGroup; let idx = $index) {
|
|
2208
|
+
<div class="list-field__row">
|
|
2209
|
+
<div
|
|
2210
|
+
class="list-field__fields"
|
|
2211
|
+
[class.list-field__fields--column]="fieldsDirection === 'column'"
|
|
2212
|
+
[class.list-field__fields--row]="fieldsDirection === 'row'"
|
|
2213
|
+
[class.list-field__fields--grid]="fieldsDirection === 'grid'"
|
|
2214
|
+
[class.list-field__fields--inline-grid]="fieldsDirection === 'inline-grid'"
|
|
2215
|
+
[class.list-field__fields--nowrap]="fieldsDirection === 'row' && field.wrap === false"
|
|
2216
|
+
>
|
|
2217
|
+
@for (subfield of collections()[idx]; track subfield.name) {
|
|
2218
|
+
<div class="list-field__field" [style.grid-column]="getGridColumn(subfield)" [style.grid-row]="getGridRow(subfield)">
|
|
2219
|
+
<ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="collections()[idx]" [context]="context" />
|
|
2220
|
+
</div>
|
|
2221
|
+
}
|
|
2222
|
+
</div>
|
|
2223
|
+
|
|
2224
|
+
<button type="button" matIconButton class="list-field__delete" [attr.aria-label]="intl.delete" (click)="deleteField(idx)">
|
|
2225
|
+
<mat-icon>delete_outline</mat-icon>
|
|
2226
|
+
</button>
|
|
2218
2227
|
</div>
|
|
2219
2228
|
}
|
|
2220
|
-
|
|
2221
|
-
|
|
2222
|
-
|
|
2223
|
-
|
|
2224
|
-
|
|
2225
|
-
</ng-container>
|
|
2226
|
-
}
|
|
2227
|
-
@for (validation of field.asyncValidations; track validation.name) {
|
|
2228
|
-
<ng-container ngProjectAs="mat-error">
|
|
2229
|
-
@if (validation.name && group.controls[field.name].hasError(validation.name)) {
|
|
2230
|
-
<mat-error>{{ validation.message }}</mat-error>
|
|
2231
|
-
}
|
|
2232
|
-
</ng-container>
|
|
2229
|
+
|
|
2230
|
+
@if (formArray.length === 0) {
|
|
2231
|
+
<div class="list-field__empty">
|
|
2232
|
+
{{ intl.empty }}
|
|
2233
|
+
</div>
|
|
2233
2234
|
}
|
|
2234
2235
|
</div>
|
|
2236
|
+
|
|
2237
|
+
<div class="list-field__errors">
|
|
2238
|
+
<mat-error matErrorForm [form]="formArray" [validations]="field.validations" [asyncValidations]="field.asyncValidations" />
|
|
2239
|
+
</div>
|
|
2235
2240
|
</div>
|
|
2236
|
-
`, isInline: true, styles: [".
|
|
2241
|
+
`, isInline: true, styles: [":host{display:block;width:100%;min-width:0}.list-field{display:flex;flex-direction:column;gap:8px;width:100%;min-width:0}.list-field__header{display:flex;align-items:center;gap:8px;min-height:36px}.list-field__label{min-width:0;font-weight:500}.list-field__add{margin-left:auto;flex-shrink:0}.list-field__content{display:flex;flex-direction:column;gap:10px;width:100%;min-width:0}.list-field__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px;width:100%;min-width:0}.list-field__fields{width:100%;min-width:0}.list-field__fields--column{display:flex;flex-direction:column;gap:10px}.list-field__fields--column>.list-field__field{width:100%}.list-field__fields--row{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:10px}.list-field__fields--row>.list-field__field{flex:1 1 0;width:auto;min-width:0}.list-field__fields--row.list-field__fields--nowrap{flex-wrap:nowrap}.list-field__fields--grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}.list-field__fields--inline-grid{display:inline-grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}.list-field__field{width:100%;min-width:0}.list-field__delete{align-self:start;margin-top:4px;flex-shrink:0}.list-field__empty{padding:16px;text-align:center;opacity:.7}.list-field__errors{display:flex;flex-direction:column;gap:4px;min-width:0}\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.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { 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: MatErrorFormDirective, selector: "[matErrorForm]", inputs: ["form", "validations", "asyncValidations"] }] }); }
|
|
2237
2242
|
};
|
|
2238
2243
|
KlesFormListFieldComponent = __decorate([
|
|
2239
2244
|
FieldMapper({ type: 'listfield', factory: (field) => new KlesFormArray(field).create() })
|
|
@@ -2241,45 +2246,57 @@ KlesFormListFieldComponent = __decorate([
|
|
|
2241
2246
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesFormListFieldComponent, decorators: [{
|
|
2242
2247
|
type: Component,
|
|
2243
2248
|
args: [{ selector: 'kles-form-listfield', template: `
|
|
2244
|
-
<div [formGroup]="group" class="form-element">
|
|
2245
|
-
<div class="
|
|
2246
|
-
|
|
2247
|
-
|
|
2249
|
+
<div [formGroup]="group" class="form-element list-field">
|
|
2250
|
+
<div class="list-field__header">
|
|
2251
|
+
@if (label()) {
|
|
2252
|
+
<span class="list-field__label">
|
|
2253
|
+
{{ label() }}
|
|
2254
|
+
</span>
|
|
2255
|
+
}
|
|
2256
|
+
|
|
2257
|
+
<button type="button" matButton class="list-field__add" (click)="addField()">
|
|
2248
2258
|
<mat-icon>add</mat-icon>
|
|
2259
|
+
{{ intl.add }}
|
|
2249
2260
|
</button>
|
|
2250
2261
|
</div>
|
|
2251
2262
|
|
|
2252
|
-
<div class="
|
|
2253
|
-
@for (subGroup of formArray.controls; track subGroup
|
|
2254
|
-
<div class="
|
|
2255
|
-
|
|
2256
|
-
|
|
2257
|
-
|
|
2258
|
-
|
|
2259
|
-
|
|
2260
|
-
|
|
2261
|
-
|
|
2262
|
-
|
|
2263
|
+
<div class="list-field__content" [formArrayName]="field.name">
|
|
2264
|
+
@for (subGroup of formArray.controls; track subGroup; let idx = $index) {
|
|
2265
|
+
<div class="list-field__row">
|
|
2266
|
+
<div
|
|
2267
|
+
class="list-field__fields"
|
|
2268
|
+
[class.list-field__fields--column]="fieldsDirection === 'column'"
|
|
2269
|
+
[class.list-field__fields--row]="fieldsDirection === 'row'"
|
|
2270
|
+
[class.list-field__fields--grid]="fieldsDirection === 'grid'"
|
|
2271
|
+
[class.list-field__fields--inline-grid]="fieldsDirection === 'inline-grid'"
|
|
2272
|
+
[class.list-field__fields--nowrap]="fieldsDirection === 'row' && field.wrap === false"
|
|
2273
|
+
>
|
|
2274
|
+
@for (subfield of collections()[idx]; track subfield.name) {
|
|
2275
|
+
<div class="list-field__field" [style.grid-column]="getGridColumn(subfield)" [style.grid-row]="getGridRow(subfield)">
|
|
2276
|
+
<ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="collections()[idx]" [context]="context" />
|
|
2277
|
+
</div>
|
|
2278
|
+
}
|
|
2279
|
+
</div>
|
|
2280
|
+
|
|
2281
|
+
<button type="button" matIconButton class="list-field__delete" [attr.aria-label]="intl.delete" (click)="deleteField(idx)">
|
|
2282
|
+
<mat-icon>delete_outline</mat-icon>
|
|
2283
|
+
</button>
|
|
2263
2284
|
</div>
|
|
2264
2285
|
}
|
|
2265
|
-
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
</ng-container>
|
|
2271
|
-
}
|
|
2272
|
-
@for (validation of field.asyncValidations; track validation.name) {
|
|
2273
|
-
<ng-container ngProjectAs="mat-error">
|
|
2274
|
-
@if (validation.name && group.controls[field.name].hasError(validation.name)) {
|
|
2275
|
-
<mat-error>{{ validation.message }}</mat-error>
|
|
2276
|
-
}
|
|
2277
|
-
</ng-container>
|
|
2286
|
+
|
|
2287
|
+
@if (formArray.length === 0) {
|
|
2288
|
+
<div class="list-field__empty">
|
|
2289
|
+
{{ intl.empty }}
|
|
2290
|
+
</div>
|
|
2278
2291
|
}
|
|
2279
2292
|
</div>
|
|
2293
|
+
|
|
2294
|
+
<div class="list-field__errors">
|
|
2295
|
+
<mat-error matErrorForm [form]="formArray" [validations]="field.validations" [asyncValidations]="field.asyncValidations" />
|
|
2296
|
+
</div>
|
|
2280
2297
|
</div>
|
|
2281
|
-
`, standalone: true, imports: [MatError, MatIcon, MatIconButton, KlesDynamicFieldDirective, ReactiveFormsModule], styles: [".
|
|
2282
|
-
}] });
|
|
2298
|
+
`, standalone: true, imports: [MatError, MatIcon, MatIconButton, KlesDynamicFieldDirective, ReactiveFormsModule, MatButtonModule, MatErrorFormDirective], styles: [":host{display:block;width:100%;min-width:0}.list-field{display:flex;flex-direction:column;gap:8px;width:100%;min-width:0}.list-field__header{display:flex;align-items:center;gap:8px;min-height:36px}.list-field__label{min-width:0;font-weight:500}.list-field__add{margin-left:auto;flex-shrink:0}.list-field__content{display:flex;flex-direction:column;gap:10px;width:100%;min-width:0}.list-field__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px;width:100%;min-width:0}.list-field__fields{width:100%;min-width:0}.list-field__fields--column{display:flex;flex-direction:column;gap:10px}.list-field__fields--column>.list-field__field{width:100%}.list-field__fields--row{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:10px}.list-field__fields--row>.list-field__field{flex:1 1 0;width:auto;min-width:0}.list-field__fields--row.list-field__fields--nowrap{flex-wrap:nowrap}.list-field__fields--grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}.list-field__fields--inline-grid{display:inline-grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}.list-field__field{width:100%;min-width:0}.list-field__delete{align-self:start;margin-top:4px;flex-shrink:0}.list-field__empty{padding:16px;text-align:center;opacity:.7}.list-field__errors{display:flex;flex-direction:column;gap:4px;min-width:0}\n"] }]
|
|
2299
|
+
}], ctorParameters: () => [] });
|
|
2283
2300
|
|
|
2284
2301
|
class KlesFormColorComponent extends KlesFieldAbstract {
|
|
2285
2302
|
constructor() {
|
|
@@ -4252,7 +4269,7 @@ class KlesFabComponent extends KlesButtonBase {
|
|
|
4252
4269
|
<mat-icon [svgIcon]="iconSvg"></mat-icon>
|
|
4253
4270
|
}
|
|
4254
4271
|
</button>
|
|
4255
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type:
|
|
4272
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }] }); }
|
|
4256
4273
|
}
|
|
4257
4274
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesFabComponent, decorators: [{
|
|
4258
4275
|
type: Component,
|
|
@@ -4356,7 +4373,7 @@ class KlesMiniFabComponent extends KlesButtonBase {
|
|
|
4356
4373
|
<mat-icon [svgIcon]="iconSvg"></mat-icon>
|
|
4357
4374
|
}
|
|
4358
4375
|
</button>
|
|
4359
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type:
|
|
4376
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }] }); }
|
|
4360
4377
|
}
|
|
4361
4378
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesMiniFabComponent, decorators: [{
|
|
4362
4379
|
type: Component,
|
|
@@ -4449,7 +4466,7 @@ class KlesIconButtonComponent extends KlesButtonBase {
|
|
|
4449
4466
|
<mat-icon [svgIcon]="iconSvg"></mat-icon>
|
|
4450
4467
|
}
|
|
4451
4468
|
</button>
|
|
4452
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type:
|
|
4469
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.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: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
4453
4470
|
}
|
|
4454
4471
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesIconButtonComponent, decorators: [{
|
|
4455
4472
|
type: Component,
|
|
@@ -4646,7 +4663,7 @@ class KlesFormSelectionListSearchComponent extends KlesFieldAbstract {
|
|
|
4646
4663
|
}
|
|
4647
4664
|
</mat-selection-list>
|
|
4648
4665
|
</div>
|
|
4649
|
-
`, isInline: true, styles: [".selection-list{display:flex;flex-direction:column;gap:5px}\n", "mat-selection-list{width:100%;height:250px;overflow:auto;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type:
|
|
4666
|
+
`, isInline: true, styles: [".selection-list{display:flex;flex-direction:column;gap:5px}\n", "mat-selection-list{width:100%;height:250px;overflow:auto;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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: MatIconModule }, { kind: "component", type: i2$1.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: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i4$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i4$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$4.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i3$4.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: KlesFocusTargetDirective, selector: "[klesFocusTarget]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] }); }
|
|
4650
4667
|
}
|
|
4651
4668
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesFormSelectionListSearchComponent, decorators: [{
|
|
4652
4669
|
type: Component,
|
|
@@ -4830,7 +4847,7 @@ class KlesFormDateTimeComponent extends KlesFieldAbstract {
|
|
|
4830
4847
|
|
|
4831
4848
|
<mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
|
|
4832
4849
|
</mat-form-field>
|
|
4833
|
-
`, isInline: true, styles: ["mat-form-field{width:100%}\n", ".suffix{display:flex;flex-direction:row}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: 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: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "directive", type: i3$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "ngmodule", type: KlesMaterialDatepickerModule }, { kind: "component", type: i4$
|
|
4850
|
+
`, isInline: true, styles: ["mat-form-field{width:100%}\n", ".suffix{display:flex;flex-direction:row}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: 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: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "directive", type: i3$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "ngmodule", type: KlesMaterialDatepickerModule }, { kind: "component", type: i4$2.KlesMatDatepicker, selector: "kles-mat-datepicker", outputs: ["timeSelected"], exportAs: ["klesMatDatepicker"] }, { kind: "directive", type: KlesFocusTargetDirective, selector: "[klesFocusTarget]" }] }); }
|
|
4834
4851
|
}
|
|
4835
4852
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesFormDateTimeComponent, decorators: [{
|
|
4836
4853
|
type: Component,
|
|
@@ -4899,7 +4916,7 @@ class KlesFormCopyComponent {
|
|
|
4899
4916
|
<button #tooltip="matTooltip" matIconButton color="primary" type="button" (click)="copy($event)" [matTooltipDisabled]="true" [matTooltip]="tooltipText" matTooltipPosition="above">
|
|
4900
4917
|
<mat-icon>content_copy</mat-icon>
|
|
4901
4918
|
</button>
|
|
4902
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type:
|
|
4919
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.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: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ClipboardModule }] }); }
|
|
4903
4920
|
}
|
|
4904
4921
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesFormCopyComponent, decorators: [{
|
|
4905
4922
|
type: Component,
|
|
@@ -5016,7 +5033,7 @@ let KlesFormActionMenuComponent = class KlesFormActionMenuComponent extends Kles
|
|
|
5016
5033
|
</button>
|
|
5017
5034
|
}
|
|
5018
5035
|
</mat-menu>
|
|
5019
|
-
`, isInline: true, styles: [".kles-action-menu__warn{color:var(--mat-sys-error)}.kles-action-menu__warn mat-icon{color:var(--mat-sys-error)}\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: MatButtonModule }, { kind: "component", type:
|
|
5036
|
+
`, isInline: true, styles: [".kles-action-menu__warn{color:var(--mat-sys-error)}.kles-action-menu__warn mat-icon{color:var(--mat-sys-error)}\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: 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: MatDividerModule }, { kind: "component", type: i3$4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5020
5037
|
};
|
|
5021
5038
|
KlesFormActionMenuComponent = __decorate([
|
|
5022
5039
|
FieldMapper({
|