@3kles/kles-material-dynamicforms 19.4.8 → 19.4.9

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

@@ -7,7 +7,7 @@ import { Validators, FormControl, ReactiveFormsModule, FormsModule, FormControlD
 import { concat, of, Subject, combineLatest, startWith, map as map$1, takeUntil, Observable, BehaviorSubject, ReplaySubject } from 'rxjs';
 import { tap, take, catchError, map, takeUntil as takeUntil$1, distinctUntilChanged, filter, switchMap, startWith as startWith$1, debounceTime, shareReplay } from 'rxjs/operators';
 import * as i2$1 from '@angular/material/form-field';
-import { MatError, MatFormFieldModule, MatFormField, MatHint, MatLabel } from '@angular/material/form-field';
+import { MatError, MatFormFieldModule, MatFormField, MatHint, MatLabel, MatSuffix } from '@angular/material/form-field';
 import { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS, ErrorStateMatcher, MatNativeDateModule, MatOptionModule, MatOption } from '@angular/material/core';
 import * as i2$2 from '@angular/material/icon';
 import { MatIcon, MatIconModule } from '@angular/material/icon';
@@ -65,6 +65,10 @@ import { TextFieldModule } from '@angular/cdk/text-field';
 import * as i4$2 from 'ngx-mat-select-search';
 import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 import { getMultipleValuesInSingleSelectionError } from '@angular/cdk/collections';
+import * as i4$4 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i5$1 from '@3kles/kles-material-datepicker';
+import { KlesMaterialDatepickerModule } from '@3kles/kles-material-datepicker';
 import * as i1$2 from '@angular/cdk/clipboard';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 
@@ -5439,6 +5443,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
     `, standalone: true, imports: [KlesFileControlComponent, FormsModule, ReactiveFormsModule], styles: ["mat-form-field{width:100%}\n"] }]
         }] });
 
+class KlesFormDateTimeComponent extends KlesFieldAbstract {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KlesFormDateTimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KlesFormDateTimeComponent, isStandalone: true, selector: "kles-form-datetimepicker", usesInheritance: true, ngImport: i0, template: `
+    <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="field.color" [formGroup]="group" [appearance]="field.appearance">
+        @if (field.label) {
+            <mat-label>{{ field.label }}</mat-label>
+        }
+
+        <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 class="suffix">
+            <mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>
+            <ng-content></ng-content>
+        </div>
+
+        <kles-mat-datepicker #picker [hasBackdrop]="false"></kles-mat-datepicker>
+
+        @if (field.hint) {
+            <mat-hint>{{ field.hint }}</mat-hint>
+        }
+
+        <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
+    </mat-form-field>
+    `, 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])[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: "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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4$4.TranslatePipe, name: "translate" }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "ngmodule", type: KlesMaterialDatepickerModule }, { kind: "component", type: i5$1.KlesMatDatepicker, selector: "kles-mat-datepicker", outputs: ["timeSelected"], exportAs: ["klesMatDatepicker"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KlesFormDateTimeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-form-datetimepicker', template: `
+    <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="field.color" [formGroup]="group" [appearance]="field.appearance">
+        @if (field.label) {
+            <mat-label>{{ field.label }}</mat-label>
+        }
+
+        <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 class="suffix">
+            <mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>
+            <ng-content></ng-content>
+        </div>
+
+        <kles-mat-datepicker #picker [hasBackdrop]="false"></kles-mat-datepicker>
+
+        @if (field.hint) {
+            <mat-hint>{{ field.hint }}</mat-hint>
+        }
+
+        <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
+    </mat-form-field>
+    `, standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatFormField,
+                        MatLabel,
+                        MatHint,
+                        MatError,
+                        MatSuffix,
+                        MatInput,
+                        MatTooltip,
+                        MatDatepickerModule,
+                        TranslateModule,
+                        MatErrorMessageDirective,
+                        KlesMaterialDatepickerModule
+                    ], styles: ["mat-form-field{width:100%}\n", ".suffix{display:flex;flex-direction:row}\n"] }]
+        }] });
+
 class KlesFormCopyComponent {
     constructor(clipBoard) {
         this.clipBoard = clipBoard;
@@ -5497,6 +5566,7 @@ const components = [
     KlesFormButtonFileComponent,
     KlesFormSelectComponent,
     KlesFormDateComponent,
+    KlesFormDateTimeComponent,
     KlesFormRadioComponent,
     KlesFormCheckboxComponent,
     KlesIndeterminateCheckboxComponent,
@@ -5548,6 +5618,7 @@ class KlesMaterialDynamicformsModule {
             KlesFormButtonFileComponent,
             KlesFormSelectComponent,
             KlesFormDateComponent,
+            KlesFormDateTimeComponent,
             KlesFormRadioComponent,
             KlesFormCheckboxComponent,
             KlesIndeterminateCheckboxComponent,
@@ -5591,6 +5662,7 @@ class KlesMaterialDynamicformsModule {
             KlesFormButtonFileComponent,
             KlesFormSelectComponent,
             KlesFormDateComponent,
+            KlesFormDateTimeComponent,
             KlesFormRadioComponent,
             KlesFormCheckboxComponent,
             KlesIndeterminateCheckboxComponent,
@@ -5635,6 +5707,7 @@ class KlesMaterialDynamicformsModule {
             KlesFormButtonFileComponent,
             KlesFormSelectComponent,
             KlesFormDateComponent,
+            KlesFormDateTimeComponent,
             KlesFormRadioComponent,
             KlesFormCheckboxComponent,
             KlesIndeterminateCheckboxComponent,
@@ -5739,5 +5812,5 @@ function autocompleteStringValidator(validOptions, optional) {
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractUiState, ArrayFormatPipe, ArrayUiState, ControlUiState, EnumButtonAttribute, EnumType, FIELD, FIELD_NAME, FieldMapper, GROUP, GROUP_UI, GroupUiState, KlesAbstractFormControl, KlesAbstractFormUiControl, KlesButtonBase, KlesButtonCheckerComponent, KlesButtonComponent, KlesButtonFileComponent, KlesComponentDirective, KlesDynamicFieldDirective, KlesDynamicFormComponent, KlesDynamicFormIntl, KlesFabComponent, KlesFieldAbstract, KlesFileControlComponent, KlesFormArray, KlesFormArrayComponent, KlesFormBadgeComponent, KlesFormButtonCheckerComponent, KlesFormButtonComponent, KlesFormButtonFileComponent, KlesFormButtonToogleGroupComponent, KlesFormCheckboxComponent, KlesFormCheckboxIndeterminateComponent, KlesFormChipComponent, KlesFormClearComponent, KlesFormColorComponent, KlesFormControl, KlesFormCopyComponent, KlesFormDateComponent, KlesFormErrorStateMatcher, KlesFormFabComponent, KlesFormFileComponent, KlesFormGroup, KlesFormGroupComponent, KlesFormIconButtonComponent, KlesFormIconComponent, KlesFormInputClearableComponent, KlesFormInputComponent, KlesFormLabelComponent, KlesFormLineBreakComponent, KlesFormLinkComponent, KlesFormListFieldComponent, KlesFormMiniFabComponent, KlesFormPasswordVisibilityComponent, KlesFormRadioComponent, KlesFormRange, KlesFormRangeComponent, KlesFormSelectComponent, KlesFormSelectLazySearchComponent, KlesFormSelectSearchComponent, KlesFormSelectionListComponent, KlesFormSelectionListSearchComponent, KlesFormSlideToggleComponent, KlesFormTextComponent, KlesFormTextareaComponent, KlesFormUiArray, KlesFormUiControl, KlesFormUiGroup, KlesIconButtonComponent, KlesIndeterminateCheckboxComponent, KlesMaterialDynamicformsModule, KlesMiniFabComponent, KlesSelectionModel, KlesTransformPipe, MatErrorFormDirective, MatErrorMessageDirective, SIBLING_FIELDS, autocompleteObjectValidator, autocompleteStringValidator, componentMapper, isDestroyable, klesFieldControlFactory, klesFieldUiFactory };
+export { AbstractUiState, ArrayFormatPipe, ArrayUiState, ControlUiState, EnumButtonAttribute, EnumType, FIELD, FIELD_NAME, FieldMapper, GROUP, GROUP_UI, GroupUiState, KlesAbstractFormControl, KlesAbstractFormUiControl, KlesButtonBase, KlesButtonCheckerComponent, KlesButtonComponent, KlesButtonFileComponent, KlesComponentDirective, KlesDynamicFieldDirective, KlesDynamicFormComponent, KlesDynamicFormIntl, KlesFabComponent, KlesFieldAbstract, KlesFileControlComponent, KlesFormArray, KlesFormArrayComponent, KlesFormBadgeComponent, KlesFormButtonCheckerComponent, KlesFormButtonComponent, KlesFormButtonFileComponent, KlesFormButtonToogleGroupComponent, KlesFormCheckboxComponent, KlesFormCheckboxIndeterminateComponent, KlesFormChipComponent, KlesFormClearComponent, KlesFormColorComponent, KlesFormControl, KlesFormCopyComponent, KlesFormDateComponent, KlesFormDateTimeComponent, KlesFormErrorStateMatcher, KlesFormFabComponent, KlesFormFileComponent, KlesFormGroup, KlesFormGroupComponent, KlesFormIconButtonComponent, KlesFormIconComponent, KlesFormInputClearableComponent, KlesFormInputComponent, KlesFormLabelComponent, KlesFormLineBreakComponent, KlesFormLinkComponent, KlesFormListFieldComponent, KlesFormMiniFabComponent, KlesFormPasswordVisibilityComponent, KlesFormRadioComponent, KlesFormRange, KlesFormRangeComponent, KlesFormSelectComponent, KlesFormSelectLazySearchComponent, KlesFormSelectSearchComponent, KlesFormSelectionListComponent, KlesFormSelectionListSearchComponent, KlesFormSlideToggleComponent, KlesFormTextComponent, KlesFormTextareaComponent, KlesFormUiArray, KlesFormUiControl, KlesFormUiGroup, KlesIconButtonComponent, KlesIndeterminateCheckboxComponent, KlesMaterialDynamicformsModule, KlesMiniFabComponent, KlesSelectionModel, KlesTransformPipe, MatErrorFormDirective, MatErrorMessageDirective, SIBLING_FIELDS, autocompleteObjectValidator, autocompleteStringValidator, componentMapper, isDestroyable, klesFieldControlFactory, klesFieldUiFactory };
 //# sourceMappingURL=3kles-kles-material-dynamicforms.mjs.map