@nettyapps/ntyui 21.0.12 → 21.0.14

package/fesm2022/nettyapps-ntyui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, NgModule, input, booleanAttribute, model, viewChild, effect, forwardRef, signal, inject, output, computed, HostListener, ChangeDetectionStrategy, Injectable } from '@angular/core';
+import { Component, NgModule, input, booleanAttribute, model, viewChild, effect, signal, inject, computed, output, HostListener, ChangeDetectionStrategy, Injectable } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { Validators, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i2 from '@angular/material/form-field';
@@ -77,6 +77,10 @@ class UiBase {
     minLength = input(...(ngDevMode ? [undefined, { debugName: "minLength" }] : []));
     validateRegex = input(null, ...(ngDevMode ? [{ debugName: "validateRegex" }] : []));
     validateRegexErrorMessage = input('@invalidFormat', ...(ngDevMode ? [{ debugName: "validateRegexErrorMessage" }] : []));
+    forFilter = input(false, { ...(ngDevMode ? { debugName: "forFilter" } : {}), transform: booleanAttribute });
+    // Debounce properties
+    debounce = input(200, ...(ngDevMode ? [{ debugName: "debounce" }] : []));
+    debounceTimer;
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
     // Error messages
     errorMessages = input({
@@ -165,22 +169,27 @@ class UiBase {
     }
     onInputChange(event) {
         const input = event.target;
-        let value = input.value;
+        let val = input.value;
         const regexPattern = this.validateRegex();
-        if (regexPattern && value) {
+        if (regexPattern && val) {
             const pattern = regexPattern instanceof RegExp
                 ? regexPattern
                 : new RegExp(regexPattern, 'g');
-            const matches = value.match(pattern);
+            const matches = val.match(pattern);
             if (matches) {
-                value = matches.join('');
+                val = matches.join('');
             }
             else {
-                value = '';
+                val = '';
             }
-            input.value = value;
+            input.value = val;
         }
-        this.value.set(value);
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+        }
+        this.debounceTimer = setTimeout(() => {
+            this.value.set(val);
+        }, this.debounce());
         this.onTouched();
     }
     // Clear the input value
@@ -190,22 +199,22 @@ class UiBase {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UiBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: UiBase, isStandalone: true, selector: "ntyui-ui-base", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, validateRegex: { classPropertyName: "validateRegex", publicName: "validateRegex", isSignal: true, isRequired: false, transformFunction: null }, validateRegexErrorMessage: { classPropertyName: "validateRegexErrorMessage", publicName: "validateRegexErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "ntyui-id": "UiBase" } }, viewQueries: [{ propertyName: "inputModel", first: true, predicate: ["inputModel"], descendants: true, isSignal: true }], ngImport: i0, template: "<p>ui-base works!</p>\n", styles: [""] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: UiBase, isStandalone: true, selector: "ntyui-ui-base", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, validateRegex: { classPropertyName: "validateRegex", publicName: "validateRegex", isSignal: true, isRequired: false, transformFunction: null }, validateRegexErrorMessage: { classPropertyName: "validateRegexErrorMessage", publicName: "validateRegexErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, forFilter: { classPropertyName: "forFilter", publicName: "forFilter", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "ntyui-id": "UiBase" } }, viewQueries: [{ propertyName: "inputModel", first: true, predicate: ["inputModel"], descendants: true, isSignal: true }], ngImport: i0, template: "<p>ui-base works!</p>\n", styles: [""] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UiBase, decorators: [{
             type: Component,
             args: [{ selector: 'ntyui-ui-base', imports: [], host: { 'ntyui-id': 'UiBase' }, template: "<p>ui-base works!</p>\n" }]
-        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], validateRegex: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateRegex", required: false }] }], validateRegexErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateRegexErrorMessage", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], inputModel: [{ type: i0.ViewChild, args: ['inputModel', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], validateRegex: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateRegex", required: false }] }], validateRegexErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateRegexErrorMessage", required: false }] }], forFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "forFilter", required: false }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], inputModel: [{ type: i0.ViewChild, args: ['inputModel', { isSignal: true }] }] } });
 
 class NettyUITextInput extends UiBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyUITextInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NettyUITextInput, isStandalone: true, selector: "ntyui-text-input", host: { attributes: { "ntyui-id": "NettyUITextInput" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => NettyUITextInput),
+                useExisting: NettyUITextInput,
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  class=\"example-full-width\"\n  [appearance]=\"appearance()\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && value()\"\n>\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n  <input\n    #inputModel=\"ngModel\"\n    type=\"text\"\n    matInput\n    [placeholder]=\"placeholder()\"\n    [ngModel]=\"value()\"\n    (ngModelChange)=\"value.set($event)\"\n    (input)=\"onInputChange($event)\"\n  />\n\n  @if (value() && !disabled()) {\n  <button\n    mat-icon-button\n    matSuffix\n    (click)=\"clearInput()\"\n    aria-label=\"Clear\"\n    class=\"clear-btn number-clear-btn\"\n  >\n    <mat-icon>cancel</mat-icon>\n  </button>\n  } @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n  <mat-error> {{ getErrorMessage() }} </mat-error>\n  }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+        ], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  class=\"example-full-width\"\n  [appearance]=\"appearance()\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && value()\"\n>\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n  <input\n    #inputModel=\"ngModel\"\n    type=\"text\"\n    matInput\n    [placeholder]=\"placeholder()\"\n    [ngModel]=\"value()\"\n    (input)=\"onInputChange($event)\"\n  />\n\n  @if (value() && !disabled()) {\n  <button\n    mat-icon-button\n    matSuffix\n    (click)=\"clearInput()\"\n    aria-label=\"Clear\"\n    class=\"clear-btn number-clear-btn\"\n  >\n    <mat-icon>cancel</mat-icon>\n  </button>\n  } @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n  <mat-error> {{ getErrorMessage() }} </mat-error>\n  }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyUITextInput, decorators: [{
             type: Component,
@@ -214,14 +223,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MatFormFieldModule,
                         MatInputModule,
                         MatIconModule,
-                        ReactiveFormsModule
+                        ReactiveFormsModule,
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => NettyUITextInput),
+                            useExisting: NettyUITextInput,
                             multi: true,
                         },
