@nettyapps/ntyui 21.1.6 → 21.1.8

package/fesm2022/nettyapps-ntyui.mjs

@@ -218,13 +218,7 @@ class NettyUITextInput extends UiBase {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUITextInput, decorators: [{
             type: Component,
-            args: [{ selector: 'ntyui-text-input', imports: [
-                        FormsModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatIconModule,
-                        ReactiveFormsModule,
-                    ], providers: [
+            args: [{ selector: 'ntyui-text-input', imports: [FormsModule, MatFormFieldModule, MatInputModule, MatIconModule, ReactiveFormsModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: NettyUITextInput,
@@ -266,13 +260,7 @@ class NettyUIEmailInput extends UiBase {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUIEmailInput, decorators: [{
             type: Component,
-            args: [{ selector: 'ntyui-email-input', imports: [
-                        FormsModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        ReactiveFormsModule,
-                        MatIconModule,
-                    ], providers: [
+            args: [{ selector: 'ntyui-email-input', imports: [FormsModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule, MatIconModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: NettyUIEmailInput,
@@ -427,16 +415,7 @@ class NettyUIDateTime extends UiBase {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUIDateTime, decorators: [{
             type: Component,
-            args: [{ selector: 'ntyui-date-time', imports: [
-                        FormsModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        ReactiveFormsModule,
-                        MatDatepickerModule,
-                        MatNativeDateModule,
-                        MatIconModule,
-                        MatTimepickerModule,
-                    ], providers: [
+            args: [{ selector: 'ntyui-date-time', imports: [FormsModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule, MatDatepickerModule, MatNativeDateModule, MatIconModule, MatTimepickerModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: NettyUIDateTime,
@@ -606,15 +585,7 @@ class NettyUIDatePicker extends UiBase {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUIDatePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'ntyui-date-picker', imports: [
-                        FormsModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        ReactiveFormsModule,
-                        MatDatepickerModule,
-                        MatNativeDateModule,
-                        MatIconModule,
-                    ], providers: [
+            args: [{ selector: 'ntyui-date-picker', imports: [FormsModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule, MatDatepickerModule, MatNativeDateModule, MatIconModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: NettyUIDatePicker,
@@ -750,13 +721,7 @@ class NettyUIMaskedInput extends UiBase {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUIMaskedInput, decorators: [{
             type: Component,
-            args: [{ selector: 'ntyui-masked-input', imports: [
-                        FormsModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatIconModule,
-                        ReactiveFormsModule,
-                    ], providers: [
+            args: [{ selector: 'ntyui-masked-input', imports: [FormsModule, MatFormFieldModule, MatInputModule, MatIconModule, ReactiveFormsModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: NettyUIMaskedInput,
@@ -930,12 +895,7 @@ class NettyUIButton extends UiBase {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUIButton, decorators: [{
             type: Component,
-            args: [{ selector: 'ntyui-button', imports: [
-                        MatButtonModule,
-                        MatTooltipModule,
-                        MatIconModule,
-                        MatMenuModule
-                    ], host: { 'ntyui-id': 'NettyUIButton' }, template: "@switch (type()) { @case ('menu') {\n<button\n  type=\"button\"\n  mat-button\n  [matTooltip]=\"toolTip()\"\n  [class]=\"getDisplayText().length > 0 ? 'ui-menu-button-text' : 'ui-menu-button'\"\n  [disabled]=\"isDisabled()\"\n  (click)=\"onClicked()\"\n  [matMenuTriggerFor]=\"menuReference()\"\n>\n  @if (icon() && countdown() === 0) {\n  <mat-icon class=\"material-symbols-outlined\">{{ icon() }}</mat-icon> }\n  <span>{{ getDisplayText() }}</span>\n  @if (menuReference() && !(countdown() > 0)){\n  <mat-icon class=\"menu-icon\">arrow_drop_down</mat-icon>\n  }\n</button>\n} @case ('close') {\n<div class=\"flex-container\">\n  <button\n    mat-stroked-button\n    color=\"primary\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"onClicked()\"\n    [matTooltip]=\"toolTip()\"\n    class=\"ui-close-button\"\n  >\n    @if(icon()){\n    <mat-icon class=\"material-symbols-outlined\">{{ icon() }}</mat-icon> } @else\n    {<mat-icon> close </mat-icon>} {{ getDisplayText() }}\n  </button>\n</div>\n} @default { @if(isFilled()){\n<button\n  mat-raised-button\n  color=\"primary\"\n  [disabled]=\"isDisabled()\"\n  (click)=\"onClicked()\"\n  [matTooltip]=\"toolTip()\"\n  class=\"regular-button\"\n  matButton=\"filled\"\n>\n  @if(icon()){\n  <mat-icon class=\"material-symbols-outlined\">{{ icon() }}</mat-icon> } {{\n  getDisplayText() }}\n</button>\n} @else {\n<button\n  mat-stroked-button\n  color=\"primary\"\n  [disabled]=\"isDisabled()\"\n  (click)=\"onClicked()\"\n  [matTooltip]=\"toolTip()\"\n  class=\"regular-button\"\n>\n  @if(icon()){\n  <mat-icon class=\"material-symbols-outlined\">{{ icon() }}</mat-icon> } {{\n  getDisplayText() }}\n</button>\n} } }\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:flex-end;align-items:center;width:100%;height:0}.ui-menu-button{flex-direction:row-reverse;width:25px;min-width:25px;padding:0;margin:0;height:40px}.ui-menu-button mat-icon{font-size:20px;width:20px;height:20px;margin:0;padding:0}.ui-menu-button-text{flex-direction:row-reverse;max-width:75px;min-width:25px;flex-grow:1;padding:0;margin:0 15px 0 0;height:20px;min-width:fit-content}.ui-menu-button-text mat-icon{font-size:20px;width:20px;height:20px;margin:0;padding:0}.ui-menu-button:hover{background-color:var(--mat-sys-primary);color:var(--mat-sys-surface);border-radius:5px;height:30px}.ui-menu-button .menu-icon{margin-left:15px}.ui-close-button{margin-left:auto;margin-bottom:40px;width:30px;min-width:20px;padding:5px;height:25px;border-radius:5px;background-color:var(--mat-sys-secondary)}.ui-close-button mat-icon{color:var(--mat-sys-on-secondary);font-size:20px;margin:0;padding-right:1px}\n"] }]
+            args: [{ selector: 'ntyui-button', imports: [MatButtonModule, MatTooltipModule, MatIconModule, MatMenuModule], host: { 'ntyui-id': 'NettyUIButton' }, template: "@switch (type()) { @case ('menu') {\n<button\n  type=\"button\"\n  mat-button\n  [matTooltip]=\"toolTip()\"\n  [class]=\"getDisplayText().length > 0 ? 'ui-menu-button-text' : 'ui-menu-button'\"\n  [disabled]=\"isDisabled()\"\n  (click)=\"onClicked()\"\n  [matMenuTriggerFor]=\"menuReference()\"\n>\n  @if (icon() && countdown() === 0) {\n  <mat-icon class=\"material-symbols-outlined\">{{ icon() }}</mat-icon> }\n  <span>{{ getDisplayText() }}</span>\n  @if (menuReference() && !(countdown() > 0)){\n  <mat-icon class=\"menu-icon\">arrow_drop_down</mat-icon>\n  }\n</button>\n} @case ('close') {\n<div class=\"flex-container\">\n  <button\n    mat-stroked-button\n    color=\"primary\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"onClicked()\"\n    [matTooltip]=\"toolTip()\"\n    class=\"ui-close-button\"\n  >\n    @if(icon()){\n    <mat-icon class=\"material-symbols-outlined\">{{ icon() }}</mat-icon> } @else\n    {<mat-icon> close </mat-icon>} {{ getDisplayText() }}\n  </button>\n</div>\n} @default { @if(isFilled()){\n<button\n  mat-raised-button\n  color=\"primary\"\n  [disabled]=\"isDisabled()\"\n  (click)=\"onClicked()\"\n  [matTooltip]=\"toolTip()\"\n  class=\"regular-button\"\n  matButton=\"filled\"\n>\n  @if(icon()){\n  <mat-icon class=\"material-symbols-outlined\">{{ icon() }}</mat-icon> } {{\n  getDisplayText() }}\n</button>\n} @else {\n<button\n  mat-stroked-button\n  color=\"primary\"\n  [disabled]=\"isDisabled()\"\n  (click)=\"onClicked()\"\n  [matTooltip]=\"toolTip()\"\n  class=\"regular-button\"\n>\n  @if(icon()){\n  <mat-icon class=\"material-symbols-outlined\">{{ icon() }}</mat-icon> } {{\n  getDisplayText() }}\n</button>\n} } }\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:flex-end;align-items:center;width:100%;height:0}.ui-menu-button{flex-direction:row-reverse;width:25px;min-width:25px;padding:0;margin:0;height:40px}.ui-menu-button mat-icon{font-size:20px;width:20px;height:20px;margin:0;padding:0}.ui-menu-button-text{flex-direction:row-reverse;max-width:75px;min-width:25px;flex-grow:1;padding:0;margin:0 15px 0 0;height:20px;min-width:fit-content}.ui-menu-button-text mat-icon{font-size:20px;width:20px;height:20px;margin:0;padding:0}.ui-menu-button:hover{background-color:var(--mat-sys-primary);color:var(--mat-sys-surface);border-radius:5px;height:30px}.ui-menu-button .menu-icon{margin-left:15px}.ui-close-button{margin-left:auto;margin-bottom:40px;width:30px;min-width:20px;padding:5px;height:25px;border-radius:5px;background-color:var(--mat-sys-secondary)}.ui-close-button mat-icon{color:var(--mat-sys-on-secondary);font-size:20px;margin:0;padding-right:1px}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], isFilled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFilled", required: false }] }], menuReference: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuReference", required: false }] }], disableOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableOnClick", required: false }] }], disableDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableDuration", required: false }] }], waitingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "waitingText", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], toolTip: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolTip", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 class NettyUIFilterButton extends UiBase {
@@ -1096,13 +1056,7 @@ class NettyUINumberInput extends UiBase {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUINumberInput, decorators: [{
             type: Component,
-            args: [{ selector: 'ntyui-number-input', imports: [
-                        MatInputModule,
-                        MatFormFieldModule,
-                        FormsModule,
-                        MatIconModule,
-                        ReactiveFormsModule,
-                    ], providers: [
+            args: [{ selector: 'ntyui-number-input', imports: [MatInputModule, MatFormFieldModule, FormsModule, MatIconModule, ReactiveFormsModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: NettyUINumberInput,
@@ -1128,13 +1082,7 @@ class NettyUISearchInput extends UiBase {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUISearchInput, decorators: [{
             type: Component,
-            args: [{ selector: 'ntyui-search-input', imports: [
-                        FormsModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatIconModule,
-                        ReactiveFormsModule,
-                    ], providers: [
+            args: [{ selector: 'ntyui-search-input', imports: [FormsModule, MatFormFieldModule, MatInputModule, MatIconModule, ReactiveFormsModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: NettyUISearchInput,
@@ -1143,6 +1091,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                     ], host: { 'ntyui-id': 'NettyUISearchInput' }, template: "<mat-form-field\n  class=\"example-full-width\"\n  [appearance]=\"appearance()\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && value()\"\n>\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n\n  <input\n    #inputModel=\"ngModel\"\n    type=\"text\"\n    matInput\n    [placeholder]=\"placeholder()\"\n    [(ngModel)]=\"value\"\n    (input)=\"onInputChange($event)\"\n    (keyup.enter)=\"emitSearch()\"\n  />\n\n  @if (value() && !disabled()) {\n  <button\n    mat-icon-button\n    matSuffix\n    (click)=\"clearInput()\"\n    aria-label=\"Clear\"\n    class=\"clear-btn number-clear-btn\"\n  >\n    <mat-icon>cancel</mat-icon>\n  </button>\n  }\n\n  <button\n    class=\"search-icon\"\n    mat-icon-button\n    matSuffix\n    (click)=\"emitSearch()\"\n    aria-label=\"Search\"\n  >\n    <mat-icon matSuffix>search</mat-icon>\n  </button>\n\n  @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n  <mat-error> {{ getErrorMessage() }} </mat-error>\n  }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"] }]
         }], propDecorators: { search: [{ type: i0.Output, args: ["search"] }] } });
 
+class NettyUIBarcodeInput extends UiBase {
+    onEnter = output();
+    handleKeyUpEnter() {
+        const currentValue = this.value();
+        if (currentValue) {
+            this.onEnter.emit(currentValue);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUIBarcodeInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: NettyUIBarcodeInput, isStandalone: true, selector: "ntyui-barcode-input", outputs: { onEnter: "onEnter" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: NettyUIBarcodeInput,
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  class=\"example-full-width\"\n  [appearance]=\"appearance()\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && value()\"\n>\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n  \n  <input\n    #inputModel=\"ngModel\"\n    type=\"text\"\n    matInput\n    [placeholder]=\"placeholder()\"\n    [ngModel]=\"value()\"\n    (input)=\"onInputChange($event)\"\n    (keyup.enter)=\"handleKeyUpEnter()\" \n  />\n\n  @if (value() && !disabled()) {\n  <button\n    mat-icon-button\n    matSuffix\n    (click)=\"clearInput()\"\n    aria-label=\"Clear\"\n    class=\"clear-btn number-clear-btn\"\n  >\n    <mat-icon>cancel</mat-icon>\n  </button>\n  } \n\n  @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n  <mat-error> {{ getErrorMessage() }} </mat-error>\n  }\n</mat-form-field>", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUIBarcodeInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'ntyui-barcode-input', imports: [FormsModule, MatFormFieldModule, MatInputModule, MatIconModule, ReactiveFormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: NettyUIBarcodeInput,
+                            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  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n  \n  <input\n    #inputModel=\"ngModel\"\n    type=\"text\"\n    matInput\n    [placeholder]=\"placeholder()\"\n    [ngModel]=\"value()\"\n    (input)=\"onInputChange($event)\"\n    (keyup.enter)=\"handleKeyUpEnter()\" \n  />\n\n  @if (value() && !disabled()) {\n  <button\n    mat-icon-button\n    matSuffix\n    (click)=\"clearInput()\"\n    aria-label=\"Clear\"\n    class=\"clear-btn number-clear-btn\"\n  >\n    <mat-icon>cancel</mat-icon>\n  </button>\n  } \n\n  @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n  <mat-error> {{ getErrorMessage() }} </mat-error>\n  }\n</mat-form-field>" }]
+        }], propDecorators: { onEnter: [{ type: i0.Output, args: ["onEnter"] }] } });
+
 class NettyUISelect extends UiBase {
     // Input properties
     showNoneOption = input(false, { ...(ngDevMode ? { debugName: "showNoneOption" } : {}), transform: booleanAttribute });
@@ -1269,14 +1245,7 @@ class NettyUITimePicker extends UiBase {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUITimePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'ntyui-time-picker', imports: [
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatTimepickerModule,
-                        MatDatepickerModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideNativeDateAdapter()], host: { 'ntyui-id': 'NettyUITimePicker' }, template: "<mat-form-field\n  [appearance]=\"appearance()\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && timeValue()\"\n>\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n\n  <input\n    #inputModel=\"ngModel\"\n    matInput\n    [matTimepicker]=\"picker\"\n    [(ngModel)]=\"timeValue\"\n    (ngModelChange)=\"onTimeChange($event)\"\n    [placeholder]=\"placeholder()\"\n  />\n\n  @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n  <mat-error> {{ getErrorMessage() }} </mat-error>\n  }\n\n  <mat-timepicker #picker />\n  <mat-timepicker-toggle [for]=\"picker\" matSuffix />\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}mat-form-field{margin-right:16px}\n"] }]
+            args: [{ selector: 'ntyui-time-picker', imports: [MatFormFieldModule, MatInputModule, MatTimepickerModule, MatDatepickerModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideNativeDateAdapter()], host: { 'ntyui-id': 'NettyUITimePicker' }, template: "<mat-form-field\n  [appearance]=\"appearance()\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && timeValue()\"\n>\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n\n  <input\n    #inputModel=\"ngModel\"\n    matInput\n    [matTimepicker]=\"picker\"\n    [(ngModel)]=\"timeValue\"\n    (ngModelChange)=\"onTimeChange($event)\"\n    [placeholder]=\"placeholder()\"\n  />\n\n  @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n  <mat-error> {{ getErrorMessage() }} </mat-error>\n  }\n\n  <mat-timepicker #picker />\n  <mat-timepicker-toggle [for]=\"picker\" matSuffix />\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}mat-form-field{margin-right:16px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { timeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeValue", required: false }] }, { type: i0.Output, args: ["timeValueChange"] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }] } });
 
 class NettyUITree {
@@ -1524,16 +1493,11 @@ class NettyUITree {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUITree, decorators: [{
             type: Component,
-            args: [{ selector: 'ntyui-tree', imports: [
-                        MatCheckboxModule,
-                        MatRadioModule,
-                        MatButtonModule,
-                        MatIconModule
-                    ], host: { 'ntyui-id': 'NettyUITree' }, 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"] }]
+            args: [{ selector: 'ntyui-tree', imports: [MatCheckboxModule, MatRadioModule, MatButtonModule, MatIconModule], host: { 'ntyui-id': 'NettyUITree' }, 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: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }, { type: i0.Output, args: ["dataChange"] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }, { type: i0.Output, args: ["selectionModeChange"] }], selectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIds", required: false }] }, { type: i0.Output, args: ["selectedIdsChange"] }], selectBranch: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectBranch", required: false }] }] } });
 
 class NettyUIColorPicker {
-    // Two-way binding for the selected color (#RRGGBB format)
+    // Two-way binding for the selected color
     selectedColor = model('#000000', ...(ngDevMode ? [{ debugName: "selectedColor" }] : []));
     // Input for custom color presets provided by the parent component
     customColorPresets = input([], ...(ngDevMode ? [{ debugName: "customColorPresets" }] : []));
@@ -1544,32 +1508,7 @@ class NettyUIColorPicker {
     // Signal to control the visibility of the custom color picker popup
     isPickerVisible = signal(false, ...(ngDevMode ? [{ debugName: "isPickerVisible" }] : []));
     // Default color palette for the picker
-    defaultColorPresets = signal([
-        '#FF0000',
-        '#00FF00',
-        '#0000FF',
-        '#FFFF00',
-        '#FF00FF',
-        '#00FFFF',
-        '#000000',
-        '#FFFFFF',
-        '#FF5733',
-        '#33FF57',
-        '#3357FF',
-        '#F333FF',
-        '#FF3333',
-        '#33FFF3',
-        '#8E33FF',
-        '#FF33A1',
-        '#FF6B6B',
-        '#4ECDC4',
-        '#45B7D1',
-        '#96CEB4',
-        '#FFEAA7',
-        '#DDA0DD',
-        '#98D8C8',
-        '#F7DC6F',
-    ], ...(ngDevMode ? [{ debugName: "defaultColorPresets" }] : []));
+    defaultColorPresets = signal(['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#000000', '#FFFFFF', '#FF5733', '#33FF57', '#3357FF', '#F333FF', '#FF3333', '#33FFF3', '#8E33FF', '#FF33A1', '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD', '#98D8C8', '#F7DC6F'], ...(ngDevMode ? [{ debugName: "defaultColorPresets" }] : []));
     // Computed signal that combines custom and default colors, ensuring uniqueness.
     displayColorPresets = computed(() => {
         const customColors = this.customColorPresets();
@@ -1583,7 +1522,7 @@ class NettyUIColorPicker {
     hasCustomColors = computed(() => this.customColorPresets().length > 0, ...(ngDevMode ? [{ debugName: "hasCustomColors" }] : []));
     /**
      * Handles changes from the text input field, updating the model and emitting the event.
-     * @param newColor The new color value (e.g., '#FF0000').
+     * @param newColor The new color value
      */
     onInputChange(newColor) {
         this.selectedColor.set(newColor);
@@ -1632,13 +1571,7 @@ class NettyUIColorPicker {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUIColorPicker, decorators: [{
             type: Component,
-            args: [{ selector: 'ntyui-color-picker', imports: [
-                        FormsModule,
-                        MatFormFieldModule,
-                        MatIconModule,
-                        MatInputModule,
-                        TranslateModule,
-                    ], host: { 'ntyui-id': 'NettyUIColorPicker' }, 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 -->\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"] }]
+            args: [{ selector: 'ntyui-color-picker', imports: [FormsModule, MatFormFieldModule, MatIconModule, MatInputModule, TranslateModule], host: { 'ntyui-id': 'NettyUIColorPicker' }, 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 -->\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"] }]
         }], propDecorators: { selectedColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedColor", required: false }] }, { type: i0.Output, args: ["selectedColorChange"] }], customColorPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "customColorPresets", required: false }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }], colorInput: [{ type: i0.ViewChild, args: ['colorInput', { isSignal: true }] }] } });
 
 class NettyuUIDateTimeRange extends UiBase {
@@ -1733,5 +1666,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NettyEnumStorageProxy, NettyEnumValues, NettyUIButton, NettyUICarousel, NettyUICheckboxToggle, NettyUIColorPicker, NettyUIDatePicker, NettyUIDateTime, NettyUIEmailInput, NettyUIFilterButton, NettyUIMaskedInput, NettyUINumberInput, NettyUISearchInput, NettyUISelect, NettyUITextInput, NettyUITimePicker, NettyUITree, NettyUIVisibleSwitchButton, NettyuUIDateTimeRange, Ntyui, NtyuiModule, UiBase };
+export { NettyEnumStorageProxy, NettyEnumValues, NettyUIBarcodeInput, NettyUIButton, NettyUICarousel, NettyUICheckboxToggle, NettyUIColorPicker, NettyUIDatePicker, NettyUIDateTime, NettyUIEmailInput, NettyUIFilterButton, NettyUIMaskedInput, NettyUINumberInput, NettyUISearchInput, NettyUISelect, NettyUITextInput, NettyUITimePicker, NettyUITree, NettyUIVisibleSwitchButton, NettyuUIDateTimeRange, Ntyui, NtyuiModule, UiBase };
 //# sourceMappingURL=nettyapps-ntyui.mjs.map