@nettyapps/ntyui 0.0.5 → 0.1.0

package/fesm2022/nettyapps-ntyui.mjs

@@ -166,17 +166,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
             args: [{ selector: 'ntyui-ui-base', imports: [], template: "<p>ui-base works!</p>\n" }]
         }], ctorParameters: () => [] });
 
-class TextInput extends UiBase {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TextInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: TextInput, isStandalone: true, selector: "ntyui-text-input", providers: [
+class NettyUITextInput extends UiBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyUITextInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: NettyUITextInput, isStandalone: true, selector: "ntyui-text-input", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => TextInput),
+                useExisting: forwardRef(() => 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  <mat-label *ngIf=\"label()\">{{ label() }}</mat-label>\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  <button\n    mat-icon-button\n    matSuffix\n    *ngIf=\"value() && !disabled()\"\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  <mat-error\n    *ngIf=\"inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)\"\n  >\n    {{ getErrorMessage() }}\n  </mat-error>\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: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TextInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyUITextInput, decorators: [{
             type: Component,
             args: [{ selector: 'ntyui-text-input', imports: [
                         FormsModule,
@@ -188,13 +188,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => TextInput),
+                            useExisting: forwardRef(() => NettyUITextInput),
                             multi: true,
                         },
                     ], 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  <mat-label *ngIf=\"label()\">{{ label() }}</mat-label>\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  <button\n    mat-icon-button\n    matSuffix\n    *ngIf=\"value() && !disabled()\"\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  <mat-error\n    *ngIf=\"inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)\"\n  >\n    {{ getErrorMessage() }}\n  </mat-error>\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 EmailInput extends UiBase {
+class NettyUIEmailInput extends UiBase {
     updateValidators() {
         if (!this.inputModel()?.control)
             return;
@@ -216,16 +216,16 @@ class EmailInput extends UiBase {
         }
         return undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: EmailInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: EmailInput, isStandalone: true, selector: "ntyui-email-input", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyUIEmailInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: NettyUIEmailInput, isStandalone: true, selector: "ntyui-email-input", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => EmailInput),
+                useExisting: forwardRef(() => 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  <mat-label *ngIf=\"label()\">{{ label() }}</mat-label>\n  <input\n    #inputModel=\"ngModel\"\n    type=\"email\"\n    matInput\n    [placeholder]=\"placeholder()\"\n    [(ngModel)]=\"value\"\n    (input)=\"onInputChange($event)\"\n  />\n  <button\n    mat-icon-button\n    matSuffix\n    *ngIf=\"value() && !disabled()\"\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  <mat-error\n    *ngIf=\"inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)\"\n  >\n    {{ getErrorMessage() }}\n  </mat-error>\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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: EmailInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyUIEmailInput, decorators: [{
             type: Component,
             args: [{ selector: 'ntyui-email-input', imports: [
                         FormsModule,
@@ -237,13 +237,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => EmailInput),
+                            useExisting: forwardRef(() => NettyUIEmailInput),
                             multi: true,
                         },
                     ], 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  <mat-label *ngIf=\"label()\">{{ label() }}</mat-label>\n  <input\n    #inputModel=\"ngModel\"\n    type=\"email\"\n    matInput\n    [placeholder]=\"placeholder()\"\n    [(ngModel)]=\"value\"\n    (input)=\"onInputChange($event)\"\n  />\n  <button\n    mat-icon-button\n    matSuffix\n    *ngIf=\"value() && !disabled()\"\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  <mat-error\n    *ngIf=\"inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)\"\n  >\n    {{ getErrorMessage() }}\n  </mat-error>\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 DateTime extends UiBase {
+class NettyUIDateTime extends UiBase {
     // Combined value output
     dateTimeValue = model(null, ...(ngDevMode ? [{ debugName: "dateTimeValue" }] : []));
     // Input properties
@@ -341,10 +341,10 @@ class DateTime extends UiBase {
         this.onChange(null);
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DateTime, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.7", type: DateTime, 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" }, viewQueries: [{ propertyName: "dateModel", first: true, predicate: ["dateModel"], descendants: true, isSignal: true }, { propertyName: "timeModel", first: true, predicate: ["timeModel"], 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    <mat-label *ngIf=\"dateLabel()\">{{ dateLabel() }}</mat-label>\n    <input\n      #inputModel=\"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    <button\n      mat-icon-button\n      matSuffix\n      *ngIf=\"dateValue() && !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    <mat-error\n      *ngIf=\"inputModel.invalid && (inputModel.dirty || inputModel.touched)\"\n    >\n      {{ getErrorMessage() }}\n    </mat-error>\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    <mat-label *ngIf=\"timeLabel()\">{{ timeLabel() }}</mat-label>\n    <input\n      #inputModel=\"ngModel\"\n      matInput\n      [matTimepicker]=\"timepicker\"\n      [(ngModel)]=\"timeValue\"\n      (ngModelChange)=\"onTimeChange($event)\"\n      [ngModelOptions]=\"{updateOn: 'blur'}\"\n    />\n\n    <mat-error\n      *ngIf=\"inputModel.invalid && (inputModel.dirty || inputModel.touched)\"\n    >\n      {{ getErrorMessage() }}\n    </mat-error>\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}}.datetime-container mat-form-field{flex:0 0 auto;min-width:150px}.datepicker{flex:1}.time-field{flex:0 0 120px}\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: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i7.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i7.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i7.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyUIDateTime, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.7", 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" }, viewQueries: [{ propertyName: "dateModel", first: true, predicate: ["dateModel"], descendants: true, isSignal: true }, { propertyName: "timeModel", first: true, predicate: ["timeModel"], 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    <mat-label *ngIf=\"dateLabel()\">{{ dateLabel() }}</mat-label>\n    <input\n      #inputModel=\"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    <button\n      mat-icon-button\n      matSuffix\n      *ngIf=\"dateValue() && !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    <mat-error\n      *ngIf=\"inputModel.invalid && (inputModel.dirty || inputModel.touched)\"\n    >\n      {{ getErrorMessage() }}\n    </mat-error>\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    <mat-label *ngIf=\"timeLabel()\">{{ timeLabel() }}</mat-label>\n    <input\n      #inputModel=\"ngModel\"\n      matInput\n      [matTimepicker]=\"timepicker\"\n      [(ngModel)]=\"timeValue\"\n      (ngModelChange)=\"onTimeChange($event)\"\n      [ngModelOptions]=\"{updateOn: 'blur'}\"\n    />\n\n    <mat-error\n      *ngIf=\"inputModel.invalid && (inputModel.dirty || inputModel.touched)\"\n    >\n      {{ getErrorMessage() }}\n    </mat-error>\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}}.datetime-container mat-form-field{flex:0 0 auto;min-width:150px}.datepicker{flex:1}.time-field{flex:0 0 120px}\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: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i7.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i7.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i7.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DateTime, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyUIDateTime, decorators: [{
             type: Component,
             args: [{ selector: 'ntyui-date-time', imports: [
                         FormsModule,
@@ -359,7 +359,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                     ], 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    <mat-label *ngIf=\"dateLabel()\">{{ dateLabel() }}</mat-label>\n    <input\n      #inputModel=\"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    <button\n      mat-icon-button\n      matSuffix\n      *ngIf=\"dateValue() && !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    <mat-error\n      *ngIf=\"inputModel.invalid && (inputModel.dirty || inputModel.touched)\"\n    >\n      {{ getErrorMessage() }}\n    </mat-error>\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    <mat-label *ngIf=\"timeLabel()\">{{ timeLabel() }}</mat-label>\n    <input\n      #inputModel=\"ngModel\"\n      matInput\n      [matTimepicker]=\"timepicker\"\n      [(ngModel)]=\"timeValue\"\n      (ngModelChange)=\"onTimeChange($event)\"\n      [ngModelOptions]=\"{updateOn: 'blur'}\"\n    />\n\n    <mat-error\n      *ngIf=\"inputModel.invalid && (inputModel.dirty || inputModel.touched)\"\n    >\n      {{ getErrorMessage() }}\n    </mat-error>\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}}.datetime-container mat-form-field{flex:0 0 auto;min-width:150px}.datepicker{flex:1}.time-field{flex:0 0 120px}\n"] }]
         }], ctorParameters: () => [] });
 
-class DatePicker extends UiBase {
+class NettyUIDatePicker extends UiBase {
     // Constants
     NULL_DATE = '1900-01-01T00:00:00.000Z'; // Null date in UTC format
     // Inputs
@@ -448,16 +448,16 @@ class DatePicker extends UiBase {
         this.onChange(this.required() ? null : this.NULL_DATE);
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.7", type: DatePicker, 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" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyUIDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.7", 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" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => DatePicker),
+                useExisting: forwardRef(() => 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  <mat-label *ngIf=\"label()\">{{ label() }}</mat-label>\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  <mat-error\n    *ngIf=\"inputModel.invalid && (inputModel.dirty || inputModel.touched)\"\n  >\n    {{ getErrorMessage() }}\n  </mat-error>\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: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DatePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyUIDatePicker, decorators: [{
             type: Component,
             args: [{ selector: 'ntyui-date-picker', imports: [
                         FormsModule,
@@ -471,13 +471,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => DatePicker),
+                            useExisting: forwardRef(() => NettyUIDatePicker),
                             multi: true,
                         },
                     ], 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  <mat-label *ngIf=\"label()\">{{ label() }}</mat-label>\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  <mat-error\n    *ngIf=\"inputModel.invalid && (inputModel.dirty || inputModel.touched)\"\n  >\n    {{ getErrorMessage() }}\n  </mat-error>\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"] }]
         }], ctorParameters: () => [] });
 