-                    ], host: { 'ntyui-id': 'NettyUITextInput' }, template: "<mat-form-field\n  class=\"example-full-width\"\n  [appearance]=\"appearance()\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && value()\"\n>\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n  <input\n    #inputModel=\"ngModel\"\n    type=\"text\"\n    matInput\n    [placeholder]=\"placeholder()\"\n    [ngModel]=\"value()\"\n    (ngModelChange)=\"value.set($event)\"\n    (input)=\"onInputChange($event)\"\n  />\n\n  @if (value() && !disabled()) {\n  <button\n    mat-icon-button\n    matSuffix\n    (click)=\"clearInput()\"\n    aria-label=\"Clear\"\n    class=\"clear-btn number-clear-btn\"\n  >\n    <mat-icon>cancel</mat-icon>\n  </button>\n  } @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n  <mat-error> {{ getErrorMessage() }} </mat-error>\n  }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"] }]
+                    ], host: { 'ntyui-id': 'NettyUITextInput' }, template: "<mat-form-field\n  class=\"example-full-width\"\n  [appearance]=\"appearance()\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && value()\"\n>\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n  <input\n    #inputModel=\"ngModel\"\n    type=\"text\"\n    matInput\n    [placeholder]=\"placeholder()\"\n    [ngModel]=\"value()\"\n    (input)=\"onInputChange($event)\"\n  />\n\n  @if (value() && !disabled()) {\n  <button\n    mat-icon-button\n    matSuffix\n    (click)=\"clearInput()\"\n    aria-label=\"Clear\"\n    class=\"clear-btn number-clear-btn\"\n  >\n    <mat-icon>cancel</mat-icon>\n  </button>\n  } @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n  <mat-error> {{ getErrorMessage() }} </mat-error>\n  }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"] }]
         }] });
 
 class NettyUIEmailInput extends UiBase {
@@ -250,7 +259,7 @@ class NettyUIEmailInput extends UiBase {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NettyUIEmailInput, isStandalone: true, selector: "ntyui-email-input", host: { attributes: { "ntyui-id": "NettyUIEmailInput" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => NettyUIEmailInput),
+                useExisting: NettyUIEmailInput,
                 multi: true,
             },
         ], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  class=\"example-full-width\"\n  [appearance]=\"appearance()\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && value()\"\n>\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n\n  <input\n    #inputModel=\"ngModel\"\n    type=\"email\"\n    matInput\n    [placeholder]=\"placeholder()\"\n    [(ngModel)]=\"value\"\n    (input)=\"onInputChange($event)\"\n  />\n  @if (value() && !disabled()) {\n  <button\n    mat-icon-button\n    matSuffix\n    (click)=\"clearInput()\"\n    aria-label=\"Clear\"\n    class=\"clear-btn number-clear-btn\"\n  >\n    <mat-icon>cancel</mat-icon>\n  </button>\n  } @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n  <mat-error> {{ getErrorMessage() }} </mat-error>\n  }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: ReactiveFormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
@@ -262,11 +271,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MatFormFieldModule,
                         MatInputModule,
                         ReactiveFormsModule,
-                        MatIconModule
+                        MatIconModule,
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => NettyUIEmailInput),
+                            useExisting: NettyUIEmailInput,
                             multi: true,
                         },
                     ], host: { 'ntyui-id': 'NettyUIEmailInput' }, template: "<mat-form-field\n  class=\"example-full-width\"\n  [appearance]=\"appearance()\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && value()\"\n>\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n\n  <input\n    #inputModel=\"ngModel\"\n    type=\"email\"\n    matInput\n    [placeholder]=\"placeholder()\"\n    [(ngModel)]=\"value\"\n    (input)=\"onInputChange($event)\"\n  />\n  @if (value() && !disabled()) {\n  <button\n    mat-icon-button\n    matSuffix\n    (click)=\"clearInput()\"\n    aria-label=\"Clear\"\n    class=\"clear-btn number-clear-btn\"\n  >\n    <mat-icon>cancel</mat-icon>\n  </button>\n  } @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n  <mat-error> {{ getErrorMessage() }} </mat-error>\n  }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"] }]
