@3kles/kles-material-dynamicforms 21.4.1 → 21.5.0

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

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
 import { signal, InjectionToken, inject, Component, Injector, Input, Directive, Injectable, EventEmitter, Output, NgModule, computed, ViewContainerRef, HostBinding, Pipe, ChangeDetectorRef, ViewChildren, ViewChild, forwardRef, ChangeDetectionStrategy, ElementRef, Renderer2, HostListener, LOCALE_ID, DEFAULT_CURRENCY_CODE, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
 import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, AsyncPipe } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { Validators, FormControl, ReactiveFormsModule, FormsModule, FormControlDirective, FormControlName, FormArray, FormGroup, UntypedFormBuilder, NG_VALUE_ACCESSOR, UntypedFormGroup, UntypedFormControl } from '@angular/forms';
-import { concat, of, Subject, combineLatest, startWith, map as map$1, takeUntil, Observable, BehaviorSubject, ReplaySubject, defer } from 'rxjs';
+import { concat, of, Subject, combineLatest, startWith, map as map$1, takeUntil, Observable, BehaviorSubject, ReplaySubject, defer, distinctUntilChanged as distinctUntilChanged$1, filter as filter$1, switchMap as switchMap$1 } 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, MatSuffix } from '@angular/material/form-field';
@@ -29,6 +29,7 @@ import { MatInputModule, MatInput, MatLabel as MatLabel$1, MatFormField as MatFo
 import * as i4$1 from '@angular/material/select';
 import { MatSelectModule, MatSelectTrigger, MatSelect } from '@angular/material/select';
 import { MatRadioModule, MatRadioButton, MatRadioGroup } from '@angular/material/radio';
+import * as i2$3 from '@angular/material/chips';
 import { MatChipsModule, MatChipOption, MatChipListbox } from '@angular/material/chips';
 import * as i4$2 from '@angular/material/tooltip';
 import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
@@ -71,6 +72,7 @@ import { KlesMaterialDatepickerModule } from '@3kles/kles-material-datepicker';
 import * as i1$2 from '@angular/cdk/clipboard';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { MatDividerModule } from '@angular/material/divider';
+import { ENTER, COMMA } from '@angular/cdk/keycodes';
 
 class KlesAbstractFormControl {
     constructor(field, ref) {
@@ -5880,6 +5882,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
         }] });
 
 class KlesFormTileComponent extends KlesFieldAbstract {
+    constructor() {
+        super(...arguments);
+        this.control = this.group.controls[this.field.name];
+        this.controlValue = toSignal(this.control.valueChanges, {
+            initialValue: this.control.value,
+        });
+        this.formattedValue = computed(() => {
+            const value = this.controlValue();
+            if (value == null) {
+                return '';
+            }
+            if (this.field.displayWith) {
+                return this.field.displayWith(value) ?? '';
+            }
+            if (this.field.property && typeof value === 'object') {
+                return String(value[this.field.property] ?? '');
+            }
+            return String(value);
+        }, ...(ngDevMode ? [{ debugName: "formattedValue" }] : /* istanbul ignore next */ []));
+        this.displayValue = computed(() => this.formattedValue() || this.label() || '', ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesFormTileComponent, isStandalone: true, selector: "app-kles-form-tile", usesInheritance: true, ngImport: i0, template: `
         <div class="kles-tile" [ngClass]="ngClass()" [ngStyle]="ngStyle()" [matTooltip]="tooltip()">
@@ -5888,9 +5911,9 @@ class KlesFormTileComponent extends KlesFieldAbstract {
             }
 
             <div class="kles-tile__content">
-                @if (label()) {
+                @if (displayValue(); as value) {
                     <div class="kles-tile__label">
-                        {{ label() }}
+                        {{ value }}
                     </div>
                 }
 
@@ -5912,9 +5935,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             }
 
             <div class="kles-tile__content">
-                @if (label()) {
+                @if (displayValue(); as value) {
                     <div class="kles-tile__label">
-                        {{ label() }}
+                        {{ value }}
                     </div>
                 }
 
@@ -6426,6 +6449,213 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
     `, styles: [":host{display:flex;justify-content:inherit}.kles-status{display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;color:var(--kles-status-color, var(--mat-sys-on-surface-variant));background:var(--kles-status-container, var(--mat-sys-surface-container-high))}.kles-status--chip{min-height:28px;padding:3px 10px;border-radius:999px;font:var(--mat-sys-label-medium)}.kles-status--badge{min-height:22px;padding:2px 7px;border-radius:4px;font:var(--mat-sys-label-small)}.kles-status--text{padding:0;border-radius:0;background:transparent}.kles-status__icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 20px;line-height:20px;overflow:visible;vertical-align:middle}.kles-status__icon svg{width:100%;height:100%;overflow:visible}.kles-status__dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:currentColor}.kles-status__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kles-status--disabled{opacity:.56}.kles-status--neutral{--kles-status-color: var(--mat-sys-on-surface-variant);--kles-status-container: var(--mat-sys-surface-container-high)}.kles-status--info{--kles-status-color: var(--mat-sys-on-primary-container);--kles-status-container: var(--mat-sys-primary-container)}.kles-status--success{--kles-status-color: var(--kles-status-success-color, #1b5e20);--kles-status-container: var(--kles-status-success-container, #d7f5df)}.kles-status--warning{--kles-status-color: var(--kles-status-warning-color, #7a4f00);--kles-status-container: var(--kles-status-warning-container, #ffecb3)}.kles-status--error{--kles-status-color: var(--mat-sys-on-error-container);--kles-status-container: var(--mat-sys-error-container)}\n"] }]
         }] });
 
