@3kles/kles-material-dynamicforms 21.7.6 → 21.8.1

package/fesm2022/3kles-kles-material-dynamicforms.mjs

@@ -698,6 +698,7 @@ class KlesDynamicFormComponent {
         this.submit = new EventEmitter();
         this._onLoaded = new EventEmitter();
         this.direction = 'column';
+        this.wrap = true;
         this.orientationClass = 'dynamic-form-column';
     }
     ngOnInit() {
@@ -851,8 +852,8 @@ class KlesDynamicFormComponent {
         return uiGroup;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesDynamicFormComponent, deps: [{ token: i2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: KlesDynamicFormComponent, isStandalone: true, selector: "app-kles-dynamic-form", inputs: { context: "context", fields: "fields", validators: "validators", asyncValidators: "asyncValidators", direction: "direction", formClass: "formClass" }, outputs: { submit: "submit", _onLoaded: "_onLoaded" }, providers: [{ provide: ErrorStateMatcher, useClass: KlesFormErrorStateMatcher }], exportAs: ["klesDynamicForm"], usesOnChanges: true, ngImport: i0, template: `
-        <form class="{{ orientationClass }}" [ngClass]="formClass" [formGroup]="form" (submit)="onSubmit($event)">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: KlesDynamicFormComponent, isStandalone: true, selector: "app-kles-dynamic-form", inputs: { context: "context", fields: "fields", validators: "validators", asyncValidators: "asyncValidators", direction: "direction", wrap: "wrap", formClass: "formClass" }, outputs: { submit: "submit", _onLoaded: "_onLoaded" }, providers: [{ provide: ErrorStateMatcher, useClass: KlesFormErrorStateMatcher }], exportAs: ["klesDynamicForm"], usesOnChanges: true, ngImport: i0, template: `
+        <form class="{{ orientationClass }}" [class.dynamic-form-nowrap]="direction === 'row' && wrap === false" [ngClass]="formClass" [formGroup]="form" (submit)="onSubmit($event)">
             @for (field of fields; track field.name) {
                 @if (field.visible !== false) {
                     <ng-container klesDynamicField [field]="field" [group]="form" [ui]="ui" [siblingFields]="fields" [context]="context"> </ng-container>
@@ -862,12 +863,12 @@ class KlesDynamicFormComponent {
                 <mat-error matErrorForm [form]="form" [validations]="validators" [asyncValidations]="asyncValidators"></mat-error>
             }
         </form>
-    `, isInline: true, styles: [".dynamic-form-column{display:flex;flex-direction:column}\n", ".dynamic-form-column>*{width:100%}\n", ".dynamic-form-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline}\n", ".dynamic-form-row>*{width:100%}\n", ".dynamic-form-grid{display:grid}\n", ".dynamic-form-inline-grid{display:inline-grid}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatErrorFormDirective, selector: "[matErrorForm]", inputs: ["form", "validations", "asyncValidations"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }] }); }
+    `, 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}\n", ".dynamic-form-inline-grid{display:inline-grid}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatErrorFormDirective, selector: "[matErrorForm]", inputs: ["form", "validations", "asyncValidations"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesDynamicFormComponent, decorators: [{
             type: Component,
             args: [{ exportAs: 'klesDynamicForm', selector: 'app-kles-dynamic-form', standalone: true, template: `
-        <form class="{{ orientationClass }}" [ngClass]="formClass" [formGroup]="form" (submit)="onSubmit($event)">
+        <form class="{{ orientationClass }}" [class.dynamic-form-nowrap]="direction === 'row' && wrap === false" [ngClass]="formClass" [formGroup]="form" (submit)="onSubmit($event)">
             @for (field of fields; track field.name) {
                 @if (field.visible !== false) {
                     <ng-container klesDynamicField [field]="field" [group]="form" [ui]="ui" [siblingFields]="fields" [context]="context"> </ng-container>
@@ -877,7 +878,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                 <mat-error matErrorForm [form]="form" [validations]="validators" [asyncValidations]="asyncValidators"></mat-error>
             }
         </form>
-    `, providers: [{ provide: ErrorStateMatcher, useClass: KlesFormErrorStateMatcher }], imports: [CommonModule, MatErrorFormDirective, KlesDynamicFieldDirective, FormsModule, ReactiveFormsModule, MatError], styles: [".dynamic-form-column{display:flex;flex-direction:column}\n", ".dynamic-form-column>*{width:100%}\n", ".dynamic-form-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline}\n", ".dynamic-form-row>*{width:100%}\n", ".dynamic-form-grid{display:grid}\n", ".dynamic-form-inline-grid{display:inline-grid}\n"] }]
+    `, providers: [{ provide: ErrorStateMatcher, useClass: KlesFormErrorStateMatcher }], imports: [CommonModule, MatErrorFormDirective, KlesDynamicFieldDirective, FormsModule, ReactiveFormsModule, MatError], styles: [".dynamic-form-column{display:flex;flex-direction:column}\n", ".dynamic-form-column>*{width:100%}\n", ".dynamic-form-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline}\n", ".dynamic-form-row.dynamic-form-nowrap{flex-wrap:nowrap}\n", ".dynamic-form-row>*{width:100%}\n", ".dynamic-form-grid{display:grid}\n", ".dynamic-form-inline-grid{display:inline-grid}\n"] }]
         }], ctorParameters: () => [{ type: i2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { context: [{
                 type: Input
             }], fields: [{
@@ -892,6 +893,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                 type: Output
             }], direction: [{
                 type: Input
+            }], wrap: [{
+                type: Input
             }], formClass: [{
                 type: Input
             }] } });
@@ -2845,7 +2848,7 @@ let KlesFormGroupComponent = class KlesFormGroupComponent extends KlesFieldAbstr
         this.orientationClass = 'group-container';
     }
     get className() {
-        return this.orientationClass;
+        return this.orientationClass === 'group-container-row' && this.field.wrap === false ? `${this.orientationClass} group-container-nowrap` : this.orientationClass;
     }
     ngOnInit() {
         this.subGroup = this.group.controls[this.field.name];
@@ -2891,7 +2894,7 @@ let KlesFormGroupComponent = class KlesFormGroupComponent extends KlesFieldAbstr
                 }
             </ng-container>
         </ng-container>
-    `, isInline: true, styles: ["mat-form-field{width:100%}\n", ":host.group-container{display:flex;flex-direction:inherit;width:inherit;justify-content:inherit}\n", ":host.group-container-column{display:flex;flex-direction:column;justify-content:inherit}\n", ":host.group-container-column>*{width:100%}\n", ":host.group-container-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:inherit}\n", ":host.group-container-row>*{width:100%}\n", ":host.group-container-grid{display:grid}\n", ":host.group-container-inline-grid{display:inline-grid}\n"], dependencies: [{ kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }] }); }
+    `, isInline: true, styles: ["mat-form-field{width:100%}\n", ":host.group-container{display:flex;flex-direction:inherit;width:inherit;justify-content:inherit}\n", ":host.group-container-column{display:flex;flex-direction:column;justify-content:inherit}\n", ":host.group-container-column>*{width:100%}\n", ":host.group-container-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:inherit}\n", ":host.group-container-row.group-container-nowrap{flex-wrap:nowrap}\n", ":host.group-container-row>*{width:100%}\n", ":host.group-container-grid{display:grid}\n", ":host.group-container-inline-grid{display:inline-grid}\n"], dependencies: [{ kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }] }); }
 };
 KlesFormGroupComponent = __decorate([
     FieldMapper({ type: EnumType.group, factory: (field) => new KlesFormGroup(field).create(), ui: (field) => new KlesFormUiGroup(field).create() })
@@ -2914,7 +2917,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                 }
             </ng-container>
         </ng-container>
-    `, standalone: true, imports: [KlesDynamicFieldDirective, MatTooltip, ReactiveFormsModule], styles: ["mat-form-field{width:100%}\n", ":host.group-container{display:flex;flex-direction:inherit;width:inherit;justify-content:inherit}\n", ":host.group-container-column{display:flex;flex-direction:column;justify-content:inherit}\n", ":host.group-container-column>*{width:100%}\n", ":host.group-container-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:inherit}\n", ":host.group-container-row>*{width:100%}\n", ":host.group-container-grid{display:grid}\n", ":host.group-container-inline-grid{display:inline-grid}\n"] }]
+    `, standalone: true, imports: [KlesDynamicFieldDirective, MatTooltip, ReactiveFormsModule], styles: ["mat-form-field{width:100%}\n", ":host.group-container{display:flex;flex-direction:inherit;width:inherit;justify-content:inherit}\n", ":host.group-container-column{display:flex;flex-direction:column;justify-content:inherit}\n", ":host.group-container-column>*{width:100%}\n", ":host.group-container-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:inherit}\n", ":host.group-container-row.group-container-nowrap{flex-wrap:nowrap}\n", ":host.group-container-row>*{width:100%}\n", ":host.group-container-grid{display:grid}\n", ":host.group-container-inline-grid{display:inline-grid}\n"] }]
         }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class']
@@ -4811,6 +4814,10 @@ class KlesFormTileComponent extends KlesFieldAbstract {
         <div class="kles-tile" [ngClass]="ngClass()" [ngStyle]="ngStyle()" [matTooltip]="tooltip()">
             @if (imageUrl()) {
                 <img class="kles-tile__image" [src]="imageUrl()" [alt]="imageAlt()" />
+            } @else if (icon()) {
+                <mat-icon class="kles-tile__icon">
+                    {{ icon() }}
+                </mat-icon>
             }
 
             <div class="kles-tile__content">
@@ -4827,14 +4834,18 @@ class KlesFormTileComponent extends KlesFieldAbstract {
                 }
             </div>
         </div>
-    `, 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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, 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,.kles-tile__icon{width:36px;height:36px;flex:0 0 36px}.kles-tile__icon{display:flex;align-items:center;justify-content:center;color:var(--mat-sys-primary);font-size:28px}.kles-tile__image{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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFormTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-kles-form-tile', standalone: true, imports: [CommonModule, MatTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'app-kles-form-tile', standalone: true, imports: [CommonModule, MatTooltipModule, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
         <div class="kles-tile" [ngClass]="ngClass()" [ngStyle]="ngStyle()" [matTooltip]="tooltip()">
             @if (imageUrl()) {
                 <img class="kles-tile__image" [src]="imageUrl()" [alt]="imageAlt()" />
+            } @else if (icon()) {
+                <mat-icon class="kles-tile__icon">
+                    {{ icon() }}
+                </mat-icon>
             }
 
             <div class="kles-tile__content">
@@ -4851,7 +4862,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                 }
             </div>
         </div>
-    `, 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"] }]
+    `, styles: [":host{display:flex;justify-content:inherit}.kles-tile{display:flex;align-items:center;min-width:0;gap:12px;padding:8px}.kles-tile__image,.kles-tile__icon{width:36px;height:36px;flex:0 0 36px}.kles-tile__icon{display:flex;align-items:center;justify-content:center;color:var(--mat-sys-primary);font-size:28px}.kles-tile__image{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"] }]
         }] });
 
 /**