@@ -276,15 +285,11 @@ class NettyUIDateTime extends UiBase {
     // Combined value output
     dateTimeValue = model(null, ...(ngDevMode ? [{ debugName: "dateTimeValue" }] : []));
     // Input properties
-    dateLabel = input('', ...(ngDevMode ? [{ debugName: "dateLabel" }] : []));
     timeLabel = input('', ...(ngDevMode ? [{ debugName: "timeLabel" }] : []));
     dateRestriction = input('any', ...(ngDevMode ? [{ debugName: "dateRestriction" }] : []));
     timeFormat = input('tr-TR', ...(ngDevMode ? [{ debugName: "timeFormat" }] : []));
     // Date properties
     dateValue = signal(null, ...(ngDevMode ? [{ debugName: "dateValue" }] : []));
-    displayValue = signal(null, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
-    minDate = signal(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
-    maxDate = signal(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
     // Time properties
     timeValue = signal(new Date('1900-01-01T00:00:00'), ...(ngDevMode ? [{ debugName: "timeValue" }] : []));
     // Template references
@@ -292,38 +297,41 @@ class NettyUIDateTime extends UiBase {
     timeModel = viewChild('timeModel', ...(ngDevMode ? [{ debugName: "timeModel" }] : []));
     inputModel = viewChild('dateInputModel', ...(ngDevMode ? [{ debugName: "inputModel" }] : []));
     dateAdapter = inject(DateAdapter);
+    displayValue = computed(() => {
+        const date = this.dateValue();
+        if (!date)
+            return null;
+        const day = date.getDate().toString().padStart(2, '0');
+        const month = (date.getMonth() + 1).toString().padStart(2, '0');
+        const year = date.getFullYear();
+        return `${day}/${month}/${year}`;
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    // Date restrictions
+    minDate = computed(() => {
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        return this.dateRestriction() === 'future'
+            ? new Date(today.getTime() + 86400000)
+            : null;
+    }, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
+    maxDate = computed(() => {
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        return this.dateRestriction() === 'past'
+            ? new Date(today.getTime() - 86400000)
+            : null;
+    }, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
     constructor() {
         super();
-        // Date value changes
+        // Value changes
         effect(() => {
-            const date = this.dateValue();
-            this.displayValue.set(date ? this.formatDisplayDate(date) : null);
+            this.dateValue();
+            this.timeValue();
             this.updateCombinedValue();
         });
-        // Time value changes
-        effect(() => {
-            this.updateCombinedValue();
-        });
-        // Date restrictions
-        effect(() => {
-            const today = new Date();
-            today.setHours(0, 0, 0, 0);
-            switch (this.dateRestriction()) {
-                case 'past':
-                    this.minDate.set(null);
-                    this.maxDate.set(new Date(today.getTime() - 86400000));
-                    break;
-                case 'future':
-                    this.minDate.set(new Date(today.getTime() + 86400000));
-                    this.maxDate.set(null);
-                    break;
-                default:
-                    this.minDate.set(null);
-                    this.maxDate.set(null);
-            }
-        });
         effect(() => {
             const dateTime = this.dateTimeValue();
+            const shouldBeNull = this.forFilter() || this.required();
             if (dateTime) {
                 // 3 saatlik farkı telafi ederek ISO string oluşturma
                 const offset = dateTime.getTimezoneOffset() * 60000;
@@ -334,8 +342,8 @@ class NettyUIDateTime extends UiBase {
                 this.onChange(dateTime);
             }
             else {
-                this.value.set('');
-                this.onChange(null);
+                this.value.set(shouldBeNull ? null : '');
+                this.onChange(shouldBeNull ? null : dateTime);
             }
         });
         // Locale changes
@@ -343,16 +351,14 @@ class NettyUIDateTime extends UiBase {
             this.dateAdapter.setLocale(this.timeFormat());
         });
     }
-    formatDisplayDate(date) {
-        const day = date.getDate().toString().padStart(2, '0');
-        const month = (date.getMonth() + 1).toString().padStart(2, '0');
-        const year = date.getFullYear();
-        return `${day}/${month}/${year}`;
-    }
     updateCombinedValue() {
         const date = this.dateValue();
         const time = this.timeValue();
         if (!date) {
+            if (this.forFilter()) {
+                this.dateTimeValue.set(null);
+                return;
+            }
             this.dateTimeValue.set(this.required() ? null : new Date('1900-01-01T00:00:00'));
             return;
         }
@@ -389,10 +395,11 @@ class NettyUIDateTime extends UiBase {
         this.dateValue.set(null);
         this.timeValue.set(new Date('1900-01-01T00:00:00'));
         this.onChange(null);
+        this.updateCombinedValue();
         this.onTouched();
     }
     writeValue(value) {
-        if (value) {
+        if (value && value !== '') {
             const date = new Date(value);
             if (!isNaN(date.getTime())) {
                 this.dateValue.set(date);
@@ -400,22 +407,23 @@ class NettyUIDateTime extends UiBase {
                 t.setHours(date.getHours(), date.getMinutes());
                 this.timeValue.set(t);
                 this.value.set(value);
+                return;
             }
         }
-        else {
-            this.dateValue.set(null);
-            this.timeValue.set(new Date('1900-01-01T00:00:00'));
-            this.value.set('');
-        }
+        this.dateValue.set(null);
+        this.timeValue.set(new Date('1900-01-01T00:00:00'));
+        const shouldBeNull = this.forFilter() || this.required();
+        this.value.set(shouldBeNull ? null : '');
+        this.dateTimeValue.set(shouldBeNull ? null : new Date('1900-01-01T00:00:00'));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyUIDateTime, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NettyUIDateTime, isStandalone: true, selector: "ntyui-date-time", inputs: { dateTimeValue: { classPropertyName: "dateTimeValue", publicName: "dateTimeValue", isSignal: true, isRequired: false, transformFunction: null }, dateLabel: { classPropertyName: "dateLabel", publicName: "dateLabel", isSignal: true, isRequired: false, transformFunction: null }, timeLabel: { classPropertyName: "timeLabel", publicName: "timeLabel", isSignal: true, isRequired: false, transformFunction: null }, dateRestriction: { classPropertyName: "dateRestriction", publicName: "dateRestriction", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateTimeValue: "dateTimeValueChange" }, host: { attributes: { "ntyui-id": "NettyUIDateTime" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NettyUIDateTime, isStandalone: true, selector: "ntyui-date-time", inputs: { dateTimeValue: { classPropertyName: "dateTimeValue", publicName: "dateTimeValue", isSignal: true, isRequired: false, transformFunction: null }, timeLabel: { classPropertyName: "timeLabel", publicName: "timeLabel", isSignal: true, isRequired: false, transformFunction: null }, dateRestriction: { classPropertyName: "dateRestriction", publicName: "dateRestriction", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateTimeValue: "dateTimeValueChange" }, host: { attributes: { "ntyui-id": "NettyUIDateTime" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => NettyUIDateTime),
+                useExisting: NettyUIDateTime,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "dateModel", first: true, predicate: ["dateModel"], descendants: true, isSignal: true }, { propertyName: "timeModel", first: true, predicate: ["timeModel"], descendants: true, isSignal: true }, { propertyName: "inputModel", first: true, predicate: ["dateInputModel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"datetime-container\">\n  <!-- Datetime -->\n  <mat-form-field\n    [appearance]=\"appearance()\"\n    class=\"datepicker\"\n    [class.required-field]=\"required()\"\n    [class.required-with-value]=\"required() && dateValue()\"\n  >\n    @if (dateLabel()) {\n    <mat-label>{{ dateLabel() }}</mat-label>\n    }\n\n    <input\n      #dateInputModel=\"ngModel\"\n      matInput\n      [matDatepicker]=\"picker\"\n      [placeholder]=\"placeholder()\"\n      [(ngModel)]=\"dateValue\"\n      (dateChange)=\"onDateChange($event)\"\n      [min]=\"minDate() ?? undefined\"\n      [max]=\"maxDate() ?? undefined\"\n    />\n\n    @if (dateValue() && !disabled()) {\n    <button\n      mat-icon-button\n      matSuffix\n      (click)=\"clearInput()\"\n      aria-label=\"Clear\"\n      class=\"clear-btn date-clear\"\n    >\n      <mat-icon>cancel</mat-icon>\n    </button>\n    } @if (dateInputModel.invalid && (dateInputModel.dirty ||\n    dateInputModel.touched)) {\n    <mat-error> {{ getErrorMessage() }} </mat-error>\n    }\n\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n\n  <!-- Timepicker -->\n  <mat-form-field\n    class=\"time-field\"\n    [appearance]=\"appearance()\"\n    [class.required-field]=\"required()\"\n    [class.required-with-value]=\"required() && timeValue()\"\n  >\n    @if (timeLabel()) {\n    <mat-label>{{ timeLabel() }}</mat-label>\n    }\n    <input\n      #timeInputModel=\"ngModel\"\n      matInput\n      [matTimepicker]=\"timepicker\"\n      [(ngModel)]=\"timeValue\"\n      (ngModelChange)=\"onTimeChange($event)\"\n      [ngModelOptions]=\"{updateOn: 'blur'}\"\n      [disabled]=\"disabled()\"\n    />\n\n    @if ( timeInputModel.invalid && ( timeInputModel.dirty ||\n    timeInputModel.touched)) {\n    <mat-error> {{ getErrorMessage() }} </mat-error>\n    }\n\n    <mat-timepicker #timepicker />\n    <mat-timepicker-toggle [for]=\"timepicker\" matSuffix />\n  </mat-form-field>\n</div>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.datetime-container{display:flex;align-items:flex-start}@media(max-width:600px){.datetime-container{flex-wrap:nowrap;overflow-x:auto;align-items:flex-start}}.datepicker,.time-field{width:50%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: ReactiveFormsModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i6.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i6.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i6.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }] });
+        ], viewQueries: [{ propertyName: "dateModel", first: true, predicate: ["dateModel"], descendants: true, isSignal: true }, { propertyName: "timeModel", first: true, predicate: ["timeModel"], descendants: true, isSignal: true }, { propertyName: "inputModel", first: true, predicate: ["dateInputModel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"datetime-container\">\n  <!-- Datetime -->\n  <mat-form-field\n    [appearance]=\"appearance()\"\n    class=\"datepicker\"\n    [class.required-field]=\"required()\"\n    [class.required-with-value]=\"required() && dateValue()\"\n  >\n    @if (label()) {\n    <mat-label>{{ label() }}</mat-label>\n    }\n\n    <input\n      #dateInputModel=\"ngModel\"\n      matInput\n      [matDatepicker]=\"picker\"\n      [placeholder]=\"placeholder()\"\n      [ngModel]=\"dateValue()\"\n      (dateChange)=\"onDateChange($event)\"\n      [min]=\"minDate() ?? undefined\"\n      [max]=\"maxDate() ?? undefined\"\n    />\n\n    @if (dateValue() && !disabled()) {\n    <button\n      mat-icon-button\n      matSuffix\n      (click)=\"clearInput()\"\n      aria-label=\"Clear\"\n      class=\"clear-btn date-clear\"\n    >\n      <mat-icon>cancel</mat-icon>\n    </button>\n    } @if (dateInputModel.invalid && (dateInputModel.dirty ||\n    dateInputModel.touched)) {\n    <mat-error> {{ getErrorMessage() }} </mat-error>\n    }\n\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n\n  <!-- Timepicker -->\n  <mat-form-field\n    class=\"time-field\"\n    [appearance]=\"appearance()\"\n    [class.required-field]=\"required()\"\n    [class.required-with-value]=\"required() && timeValue()\"\n  >\n    @if (timeLabel()) {\n    <mat-label>{{ timeLabel() }}</mat-label>\n    }\n    <input\n      #timeInputModel=\"ngModel\"\n      matInput\n      [matTimepicker]=\"timepicker\"\n      [ngModel]=\"timeValue()\"\n      (ngModelChange)=\"onTimeChange($event)\"\n      [ngModelOptions]=\"{updateOn: 'blur'}\"\n      [disabled]=\"disabled()\"\n    />\n\n    @if ( timeInputModel.invalid && ( timeInputModel.dirty ||\n    timeInputModel.touched)) {\n    <mat-error> {{ getErrorMessage() }} </mat-error>\n    }\n\n    <mat-timepicker #timepicker />\n    <mat-timepicker-toggle [for]=\"timepicker\" matSuffix />\n  </mat-form-field>\n</div>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.datetime-container{display:flex;align-items:flex-start}@media(max-width:600px){.datetime-container{flex-wrap:nowrap;overflow-x:auto;align-items:flex-start}}.datepicker,.time-field{width:50%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: ReactiveFormsModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i6.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i6.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i6.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyUIDateTime, decorators: [{
             type: Component,
@@ -431,11 +439,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => NettyUIDateTime),
+                            useExisting: NettyUIDateTime,
                             multi: true,
                         },
-                    ], host: { 'ntyui-id': 'NettyUIDateTime' }, template: "<div class=\"datetime-container\">\n  <!-- Datetime -->\n  <mat-form-field\n    [appearance]=\"appearance()\"\n    class=\"datepicker\"\n    [class.required-field]=\"required()\"\n    [class.required-with-value]=\"required() && dateValue()\"\n  >\n    @if (dateLabel()) {\n    <mat-label>{{ dateLabel() }}</mat-label>\n    }\n\n    <input\n      #dateInputModel=\"ngModel\"\n      matInput\n      [matDatepicker]=\"picker\"\n      [placeholder]=\"placeholder()\"\n      [(ngModel)]=\"dateValue\"\n      (dateChange)=\"onDateChange($event)\"\n      [min]=\"minDate() ?? undefined\"\n      [max]=\"maxDate() ?? undefined\"\n    />\n\n    @if (dateValue() && !disabled()) {\n    <button\n      mat-icon-button\n      matSuffix\n      (click)=\"clearInput()\"\n      aria-label=\"Clear\"\n      class=\"clear-btn date-clear\"\n    >\n      <mat-icon>cancel</mat-icon>\n    </button>\n    } @if (dateInputModel.invalid && (dateInputModel.dirty ||\n    dateInputModel.touched)) {\n    <mat-error> {{ getErrorMessage() }} </mat-error>\n    }\n\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n\n  <!-- Timepicker -->\n  <mat-form-field\n    class=\"time-field\"\n    [appearance]=\"appearance()\"\n    [class.required-field]=\"required()\"\n    [class.required-with-value]=\"required() && timeValue()\"\n  >\n    @if (timeLabel()) {\n    <mat-label>{{ timeLabel() }}</mat-label>\n    }\n    <input\n      #timeInputModel=\"ngModel\"\n      matInput\n      [matTimepicker]=\"timepicker\"\n      [(ngModel)]=\"timeValue\"\n      (ngModelChange)=\"onTimeChange($event)\"\n      [ngModelOptions]=\"{updateOn: 'blur'}\"\n      [disabled]=\"disabled()\"\n    />\n\n    @if ( timeInputModel.invalid && ( timeInputModel.dirty ||\n    timeInputModel.touched)) {\n    <mat-error> {{ getErrorMessage() }} </mat-error>\n    }\n\n    <mat-timepicker #timepicker />\n    <mat-timepicker-toggle [for]=\"timepicker\" matSuffix />\n  </mat-form-field>\n</div>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.datetime-container{display:flex;align-items:flex-start}@media(max-width:600px){.datetime-container{flex-wrap:nowrap;overflow-x:auto;align-items:flex-start}}.datepicker,.time-field{width:50%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { dateTimeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateTimeValue", required: false }] }, { type: i0.Output, args: ["dateTimeValueChange"] }], dateLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateLabel", required: false }] }], timeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLabel", required: false }] }], dateRestriction: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateRestriction", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], dateModel: [{ type: i0.ViewChild, args: ['dateModel', { isSignal: true }] }], timeModel: [{ type: i0.ViewChild, args: ['timeModel', { isSignal: true }] }], inputModel: [{ type: i0.ViewChild, args: ['dateInputModel', { isSignal: true }] }] } });
+                    ], host: { 'ntyui-id': 'NettyUIDateTime' }, template: "<div class=\"datetime-container\">\n  <!-- Datetime -->\n  <mat-form-field\n    [appearance]=\"appearance()\"\n    class=\"datepicker\"\n    [class.required-field]=\"required()\"\n    [class.required-with-value]=\"required() && dateValue()\"\n  >\n    @if (label()) {\n    <mat-label>{{ label() }}</mat-label>\n    }\n\n    <input\n      #dateInputModel=\"ngModel\"\n      matInput\n      [matDatepicker]=\"picker\"\n      [placeholder]=\"placeholder()\"\n      [ngModel]=\"dateValue()\"\n      (dateChange)=\"onDateChange($event)\"\n      [min]=\"minDate() ?? undefined\"\n      [max]=\"maxDate() ?? undefined\"\n    />\n\n    @if (dateValue() && !disabled()) {\n    <button\n      mat-icon-button\n      matSuffix\n      (click)=\"clearInput()\"\n      aria-label=\"Clear\"\n      class=\"clear-btn date-clear\"\n    >\n      <mat-icon>cancel</mat-icon>\n    </button>\n    } @if (dateInputModel.invalid && (dateInputModel.dirty ||\n    dateInputModel.touched)) {\n    <mat-error> {{ getErrorMessage() }} </mat-error>\n    }\n\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n\n  <!-- Timepicker -->\n  <mat-form-field\n    class=\"time-field\"\n    [appearance]=\"appearance()\"\n    [class.required-field]=\"required()\"\n    [class.required-with-value]=\"required() && timeValue()\"\n  >\n    @if (timeLabel()) {\n    <mat-label>{{ timeLabel() }}</mat-label>\n    }\n    <input\n      #timeInputModel=\"ngModel\"\n      matInput\n      [matTimepicker]=\"timepicker\"\n      [ngModel]=\"timeValue()\"\n      (ngModelChange)=\"onTimeChange($event)\"\n      [ngModelOptions]=\"{updateOn: 'blur'}\"\n      [disabled]=\"disabled()\"\n    />\n\n    @if ( timeInputModel.invalid && ( timeInputModel.dirty ||\n    timeInputModel.touched)) {\n    <mat-error> {{ getErrorMessage() }} </mat-error>\n    }\n\n    <mat-timepicker #timepicker />\n    <mat-timepicker-toggle [for]=\"timepicker\" matSuffix />\n  </mat-form-field>\n</div>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.datetime-container{display:flex;align-items:flex-start}@media(max-width:600px){.datetime-container{flex-wrap:nowrap;overflow-x:auto;align-items:flex-start}}.datepicker,.time-field{width:50%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { dateTimeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateTimeValue", required: false }] }, { type: i0.Output, args: ["dateTimeValueChange"] }], timeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLabel", required: false }] }], dateRestriction: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateRestriction", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], dateModel: [{ type: i0.ViewChild, args: ['dateModel', { isSignal: true }] }], timeModel: [{ type: i0.ViewChild, args: ['timeModel', { isSignal: true }] }], inputModel: [{ type: i0.ViewChild, args: ['dateInputModel', { isSignal: true }] }] } });
 
 class NettyUIDatePicker extends UiBase {
     // Constants
@@ -530,7 +538,7 @@ class NettyUIDatePicker extends UiBase {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NettyUIDatePicker, isStandalone: true, selector: "ntyui-date-picker", inputs: { dateRestriction: { classPropertyName: "dateRestriction", publicName: "dateRestriction", isSignal: true, isRequired: false, transformFunction: null }, dateValue: { classPropertyName: "dateValue", publicName: "dateValue", isSignal: true, isRequired: false, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateValue: "dateValueChange", selectedDate: "selectedDateChange" }, host: { attributes: { "ntyui-id": "NettyUIDatePicker" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => NettyUIDatePicker),
+                useExisting: NettyUIDatePicker,
                 multi: true,
             },
         ], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  [appearance]=\"appearance()\"\n  class=\"example-full-width\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && selectedDate()\"\n>\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n\n  <input\n    #inputModel=\"ngModel\"\n    matInput\n    [matDatepicker]=\"picker\"\n    [placeholder]=\"placeholder()\"\n    [(ngModel)]=\"selectedDate\"\n    (dateChange)=\"onDateChange($event)\"\n    [min]=\"minDate() ?? undefined\"\n    [max]=\"maxDate() ?? undefined\"\n  />\n\n  <button\n    mat-icon-button\n    matSuffix\n    [class.invisible]=\"!selectedDate() || disabled()\"\n    (click)=\"clearInput()\"\n    aria-label=\"Clear\"\n    class=\"clear-btn date-clear\"\n  >\n    <mat-icon>cancel</mat-icon>\n  </button>\n\n  @if (inputModel.invalid && (inputModel.dirty || inputModel.touched)) {\n  <mat-error> {{ getErrorMessage() }} </mat-error>\n  }\n\n  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.mat-datepicker-toggle{margin-right:5px}.clear-btn{opacity:1;transition:opacity .2s}.clear-btn.invisible{opacity:0;pointer-events:none}.mat-form-field-suffix{display:flex;align-items:center;gap:4px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: ReactiveFormsModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
@@ -544,11 +552,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         ReactiveFormsModule,
                         MatDatepickerModule,
                         MatNativeDateModule,
-                        MatIconModule
+                        MatIconModule,
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => NettyUIDatePicker),
+                            useExisting: NettyUIDatePicker,
                             multi: true,
                         },
                     ], host: { 'ntyui-id': 'NettyUIDatePicker' }, template: "<mat-form-field\n  [appearance]=\"appearance()\"\n  class=\"example-full-width\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && selectedDate()\"\n>\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n\n  <input\n    #inputModel=\"ngModel\"\n    matInput\n    [matDatepicker]=\"picker\"\n    [placeholder]=\"placeholder()\"\n    [(ngModel)]=\"selectedDate\"\n    (dateChange)=\"onDateChange($event)\"\n    [min]=\"minDate() ?? undefined\"\n    [max]=\"maxDate() ?? undefined\"\n  />\n\n  <button\n    mat-icon-button\n    matSuffix\n    [class.invisible]=\"!selectedDate() || disabled()\"\n    (click)=\"clearInput()\"\n    aria-label=\"Clear\"\n    class=\"clear-btn date-clear\"\n  >\n    <mat-icon>cancel</mat-icon>\n  </button>\n\n  @if (inputModel.invalid && (inputModel.dirty || inputModel.touched)) {\n  <mat-error> {{ getErrorMessage() }} </mat-error>\n  }\n\n  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.mat-datepicker-toggle{margin-right:5px}.clear-btn{opacity:1;transition:opacity .2s}.clear-btn.invisible{opacity:0;pointer-events:none}.mat-form-field-suffix{display:flex;align-items:center;gap:4px}\n"] }]
