tecnualng 21.0.12 → 21.0.17

package/fesm2022/tecnualng.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, model, forwardRef, signal, computed, HostListener, viewChild, TemplateRef, contentChildren, effect, Injectable, createComponent, Input, Directive, output, ContentChildren } from '@angular/core';
-import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, model, forwardRef, inject, ElementRef, Renderer2, signal, computed, effect, HostListener, Directive, contentChild, viewChild, TemplateRef, contentChildren, Injectable, createComponent, Input, output, ContentChildren, ViewContainerRef, booleanAttribute } from '@angular/core';
+import * as i1$2 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { trigger, transition, style, animate } from '@angular/animations';
 import * as i1$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 
@@ -33,7 +33,7 @@ class TngButton {
         button.appendChild(circle);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TngButton, isStandalone: true, selector: "button[tngButton], a[tngButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, soft: { classPropertyName: "soft", publicName: "soft", isSignal: true, isRequired: false, transformFunction: null }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "createRipple($event)" }, properties: { "class.tng-button--primary": "variant() === \"primary\"", "class.tng-button--secondary": "variant() === \"secondary\"", "class.tng-button--success": "variant() === \"success\"", "class.tng-button--warning": "variant() === \"warning\"", "class.tng-button--error": "variant() === \"error\"", "class.tng-button--rounded": "rounded()", "class.tng-button--soft": "soft()" }, classAttribute: "tng-button" }, exportAs: ["tngButton"], ngImport: i0, template: "<span class=\"tng-button__label\">\n    @if (icon() && iconPosition() === 'left') {\n        <i [class]=\"icon()\" class=\"tng-button__icon tng-button__icon--left\"></i>\n    }\n    <ng-content></ng-content>\n    @if (icon() && iconPosition() === 'right') {\n        <i [class]=\"icon()\" class=\"tng-button__icon tng-button__icon--right\"></i>\n    }\n</span>\n\n", styles: [".tng-button{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:64px;height:32px;border:none;outline:none;line-height:inherit;appearance:none;-webkit-appearance:none;overflow:hidden;vertical-align:middle;background:transparent;color:var(--tng-text);padding:0 16px;font-family:inherit;font-size:.875rem;font-weight:500;letter-spacing:.02857em;border-radius:4px;transition:background-color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),border-radius .25s cubic-bezier(.4,0,.2,1),transform .1s ease-in-out}.tng-button::-moz-focus-inner{padding:0;border:0}.tng-button:active{outline:none;transform:scale(.98)}.tng-button:hover{cursor:pointer}.tng-button:disabled{cursor:default;pointer-events:none;opacity:.5}.tng-button[hidden]{display:none}.tng-button .mdc-button__label{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px}.tng-button .tng-button__icon--left{margin-right:4px}.tng-button .tng-button__icon--right{margin-left:4px}.tng-button--rounded{border-radius:24px}.tng-button--soft{box-shadow:0 2px 4px -1px #0000001a,0 4px 5px #00000012,0 1px 10px #0000000f}.tng-button--soft:hover{box-shadow:0 5px 5px -3px #0000001a,0 8px 10px 1px #00000012,0 3px 14px 2px #0000000f;transform:translateY(-1px)}.tng-button--primary{background:var(--tng-primary);color:var(--tng-primary-contrast)}.tng-button--primary:hover{background:color-mix(in srgb,var(--tng-primary),white 10%)}.tng-button--secondary{background:var(--tng-secondary);color:var(--tng-secondary-contrast)}.tng-button--secondary:hover{background:color-mix(in srgb,var(--tng-secondary),white 10%)}.tng-button--success{background:var(--tng-success);color:#fff}.tng-button--success:hover{background:color-mix(in srgb,var(--tng-success),white 10%)}.tng-button--warning{background:var(--tng-warning);color:#fff}.tng-button--warning:hover{background:color-mix(in srgb,var(--tng-warning),white 10%)}.tng-button--error{background:var(--tng-error);color:#fff}.tng-button--error:hover{background:color-mix(in srgb,var(--tng-error),white 10%)}span.tng-ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple .6s linear;background-color:#ffffff4d;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TngButton, isStandalone: true, selector: "button[tngButton], a[tngButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, soft: { classPropertyName: "soft", publicName: "soft", isSignal: true, isRequired: false, transformFunction: null }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "createRipple($event)" }, properties: { "class.tng-button--primary": "variant() === \"primary\"", "class.tng-button--secondary": "variant() === \"secondary\"", "class.tng-button--success": "variant() === \"success\"", "class.tng-button--warning": "variant() === \"warning\"", "class.tng-button--error": "variant() === \"error\"", "class.tng-button--rounded": "rounded()", "class.tng-button--soft": "soft()" }, classAttribute: "tng-button" }, exportAs: ["tngButton"], ngImport: i0, template: "<span class=\"tng-button__label\">\n    @if (icon() && iconPosition() === 'left') {\n        <i [class]=\"icon()\" class=\"tng-button__icon tng-button__icon--left\"></i>\n    }\n    <ng-content></ng-content>\n    @if (icon() && iconPosition() === 'right') {\n        <i [class]=\"icon()\" class=\"tng-button__icon tng-button__icon--right\"></i>\n    }\n</span>\n\n", styles: [".tng-button{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:64px;height:32px;border:none;outline:none;line-height:inherit;appearance:none;-webkit-appearance:none;overflow:hidden;vertical-align:middle;background:transparent;color:var(--tng-text);padding:0 16px;font-family:inherit;font-size:.875rem;font-weight:500;letter-spacing:.02857em;border-radius:4px;transition:background-color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),border-radius .25s cubic-bezier(.4,0,.2,1),transform .1s ease-in-out}.tng-button::-moz-focus-inner{padding:0;border:0}.tng-button:active{outline:none;transform:scale(.98)}.tng-button:hover{cursor:pointer}.tng-button:disabled{cursor:default;pointer-events:none;opacity:.5}.tng-button[hidden]{display:none}.tng-button .mdc-button__label{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px}.tng-button .tng-button__icon--left{margin-right:4px}.tng-button .tng-button__icon--right{margin-left:4px}.tng-button--rounded{border-radius:24px}.tng-button--soft{box-shadow:0 2px 4px -1px #0000001a,0 4px 5px #00000012,0 1px 10px #0000000f}.tng-button--soft:hover{box-shadow:0 5px 5px -3px #0000001a,0 8px 10px 1px #00000012,0 3px 14px 2px #0000000f;transform:translateY(-1px)}.tng-button--primary{background:var(--tng-primary);color:var(--tng-primary-contrast)}.tng-button--primary:hover{background:color-mix(in srgb,var(--tng-primary-hover, --tng-primary),white 50%)}.tng-button--secondary{background:var(--tng-secondary);color:var(--tng-secondary-contrast)}.tng-button--secondary:hover{background:color-mix(in srgb,var(--tng-secondary-hover, --tng-secondary),white 50%)}.tng-button--success{background:var(--tng-success);color:#fff}.tng-button--success:hover{background:color-mix(in srgb,var(--tng-success),white 50%)}.tng-button--warning{background:var(--tng-warning);color:#fff}.tng-button--warning:hover{background:color-mix(in srgb,var(--tng-warning),white 50%)}.tng-button--error{background:var(--tng-error);color:#fff}.tng-button--error:hover{background:color-mix(in srgb,var(--tng-error),white 10%)}span.tng-ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple .6s linear;background-color:#ffffff4d;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngButton, decorators: [{
             type: Component,
@@ -47,7 +47,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         '[class.tng-button--rounded]': 'rounded()',
                         '[class.tng-button--soft]': 'soft()',
                         '(click)': 'createRipple($event)',
-                    }, exportAs: 'tngButton', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"tng-button__label\">\n    @if (icon() && iconPosition() === 'left') {\n        <i [class]=\"icon()\" class=\"tng-button__icon tng-button__icon--left\"></i>\n    }\n    <ng-content></ng-content>\n    @if (icon() && iconPosition() === 'right') {\n        <i [class]=\"icon()\" class=\"tng-button__icon tng-button__icon--right\"></i>\n    }\n</span>\n\n", styles: [".tng-button{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:64px;height:32px;border:none;outline:none;line-height:inherit;appearance:none;-webkit-appearance:none;overflow:hidden;vertical-align:middle;background:transparent;color:var(--tng-text);padding:0 16px;font-family:inherit;font-size:.875rem;font-weight:500;letter-spacing:.02857em;border-radius:4px;transition:background-color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),border-radius .25s cubic-bezier(.4,0,.2,1),transform .1s ease-in-out}.tng-button::-moz-focus-inner{padding:0;border:0}.tng-button:active{outline:none;transform:scale(.98)}.tng-button:hover{cursor:pointer}.tng-button:disabled{cursor:default;pointer-events:none;opacity:.5}.tng-button[hidden]{display:none}.tng-button .mdc-button__label{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px}.tng-button .tng-button__icon--left{margin-right:4px}.tng-button .tng-button__icon--right{margin-left:4px}.tng-button--rounded{border-radius:24px}.tng-button--soft{box-shadow:0 2px 4px -1px #0000001a,0 4px 5px #00000012,0 1px 10px #0000000f}.tng-button--soft:hover{box-shadow:0 5px 5px -3px #0000001a,0 8px 10px 1px #00000012,0 3px 14px 2px #0000000f;transform:translateY(-1px)}.tng-button--primary{background:var(--tng-primary);color:var(--tng-primary-contrast)}.tng-button--primary:hover{background:color-mix(in srgb,var(--tng-primary),white 10%)}.tng-button--secondary{background:var(--tng-secondary);color:var(--tng-secondary-contrast)}.tng-button--secondary:hover{background:color-mix(in srgb,var(--tng-secondary),white 10%)}.tng-button--success{background:var(--tng-success);color:#fff}.tng-button--success:hover{background:color-mix(in srgb,var(--tng-success),white 10%)}.tng-button--warning{background:var(--tng-warning);color:#fff}.tng-button--warning:hover{background:color-mix(in srgb,var(--tng-warning),white 10%)}.tng-button--error{background:var(--tng-error);color:#fff}.tng-button--error:hover{background:color-mix(in srgb,var(--tng-error),white 10%)}span.tng-ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple .6s linear;background-color:#ffffff4d;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}\n"] }]
+                    }, exportAs: 'tngButton', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"tng-button__label\">\n    @if (icon() && iconPosition() === 'left') {\n        <i [class]=\"icon()\" class=\"tng-button__icon tng-button__icon--left\"></i>\n    }\n    <ng-content></ng-content>\n    @if (icon() && iconPosition() === 'right') {\n        <i [class]=\"icon()\" class=\"tng-button__icon tng-button__icon--right\"></i>\n    }\n</span>\n\n", styles: [".tng-button{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:64px;height:32px;border:none;outline:none;line-height:inherit;appearance:none;-webkit-appearance:none;overflow:hidden;vertical-align:middle;background:transparent;color:var(--tng-text);padding:0 16px;font-family:inherit;font-size:.875rem;font-weight:500;letter-spacing:.02857em;border-radius:4px;transition:background-color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),border-radius .25s cubic-bezier(.4,0,.2,1),transform .1s ease-in-out}.tng-button::-moz-focus-inner{padding:0;border:0}.tng-button:active{outline:none;transform:scale(.98)}.tng-button:hover{cursor:pointer}.tng-button:disabled{cursor:default;pointer-events:none;opacity:.5}.tng-button[hidden]{display:none}.tng-button .mdc-button__label{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px}.tng-button .tng-button__icon--left{margin-right:4px}.tng-button .tng-button__icon--right{margin-left:4px}.tng-button--rounded{border-radius:24px}.tng-button--soft{box-shadow:0 2px 4px -1px #0000001a,0 4px 5px #00000012,0 1px 10px #0000000f}.tng-button--soft:hover{box-shadow:0 5px 5px -3px #0000001a,0 8px 10px 1px #00000012,0 3px 14px 2px #0000000f;transform:translateY(-1px)}.tng-button--primary{background:var(--tng-primary);color:var(--tng-primary-contrast)}.tng-button--primary:hover{background:color-mix(in srgb,var(--tng-primary-hover, --tng-primary),white 50%)}.tng-button--secondary{background:var(--tng-secondary);color:var(--tng-secondary-contrast)}.tng-button--secondary:hover{background:color-mix(in srgb,var(--tng-secondary-hover, --tng-secondary),white 50%)}.tng-button--success{background:var(--tng-success);color:#fff}.tng-button--success:hover{background:color-mix(in srgb,var(--tng-success),white 50%)}.tng-button--warning{background:var(--tng-warning);color:#fff}.tng-button--warning:hover{background:color-mix(in srgb,var(--tng-warning),white 50%)}.tng-button--error{background:var(--tng-error);color:#fff}.tng-button--error:hover{background:color-mix(in srgb,var(--tng-error),white 10%)}span.tng-ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple .6s linear;background-color:#ffffff4d;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], soft: [{ type: i0.Input, args: [{ isSignal: true, alias: "soft", required: false }] }], ripple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ripple", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }] } });
 
 class TngCardComponent {
@@ -59,7 +59,7 @@ class TngCardComponent {
     image = input(null, ...(ngDevMode ? [{ debugName: "image" }] : []));
     imageAlt = input('Card image', ...(ngDevMode ? [{ debugName: "imageAlt" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TngCardComponent, isStandalone: true, selector: "tng-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, imageAlt: { classPropertyName: "imageAlt", publicName: "imageAlt", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tng-card--primary": "variant() === \"primary\"", "class.tng-card--secondary": "variant() === \"secondary\"", "class.tng-card--success": "variant() === \"success\"", "class.tng-card--warning": "variant() === \"warning\"", "class.tng-card--error": "variant() === \"error\"", "class.tng-card--elevated": "elevated()", "class.tng-card--outlined": "outlined()" }, classAttribute: "tng-card" }, ngImport: i0, template: "<div class=\"tng-card__container\">\n  @if (image()) {\n    <div class=\"tng-card__image\">\n      <img [src]=\"image()\" [alt]=\"imageAlt()\" />\n    </div>\n  }\n\n  @if (title() || subtitle()) {\n    <div class=\"tng-card__header\">\n      <ng-content select=\"[card-header]\"></ng-content>\n      \n      @if (!title() && !subtitle()) {\n        <!-- Header projection only -->\n      } @else {\n        <div class=\"tng-card__header-text\">\n          @if (title()) {\n            <h3 class=\"tng-card__title\">{{ title() }}</h3>\n          }\n          @if (subtitle()) {\n            <p class=\"tng-card__subtitle\">{{ subtitle() }}</p>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"tng-card__content\">\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"tng-card__footer\">\n    <ng-content select=\"[card-footer]\"></ng-content>\n  </div>\n</div>\n", styles: [".tng-card{display:block;position:relative;background-color:#fff;border-radius:8px;overflow:hidden;transition:box-shadow .3s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}.tng-card__container{display:flex;flex-direction:column;height:100%}.tng-card__image{width:100%;overflow:hidden}.tng-card__image img{width:100%;height:auto;display:block;object-fit:cover}.tng-card__header{padding:16px 20px;border-bottom:1px solid rgba(0,0,0,.08)}.tng-card__header-text{display:flex;flex-direction:column;gap:4px}.tng-card__title{margin:0;font-size:1.25rem;font-weight:500;color:var(--tng-text, #333);line-height:1.4}.tng-card__subtitle{margin:0;font-size:.875rem;color:var(--tng-text-secondary, #666);line-height:1.5}.tng-card__content{padding:20px;flex:1;color:var(--tng-text, #333)}.tng-card__footer{padding:12px 20px;border-top:1px solid rgba(0,0,0,.08)}.tng-card__footer:empty{display:none}.tng-card--elevated{box-shadow:0 2px 4px -1px #0000001a,0 4px 5px #00000012,0 1px 10px #0000000f}.tng-card--elevated:hover{box-shadow:0 5px 5px -3px #0000001a,0 8px 10px 1px #00000012,0 3px 14px 2px #0000000f;transform:translateY(-2px)}.tng-card--outlined{border:1px solid rgba(0,0,0,.12);box-shadow:none}.tng-card--outlined:hover{border-color:#0000003d}.tng-card--primary .tng-card__header{background:var(--tng-primary);color:var(--tng-primary-contrast);border-bottom-color:#ffffff1f}.tng-card--primary .tng-card__title,.tng-card--primary .tng-card__subtitle{color:inherit}.tng-card--secondary .tng-card__header{background:var(--tng-secondary);color:var(--tng-secondary-contrast);border-bottom-color:#ffffff1f}.tng-card--secondary .tng-card__title,.tng-card--secondary .tng-card__subtitle{color:inherit}.tng-card--success .tng-card__header{background:var(--tng-success);color:#fff;border-bottom-color:#ffffff1f}.tng-card--success .tng-card__title,.tng-card--success .tng-card__subtitle{color:inherit}.tng-card--warning .tng-card__header{background:var(--tng-warning);color:#fff;border-bottom-color:#ffffff1f}.tng-card--warning .tng-card__title,.tng-card--warning .tng-card__subtitle{color:inherit}.tng-card--error .tng-card__header{background:var(--tng-error);color:#fff;border-bottom-color:#ffffff1f}.tng-card--error .tng-card__title,.tng-card--error .tng-card__subtitle{color:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TngCardComponent, isStandalone: true, selector: "tng-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, imageAlt: { classPropertyName: "imageAlt", publicName: "imageAlt", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tng-card--primary": "variant() === \"primary\"", "class.tng-card--secondary": "variant() === \"secondary\"", "class.tng-card--success": "variant() === \"success\"", "class.tng-card--warning": "variant() === \"warning\"", "class.tng-card--error": "variant() === \"error\"", "class.tng-card--elevated": "elevated()", "class.tng-card--outlined": "outlined()" }, classAttribute: "tng-card" }, ngImport: i0, template: "<div class=\"tng-card__container\">\n  @if (image()) {\n    <div class=\"tng-card__image\">\n      <img [src]=\"image()\" [alt]=\"imageAlt()\" />\n    </div>\n  }\n\n  @if (title() || subtitle()) {\n    <div class=\"tng-card__header\">\n      <ng-content select=\"[card-header]\"></ng-content>\n      \n      @if (!title() && !subtitle()) {\n        <!-- Header projection only -->\n      } @else {\n        <div class=\"tng-card__header-text\">\n          @if (title()) {\n            <h3 class=\"tng-card__title\">{{ title() }}</h3>\n          }\n          @if (subtitle()) {\n            <p class=\"tng-card__subtitle\">{{ subtitle() }}</p>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"tng-card__content\">\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"tng-card__footer\">\n    <ng-content select=\"[card-footer]\"></ng-content>\n  </div>\n</div>\n", styles: [".tng-card{display:block;position:relative;background-color:var(--tng-surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--tng-border);border-radius:8px;overflow:hidden;transition:box-shadow .3s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}.tng-card__container{display:flex;flex-direction:column;height:100%}.tng-card__image{width:100%;overflow:hidden}.tng-card__image img{width:100%;height:auto;display:block;object-fit:cover}.tng-card__header{padding:16px 20px;border-bottom:1px solid var(--tng-border)}.tng-card__header-text{display:flex;flex-direction:column;gap:4px}.tng-card__title{margin:0;font-size:1.25rem;font-weight:500;color:var(--tng-text, #333);line-height:1.4}.tng-card__subtitle{margin:0;font-size:.875rem;color:var(--tng-text-secondary, #666);line-height:1.5}.tng-card__content{padding:20px;flex:1;color:var(--tng-text, #333)}.tng-card__footer{padding:12px 20px;border-top:1px solid var(--tng-border)}.tng-card__footer:empty{display:none}.tng-card--elevated{box-shadow:var(--tng-shadow-md)}.tng-card--elevated:hover{box-shadow:0 8px 16px #0000004d;transform:translateY(-2px)}.tng-card--outlined{border:1px solid var(--tng-border);box-shadow:none}.tng-card--outlined:hover{border-color:var(--tng-primary)}.tng-card--primary .tng-card__header{background:var(--tng-primary);color:var(--tng-primary-contrast);border-bottom-color:#ffffff1f}.tng-card--primary .tng-card__title,.tng-card--primary .tng-card__subtitle{color:inherit}.tng-card--secondary .tng-card__header{background:var(--tng-secondary);color:var(--tng-secondary-contrast);border-bottom-color:#ffffff1f}.tng-card--secondary .tng-card__title,.tng-card--secondary .tng-card__subtitle{color:inherit}.tng-card--success .tng-card__header{background:var(--tng-success);color:#fff;border-bottom-color:#ffffff1f}.tng-card--success .tng-card__title,.tng-card--success .tng-card__subtitle{color:inherit}.tng-card--warning .tng-card__header{background:var(--tng-warning);color:#fff;border-bottom-color:#ffffff1f}.tng-card--warning .tng-card__title,.tng-card--warning .tng-card__subtitle{color:inherit}.tng-card--error .tng-card__header{background:var(--tng-error);color:#fff;border-bottom-color:#ffffff1f}.tng-card--error .tng-card__title,.tng-card--error .tng-card__subtitle{color:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngCardComponent, decorators: [{
             type: Component,
@@ -72,7 +72,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         '[class.tng-card--error]': 'variant() === "error"',
                         '[class.tng-card--elevated]': 'elevated()',
                         '[class.tng-card--outlined]': 'outlined()',
-                    }, template: "<div class=\"tng-card__container\">\n  @if (image()) {\n    <div class=\"tng-card__image\">\n      <img [src]=\"image()\" [alt]=\"imageAlt()\" />\n    </div>\n  }\n\n  @if (title() || subtitle()) {\n    <div class=\"tng-card__header\">\n      <ng-content select=\"[card-header]\"></ng-content>\n      \n      @if (!title() && !subtitle()) {\n        <!-- Header projection only -->\n      } @else {\n        <div class=\"tng-card__header-text\">\n          @if (title()) {\n            <h3 class=\"tng-card__title\">{{ title() }}</h3>\n          }\n          @if (subtitle()) {\n            <p class=\"tng-card__subtitle\">{{ subtitle() }}</p>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"tng-card__content\">\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"tng-card__footer\">\n    <ng-content select=\"[card-footer]\"></ng-content>\n  </div>\n</div>\n", styles: [".tng-card{display:block;position:relative;background-color:#fff;border-radius:8px;overflow:hidden;transition:box-shadow .3s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}.tng-card__container{display:flex;flex-direction:column;height:100%}.tng-card__image{width:100%;overflow:hidden}.tng-card__image img{width:100%;height:auto;display:block;object-fit:cover}.tng-card__header{padding:16px 20px;border-bottom:1px solid rgba(0,0,0,.08)}.tng-card__header-text{display:flex;flex-direction:column;gap:4px}.tng-card__title{margin:0;font-size:1.25rem;font-weight:500;color:var(--tng-text, #333);line-height:1.4}.tng-card__subtitle{margin:0;font-size:.875rem;color:var(--tng-text-secondary, #666);line-height:1.5}.tng-card__content{padding:20px;flex:1;color:var(--tng-text, #333)}.tng-card__footer{padding:12px 20px;border-top:1px solid rgba(0,0,0,.08)}.tng-card__footer:empty{display:none}.tng-card--elevated{box-shadow:0 2px 4px -1px #0000001a,0 4px 5px #00000012,0 1px 10px #0000000f}.tng-card--elevated:hover{box-shadow:0 5px 5px -3px #0000001a,0 8px 10px 1px #00000012,0 3px 14px 2px #0000000f;transform:translateY(-2px)}.tng-card--outlined{border:1px solid rgba(0,0,0,.12);box-shadow:none}.tng-card--outlined:hover{border-color:#0000003d}.tng-card--primary .tng-card__header{background:var(--tng-primary);color:var(--tng-primary-contrast);border-bottom-color:#ffffff1f}.tng-card--primary .tng-card__title,.tng-card--primary .tng-card__subtitle{color:inherit}.tng-card--secondary .tng-card__header{background:var(--tng-secondary);color:var(--tng-secondary-contrast);border-bottom-color:#ffffff1f}.tng-card--secondary .tng-card__title,.tng-card--secondary .tng-card__subtitle{color:inherit}.tng-card--success .tng-card__header{background:var(--tng-success);color:#fff;border-bottom-color:#ffffff1f}.tng-card--success .tng-card__title,.tng-card--success .tng-card__subtitle{color:inherit}.tng-card--warning .tng-card__header{background:var(--tng-warning);color:#fff;border-bottom-color:#ffffff1f}.tng-card--warning .tng-card__title,.tng-card--warning .tng-card__subtitle{color:inherit}.tng-card--error .tng-card__header{background:var(--tng-error);color:#fff;border-bottom-color:#ffffff1f}.tng-card--error .tng-card__title,.tng-card--error .tng-card__subtitle{color:inherit}\n"] }]
+                    }, template: "<div class=\"tng-card__container\">\n  @if (image()) {\n    <div class=\"tng-card__image\">\n      <img [src]=\"image()\" [alt]=\"imageAlt()\" />\n    </div>\n  }\n\n  @if (title() || subtitle()) {\n    <div class=\"tng-card__header\">\n      <ng-content select=\"[card-header]\"></ng-content>\n      \n      @if (!title() && !subtitle()) {\n        <!-- Header projection only -->\n      } @else {\n        <div class=\"tng-card__header-text\">\n          @if (title()) {\n            <h3 class=\"tng-card__title\">{{ title() }}</h3>\n          }\n          @if (subtitle()) {\n            <p class=\"tng-card__subtitle\">{{ subtitle() }}</p>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"tng-card__content\">\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"tng-card__footer\">\n    <ng-content select=\"[card-footer]\"></ng-content>\n  </div>\n</div>\n", styles: [".tng-card{display:block;position:relative;background-color:var(--tng-surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--tng-border);border-radius:8px;overflow:hidden;transition:box-shadow .3s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}.tng-card__container{display:flex;flex-direction:column;height:100%}.tng-card__image{width:100%;overflow:hidden}.tng-card__image img{width:100%;height:auto;display:block;object-fit:cover}.tng-card__header{padding:16px 20px;border-bottom:1px solid var(--tng-border)}.tng-card__header-text{display:flex;flex-direction:column;gap:4px}.tng-card__title{margin:0;font-size:1.25rem;font-weight:500;color:var(--tng-text, #333);line-height:1.4}.tng-card__subtitle{margin:0;font-size:.875rem;color:var(--tng-text-secondary, #666);line-height:1.5}.tng-card__content{padding:20px;flex:1;color:var(--tng-text, #333)}.tng-card__footer{padding:12px 20px;border-top:1px solid var(--tng-border)}.tng-card__footer:empty{display:none}.tng-card--elevated{box-shadow:var(--tng-shadow-md)}.tng-card--elevated:hover{box-shadow:0 8px 16px #0000004d;transform:translateY(-2px)}.tng-card--outlined{border:1px solid var(--tng-border);box-shadow:none}.tng-card--outlined:hover{border-color:var(--tng-primary)}.tng-card--primary .tng-card__header{background:var(--tng-primary);color:var(--tng-primary-contrast);border-bottom-color:#ffffff1f}.tng-card--primary .tng-card__title,.tng-card--primary .tng-card__subtitle{color:inherit}.tng-card--secondary .tng-card__header{background:var(--tng-secondary);color:var(--tng-secondary-contrast);border-bottom-color:#ffffff1f}.tng-card--secondary .tng-card__title,.tng-card--secondary .tng-card__subtitle{color:inherit}.tng-card--success .tng-card__header{background:var(--tng-success);color:#fff;border-bottom-color:#ffffff1f}.tng-card--success .tng-card__title,.tng-card--success .tng-card__subtitle{color:inherit}.tng-card--warning .tng-card__header{background:var(--tng-warning);color:#fff;border-bottom-color:#ffffff1f}.tng-card--warning .tng-card__title,.tng-card--warning .tng-card__subtitle{color:inherit}.tng-card--error .tng-card__header{background:var(--tng-error);color:#fff;border-bottom-color:#ffffff1f}.tng-card--error .tng-card__title,.tng-card--error .tng-card__subtitle{color:inherit}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], imageAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageAlt", required: false }] }] } });
 
 class TecnualInputComponent {
@@ -120,7 +120,7 @@ class TecnualInputComponent {
                 useExisting: forwardRef(() => TecnualInputComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"tng-input-container\" [class.focused]=\"isFocused\" [class.has-value]=\"hasValue\" [class.disabled]=\"disabled()\">\n  <fieldset class=\"tng-fieldset\" aria-hidden=\"true\">\n    <legend class=\"tng-legend\"><span>{{ label() }}</span></legend>\n  </fieldset>\n  <label [for]=\"id()\" class=\"tng-label\">{{ label() }}</label>\n  <input\n    [id]=\"id()\"\n    [type]=\"type()\"\n    [placeholder]=\"isFocused ? placeholder() : ''\"\n    [value]=\"value\"\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    class=\"tng-input-field\"\n  />\n</div>\n", styles: [":host{display:block;margin-bottom:1.5rem;font-family:var(--tng-font-family, \"Inter\", sans-serif)}.tng-input-container{position:relative;border-radius:var(--tng-border-radius, 4px);padding:0 16px;height:48px;display:flex;align-items:center;cursor:text;border:none}.tng-input-container:hover .tng-fieldset{border-color:var(--tng-text-secondary, #757575)}.tng-input-container.focused .tng-fieldset{border-color:var(--tng-primary, #6200ee);border-width:2px}.tng-input-container.focused .tng-label{color:var(--tng-primary, #6200ee);transform:translateY(-24px) scale(.75)}.tng-input-container.focused .tng-legend{max-width:100%}.tng-input-container.has-value .tng-label{transform:translateY(-24px) scale(.75)}.tng-input-container.has-value .tng-legend{max-width:100%}.tng-input-container.disabled{opacity:.6;pointer-events:none}.tng-input-container.disabled .tng-fieldset{border-color:var(--tng-border, #e0e0e0);background-color:var(--tng-background, #fafafa)}.tng-fieldset{position:absolute;inset:0 0 5px;margin:0;padding:0 12px;border:1px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);pointer-events:none;transition:border-color .2s ease,border-width .1s ease;z-index:0}.tng-legend{width:auto;max-width:0;height:11px;font-size:.75em;visibility:hidden;transition:max-width .1s cubic-bezier(.4,0,.2,1);white-space:nowrap;padding-inline:0px}.tng-legend span{padding:0 2px;visibility:visible;opacity:0}.tng-label{position:absolute;top:50%;left:16px;transform:translateY(-50%);color:var(--tng-text-secondary, #666);font-size:16px;font-weight:400;pointer-events:none;transform-origin:left top;transition:transform .2s cubic-bezier(.4,0,.2,1),color .2s ease;z-index:1}.tng-input-field{display:block;width:100%;border:none;background:none;padding:0;margin:0;font-size:16px;color:var(--tng-text, #333);outline:none;height:100%;line-height:normal;z-index:1}.tng-input-field::placeholder{color:transparent;transition:color .2s ease}.tng-input-field:focus::placeholder{color:#aaa}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
+        ], ngImport: i0, template: "<div class=\"tng-input-container\" [class.focused]=\"isFocused\" [class.has-value]=\"hasValue\" [class.disabled]=\"disabled()\">\n  <fieldset class=\"tng-fieldset\" aria-hidden=\"true\">\n    <legend class=\"tng-legend\"><span>{{ label() }}</span></legend>\n  </fieldset>\n  <label [for]=\"id()\" class=\"tng-label\">{{ label() }}</label>\n  <input\n    [id]=\"id()\"\n    [type]=\"type()\"\n    [placeholder]=\"isFocused ? placeholder() : ''\"\n    [value]=\"value\"\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    class=\"tng-input-field\"\n  />\n</div>\n", styles: [":host{display:block;margin-bottom:1.5rem;font-family:var(--tng-font-family, \"Inter\", sans-serif)}.tng-input-container{position:relative;padding:0 16px;height:48px;display:flex;align-items:center;cursor:text;border:none}.tng-input-container:hover .tng-fieldset{border-color:var(--tng-text-secondary, #757575)}.tng-input-container.focused .tng-fieldset{border-color:var(--tng-primary, #6200ee);border-width:2px}.tng-input-container.focused .tng-label{color:var(--tng-primary, #6200ee);transform:translateY(-24px) scale(.75)}.tng-input-container.focused .tng-legend{max-width:100%}.tng-input-container.has-value .tng-label{transform:translateY(-24px) scale(.75)}.tng-input-container.has-value .tng-legend{max-width:100%}.tng-input-container.disabled{opacity:.6;pointer-events:none}.tng-input-container.disabled .tng-fieldset{border-color:var(--tng-border, #e0e0e0);background-color:var(--tng-background, #fafafa)}.tng-fieldset{position:absolute;inset:0 0 5px;margin:0;padding:0 12px;border:1px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background-color:var(--tng-surface);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none;transition:border-color .2s ease,border-width .1s ease;z-index:0}.tng-legend{width:auto;max-width:0;height:11px;font-size:.75em;visibility:hidden;transition:max-width .1s cubic-bezier(.4,0,.2,1);white-space:nowrap;padding-inline:0px}.tng-legend span{padding:0 2px;visibility:visible;opacity:0}.tng-label{position:absolute;top:50%;left:16px;transform:translateY(-50%);color:var(--tng-text-secondary, #666);font-size:16px;font-weight:400;pointer-events:none;transform-origin:left top;transition:transform .2s cubic-bezier(.4,0,.2,1),color .2s ease;z-index:1}.tng-input-field{display:block;width:100%;border:none;background:none;padding:0;margin:0;font-size:16px;color:var(--tng-text, #333);outline:none;height:100%;line-height:normal;z-index:1}.tng-input-field::placeholder{color:transparent;transition:color .2s ease}.tng-input-field:focus::placeholder{color:#aaa}.tng-checkbox{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:20px;height:20px;min-width:20px;min-height:20px;border:2px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background-color:var(--tng-surface, #ffffff);cursor:pointer;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);outline:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.tng-checkbox:hover:not(:disabled){border-color:var(--tng-primary, #00f2ff);box-shadow:0 0 0 4px #00f2ff1a}.tng-checkbox:focus{border-color:var(--tng-primary, #00f2ff);box-shadow:0 0 0 4px #00f2ff33}.tng-checkbox:checked{background-color:var(--tng-primary, #00f2ff);border-color:var(--tng-primary, #00f2ff)}.tng-checkbox:checked:before{content:\"\";position:absolute;width:5px;height:10px;border:solid var(--tng-primary-contrast, #000000);border-width:0 2px 2px 0;transform:rotate(45deg) scale(1);opacity:1;transition:all .2s cubic-bezier(.4,0,.2,1)}.tng-checkbox:not(:checked):before{content:\"\";position:absolute;width:5px;height:10px;border:solid var(--tng-primary-contrast, #000000);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);opacity:0;transition:all .2s cubic-bezier(.4,0,.2,1)}.tng-checkbox:disabled{opacity:.5;cursor:not-allowed;border-color:var(--tng-border, #e0e0e0);background-color:var(--tng-background, #fafafa)}.tng-checkbox:disabled:checked{background-color:var(--tng-text-secondary, #757575);border-color:var(--tng-text-secondary, #757575)}.tng-checkbox:active:not(:disabled){transform:scale(.95)}.tng-radio{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:20px;height:20px;min-width:20px;min-height:20px;border:2px solid var(--tng-border, #999);border-radius:50%;background-color:var(--tng-surface, #ffffff);cursor:pointer;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);outline:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.tng-radio:hover:not(:disabled){border-color:var(--tng-primary, #00f2ff);box-shadow:0 0 0 4px #00f2ff1a}.tng-radio:focus{border-color:var(--tng-primary, #00f2ff);box-shadow:0 0 0 4px #00f2ff33}.tng-radio:checked{border-color:var(--tng-primary, #00f2ff);border-width:2px}.tng-radio:checked:before{content:\"\";position:absolute;width:10px;height:10px;border-radius:50%;background-color:var(--tng-primary, #00f2ff);transform:scale(1);opacity:1;transition:all .2s cubic-bezier(.4,0,.2,1)}.tng-radio:not(:checked):before{content:\"\";position:absolute;width:10px;height:10px;border-radius:50%;background-color:var(--tng-primary, #00f2ff);transform:scale(0);opacity:0;transition:all .2s cubic-bezier(.4,0,.2,1)}.tng-radio:disabled{opacity:.5;cursor:not-allowed;border-color:var(--tng-border, #e0e0e0);background-color:var(--tng-background, #fafafa)}.tng-radio:disabled:checked:before{background-color:var(--tng-text-secondary, #757575)}.tng-radio:active:not(:disabled){transform:scale(.95)}@keyframes ripple{0%{transform:scale(0);opacity:.5}to{transform:scale(2);opacity:0}}.tng-checkbox,.tng-radio{overflow:visible}.tng-checkbox:after,.tng-radio:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:inherit;background-color:var(--tng-primary, #00f2ff);opacity:0;pointer-events:none}.tng-checkbox:active:not(:disabled):after,.tng-radio:active:not(:disabled):after{animation:ripple .6s ease-out}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TecnualInputComponent, decorators: [{
             type: Component,
@@ -130,9 +130,122 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                             useExisting: forwardRef(() => TecnualInputComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"tng-input-container\" [class.focused]=\"isFocused\" [class.has-value]=\"hasValue\" [class.disabled]=\"disabled()\">\n  <fieldset class=\"tng-fieldset\" aria-hidden=\"true\">\n    <legend class=\"tng-legend\"><span>{{ label() }}</span></legend>\n  </fieldset>\n  <label [for]=\"id()\" class=\"tng-label\">{{ label() }}</label>\n  <input\n    [id]=\"id()\"\n    [type]=\"type()\"\n    [placeholder]=\"isFocused ? placeholder() : ''\"\n    [value]=\"value\"\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    class=\"tng-input-field\"\n  />\n</div>\n", styles: [":host{display:block;margin-bottom:1.5rem;font-family:var(--tng-font-family, \"Inter\", sans-serif)}.tng-input-container{position:relative;border-radius:var(--tng-border-radius, 4px);padding:0 16px;height:48px;display:flex;align-items:center;cursor:text;border:none}.tng-input-container:hover .tng-fieldset{border-color:var(--tng-text-secondary, #757575)}.tng-input-container.focused .tng-fieldset{border-color:var(--tng-primary, #6200ee);border-width:2px}.tng-input-container.focused .tng-label{color:var(--tng-primary, #6200ee);transform:translateY(-24px) scale(.75)}.tng-input-container.focused .tng-legend{max-width:100%}.tng-input-container.has-value .tng-label{transform:translateY(-24px) scale(.75)}.tng-input-container.has-value .tng-legend{max-width:100%}.tng-input-container.disabled{opacity:.6;pointer-events:none}.tng-input-container.disabled .tng-fieldset{border-color:var(--tng-border, #e0e0e0);background-color:var(--tng-background, #fafafa)}.tng-fieldset{position:absolute;inset:0 0 5px;margin:0;padding:0 12px;border:1px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);pointer-events:none;transition:border-color .2s ease,border-width .1s ease;z-index:0}.tng-legend{width:auto;max-width:0;height:11px;font-size:.75em;visibility:hidden;transition:max-width .1s cubic-bezier(.4,0,.2,1);white-space:nowrap;padding-inline:0px}.tng-legend span{padding:0 2px;visibility:visible;opacity:0}.tng-label{position:absolute;top:50%;left:16px;transform:translateY(-50%);color:var(--tng-text-secondary, #666);font-size:16px;font-weight:400;pointer-events:none;transform-origin:left top;transition:transform .2s cubic-bezier(.4,0,.2,1),color .2s ease;z-index:1}.tng-input-field{display:block;width:100%;border:none;background:none;padding:0;margin:0;font-size:16px;color:var(--tng-text, #333);outline:none;height:100%;line-height:normal;z-index:1}.tng-input-field::placeholder{color:transparent;transition:color .2s ease}.tng-input-field:focus::placeholder{color:#aaa}\n"] }]
+                    ], template: "<div class=\"tng-input-container\" [class.focused]=\"isFocused\" [class.has-value]=\"hasValue\" [class.disabled]=\"disabled()\">\n  <fieldset class=\"tng-fieldset\" aria-hidden=\"true\">\n    <legend class=\"tng-legend\"><span>{{ label() }}</span></legend>\n  </fieldset>\n  <label [for]=\"id()\" class=\"tng-label\">{{ label() }}</label>\n  <input\n    [id]=\"id()\"\n    [type]=\"type()\"\n    [placeholder]=\"isFocused ? placeholder() : ''\"\n    [value]=\"value\"\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    class=\"tng-input-field\"\n  />\n</div>\n", styles: [":host{display:block;margin-bottom:1.5rem;font-family:var(--tng-font-family, \"Inter\", sans-serif)}.tng-input-container{position:relative;padding:0 16px;height:48px;display:flex;align-items:center;cursor:text;border:none}.tng-input-container:hover .tng-fieldset{border-color:var(--tng-text-secondary, #757575)}.tng-input-container.focused .tng-fieldset{border-color:var(--tng-primary, #6200ee);border-width:2px}.tng-input-container.focused .tng-label{color:var(--tng-primary, #6200ee);transform:translateY(-24px) scale(.75)}.tng-input-container.focused .tng-legend{max-width:100%}.tng-input-container.has-value .tng-label{transform:translateY(-24px) scale(.75)}.tng-input-container.has-value .tng-legend{max-width:100%}.tng-input-container.disabled{opacity:.6;pointer-events:none}.tng-input-container.disabled .tng-fieldset{border-color:var(--tng-border, #e0e0e0);background-color:var(--tng-background, #fafafa)}.tng-fieldset{position:absolute;inset:0 0 5px;margin:0;padding:0 12px;border:1px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background-color:var(--tng-surface);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none;transition:border-color .2s ease,border-width .1s ease;z-index:0}.tng-legend{width:auto;max-width:0;height:11px;font-size:.75em;visibility:hidden;transition:max-width .1s cubic-bezier(.4,0,.2,1);white-space:nowrap;padding-inline:0px}.tng-legend span{padding:0 2px;visibility:visible;opacity:0}.tng-label{position:absolute;top:50%;left:16px;transform:translateY(-50%);color:var(--tng-text-secondary, #666);font-size:16px;font-weight:400;pointer-events:none;transform-origin:left top;transition:transform .2s cubic-bezier(.4,0,.2,1),color .2s ease;z-index:1}.tng-input-field{display:block;width:100%;border:none;background:none;padding:0;margin:0;font-size:16px;color:var(--tng-text, #333);outline:none;height:100%;line-height:normal;z-index:1}.tng-input-field::placeholder{color:transparent;transition:color .2s ease}.tng-input-field:focus::placeholder{color:#aaa}.tng-checkbox{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:20px;height:20px;min-width:20px;min-height:20px;border:2px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background-color:var(--tng-surface, #ffffff);cursor:pointer;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);outline:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.tng-checkbox:hover:not(:disabled){border-color:var(--tng-primary, #00f2ff);box-shadow:0 0 0 4px #00f2ff1a}.tng-checkbox:focus{border-color:var(--tng-primary, #00f2ff);box-shadow:0 0 0 4px #00f2ff33}.tng-checkbox:checked{background-color:var(--tng-primary, #00f2ff);border-color:var(--tng-primary, #00f2ff)}.tng-checkbox:checked:before{content:\"\";position:absolute;width:5px;height:10px;border:solid var(--tng-primary-contrast, #000000);border-width:0 2px 2px 0;transform:rotate(45deg) scale(1);opacity:1;transition:all .2s cubic-bezier(.4,0,.2,1)}.tng-checkbox:not(:checked):before{content:\"\";position:absolute;width:5px;height:10px;border:solid var(--tng-primary-contrast, #000000);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);opacity:0;transition:all .2s cubic-bezier(.4,0,.2,1)}.tng-checkbox:disabled{opacity:.5;cursor:not-allowed;border-color:var(--tng-border, #e0e0e0);background-color:var(--tng-background, #fafafa)}.tng-checkbox:disabled:checked{background-color:var(--tng-text-secondary, #757575);border-color:var(--tng-text-secondary, #757575)}.tng-checkbox:active:not(:disabled){transform:scale(.95)}.tng-radio{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:20px;height:20px;min-width:20px;min-height:20px;border:2px solid var(--tng-border, #999);border-radius:50%;background-color:var(--tng-surface, #ffffff);cursor:pointer;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);outline:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.tng-radio:hover:not(:disabled){border-color:var(--tng-primary, #00f2ff);box-shadow:0 0 0 4px #00f2ff1a}.tng-radio:focus{border-color:var(--tng-primary, #00f2ff);box-shadow:0 0 0 4px #00f2ff33}.tng-radio:checked{border-color:var(--tng-primary, #00f2ff);border-width:2px}.tng-radio:checked:before{content:\"\";position:absolute;width:10px;height:10px;border-radius:50%;background-color:var(--tng-primary, #00f2ff);transform:scale(1);opacity:1;transition:all .2s cubic-bezier(.4,0,.2,1)}.tng-radio:not(:checked):before{content:\"\";position:absolute;width:10px;height:10px;border-radius:50%;background-color:var(--tng-primary, #00f2ff);transform:scale(0);opacity:0;transition:all .2s cubic-bezier(.4,0,.2,1)}.tng-radio:disabled{opacity:.5;cursor:not-allowed;border-color:var(--tng-border, #e0e0e0);background-color:var(--tng-background, #fafafa)}.tng-radio:disabled:checked:before{background-color:var(--tng-text-secondary, #757575)}.tng-radio:active:not(:disabled){transform:scale(.95)}@keyframes ripple{0%{transform:scale(0);opacity:.5}to{transform:scale(2);opacity:0}}.tng-checkbox,.tng-radio{overflow:visible}.tng-checkbox:after,.tng-radio:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:inherit;background-color:var(--tng-primary, #00f2ff);opacity:0;pointer-events:none}.tng-checkbox:active:not(:disabled):after,.tng-radio:active:not(:disabled):after{animation:ripple .6s ease-out}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
+class TngInputDirective {
+    el = inject((ElementRef));
+    renderer = inject(Renderer2);
+    ngControl = inject(NgControl, { optional: true, self: true });
+    // Inputs
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    // State signals
+    focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : []));
+    checked = signal(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    _value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    _inputType = signal('text', ...(ngDevMode ? [{ debugName: "_inputType" }] : []));
+    // Computed
+    hasValue = computed(() => {
+        const val = this._value();
+        return val !== null && val !== undefined && val !== '';
+    }, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
+    computedPlaceholder = computed(() => {
+        return this.focused() ? this.placeholder() : '';
+    }, ...(ngDevMode ? [{ debugName: "computedPlaceholder" }] : []));
+    isCheckbox = computed(() => this._inputType() === 'checkbox', ...(ngDevMode ? [{ debugName: "isCheckbox" }] : []));
+    isRadio = computed(() => this._inputType() === 'radio', ...(ngDevMode ? [{ debugName: "isRadio" }] : []));
+    isTextField = computed(() => !this.isCheckbox() && !this.isRadio(), ...(ngDevMode ? [{ debugName: "isTextField" }] : []));
+    constructor() {
+        // Initialize value on creation
+        effect(() => {
+            this.updateValue();
+        }, { allowSignalWrites: true });
+        // Detect input type after view init
+        effect(() => {
+            this.detectInputType();
+        }, { allowSignalWrites: true });
+    }
+    onFocus() {
+        this.focused.set(true);
+    }
+    onBlur() {
+        this.focused.set(false);
+        this.updateValue();
+    }
+    onInput() {
+        this.updateValue();
+    }
+    onChange() {
+        if (this.isCheckbox() || this.isRadio()) {
+            const element = this.el.nativeElement;
+            this.checked.set(element.checked);
+        }
+    }
+    ngAfterViewInit() {
+        this.detectInputType();
+        this.updateValue();
+        // For checkbox/radio, also update checked state
+        if (this.isCheckbox() || this.isRadio()) {
+            const element = this.el.nativeElement;
+            this.checked.set(element.checked);
+        }
+    }
+    detectInputType() {
+        const element = this.el.nativeElement;
+        if ('type' in element) {
+            this._inputType.set(element.type || 'text');
+        }
+    }
+    updateValue() {
+        this._value.set(this.el.nativeElement.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0", type: TngInputDirective, isStandalone: true, selector: "input[tngInput], textarea[tngInput]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()", "input": "onInput()", "change": "onChange()" }, properties: { "class.tng-input-field": "isTextField()", "class.tng-checkbox": "isCheckbox()", "class.tng-radio": "isRadio()", "disabled": "disabled()", "attr.placeholder": "computedPlaceholder()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[tngInput], textarea[tngInput]',
+                    standalone: true,
+                    host: {
+                        '[class.tng-input-field]': 'isTextField()',
+                        '[class.tng-checkbox]': 'isCheckbox()',
+                        '[class.tng-radio]': 'isRadio()',
+                        '[disabled]': 'disabled()',
+                        '[attr.placeholder]': 'computedPlaceholder()'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }], onInput: [{
+                type: HostListener,
+                args: ['input']
+            }], onChange: [{
+                type: HostListener,
+                args: ['change']
+            }] } });
+
+class TngFormFieldComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    // Query for the input directive inside this component
+    inputDirective = contentChild(TngInputDirective, ...(ngDevMode ? [{ debugName: "inputDirective" }] : []));
+    // Computed states based on the input directive
+    isFocused = computed(() => this.inputDirective()?.focused() ?? false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
+    hasValue = computed(() => this.inputDirective()?.hasValue() ?? false, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
+    isDisabled = computed(() => this.inputDirective()?.disabled() ?? false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.0", type: TngFormFieldComponent, isStandalone: true, selector: "tng-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "inputDirective", first: true, predicate: TngInputDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tng-input-container\" \n     [class.focused]=\"isFocused()\" \n     [class.has-value]=\"hasValue()\" \n     [class.disabled]=\"isDisabled()\">\n  <fieldset class=\"tng-fieldset\" aria-hidden=\"true\">\n    <legend class=\"tng-legend\"><span>{{ label() }}</span></legend>\n  </fieldset>\n  <label class=\"tng-label\">{{ label() }}</label>\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;margin-bottom:1.5rem;font-family:var(--tng-font-family, \"Inter\", sans-serif)}.tng-input-container{position:relative;border-radius:var(--tng-border-radius, 4px);padding:0 16px;min-height:48px;display:flex;align-items:center;cursor:text;border:none}.tng-input-container:hover .tng-fieldset{border-color:var(--tng-text-secondary, #757575)}.tng-input-container.focused .tng-fieldset{border-color:var(--tng-primary, #6200ee);border-width:2px}.tng-input-container.focused .tng-label{color:var(--tng-primary, #6200ee);transform:translateY(-24px) scale(.75)}.tng-input-container.focused .tng-legend{max-width:100%}.tng-input-container.has-value .tng-label{transform:translateY(-24px) scale(.75)}.tng-input-container.has-value .tng-legend{max-width:100%}.tng-input-container.disabled{opacity:.6;pointer-events:none}.tng-input-container.disabled .tng-fieldset{border-color:var(--tng-border, #e0e0e0);background-color:var(--tng-background, #fafafa)}.tng-fieldset{position:absolute;inset:0 0 5px;margin:0;padding:0 12px;border:1px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);pointer-events:none;transition:border-color .2s ease,border-width .1s ease;z-index:0}.tng-legend{width:auto;max-width:0;height:11px;font-size:.75em;visibility:hidden;transition:max-width .1s cubic-bezier(.4,0,.2,1);white-space:nowrap;padding-inline:0px}.tng-legend span{padding:0 2px;visibility:visible;opacity:0}.tng-label{position:absolute;top:50%;left:16px;transform:translateY(-50%);color:var(--tng-text-secondary, #666);font-size:16px;font-weight:400;pointer-events:none;transform-origin:left top;transition:transform .2s cubic-bezier(.4,0,.2,1),color .2s ease;z-index:1}input.tng-input-field,textarea.tng-input-field{display:block;width:100%;border:none;background:none;padding:0;margin:0;font-size:16px;color:var(--tng-text, #333);outline:none;height:100%;min-height:48px;line-height:normal;z-index:1;font-family:inherit}input.tng-input-field::placeholder,textarea.tng-input-field::placeholder{color:transparent;transition:color .2s ease}input.tng-input-field:focus::placeholder,textarea.tng-input-field:focus::placeholder{color:#aaa}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-form-field', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"tng-input-container\" \n     [class.focused]=\"isFocused()\" \n     [class.has-value]=\"hasValue()\" \n     [class.disabled]=\"isDisabled()\">\n  <fieldset class=\"tng-fieldset\" aria-hidden=\"true\">\n    <legend class=\"tng-legend\"><span>{{ label() }}</span></legend>\n  </fieldset>\n  <label class=\"tng-label\">{{ label() }}</label>\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;margin-bottom:1.5rem;font-family:var(--tng-font-family, \"Inter\", sans-serif)}.tng-input-container{position:relative;border-radius:var(--tng-border-radius, 4px);padding:0 16px;min-height:48px;display:flex;align-items:center;cursor:text;border:none}.tng-input-container:hover .tng-fieldset{border-color:var(--tng-text-secondary, #757575)}.tng-input-container.focused .tng-fieldset{border-color:var(--tng-primary, #6200ee);border-width:2px}.tng-input-container.focused .tng-label{color:var(--tng-primary, #6200ee);transform:translateY(-24px) scale(.75)}.tng-input-container.focused .tng-legend{max-width:100%}.tng-input-container.has-value .tng-label{transform:translateY(-24px) scale(.75)}.tng-input-container.has-value .tng-legend{max-width:100%}.tng-input-container.disabled{opacity:.6;pointer-events:none}.tng-input-container.disabled .tng-fieldset{border-color:var(--tng-border, #e0e0e0);background-color:var(--tng-background, #fafafa)}.tng-fieldset{position:absolute;inset:0 0 5px;margin:0;padding:0 12px;border:1px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);pointer-events:none;transition:border-color .2s ease,border-width .1s ease;z-index:0}.tng-legend{width:auto;max-width:0;height:11px;font-size:.75em;visibility:hidden;transition:max-width .1s cubic-bezier(.4,0,.2,1);white-space:nowrap;padding-inline:0px}.tng-legend span{padding:0 2px;visibility:visible;opacity:0}.tng-label{position:absolute;top:50%;left:16px;transform:translateY(-50%);color:var(--tng-text-secondary, #666);font-size:16px;font-weight:400;pointer-events:none;transform-origin:left top;transition:transform .2s cubic-bezier(.4,0,.2,1),color .2s ease;z-index:1}input.tng-input-field,textarea.tng-input-field{display:block;width:100%;border:none;background:none;padding:0;margin:0;font-size:16px;color:var(--tng-text, #333);outline:none;height:100%;min-height:48px;line-height:normal;z-index:1;font-family:inherit}input.tng-input-field::placeholder,textarea.tng-input-field::placeholder{color:transparent;transition:color .2s ease}input.tng-input-field:focus::placeholder,textarea.tng-input-field:focus::placeholder{color:#aaa}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], inputDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TngInputDirective), { isSignal: true }] }] } });
+
 class TecnualDatepickerComponent {
     elementRef;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
@@ -320,7 +433,7 @@ class TecnualDatepickerComponent {
                 useExisting: forwardRef(() => TecnualDatepickerComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"tng-datepicker-container\" [class.focused]=\"isOpen()\" [class.has-value]=\"formattedValue\" [class.disabled]=\"disabled()\">\n  <!-- Trigger Field (Reusing Input Style) -->\n  <div class=\"tng-input-trigger\" (click)=\"toggleCalendar()\">\n    <fieldset class=\"tng-fieldset\" aria-hidden=\"true\">\n      <legend class=\"tng-legend\"><span>{{ label() }}</span></legend>\n    </fieldset>\n    <label class=\"tng-label\">{{ label() }}</label>\n    <div class=\"tng-input-display\">\n      {{ formattedValue || (isOpen() ? placeholder() : '') }}\n    </div>\n    <span class=\"material-icons tng-icon\">calendar_today</span>\n  </div>\n\n  <!-- Calendar Popup -->\n  @if (isOpen()) {\n    <div class=\"tng-calendar-popup\">\n      <div class=\"tng-calendar-header\">\n        <button type=\"button\" class=\"nav-btn\" (click)=\"prevMonth($event)\">\n          <span class=\"material-icons\">chevron_left</span>\n        </button>\n        <span class=\"current-month\">{{ currentMonthYear }}</span>\n        <button type=\"button\" class=\"nav-btn\" (click)=\"nextMonth($event)\">\n          <span class=\"material-icons\">chevron_right</span>\n        </button>\n      </div>\n\n      <div class=\"tng-calendar-grid\">\n        @for (day of daysOfWeek; track day) {\n          <div class=\"day-name\">{{ day }}</div>\n        }\n        @for (date of calendarDays(); track date.getTime()) {\n          <div\n            class=\"day-cell\"\n            [class.not-current-month]=\"!isCurrentMonth(date)\"\n            [class.today]=\"isToday(date)\"\n            [class.selected]=\"isSelected(date)\"\n            [class.in-range]=\"isInRange(date)\"\n            [class.range-start]=\"mode() === 'range' && isSameDay(date, rangeValue.start)\"\n            [class.range-end]=\"mode() === 'range' && isSameDay(date, rangeValue.end)\"\n            [class.disabled]=\"isDisabled(date)\"\n            (click)=\"selectDate(date)\"\n          >\n            {{ date.getDate() }}\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;margin-bottom:1.5rem;font-family:var(--tng-font-family, \"Inter\", sans-serif);position:relative}.tng-datepicker-container{position:relative}.tng-datepicker-container.disabled{opacity:.6;pointer-events:none}.tng-datepicker-container.disabled .tng-fieldset{border-color:var(--tng-border, #ccc);background-color:var(--tng-background, #f9f9f9)}.tng-input-trigger{position:relative;border-radius:var(--tng-border-radius, 4px);padding:0 16px;height:48px;display:flex;align-items:center;cursor:pointer}.tng-input-trigger:hover .tng-fieldset{border-color:color-mix(in srgb,var(--tng-border, #999),black 20%)}.tng-fieldset{position:absolute;inset:0 0 5px;margin:0;padding:0 12px;border:1px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);pointer-events:none;transition:border-color .2s ease}.tng-legend{width:auto;max-width:0;height:11px;font-size:.75em;visibility:hidden;white-space:nowrap;padding-inline:0px}.tng-legend span{padding:0 2px;visibility:visible;opacity:0}.tng-label{position:absolute;top:50%;left:16px;transform:translateY(-50%);color:var(--tng-text-secondary, #666);font-size:16px;font-weight:400;pointer-events:none;transform-origin:left top;transition:transform .2s cubic-bezier(.4,0,.2,1),color .2s ease}.tng-input-display{flex:1;font-size:16px;color:var(--tng-text, #333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:100%;display:flex;align-items:center}.tng-icon{color:var(--tng-text-secondary, #666);font-size:20px;margin-left:8px}.tng-datepicker-container.focused .tng-fieldset,.tng-datepicker-container.has-value .tng-fieldset{border-color:var(--tng-primary, #6200ee);border-width:2px}.tng-datepicker-container.focused .tng-label,.tng-datepicker-container.has-value .tng-label{color:var(--tng-primary, #6200ee);transform:translateY(-24px) scale(.75)}.tng-datepicker-container.focused .tng-legend,.tng-datepicker-container.has-value .tng-legend{max-width:100%}.tng-datepicker-container.focused .tng-label{color:var(--tng-primary, #6200ee)}.tng-calendar-popup{position:absolute;top:100%;left:0;z-index:1000;margin-top:4px;background:var(--tng-surface, #fff);border-radius:8px;box-shadow:var(--tng-shadow-md, 0 4px 20px rgba(0, 0, 0, .15));padding:16px;width:300px;animation:fadeIn .2s ease;border:1px solid var(--tng-border, #eee)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.tng-calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.tng-calendar-header .current-month{font-weight:600;font-size:16px;color:var(--tng-text, #333)}.tng-calendar-header .nav-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--tng-text-secondary, #666)}.tng-calendar-header .nav-btn:hover{background-color:var(--tng-background, #f5f5f5)}.tng-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}.day-name{font-size:12px;color:var(--tng-text-secondary, #666);font-weight:500;margin-bottom:8px}.day-cell{height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;border-radius:50%;transition:all .2s ease;position:relative;color:var(--tng-text, #333)}.day-cell:hover:not(.disabled):not(.selected):not(.range-start):not(.range-end){background-color:var(--tng-background, #f5f5f5)}.day-cell.not-current-month{color:#ccc}.day-cell.today{font-weight:600;color:var(--tng-primary, #6200ee);border:1px solid var(--tng-primary, #6200ee)}.day-cell.selected,.day-cell.range-start,.day-cell.range-end{background-color:var(--tng-primary, #6200ee);color:var(--tng-primary-contrast, #fff)}.day-cell.selected.today,.day-cell.range-start.today,.day-cell.range-end.today{border-color:transparent}.day-cell.in-range{background-color:color-mix(in srgb,var(--tng-primary, #6200ee),white 80%);border-radius:0;color:var(--tng-primary, #6200ee)}.day-cell.in-range.range-start{border-top-right-radius:0;border-bottom-right-radius:0}.day-cell.in-range.range-end{border-top-left-radius:0;border-bottom-left-radius:0}.day-cell.range-start{border-radius:50% 0 0 50%;position:relative}.day-cell.range-start:after{content:\"\";position:absolute;inset:0 0 0 50%;background-color:color-mix(in srgb,var(--tng-primary, #6200ee),white 80%);z-index:-1}.day-cell.range-end{border-radius:0 50% 50% 0;position:relative}.day-cell.range-end:after{content:\"\";position:absolute;inset:0 50% 0 0;background-color:color-mix(in srgb,var(--tng-primary, #6200ee),white 80%);z-index:-1}.day-cell.selected{border-radius:50%}.day-cell.disabled{opacity:.3;pointer-events:none;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
+        ], ngImport: i0, template: "<div class=\"tng-datepicker-container\" [class.focused]=\"isOpen()\" [class.has-value]=\"formattedValue\" [class.disabled]=\"disabled()\">\n  <!-- Trigger Field (Reusing Input Style) -->\n  <div class=\"tng-input-trigger\" (click)=\"toggleCalendar()\">\n    <fieldset class=\"tng-fieldset\" aria-hidden=\"true\">\n      <legend class=\"tng-legend\"><span>{{ label() }}</span></legend>\n    </fieldset>\n    <label class=\"tng-label\">{{ label() }}</label>\n    <div class=\"tng-input-display\">\n      {{ formattedValue || (isOpen() ? placeholder() : '') }}\n    </div>\n    <span class=\"material-icons tng-icon\">calendar_today</span>\n  </div>\n\n  <!-- Calendar Popup -->\n  @if (isOpen()) {\n    <div class=\"tng-calendar-popup\">\n      <div class=\"tng-calendar-header\">\n        <button type=\"button\" class=\"nav-btn\" (click)=\"prevMonth($event)\">\n          <span class=\"material-icons\">chevron_left</span>\n        </button>\n        <span class=\"current-month\">{{ currentMonthYear }}</span>\n        <button type=\"button\" class=\"nav-btn\" (click)=\"nextMonth($event)\">\n          <span class=\"material-icons\">chevron_right</span>\n        </button>\n      </div>\n\n      <div class=\"tng-calendar-grid\">\n        @for (day of daysOfWeek; track day) {\n          <div class=\"day-name\">{{ day }}</div>\n        }\n        @for (date of calendarDays(); track date.getTime()) {\n          <div\n            class=\"day-cell\"\n            [class.not-current-month]=\"!isCurrentMonth(date)\"\n            [class.today]=\"isToday(date)\"\n            [class.selected]=\"isSelected(date)\"\n            [class.in-range]=\"isInRange(date)\"\n            [class.range-start]=\"mode() === 'range' && isSameDay(date, rangeValue.start)\"\n            [class.range-end]=\"mode() === 'range' && isSameDay(date, rangeValue.end)\"\n            [class.disabled]=\"isDisabled(date)\"\n            (click)=\"selectDate(date)\"\n          >\n            {{ date.getDate() }}\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;margin-bottom:1.5rem;font-family:var(--tng-font-family, \"Inter\", sans-serif);position:relative}.tng-datepicker-container{position:relative}.tng-datepicker-container.disabled{opacity:.6;pointer-events:none}.tng-datepicker-container.disabled .tng-fieldset{border-color:var(--tng-border, #ccc);background-color:var(--tng-background, #f9f9f9)}.tng-input-trigger{position:relative;border-radius:var(--tng-border-radius, 4px);padding:0 16px;height:48px;display:flex;align-items:center;cursor:pointer}.tng-input-trigger:hover .tng-fieldset{border-color:color-mix(in srgb,var(--tng-border, #999),black 20%)}.tng-fieldset{position:absolute;inset:0 0 5px;margin:0;padding:0 12px;border:1px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background-color:var(--tng-surface);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none;transition:border-color .2s ease}.tng-legend{width:auto;max-width:0;height:11px;font-size:.75em;visibility:hidden;white-space:nowrap;padding-inline:0px}.tng-legend span{padding:0 2px;visibility:visible;opacity:0}.tng-label{position:absolute;top:50%;left:16px;transform:translateY(-50%);color:var(--tng-text-secondary, #666);font-size:16px;font-weight:400;pointer-events:none;transform-origin:left top;transition:transform .2s cubic-bezier(.4,0,.2,1),color .2s ease}.tng-input-display{flex:1;font-size:16px;color:var(--tng-text, #333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:100%;display:flex;align-items:center}.tng-icon{color:var(--tng-text-secondary, #666);font-size:20px;margin-left:8px}.tng-datepicker-container.focused .tng-fieldset,.tng-datepicker-container.has-value .tng-fieldset{border-color:var(--tng-primary, #6200ee);border-width:2px}.tng-datepicker-container.focused .tng-label,.tng-datepicker-container.has-value .tng-label{color:var(--tng-primary, #6200ee);transform:translateY(-24px) scale(.75)}.tng-datepicker-container.focused .tng-legend,.tng-datepicker-container.has-value .tng-legend{max-width:100%}.tng-datepicker-container.focused .tng-label{color:var(--tng-primary, #6200ee)}.tng-calendar-popup{position:absolute;top:100%;left:0;z-index:1000;margin-top:4px;background:var(--tng-surface, #fff);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:8px;box-shadow:var(--tng-shadow-md, 0 4px 20px rgba(0, 0, 0, .15));padding:16px;width:300px;animation:fadeIn .2s ease;border:1px solid var(--tng-border, #eee)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.tng-calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.tng-calendar-header .current-month{font-weight:600;font-size:16px;color:var(--tng-text, #333)}.tng-calendar-header .nav-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--tng-text-secondary, #666)}.tng-calendar-header .nav-btn:hover{background-color:var(--tng-background, #f5f5f5)}.tng-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}.day-name{font-size:12px;color:var(--tng-text-secondary, #666);font-weight:500;margin-bottom:8px}.day-cell{height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;border-radius:50%;transition:all .2s ease;position:relative;color:var(--tng-text, #333)}.day-cell:hover:not(.disabled):not(.selected):not(.range-start):not(.range-end){background-color:var(--tng-background, #f5f5f5)}.day-cell.not-current-month{color:#ccc}.day-cell.today{font-weight:600;color:var(--tng-primary, #6200ee);border:1px solid var(--tng-primary, #6200ee)}.day-cell.selected,.day-cell.range-start,.day-cell.range-end{background-color:var(--tng-primary, #6200ee);color:var(--tng-primary-contrast, #fff)}.day-cell.selected.today,.day-cell.range-start.today,.day-cell.range-end.today{border-color:transparent}.day-cell.in-range{background-color:color-mix(in srgb,var(--tng-primary, #6200ee),white 80%);border-radius:0;color:var(--tng-primary, #6200ee)}.day-cell.in-range.range-start{border-top-right-radius:0;border-bottom-right-radius:0}.day-cell.in-range.range-end{border-top-left-radius:0;border-bottom-left-radius:0}.day-cell.range-start{border-radius:50% 0 0 50%;position:relative}.day-cell.range-start:after{content:\"\";position:absolute;inset:0 0 0 50%;background-color:color-mix(in srgb,var(--tng-primary, #6200ee),white 80%);z-index:-1}.day-cell.range-end{border-radius:0 50% 50% 0;position:relative}.day-cell.range-end:after{content:\"\";position:absolute;inset:0 50% 0 0;background-color:color-mix(in srgb,var(--tng-primary, #6200ee),white 80%);z-index:-1}.day-cell.selected{border-radius:50%}.day-cell.disabled{opacity:.3;pointer-events:none;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TecnualDatepickerComponent, decorators: [{
             type: Component,
@@ -330,7 +443,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                             useExisting: forwardRef(() => TecnualDatepickerComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"tng-datepicker-container\" [class.focused]=\"isOpen()\" [class.has-value]=\"formattedValue\" [class.disabled]=\"disabled()\">\n  <!-- Trigger Field (Reusing Input Style) -->\n  <div class=\"tng-input-trigger\" (click)=\"toggleCalendar()\">\n    <fieldset class=\"tng-fieldset\" aria-hidden=\"true\">\n      <legend class=\"tng-legend\"><span>{{ label() }}</span></legend>\n    </fieldset>\n    <label class=\"tng-label\">{{ label() }}</label>\n    <div class=\"tng-input-display\">\n      {{ formattedValue || (isOpen() ? placeholder() : '') }}\n    </div>\n    <span class=\"material-icons tng-icon\">calendar_today</span>\n  </div>\n\n  <!-- Calendar Popup -->\n  @if (isOpen()) {\n    <div class=\"tng-calendar-popup\">\n      <div class=\"tng-calendar-header\">\n        <button type=\"button\" class=\"nav-btn\" (click)=\"prevMonth($event)\">\n          <span class=\"material-icons\">chevron_left</span>\n        </button>\n        <span class=\"current-month\">{{ currentMonthYear }}</span>\n        <button type=\"button\" class=\"nav-btn\" (click)=\"nextMonth($event)\">\n          <span class=\"material-icons\">chevron_right</span>\n        </button>\n      </div>\n\n      <div class=\"tng-calendar-grid\">\n        @for (day of daysOfWeek; track day) {\n          <div class=\"day-name\">{{ day }}</div>\n        }\n        @for (date of calendarDays(); track date.getTime()) {\n          <div\n            class=\"day-cell\"\n            [class.not-current-month]=\"!isCurrentMonth(date)\"\n            [class.today]=\"isToday(date)\"\n            [class.selected]=\"isSelected(date)\"\n            [class.in-range]=\"isInRange(date)\"\n            [class.range-start]=\"mode() === 'range' && isSameDay(date, rangeValue.start)\"\n            [class.range-end]=\"mode() === 'range' && isSameDay(date, rangeValue.end)\"\n            [class.disabled]=\"isDisabled(date)\"\n            (click)=\"selectDate(date)\"\n          >\n            {{ date.getDate() }}\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;margin-bottom:1.5rem;font-family:var(--tng-font-family, \"Inter\", sans-serif);position:relative}.tng-datepicker-container{position:relative}.tng-datepicker-container.disabled{opacity:.6;pointer-events:none}.tng-datepicker-container.disabled .tng-fieldset{border-color:var(--tng-border, #ccc);background-color:var(--tng-background, #f9f9f9)}.tng-input-trigger{position:relative;border-radius:var(--tng-border-radius, 4px);padding:0 16px;height:48px;display:flex;align-items:center;cursor:pointer}.tng-input-trigger:hover .tng-fieldset{border-color:color-mix(in srgb,var(--tng-border, #999),black 20%)}.tng-fieldset{position:absolute;inset:0 0 5px;margin:0;padding:0 12px;border:1px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);pointer-events:none;transition:border-color .2s ease}.tng-legend{width:auto;max-width:0;height:11px;font-size:.75em;visibility:hidden;white-space:nowrap;padding-inline:0px}.tng-legend span{padding:0 2px;visibility:visible;opacity:0}.tng-label{position:absolute;top:50%;left:16px;transform:translateY(-50%);color:var(--tng-text-secondary, #666);font-size:16px;font-weight:400;pointer-events:none;transform-origin:left top;transition:transform .2s cubic-bezier(.4,0,.2,1),color .2s ease}.tng-input-display{flex:1;font-size:16px;color:var(--tng-text, #333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:100%;display:flex;align-items:center}.tng-icon{color:var(--tng-text-secondary, #666);font-size:20px;margin-left:8px}.tng-datepicker-container.focused .tng-fieldset,.tng-datepicker-container.has-value .tng-fieldset{border-color:var(--tng-primary, #6200ee);border-width:2px}.tng-datepicker-container.focused .tng-label,.tng-datepicker-container.has-value .tng-label{color:var(--tng-primary, #6200ee);transform:translateY(-24px) scale(.75)}.tng-datepicker-container.focused .tng-legend,.tng-datepicker-container.has-value .tng-legend{max-width:100%}.tng-datepicker-container.focused .tng-label{color:var(--tng-primary, #6200ee)}.tng-calendar-popup{position:absolute;top:100%;left:0;z-index:1000;margin-top:4px;background:var(--tng-surface, #fff);border-radius:8px;box-shadow:var(--tng-shadow-md, 0 4px 20px rgba(0, 0, 0, .15));padding:16px;width:300px;animation:fadeIn .2s ease;border:1px solid var(--tng-border, #eee)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.tng-calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.tng-calendar-header .current-month{font-weight:600;font-size:16px;color:var(--tng-text, #333)}.tng-calendar-header .nav-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--tng-text-secondary, #666)}.tng-calendar-header .nav-btn:hover{background-color:var(--tng-background, #f5f5f5)}.tng-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}.day-name{font-size:12px;color:var(--tng-text-secondary, #666);font-weight:500;margin-bottom:8px}.day-cell{height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;border-radius:50%;transition:all .2s ease;position:relative;color:var(--tng-text, #333)}.day-cell:hover:not(.disabled):not(.selected):not(.range-start):not(.range-end){background-color:var(--tng-background, #f5f5f5)}.day-cell.not-current-month{color:#ccc}.day-cell.today{font-weight:600;color:var(--tng-primary, #6200ee);border:1px solid var(--tng-primary, #6200ee)}.day-cell.selected,.day-cell.range-start,.day-cell.range-end{background-color:var(--tng-primary, #6200ee);color:var(--tng-primary-contrast, #fff)}.day-cell.selected.today,.day-cell.range-start.today,.day-cell.range-end.today{border-color:transparent}.day-cell.in-range{background-color:color-mix(in srgb,var(--tng-primary, #6200ee),white 80%);border-radius:0;color:var(--tng-primary, #6200ee)}.day-cell.in-range.range-start{border-top-right-radius:0;border-bottom-right-radius:0}.day-cell.in-range.range-end{border-top-left-radius:0;border-bottom-left-radius:0}.day-cell.range-start{border-radius:50% 0 0 50%;position:relative}.day-cell.range-start:after{content:\"\";position:absolute;inset:0 0 0 50%;background-color:color-mix(in srgb,var(--tng-primary, #6200ee),white 80%);z-index:-1}.day-cell.range-end{border-radius:0 50% 50% 0;position:relative}.day-cell.range-end:after{content:\"\";position:absolute;inset:0 50% 0 0;background-color:color-mix(in srgb,var(--tng-primary, #6200ee),white 80%);z-index:-1}.day-cell.selected{border-radius:50%}.day-cell.disabled{opacity:.3;pointer-events:none;cursor:not-allowed}\n"] }]
+                    ], template: "<div class=\"tng-datepicker-container\" [class.focused]=\"isOpen()\" [class.has-value]=\"formattedValue\" [class.disabled]=\"disabled()\">\n  <!-- Trigger Field (Reusing Input Style) -->\n  <div class=\"tng-input-trigger\" (click)=\"toggleCalendar()\">\n    <fieldset class=\"tng-fieldset\" aria-hidden=\"true\">\n      <legend class=\"tng-legend\"><span>{{ label() }}</span></legend>\n    </fieldset>\n    <label class=\"tng-label\">{{ label() }}</label>\n    <div class=\"tng-input-display\">\n      {{ formattedValue || (isOpen() ? placeholder() : '') }}\n    </div>\n    <span class=\"material-icons tng-icon\">calendar_today</span>\n  </div>\n\n  <!-- Calendar Popup -->\n  @if (isOpen()) {\n    <div class=\"tng-calendar-popup\">\n      <div class=\"tng-calendar-header\">\n        <button type=\"button\" class=\"nav-btn\" (click)=\"prevMonth($event)\">\n          <span class=\"material-icons\">chevron_left</span>\n        </button>\n        <span class=\"current-month\">{{ currentMonthYear }}</span>\n        <button type=\"button\" class=\"nav-btn\" (click)=\"nextMonth($event)\">\n          <span class=\"material-icons\">chevron_right</span>\n        </button>\n      </div>\n\n      <div class=\"tng-calendar-grid\">\n        @for (day of daysOfWeek; track day) {\n          <div class=\"day-name\">{{ day }}</div>\n        }\n        @for (date of calendarDays(); track date.getTime()) {\n          <div\n            class=\"day-cell\"\n            [class.not-current-month]=\"!isCurrentMonth(date)\"\n            [class.today]=\"isToday(date)\"\n            [class.selected]=\"isSelected(date)\"\n            [class.in-range]=\"isInRange(date)\"\n            [class.range-start]=\"mode() === 'range' && isSameDay(date, rangeValue.start)\"\n            [class.range-end]=\"mode() === 'range' && isSameDay(date, rangeValue.end)\"\n            [class.disabled]=\"isDisabled(date)\"\n            (click)=\"selectDate(date)\"\n          >\n            {{ date.getDate() }}\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;margin-bottom:1.5rem;font-family:var(--tng-font-family, \"Inter\", sans-serif);position:relative}.tng-datepicker-container{position:relative}.tng-datepicker-container.disabled{opacity:.6;pointer-events:none}.tng-datepicker-container.disabled .tng-fieldset{border-color:var(--tng-border, #ccc);background-color:var(--tng-background, #f9f9f9)}.tng-input-trigger{position:relative;border-radius:var(--tng-border-radius, 4px);padding:0 16px;height:48px;display:flex;align-items:center;cursor:pointer}.tng-input-trigger:hover .tng-fieldset{border-color:color-mix(in srgb,var(--tng-border, #999),black 20%)}.tng-fieldset{position:absolute;inset:0 0 5px;margin:0;padding:0 12px;border:1px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background-color:var(--tng-surface);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none;transition:border-color .2s ease}.tng-legend{width:auto;max-width:0;height:11px;font-size:.75em;visibility:hidden;white-space:nowrap;padding-inline:0px}.tng-legend span{padding:0 2px;visibility:visible;opacity:0}.tng-label{position:absolute;top:50%;left:16px;transform:translateY(-50%);color:var(--tng-text-secondary, #666);font-size:16px;font-weight:400;pointer-events:none;transform-origin:left top;transition:transform .2s cubic-bezier(.4,0,.2,1),color .2s ease}.tng-input-display{flex:1;font-size:16px;color:var(--tng-text, #333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:100%;display:flex;align-items:center}.tng-icon{color:var(--tng-text-secondary, #666);font-size:20px;margin-left:8px}.tng-datepicker-container.focused .tng-fieldset,.tng-datepicker-container.has-value .tng-fieldset{border-color:var(--tng-primary, #6200ee);border-width:2px}.tng-datepicker-container.focused .tng-label,.tng-datepicker-container.has-value .tng-label{color:var(--tng-primary, #6200ee);transform:translateY(-24px) scale(.75)}.tng-datepicker-container.focused .tng-legend,.tng-datepicker-container.has-value .tng-legend{max-width:100%}.tng-datepicker-container.focused .tng-label{color:var(--tng-primary, #6200ee)}.tng-calendar-popup{position:absolute;top:100%;left:0;z-index:1000;margin-top:4px;background:var(--tng-surface, #fff);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:8px;box-shadow:var(--tng-shadow-md, 0 4px 20px rgba(0, 0, 0, .15));padding:16px;width:300px;animation:fadeIn .2s ease;border:1px solid var(--tng-border, #eee)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.tng-calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.tng-calendar-header .current-month{font-weight:600;font-size:16px;color:var(--tng-text, #333)}.tng-calendar-header .nav-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--tng-text-secondary, #666)}.tng-calendar-header .nav-btn:hover{background-color:var(--tng-background, #f5f5f5)}.tng-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}.day-name{font-size:12px;color:var(--tng-text-secondary, #666);font-weight:500;margin-bottom:8px}.day-cell{height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;border-radius:50%;transition:all .2s ease;position:relative;color:var(--tng-text, #333)}.day-cell:hover:not(.disabled):not(.selected):not(.range-start):not(.range-end){background-color:var(--tng-background, #f5f5f5)}.day-cell.not-current-month{color:#ccc}.day-cell.today{font-weight:600;color:var(--tng-primary, #6200ee);border:1px solid var(--tng-primary, #6200ee)}.day-cell.selected,.day-cell.range-start,.day-cell.range-end{background-color:var(--tng-primary, #6200ee);color:var(--tng-primary-contrast, #fff)}.day-cell.selected.today,.day-cell.range-start.today,.day-cell.range-end.today{border-color:transparent}.day-cell.in-range{background-color:color-mix(in srgb,var(--tng-primary, #6200ee),white 80%);border-radius:0;color:var(--tng-primary, #6200ee)}.day-cell.in-range.range-start{border-top-right-radius:0;border-bottom-right-radius:0}.day-cell.in-range.range-end{border-top-left-radius:0;border-bottom-left-radius:0}.day-cell.range-start{border-radius:50% 0 0 50%;position:relative}.day-cell.range-start:after{content:\"\";position:absolute;inset:0 0 0 50%;background-color:color-mix(in srgb,var(--tng-primary, #6200ee),white 80%);z-index:-1}.day-cell.range-end{border-radius:0 50% 50% 0;position:relative}.day-cell.range-end:after{content:\"\";position:absolute;inset:0 50% 0 0;background-color:color-mix(in srgb,var(--tng-primary, #6200ee),white 80%);z-index:-1}.day-cell.selected{border-radius:50%}.day-cell.disabled{opacity:.3;pointer-events:none;cursor:not-allowed}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], onClickOutside: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -410,11 +523,11 @@ class TecnualTableComponent {
         this.onSearch(input.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TecnualTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TecnualTableComponent, isStandalone: true, selector: "tng-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tng-table-container\">\n  <!-- Toolbar -->\n  @if (filterable()) {\n    <div class=\"tng-table-toolbar\">\n      <div class=\"tng-table-search\">\n        <tng-input\n          [placeholder]=\"'Search...'\"\n          (input)=\"onSearchInput($event)\"\n        ></tng-input>\n      </div>\n    </div>\n  }\n\n  <!-- Table -->\n  <div class=\"tng-table-wrapper\">\n    <table class=\"tng-table\">\n      <thead>\n        <tr>\n          @for (col of columns(); track col.key) {\n            <th \n              [style.width]=\"col.width\"\n              [class.sortable]=\"col.sortable\"\n              (click)=\"onSort(col)\"\n            >\n              <div class=\"th-content\">\n                {{ col.label }}\n                @if (sortColumn() === col.key) {\n                  <span class=\"sort-indicator\">\n                    {{ sortDirection() === 'asc' ? '\u2191' : '\u2193' }}\n                  </span>\n                }\n              </div>\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (row of paginatedData(); track row) {\n          <tr>\n            @for (col of columns(); track col.key) {\n              <td>\n                @if (col.template) {\n                  <ng-container *ngTemplateOutlet=\"col.template; context: { $implicit: row[col.key], row: row }\"></ng-container>\n                } @else {\n                  {{ row[col.key] }}\n                }\n              </td>\n            }\n          </tr>\n        }\n        @if (paginatedData().length === 0) {\n          <tr class=\"no-data-row\">\n            <td [attr.colspan]=\"columns().length\">\n              No data found\n            </td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n\n  <!-- Pagination -->\n  @if (totalPages() > 1) {\n    <div class=\"tng-table-pagination\">\n      <div class=\"pagination-info\">\n        Page {{ currentPage() }} of {{ totalPages() }}\n      </div>\n      <div class=\"pagination-controls\">\n        <button \n          class=\"tng-btn-icon\" \n          [disabled]=\"currentPage() === 1\"\n          (click)=\"setPage(currentPage() - 1)\"\n        >\n          \u2039\n        </button>\n        \n        @for (page of [].constructor(totalPages()); track $index; let i = $index) {\n          @if (i + 1 === currentPage() || i + 1 === 1 || i + 1 === totalPages() || (i + 1 >= currentPage() - 1 && i + 1 <= currentPage() + 1)) {\n            <button \n              class=\"tng-btn-page\"\n              [class.active]=\"currentPage() === i + 1\"\n              (click)=\"setPage(i + 1)\"\n            >\n              {{ i + 1 }}\n            </button>\n          }\n          @if ((i + 1 === 2 && currentPage() > 4) || (i + 1 === totalPages() - 1 && currentPage() < totalPages() - 3)) {\n            <span class=\"pagination-dots\">...</span>\n          }\n        }\n\n        <button \n          class=\"tng-btn-icon\" \n          [disabled]=\"currentPage() === totalPages()\"\n          (click)=\"setPage(currentPage() + 1)\"\n        >\n          \u203A\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".tng-table-container{display:flex;flex-direction:column;gap:var(--tng-spacing-unit, 16px);width:100%;background:var(--tng-surface, #fff);border-radius:var(--tng-border-radius, 8px);box-shadow:var(--tng-shadow-sm, 0 1px 3px rgba(0, 0, 0, .1));padding:var(--tng-spacing-unit, 16px);box-sizing:border-box}.tng-table-toolbar{display:flex;justify-content:flex-end;margin-bottom:var(--tng-spacing-unit, 8px)}.tng-table-search{width:100%;max-width:300px}.tng-table-wrapper{overflow-x:auto;width:100%;border:1px solid var(--tng-border, #e0e0e0);border-radius:var(--tng-border-radius, 4px)}.tng-table{width:100%;border-collapse:collapse;font-family:var(--tng-font-family, sans-serif);font-size:var(--tng-font-size-base, 14px)}.tng-table th,.tng-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--tng-border, #e0e0e0)}.tng-table th{background-color:var(--tng-background, #fafafa);font-weight:var(--tng-font-weight-medium, 500);color:var(--tng-text-secondary, #666);white-space:nowrap;-webkit-user-select:none;user-select:none}.tng-table th.sortable{cursor:pointer;transition:background-color .2s}.tng-table th.sortable:hover{background-color:#ededed}.tng-table tr:last-child td{border-bottom:none}.tng-table tr:hover td{background-color:#00000005}.th-content{display:flex;align-items:center;gap:4px}.sort-indicator{font-size:12px}.no-data-row{text-align:center;color:var(--tng-text-secondary, #666);padding:24px}.tng-table-pagination{display:flex;justify-content:space-between;align-items:center;padding-top:var(--tng-spacing-unit, 8px);flex-wrap:wrap;gap:16px}.pagination-info{color:var(--tng-text-secondary, #666);font-size:.9em}.pagination-controls{display:flex;gap:4px;align-items:center}.tng-btn-icon,.tng-btn-page{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 6px;border:1px solid var(--tng-border, #e0e0e0);background:var(--tng-surface, #fff);border-radius:var(--tng-border-radius, 4px);cursor:pointer;color:var(--tng-text, #333);transition:all .2s}.tng-btn-icon:hover:not(:disabled),.tng-btn-page:hover:not(:disabled){background-color:var(--tng-background, #f5f5f5);border-color:var(--tng-primary, #3f51b5);color:var(--tng-primary, #3f51b5)}.tng-btn-icon:disabled,.tng-btn-page:disabled{opacity:.5;cursor:not-allowed}.tng-btn-icon.active,.tng-btn-page.active{background-color:var(--tng-primary, #3f51b5);color:var(--tng-primary-contrast, #fff);border-color:var(--tng-primary, #3f51b5)}.pagination-dots{display:inline-flex;align-items:center;justify-content:center;width:32px;color:var(--tng-text-secondary, #666)}@media(max-width:600px){.tng-table-pagination{justify-content:center;flex-direction:column}.tng-table-toolbar{justify-content:stretch}.tng-table-search{max-width:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: TecnualInputComponent, selector: "tng-input", inputs: ["label", "type", "placeholder", "required", "disabled", "id"], outputs: ["disabledChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TecnualTableComponent, isStandalone: true, selector: "tng-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tng-table-container\">\n  <!-- Toolbar -->\n  @if (filterable()) {\n    <div class=\"tng-table-toolbar\">\n      <div class=\"tng-table-search\">\n        <tng-input\n          [placeholder]=\"'Search...'\"\n          (input)=\"onSearchInput($event)\"\n        ></tng-input>\n      </div>\n    </div>\n  }\n\n  <!-- Table -->\n  <div class=\"tng-table-wrapper\">\n    <table class=\"tng-table\">\n      <thead>\n        <tr>\n          @for (col of columns(); track col.key) {\n            <th \n              [style.width]=\"col.width\"\n              [class.sortable]=\"col.sortable\"\n              (click)=\"onSort(col)\"\n            >\n              <div class=\"th-content\">\n                {{ col.label }}\n                @if (sortColumn() === col.key) {\n                  <span class=\"sort-indicator\">\n                    {{ sortDirection() === 'asc' ? '\u2191' : '\u2193' }}\n                  </span>\n                }\n              </div>\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (row of paginatedData(); track row) {\n          <tr>\n            @for (col of columns(); track col.key) {\n              <td>\n                @if (col.template) {\n                  <ng-container *ngTemplateOutlet=\"col.template; context: { $implicit: row[col.key], row: row }\"></ng-container>\n                } @else {\n                  {{ row[col.key] }}\n                }\n              </td>\n            }\n          </tr>\n        }\n        @if (paginatedData().length === 0) {\n          <tr class=\"no-data-row\">\n            <td [attr.colspan]=\"columns().length\">\n              No data found\n            </td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n\n  <!-- Pagination -->\n  @if (totalPages() > 1) {\n    <div class=\"tng-table-pagination\">\n      <div class=\"pagination-info\">\n        Page {{ currentPage() }} of {{ totalPages() }}\n      </div>\n      <div class=\"pagination-controls\">\n        <button \n          class=\"tng-btn-icon\" \n          [disabled]=\"currentPage() === 1\"\n          (click)=\"setPage(currentPage() - 1)\"\n        >\n          \u2039\n        </button>\n        \n        @for (page of [].constructor(totalPages()); track $index; let i = $index) {\n          @if (i + 1 === currentPage() || i + 1 === 1 || i + 1 === totalPages() || (i + 1 >= currentPage() - 1 && i + 1 <= currentPage() + 1)) {\n            <button \n              class=\"tng-btn-page\"\n              [class.active]=\"currentPage() === i + 1\"\n              (click)=\"setPage(i + 1)\"\n            >\n              {{ i + 1 }}\n            </button>\n          }\n          @if ((i + 1 === 2 && currentPage() > 4) || (i + 1 === totalPages() - 1 && currentPage() < totalPages() - 3)) {\n            <span class=\"pagination-dots\">...</span>\n          }\n        }\n\n        <button \n          class=\"tng-btn-icon\" \n          [disabled]=\"currentPage() === totalPages()\"\n          (click)=\"setPage(currentPage() + 1)\"\n        >\n          \u203A\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".tng-table-container{display:flex;flex-direction:column;gap:var(--tng-spacing-unit, 16px);width:100%;background:var(--tng-surface, #fff);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--tng-border);border-radius:var(--tng-border-radius, 8px);box-shadow:var(--tng-shadow-sm, 0 1px 3px rgba(0, 0, 0, .1));padding:var(--tng-spacing-unit, 16px);box-sizing:border-box}.tng-table-toolbar{display:flex;justify-content:flex-end;margin-bottom:var(--tng-spacing-unit, 8px)}.tng-table-search{width:100%;max-width:300px}.tng-table-wrapper{overflow-x:auto;width:100%;border:1px solid var(--tng-border, #e0e0e0);border-radius:var(--tng-border-radius, 4px)}.tng-table{width:100%;border-collapse:collapse;font-family:var(--tng-font-family, sans-serif);font-size:var(--tng-font-size-base, 14px)}.tng-table th,.tng-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--tng-border, #e0e0e0)}.tng-table th{background-color:var(--tng-background, #fafafa);font-weight:var(--tng-font-weight-medium, 500);color:var(--tng-text-secondary, #666);white-space:nowrap;-webkit-user-select:none;user-select:none}.tng-table th.sortable{cursor:pointer;transition:background-color .2s}.tng-table th.sortable:hover{background-color:#ededed}.tng-table tr:last-child td{border-bottom:none}.tng-table tr:hover td{background-color:#00000005}.th-content{display:flex;align-items:center;gap:4px}.sort-indicator{font-size:12px}.no-data-row{text-align:center;color:var(--tng-text-secondary, #666);padding:24px}.tng-table-pagination{display:flex;justify-content:space-between;align-items:center;padding-top:var(--tng-spacing-unit, 8px);flex-wrap:wrap;gap:16px}.pagination-info{color:var(--tng-text-secondary, #666);font-size:.9em}.pagination-controls{display:flex;gap:4px;align-items:center}.tng-btn-icon,.tng-btn-page{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 6px;border:1px solid var(--tng-border, #e0e0e0);background:var(--tng-surface, #fff);border-radius:var(--tng-border-radius, 4px);cursor:pointer;color:var(--tng-text, #333);transition:all .2s}.tng-btn-icon:hover:not(:disabled),.tng-btn-page:hover:not(:disabled){background-color:var(--tng-background, #f5f5f5);border-color:var(--tng-primary, #3f51b5);color:var(--tng-primary, #3f51b5)}.tng-btn-icon:disabled,.tng-btn-page:disabled{opacity:.5;cursor:not-allowed}.tng-btn-icon.active,.tng-btn-page.active{background-color:var(--tng-primary, #3f51b5);color:var(--tng-primary-contrast, #fff);border-color:var(--tng-primary, #3f51b5)}.pagination-dots{display:inline-flex;align-items:center;justify-content:center;width:32px;color:var(--tng-text-secondary, #666)}@media(max-width:600px){.tng-table-pagination{justify-content:center;flex-direction:column}.tng-table-toolbar{justify-content:stretch}.tng-table-search{max-width:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: TecnualInputComponent, selector: "tng-input", inputs: ["label", "type", "placeholder", "required", "disabled", "id"], outputs: ["disabledChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TecnualTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tng-table', standalone: true, imports: [CommonModule, FormsModule, TecnualInputComponent], template: "<div class=\"tng-table-container\">\n  <!-- Toolbar -->\n  @if (filterable()) {\n    <div class=\"tng-table-toolbar\">\n      <div class=\"tng-table-search\">\n        <tng-input\n          [placeholder]=\"'Search...'\"\n          (input)=\"onSearchInput($event)\"\n        ></tng-input>\n      </div>\n    </div>\n  }\n\n  <!-- Table -->\n  <div class=\"tng-table-wrapper\">\n    <table class=\"tng-table\">\n      <thead>\n        <tr>\n          @for (col of columns(); track col.key) {\n            <th \n              [style.width]=\"col.width\"\n              [class.sortable]=\"col.sortable\"\n              (click)=\"onSort(col)\"\n            >\n              <div class=\"th-content\">\n                {{ col.label }}\n                @if (sortColumn() === col.key) {\n                  <span class=\"sort-indicator\">\n                    {{ sortDirection() === 'asc' ? '\u2191' : '\u2193' }}\n                  </span>\n                }\n              </div>\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (row of paginatedData(); track row) {\n          <tr>\n            @for (col of columns(); track col.key) {\n              <td>\n                @if (col.template) {\n                  <ng-container *ngTemplateOutlet=\"col.template; context: { $implicit: row[col.key], row: row }\"></ng-container>\n                } @else {\n                  {{ row[col.key] }}\n                }\n              </td>\n            }\n          </tr>\n        }\n        @if (paginatedData().length === 0) {\n          <tr class=\"no-data-row\">\n            <td [attr.colspan]=\"columns().length\">\n              No data found\n            </td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n\n  <!-- Pagination -->\n  @if (totalPages() > 1) {\n    <div class=\"tng-table-pagination\">\n      <div class=\"pagination-info\">\n        Page {{ currentPage() }} of {{ totalPages() }}\n      </div>\n      <div class=\"pagination-controls\">\n        <button \n          class=\"tng-btn-icon\" \n          [disabled]=\"currentPage() === 1\"\n          (click)=\"setPage(currentPage() - 1)\"\n        >\n          \u2039\n        </button>\n        \n        @for (page of [].constructor(totalPages()); track $index; let i = $index) {\n          @if (i + 1 === currentPage() || i + 1 === 1 || i + 1 === totalPages() || (i + 1 >= currentPage() - 1 && i + 1 <= currentPage() + 1)) {\n            <button \n              class=\"tng-btn-page\"\n              [class.active]=\"currentPage() === i + 1\"\n              (click)=\"setPage(i + 1)\"\n            >\n              {{ i + 1 }}\n            </button>\n          }\n          @if ((i + 1 === 2 && currentPage() > 4) || (i + 1 === totalPages() - 1 && currentPage() < totalPages() - 3)) {\n            <span class=\"pagination-dots\">...</span>\n          }\n        }\n\n        <button \n          class=\"tng-btn-icon\" \n          [disabled]=\"currentPage() === totalPages()\"\n          (click)=\"setPage(currentPage() + 1)\"\n        >\n          \u203A\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".tng-table-container{display:flex;flex-direction:column;gap:var(--tng-spacing-unit, 16px);width:100%;background:var(--tng-surface, #fff);border-radius:var(--tng-border-radius, 8px);box-shadow:var(--tng-shadow-sm, 0 1px 3px rgba(0, 0, 0, .1));padding:var(--tng-spacing-unit, 16px);box-sizing:border-box}.tng-table-toolbar{display:flex;justify-content:flex-end;margin-bottom:var(--tng-spacing-unit, 8px)}.tng-table-search{width:100%;max-width:300px}.tng-table-wrapper{overflow-x:auto;width:100%;border:1px solid var(--tng-border, #e0e0e0);border-radius:var(--tng-border-radius, 4px)}.tng-table{width:100%;border-collapse:collapse;font-family:var(--tng-font-family, sans-serif);font-size:var(--tng-font-size-base, 14px)}.tng-table th,.tng-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--tng-border, #e0e0e0)}.tng-table th{background-color:var(--tng-background, #fafafa);font-weight:var(--tng-font-weight-medium, 500);color:var(--tng-text-secondary, #666);white-space:nowrap;-webkit-user-select:none;user-select:none}.tng-table th.sortable{cursor:pointer;transition:background-color .2s}.tng-table th.sortable:hover{background-color:#ededed}.tng-table tr:last-child td{border-bottom:none}.tng-table tr:hover td{background-color:#00000005}.th-content{display:flex;align-items:center;gap:4px}.sort-indicator{font-size:12px}.no-data-row{text-align:center;color:var(--tng-text-secondary, #666);padding:24px}.tng-table-pagination{display:flex;justify-content:space-between;align-items:center;padding-top:var(--tng-spacing-unit, 8px);flex-wrap:wrap;gap:16px}.pagination-info{color:var(--tng-text-secondary, #666);font-size:.9em}.pagination-controls{display:flex;gap:4px;align-items:center}.tng-btn-icon,.tng-btn-page{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 6px;border:1px solid var(--tng-border, #e0e0e0);background:var(--tng-surface, #fff);border-radius:var(--tng-border-radius, 4px);cursor:pointer;color:var(--tng-text, #333);transition:all .2s}.tng-btn-icon:hover:not(:disabled),.tng-btn-page:hover:not(:disabled){background-color:var(--tng-background, #f5f5f5);border-color:var(--tng-primary, #3f51b5);color:var(--tng-primary, #3f51b5)}.tng-btn-icon:disabled,.tng-btn-page:disabled{opacity:.5;cursor:not-allowed}.tng-btn-icon.active,.tng-btn-page.active{background-color:var(--tng-primary, #3f51b5);color:var(--tng-primary-contrast, #fff);border-color:var(--tng-primary, #3f51b5)}.pagination-dots{display:inline-flex;align-items:center;justify-content:center;width:32px;color:var(--tng-text-secondary, #666)}@media(max-width:600px){.tng-table-pagination{justify-content:center;flex-direction:column}.tng-table-toolbar{justify-content:stretch}.tng-table-search{max-width:none}}\n"] }]
+            args: [{ selector: 'tng-table', standalone: true, imports: [CommonModule, FormsModule, TecnualInputComponent], template: "<div class=\"tng-table-container\">\n  <!-- Toolbar -->\n  @if (filterable()) {\n    <div class=\"tng-table-toolbar\">\n      <div class=\"tng-table-search\">\n        <tng-input\n          [placeholder]=\"'Search...'\"\n          (input)=\"onSearchInput($event)\"\n        ></tng-input>\n      </div>\n    </div>\n  }\n\n  <!-- Table -->\n  <div class=\"tng-table-wrapper\">\n    <table class=\"tng-table\">\n      <thead>\n        <tr>\n          @for (col of columns(); track col.key) {\n            <th \n              [style.width]=\"col.width\"\n              [class.sortable]=\"col.sortable\"\n              (click)=\"onSort(col)\"\n            >\n              <div class=\"th-content\">\n                {{ col.label }}\n                @if (sortColumn() === col.key) {\n                  <span class=\"sort-indicator\">\n                    {{ sortDirection() === 'asc' ? '\u2191' : '\u2193' }}\n                  </span>\n                }\n              </div>\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (row of paginatedData(); track row) {\n          <tr>\n            @for (col of columns(); track col.key) {\n              <td>\n                @if (col.template) {\n                  <ng-container *ngTemplateOutlet=\"col.template; context: { $implicit: row[col.key], row: row }\"></ng-container>\n                } @else {\n                  {{ row[col.key] }}\n                }\n              </td>\n            }\n          </tr>\n        }\n        @if (paginatedData().length === 0) {\n          <tr class=\"no-data-row\">\n            <td [attr.colspan]=\"columns().length\">\n              No data found\n            </td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n\n  <!-- Pagination -->\n  @if (totalPages() > 1) {\n    <div class=\"tng-table-pagination\">\n      <div class=\"pagination-info\">\n        Page {{ currentPage() }} of {{ totalPages() }}\n      </div>\n      <div class=\"pagination-controls\">\n        <button \n          class=\"tng-btn-icon\" \n          [disabled]=\"currentPage() === 1\"\n          (click)=\"setPage(currentPage() - 1)\"\n        >\n          \u2039\n        </button>\n        \n        @for (page of [].constructor(totalPages()); track $index; let i = $index) {\n          @if (i + 1 === currentPage() || i + 1 === 1 || i + 1 === totalPages() || (i + 1 >= currentPage() - 1 && i + 1 <= currentPage() + 1)) {\n            <button \n              class=\"tng-btn-page\"\n              [class.active]=\"currentPage() === i + 1\"\n              (click)=\"setPage(i + 1)\"\n            >\n              {{ i + 1 }}\n            </button>\n          }\n          @if ((i + 1 === 2 && currentPage() > 4) || (i + 1 === totalPages() - 1 && currentPage() < totalPages() - 3)) {\n            <span class=\"pagination-dots\">...</span>\n          }\n        }\n\n        <button \n          class=\"tng-btn-icon\" \n          [disabled]=\"currentPage() === totalPages()\"\n          (click)=\"setPage(currentPage() + 1)\"\n        >\n          \u203A\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".tng-table-container{display:flex;flex-direction:column;gap:var(--tng-spacing-unit, 16px);width:100%;background:var(--tng-surface, #fff);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--tng-border);border-radius:var(--tng-border-radius, 8px);box-shadow:var(--tng-shadow-sm, 0 1px 3px rgba(0, 0, 0, .1));padding:var(--tng-spacing-unit, 16px);box-sizing:border-box}.tng-table-toolbar{display:flex;justify-content:flex-end;margin-bottom:var(--tng-spacing-unit, 8px)}.tng-table-search{width:100%;max-width:300px}.tng-table-wrapper{overflow-x:auto;width:100%;border:1px solid var(--tng-border, #e0e0e0);border-radius:var(--tng-border-radius, 4px)}.tng-table{width:100%;border-collapse:collapse;font-family:var(--tng-font-family, sans-serif);font-size:var(--tng-font-size-base, 14px)}.tng-table th,.tng-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--tng-border, #e0e0e0)}.tng-table th{background-color:var(--tng-background, #fafafa);font-weight:var(--tng-font-weight-medium, 500);color:var(--tng-text-secondary, #666);white-space:nowrap;-webkit-user-select:none;user-select:none}.tng-table th.sortable{cursor:pointer;transition:background-color .2s}.tng-table th.sortable:hover{background-color:#ededed}.tng-table tr:last-child td{border-bottom:none}.tng-table tr:hover td{background-color:#00000005}.th-content{display:flex;align-items:center;gap:4px}.sort-indicator{font-size:12px}.no-data-row{text-align:center;color:var(--tng-text-secondary, #666);padding:24px}.tng-table-pagination{display:flex;justify-content:space-between;align-items:center;padding-top:var(--tng-spacing-unit, 8px);flex-wrap:wrap;gap:16px}.pagination-info{color:var(--tng-text-secondary, #666);font-size:.9em}.pagination-controls{display:flex;gap:4px;align-items:center}.tng-btn-icon,.tng-btn-page{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 6px;border:1px solid var(--tng-border, #e0e0e0);background:var(--tng-surface, #fff);border-radius:var(--tng-border-radius, 4px);cursor:pointer;color:var(--tng-text, #333);transition:all .2s}.tng-btn-icon:hover:not(:disabled),.tng-btn-page:hover:not(:disabled){background-color:var(--tng-background, #f5f5f5);border-color:var(--tng-primary, #3f51b5);color:var(--tng-primary, #3f51b5)}.tng-btn-icon:disabled,.tng-btn-page:disabled{opacity:.5;cursor:not-allowed}.tng-btn-icon.active,.tng-btn-page.active{background-color:var(--tng-primary, #3f51b5);color:var(--tng-primary-contrast, #fff);border-color:var(--tng-primary, #3f51b5)}.pagination-dots{display:inline-flex;align-items:center;justify-content:center;width:32px;color:var(--tng-text-secondary, #666)}@media(max-width:600px){.tng-table-pagination{justify-content:center;flex-direction:column}.tng-table-toolbar{justify-content:stretch}.tng-table-search{max-width:none}}\n"] }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }] } });
 
 class TngToolbarComponent {
@@ -423,7 +536,7 @@ class TngToolbarComponent {
     color = input('default', ...(ngDevMode ? [{ debugName: "color" }] : []));
     elevation = input(true, ...(ngDevMode ? [{ debugName: "elevation" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: TngToolbarComponent, isStandalone: true, selector: "tng-toolbar", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, positionType: { classPropertyName: "positionType", publicName: "positionType", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tng-toolbar--top": "position() === \"top\"", "class.tng-toolbar--bottom": "position() === \"bottom\"", "class.tng-toolbar--fixed": "positionType() === \"fixed\"", "class.tng-toolbar--absolute": "positionType() === \"absolute\"", "class.tng-toolbar--relative": "positionType() === \"relative\"", "class.tng-toolbar--static": "positionType() === \"static\"", "class.tng-toolbar--sticky": "positionType() === \"sticky\"", "class.tng-toolbar--primary": "color() === \"primary\"", "class.tng-toolbar--secondary": "color() === \"secondary\"", "class.tng-toolbar--elevated": "elevation()" }, classAttribute: "tng-toolbar" }, ngImport: i0, template: "<div class=\"tng-toolbar__container\">\n  <div class=\"tng-toolbar__section tng-toolbar__section--left\">\n    <ng-content select=\"[toolbar-left]\"></ng-content>\n  </div>\n\n  <div class=\"tng-toolbar__section tng-toolbar__section--center\">\n    <ng-content select=\"[toolbar-center]\"></ng-content>\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"tng-toolbar__section tng-toolbar__section--right\">\n    <ng-content select=\"[toolbar-right]\"></ng-content>\n  </div>\n</div>\n", styles: [".tng-toolbar{display:block;width:100%;background-color:#fff;transition:box-shadow .3s cubic-bezier(.4,0,.2,1)}.tng-toolbar__container{display:flex;align-items:center;justify-content:space-between;padding:0 16px;min-height:64px;max-width:100%;gap:16px}@media(max-width:768px){.tng-toolbar__container{min-height:56px;padding:0 12px;gap:12px}}.tng-toolbar__section{display:flex;align-items:center;gap:12px;flex-shrink:0}.tng-toolbar__section--left{justify-content:flex-start}.tng-toolbar__section--center{justify-content:center;flex:1;overflow:hidden}.tng-toolbar__section--right{justify-content:flex-end}.tng-toolbar--fixed{position:fixed;z-index:1000}.tng-toolbar--absolute{position:absolute;z-index:1000}.tng-toolbar--relative{position:relative}.tng-toolbar--static{position:static}.tng-toolbar--sticky{position:sticky;top:0;z-index:1000}.tng-toolbar--top.tng-toolbar--fixed,.tng-toolbar--top.tng-toolbar--absolute{top:0;left:0;right:0}.tng-toolbar--bottom.tng-toolbar--fixed,.tng-toolbar--bottom.tng-toolbar--absolute{bottom:0;left:0;right:0}.tng-toolbar--elevated{box-shadow:0 2px 4px -1px #0000001a,0 4px 5px #00000012,0 1px 10px #0000000f}.tng-toolbar--primary{background:var(--tng-primary);color:var(--tng-primary-contrast)}.tng-toolbar--secondary{background:var(--tng-secondary);color:var(--tng-secondary-contrast)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: TngToolbarComponent, isStandalone: true, selector: "tng-toolbar", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, positionType: { classPropertyName: "positionType", publicName: "positionType", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tng-toolbar--top": "position() === \"top\"", "class.tng-toolbar--bottom": "position() === \"bottom\"", "class.tng-toolbar--fixed": "positionType() === \"fixed\"", "class.tng-toolbar--absolute": "positionType() === \"absolute\"", "class.tng-toolbar--relative": "positionType() === \"relative\"", "class.tng-toolbar--static": "positionType() === \"static\"", "class.tng-toolbar--sticky": "positionType() === \"sticky\"", "class.tng-toolbar--primary": "color() === \"primary\"", "class.tng-toolbar--secondary": "color() === \"secondary\"", "class.tng-toolbar--transparent": "color() === \"transparent\"", "class.tng-toolbar--elevated": "elevation()" }, classAttribute: "tng-toolbar" }, ngImport: i0, template: "<div class=\"tng-toolbar__container\">\n  <div class=\"tng-toolbar__section tng-toolbar__section--left\">\n    <ng-content select=\"[toolbar-left]\"></ng-content>\n  </div>\n\n  <div class=\"tng-toolbar__section tng-toolbar__section--center\">\n    <ng-content select=\"[toolbar-center]\"></ng-content>\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"tng-toolbar__section tng-toolbar__section--right\">\n    <ng-content select=\"[toolbar-right]\"></ng-content>\n  </div>\n</div>\n", styles: [".tng-toolbar{display:block;width:100%;background-color:var(--tng-background);transition:box-shadow .3s cubic-bezier(.4,0,.2,1);padding-right:1rem}.tng-toolbar__container{display:flex;align-items:center;justify-content:space-between;padding:0 16px;min-height:64px;max-width:100%;gap:16px}@media(max-width:768px){.tng-toolbar__container{min-height:56px;padding:0 12px;gap:12px}}.tng-toolbar__section{display:flex;align-items:center;gap:12px;flex-shrink:0}.tng-toolbar__section--left{justify-content:flex-start}.tng-toolbar__section--center{justify-content:center;flex:1;overflow:hidden}.tng-toolbar__section--right{justify-content:flex-end}.tng-toolbar--fixed{position:fixed;z-index:1000}.tng-toolbar--absolute{position:absolute;z-index:1000}.tng-toolbar--relative{position:relative}.tng-toolbar--static{position:static}.tng-toolbar--sticky{position:sticky;top:0;z-index:1000}.tng-toolbar--top.tng-toolbar--fixed,.tng-toolbar--top.tng-toolbar--absolute{top:0;left:0;right:0}.tng-toolbar--bottom.tng-toolbar--fixed,.tng-toolbar--bottom.tng-toolbar--absolute{bottom:0;left:0;right:0}.tng-toolbar--elevated{box-shadow:0 2px 4px -1px #0000001a,0 4px 5px #00000012,0 1px 10px #0000000f}.tng-toolbar--primary{background:var(--tng-primary);color:var(--tng-primary-contrast)}.tng-toolbar--secondary{background:var(--tng-secondary);color:var(--tng-secondary-contrast)}.tng-toolbar--transparent{background:transparent;color:var(--tng-primary-contrast);box-shadow:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngToolbarComponent, decorators: [{
             type: Component,
@@ -438,8 +551,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         '[class.tng-toolbar--sticky]': 'positionType() === "sticky"',
                         '[class.tng-toolbar--primary]': 'color() === "primary"',
                         '[class.tng-toolbar--secondary]': 'color() === "secondary"',
+                        '[class.tng-toolbar--transparent]': 'color() === "transparent"',
                         '[class.tng-toolbar--elevated]': 'elevation()',
-                    }, template: "<div class=\"tng-toolbar__container\">\n  <div class=\"tng-toolbar__section tng-toolbar__section--left\">\n    <ng-content select=\"[toolbar-left]\"></ng-content>\n  </div>\n\n  <div class=\"tng-toolbar__section tng-toolbar__section--center\">\n    <ng-content select=\"[toolbar-center]\"></ng-content>\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"tng-toolbar__section tng-toolbar__section--right\">\n    <ng-content select=\"[toolbar-right]\"></ng-content>\n  </div>\n</div>\n", styles: [".tng-toolbar{display:block;width:100%;background-color:#fff;transition:box-shadow .3s cubic-bezier(.4,0,.2,1)}.tng-toolbar__container{display:flex;align-items:center;justify-content:space-between;padding:0 16px;min-height:64px;max-width:100%;gap:16px}@media(max-width:768px){.tng-toolbar__container{min-height:56px;padding:0 12px;gap:12px}}.tng-toolbar__section{display:flex;align-items:center;gap:12px;flex-shrink:0}.tng-toolbar__section--left{justify-content:flex-start}.tng-toolbar__section--center{justify-content:center;flex:1;overflow:hidden}.tng-toolbar__section--right{justify-content:flex-end}.tng-toolbar--fixed{position:fixed;z-index:1000}.tng-toolbar--absolute{position:absolute;z-index:1000}.tng-toolbar--relative{position:relative}.tng-toolbar--static{position:static}.tng-toolbar--sticky{position:sticky;top:0;z-index:1000}.tng-toolbar--top.tng-toolbar--fixed,.tng-toolbar--top.tng-toolbar--absolute{top:0;left:0;right:0}.tng-toolbar--bottom.tng-toolbar--fixed,.tng-toolbar--bottom.tng-toolbar--absolute{bottom:0;left:0;right:0}.tng-toolbar--elevated{box-shadow:0 2px 4px -1px #0000001a,0 4px 5px #00000012,0 1px 10px #0000000f}.tng-toolbar--primary{background:var(--tng-primary);color:var(--tng-primary-contrast)}.tng-toolbar--secondary{background:var(--tng-secondary);color:var(--tng-secondary-contrast)}\n"] }]
+                    }, template: "<div class=\"tng-toolbar__container\">\n  <div class=\"tng-toolbar__section tng-toolbar__section--left\">\n    <ng-content select=\"[toolbar-left]\"></ng-content>\n  </div>\n\n  <div class=\"tng-toolbar__section tng-toolbar__section--center\">\n    <ng-content select=\"[toolbar-center]\"></ng-content>\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"tng-toolbar__section tng-toolbar__section--right\">\n    <ng-content select=\"[toolbar-right]\"></ng-content>\n  </div>\n</div>\n", styles: [".tng-toolbar{display:block;width:100%;background-color:var(--tng-background);transition:box-shadow .3s cubic-bezier(.4,0,.2,1);padding-right:1rem}.tng-toolbar__container{display:flex;align-items:center;justify-content:space-between;padding:0 16px;min-height:64px;max-width:100%;gap:16px}@media(max-width:768px){.tng-toolbar__container{min-height:56px;padding:0 12px;gap:12px}}.tng-toolbar__section{display:flex;align-items:center;gap:12px;flex-shrink:0}.tng-toolbar__section--left{justify-content:flex-start}.tng-toolbar__section--center{justify-content:center;flex:1;overflow:hidden}.tng-toolbar__section--right{justify-content:flex-end}.tng-toolbar--fixed{position:fixed;z-index:1000}.tng-toolbar--absolute{position:absolute;z-index:1000}.tng-toolbar--relative{position:relative}.tng-toolbar--static{position:static}.tng-toolbar--sticky{position:sticky;top:0;z-index:1000}.tng-toolbar--top.tng-toolbar--fixed,.tng-toolbar--top.tng-toolbar--absolute{top:0;left:0;right:0}.tng-toolbar--bottom.tng-toolbar--fixed,.tng-toolbar--bottom.tng-toolbar--absolute{bottom:0;left:0;right:0}.tng-toolbar--elevated{box-shadow:0 2px 4px -1px #0000001a,0 4px 5px #00000012,0 1px 10px #0000000f}.tng-toolbar--primary{background:var(--tng-primary);color:var(--tng-primary-contrast)}.tng-toolbar--secondary{background:var(--tng-secondary);color:var(--tng-secondary-contrast)}.tng-toolbar--transparent{background:transparent;color:var(--tng-primary-contrast);box-shadow:none}\n"] }]
         }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], positionType: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionType", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], elevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevation", required: false }] }] } });
 
 class TngTabComponent {
@@ -768,6 +882,13 @@ class ThemeService {
             description: 'Dark mode gradients',
             primaryColor: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
             isDark: true
+        },
+        {
+            name: 'futuristic',
+            displayName: 'Futuristic',
+            description: 'Neon cyberpunk vibes',
+            primaryColor: '#00f2ff',
+            isDark: true
         }
     ];
     constructor() {
@@ -841,46 +962,26 @@ class TngTooltipComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TngTooltipComponent, isStandalone: true, selector: "tng-tooltip", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="tng-tooltip-container" [@tooltipAnimation]>
+    <div class="tng-tooltip-container">
       @if (isTemplate(content())) {
         <ng-container *ngTemplateOutlet="$any(content())"></ng-container>
       } @else {
         {{ content() }}
       }
     </div>
-  `, isInline: true, styles: [":host{display:block;pointer-events:none;z-index:10000;position:fixed}.tng-tooltip-container{background:#14141ee6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;padding:8px 12px;border-radius:8px;font-size:14px;font-family:Inter,sans-serif;box-shadow:0 4px 15px #0003;border:1px solid rgba(255,255,255,.1);max-width:250px;word-wrap:break-word;line-height:1.4}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
-            trigger('tooltipAnimation', [
-                transition(':enter', [
-                    style({ opacity: 0, transform: 'scale(0.9)' }),
-                    animate('150ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({ opacity: 1, transform: 'scale(1)' }))
-                ]),
-                transition(':leave', [
-                    animate('100ms ease-out', style({ opacity: 0, transform: 'scale(0.9)' }))
-                ])
-            ])
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;pointer-events:none;z-index:10000;position:fixed;animation:tooltipFadeIn .15s cubic-bezier(.25,.8,.25,1) forwards}.tng-tooltip-container{background:#14141ee6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;padding:8px 12px;border-radius:8px;font-size:14px;font-family:Inter,sans-serif;box-shadow:0 4px 15px #0003;border:1px solid rgba(255,255,255,.1);max-width:250px;word-wrap:break-word;line-height:1.4}@keyframes tooltipFadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngTooltipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tng-tooltip', standalone: true, imports: [CommonModule], template: `
-    <div class="tng-tooltip-container" [@tooltipAnimation]>
+    <div class="tng-tooltip-container">
       @if (isTemplate(content())) {
         <ng-container *ngTemplateOutlet="$any(content())"></ng-container>
       } @else {
         {{ content() }}
       }
     </div>
-  `, animations: [
-                        trigger('tooltipAnimation', [
-                            transition(':enter', [
-                                style({ opacity: 0, transform: 'scale(0.9)' }),
-                                animate('150ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({ opacity: 1, transform: 'scale(1)' }))
-                            ]),
-                            transition(':leave', [
-                                animate('100ms ease-out', style({ opacity: 0, transform: 'scale(0.9)' }))
-                            ])
-                        ])
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;pointer-events:none;z-index:10000;position:fixed}.tng-tooltip-container{background:#14141ee6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;padding:8px 12px;border-radius:8px;font-size:14px;font-family:Inter,sans-serif;box-shadow:0 4px 15px #0003;border:1px solid rgba(255,255,255,.1);max-width:250px;word-wrap:break-word;line-height:1.4}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;pointer-events:none;z-index:10000;position:fixed;animation:tooltipFadeIn .15s cubic-bezier(.25,.8,.25,1) forwards}.tng-tooltip-container{background:#14141ee6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;padding:8px 12px;border-radius:8px;font-size:14px;font-family:Inter,sans-serif;box-shadow:0 4px 15px #0003;border:1px solid rgba(255,255,255,.1);max-width:250px;word-wrap:break-word;line-height:1.4}@keyframes tooltipFadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}\n"] }]
         }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }] } });
 
 class TngTooltipDirective {
@@ -1028,37 +1129,15 @@ class TngExpansionPanelComponent {
         this.toggled.emit(newState);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TngExpansionPanelComponent, isStandalone: true, selector: "tng-expansion-panel", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggled: "toggled" }, host: { properties: { "class.tng-expansion-panel--expanded": "isExpanded()", "class.tng-expansion-panel--disabled": "disabled()" }, classAttribute: "tng-expansion-panel" }, ngImport: i0, template: "<div class=\"tng-expansion-panel__container\">\n  <div \n    class=\"tng-expansion-panel__header\" \n    (click)=\"toggle()\"\n    [class.tng-expansion-panel__header--disabled]=\"disabled()\"\n  >\n    <h3 class=\"tng-expansion-panel__title\">{{ title() }}</h3>\n    <span class=\"tng-expansion-panel__icon material-icons\">\n      expand_more\n    </span>\n  </div>\n\n  @if (isExpanded()) {\n    <div \n      class=\"tng-expansion-panel__content\"\n      @expandCollapse\n    >\n      <div class=\"tng-expansion-panel__body\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".tng-expansion-panel{display:block;margin-bottom:12px}.tng-expansion-panel__container{background-color:var(--tng-surface);border:1px solid var(--tng-border);border-radius:8px;overflow:hidden;transition:box-shadow .2s cubic-bezier(.4,0,.2,1)}.tng-expansion-panel__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:var(--tng-background);transition:background-color .2s ease,transform .1s ease}.tng-expansion-panel__header:hover:not(.tng-expansion-panel__header--disabled){background-color:color-mix(in srgb,var(--tng-background),var(--tng-text) 5%)}.tng-expansion-panel__header:active:not(.tng-expansion-panel__header--disabled){transform:scale(.99)}.tng-expansion-panel__header--disabled{cursor:not-allowed;opacity:.6}.tng-expansion-panel__title{margin:0;font-size:1rem;font-weight:500;color:var(--tng-text, #333);line-height:1.5}.tng-expansion-panel__icon{font-size:24px;color:var(--tng-text-secondary, #666);transition:transform .3s cubic-bezier(.4,0,.2,1)}.tng-expansion-panel__content{overflow:hidden}.tng-expansion-panel__body{padding:20px;color:var(--tng-text, #333);line-height:1.6}.tng-expansion-panel--expanded .tng-expansion-panel__container{box-shadow:0 2px 4px #0000001a}.tng-expansion-panel--expanded .tng-expansion-panel__icon{transform:rotate(180deg)}.tng-expansion-panel--disabled{opacity:.6;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], animations: [
-            trigger('expandCollapse', [
-                transition(':enter', [
-                    style({ height: '0', opacity: '0', overflow: 'hidden' }),
-                    animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ height: '*', opacity: '1' }))
-                ]),
-                transition(':leave', [
-                    style({ height: '*', opacity: '1', overflow: 'hidden' }),
-                    animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ height: '0', opacity: '0' }))
-                ])
-            ])
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TngExpansionPanelComponent, isStandalone: true, selector: "tng-expansion-panel", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggled: "toggled" }, host: { properties: { "class.tng-expansion-panel--expanded": "isExpanded()", "class.tng-expansion-panel--disabled": "disabled()" }, classAttribute: "tng-expansion-panel" }, ngImport: i0, template: "<div class=\"tng-expansion-panel__container\">\n  <div\n    class=\"tng-expansion-panel__header\"\n    (click)=\"toggle()\"\n    [class.tng-expansion-panel__header--disabled]=\"disabled()\"\n  >\n    <h3 class=\"tng-expansion-panel__title\">{{ title() }}</h3>\n    <span class=\"tng-expansion-panel__icon material-icons\"> expand_more </span>\n  </div>\n\n  @if (isExpanded()) {\n  <div class=\"tng-expansion-panel__content\">\n    <div class=\"tng-expansion-panel__body\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n  }\n</div>\n", styles: [".tng-expansion-panel{display:block;margin-bottom:12px}.tng-expansion-panel__container{background-color:var(--tng-surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--tng-border);border-radius:8px;overflow:hidden;transition:box-shadow .2s cubic-bezier(.4,0,.2,1)}.tng-expansion-panel__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:var(--tng-background);transition:background-color .2s ease,transform .1s ease}.tng-expansion-panel__header:hover:not(.tng-expansion-panel__header--disabled){background-color:color-mix(in srgb,var(--tng-background),var(--tng-text) 5%)}.tng-expansion-panel__header:active:not(.tng-expansion-panel__header--disabled){transform:scale(.99)}.tng-expansion-panel__header--disabled{cursor:not-allowed;opacity:.6}.tng-expansion-panel__title{margin:0;font-size:1rem;font-weight:500;color:var(--tng-text, #333);line-height:1.5}.tng-expansion-panel__icon{font-size:24px;color:var(--tng-text-secondary, #666);transition:transform .3s cubic-bezier(.4,0,.2,1)}.tng-expansion-panel__content{overflow:hidden;animation:expandPanel .3s cubic-bezier(.4,0,.2,1) forwards;transform-origin:top}.tng-expansion-panel__body{padding:20px;color:var(--tng-text, #333);line-height:1.6}@keyframes expandPanel{0%{opacity:0;max-height:0;transform:scaleY(.95)}to{opacity:1;max-height:1000px;transform:scaleY(1)}}.tng-expansion-panel--expanded .tng-expansion-panel__container{box-shadow:0 2px 4px #0000001a}.tng-expansion-panel--expanded .tng-expansion-panel__icon{transform:rotate(180deg)}.tng-expansion-panel--disabled{opacity:.6;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngExpansionPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tng-expansion-panel', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [
-                        trigger('expandCollapse', [
-                            transition(':enter', [
-                                style({ height: '0', opacity: '0', overflow: 'hidden' }),
-                                animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ height: '*', opacity: '1' }))
-                            ]),
-                            transition(':leave', [
-                                style({ height: '*', opacity: '1', overflow: 'hidden' }),
-                                animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ height: '0', opacity: '0' }))
-                            ])
-                        ])
-                    ], host: {
+            args: [{ selector: 'tng-expansion-panel', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'tng-expansion-panel',
                         '[class.tng-expansion-panel--expanded]': 'isExpanded()',
                         '[class.tng-expansion-panel--disabled]': 'disabled()'
-                    }, template: "<div class=\"tng-expansion-panel__container\">\n  <div \n    class=\"tng-expansion-panel__header\" \n    (click)=\"toggle()\"\n    [class.tng-expansion-panel__header--disabled]=\"disabled()\"\n  >\n    <h3 class=\"tng-expansion-panel__title\">{{ title() }}</h3>\n    <span class=\"tng-expansion-panel__icon material-icons\">\n      expand_more\n    </span>\n  </div>\n\n  @if (isExpanded()) {\n    <div \n      class=\"tng-expansion-panel__content\"\n      @expandCollapse\n    >\n      <div class=\"tng-expansion-panel__body\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".tng-expansion-panel{display:block;margin-bottom:12px}.tng-expansion-panel__container{background-color:var(--tng-surface);border:1px solid var(--tng-border);border-radius:8px;overflow:hidden;transition:box-shadow .2s cubic-bezier(.4,0,.2,1)}.tng-expansion-panel__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:var(--tng-background);transition:background-color .2s ease,transform .1s ease}.tng-expansion-panel__header:hover:not(.tng-expansion-panel__header--disabled){background-color:color-mix(in srgb,var(--tng-background),var(--tng-text) 5%)}.tng-expansion-panel__header:active:not(.tng-expansion-panel__header--disabled){transform:scale(.99)}.tng-expansion-panel__header--disabled{cursor:not-allowed;opacity:.6}.tng-expansion-panel__title{margin:0;font-size:1rem;font-weight:500;color:var(--tng-text, #333);line-height:1.5}.tng-expansion-panel__icon{font-size:24px;color:var(--tng-text-secondary, #666);transition:transform .3s cubic-bezier(.4,0,.2,1)}.tng-expansion-panel__content{overflow:hidden}.tng-expansion-panel__body{padding:20px;color:var(--tng-text, #333);line-height:1.6}.tng-expansion-panel--expanded .tng-expansion-panel__container{box-shadow:0 2px 4px #0000001a}.tng-expansion-panel--expanded .tng-expansion-panel__icon{transform:rotate(180deg)}.tng-expansion-panel--disabled{opacity:.6;pointer-events:none}\n"] }]
+                    }, template: "<div class=\"tng-expansion-panel__container\">\n  <div\n    class=\"tng-expansion-panel__header\"\n    (click)=\"toggle()\"\n    [class.tng-expansion-panel__header--disabled]=\"disabled()\"\n  >\n    <h3 class=\"tng-expansion-panel__title\">{{ title() }}</h3>\n    <span class=\"tng-expansion-panel__icon material-icons\"> expand_more </span>\n  </div>\n\n  @if (isExpanded()) {\n  <div class=\"tng-expansion-panel__content\">\n    <div class=\"tng-expansion-panel__body\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n  }\n</div>\n", styles: [".tng-expansion-panel{display:block;margin-bottom:12px}.tng-expansion-panel__container{background-color:var(--tng-surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--tng-border);border-radius:8px;overflow:hidden;transition:box-shadow .2s cubic-bezier(.4,0,.2,1)}.tng-expansion-panel__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:var(--tng-background);transition:background-color .2s ease,transform .1s ease}.tng-expansion-panel__header:hover:not(.tng-expansion-panel__header--disabled){background-color:color-mix(in srgb,var(--tng-background),var(--tng-text) 5%)}.tng-expansion-panel__header:active:not(.tng-expansion-panel__header--disabled){transform:scale(.99)}.tng-expansion-panel__header--disabled{cursor:not-allowed;opacity:.6}.tng-expansion-panel__title{margin:0;font-size:1rem;font-weight:500;color:var(--tng-text, #333);line-height:1.5}.tng-expansion-panel__icon{font-size:24px;color:var(--tng-text-secondary, #666);transition:transform .3s cubic-bezier(.4,0,.2,1)}.tng-expansion-panel__content{overflow:hidden;animation:expandPanel .3s cubic-bezier(.4,0,.2,1) forwards;transform-origin:top}.tng-expansion-panel__body{padding:20px;color:var(--tng-text, #333);line-height:1.6}@keyframes expandPanel{0%{opacity:0;max-height:0;transform:scaleY(.95)}to{opacity:1;max-height:1000px;transform:scaleY(1)}}.tng-expansion-panel--expanded .tng-expansion-panel__container{box-shadow:0 2px 4px #0000001a}.tng-expansion-panel--expanded .tng-expansion-panel__icon{transform:rotate(180deg)}.tng-expansion-panel--disabled{opacity:.6;pointer-events:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], toggled: [{ type: i0.Output, args: ["toggled"] }] } });
 
 class TngMenuComponent {
@@ -1073,7 +1152,7 @@ class TngMenuComponent {
          [class.tng-menu--comfortable]="density() === 'comfortable'">
       <ng-content></ng-content>
     </nav>
-  `, isInline: true, styles: [".tng-menu{display:flex;flex-direction:column;width:100%;padding:8px;background:var(--tng-surface, white)}.tng-menu--horizontal{flex-direction:row;padding:0}.tng-menu--vertical{flex-direction:column}.tng-menu--compact ::ng-deep .tng-menu-item__link{padding-top:8px;padding-bottom:8px;font-size:13px}.tng-menu--comfortable ::ng-deep .tng-menu-item__link{padding-top:12px;padding-bottom:12px;font-size:14px}.tng-menu-group__header{padding:16px 16px 8px;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--tng-text-secondary, #666)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+  `, isInline: true, styles: [".tng-menu{display:flex;flex-direction:column;width:100%;padding:8px;background:var(--tng-surface, white);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.tng-menu--horizontal{flex-direction:row;padding:0}.tng-menu--vertical{flex-direction:column}.tng-menu--compact ::ng-deep .tng-menu-item__link{padding-top:8px;padding-bottom:8px;font-size:13px}.tng-menu--comfortable ::ng-deep .tng-menu-item__link{padding-top:12px;padding-bottom:12px;font-size:14px}.tng-menu-group__header{padding:16px 16px 8px;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--tng-text-secondary, #666)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngMenuComponent, decorators: [{
             type: Component,
@@ -1085,7 +1164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
          [class.tng-menu--comfortable]="density() === 'comfortable'">
       <ng-content></ng-content>
     </nav>
-  `, styles: [".tng-menu{display:flex;flex-direction:column;width:100%;padding:8px;background:var(--tng-surface, white)}.tng-menu--horizontal{flex-direction:row;padding:0}.tng-menu--vertical{flex-direction:column}.tng-menu--compact ::ng-deep .tng-menu-item__link{padding-top:8px;padding-bottom:8px;font-size:13px}.tng-menu--comfortable ::ng-deep .tng-menu-item__link{padding-top:12px;padding-bottom:12px;font-size:14px}.tng-menu-group__header{padding:16px 16px 8px;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--tng-text-secondary, #666)}\n"] }]
+  `, styles: [".tng-menu{display:flex;flex-direction:column;width:100%;padding:8px;background:var(--tng-surface, white);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.tng-menu--horizontal{flex-direction:row;padding:0}.tng-menu--vertical{flex-direction:column}.tng-menu--compact ::ng-deep .tng-menu-item__link{padding-top:8px;padding-bottom:8px;font-size:13px}.tng-menu--comfortable ::ng-deep .tng-menu-item__link{padding-top:12px;padding-bottom:12px;font-size:14px}.tng-menu-group__header{padding:16px 16px 8px;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--tng-text-secondary, #666)}\n"] }]
         }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }] } });
 
 class TngMenuItemComponent {
@@ -1138,7 +1217,7 @@ class TngMenuItemComponent {
            (click)="handleClick($event)">
           @if (icon()) {
             <span class="tng-menu-item__icon">
-              <span class="material-icons">{{ icon() }}</span>
+              <i [class]="icon()"></i>
             </span>
           }
           <span class="tng-menu-item__label">
@@ -1147,7 +1226,7 @@ class TngMenuItemComponent {
           </span>
           @if (hasChildren()) {
             <span class="tng-menu-item__chevron">
-              <span class="material-icons">expand_more</span>
+              <i class="fa fa-chevron-down"></i>
             </span>
           }
         </a>
@@ -1159,7 +1238,7 @@ class TngMenuItemComponent {
                 (click)="handleClick($event)">
           @if (icon()) {
             <span class="tng-menu-item__icon">
-              <span class="material-icons">{{ icon() }}</span>
+              <i [class]="icon()"></i>
             </span>
           }
           <span class="tng-menu-item__label">
@@ -1168,7 +1247,7 @@ class TngMenuItemComponent {
           </span>
           @if (hasChildren()) {
             <span class="tng-menu-item__chevron">
-              <span class="material-icons">expand_more</span>
+              <i class="fa fa-chevron-down"></i>
             </span>
           }
         </button>
@@ -1201,7 +1280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
            (click)="handleClick($event)">
           @if (icon()) {
             <span class="tng-menu-item__icon">
-              <span class="material-icons">{{ icon() }}</span>
+              <i [class]="icon()"></i>
             </span>
           }
           <span class="tng-menu-item__label">
@@ -1210,7 +1289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
           </span>
           @if (hasChildren()) {
             <span class="tng-menu-item__chevron">
-              <span class="material-icons">expand_more</span>
+              <i class="fa fa-chevron-down"></i>
             </span>
           }
         </a>
@@ -1222,7 +1301,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                 (click)="handleClick($event)">
           @if (icon()) {
             <span class="tng-menu-item__icon">
-              <span class="material-icons">{{ icon() }}</span>
+              <i [class]="icon()"></i>
             </span>
           }
           <span class="tng-menu-item__label">
@@ -1231,7 +1310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
           </span>
           @if (hasChildren()) {
             <span class="tng-menu-item__chevron">
-              <span class="material-icons">expand_more</span>
+              <i class="fa fa-chevron-down"></i>
             </span>
           }
         </button>
@@ -1274,6 +1353,545 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
   `, styles: [".tng-menu-group{display:block}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
+/**
+ * TngSidebar - Componente moderno de barra lateral
+ *
+ * Características:
+ * - Totalmente basado en Signals
+ * - Animaciones CSS puras
+ * - Posicionamiento configurable (izquierda/derecha)
+ * - Proyección de contenido
+ * - Responsive y accesible
+ */
+class TngSidebarComponent {
+    /**
+     * Controla si el sidebar está abierto o cerrado
+     */
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    /**
+     * Posición del sidebar: 'left' o 'right'
+     */
+    position = input('left', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    /**
+     * Ancho del sidebar en píxeles
+     */
+    width = input(280, ...(ngDevMode ? [{ debugName: "width" }] : []));
+    /**
+     * Muestra un overlay de fondo cuando está abierto
+     */
+    showOverlay = input(true, ...(ngDevMode ? [{ debugName: "showOverlay" }] : []));
+    /**
+     * Evento emitido cuando el sidebar se cierra
+     */
+    closed = output();
+    /**
+     * Evento emitido cuando el sidebar se abre
+     */
+    opened = output();
+    /**
+     * Alterna el estado del sidebar
+     */
+    toggle() {
+        this.isOpen.set(!this.isOpen());
+        if (this.isOpen()) {
+            this.opened.emit();
+        }
+        else {
+            this.closed.emit();
+        }
+    }
+    /**
+     * Abre el sidebar
+     */
+    open() {
+        if (!this.isOpen()) {
+            this.isOpen.set(true);
+            this.opened.emit();
+        }
+    }
+    /**
+     * Cierra el sidebar
+     */
+    close() {
+        if (this.isOpen()) {
+            this.isOpen.set(false);
+            this.closed.emit();
+        }
+    }
+    /**
+     * Maneja el clic en el overlay para cerrar el sidebar
+     */
+    handleOverlayClick() {
+        this.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TngSidebarComponent, isStandalone: true, selector: "tng-sidebar", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, showOverlay: { classPropertyName: "showOverlay", publicName: "showOverlay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", opened: "opened" }, ngImport: i0, template: "<!-- Overlay de fondo -->\n@if (showOverlay() && isOpen()) {\n  <div \n    class=\"tng-sidebar-overlay\"\n    (click)=\"handleOverlayClick()\"\n  ></div>\n}\n\n<!-- Contenedor del Sidebar -->\n<aside \n  class=\"tng-sidebar\"\n  [class.tng-sidebar--open]=\"isOpen()\"\n  [class.tng-sidebar--left]=\"position() === 'left'\"\n  [class.tng-sidebar--right]=\"position() === 'right'\"\n  [style.width.px]=\"width()\"\n  role=\"complementary\"\n  [attr.aria-hidden]=\"!isOpen()\"\n>\n  <div class=\"tng-sidebar__content\">\n    <ng-content></ng-content>\n  </div>\n</aside>\n", styles: [".tng-sidebar-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:998;cursor:pointer;opacity:0;animation:fadeIn .3s cubic-bezier(.4,0,.2,1) forwards}.tng-sidebar{position:fixed;top:0;height:100%;background:var(--tng-surface);box-shadow:var(--tng-shadow-md);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:999;overflow-y:auto;overflow-x:hidden;padding:20px;transition:transform .3s cubic-bezier(.4,0,.2,1)}.tng-sidebar:not(.tng-sidebar--open).tng-sidebar--left{transform:translate(-100%)}.tng-sidebar:not(.tng-sidebar--open).tng-sidebar--right{transform:translate(100%)}.tng-sidebar.tng-sidebar--open{transform:translate(0)}.tng-sidebar.tng-sidebar--left{left:0}.tng-sidebar.tng-sidebar--right{right:0}.tng-sidebar::-webkit-scrollbar{width:6px}.tng-sidebar::-webkit-scrollbar-track{background:#0000000d}.tng-sidebar::-webkit-scrollbar-thumb{background:#0003;border-radius:3px}.tng-sidebar::-webkit-scrollbar-thumb:hover{background:#0000004d}.tng-sidebar__content{padding:1.5rem;min-height:100%}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media(max-width:768px){.tng-sidebar{max-width:85vw}.tng-sidebar__content{padding:1rem}}@media(prefers-color-scheme:dark){.tng-sidebar{background:#1e1e1e;color:#fff;box-shadow:0 4px 20px #00000080}.tng-sidebar-overlay{background:#000000b3}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngSidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-sidebar', standalone: true, imports: [CommonModule], template: "<!-- Overlay de fondo -->\n@if (showOverlay() && isOpen()) {\n  <div \n    class=\"tng-sidebar-overlay\"\n    (click)=\"handleOverlayClick()\"\n  ></div>\n}\n\n<!-- Contenedor del Sidebar -->\n<aside \n  class=\"tng-sidebar\"\n  [class.tng-sidebar--open]=\"isOpen()\"\n  [class.tng-sidebar--left]=\"position() === 'left'\"\n  [class.tng-sidebar--right]=\"position() === 'right'\"\n  [style.width.px]=\"width()\"\n  role=\"complementary\"\n  [attr.aria-hidden]=\"!isOpen()\"\n>\n  <div class=\"tng-sidebar__content\">\n    <ng-content></ng-content>\n  </div>\n</aside>\n", styles: [".tng-sidebar-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:998;cursor:pointer;opacity:0;animation:fadeIn .3s cubic-bezier(.4,0,.2,1) forwards}.tng-sidebar{position:fixed;top:0;height:100%;background:var(--tng-surface);box-shadow:var(--tng-shadow-md);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:999;overflow-y:auto;overflow-x:hidden;padding:20px;transition:transform .3s cubic-bezier(.4,0,.2,1)}.tng-sidebar:not(.tng-sidebar--open).tng-sidebar--left{transform:translate(-100%)}.tng-sidebar:not(.tng-sidebar--open).tng-sidebar--right{transform:translate(100%)}.tng-sidebar.tng-sidebar--open{transform:translate(0)}.tng-sidebar.tng-sidebar--left{left:0}.tng-sidebar.tng-sidebar--right{right:0}.tng-sidebar::-webkit-scrollbar{width:6px}.tng-sidebar::-webkit-scrollbar-track{background:#0000000d}.tng-sidebar::-webkit-scrollbar-thumb{background:#0003;border-radius:3px}.tng-sidebar::-webkit-scrollbar-thumb:hover{background:#0000004d}.tng-sidebar__content{padding:1.5rem;min-height:100%}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media(max-width:768px){.tng-sidebar{max-width:85vw}.tng-sidebar__content{padding:1rem}}@media(prefers-color-scheme:dark){.tng-sidebar{background:#1e1e1e;color:#fff;box-shadow:0 4px 20px #00000080}.tng-sidebar-overlay{background:#000000b3}}\n"] }]
+        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], showOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOverlay", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], opened: [{ type: i0.Output, args: ["opened"] }] } });
+
+class TngSelectPanelComponent {
+    // Inputs
+    options = signal([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    selectedIndices = signal([], ...(ngDevMode ? [{ debugName: "selectedIndices" }] : []));
+    enableMulti = signal(false, ...(ngDevMode ? [{ debugName: "enableMulti" }] : []));
+    enableSearch = signal(false, ...(ngDevMode ? [{ debugName: "enableSearch" }] : []));
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
+    // Outputs
+    optionSelected = output();
+    searchQueryChanged = output();
+    closeRequested = output();
+    onSearchInput(event) {
+        const input = event.target;
+        this.searchQuery.set(input.value);
+        this.searchQueryChanged.emit(input.value);
+    }
+    isSelected(index) {
+        return this.selectedIndices().includes(index);
+    }
+    onOptionClick(index, option) {
+        if (option.disabled) {
+            return;
+        }
+        this.optionSelected.emit(index);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngSelectPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TngSelectPanelComponent, isStandalone: true, selector: "tng-select-panel", outputs: { optionSelected: "optionSelected", searchQueryChanged: "searchQueryChanged", closeRequested: "closeRequested" }, ngImport: i0, template: "<div class=\"tng-select-panel\" \n     role=\"listbox\"\n     [attr.aria-multiselectable]=\"enableMulti()\">\n  \n  @if (enableSearch()) {\n    <div class=\"tng-select-search\">\n      <input \n        type=\"text\"\n        class=\"tng-select-search-input\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        placeholder=\"Search...\"\n        aria-label=\"Search options\"\n        (click)=\"$event.stopPropagation()\"\n      />\n      <i class=\"fa fa-search tng-select-search-icon\"></i>\n    </div>\n  }\n  \n  <div class=\"tng-select-options\" role=\"list\">\n    @if (options().length === 0) {\n      <div class=\"tng-select-no-results\">\n        No options found\n      </div>\n    }\n    \n    @for (option of options(); track $index) {\n      <div \n        class=\"tng-select-option\"\n        [class.selected]=\"isSelected($index)\"\n        [class.disabled]=\"option.disabled\"\n        role=\"option\"\n        [attr.aria-selected]=\"isSelected($index)\"\n        [attr.aria-disabled]=\"option.disabled\"\n        (click)=\"onOptionClick($index, option)\"\n      >\n        @if (enableMulti()) {\n          <input \n            type=\"checkbox\"\n            class=\"tng-select-checkbox\"\n            [checked]=\"isSelected($index)\"\n            [disabled]=\"option.disabled\"\n            tabindex=\"-1\"\n          />\n        }\n        <span class=\"tng-select-option-label\">{{ option.label }}</span>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.tng-select-panel{background:var(--tng-surface, #ffffff);border:1px solid var(--tng-border, #e0e0e0);border-radius:var(--tng-border-radius, 4px);box-shadow:var(--tng-shadow-md, 0 4px 8px rgba(0, 0, 0, .12));overflow:hidden;animation:slideDown .2s cubic-bezier(.4,0,.2,1)}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.tng-select-search{position:relative;padding:.75rem;border-bottom:1px solid var(--tng-border, #e0e0e0)}.tng-select-search-input{width:100%;padding:.5rem 2rem .5rem .75rem;border:1px solid var(--tng-border, #e0e0e0);border-radius:var(--tng-border-radius, 4px);font-size:.9rem;color:var(--tng-text, #333);outline:none;transition:border-color .2s ease}.tng-select-search-input:focus{border-color:var(--tng-primary, #00f2ff)}.tng-select-search-icon{position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);color:var(--tng-text-secondary, #757575);pointer-events:none}.tng-select-options{max-height:300px;overflow-y:auto;padding:.25rem 0}.tng-select-options::-webkit-scrollbar{width:8px}.tng-select-options::-webkit-scrollbar-track{background:var(--tng-background, #fafafa)}.tng-select-options::-webkit-scrollbar-thumb{background:var(--tng-border, #e0e0e0);border-radius:4px}.tng-select-options::-webkit-scrollbar-thumb:hover{background:var(--tng-text-secondary, #757575)}.tng-select-option{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;cursor:pointer;transition:background-color .15s ease;-webkit-user-select:none;user-select:none}.tng-select-option:hover:not(.disabled){background:var(--tng-background, #fafafa)}.tng-select-option.selected{background:#00f2ff1a;color:var(--tng-primary, #00f2ff)}.tng-select-option.disabled{opacity:.5;cursor:not-allowed}.tng-select-checkbox{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:18px;height:18px;min-width:18px;min-height:18px;border:2px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background-color:var(--tng-surface, #ffffff);cursor:pointer;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1);margin:0;pointer-events:none}.tng-select-checkbox:checked{background-color:var(--tng-primary, #00f2ff);border-color:var(--tng-primary, #00f2ff)}.tng-select-checkbox:checked:before{content:\"\";position:absolute;width:4px;height:8px;border:solid var(--tng-primary-contrast, #000000);border-width:0 2px 2px 0;transform:rotate(45deg);top:2px;left:5px}.tng-select-checkbox:disabled{opacity:.5;cursor:not-allowed}.tng-select-option-label{flex:1;font-size:.95rem}.tng-select-no-results{padding:1.5rem 1rem;text-align:center;color:var(--tng-text-secondary, #757575);font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngSelectPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-select-panel', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tng-select-panel\" \n     role=\"listbox\"\n     [attr.aria-multiselectable]=\"enableMulti()\">\n  \n  @if (enableSearch()) {\n    <div class=\"tng-select-search\">\n      <input \n        type=\"text\"\n        class=\"tng-select-search-input\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        placeholder=\"Search...\"\n        aria-label=\"Search options\"\n        (click)=\"$event.stopPropagation()\"\n      />\n      <i class=\"fa fa-search tng-select-search-icon\"></i>\n    </div>\n  }\n  \n  <div class=\"tng-select-options\" role=\"list\">\n    @if (options().length === 0) {\n      <div class=\"tng-select-no-results\">\n        No options found\n      </div>\n    }\n    \n    @for (option of options(); track $index) {\n      <div \n        class=\"tng-select-option\"\n        [class.selected]=\"isSelected($index)\"\n        [class.disabled]=\"option.disabled\"\n        role=\"option\"\n        [attr.aria-selected]=\"isSelected($index)\"\n        [attr.aria-disabled]=\"option.disabled\"\n        (click)=\"onOptionClick($index, option)\"\n      >\n        @if (enableMulti()) {\n          <input \n            type=\"checkbox\"\n            class=\"tng-select-checkbox\"\n            [checked]=\"isSelected($index)\"\n            [disabled]=\"option.disabled\"\n            tabindex=\"-1\"\n          />\n        }\n        <span class=\"tng-select-option-label\">{{ option.label }}</span>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.tng-select-panel{background:var(--tng-surface, #ffffff);border:1px solid var(--tng-border, #e0e0e0);border-radius:var(--tng-border-radius, 4px);box-shadow:var(--tng-shadow-md, 0 4px 8px rgba(0, 0, 0, .12));overflow:hidden;animation:slideDown .2s cubic-bezier(.4,0,.2,1)}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.tng-select-search{position:relative;padding:.75rem;border-bottom:1px solid var(--tng-border, #e0e0e0)}.tng-select-search-input{width:100%;padding:.5rem 2rem .5rem .75rem;border:1px solid var(--tng-border, #e0e0e0);border-radius:var(--tng-border-radius, 4px);font-size:.9rem;color:var(--tng-text, #333);outline:none;transition:border-color .2s ease}.tng-select-search-input:focus{border-color:var(--tng-primary, #00f2ff)}.tng-select-search-icon{position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);color:var(--tng-text-secondary, #757575);pointer-events:none}.tng-select-options{max-height:300px;overflow-y:auto;padding:.25rem 0}.tng-select-options::-webkit-scrollbar{width:8px}.tng-select-options::-webkit-scrollbar-track{background:var(--tng-background, #fafafa)}.tng-select-options::-webkit-scrollbar-thumb{background:var(--tng-border, #e0e0e0);border-radius:4px}.tng-select-options::-webkit-scrollbar-thumb:hover{background:var(--tng-text-secondary, #757575)}.tng-select-option{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;cursor:pointer;transition:background-color .15s ease;-webkit-user-select:none;user-select:none}.tng-select-option:hover:not(.disabled){background:var(--tng-background, #fafafa)}.tng-select-option.selected{background:#00f2ff1a;color:var(--tng-primary, #00f2ff)}.tng-select-option.disabled{opacity:.5;cursor:not-allowed}.tng-select-checkbox{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:18px;height:18px;min-width:18px;min-height:18px;border:2px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background-color:var(--tng-surface, #ffffff);cursor:pointer;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1);margin:0;pointer-events:none}.tng-select-checkbox:checked{background-color:var(--tng-primary, #00f2ff);border-color:var(--tng-primary, #00f2ff)}.tng-select-checkbox:checked:before{content:\"\";position:absolute;width:4px;height:8px;border:solid var(--tng-primary-contrast, #000000);border-width:0 2px 2px 0;transform:rotate(45deg);top:2px;left:5px}.tng-select-checkbox:disabled{opacity:.5;cursor:not-allowed}.tng-select-option-label{flex:1;font-size:.95rem}.tng-select-no-results{padding:1.5rem 1rem;text-align:center;color:var(--tng-text-secondary, #757575);font-size:.9rem}\n"] }]
+        }], propDecorators: { optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], searchQueryChanged: [{ type: i0.Output, args: ["searchQueryChanged"] }], closeRequested: [{ type: i0.Output, args: ["closeRequested"] }] } });
+
+class TngSelectDirective {
+    el = inject((ElementRef));
+    viewContainerRef = inject(ViewContainerRef);
+    ngControl = inject(NgControl, { optional: true, self: true });
+    // Inputs
+    enableMulti = input(false, ...(ngDevMode ? [{ debugName: "enableMulti" }] : []));
+    // Support native multiple attribute
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    enableSearch = input(false, ...(ngDevMode ? [{ debugName: "enableSearch" }] : []));
+    placeholder = input('Select an option', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    customTrigger = input(false, ...(ngDevMode ? [{ debugName: "customTrigger" }] : []));
+    triggerRef = input(undefined, ...(ngDevMode ? [{ debugName: "triggerRef" }] : []));
+    // Model for two-way binding
+    selectedValues = model([], ...(ngDevMode ? [{ debugName: "selectedValues" }] : []));
+    // State signals
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
+    _options = signal([], ...(ngDevMode ? [{ debugName: "_options" }] : []));
+    _selectedIndices = signal([], ...(ngDevMode ? [{ debugName: "_selectedIndices" }] : []));
+    // Component reference for the panel
+    panelRef = null;
+    // Generated trigger element
+    triggerEl = null;
+    // Computed
+    isMulti = computed(() => this.enableMulti() || this.multiple(), ...(ngDevMode ? [{ debugName: "isMulti" }] : []));
+    options = computed(() => this._options(), ...(ngDevMode ? [{ debugName: "options" }] : []));
+    filteredOptions = computed(() => {
+        const query = this.searchQuery().toLowerCase();
+        const opts = this._options();
+        if (!query || !this.enableSearch()) {
+            return opts;
+        }
+        return opts.filter(opt => opt.label.toLowerCase().includes(query));
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
+    selectedOptions = computed(() => {
+        const indices = this._selectedIndices();
+        const opts = this._options();
+        return indices.map(idx => opts[idx]).filter(Boolean);
+    }, ...(ngDevMode ? [{ debugName: "selectedOptions" }] : []));
+    displayText = computed(() => {
+        const selected = this.selectedOptions();
+        if (selected.length === 0) {
+            return this.placeholder();
+        }
+        return selected.map(opt => opt.label).join(', ');
+    }, ...(ngDevMode ? [{ debugName: "displayText" }] : []));
+    constructor() {
+        // Sync selected values with model
+        effect(() => {
+            const selected = this.selectedOptions();
+            this.selectedValues.set(selected.map(opt => opt.value));
+        });
+        // Update form control value
+        effect(() => {
+            if (this.ngControl?.control) {
+                const values = this.selectedValues();
+                const newValue = this.isMulti() ? values : (values[0] ?? null);
+                this.ngControl.control.setValue(newValue, { emitEvent: false });
+            }
+        });
+        // Update generated trigger text
+        effect(() => {
+            if (this.triggerEl) {
+                const textSpan = this.triggerEl.querySelector('.tng-select-trigger-text');
+                if (textSpan) {
+                    textSpan.textContent = this.displayText();
+                }
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.loadOptionsFromSelect();
+        this.loadInitialSelection();
+        // Hide the native select visually but keep it in the DOM for forms
+        this.el.nativeElement.style.position = 'absolute';
+        this.el.nativeElement.style.opacity = '0';
+        this.el.nativeElement.style.pointerEvents = 'none';
+        this.el.nativeElement.style.height = '0';
+        this.el.nativeElement.style.width = '0';
+        if (!this.customTrigger()) {
+            this.createTrigger();
+        }
+    }
+    ngOnDestroy() {
+        this.closePanel();
+        if (this.triggerEl) {
+            this.triggerEl.remove();
+        }
+    }
+    onClick(event) {
+        // If we have a generated trigger, the click is handled there.
+        // If we have a custom trigger (parent component), it handles the click.
+        // But if the user somehow clicks the hidden select (label for?), we should toggle.
+        event.preventDefault();
+        event.stopPropagation();
+        this.togglePanel();
+    }
+    onKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.togglePanel();
+        }
+        else if (event.key === 'Escape') {
+            this.closePanel();
+        }
+    }
+    createTrigger() {
+        const trigger = document.createElement('div');
+        trigger.className = 'tng-select-trigger';
+        trigger.style.display = 'flex';
+        trigger.style.alignItems = 'center';
+        trigger.style.justifyContent = 'space-between';
+        trigger.style.padding = '0.75rem 1rem';
+        trigger.style.border = '1px solid #ccc';
+        trigger.style.borderRadius = '4px';
+        trigger.style.background = '#fff';
+        trigger.style.cursor = 'pointer';
+        trigger.style.minHeight = '48px';
+        trigger.style.boxSizing = 'border-box';
+        const text = document.createElement('span');
+        text.className = 'tng-select-trigger-text';
+        text.textContent = this.displayText();
+        text.style.flex = '1';
+        text.style.overflow = 'hidden';
+        text.style.textOverflow = 'ellipsis';
+        text.style.whiteSpace = 'nowrap';
+        const arrow = document.createElement('span');
+        arrow.innerHTML = '&#9662;'; // Down arrow
+        arrow.style.marginLeft = '0.5rem';
+        trigger.appendChild(text);
+        trigger.appendChild(arrow);
+        trigger.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.togglePanel();
+        });
+        // Insert after select
+        const parent = this.el.nativeElement.parentNode;
+        if (parent) {
+            parent.insertBefore(trigger, this.el.nativeElement.nextSibling);
+        }
+        this.triggerEl = trigger;
+    }
+    loadOptionsFromSelect() {
+        const selectEl = this.el.nativeElement;
+        const options = [];
+        for (let i = 0; i < selectEl.options.length; i++) {
+            const option = selectEl.options[i];
+            options.push({
+                value: option.value,
+                label: option.text,
+                disabled: option.disabled
+            });
+        }
+        this._options.set(options);
+    }
+    loadInitialSelection() {
+        const selectEl = this.el.nativeElement;
+        const selectedIndices = [];
+        if (this.isMulti()) {
+            for (let i = 0; i < selectEl.options.length; i++) {
+                if (selectEl.options[i].selected) {
+                    selectedIndices.push(i);
+                }
+            }
+        }
+        else {
+            if (selectEl.selectedIndex >= 0) {
+                selectedIndices.push(selectEl.selectedIndex);
+            }
+        }
+        this._selectedIndices.set(selectedIndices);
+    }
+    togglePanel() {
+        if (this.isOpen()) {
+            this.closePanel();
+        }
+        else {
+            this.openPanel();
+        }
+    }
+    openPanel() {
+        if (this.panelRef) {
+            return;
+        }
+        this.isOpen.set(true);
+        // Create the panel component
+        this.panelRef = this.viewContainerRef.createComponent(TngSelectPanelComponent);
+        // Configure the panel
+        this.panelRef.instance.options.set(this.filteredOptions());
+        this.panelRef.instance.selectedIndices.set(this._selectedIndices());
+        this.panelRef.instance.enableMulti.set(this.isMulti());
+        this.panelRef.instance.enableSearch.set(this.enableSearch());
+        this.panelRef.instance.searchQuery.set(this.searchQuery());
+        // Position the panel
+        this.positionPanel();
+        // Listen to panel events
+        const sub1 = this.panelRef.instance.optionSelected.subscribe((index) => {
+            this.onOptionSelected(index);
+        });
+        const sub2 = this.panelRef.instance.searchQueryChanged.subscribe((query) => {
+            this.searchQuery.set(query);
+            // Update filtered options in the panel
+            this.panelRef.instance.options.set(this.filteredOptions());
+        });
+        const sub3 = this.panelRef.instance.closeRequested.subscribe(() => {
+            this.closePanel();
+        });
+        // Store subscriptions for cleanup
+        this.panelRef.instance._subscriptions = [sub1, sub2, sub3];
+        // Add click outside listener
+        setTimeout(() => {
+            document.addEventListener('click', this.onDocumentClick);
+        }, 0);
+    }
+    closePanel() {
+        if (!this.panelRef) {
+            return;
+        }
+        this.isOpen.set(false);
+        // Cleanup subscriptions
+        const subs = this.panelRef.instance._subscriptions || [];
+        subs.forEach((sub) => sub.unsubscribe());
+        // Destroy the panel
+        this.panelRef.destroy();
+        this.panelRef = null;
+        // Remove click outside listener
+        document.removeEventListener('click', this.onDocumentClick);
+        // Reset search
+        this.searchQuery.set('');
+    }
+    positionPanel() {
+        if (!this.panelRef) {
+            return;
+        }
+        // Use provided trigger ref, or generated trigger, or fallback to select element
+        const anchor = this.triggerRef() || this.triggerEl || this.el.nativeElement;
+        const panelEl = this.panelRef.location.nativeElement;
+        // Calculate position relative to offset parent to support scrolling
+        const offsetParent = anchor.offsetParent || document.body;
+        const anchorRect = anchor.getBoundingClientRect();
+        const parentRect = offsetParent.getBoundingClientRect();
+        const top = anchorRect.bottom - parentRect.top;
+        const left = anchorRect.left - parentRect.left;
+        panelEl.style.position = 'absolute';
+        panelEl.style.top = `${top + 4}px`;
+        panelEl.style.left = `${left}px`;
+        panelEl.style.width = `${anchorRect.width}px`;
+        panelEl.style.zIndex = '1000';
+    }
+    onOptionSelected(index) {
+        const currentIndices = [...this._selectedIndices()];
+        if (this.isMulti()) {
+            // Toggle selection in multi mode
+            const idx = currentIndices.indexOf(index);
+            if (idx >= 0) {
+                currentIndices.splice(idx, 1);
+            }
+            else {
+                currentIndices.push(index);
+            }
+            this._selectedIndices.set(currentIndices);
+            // Update panel selection
+            if (this.panelRef) {
+                this.panelRef.instance.selectedIndices.set(currentIndices);
+            }
+        }
+        else {
+            // Single selection mode
+            this._selectedIndices.set([index]);
+            this.closePanel();
+        }
+        // Update native select
+        this.updateNativeSelect();
+    }
+    updateNativeSelect() {
+        const selectEl = this.el.nativeElement;
+        const selectedIndices = this._selectedIndices();
+        // Clear all selections
+        for (let i = 0; i < selectEl.options.length; i++) {
+            selectEl.options[i].selected = false;
+        }
+        // Set new selections
+        selectedIndices.forEach(idx => {
+            if (selectEl.options[idx]) {
+                selectEl.options[idx].selected = true;
+            }
+        });
+        // Trigger change event
+        selectEl.dispatchEvent(new Event('change', { bubbles: true }));
+        // Also trigger input event for some frameworks
+        selectEl.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+    onDocumentClick = (event) => {
+        const target = event.target;
+        const selectEl = this.el.nativeElement;
+        const panelEl = this.panelRef?.location.nativeElement;
+        const triggerEl = this.triggerEl;
+        const triggerRef = this.triggerRef();
+        if (!selectEl.contains(target) &&
+            !panelEl?.contains(target) &&
+            !triggerEl?.contains(target) &&
+            !triggerRef?.contains(target)) {
+            this.closePanel();
+        }
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0", type: TngSelectDirective, isStandalone: true, selector: "select[tngSelect]", inputs: { enableMulti: { classPropertyName: "enableMulti", publicName: "enableMulti", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, customTrigger: { classPropertyName: "customTrigger", publicName: "customTrigger", isSignal: true, isRequired: false, transformFunction: null }, triggerRef: { classPropertyName: "triggerRef", publicName: "triggerRef", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedValues: "selectedValuesChange" }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)" }, properties: { "class.tng-select": "true", "class.tng-select-multi": "isMulti()", "class.tng-select-search": "enableSearch()", "class.tng-select-open": "isOpen()", "attr.aria-expanded": "isOpen()", "attr.aria-haspopup": "\"listbox\"", "attr.aria-multiselectable": "isMulti()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngSelectDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'select[tngSelect]',
+                    standalone: true,
+                    host: {
+                        '[class.tng-select]': 'true',
+                        '[class.tng-select-multi]': 'isMulti()',
+                        '[class.tng-select-search]': 'enableSearch()',
+                        '[class.tng-select-open]': 'isOpen()',
+                        '[attr.aria-expanded]': 'isOpen()',
+                        '[attr.aria-haspopup]': '"listbox"',
+                        '[attr.aria-multiselectable]': 'isMulti()'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { enableMulti: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableMulti", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], enableSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSearch", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], customTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTrigger", required: false }] }], triggerRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerRef", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }, { type: i0.Output, args: ["selectedValuesChange"] }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class TngSelectComponent {
+    // Inputs
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
+    enableMulti = input(false, ...(ngDevMode ? [{ debugName: "enableMulti" }] : []));
+    enableSearch = input(false, ...(ngDevMode ? [{ debugName: "enableSearch" }] : []));
+    placeholder = input('Select an option', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    // Model for two-way binding
+    value = model([], ...(ngDevMode ? [{ debugName: "value" }] : []));
+    // Internal state
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
+    // ViewChild
+    selectDirective = viewChild(TngSelectDirective, ...(ngDevMode ? [{ debugName: "selectDirective" }] : []));
+    // Computed
+    selectId = computed(() => `tng-select-${Math.random().toString(36).substr(2, 9)}`, ...(ngDevMode ? [{ debugName: "selectId" }] : []));
+    effectiveDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : []));
+    displayText = computed(() => {
+        const values = this.value();
+        const opts = this.options();
+        if (!values || values.length === 0) {
+            return this.placeholder();
+        }
+        const selectedOpts = opts.filter(opt => values.includes(opt.value));
+        return selectedOpts.map(opt => opt.label).join(', ');
+    }, ...(ngDevMode ? [{ debugName: "displayText" }] : []));
+    // CVA callbacks
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        // Sync model changes to CVA
+        effect(() => {
+            const val = this.value();
+            // Avoid circular updates if possible, but for now just emit
+            if (this.enableMulti()) {
+                this.onChange(val);
+            }
+            else {
+                this.onChange(val.length > 0 ? val[0] : null);
+            }
+            this.onTouched();
+        });
+    }
+    onDisplayClick(event) {
+        if (this.effectiveDisabled())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.selectDirective()?.togglePanel();
+    }
+    // ControlValueAccessor implementation
+    writeValue(obj) {
+        if (obj !== null && obj !== undefined) {
+            if (Array.isArray(obj)) {
+                this.value.set(obj);
+            }
+            else {
+                this.value.set([obj]);
+            }
+        }
+        else {
+            this.value.set([]);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TngSelectComponent, isStandalone: true, selector: "tng-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, enableMulti: { classPropertyName: "enableMulti", publicName: "enableMulti", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TngSelectComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "selectDirective", first: true, predicate: TngSelectDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tng-select-wrapper\" [class.tng-select-open]=\"selectDirective()?.isOpen()\">\n  @if (label()) {\n  <label class=\"tng-select-label\" [attr.for]=\"selectId()\">\n    {{ label() }}\n  </label>\n  }\n\n  <div class=\"tng-select-container\">\n    <select\n      [id]=\"selectId()\"\n      tngSelect\n      [enableMulti]=\"enableMulti()\"\n      [enableSearch]=\"enableSearch()\"\n      [placeholder]=\"placeholder()\"\n      [customTrigger]=\"true\"\n      [multiple]=\"enableMulti()\"\n      [triggerRef]=\"triggerDisplay\"\n      [(selectedValues)]=\"value\"\n      [disabled]=\"effectiveDisabled()\"\n      [attr.aria-label]=\"ariaLabel() || label()\"\n    >\n      @for (option of options(); track option.value) {\n      <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n        {{ option.label }}\n      </option>\n      }\n    </select>\n\n    <div\n      class=\"tng-select-display\"\n      #triggerDisplay\n      [class.disabled]=\"effectiveDisabled()\"\n      (click)=\"onDisplayClick($event)\"\n    >\n      <span class=\"tng-select-display-text\">\n        {{ displayText() }}\n      </span>\n      <i class=\"fa fa-chevron-down tng-select-arrow\"></i>\n    </div>\n  </div>\n\n  @if (hint()) {\n  <div class=\"tng-select-hint\">\n    {{ hint() }}\n  </div>\n  }\n</div>\n", styles: [":host{display:block;margin-bottom:1.5rem;font-family:var(--tng-font-family, \"Inter\", sans-serif)}.tng-select-wrapper{width:100%}.tng-select-label{display:block;margin-bottom:.5rem;font-size:.9rem;font-weight:500;color:var(--tng-text, #333)}.tng-select-container{position:relative}.tng-select-display{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;border:1px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background:var(--tng-surface, #ffffff);cursor:pointer;transition:all .2s ease;min-height:48px}.tng-select-display:hover:not(.disabled){border-color:var(--tng-text-secondary, #757575)}.tng-select-display.disabled{opacity:.6;cursor:not-allowed;background:var(--tng-background, #fafafa)}.tng-select-wrapper.tng-select-open .tng-select-display{border-color:var(--tng-primary, #00f2ff);border-width:2px;padding:calc(.75rem - 1px) calc(1rem - 1px)}.tng-select-display-text{flex:1;color:var(--tng-text, #333);font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tng-select-display-text:empty:before{content:attr(data-placeholder);color:var(--tng-text-secondary, #757575)}.tng-select-arrow{color:var(--tng-text-secondary, #757575);transition:transform .2s ease;font-size:.8rem}.tng-select-wrapper.tng-select-open .tng-select-arrow{transform:rotate(180deg)}.tng-select-hint{margin-top:.25rem;font-size:.85rem;color:var(--tng-text-secondary, #757575)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: TngSelectDirective, selector: "select[tngSelect]", inputs: ["enableMulti", "multiple", "enableSearch", "placeholder", "customTrigger", "triggerRef", "selectedValues"], outputs: ["selectedValuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-select', standalone: true, imports: [CommonModule, FormsModule, TngSelectDirective], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TngSelectComponent),
+                            multi: true
+                        }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tng-select-wrapper\" [class.tng-select-open]=\"selectDirective()?.isOpen()\">\n  @if (label()) {\n  <label class=\"tng-select-label\" [attr.for]=\"selectId()\">\n    {{ label() }}\n  </label>\n  }\n\n  <div class=\"tng-select-container\">\n    <select\n      [id]=\"selectId()\"\n      tngSelect\n      [enableMulti]=\"enableMulti()\"\n      [enableSearch]=\"enableSearch()\"\n      [placeholder]=\"placeholder()\"\n      [customTrigger]=\"true\"\n      [multiple]=\"enableMulti()\"\n      [triggerRef]=\"triggerDisplay\"\n      [(selectedValues)]=\"value\"\n      [disabled]=\"effectiveDisabled()\"\n      [attr.aria-label]=\"ariaLabel() || label()\"\n    >\n      @for (option of options(); track option.value) {\n      <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n        {{ option.label }}\n      </option>\n      }\n    </select>\n\n    <div\n      class=\"tng-select-display\"\n      #triggerDisplay\n      [class.disabled]=\"effectiveDisabled()\"\n      (click)=\"onDisplayClick($event)\"\n    >\n      <span class=\"tng-select-display-text\">\n        {{ displayText() }}\n      </span>\n      <i class=\"fa fa-chevron-down tng-select-arrow\"></i>\n    </div>\n  </div>\n\n  @if (hint()) {\n  <div class=\"tng-select-hint\">\n    {{ hint() }}\n  </div>\n  }\n</div>\n", styles: [":host{display:block;margin-bottom:1.5rem;font-family:var(--tng-font-family, \"Inter\", sans-serif)}.tng-select-wrapper{width:100%}.tng-select-label{display:block;margin-bottom:.5rem;font-size:.9rem;font-weight:500;color:var(--tng-text, #333)}.tng-select-container{position:relative}.tng-select-display{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;border:1px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background:var(--tng-surface, #ffffff);cursor:pointer;transition:all .2s ease;min-height:48px}.tng-select-display:hover:not(.disabled){border-color:var(--tng-text-secondary, #757575)}.tng-select-display.disabled{opacity:.6;cursor:not-allowed;background:var(--tng-background, #fafafa)}.tng-select-wrapper.tng-select-open .tng-select-display{border-color:var(--tng-primary, #00f2ff);border-width:2px;padding:calc(.75rem - 1px) calc(1rem - 1px)}.tng-select-display-text{flex:1;color:var(--tng-text, #333);font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tng-select-display-text:empty:before{content:attr(data-placeholder);color:var(--tng-text-secondary, #757575)}.tng-select-arrow{color:var(--tng-text-secondary, #757575);transition:transform .2s ease;font-size:.8rem}.tng-select-wrapper.tng-select-open .tng-select-arrow{transform:rotate(180deg)}.tng-select-hint{margin-top:.25rem;font-size:.85rem;color:var(--tng-text-secondary, #757575)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], enableMulti: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableMulti", required: false }] }], enableSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSearch", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], selectDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TngSelectDirective), { isSignal: true }] }] } });
+
 /*
  * Public API Surface of tecnualng
  */
@@ -1282,5 +1900,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { TecnualDatepickerComponent, TecnualInputComponent, TecnualTableComponent, ThemeService, TngButton, TngCardComponent, TngExpansionPanelComponent, TngMenuComponent, TngMenuGroupComponent, TngMenuItemComponent, TngTabComponent, TngTabsComponent, TngToolbarComponent, TngTooltipComponent, TngTooltipDirective };
+export { TecnualDatepickerComponent, TecnualInputComponent, TecnualTableComponent, ThemeService, TngButton, TngCardComponent, TngExpansionPanelComponent, TngFormFieldComponent, TngInputDirective, TngMenuComponent, TngMenuGroupComponent, TngMenuItemComponent, TngSelectComponent, TngSelectDirective, TngSelectPanelComponent, TngSidebarComponent, TngTabComponent, TngTabsComponent, TngToolbarComponent, TngTooltipComponent, TngTooltipDirective };
 //# sourceMappingURL=tecnualng.mjs.map