-class MaskedInput extends UiBase {
+class NettyUIMaskedInput extends UiBase {
     // Input properties
     mask = input('00-00', ...(ngDevMode ? [{ debugName: "mask" }] : []));
     onInputChange(event) {
@@ -593,16 +593,16 @@ class MaskedInput extends UiBase {
         }
         return undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MaskedInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.7", type: MaskedInput, isStandalone: true, selector: "ntyui-masked-input", inputs: { mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyUIMaskedInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.7", type: NettyUIMaskedInput, isStandalone: true, selector: "ntyui-masked-input", inputs: { mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => MaskedInput),
+                useExisting: forwardRef(() => 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  <mat-label *ngIf=\"label()\">{{ label() }}</mat-label>\n  <input\n    #inputModel=\"ngModel\"\n    matInput\n    [placeholder]=\"placeholder()\"\n    [(ngModel)]=\"value\"\n    (input)=\"onInputChange($event)\"\n  />\n\n  <button\n    mat-icon-button\n    matSuffix\n    *ngIf=\"value() && !disabled()\"\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  <mat-error\n    *ngIf=\"inputModel.invalid && (inputModel.dirty || inputModel.touched)\"\n  >\n    {{ getErrorMessage() }}\n  </mat-error>\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: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MaskedInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyUIMaskedInput, decorators: [{
             type: Component,
             args: [{ selector: 'ntyui-masked-input', imports: [
                         FormsModule,
@@ -614,13 +614,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => MaskedInput),
+                            useExisting: forwardRef(() => NettyUIMaskedInput),
                             multi: true,
                         },
                     ], 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  <mat-label *ngIf=\"label()\">{{ label() }}</mat-label>\n  <input\n    #inputModel=\"ngModel\"\n    matInput\n    [placeholder]=\"placeholder()\"\n    [(ngModel)]=\"value\"\n    (input)=\"onInputChange($event)\"\n  />\n\n  <button\n    mat-icon-button\n    matSuffix\n    *ngIf=\"value() && !disabled()\"\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  <mat-error\n    *ngIf=\"inputModel.invalid && (inputModel.dirty || inputModel.touched)\"\n  >\n    {{ getErrorMessage() }}\n  </mat-error>\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 Carousel {
+class NettyUICarousel {
     slides = input([
         {
             imageSrc: 'https://images.unsplash.com/photo-1460627390041-532a28402358?ixlib=rb-1.2.1&auto=format&fit=crop&w=870&q=80',
@@ -663,15 +663,15 @@ class Carousel {
             this.selectedIndex.update((currentIndex) => currentIndex < this.slides().length - 1 ? currentIndex + 1 : 0);
         }, 3000);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: Carousel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.7", type: Carousel, isStandalone: true, selector: "ntyui-carousel", inputs: { slides: { classPropertyName: "slides", publicName: "slides", isSignal: true, isRequired: false, transformFunction: null }, indicators: { classPropertyName: "indicators", publicName: "indicators", isSignal: true, isRequired: false, transformFunction: null }, showText: { classPropertyName: "showText", publicName: "showText", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div *ngIf=\"slides() && slides().length > 0\" class=\"carousel-container\">\n  <ng-container *ngFor=\"let slide of slides(); let i = index\">\n    <div class=\"slide-container\" [class.active]=\"selectedIndex() === i\">\n      <div class=\"image-container\">\n        <img\n          [src]=\"slide.imageSrc\"\n          [alt]=\"slide.imageAlt\"\n          [ngClass]=\"{ 'image-active': selectedIndex() === i }\"\n        />\n      </div>\n\n      <div\n        *ngIf=\"showText()\"\n        class=\"text-container\"\n        [class]=\"'text-' + textPosition()\"\n      >\n        <h2 *ngIf=\"slide.title\" class=\"slide-title\">{{ slide.title }}</h2>\n        <p *ngIf=\"slide.description\" class=\"slide-description\">\n          {{ slide.description }}\n        </p>\n      </div>\n    </div>\n  </ng-container>\n\n  <div *ngIf=\"indicators()\" class=\"carousel-dot-container\">\n    <span\n      *ngFor=\"let dot of slides(); let i = index\"\n      class=\"dot\"\n      [ngClass]=\"{ active: selectedIndex() === i }\"\n      (click)=\"selectImage(i)\"\n    ></span>\n  </div>\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}.carousel-container{position:relative;margin:auto;text-align:center;width:100%;height:100%;border-radius:15px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}.carousel-container .slide-container{position:relative;width:100%;height:100%;display:none}.carousel-container .slide-container.active{display:block}.carousel-container img{display:none;border-radius:15px;width:100%;height:100%;object-fit:cover}.carousel-container img.image-active{display:block}.carousel-container .text-container{position:absolute;color:#fff;background:#00000080;padding:1rem;border-radius:8px;max-width:80%;transition:all .3s ease;margin-bottom:20px}.carousel-container .text-container.text-bottom{bottom:20px;left:50%;transform:translate(-50%);text-align:center}.carousel-container .text-container.text-top{top:20px;left:50%;transform:translate(-50%);text-align:center}.carousel-container .text-container.text-left{left:20px;top:50%;transform:translateY(-50%);text-align:left}.carousel-container .text-container.text-right{right:20px;top:50%;transform:translateY(-50%);text-align:right}.carousel-container .text-container .slide-title{margin:0 0 .5rem;font-size:1.5rem;font-weight:700;text-shadow:1px 1px 3px rgba(0,0,0,.8)}.carousel-container .text-container .slide-description{margin:0;font-size:1rem;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.carousel-container .carousel-dot-container{position:absolute;right:0;left:0;bottom:0;display:flex;justify-content:center;padding:0;margin-bottom:1rem;z-index:2}.carousel-container .dot{cursor:pointer;height:13px;width:13px;margin:0 5px;background-color:#fff;border-radius:50%;display:inline-block;transition:opacity .6s ease;opacity:.5}.carousel-container .dot.active,.carousel-container .dot:hover{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyUICarousel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.7", type: NettyUICarousel, isStandalone: true, selector: "ntyui-carousel", inputs: { slides: { classPropertyName: "slides", publicName: "slides", isSignal: true, isRequired: false, transformFunction: null }, indicators: { classPropertyName: "indicators", publicName: "indicators", isSignal: true, isRequired: false, transformFunction: null }, showText: { classPropertyName: "showText", publicName: "showText", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div *ngIf=\"slides() && slides().length > 0\" class=\"carousel-container\">\n  <ng-container *ngFor=\"let slide of slides(); let i = index\">\n    <div class=\"slide-container\" [class.active]=\"selectedIndex() === i\">\n      <div class=\"image-container\">\n        <img\n          [src]=\"slide.imageSrc\"\n          [alt]=\"slide.imageAlt\"\n          [ngClass]=\"{ 'image-active': selectedIndex() === i }\"\n        />\n      </div>\n\n      <div\n        *ngIf=\"showText()\"\n        class=\"text-container\"\n        [class]=\"'text-' + textPosition()\"\n      >\n        <h2 *ngIf=\"slide.title\" class=\"slide-title\">{{ slide.title }}</h2>\n        <p *ngIf=\"slide.description\" class=\"slide-description\">\n          {{ slide.description }}\n        </p>\n      </div>\n    </div>\n  </ng-container>\n\n  <div *ngIf=\"indicators()\" class=\"carousel-dot-container\">\n    <span\n      *ngFor=\"let dot of slides(); let i = index\"\n      class=\"dot\"\n      [ngClass]=\"{ active: selectedIndex() === i }\"\n      (click)=\"selectImage(i)\"\n    ></span>\n  </div>\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}.carousel-container{position:relative;margin:auto;text-align:center;width:100%;height:100%;border-radius:15px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}.carousel-container .slide-container{position:relative;width:100%;height:100%;display:none}.carousel-container .slide-container.active{display:block}.carousel-container img{display:none;border-radius:15px;width:100%;height:100%;object-fit:cover}.carousel-container img.image-active{display:block}.carousel-container .text-container{position:absolute;color:#fff;background:#00000080;padding:1rem;border-radius:8px;max-width:80%;transition:all .3s ease;margin-bottom:20px}.carousel-container .text-container.text-bottom{bottom:20px;left:50%;transform:translate(-50%);text-align:center}.carousel-container .text-container.text-top{top:20px;left:50%;transform:translate(-50%);text-align:center}.carousel-container .text-container.text-left{left:20px;top:50%;transform:translateY(-50%);text-align:left}.carousel-container .text-container.text-right{right:20px;top:50%;transform:translateY(-50%);text-align:right}.carousel-container .text-container .slide-title{margin:0 0 .5rem;font-size:1.5rem;font-weight:700;text-shadow:1px 1px 3px rgba(0,0,0,.8)}.carousel-container .text-container .slide-description{margin:0;font-size:1rem;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.carousel-container .carousel-dot-container{position:absolute;right:0;left:0;bottom:0;display:flex;justify-content:center;padding:0;margin-bottom:1rem;z-index:2}.carousel-container .dot{cursor:pointer;height:13px;width:13px;margin:0 5px;background-color:#fff;border-radius:50%;display:inline-block;transition:opacity .6s ease;opacity:.5}.carousel-container .dot.active,.carousel-container .dot:hover{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: Carousel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyUICarousel, decorators: [{
             type: Component,
             args: [{ selector: 'ntyui-carousel', imports: [CommonModule, FormsModule], template: "<div *ngIf=\"slides() && slides().length > 0\" class=\"carousel-container\">\n  <ng-container *ngFor=\"let slide of slides(); let i = index\">\n    <div class=\"slide-container\" [class.active]=\"selectedIndex() === i\">\n      <div class=\"image-container\">\n        <img\n          [src]=\"slide.imageSrc\"\n          [alt]=\"slide.imageAlt\"\n          [ngClass]=\"{ 'image-active': selectedIndex() === i }\"\n        />\n      </div>\n\n      <div\n        *ngIf=\"showText()\"\n        class=\"text-container\"\n        [class]=\"'text-' + textPosition()\"\n      >\n        <h2 *ngIf=\"slide.title\" class=\"slide-title\">{{ slide.title }}</h2>\n        <p *ngIf=\"slide.description\" class=\"slide-description\">\n          {{ slide.description }}\n        </p>\n      </div>\n    </div>\n  </ng-container>\n\n  <div *ngIf=\"indicators()\" class=\"carousel-dot-container\">\n    <span\n      *ngFor=\"let dot of slides(); let i = index\"\n      class=\"dot\"\n      [ngClass]=\"{ active: selectedIndex() === i }\"\n      (click)=\"selectImage(i)\"\n    ></span>\n  </div>\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}.carousel-container{position:relative;margin:auto;text-align:center;width:100%;height:100%;border-radius:15px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}.carousel-container .slide-container{position:relative;width:100%;height:100%;display:none}.carousel-container .slide-container.active{display:block}.carousel-container img{display:none;border-radius:15px;width:100%;height:100%;object-fit:cover}.carousel-container img.image-active{display:block}.carousel-container .text-container{position:absolute;color:#fff;background:#00000080;padding:1rem;border-radius:8px;max-width:80%;transition:all .3s ease;margin-bottom:20px}.carousel-container .text-container.text-bottom{bottom:20px;left:50%;transform:translate(-50%);text-align:center}.carousel-container .text-container.text-top{top:20px;left:50%;transform:translate(-50%);text-align:center}.carousel-container .text-container.text-left{left:20px;top:50%;transform:translateY(-50%);text-align:left}.carousel-container .text-container.text-right{right:20px;top:50%;transform:translateY(-50%);text-align:right}.carousel-container .text-container .slide-title{margin:0 0 .5rem;font-size:1.5rem;font-weight:700;text-shadow:1px 1px 3px rgba(0,0,0,.8)}.carousel-container .text-container .slide-description{margin:0;font-size:1rem;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.carousel-container .carousel-dot-container{position:absolute;right:0;left:0;bottom:0;display:flex;justify-content:center;padding:0;margin-bottom:1rem;z-index:2}.carousel-container .dot{cursor:pointer;height:13px;width:13px;margin:0 5px;background-color:#fff;border-radius:50%;display:inline-block;transition:opacity .6s ease;opacity:.5}.carousel-container .dot.active,.carousel-container .dot:hover{opacity:1}\n"] }]
         }], ctorParameters: () => [] });
 
-class CheckboxToggle extends UiBase {
+class NettyUICheckboxToggle extends UiBase {
     // Checkbox and toggle properties
     type = input('checkbox', ...(ngDevMode ? [{ debugName: "type" }] : []));
     shape = input('rectangle', ...(ngDevMode ? [{ debugName: "shape" }] : []));
@@ -697,21 +697,21 @@ class CheckboxToggle extends UiBase {
     writeValue(value) {
         this.checked.set(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CheckboxToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CheckboxToggle, 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" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyUICheckboxToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", 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" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => CheckboxToggle),
+                useExisting: forwardRef(() => 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$1.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"] }, { kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CheckboxToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyUICheckboxToggle, decorators: [{
             type: Component,
             args: [{ selector: 'ntyui-checkbox-toggle', imports: [MatCheckboxModule, MatSlideToggleModule, FormsModule, CommonModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => CheckboxToggle),
+                            useExisting: forwardRef(() => NettyUICheckboxToggle),
                             multi: true,
                         },
                     ], 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"] }]
@@ -768,7 +768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
             args: [{ selector: 'ntyui-button', imports: [MatButtonModule, MatIconModule, MatMenuModule, CommonModule], template: "@if (type() === 'menu') {\n  <button\n    type=\"button\"\n    mat-button\n    class=\"ui-menu-button\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"onClicked()\"\n    [matMenuTriggerFor]=\"menuReference()\">\n    @if (icon() && countdown() === 0) {\n      <mat-icon>{{ icon() }}</mat-icon>\n    }\n    <span>{{ getDisplayText() }}</span>\n    @if (menuReference() && !(countdown() > 0)){\n      <mat-icon class=\"menu-icon\" >arrow_drop_down</mat-icon>\n    }\n  </button>\n} @else {\n  <button\n    mat-raised-button\n    color=\"primary\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"onClicked()\"\n    class=\"regular-button\"\n    [class.filled]=\"isFilled()\">\n    @if(icon()){\n      <mat-icon >{{ icon() }}</mat-icon>\n    }\n    {{ getDisplayText() }}\n  </button>\n}", styles: ["@charset \"UTF-8\";.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}.flex-container{display:flex;justify-content:center;align-items:center}.ui-menu-button{flex-direction:row-reverse}.ui-menu-button mat-icon{font-size:20px;width:24px;height:24px;margin:15px}.ui-menu-button .menu-icon{margin-left:10px}\n"] }]
         }] });
 
-class FilterButton extends UiBase {
+class NettyUIFilterButton extends UiBase {
     elementRef;
     // Input signals
     icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
@@ -870,10 +870,10 @@ class FilterButton extends UiBase {
     ngOnDestroy() {
         clearTimeout(this.debounceTimer);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FilterButton, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: FilterButton, isStandalone: true, selector: "ntyui-filter-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disableOnClick: { classPropertyName: "disableOnClick", publicName: "disableOnClick", isSignal: true, isRequired: false, transformFunction: null }, disableDuration: { classPropertyName: "disableDuration", publicName: "disableDuration", isSignal: true, isRequired: false, transformFunction: null }, waitingText: { classPropertyName: "waitingText", publicName: "waitingText", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", onSearch: "onSearch" }, host: { listeners: { "document:click": "handleDocumentClick($event)" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (type() === 'filter') {\n<button\n  mat-button\n  [disabled]=\"isDisabled()\"\n  (click)=\"onClicked()\"\n  class=\"filter-button\"\n>\n  <mat-icon *ngIf=\"icon()\" [style.color]=\"iconColor()\">{{ icon() }}</mat-icon>\n</button>\n\n@if (showFilterInput()) {\n<input\n  #filterInput\n  type=\"text\"\n  class=\"filter-input\"\n  [placeholder]=\"placeholder()\"\n  [ngModel]=\"_searchValue()\"\n  (ngModelChange)=\"onSearchInputChange($event)\"\n  (click)=\"onFilterInputClick($event)\"\n/>\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}.filter-input{position:absolute;z-index:10;width:300px;height:30px;border-radius:5px}.filter-button mat-icon{font-size:24px;width:24px;height:24px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyUIFilterButton, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: NettyUIFilterButton, isStandalone: true, selector: "ntyui-filter-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disableOnClick: { classPropertyName: "disableOnClick", publicName: "disableOnClick", isSignal: true, isRequired: false, transformFunction: null }, disableDuration: { classPropertyName: "disableDuration", publicName: "disableDuration", isSignal: true, isRequired: false, transformFunction: null }, waitingText: { classPropertyName: "waitingText", publicName: "waitingText", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", onSearch: "onSearch" }, host: { listeners: { "document:click": "handleDocumentClick($event)" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (type() === 'filter') {\n<button\n  mat-button\n  [disabled]=\"isDisabled()\"\n  (click)=\"onClicked()\"\n  class=\"filter-button\"\n>\n  <mat-icon *ngIf=\"icon()\" [style.color]=\"iconColor()\">{{ icon() }}</mat-icon>\n</button>\n\n@if (showFilterInput()) {\n<input\n  #filterInput\n  type=\"text\"\n  class=\"filter-input\"\n  [placeholder]=\"placeholder()\"\n  [ngModel]=\"_searchValue()\"\n  (ngModelChange)=\"onSearchInputChange($event)\"\n  (click)=\"onFilterInputClick($event)\"\n/>\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}.filter-input{position:absolute;z-index:10;width:300px;height:30px;border-radius:5px}.filter-button mat-icon{font-size:24px;width:24px;height:24px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FilterButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyUIFilterButton, decorators: [{
             type: Component,
             args: [{ selector: 'ntyui-filter-button', imports: [MatButtonModule, MatIconModule, CommonModule, FormsModule], template: "@if (type() === 'filter') {\n<button\n  mat-button\n  [disabled]=\"isDisabled()\"\n  (click)=\"onClicked()\"\n  class=\"filter-button\"\n>\n  <mat-icon *ngIf=\"icon()\" [style.color]=\"iconColor()\">{{ icon() }}</mat-icon>\n</button>\n\n@if (showFilterInput()) {\n<input\n  #filterInput\n  type=\"text\"\n  class=\"filter-input\"\n  [placeholder]=\"placeholder()\"\n  [ngModel]=\"_searchValue()\"\n  (ngModelChange)=\"onSearchInputChange($event)\"\n  (click)=\"onFilterInputClick($event)\"\n/>\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}.filter-input{position:absolute;z-index:10;width:300px;height:30px;border-radius:5px}.filter-button mat-icon{font-size:24px;width:24px;height:24px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { handleDocumentClick: [{
@@ -881,7 +881,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 args: ['document:click', ['$event']]
             }] } });
 
-class NumberInput extends UiBase {
+class NettyUINumberInput extends UiBase {
     calculateExpression(event) {
         if (event) {
             event.preventDefault(); // Prevent form submission
@@ -903,16 +903,16 @@ class NumberInput extends UiBase {
             }, 2000);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NumberInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: NumberInput, isStandalone: true, selector: "ntyui-number-input", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyUINumberInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: NettyUINumberInput, isStandalone: true, selector: "ntyui-number-input", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => NumberInput),
+                useExisting: forwardRef(() => 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  <mat-label *ngIf=\"label()\">{{ label() }}</mat-label>\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  <button\n    mat-icon-button\n    matSuffix\n    *ngIf=\"value() && !disabled()\"\n    (click)=\"clearInput()\"\n    aria-label=\"Clear\"\n    class=\"clear-btn number-clear-btn\"\n  >\n    <mat-icon>cancel</mat-icon>\n  </button>\n  <mat-error\n    *ngIf=\"inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)\"\n  >\n    {{ getErrorMessage() }}\n  </mat-error>\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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NumberInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyUINumberInput, decorators: [{
             type: Component,
             args: [{ selector: 'ntyui-number-input', imports: [
                         MatInputModule,
@@ -924,28 +924,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => NumberInput),
+                            useExisting: forwardRef(() => NettyUINumberInput),
                             multi: true,
                         },
                     ], 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  <mat-label *ngIf=\"label()\">{{ label() }}</mat-label>\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  <button\n    mat-icon-button\n    matSuffix\n    *ngIf=\"value() && !disabled()\"\n    (click)=\"clearInput()\"\n    aria-label=\"Clear\"\n    class=\"clear-btn number-clear-btn\"\n  >\n    <mat-icon>cancel</mat-icon>\n  </button>\n  <mat-error\n    *ngIf=\"inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)\"\n  >\n    {{ getErrorMessage() }}\n  </mat-error>\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"] }]
         }] });
 
-class SearchInput extends UiBase {
+class NettyUISearchInput extends UiBase {
     // Output event when user presses Enter
     search = output();
     emitSearch() {
         this.search.emit(this.value());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SearchInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: SearchInput, isStandalone: true, selector: "ntyui-search-input", outputs: { search: "search" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyUISearchInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: NettyUISearchInput, isStandalone: true, selector: "ntyui-search-input", outputs: { search: "search" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => SearchInput),
+                useExisting: forwardRef(() => 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  <mat-label *ngIf=\"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    (keyup.enter)=\"emitSearch()\"\n  />\n\n  <button\n    mat-icon-button\n    matSuffix\n    *ngIf=\"value() && !disabled()\"\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  <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  <mat-error\n    *ngIf=\"inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)\"\n  >\n    {{ getErrorMessage() }}\n  </mat-error>\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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SearchInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyUISearchInput, decorators: [{
             type: Component,
             args: [{ selector: 'ntyui-search-input', imports: [
                         FormsModule,
@@ -957,13 +957,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => SearchInput),
+                            useExisting: forwardRef(() => NettyUISearchInput),
                             multi: true,
                         },
                     ], 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  <mat-label *ngIf=\"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    (keyup.enter)=\"emitSearch()\"\n  />\n\n  <button\n    mat-icon-button\n    matSuffix\n    *ngIf=\"value() && !disabled()\"\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  <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  <mat-error\n    *ngIf=\"inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)\"\n  >\n    {{ getErrorMessage() }}\n  </mat-error>\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 Select extends UiBase {
+class NettyUISelect extends UiBase {
     // Input properties
     showNoneOption = input(false, ...(ngDevMode ? [{ debugName: "showNoneOption", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     nullAllowed = input(false, ...(ngDevMode ? [{ debugName: "nullAllowed", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
@@ -1015,16 +1015,16 @@ class Select extends UiBase {
             this.selectedValue.set(value);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: Select, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: Select, 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" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyUISelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", 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" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => Select),
+                useExisting: forwardRef(() => 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  <mat-label *ngIf=\"label()\">{{ label() }}</mat-label>\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    <mat-option *ngIf=\"hasNoneOption()\" [value]=\"null\">\n      {{ placeholder() || 'Hepsi' }}\n    </mat-option>\n    <!-- Dynamic options -->\n    <mat-option *ngFor=\"let option of enumList()\" [value]=\"option.value \">\n      {{ option.text }}\n    </mat-option>\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$2.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$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$2.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: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatInputModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: Select, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyUISelect, decorators: [{
             type: Component,
             args: [{ selector: 'ntyui-select', imports: [
                         MatFormFieldModule,
@@ -1035,13 +1035,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => Select),
+                            useExisting: forwardRef(() => NettyUISelect),
                             multi: true,
                         },
                     ], 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  <mat-label *ngIf=\"label()\">{{ label() }}</mat-label>\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    <mat-option *ngIf=\"hasNoneOption()\" [value]=\"null\">\n      {{ placeholder() || 'Hepsi' }}\n    </mat-option>\n    <!-- Dynamic options -->\n    <mat-option *ngFor=\"let option of enumList()\" [value]=\"option.value \">\n      {{ option.text }}\n    </mat-option>\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"] }]
         }], ctorParameters: () => [] });
 
-class TimePicker extends UiBase {
+class NettyUITimePicker extends UiBase {
     timeValue = model(new Date('1900-01-01T00:00:00.000Z'), ...(ngDevMode ? [{ debugName: "timeValue" }] : []));
     // Input properties
     timeFormat = input('tr-TR', ...(ngDevMode ? [{ debugName: "timeFormat" }] : []));
@@ -1068,10 +1068,10 @@ class TimePicker extends UiBase {
         fixedDate.setMinutes(newTime.getMinutes());
         this.timeValue.set(fixedDate);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.7", type: TimePicker, isStandalone: true, selector: "ntyui-time-picker", inputs: { timeValue: { classPropertyName: "timeValue", publicName: "timeValue", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { timeValue: "timeValueChange" }, providers: [provideNativeDateAdapter()], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  [appearance]=\"appearance()\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && timeValue()\"\n>\n  <mat-label *ngIf=\"label()\">{{ label() }}</mat-label>\n  <input\n    #inputModel=\"ngModel\"\n    matInput\n    [matTimepicker]=\"picker\"\n    [(ngModel)]=\"timeValue\"\n    (ngModelChange)=\"onTimeChange($event)\"\n    [placeholder]=\"placeholder()\"\n  />\n\n  <mat-error\n    *ngIf=\"inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)\"\n  >\n    {{ getErrorMessage() }}\n  </mat-error>\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"], 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: "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: MatTimepickerModule }, { kind: "component", type: i7.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i7.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i7.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }, { kind: "ngmodule", type: MatDatepickerModule }, { 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: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyUITimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.7", type: NettyUITimePicker, isStandalone: true, selector: "ntyui-time-picker", inputs: { timeValue: { classPropertyName: "timeValue", publicName: "timeValue", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { timeValue: "timeValueChange" }, providers: [provideNativeDateAdapter()], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  [appearance]=\"appearance()\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && timeValue()\"\n>\n  <mat-label *ngIf=\"label()\">{{ label() }}</mat-label>\n  <input\n    #inputModel=\"ngModel\"\n    matInput\n    [matTimepicker]=\"picker\"\n    [(ngModel)]=\"timeValue\"\n    (ngModelChange)=\"onTimeChange($event)\"\n    [placeholder]=\"placeholder()\"\n  />\n\n  <mat-error\n    *ngIf=\"inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)\"\n  >\n    {{ getErrorMessage() }}\n  </mat-error>\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"], 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: "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: MatTimepickerModule }, { kind: "component", type: i7.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i7.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i7.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }, { kind: "ngmodule", type: MatDatepickerModule }, { 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: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TimePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyUITimePicker, decorators: [{
             type: Component,
             args: [{ selector: 'ntyui-time-picker', imports: [
                         MatFormFieldModule,
@@ -1084,7 +1084,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                     ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideNativeDateAdapter()], template: "<mat-form-field\n  [appearance]=\"appearance()\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && timeValue()\"\n>\n  <mat-label *ngIf=\"label()\">{{ label() }}</mat-label>\n  <input\n    #inputModel=\"ngModel\"\n    matInput\n    [matTimepicker]=\"picker\"\n    [(ngModel)]=\"timeValue\"\n    (ngModelChange)=\"onTimeChange($event)\"\n    [placeholder]=\"placeholder()\"\n  />\n\n  <mat-error\n    *ngIf=\"inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)\"\n  >\n    {{ getErrorMessage() }}\n  </mat-error>\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: () => [] });
 
-class Tree {
+class NettyUITree {
     // Input signals
     data = model([], ...(ngDevMode ? [{ debugName: "data" }] : []));
     selectionMode = model('multiple', ...(ngDevMode ? [{ debugName: "selectionMode" }] : []));
@@ -1324,10 +1324,10 @@ class Tree {
         }
         return node.children.every((child) => child.disabled || this.allChildrenDisabled(child));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: Tree, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: Tree, isStandalone: true, selector: "ntyui-tree", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, selectBranch: { classPropertyName: "selectBranch", publicName: "selectBranch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", selectionMode: "selectionModeChange", selectedIds: "selectedIdsChange" }, ngImport: i0, template: "<div class=\"tree-container\">\n  @for (node of treeData(); track node.id) {\n  <div class=\"tree-node\" [style.margin-left.px]=\"getNodeLevel(node) * 24\">\n    <!-- Expand/Collapse button -->\n    @if (node.children && node.children.length > 0) {\n    <button\n      mat-icon-button\n      class=\"expand-btn\"\n      (click)=\"toggleExpand(node);\"\n      [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n    >\n      <mat-icon>{{ node.expanded ? 'expand_less' : 'expand_more' }}</mat-icon>\n    </button>\n    } @else {\n    <!-- Empty space for leaf nodes -->\n    <div class=\"expand-spacer\"></div>\n    }\n\n    <!-- Checkbox for multiple selection -->\n    @if (selectionMode() === 'multiple') {\n    <mat-checkbox\n      class=\"node-checkbox\"\n      [checked]=\"node.selected || false\"\n      [indeterminate]=\"node.indeterminate || false\"\n      (change)=\"onCheckboxChange(node, $event)\"\n      [id]=\"'checkbox-' + node.id\"\n      [disabled]=\"node.disabled || allChildrenDisabled(node)\"\n    >\n      {{ node.text }}\n    </mat-checkbox>\n    }\n\n    <!-- Radio button for single selection -->\n    @if (selectionMode() === 'single') {\n    <mat-radio-button\n      class=\"node-radio\"\n      [checked]=\"node.selected || false\"\n      (change)=\"onRadioChange(node)\"\n      [name]=\"'tree-radio-' + componentId\"\n      [id]=\"'radio-' + node.id\"\n      [value]=\"node.id\"\n      [disabled]=\"node.disabled || allChildrenDisabled(node)\"\n    >\n      {{ node.text }}\n    </mat-radio-button>\n    }\n  </div>\n  }\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}.tree-container{font-family:Roboto,sans-serif;-webkit-user-select:none;user-select:none;padding:8px 0}.tree-node{display:flex;align-items:center;padding:4px 0;min-height:40px}.expand-btn{width:32px;height:32px;margin-right:8px;flex-shrink:0}.expand-btn mat-icon{font-size:18px;width:18px;height:18px}.expand-spacer{width:40px;display:inline-block;flex-shrink:0}.node-checkbox,.node-radio{flex-grow:1}.node-checkbox ::ng-deep .mat-mdc-checkbox-label,.node-radio ::ng-deep .mat-mdc-radio-label{width:100%}.tree-node:hover{background-color:#0000000a;border-radius:4px}.node-checkbox.mat-mdc-checkbox-checked,.node-radio.mat-mdc-radio-checked{background-color:#3f51b514;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$1.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: MatRadioModule }, { kind: "component", type: i2$3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyUITree, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: NettyUITree, isStandalone: true, selector: "ntyui-tree", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, selectBranch: { classPropertyName: "selectBranch", publicName: "selectBranch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", selectionMode: "selectionModeChange", selectedIds: "selectedIdsChange" }, ngImport: i0, template: "<div class=\"tree-container\">\n  @for (node of treeData(); track node.id) {\n  <div class=\"tree-node\" [style.margin-left.px]=\"getNodeLevel(node) * 24\">\n    <!-- Expand/Collapse button -->\n    @if (node.children && node.children.length > 0) {\n    <button\n      mat-icon-button\n      class=\"expand-btn\"\n      (click)=\"toggleExpand(node);\"\n      [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n    >\n      <mat-icon>{{ node.expanded ? 'expand_less' : 'expand_more' }}</mat-icon>\n    </button>\n    } @else {\n    <!-- Empty space for leaf nodes -->\n    <div class=\"expand-spacer\"></div>\n    }\n\n    <!-- Checkbox for multiple selection -->\n    @if (selectionMode() === 'multiple') {\n    <mat-checkbox\n      class=\"node-checkbox\"\n      [checked]=\"node.selected || false\"\n      [indeterminate]=\"node.indeterminate || false\"\n      (change)=\"onCheckboxChange(node, $event)\"\n      [id]=\"'checkbox-' + node.id\"\n      [disabled]=\"node.disabled || allChildrenDisabled(node)\"\n    >\n      {{ node.text }}\n    </mat-checkbox>\n    }\n\n    <!-- Radio button for single selection -->\n    @if (selectionMode() === 'single') {\n    <mat-radio-button\n      class=\"node-radio\"\n      [checked]=\"node.selected || false\"\n      (change)=\"onRadioChange(node)\"\n      [name]=\"'tree-radio-' + componentId\"\n      [id]=\"'radio-' + node.id\"\n      [value]=\"node.id\"\n      [disabled]=\"node.disabled || allChildrenDisabled(node)\"\n    >\n      {{ node.text }}\n    </mat-radio-button>\n    }\n  </div>\n  }\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}.tree-container{font-family:Roboto,sans-serif;-webkit-user-select:none;user-select:none;padding:8px 0}.tree-node{display:flex;align-items:center;padding:4px 0;min-height:40px}.expand-btn{width:32px;height:32px;margin-right:8px;flex-shrink:0}.expand-btn mat-icon{font-size:18px;width:18px;height:18px}.expand-spacer{width:40px;display:inline-block;flex-shrink:0}.node-checkbox,.node-radio{flex-grow:1}.node-checkbox ::ng-deep .mat-mdc-checkbox-label,.node-radio ::ng-deep .mat-mdc-radio-label{width:100%}.tree-node:hover{background-color:#0000000a;border-radius:4px}.node-checkbox.mat-mdc-checkbox-checked,.node-radio.mat-mdc-radio-checked{background-color:#3f51b514;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$1.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: MatRadioModule }, { kind: "component", type: i2$3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: Tree, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyUITree, decorators: [{
             type: Component,
             args: [{ selector: 'ntyui-tree', imports: [
                         CommonModule,
@@ -1338,7 +1338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                     ], template: "<div class=\"tree-container\">\n  @for (node of treeData(); track node.id) {\n  <div class=\"tree-node\" [style.margin-left.px]=\"getNodeLevel(node) * 24\">\n    <!-- Expand/Collapse button -->\n    @if (node.children && node.children.length > 0) {\n    <button\n      mat-icon-button\n      class=\"expand-btn\"\n      (click)=\"toggleExpand(node);\"\n      [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n    >\n      <mat-icon>{{ node.expanded ? 'expand_less' : 'expand_more' }}</mat-icon>\n    </button>\n    } @else {\n    <!-- Empty space for leaf nodes -->\n    <div class=\"expand-spacer\"></div>\n    }\n\n    <!-- Checkbox for multiple selection -->\n    @if (selectionMode() === 'multiple') {\n    <mat-checkbox\n      class=\"node-checkbox\"\n      [checked]=\"node.selected || false\"\n      [indeterminate]=\"node.indeterminate || false\"\n      (change)=\"onCheckboxChange(node, $event)\"\n      [id]=\"'checkbox-' + node.id\"\n      [disabled]=\"node.disabled || allChildrenDisabled(node)\"\n    >\n      {{ node.text }}\n    </mat-checkbox>\n    }\n\n    <!-- Radio button for single selection -->\n    @if (selectionMode() === 'single') {\n    <mat-radio-button\n      class=\"node-radio\"\n      [checked]=\"node.selected || false\"\n      (change)=\"onRadioChange(node)\"\n      [name]=\"'tree-radio-' + componentId\"\n      [id]=\"'radio-' + node.id\"\n      [value]=\"node.id\"\n      [disabled]=\"node.disabled || allChildrenDisabled(node)\"\n    >\n      {{ node.text }}\n    </mat-radio-button>\n    }\n  </div>\n  }\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}.tree-container{font-family:Roboto,sans-serif;-webkit-user-select:none;user-select:none;padding:8px 0}.tree-node{display:flex;align-items:center;padding:4px 0;min-height:40px}.expand-btn{width:32px;height:32px;margin-right:8px;flex-shrink:0}.expand-btn mat-icon{font-size:18px;width:18px;height:18px}.expand-spacer{width:40px;display:inline-block;flex-shrink:0}.node-checkbox,.node-radio{flex-grow:1}.node-checkbox ::ng-deep .mat-mdc-checkbox-label,.node-radio ::ng-deep .mat-mdc-radio-label{width:100%}.tree-node:hover{background-color:#0000000a;border-radius:4px}.node-checkbox.mat-mdc-checkbox-checked,.node-radio.mat-mdc-radio-checked{background-color:#3f51b514;border-radius:4px}\n"] }]
         }], ctorParameters: () => [] });
 
-class ColorPicker {
+class NettyUIColorPicker {
     // Two-way binding for the selected color (#RRGGBB format)
     selectedColor = model('#000000', ...(ngDevMode ? [{ debugName: "selectedColor" }] : []));
     // Input for custom color presets provided by the parent component
@@ -1433,10 +1433,10 @@ class ColorPicker {
         this.colorChange.emit(color);
         this.closePicker();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: ColorPicker, isStandalone: true, selector: "ntyui-color-picker", inputs: { selectedColor: { classPropertyName: "selectedColor", publicName: "selectedColor", isSignal: true, isRequired: false, transformFunction: null }, customColorPresets: { classPropertyName: "customColorPresets", publicName: "customColorPresets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedColor: "selectedColorChange", colorChange: "colorChange" }, viewQueries: [{ propertyName: "colorInput", first: true, predicate: ["colorInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field appearance=\"outline\" class=\"color-picker-input-container\">\n  <span\n    matPrefix\n    class=\"color-preview\"\n    [style.background-color]=\"selectedColor()\"\n    (click)=\"togglePicker()\"\n  ></span>\n\n  <input\n    matInput\n    [ngModel]=\"selectedColor()\"\n    (ngModelChange)=\"onInputChange($event)\"\n    placeholder=\"Renk Kodu (\u00F6rn: #FFFFFF)\"\n  />\n\n  <mat-icon matSuffix (click)=\"togglePicker()\">search</mat-icon>\n</mat-form-field>\n\n<input\n  type=\"color\"\n  class=\"hidden-color-input\"\n  #colorInput\n  [value]=\"selectedColor()\"\n  (change)=\"onColorPickerChange($event)\"\n/>\n\n<!-- Custom color picker pop-up -->\n@if (isPickerVisible()) {\n<div class=\"custom-color-picker-overlay\" (click)=\"closePicker()\">\n  <div class=\"custom-color-picker\" (click)=\"$event.stopPropagation()\">\n    <!-- Header -->\n    <div class=\"picker-header\">\n      <h3>{{'@Choose_Color' | translate}}</h3>\n      <button class=\"close-btn\" (click)=\"closePicker()\" type=\"button\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <!-- Content -->\n    <div class=\"picker-content\">\n      <!-- Custom color picker -->\n      <div class=\"color-input-section\">\n        <label class=\"section-label\"\n          >{{'@Choose_Custom_Color' | translate}}</label\n        >\n        <input\n          type=\"color\"\n          [value]=\"selectedColor()\"\n          (change)=\"onCustomColorChange($event)\"\n          class=\"native-color-input\"\n        />\n        <span class=\"current-color\"\n          >{{'@Available' | translate}}: {{ selectedColor() }}</span\n        >\n      </div>\n\n      <!-- Custom colors (if there is) -->\n      @if (hasCustomColors()) {\n      <div class=\"color-presets-section\">\n        <label class=\"section-label\">{{'@Defined_Colors' | translate}}</label>\n        <div class=\"color-presets-grid\">\n          @for (color of customColorPresets(); track color) {\n          <div\n            class=\"color-preset\"\n            [style.background-color]=\"color\"\n            (click)=\"selectColor(color)\"\n            [class.selected]=\"color === selectedColor()\"\n            [title]=\"color\"\n          >\n            @if (color === selectedColor()) {\n            <mat-icon class=\"check-icon\">check</mat-icon>\n            }\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      <!-- Standard colors -->\n      <div class=\"color-presets-section\">\n        <label class=\"section-label\">\n          {{ hasCustomColors() ? ('@Standard_Colors' | translate) :\n          ('@Color_Palette' | translate) }}\n        </label>\n        <div class=\"color-presets-grid\">\n          @for (color of defaultColorPresets(); track color) {\n          <div\n            class=\"color-preset\"\n            [style.background-color]=\"color\"\n            (click)=\"selectColor(color)\"\n            [class.selected]=\"color === selectedColor()\"\n            [title]=\"color\"\n          >\n            @if (color === selectedColor()) {\n            <mat-icon class=\"check-icon\">check</mat-icon>\n            }\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n}\n", styles: [".color-picker-input-container{width:100%;max-width:280px}.color-preview{display:inline-block;width:20px;height:20px;margin-left:16px;border-radius:50%;border:2px solid #e0e0e0;cursor:pointer;margin-right:8px;transition:all .2s ease}.color-preview:hover{border-color:#999;transform:scale(1.1)}.hidden-color-input{display:none}.custom-color-picker-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .2s ease}.custom-color-picker{background:#fff;border-radius:12px;box-shadow:0 8px 32px #0003;width:min(90vw,340px);max-height:min(80vh,600px);overflow:hidden;animation:slideUp .2s ease}.picker-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #e0e0e0;background:#fff}.picker-header h3{margin:0;font-size:16px;font-weight:600;color:#333}.picker-header .close-btn{background:none;border:none;cursor:pointer;color:#666;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%}.picker-header .close-btn:hover{background-color:#f5f5f5;color:#333}.picker-header .close-btn mat-icon{font-size:20px;width:20px;height:20px}.picker-content{padding:20px;display:flex;flex-direction:column;gap:24px}.color-input-section{display:flex;flex-direction:column;gap:12px}.color-input-section .section-label{font-weight:600;color:#333;font-size:14px}.color-input-section .native-color-input{width:100%;height:48px;cursor:pointer;border:2px solid #e0e0e0;border-radius:8px}.color-input-section .native-color-input:hover{border-color:#ccc}.color-input-section .current-color{font-size:12px;color:#666;text-align:center}.color-presets-section .section-label{display:block;font-weight:600;color:#333;font-size:14px;margin-bottom:12px}.color-presets-section .color-presets-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.color-presets-section .color-presets-grid .color-preset{position:relative;width:100%;aspect-ratio:1;border-radius:8px;cursor:pointer;border:2px solid #e0e0e0;transition:all .2s ease}.color-presets-section .color-presets-grid .color-preset:hover{transform:scale(1.1);border-color:#999;box-shadow:0 4px 12px #00000026}.color-presets-section .color-presets-grid .color-preset.selected{border-color:#333;transform:scale(1.05)}.color-presets-section .color-presets-grid .color-preset .check-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:16px;width:16px;height:16px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}\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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: TranslateModule }, { kind: "pipe", type: i5$1.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyUIColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: NettyUIColorPicker, isStandalone: true, selector: "ntyui-color-picker", inputs: { selectedColor: { classPropertyName: "selectedColor", publicName: "selectedColor", isSignal: true, isRequired: false, transformFunction: null }, customColorPresets: { classPropertyName: "customColorPresets", publicName: "customColorPresets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedColor: "selectedColorChange", colorChange: "colorChange" }, viewQueries: [{ propertyName: "colorInput", first: true, predicate: ["colorInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field appearance=\"outline\" class=\"color-picker-input-container\">\n  <span\n    matPrefix\n    class=\"color-preview\"\n    [style.background-color]=\"selectedColor()\"\n    (click)=\"togglePicker()\"\n  ></span>\n\n  <input\n    matInput\n    [ngModel]=\"selectedColor()\"\n    (ngModelChange)=\"onInputChange($event)\"\n    placeholder=\"Renk Kodu (\u00F6rn: #FFFFFF)\"\n  />\n\n  <mat-icon matSuffix (click)=\"togglePicker()\">search</mat-icon>\n</mat-form-field>\n\n<input\n  type=\"color\"\n  class=\"hidden-color-input\"\n  #colorInput\n  [value]=\"selectedColor()\"\n  (change)=\"onColorPickerChange($event)\"\n/>\n\n<!-- Custom color picker pop-up -->\n@if (isPickerVisible()) {\n<div class=\"custom-color-picker-overlay\" (click)=\"closePicker()\">\n  <div class=\"custom-color-picker\" (click)=\"$event.stopPropagation()\">\n    <!-- Header -->\n    <div class=\"picker-header\">\n      <h3>{{'@Choose_Color' | translate}}</h3>\n      <button class=\"close-btn\" (click)=\"closePicker()\" type=\"button\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <!-- Content -->\n    <div class=\"picker-content\">\n      <!-- Custom color picker -->\n      <div class=\"color-input-section\">\n        <label class=\"section-label\"\n          >{{'@Choose_Custom_Color' | translate}}</label\n        >\n        <input\n          type=\"color\"\n          [value]=\"selectedColor()\"\n          (change)=\"onCustomColorChange($event)\"\n          class=\"native-color-input\"\n        />\n        <span class=\"current-color\"\n          >{{'@Available' | translate}}: {{ selectedColor() }}</span\n        >\n      </div>\n\n      <!-- Custom colors (if there is) -->\n      @if (hasCustomColors()) {\n      <div class=\"color-presets-section\">\n        <label class=\"section-label\">{{'@Defined_Colors' | translate}}</label>\n        <div class=\"color-presets-grid\">\n          @for (color of customColorPresets(); track color) {\n          <div\n            class=\"color-preset\"\n            [style.background-color]=\"color\"\n            (click)=\"selectColor(color)\"\n            [class.selected]=\"color === selectedColor()\"\n            [title]=\"color\"\n          >\n            @if (color === selectedColor()) {\n            <mat-icon class=\"check-icon\">check</mat-icon>\n            }\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      <!-- Standard colors -->\n      <div class=\"color-presets-section\">\n        <label class=\"section-label\">\n          {{ hasCustomColors() ? ('@Standard_Colors' | translate) :\n          ('@Color_Palette' | translate) }}\n        </label>\n        <div class=\"color-presets-grid\">\n          @for (color of defaultColorPresets(); track color) {\n          <div\n            class=\"color-preset\"\n            [style.background-color]=\"color\"\n            (click)=\"selectColor(color)\"\n            [class.selected]=\"color === selectedColor()\"\n            [title]=\"color\"\n          >\n            @if (color === selectedColor()) {\n            <mat-icon class=\"check-icon\">check</mat-icon>\n            }\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n}\n", styles: [".color-picker-input-container{width:100%;max-width:280px}.color-preview{display:inline-block;width:20px;height:20px;margin-left:16px;border-radius:50%;border:2px solid #e0e0e0;cursor:pointer;margin-right:8px;transition:all .2s ease}.color-preview:hover{border-color:#999;transform:scale(1.1)}.hidden-color-input{display:none}.custom-color-picker-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .2s ease}.custom-color-picker{background:#fff;border-radius:12px;box-shadow:0 8px 32px #0003;width:min(90vw,340px);max-height:min(80vh,600px);overflow:hidden;animation:slideUp .2s ease}.picker-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #e0e0e0;background:#fff}.picker-header h3{margin:0;font-size:16px;font-weight:600;color:#333}.picker-header .close-btn{background:none;border:none;cursor:pointer;color:#666;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%}.picker-header .close-btn:hover{background-color:#f5f5f5;color:#333}.picker-header .close-btn mat-icon{font-size:20px;width:20px;height:20px}.picker-content{padding:20px;display:flex;flex-direction:column;gap:24px}.color-input-section{display:flex;flex-direction:column;gap:12px}.color-input-section .section-label{font-weight:600;color:#333;font-size:14px}.color-input-section .native-color-input{width:100%;height:48px;cursor:pointer;border:2px solid #e0e0e0;border-radius:8px}.color-input-section .native-color-input:hover{border-color:#ccc}.color-input-section .current-color{font-size:12px;color:#666;text-align:center}.color-presets-section .section-label{display:block;font-weight:600;color:#333;font-size:14px;margin-bottom:12px}.color-presets-section .color-presets-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.color-presets-section .color-presets-grid .color-preset{position:relative;width:100%;aspect-ratio:1;border-radius:8px;cursor:pointer;border:2px solid #e0e0e0;transition:all .2s ease}.color-presets-section .color-presets-grid .color-preset:hover{transform:scale(1.1);border-color:#999;box-shadow:0 4px 12px #00000026}.color-presets-section .color-presets-grid .color-preset.selected{border-color:#333;transform:scale(1.05)}.color-presets-section .color-presets-grid .color-preset .check-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:16px;width:16px;height:16px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}\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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: TranslateModule }, { kind: "pipe", type: i5$1.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ColorPicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyUIColorPicker, decorators: [{
             type: Component,
             args: [{ selector: 'ntyui-color-picker', imports: [
                         FormsModule,
@@ -1447,14 +1447,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                     ], template: "<mat-form-field appearance=\"outline\" class=\"color-picker-input-container\">\n  <span\n    matPrefix\n    class=\"color-preview\"\n    [style.background-color]=\"selectedColor()\"\n    (click)=\"togglePicker()\"\n  ></span>\n\n  <input\n    matInput\n    [ngModel]=\"selectedColor()\"\n    (ngModelChange)=\"onInputChange($event)\"\n    placeholder=\"Renk Kodu (\u00F6rn: #FFFFFF)\"\n  />\n\n  <mat-icon matSuffix (click)=\"togglePicker()\">search</mat-icon>\n</mat-form-field>\n\n<input\n  type=\"color\"\n  class=\"hidden-color-input\"\n  #colorInput\n  [value]=\"selectedColor()\"\n  (change)=\"onColorPickerChange($event)\"\n/>\n\n<!-- Custom color picker pop-up -->\n@if (isPickerVisible()) {\n<div class=\"custom-color-picker-overlay\" (click)=\"closePicker()\">\n  <div class=\"custom-color-picker\" (click)=\"$event.stopPropagation()\">\n    <!-- Header -->\n    <div class=\"picker-header\">\n      <h3>{{'@Choose_Color' | translate}}</h3>\n      <button class=\"close-btn\" (click)=\"closePicker()\" type=\"button\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <!-- Content -->\n    <div class=\"picker-content\">\n      <!-- Custom color picker -->\n      <div class=\"color-input-section\">\n        <label class=\"section-label\"\n          >{{'@Choose_Custom_Color' | translate}}</label\n        >\n        <input\n          type=\"color\"\n          [value]=\"selectedColor()\"\n          (change)=\"onCustomColorChange($event)\"\n          class=\"native-color-input\"\n        />\n        <span class=\"current-color\"\n          >{{'@Available' | translate}}: {{ selectedColor() }}</span\n        >\n      </div>\n\n      <!-- Custom colors (if there is) -->\n      @if (hasCustomColors()) {\n      <div class=\"color-presets-section\">\n        <label class=\"section-label\">{{'@Defined_Colors' | translate}}</label>\n        <div class=\"color-presets-grid\">\n          @for (color of customColorPresets(); track color) {\n          <div\n            class=\"color-preset\"\n            [style.background-color]=\"color\"\n            (click)=\"selectColor(color)\"\n            [class.selected]=\"color === selectedColor()\"\n            [title]=\"color\"\n          >\n            @if (color === selectedColor()) {\n            <mat-icon class=\"check-icon\">check</mat-icon>\n            }\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      <!-- Standard colors -->\n      <div class=\"color-presets-section\">\n        <label class=\"section-label\">\n          {{ hasCustomColors() ? ('@Standard_Colors' | translate) :\n          ('@Color_Palette' | translate) }}\n        </label>\n        <div class=\"color-presets-grid\">\n          @for (color of defaultColorPresets(); track color) {\n          <div\n            class=\"color-preset\"\n            [style.background-color]=\"color\"\n            (click)=\"selectColor(color)\"\n            [class.selected]=\"color === selectedColor()\"\n            [title]=\"color\"\n          >\n            @if (color === selectedColor()) {\n            <mat-icon class=\"check-icon\">check</mat-icon>\n            }\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n}\n", styles: [".color-picker-input-container{width:100%;max-width:280px}.color-preview{display:inline-block;width:20px;height:20px;margin-left:16px;border-radius:50%;border:2px solid #e0e0e0;cursor:pointer;margin-right:8px;transition:all .2s ease}.color-preview:hover{border-color:#999;transform:scale(1.1)}.hidden-color-input{display:none}.custom-color-picker-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .2s ease}.custom-color-picker{background:#fff;border-radius:12px;box-shadow:0 8px 32px #0003;width:min(90vw,340px);max-height:min(80vh,600px);overflow:hidden;animation:slideUp .2s ease}.picker-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #e0e0e0;background:#fff}.picker-header h3{margin:0;font-size:16px;font-weight:600;color:#333}.picker-header .close-btn{background:none;border:none;cursor:pointer;color:#666;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%}.picker-header .close-btn:hover{background-color:#f5f5f5;color:#333}.picker-header .close-btn mat-icon{font-size:20px;width:20px;height:20px}.picker-content{padding:20px;display:flex;flex-direction:column;gap:24px}.color-input-section{display:flex;flex-direction:column;gap:12px}.color-input-section .section-label{font-weight:600;color:#333;font-size:14px}.color-input-section .native-color-input{width:100%;height:48px;cursor:pointer;border:2px solid #e0e0e0;border-radius:8px}.color-input-section .native-color-input:hover{border-color:#ccc}.color-input-section .current-color{font-size:12px;color:#666;text-align:center}.color-presets-section .section-label{display:block;font-weight:600;color:#333;font-size:14px;margin-bottom:12px}.color-presets-section .color-presets-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.color-presets-section .color-presets-grid .color-preset{position:relative;width:100%;aspect-ratio:1;border-radius:8px;cursor:pointer;border:2px solid #e0e0e0;transition:all .2s ease}.color-presets-section .color-presets-grid .color-preset:hover{transform:scale(1.1);border-color:#999;box-shadow:0 4px 12px #00000026}.color-presets-section .color-presets-grid .color-preset.selected{border-color:#333;transform:scale(1.05)}.color-presets-section .color-presets-grid .color-preset .check-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:16px;width:16px;height:16px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
         }] });
 
-class EnumValues {
+class NettyEnumValues {
     languageCode = '';
     enumName = '';
     value = 0;
     text = '-';
 }
 
-class EnumstorageProxy {
+class NettyEnumStorageProxy {
     http = inject(HttpClient);
     environmentProxy = inject(EnvironmentProxy);
     async loadEnumList() {
@@ -1479,10 +1479,10 @@ class EnumstorageProxy {
             return [];
         return JSON.parse(data);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: EnumstorageProxy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: EnumstorageProxy, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyEnumStorageProxy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyEnumStorageProxy, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: EnumstorageProxy, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NettyEnumStorageProxy, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1497,5 +1497,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Carousel, CheckboxToggle, ColorPicker, DatePicker, DateTime, EmailInput, EnumValues, EnumstorageProxy, FilterButton, MaskedInput, NettyUIButton, Ntyui, NtyuiModule, NumberInput, SearchInput, Select, TextInput, TimePicker, Tree, UiBase };
+export { NettyEnumStorageProxy, NettyEnumValues, NettyUIButton, NettyUICarousel, NettyUICheckboxToggle, NettyUIColorPicker, NettyUIDatePicker, NettyUIDateTime, NettyUIEmailInput, NettyUIFilterButton, NettyUIMaskedInput, NettyUINumberInput, NettyUISearchInput, NettyUISelect, NettyUITextInput, NettyUITimePicker, NettyUITree, Ntyui, NtyuiModule, UiBase };
 //# sourceMappingURL=nettyapps-ntyui.mjs.map