@@ -674,7 +682,7 @@ class NettyUIMaskedInput extends UiBase {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NettyUIMaskedInput, isStandalone: true, selector: "ntyui-masked-input", inputs: { mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "ntyui-id": "NettyUIMaskedInput" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => NettyUIMaskedInput),
+                useExisting: NettyUIMaskedInput,
                 multi: true,
             },
         ], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  class=\"example-full-width\"\n  [appearance]=\"appearance()\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && value()\"\n>\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n  <input\n    #inputModel=\"ngModel\"\n    matInput\n    [placeholder]=\"placeholder()\"\n    [(ngModel)]=\"value\"\n    (input)=\"onInputChange($event)\"\n  />\n\n  @if (value() && !disabled()) {\n  <button\n    mat-icon-button\n    matSuffix\n    (click)=\"clearInput()\"\n    aria-label=\"Clear\"\n    class=\"clear-btn number-clear-btn\"\n  >\n    <mat-icon>cancel</mat-icon>\n  </button>\n  } @if (inputModel.invalid && (inputModel.dirty || inputModel.touched)) {\n  <mat-error> {{ getErrorMessage() }} </mat-error>\n  }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
@@ -686,11 +694,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MatFormFieldModule,
                         MatInputModule,
                         MatIconModule,
-                        ReactiveFormsModule
+                        ReactiveFormsModule,
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => NettyUIMaskedInput),
+                            useExisting: NettyUIMaskedInput,
                             multi: true,
                         },
                     ], host: { 'ntyui-id': 'NettyUIMaskedInput' }, template: "<mat-form-field\n  class=\"example-full-width\"\n  [appearance]=\"appearance()\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && value()\"\n>\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n  <input\n    #inputModel=\"ngModel\"\n    matInput\n    [placeholder]=\"placeholder()\"\n    [(ngModel)]=\"value\"\n    (input)=\"onInputChange($event)\"\n  />\n\n  @if (value() && !disabled()) {\n  <button\n    mat-icon-button\n    matSuffix\n    (click)=\"clearInput()\"\n    aria-label=\"Clear\"\n    class=\"clear-btn number-clear-btn\"\n  >\n    <mat-icon>cancel</mat-icon>\n  </button>\n  } @if (inputModel.invalid && (inputModel.dirty || inputModel.touched)) {\n  <mat-error> {{ getErrorMessage() }} </mat-error>\n  }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"] }]