+class KlesFormChipGridComponent extends KlesFieldAbstract {
+    constructor() {
+        super(...arguments);
+        this.options = this.field.options;
+        this.control = this.group.controls[this.field.name];
+        this.intl = inject(KlesDynamicFormIntl);
+        this.separatorKeysCodes = [ENTER, COMMA];
+        this.isFocused = new Subject();
+        this.searchControl = new FormControl('aaa');
+    }
+    ngOnInit() {
+        if (this.field.lazy) {
+            this.options$ = this.isFocused.pipe(distinctUntilChanged$1(), filter$1((isFocused) => isFocused), switchMap$1((isFocused) => {
+                if (isFocused) {
+                    let obs$;
+                    if (this.field.options instanceof Observable) {
+                        obs$ = this.field.options;
+                    }
+                    else if (this.field.options instanceof Function) {
+                        obs$ = this.field.options();
+                    }
+                    else {
+                        obs$ = of(this.field.options ?? []);
+                    }
+                    return concat(of({ loading: true, options: [] }), obs$.pipe(map$1((options) => {
+                        return { loading: false, options };
+                    })));
+                }
+                else {
+                    return of({ loading: false, options: [] });
+                }
+            }));
+        }
+        else {
+            if (this.field.options instanceof Observable) {
+                this.options$ = concat(of({ loading: true, options: [] }), this.field.options.pipe(map$1((options) => {
+                    return { loading: false, options };
+                })));
+            }
+            else if (this.field.options instanceof Function) {
+                this.options$ = concat(of({ loading: true, options: [] }), this.field.options().pipe(map$1((options) => {
+                    return { loading: false, options };
+                })));
+            }
+            else {
+                this.options$ = of({ loading: false, options: this.field.options });
+            }
+        }
+        this.filteredOption$ = concat(combineLatest([this.searchControl?.valueChanges.pipe(startWith('')) ?? of(''), this.options$]).pipe(map$1(([data, response]) => {
+            if (response.loading) {
+                return response;
+            }
+            else {
+                return { loading: false, options: data && response.options ? this.filterData(data, response.options) : response.options };
+            }
+        })));
+        super.ngOnInit();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+    onFocus() {
+        if (this.field.lazy) {
+            this.isFocused.next(true);
+        }
+        super.onFocus();
+    }
+    onTokenEnd(event) {
+        this.addChip(event.value);
+        event.chipInput.clear();
+    }
+    addChip(rawValue) {
+        const value = (rawValue || '').trim();
+        if (value) {
+            this.control.setValue([...(this.control.value ?? []), value]);
+        }
+    }
+    removeChip(value) {
+        const values = this.control.value;
+        const index = values.lastIndexOf(value);
+        if (index > -1) {
+            values.splice(index, 1);
+            this.control.setValue(values);
+        }
+    }
+    selected(event) {
+        this.addChip(event.option.viewValue);
+        event.option.deselect();
+        this.searchControl.reset();
+    }
+    filterData(value, options) {
+        let filterValue = undefined;
+        const property = this.field.property;
+        if (typeof value === 'string' && Object.prototype.toString.call(value) === '[object String]') {
+            filterValue = value.toLowerCase();
+        }
+        else {
+            if (property) {
+                filterValue = value[property]?.toLowerCase();
+            }
+        }
+        if (filterValue != undefined) {
+            if (property) {
+                return options.filter((option) => option[property].toLowerCase().indexOf(filterValue) === 0);
+            }
+            return options.filter((option) => option.toLowerCase().indexOf(filterValue) === 0);
+        }
+        else {
+            return options;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormChipGridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesFormChipGridComponent, isStandalone: true, selector: "kles-form-chip-grid", usesInheritance: true, ngImport: i0, template: `
+        <div [formGroup]="group">
+            <mat-form-field [matTooltip]="tooltip()">
+                <mat-label>{{ label() }}</mat-label>
+                <mat-chip-grid #reactiveChipGrid [formControl]="group.controls[field.name]">
+                    @for (value of group.controls[field.name].value ?? []; track value) {
+                        <mat-chip-row (removed)="removeChip(value)">
+                            {{ value | klesTransform: field.pipeTransform }}
+                            <button matChipRemove>
+                                <mat-icon>cancel</mat-icon>
+                            </button>
+                        </mat-chip-row>
+                    }
+                </mat-chip-grid>
+                <input
+                    #search
+                    [formControl]="searchControl"
+                    [placeholder]="placeholder()"
+                    [matChipInputFor]="reactiveChipGrid"
+                    (matChipInputTokenEnd)="onTokenEnd($event)"
+                    [matAutocomplete]="auto"
+                    [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                    (focus)="onFocus()"
+                    (blur)="onBlur()"
+                />
+
+                <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event); search.value = ''">
+                    @if (filteredOption$ | async; as filteredOption) {
+                        @if (filteredOption.loading) {
+                            <mat-option disabled>
+                                <div class="loadingSelect">
+                                    {{ intl.loading }}...
+                                    <mat-spinner class="spinner" diameter="20"></mat-spinner>
+                                </div>
+                            </mat-option>
+                        } @else {
+                            @for (item of filteredOption.options; track item) {
+                                <mat-option [value]="item" [disabled]="item?.disabled">{{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}</mat-option>
+                            }
+                        }
+                    }
+                </mat-autocomplete>
+            </mat-form-field>
+        </div>
+    `, isInline: true, styles: [".suffix{display:flex;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", ".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", "mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$3.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { 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.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],[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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormChipGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-form-chip-grid', template: `
+        <div [formGroup]="group">
+            <mat-form-field [matTooltip]="tooltip()">
+                <mat-label>{{ label() }}</mat-label>
+                <mat-chip-grid #reactiveChipGrid [formControl]="group.controls[field.name]">
+                    @for (value of group.controls[field.name].value ?? []; track value) {
+                        <mat-chip-row (removed)="removeChip(value)">
+                            {{ value | klesTransform: field.pipeTransform }}
+                            <button matChipRemove>
+                                <mat-icon>cancel</mat-icon>
+                            </button>
+                        </mat-chip-row>
+                    }
+                </mat-chip-grid>
+                <input
+                    #search
+                    [formControl]="searchControl"
+                    [placeholder]="placeholder()"
+                    [matChipInputFor]="reactiveChipGrid"
+                    (matChipInputTokenEnd)="onTokenEnd($event)"
+                    [matAutocomplete]="auto"
+                    [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                    (focus)="onFocus()"
+                    (blur)="onBlur()"
+                />
+
+                <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event); search.value = ''">
+                    @if (filteredOption$ | async; as filteredOption) {
+                        @if (filteredOption.loading) {
+                            <mat-option disabled>
+                                <div class="loadingSelect">
+                                    {{ intl.loading }}...
+                                    <mat-spinner class="spinner" diameter="20"></mat-spinner>
+                                </div>
+                            </mat-option>
+                        } @else {
+                            @for (item of filteredOption.options; track item) {
+                                <mat-option [value]="item" [disabled]="item?.disabled">{{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}</mat-option>
+                            }
+                        }
+                    }
+                </mat-autocomplete>
+            </mat-form-field>
+        </div>
+    `, standalone: true, imports: [MatIconModule, KlesTransformPipe, MatChipsModule, MatTooltip, ReactiveFormsModule, MatFormFieldModule, MatAutocompleteModule, AsyncPipe, MatProgressSpinnerModule], styles: [".suffix{display:flex;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", ".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", "mat-form-field{width:100%}\n"] }]
+        }] });
+
 const components = [
     KlesDynamicFormComponent,
     KlesFormLabelComponent,
@@ -6475,7 +6705,8 @@ const components = [
     KlesFormTileComponent,
     KlesFormActionMenuComponent,
     KlesFormCurrencyComponent,
-    KlesFormStatusComponent
+    KlesFormStatusComponent,
+    KlesFormChipGridComponent
 ];
 const colorPicker = [ColorPickerComponent, ColorPickerDirective];
 const directives = [KlesDynamicFieldDirective, KlesComponentDirective, MatErrorMessageDirective, MatErrorFormDirective];
@@ -6531,7 +6762,8 @@ class KlesMaterialDynamicformsModule {
             KlesFormTileComponent,
             KlesFormActionMenuComponent,
             KlesFormCurrencyComponent,
-            KlesFormStatusComponent, KlesDynamicFieldDirective, KlesComponentDirective, MatErrorMessageDirective, MatErrorFormDirective, KlesTransformPipe, ArrayFormatPipe, ColorPickerComponent, ColorPickerDirective], exports: [KlesDynamicFormComponent,
+            KlesFormStatusComponent,
+            KlesFormChipGridComponent, KlesDynamicFieldDirective, KlesComponentDirective, MatErrorMessageDirective, MatErrorFormDirective, KlesTransformPipe, ArrayFormatPipe, ColorPickerComponent, ColorPickerDirective], exports: [KlesDynamicFormComponent,
             KlesFormLabelComponent,
             KlesFormInputComponent,
             KlesFormInputClearableComponent,
@@ -6579,7 +6811,8 @@ class KlesMaterialDynamicformsModule {
             KlesFormTileComponent,
             KlesFormActionMenuComponent,
             KlesFormCurrencyComponent,
-            KlesFormStatusComponent, KlesTransformPipe, ArrayFormatPipe, KlesDynamicFieldDirective, KlesComponentDirective, MatErrorMessageDirective, MatErrorFormDirective] }); }
+            KlesFormStatusComponent,
+            KlesFormChipGridComponent, KlesTransformPipe, ArrayFormatPipe, KlesDynamicFieldDirective, KlesComponentDirective, MatErrorMessageDirective, MatErrorFormDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesMaterialDynamicformsModule, providers: [{ provide: ErrorStateMatcher, useClass: KlesFormErrorStateMatcher }, pipes], imports: [CommonModule, ReactiveFormsModule, FormsModule, MaterialModule, NgxMatSelectSearchModule, KlesDynamicFormComponent,
             KlesFormLabelComponent,
             KlesFormInputComponent,
@@ -6627,7 +6860,8 @@ class KlesMaterialDynamicformsModule {
             KlesFormTileComponent,
             KlesFormActionMenuComponent,
             KlesFormCurrencyComponent,
-            KlesFormStatusComponent, MatErrorMessageDirective, MatErrorFormDirective, ColorPickerComponent] }); }
+            KlesFormStatusComponent,
+            KlesFormChipGridComponent, MatErrorMessageDirective, MatErrorFormDirective, ColorPickerComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesMaterialDynamicformsModule, decorators: [{
             type: NgModule,
@@ -6644,13 +6878,14 @@ class KlesFormPasswordVisibilityComponent {
         this.field = inject(FIELD);
         this.group = inject(GROUP);
         this.siblingFields = inject(SIBLING_FIELDS);
-        this.hide = signal(true, ...(ngDevMode ? [{ debugName: "hide" }] : /* istanbul ignore next */ []));
+        this.ui = inject(GROUP_UI, { optional: true });
+        this.hide = computed(() => {
+            return this.ui?.get(this.field.name)?.value().inputType === 'password';
+        }, ...(ngDevMode ? [{ debugName: "hide" }] : /* istanbul ignore next */ []));
     }
     toggleVisibility(event) {
         event.stopPropagation();
-        this.hide.set(!this.hide());
-        // this.field.inputType = this.hide ? 'password' : 'text';
-        //TODO
+        this.ui?.get(this.field.name)?.patchValue({ inputType: this.hide() ? 'text' : 'password' });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormPasswordVisibilityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: KlesFormPasswordVisibilityComponent, isStandalone: true, selector: "kles-form-password-visibility", ngImport: i0, template: `
@@ -6704,5 +6939,5 @@ function autocompleteStringValidator(validOptions, optional) {
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractUiState, ArrayFormatPipe, ArrayUiState, ControlUiState, EnumType, FIELD, FIELD_CONTEXT, FIELD_NAME, FieldMapper, GROUP, GROUP_UI, GroupUiState, KlesAbstractFormControl, KlesAbstractFormUiControl, KlesButtonBase, KlesButtonCheckerComponent, KlesButtonComponent, KlesButtonFileComponent, KlesComponentDirective, KlesCurrencyValueAccessorDirective, KlesDynamicFieldDirective, KlesDynamicFormComponent, KlesDynamicFormIntl, KlesFabComponent, KlesFieldAbstract, KlesFileControlComponent, KlesFormActionMenuComponent, KlesFormArray, KlesFormArrayComponent, KlesFormBadgeComponent, KlesFormButtonCheckerComponent, KlesFormButtonComponent, KlesFormButtonFileComponent, KlesFormButtonToogleGroupComponent, KlesFormCheckboxComponent, KlesFormCheckboxIndeterminateComponent, KlesFormChipComponent, KlesFormClearComponent, KlesFormColorComponent, KlesFormControl, KlesFormCopyComponent, KlesFormCurrencyComponent, 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, KlesFormStatusComponent, KlesFormTextComponent, KlesFormTextareaComponent, KlesFormTileComponent, KlesFormUiArray, KlesFormUiControl, KlesFormUiGroup, KlesIconButtonComponent, KlesIndeterminateCheckboxComponent, KlesMaterialDynamicformsModule, KlesMiniFabComponent, KlesSelectionModel, KlesTransformPipe, MatErrorFormDirective, MatErrorMessageDirective, SIBLING_FIELDS, autocompleteObjectValidator, autocompleteStringValidator, componentMapper, isDestroyable, klesFieldControlFactory, klesFieldUiFactory };
+export { AbstractUiState, ArrayFormatPipe, ArrayUiState, ControlUiState, EnumType, FIELD, FIELD_CONTEXT, FIELD_NAME, FieldMapper, GROUP, GROUP_UI, GroupUiState, KlesAbstractFormControl, KlesAbstractFormUiControl, KlesButtonBase, KlesButtonCheckerComponent, KlesButtonComponent, KlesButtonFileComponent, KlesComponentDirective, KlesCurrencyValueAccessorDirective, KlesDynamicFieldDirective, KlesDynamicFormComponent, KlesDynamicFormIntl, KlesFabComponent, KlesFieldAbstract, KlesFileControlComponent, KlesFormActionMenuComponent, KlesFormArray, KlesFormArrayComponent, KlesFormBadgeComponent, KlesFormButtonCheckerComponent, KlesFormButtonComponent, KlesFormButtonFileComponent, KlesFormButtonToogleGroupComponent, KlesFormCheckboxComponent, KlesFormCheckboxIndeterminateComponent, KlesFormChipComponent, KlesFormChipGridComponent, KlesFormClearComponent, KlesFormColorComponent, KlesFormControl, KlesFormCopyComponent, KlesFormCurrencyComponent, 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, KlesFormStatusComponent, KlesFormTextComponent, KlesFormTextareaComponent, KlesFormTileComponent, 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