@3kles/kles-material-dynamicforms 14.9.8 → 14.10.1

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

@@ -7,7 +7,7 @@ import { FormControl, Validators, FormControlDirective, FormControlName, NG_VALU
 import { concat, of, Subject, Observable, BehaviorSubject, ReplaySubject } from 'rxjs';
 import { take, catchError, map, takeUntil, startWith, switchMap, debounceTime } from 'rxjs/operators';
 import * as i7$1 from '@angular/material/core';
-import { MAT_DATE_LOCALE, MAT_DATE_FORMATS, MatNativeDateModule, MatOption, ErrorStateMatcher } from '@angular/material/core';
+import { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS, MatNativeDateModule, MatOption, ErrorStateMatcher } from '@angular/material/core';
 import * as i4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i4$1 from '@angular/material/icon';
@@ -60,6 +60,7 @@ import * as i11 from '@angular/cdk/scrolling';
 import { ScrollingModule, CdkScrollable, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import * as i4$5 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { PortalModule } from '@angular/cdk/portal';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import * as i7 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
@@ -70,6 +71,8 @@ import * as i4$3 from '@angular/cdk/text-field';
 import * as i12 from 'ngx-mat-select-search';
 import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 import { v4 } from 'uuid';
+import * as i8 from '@3kles/kles-material-datepicker';
+import { KlesMaterialDatepickerModule } from '@3kles/kles-material-datepicker';
 
 class KlesFormControl {
     constructor(field) {
@@ -219,6 +222,11 @@ class KlesDynamicFieldDirective {
         }
         const options = {
             providers: this.field.dateOptions ? [
+                ...(this.field.dateOptions.adapter ? [{
+                        provide: DateAdapter,
+                        useClass: this.field.dateOptions.adapter.class,
+                        deps: this.field.dateOptions.adapter.deps || [],
+                    }] : []),
                 { provide: MAT_DATE_LOCALE, useValue: this.field.dateOptions.language },
                 { provide: MAT_DATE_FORMATS, useValue: this.field.dateOptions.dateFormat },
             ] : [],
@@ -535,7 +543,8 @@ MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         MatButtonModule,
         MatSlideToggleModule,
         ColorPickerModule,
-        MatButtonToggleModule], exports: [MatButtonModule,
+        MatButtonToggleModule,
+        PortalModule], exports: [MatButtonModule,
         MatToolbarModule,
         MatIconModule,
         MatSidenavModule,
@@ -571,7 +580,8 @@ MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         ColorPickerModule,
         ScrollingModule,
         CdkScrollable,
-        MatButtonToggleModule] });
+        MatButtonToggleModule,
+        PortalModule] });
 MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MaterialModule, providers: [
         MatDatepickerModule,
         MatDialogModule
@@ -611,7 +621,8 @@ MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         MatButtonModule,
         MatSlideToggleModule,
         ColorPickerModule,
-        MatButtonToggleModule, MatButtonModule,
+        MatButtonToggleModule,
+        PortalModule, MatButtonModule,
         MatToolbarModule,
         MatIconModule,
         MatSidenavModule,
@@ -646,7 +657,8 @@ MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         MatSlideToggleModule,
         ColorPickerModule,
         ScrollingModule,
-        MatButtonToggleModule] });
+        MatButtonToggleModule,
+        PortalModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MaterialModule, decorators: [{
             type: NgModule,
             args: [{
@@ -687,7 +699,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         MatButtonModule,
                         MatSlideToggleModule,
                         ColorPickerModule,
-                        MatButtonToggleModule
+                        MatButtonToggleModule,
+                        PortalModule
                     ],
                     exports: [
                         MatButtonModule,
@@ -726,7 +739,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         ColorPickerModule,
                         ScrollingModule,
                         CdkScrollable,
-                        MatButtonToggleModule
+                        MatButtonToggleModule,
+                        PortalModule
                     ],
                     providers: [
                         MatDatepickerModule,
@@ -1334,7 +1348,7 @@ class KlesFormDateComponent extends KlesFieldAbstract {
 }
 KlesFormDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KlesFormDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
 KlesFormDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: KlesFormDateComponent, selector: "kles-form-datepicker", usesInheritance: true, ngImport: i0, template: `
-    <mat-form-field class="demo-full-width margin-top" [color]="field.color" [formGroup]="group">
+    <mat-form-field class="margin-top" [color]="field.color" [formGroup]="group">
         <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [matDatepicker]="picker" [formControlName]="field.name" [placeholder]="field.placeholder | translate"
         [min]="field.min" [max]="field.max">
         <div matSuffix>
@@ -1355,7 +1369,7 @@ KlesFormDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KlesFormDateComponent, decorators: [{
             type: Component,
             args: [{ selector: "kles-form-datepicker", template: `
-    <mat-form-field class="demo-full-width margin-top" [color]="field.color" [formGroup]="group">
+    <mat-form-field class="margin-top" [color]="field.color" [formGroup]="group">
         <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [matDatepicker]="picker" [formControlName]="field.name" [placeholder]="field.placeholder | translate"
         [min]="field.min" [max]="field.max">
         <div matSuffix>
@@ -3407,6 +3421,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 `, styles: ["mat-form-field{width:100%}\n", ".selectAll{padding:10px 16px}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; } });
 
+class KlesFormDateTimeComponent extends KlesFieldAbstract {
+    ngOnInit() { super.ngOnInit(); }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+KlesFormDateTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KlesFormDateTimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormDateTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: KlesFormDateTimeComponent, selector: "kles-form-datetimepicker", usesInheritance: true, ngImport: i0, template: `
+    <mat-form-field class="margin-top" [color]="field.color" [formGroup]="group">
+        <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [matDatepicker]="picker" [formControlName]="field.name" [placeholder]="field.placeholder | translate"
+        [min]="field.min" [max]="field.max">
+        <div matSuffix>
+            <mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>
+            <ng-content></ng-content>
+        </div>
+        <kles-mat-datepicker #picker [hasBackdrop]="false"></kles-mat-datepicker>
+        <mat-hint>{{field.hint}}</mat-hint>
+
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+        </mat-form-field>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i8.KlesMatDatepicker, selector: "kles-mat-datepicker", outputs: ["timeSelected"], exportAs: ["klesMatDatepicker"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KlesFormDateTimeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "kles-form-datetimepicker", template: `
+    <mat-form-field class="margin-top" [color]="field.color" [formGroup]="group">
+        <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [matDatepicker]="picker" [formControlName]="field.name" [placeholder]="field.placeholder | translate"
+        [min]="field.min" [max]="field.max">
+        <div matSuffix>
+            <mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>
+            <ng-content></ng-content>
+        </div>
+        <kles-mat-datepicker #picker [hasBackdrop]="false"></kles-mat-datepicker>
+        <mat-hint>{{field.hint}}</mat-hint>
+
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+        </mat-form-field>
+    ` }]
+        }] });
+
 const components = [
     KlesDynamicFormComponent,
     KlesFormLabelComponent,
@@ -3440,7 +3503,8 @@ const components = [
     KlesFormArrayComponent,
     KlesFormRangeComponent,
     KlesFormClearComponent,
-    KlesFormSelectLazySearchComponent
+    KlesFormSelectLazySearchComponent,
+    KlesFormDateTimeComponent
 ];
 const directives = [KlesDynamicFieldDirective, KlesComponentDirective];
 const pipes = [KlesTransformPipe, ArrayFormatPipe];
@@ -3484,14 +3548,16 @@ KlesMaterialDynamicformsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "1
         KlesFormArrayComponent,
         KlesFormRangeComponent,
         KlesFormClearComponent,
-        KlesFormSelectLazySearchComponent, KlesDynamicFieldDirective, KlesComponentDirective, KlesTransformPipe, ArrayFormatPipe], imports: [CommonModule,
+        KlesFormSelectLazySearchComponent,
+        KlesFormDateTimeComponent, KlesDynamicFieldDirective, KlesComponentDirective, KlesTransformPipe, ArrayFormatPipe], imports: [CommonModule,
         ReactiveFormsModule,
         TranslateModule,
         FlexLayoutModule,
         FormsModule,
         MaterialModule,
         ColorPickerModule,
-        NgxMatSelectSearchModule], exports: [KlesDynamicFormComponent,
+        NgxMatSelectSearchModule,
+        KlesMaterialDatepickerModule], exports: [KlesDynamicFormComponent,
         KlesFormLabelComponent,
         KlesFormInputComponent,
         KlesFormInputClearableComponent,
@@ -3523,7 +3589,9 @@ KlesMaterialDynamicformsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "1
         KlesFormArrayComponent,
         KlesFormRangeComponent,
         KlesFormClearComponent,
-        KlesFormSelectLazySearchComponent, KlesTransformPipe, ArrayFormatPipe, KlesDynamicFieldDirective, KlesComponentDirective, ColorPickerModule] });
+        KlesFormSelectLazySearchComponent,
+        KlesFormDateTimeComponent, KlesTransformPipe, ArrayFormatPipe, KlesDynamicFieldDirective, KlesComponentDirective, ColorPickerModule,
+        KlesMaterialDatepickerModule] });
 KlesMaterialDynamicformsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KlesMaterialDynamicformsModule, providers: [
         { provide: ErrorStateMatcher, useClass: KlesFormErrorStateMatcher },
         pipes
@@ -3534,7 +3602,9 @@ KlesMaterialDynamicformsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "1
         FormsModule,
         MaterialModule,
         ColorPickerModule,
-        NgxMatSelectSearchModule, ColorPickerModule] });
+        NgxMatSelectSearchModule,
+        KlesMaterialDatepickerModule, ColorPickerModule,
+        KlesMaterialDatepickerModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KlesMaterialDynamicformsModule, decorators: [{
             type: NgModule,
             args: [{
@@ -3551,7 +3621,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         FormsModule,
                         MaterialModule,
                         ColorPickerModule,
-                        NgxMatSelectSearchModule
+                        NgxMatSelectSearchModule,
+                        KlesMaterialDatepickerModule
                     ],
                     providers: [
                         { provide: ErrorStateMatcher, useClass: KlesFormErrorStateMatcher },
@@ -3561,7 +3632,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         components,
                         pipes,
                         directives,
-                        ColorPickerModule
+                        ColorPickerModule,
+                        KlesMaterialDatepickerModule
                     ],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
                 }]
@@ -3598,5 +3670,5 @@ function autocompleteStringValidator(validOptions, optional) {
  * Generated bundle index. Do not edit.
  */
 
-export { ArrayFormatPipe, EnumType, FieldMapper, KlesButtonCheckerComponent, KlesButtonComponent, KlesButtonFileComponent, KlesComponentDirective, KlesDynamicFieldDirective, KlesDynamicFormComponent, KlesFieldAbstract, KlesFormArray, KlesFormArrayComponent, KlesFormBadgeComponent, KlesFormButtonCheckerComponent, KlesFormButtonComponent, KlesFormButtonFileComponent, KlesFormButtonToogleGroupComponent, KlesFormCheckboxComponent, KlesFormChipComponent, KlesFormClearComponent, KlesFormColorComponent, KlesFormControl, KlesFormDateComponent, KlesFormErrorStateMatcher, KlesFormGroup, KlesFormGroupComponent, KlesFormIconComponent, KlesFormInputClearableComponent, KlesFormInputComponent, KlesFormLabelComponent, KlesFormLineBreakComponent, KlesFormLinkComponent, KlesFormListFieldComponent, KlesFormRadioComponent, KlesFormRange, KlesFormRangeComponent, KlesFormSelectComponent, KlesFormSelectLazySearchComponent, KlesFormSelectSearchComponent, KlesFormSelectionListComponent, KlesFormSlideToggleComponent, KlesFormSubmitButtonComponent, KlesFormTextComponent, KlesFormTextareaComponent, KlesMaterialDynamicformsModule, KlesTransformPipe, autocompleteObjectValidator, autocompleteStringValidator, componentMapper, klesFieldControlFactory };
+export { ArrayFormatPipe, EnumType, FieldMapper, KlesButtonCheckerComponent, KlesButtonComponent, KlesButtonFileComponent, KlesComponentDirective, KlesDynamicFieldDirective, KlesDynamicFormComponent, KlesFieldAbstract, KlesFormArray, KlesFormArrayComponent, KlesFormBadgeComponent, KlesFormButtonCheckerComponent, KlesFormButtonComponent, KlesFormButtonFileComponent, KlesFormButtonToogleGroupComponent, KlesFormCheckboxComponent, KlesFormChipComponent, KlesFormClearComponent, KlesFormColorComponent, KlesFormControl, KlesFormDateComponent, KlesFormDateTimeComponent, KlesFormErrorStateMatcher, KlesFormGroup, KlesFormGroupComponent, KlesFormIconComponent, KlesFormInputClearableComponent, KlesFormInputComponent, KlesFormLabelComponent, KlesFormLineBreakComponent, KlesFormLinkComponent, KlesFormListFieldComponent, KlesFormRadioComponent, KlesFormRange, KlesFormRangeComponent, KlesFormSelectComponent, KlesFormSelectLazySearchComponent, KlesFormSelectSearchComponent, KlesFormSelectionListComponent, KlesFormSlideToggleComponent, KlesFormSubmitButtonComponent, KlesFormTextComponent, KlesFormTextareaComponent, KlesMaterialDynamicformsModule, KlesTransformPipe, autocompleteObjectValidator, autocompleteStringValidator, componentMapper, klesFieldControlFactory };
 //# sourceMappingURL=3kles-kles-material-dynamicforms.mjs.map