@@ -793,7 +801,7 @@ class NettyUICheckboxToggle extends UiBase {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NettyUICheckboxToggle, isStandalone: true, selector: "ntyui-checkbox-toggle", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { attributes: { "ntyui-id": "NettyUICheckboxToggle" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => NettyUICheckboxToggle),
+                useExisting: NettyUICheckboxToggle,
                 multi: true,
             },
         ], usesInheritance: true, ngImport: i0, template: "@if (type() === 'checkbox') {\n<mat-checkbox\n  #inputModel=\"ngModel\"\n  [ngModel]=\"checked()\"\n  (ngModelChange)=\"onValueChange($event)\"\n  [disabled]=\"disabled()\"\n  [labelPosition]=\"labelPosition()\"\n  [class.circle]=\"shape() === 'circle'\"\n  [class.rectangle]=\"shape() === 'rectangle'\"\n>\n  {{ label() }}\n</mat-checkbox>\n} @else {\n<mat-slide-toggle\n  #inputModel=\"ngModel\"\n  [ngModel]=\"checked()\"\n  (ngModelChange)=\"onValueChange($event)\"\n  [disabled]=\"disabled()\"\n  class=\"slide-toggle\"\n>\n  {{ label() }}\n</mat-slide-toggle>\n}\n\n<!-- Error message display using UiBase's getErrorMessage() -->\n@if (ngModel?.invalid && (ngModel?.dirty || ngModel?.touched)) {\n<div class=\"error-message\">{{ getErrorMessage() }}</div>\n}\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i2$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
@@ -803,7 +811,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             args: [{ selector: 'ntyui-checkbox-toggle', imports: [MatCheckboxModule, MatSlideToggleModule, FormsModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => NettyUICheckboxToggle),
+                            useExisting: NettyUICheckboxToggle,
                             multi: true,
                         },
                     ], host: { 'ntyui-id': 'NettyUICheckboxToggle' }, template: "@if (type() === 'checkbox') {\n<mat-checkbox\n  #inputModel=\"ngModel\"\n  [ngModel]=\"checked()\"\n  (ngModelChange)=\"onValueChange($event)\"\n  [disabled]=\"disabled()\"\n  [labelPosition]=\"labelPosition()\"\n  [class.circle]=\"shape() === 'circle'\"\n  [class.rectangle]=\"shape() === 'rectangle'\"\n>\n  {{ label() }}\n</mat-checkbox>\n} @else {\n<mat-slide-toggle\n  #inputModel=\"ngModel\"\n  [ngModel]=\"checked()\"\n  (ngModelChange)=\"onValueChange($event)\"\n  [disabled]=\"disabled()\"\n  class=\"slide-toggle\"\n>\n  {{ label() }}\n</mat-slide-toggle>\n}\n\n<!-- Error message display using UiBase's getErrorMessage() -->\n@if (ngModel?.invalid && (ngModel?.dirty || ngModel?.touched)) {\n<div class=\"error-message\">{{ getErrorMessage() }}</div>\n}\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"] }]
@@ -891,7 +899,6 @@ class NettyUIFilterButton extends UiBase {
     onSearch = output(); // Emits search value
     isSearchOpen = output(); // True if text edit is open
     // Timer
-    debounceTimer;
     constructor(elementRef) {
         super();
         this.elementRef = elementRef;
@@ -984,7 +991,7 @@ class NettyUINumberInput extends UiBase {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NettyUINumberInput, isStandalone: true, selector: "ntyui-number-input", host: { attributes: { "ntyui-id": "NettyUINumberInput" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => NettyUINumberInput),
+                useExisting: NettyUINumberInput,
                 multi: true,
             },
         ], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  class=\"example-full-width\"\n  [appearance]=\"appearance()\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && value()\"\n>\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n\n  <input\n    #inputModel=\"ngModel\"\n    matInput\n    name=\"calculation\"\n    #calcInput\n    class=\"calculation-input\"\n    [placeholder]=\"placeholder()\"\n    [(ngModel)]=\"value\"\n    (input)=\"onInputChange($event)\"\n    (keydown.enter)=\"calculateExpression($event)\"\n  />\n\n  @if (value() && !disabled()) {\n  <button\n    mat-icon-button\n    matSuffix\n    (click)=\"clearInput()\"\n    aria-label=\"Clear\"\n    class=\"clear-btn number-clear-btn\"\n  >\n    <mat-icon>cancel</mat-icon>\n  </button>\n  } @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n  <mat-error> {{ getErrorMessage() }} </mat-error>\n  }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.calculation-input{text-align:right;padding-left:-24px}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
@@ -996,11 +1003,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MatFormFieldModule,
                         FormsModule,
                         MatIconModule,
-                        ReactiveFormsModule
+                        ReactiveFormsModule,
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => NettyUINumberInput),
+                            useExisting: NettyUINumberInput,
                             multi: true,
                         },
                     ], host: { 'ntyui-id': 'NettyUINumberInput' }, template: "<mat-form-field\n  class=\"example-full-width\"\n  [appearance]=\"appearance()\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && value()\"\n>\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n\n  <input\n    #inputModel=\"ngModel\"\n    matInput\n    name=\"calculation\"\n    #calcInput\n    class=\"calculation-input\"\n    [placeholder]=\"placeholder()\"\n    [(ngModel)]=\"value\"\n    (input)=\"onInputChange($event)\"\n    (keydown.enter)=\"calculateExpression($event)\"\n  />\n\n  @if (value() && !disabled()) {\n  <button\n    mat-icon-button\n    matSuffix\n    (click)=\"clearInput()\"\n    aria-label=\"Clear\"\n    class=\"clear-btn number-clear-btn\"\n  >\n    <mat-icon>cancel</mat-icon>\n  </button>\n  } @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n  <mat-error> {{ getErrorMessage() }} </mat-error>\n  }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.calculation-input{text-align:right;padding-left:-24px}\n"] }]
@@ -1016,7 +1023,7 @@ class NettyUISearchInput extends UiBase {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NettyUISearchInput, isStandalone: true, selector: "ntyui-search-input", outputs: { search: "search" }, host: { attributes: { "ntyui-id": "NettyUISearchInput" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => NettyUISearchInput),
+                useExisting: NettyUISearchInput,
                 multi: true,
             },
         ], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  class=\"example-full-width\"\n  [appearance]=\"appearance()\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && value()\"\n>\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n\n  <input\n    #inputModel=\"ngModel\"\n    type=\"text\"\n    matInput\n    [placeholder]=\"placeholder()\"\n    [(ngModel)]=\"value\"\n    (input)=\"onInputChange($event)\"\n    (keyup.enter)=\"emitSearch()\"\n  />\n\n  @if (value() && !disabled()) {\n  <button\n    mat-icon-button\n    matSuffix\n    (click)=\"clearInput()\"\n    aria-label=\"Clear\"\n    class=\"clear-btn number-clear-btn\"\n  >\n    <mat-icon>cancel</mat-icon>\n  </button>\n  }\n\n  <button\n    class=\"search-icon\"\n    mat-icon-button\n    matSuffix\n    (click)=\"emitSearch()\"\n    aria-label=\"Search\"\n  >\n    <mat-icon matSuffix>search</mat-icon>\n  </button>\n\n  @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n  <mat-error> {{ getErrorMessage() }} </mat-error>\n  }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
@@ -1028,11 +1035,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MatFormFieldModule,
                         MatInputModule,
                         MatIconModule,
-                        ReactiveFormsModule
+                        ReactiveFormsModule,
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => NettyUISearchInput),
+                            useExisting: NettyUISearchInput,
                             multi: true,
                         },
                     ], host: { 'ntyui-id': 'NettyUISearchInput' }, template: "<mat-form-field\n  class=\"example-full-width\"\n  [appearance]=\"appearance()\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && value()\"\n>\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n\n  <input\n    #inputModel=\"ngModel\"\n    type=\"text\"\n    matInput\n    [placeholder]=\"placeholder()\"\n    [(ngModel)]=\"value\"\n    (input)=\"onInputChange($event)\"\n    (keyup.enter)=\"emitSearch()\"\n  />\n\n  @if (value() && !disabled()) {\n  <button\n    mat-icon-button\n    matSuffix\n    (click)=\"clearInput()\"\n    aria-label=\"Clear\"\n    class=\"clear-btn number-clear-btn\"\n  >\n    <mat-icon>cancel</mat-icon>\n  </button>\n  }\n\n  <button\n    class=\"search-icon\"\n    mat-icon-button\n    matSuffix\n    (click)=\"emitSearch()\"\n    aria-label=\"Search\"\n  >\n    <mat-icon matSuffix>search</mat-icon>\n  </button>\n\n  @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n  <mat-error> {{ getErrorMessage() }} </mat-error>\n  }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"] }]
@@ -1094,22 +1101,17 @@ class NettyUISelect extends UiBase {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NettyUISelect, isStandalone: true, selector: "ntyui-select", inputs: { showNoneOption: { classPropertyName: "showNoneOption", publicName: "showNoneOption", isSignal: true, isRequired: false, transformFunction: null }, nullAllowed: { classPropertyName: "nullAllowed", publicName: "nullAllowed", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showCustomTrigger: { classPropertyName: "showCustomTrigger", publicName: "showCustomTrigger", isSignal: true, isRequired: false, transformFunction: null }, enumList: { classPropertyName: "enumList", publicName: "enumList", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { enumList: "enumListChange", selectedValue: "selectedValueChange" }, host: { attributes: { "ntyui-id": "NettyUISelect" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => NettyUISelect),
+                useExisting: NettyUISelect,
                 multi: true,
             },
         ], viewQueries: [{ propertyName: "selectModel", first: true, predicate: ["selectModel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  class=\"example-full-width\"\n  [appearance]=\"appearance()\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && value()\"\n>\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n\n  <mat-select\n    #inputModel=\"ngModel\"\n    [(ngModel)]=\"selectedValue\"\n    [placeholder]=\"placeholder()\"\n    [required]=\"required() && !nullAllowed()\"\n    [multiple]=\"multiple()\"\n  >\n    <!-- Custom trigger -->\n    @if (showCustomTrigger()) {\n    <mat-select-trigger>\n      @if (multiple()) { {{ getSelectedText(selectedValue()?.[0]) || '' }} @if\n      ((selectedValue()?.length || 0) > 1) {\n      <span class=\"additional-selection\">\n        (+{{ getSelectedCount() - 1 }} {{ getSelectedCount() === 2 ? 'other' :\n        'others' }})\n      </span>\n      } } @else { {{ getSelectedText(selectedValue()) || '' }} }\n    </mat-select-trigger>\n    }\n    <!-- None option -->\n    @if (hasNoneOption()) {\n    <mat-option [value]=\"null\"> {{ placeholder() || 'Hepsi' }} </mat-option>\n    }\n    <!-- Dynamic options -->\n    @for (option of enumList(); track option.value) {\n    <mat-option [value]=\"option.value\"> {{ option.text }} </mat-option>\n    }\n  </mat-select>\n\n  @if (inputModel?.hasError('required')) {\n  <mat-error>{{ getErrorMessage() }}</mat-error>\n  }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.example-full-width{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i2$3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyUISelect, decorators: [{
             type: Component,
-            args: [{ selector: 'ntyui-select', imports: [
-                        MatFormFieldModule,
-                        MatSelectModule,
-                        FormsModule,
-                        MatInputModule
-                    ], providers: [
+            args: [{ selector: 'ntyui-select', imports: [MatFormFieldModule, MatSelectModule, FormsModule, MatInputModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => NettyUISelect),
+                            useExisting: NettyUISelect,
                             multi: true,
                         },
                     ], host: { 'ntyui-id': 'NettyUISelect' }, template: "<mat-form-field\n  class=\"example-full-width\"\n  [appearance]=\"appearance()\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && value()\"\n>\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n\n  <mat-select\n    #inputModel=\"ngModel\"\n    [(ngModel)]=\"selectedValue\"\n    [placeholder]=\"placeholder()\"\n    [required]=\"required() && !nullAllowed()\"\n    [multiple]=\"multiple()\"\n  >\n    <!-- Custom trigger -->\n    @if (showCustomTrigger()) {\n    <mat-select-trigger>\n      @if (multiple()) { {{ getSelectedText(selectedValue()?.[0]) || '' }} @if\n      ((selectedValue()?.length || 0) > 1) {\n      <span class=\"additional-selection\">\n        (+{{ getSelectedCount() - 1 }} {{ getSelectedCount() === 2 ? 'other' :\n        'others' }})\n      </span>\n      } } @else { {{ getSelectedText(selectedValue()) || '' }} }\n    </mat-select-trigger>\n    }\n    <!-- None option -->\n    @if (hasNoneOption()) {\n    <mat-option [value]=\"null\"> {{ placeholder() || 'Hepsi' }} </mat-option>\n    }\n    <!-- Dynamic options -->\n    @for (option of enumList(); track option.value) {\n    <mat-option [value]=\"option.value\"> {{ option.text }} </mat-option>\n    }\n  </mat-select>\n\n  @if (inputModel?.hasError('required')) {\n  <mat-error>{{ getErrorMessage() }}</mat-error>\n  }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.example-full-width{width:100%}\n"] }]
@@ -1123,7 +1125,7 @@ class NettyUIVisibleSwitchButton extends UiBase {
     hiddenLabel = input('', ...(ngDevMode ? [{ debugName: "hiddenLabel" }] : []));
     clicked = output();
     onClicked() {
-        this.visible.update(a => !a);
+        this.visible.update((a) => !a);
         this.clicked.emit(this.visible());
     }
     getDisplayText() {
@@ -1175,7 +1177,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MatTimepickerModule,
                         MatDatepickerModule,
                         FormsModule,
-                        ReactiveFormsModule
+                        ReactiveFormsModule,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideNativeDateAdapter()], host: { 'ntyui-id': 'NettyUITimePicker' }, template: "<mat-form-field\n  [appearance]=\"appearance()\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && timeValue()\"\n>\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n\n  <input\n    #inputModel=\"ngModel\"\n    matInput\n    [matTimepicker]=\"picker\"\n    [(ngModel)]=\"timeValue\"\n    (ngModelChange)=\"onTimeChange($event)\"\n    [placeholder]=\"placeholder()\"\n  />\n\n  @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n  <mat-error> {{ getErrorMessage() }} </mat-error>\n  }\n\n  <mat-timepicker #picker />\n  <mat-timepicker-toggle [for]=\"picker\" matSuffix />\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}mat-form-field{margin-right:16px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { timeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeValue", required: false }] }, { type: i0.Output, args: ["timeValueChange"] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }] } });