tecnualng 21.0.25 → 21.0.27

package/fesm2022/tecnualng.mjs

@@ -232,21 +232,146 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                 args: ['change']
             }] } });
 
+class TngTextareaDirective {
+    el = inject((ElementRef));
+    ngControl = inject(NgControl, { optional: true, self: true });
+    // Inputs
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    maxLength = input(undefined, ...(ngDevMode ? [{ debugName: "maxLength" }] : []));
+    // State signals
+    focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : []));
+    _value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    // Computed
+    hasValue = computed(() => {
+        const val = this._value();
+        return val !== null && val !== undefined && val !== '';
+    }, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
+    valueLength = computed(() => this._value().length, ...(ngDevMode ? [{ debugName: "valueLength" }] : []));
+    computedPlaceholder = computed(() => {
+        return this.focused() ? this.placeholder() : '';
+    }, ...(ngDevMode ? [{ debugName: "computedPlaceholder" }] : []));
+    constructor() {
+        effect(() => {
+            this.updateValue();
+        }, { allowSignalWrites: true });
+    }
+    onFocus() {
+        this.focused.set(true);
+    }
+    onBlur() {
+        this.focused.set(false);
+        this.updateValue();
+    }
+    onInput() {
+        this.updateValue();
+    }
+    ngAfterViewInit() {
+        this.updateValue();
+    }
+    updateValue() {
+        this._value.set(this.el.nativeElement.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngTextareaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0", type: TngTextareaDirective, isStandalone: true, selector: "textarea[tngTextarea]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()", "input": "onInput()" }, properties: { "class.tng-textarea-field": "true", "disabled": "disabled()", "attr.maxlength": "maxLength() || null", "attr.placeholder": "computedPlaceholder()" } }, exportAs: ["tngTextarea"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngTextareaDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'textarea[tngTextarea]',
+                    standalone: true,
+                    host: {
+                        '[class.tng-textarea-field]': 'true',
+                        '[disabled]': 'disabled()',
+                        '[attr.maxlength]': 'maxLength() || null',
+                        '[attr.placeholder]': 'computedPlaceholder()'
+                    },
+                    exportAs: 'tngTextarea'
+                }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }], onInput: [{
+                type: HostListener,
+                args: ['input']
+            }] } });
+
 class TngFormFieldComponent {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
-    // Query for the input directive inside this component
+    // Query for the input or textarea 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" }] : []));
+    textareaDirective = contentChild(TngTextareaDirective, ...(ngDevMode ? [{ debugName: "textareaDirective" }] : []));
+    // Computed states based on the input/textarea directive
+    activeDirective = computed(() => this.inputDirective() || this.textareaDirective(), ...(ngDevMode ? [{ debugName: "activeDirective" }] : []));
+    isFocused = computed(() => this.activeDirective()?.focused() ?? false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
+    hasValue = computed(() => this.activeDirective()?.hasValue() ?? false, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
+    isDisabled = computed(() => this.activeDirective()?.disabled() ?? false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    // Character count logic
+    maxLength = computed(() => this.textareaDirective()?.maxLength(), ...(ngDevMode ? [{ debugName: "maxLength" }] : []));
+    currentLength = computed(() => this.textareaDirective()?.valueLength() ?? 0, ...(ngDevMode ? [{ debugName: "currentLength" }] : []));
+    showCounter = computed(() => this.maxLength() !== undefined, ...(ngDevMode ? [{ debugName: "showCounter" }] : []));
+    // Style helper
+    hasTextarea = computed(() => !!this.textareaDirective(), ...(ngDevMode ? [{ debugName: "hasTextarea" }] : []));
     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 });
+    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 }, { propertyName: "textareaDirective", first: true, predicate: TngTextareaDirective, 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     [class.tng-form-field-type-textarea]=\"hasTextarea()\">\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<div class=\"tng-form-field-subscript-wrapper\" *ngIf=\"showCounter()\">\n  <div class=\"tng-form-field-spacer\"></div>\n  <div class=\"tng-form-field-hint\">\n    {{ currentLength() }} / {{ maxLength() }}\n  </div>\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;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-input-container.tng-form-field-type-textarea{align-items:flex-start;height:auto}.tng-input-container.tng-form-field-type-textarea .tng-label{top:24px}.tng-input-container.tng-form-field-type-textarea.focused .tng-label,.tng-input-container.tng-form-field-type-textarea.has-value .tng-label{transform:translateY(-24px) scale(.75)}.tng-fieldset{position:absolute;inset:0;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;width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}input.tng-input-field,textarea.tng-input-field,textarea.tng-textarea-field{display:block;width:100%;border:none;background:none;padding:0 16px;margin:0;font-size:16px;color:var(--tng-text, #333);outline:none;min-height:48px;line-height:normal;z-index:1;font-family:inherit;box-sizing:border-box}input.tng-input-field::placeholder,textarea.tng-input-field::placeholder,textarea.tng-textarea-field::placeholder{color:transparent;transition:color .2s ease}input.tng-input-field:focus::placeholder,textarea.tng-input-field:focus::placeholder,textarea.tng-textarea-field:focus::placeholder{color:#aaa}textarea.tng-textarea-field{padding-top:12px;padding-bottom:12px;resize:vertical;height:auto;line-height:1.5}.tng-form-field-subscript-wrapper{margin-top:4px;font-size:.75rem;display:flex;justify-content:space-between;padding:0 16px}.tng-form-field-spacer{flex:1 1 auto}.tng-form-field-hint{color:var(--tng-text-secondary, #666);text-align:right}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], 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 }] }] } });
+            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     [class.tng-form-field-type-textarea]=\"hasTextarea()\">\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<div class=\"tng-form-field-subscript-wrapper\" *ngIf=\"showCounter()\">\n  <div class=\"tng-form-field-spacer\"></div>\n  <div class=\"tng-form-field-hint\">\n    {{ currentLength() }} / {{ maxLength() }}\n  </div>\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;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-input-container.tng-form-field-type-textarea{align-items:flex-start;height:auto}.tng-input-container.tng-form-field-type-textarea .tng-label{top:24px}.tng-input-container.tng-form-field-type-textarea.focused .tng-label,.tng-input-container.tng-form-field-type-textarea.has-value .tng-label{transform:translateY(-24px) scale(.75)}.tng-fieldset{position:absolute;inset:0;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;width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}input.tng-input-field,textarea.tng-input-field,textarea.tng-textarea-field{display:block;width:100%;border:none;background:none;padding:0 16px;margin:0;font-size:16px;color:var(--tng-text, #333);outline:none;min-height:48px;line-height:normal;z-index:1;font-family:inherit;box-sizing:border-box}input.tng-input-field::placeholder,textarea.tng-input-field::placeholder,textarea.tng-textarea-field::placeholder{color:transparent;transition:color .2s ease}input.tng-input-field:focus::placeholder,textarea.tng-input-field:focus::placeholder,textarea.tng-textarea-field:focus::placeholder{color:#aaa}textarea.tng-textarea-field{padding-top:12px;padding-bottom:12px;resize:vertical;height:auto;line-height:1.5}.tng-form-field-subscript-wrapper{margin-top:4px;font-size:.75rem;display:flex;justify-content:space-between;padding:0 16px}.tng-form-field-spacer{flex:1 1 auto}.tng-form-field-hint{color:var(--tng-text-secondary, #666);text-align:right}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], inputDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TngInputDirective), { isSignal: true }] }], textareaDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TngTextareaDirective), { isSignal: true }] }] } });
+
+class TngTextareaComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    maxLength = input(undefined, ...(ngDevMode ? [{ debugName: "maxLength" }] : []));
+    id = input(`tng-textarea-${Math.random().toString(36).substr(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    onInput(event) {
+        const input = event.target;
+        this.value.set(input.value);
+        this.onChange(this.value());
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    writeValue(value) {
+        this.value.set(value || '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.update(() => isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: TngTextareaComponent, isStandalone: true, selector: "tng-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TngTextareaComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<tng-form-field [label]=\"label()\">\n  <textarea\n    tngTextarea\n    [id]=\"id()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"value()\"\n    [disabled]=\"disabled()\"\n    [maxLength]=\"maxLength()\"\n    [required]=\"required()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\">\n  </textarea>\n</tng-form-field>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: TngFormFieldComponent, selector: "tng-form-field", inputs: ["label"] }, { kind: "directive", type: TngTextareaDirective, selector: "textarea[tngTextarea]", inputs: ["disabled", "placeholder", "maxLength"], exportAs: ["tngTextarea"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngTextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-textarea', standalone: true, imports: [CommonModule, FormsModule, TngFormFieldComponent, TngTextareaDirective], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TngTextareaComponent),
+                            multi: true
+                        }
+                    ], encapsulation: ViewEncapsulation.None, template: "<tng-form-field [label]=\"label()\">\n  <textarea\n    tngTextarea\n    [id]=\"id()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"value()\"\n    [disabled]=\"disabled()\"\n    [maxLength]=\"maxLength()\"\n    [required]=\"required()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\">\n  </textarea>\n</tng-form-field>\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", 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"] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
 class TecnualDatepickerComponent {
     elementRef;
@@ -891,6 +1016,13 @@ class ThemeService {
             description: 'Neon cyberpunk vibes',
             primaryColor: '#00f2ff',
             isDark: true
+        },
+        {
+            name: 'futuristic-light',
+            displayName: 'Futuristic Light',
+            description: 'Clean cyberpunk aesthetic',
+            primaryColor: '#00c2cc',
+            isDark: false
         }
     ];
     constructor() {
@@ -1490,6 +1622,9 @@ class TngSelectDirective {
     panelRef = null;
     // Generated trigger element
     triggerEl = null;
+    // Disabled state tracking
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    mutationObserver = null;
     // Computed
     isMulti = computed(() => this.enableMulti() || this.multiple(), ...(ngDevMode ? [{ debugName: "isMulti" }] : []));
     options = computed(() => this._options(), ...(ngDevMode ? [{ debugName: "options" }] : []));
@@ -1527,13 +1662,27 @@ class TngSelectDirective {
                 this.ngControl.control.setValue(newValue, { emitEvent: false });
             }
         });
-        // Update generated trigger text
+        // Update generated trigger text and state
         effect(() => {
             if (this.triggerEl) {
-                const textSpan = this.triggerEl.querySelector('.tng-select-trigger-text');
+                const textSpan = this.triggerEl.querySelector('.tng-select-display-text');
                 if (textSpan) {
                     textSpan.textContent = this.displayText();
                 }
+                // Toggle open class
+                if (this.isOpen()) {
+                    this.triggerEl.classList.add('tng-select-open');
+                }
+                else {
+                    this.triggerEl.classList.remove('tng-select-open');
+                }
+                // Toggle disabled class
+                if (this.isDisabled()) {
+                    this.triggerEl.classList.add('disabled');
+                }
+                else {
+                    this.triggerEl.classList.remove('disabled');
+                }
             }
         });
     }
@@ -1546,6 +1695,16 @@ class TngSelectDirective {
         this.el.nativeElement.style.pointerEvents = 'none';
         this.el.nativeElement.style.height = '0';
         this.el.nativeElement.style.width = '0';
+        // Track disabled state
+        this.isDisabled.set(this.el.nativeElement.disabled);
+        this.mutationObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.attributeName === 'disabled') {
+                    this.isDisabled.set(this.el.nativeElement.disabled);
+                }
+            });
+        });
+        this.mutationObserver.observe(this.el.nativeElement, { attributes: true });
         if (!this.customTrigger()) {
             this.createTrigger();
         }
@@ -1554,7 +1713,9 @@ class TngSelectDirective {
         this.closePanel();
         if (this.triggerEl) {
             this.triggerEl.remove();
+            this.triggerEl = null;
         }
+        this.mutationObserver?.disconnect();
     }
     onClick(event) {
         // If we have a generated trigger, the click is handled there.
@@ -1575,30 +1736,17 @@ class TngSelectDirective {
     }
     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';
+        trigger.className = 'tng-select-display';
         const text = document.createElement('span');
-        text.className = 'tng-select-trigger-text';
+        text.className = 'tng-select-display-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';
+        const arrow = document.createElement('i');
+        arrow.className = 'fa fa-chevron-down tng-select-arrow';
         trigger.appendChild(text);
         trigger.appendChild(arrow);
         trigger.addEventListener('click', (e) => {
+            if (this.isDisabled())
+                return;
             e.preventDefault();
             e.stopPropagation();
             this.togglePanel();
@@ -1881,7 +2029,7 @@ class TngSelectComponent {
                 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 });
+        ], 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;font-family:var(--tng-font-family, \"Inter\", sans-serif)}.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,.tng-select-display.tng-select-open{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,.tng-select-display.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, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngSelectComponent, decorators: [{
             type: Component,
@@ -1891,9 +2039,166 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                             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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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;font-family:var(--tng-font-family, \"Inter\", sans-serif)}.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,.tng-select-display.tng-select-open{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,.tng-select-display.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 }] }] } });
 
+class TngSliderComponent {
+    // Inputs
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    // Internal state
+    value = model(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+    // Elements
+    track = viewChild.required('track');
+    // Computed
+    percentage = computed(() => {
+        const min = this.min();
+        const max = this.max();
+        const val = this.value();
+        if (max === min)
+            return 0;
+        const percent = ((val - min) / (max - min)) * 100;
+        return Math.min(Math.max(percent, 0), 100);
+    }, ...(ngDevMode ? [{ debugName: "percentage" }] : []));
+    // CVA callbacks
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        // Ensure value respects min/max/step when inputs change
+        effect(() => {
+            const val = this.value();
+            const clamped = this.clampAndStep(val);
+            if (val !== clamped) {
+                this.value.set(clamped);
+            }
+        }, { allowSignalWrites: true });
+    }
+    // CVA Implementation
+    writeValue(value) {
+        if (value !== null && value !== undefined) {
+            this.value.set(this.clampAndStep(value));
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        // We handle disabled state via input, but CVA can also set it
+        // Usually we'd sync this with a signal if we wanted to support both
+    }
+    // Interaction Logic
+    onStart(event) {
+        if (this.disabled())
+            return;
+        this.isDragging.set(true);
+        this.onTouched();
+        this.updateValueFromEvent(event);
+        // Prevent text selection while dragging
+        event.preventDefault();
+    }
+    onMove(event) {
+        if (!this.isDragging() || this.disabled())
+            return;
+        this.updateValueFromEvent(event);
+    }
+    onEnd() {
+        this.isDragging.set(false);
+    }
+    updateValueFromEvent(event) {
+        const rect = this.track().nativeElement.getBoundingClientRect();
+        let percent = 0;
+        if (this.orientation() === 'horizontal') {
+            const clientX = this.getClientX(event);
+            percent = (clientX - rect.left) / rect.width;
+        }
+        else {
+            const clientY = this.getClientY(event);
+            // In vertical mode, 0 is at bottom, so we invert logic or CSS
+            // Typically slider goes bottom->top.
+            // clientY is 0 at top.
+            // So percent = (rect.bottom - clientY) / rect.height
+            percent = (rect.bottom - clientY) / rect.height;
+        }
+        percent = Math.min(Math.max(percent, 0), 1);
+        const range = this.max() - this.min();
+        const rawValue = this.min() + percent * range;
+        const newValue = this.clampAndStep(rawValue);
+        if (this.value() !== newValue) {
+            this.value.set(newValue);
+            this.onChange(newValue);
+        }
+    }
+    getClientX(event) {
+        if (event instanceof MouseEvent) {
+            return event.clientX;
+        }
+        return event.touches[0].clientX;
+    }
+    getClientY(event) {
+        if (event instanceof MouseEvent) {
+            return event.clientY;
+        }
+        return event.touches[0].clientY;
+    }
+    clampAndStep(value) {
+        const min = this.min();
+        const max = this.max();
+        const step = this.step();
+        let clamped = Math.min(Math.max(value, min), max);
+        if (step > 0) {
+            const steps = Math.round((clamped - min) / step);
+            clamped = min + steps * step;
+            // Re-clamp to handle floating point issues or partial steps at max
+            clamped = Math.min(Math.max(clamped, min), max);
+        }
+        return clamped;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TngSliderComponent, isStandalone: true, selector: "tng-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "mousedown": "onStart($event)", "touchstart": "onStart($event)", "window:mousemove": "onMove($event)", "window:touchmove": "onMove($event)", "window:mouseup": "onEnd()", "window:touchend": "onEnd()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TngSliderComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: "<div \n  class=\"tng-slider-container\" \n  [class.disabled]=\"disabled()\"\n  [class.dragging]=\"isDragging()\"\n  [class.vertical]=\"orientation() === 'vertical'\">\n  \n  @if (label()) {\n    <label class=\"tng-slider-label\">{{ label() }}</label>\n  }\n\n  <div class=\"tng-slider-wrapper\">\n    <div class=\"tng-slider-track\" #track>\n      <div \n        class=\"tng-slider-fill\" \n        [style.width.%]=\"orientation() === 'horizontal' ? percentage() : 100\"\n        [style.height.%]=\"orientation() === 'vertical' ? percentage() : 100\">\n      </div>\n      <div \n        class=\"tng-slider-thumb\" \n        [style.left.%]=\"orientation() === 'horizontal' ? percentage() : 50\"\n        [style.bottom.%]=\"orientation() === 'vertical' ? percentage() : undefined\">\n        <div class=\"tng-slider-thumb-knob\"></div>\n        <div class=\"tng-slider-thumb-label\">{{ value() }}</div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.tng-slider-container{display:flex;flex-direction:column;gap:.5rem;padding:1rem 0;-webkit-user-select:none;user-select:none}.tng-slider-container.disabled{opacity:.5;pointer-events:none;filter:grayscale(1)}.tng-slider-label{font-family:inherit;font-size:.875rem;font-weight:500;color:var(--tng-text);margin-bottom:.25rem}.tng-slider-wrapper{position:relative;height:24px;display:flex;align-items:center;cursor:pointer;touch-action:none}.tng-slider-track{position:relative;width:100%;height:6px;background:rgba(var(--tng-primary),.2);background:color-mix(in srgb,var(--tng-primary),transparent 80%);border-radius:3px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);overflow:visible;border:1px solid color-mix(in srgb,var(--tng-primary),transparent 90%);box-shadow:inset 0 1px 3px #0003}.tng-slider-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,var(--tng-primary),var(--tng-secondary));border-radius:3px;transition:width .2s cubic-bezier(.4,0,.2,1);box-shadow:0 0 10px color-mix(in srgb,var(--tng-primary),transparent 50%)}.tng-slider-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:24px;height:24px;display:flex;align-items:center;justify-content:center;z-index:2;transition:left .2s cubic-bezier(.4,0,.2,1)}.tng-slider-thumb-knob{width:20px;height:20px;background:var(--tng-surface);border:2px solid var(--tng-primary);border-radius:50%;box-shadow:0 2px 5px #0000004d;transition:transform .1s ease,box-shadow .2s ease}.tng-slider-thumb-knob:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background:var(--tng-primary);border-radius:50%;opacity:.5}.tng-slider-thumb-label{position:absolute;top:-35px;left:50%;transform:translate(-50%) scale(0);background:color-mix(in srgb,var(--tng-surface),transparent 10%);color:var(--tng-primary);padding:4px 8px;border-radius:6px;font-size:.75rem;font-weight:700;border:1px solid color-mix(in srgb,var(--tng-primary),transparent 70%);pointer-events:none;transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s ease;opacity:0;box-shadow:0 4px 10px #0003;white-space:nowrap}.tng-slider-container:hover .tng-slider-thumb-knob{box-shadow:0 0 15px color-mix(in srgb,var(--tng-primary),transparent 60%)}.tng-slider-container:hover .tng-slider-thumb-label,.tng-slider-container.dragging .tng-slider-thumb-label{transform:translate(-50%) scale(1);opacity:1}.tng-slider-container.dragging .tng-slider-fill,.tng-slider-container.dragging .tng-slider-thumb{transition:none}.tng-slider-container.dragging .tng-slider-thumb-knob{transform:scale(1.1);background:var(--tng-primary);border-color:var(--tng-text);box-shadow:0 0 20px color-mix(in srgb,var(--tng-primary),transparent 40%)}.tng-slider-container.dragging .tng-slider-thumb-knob:after{background:var(--tng-text);opacity:1}.tng-slider-container.dragging .tng-slider-track{cursor:grabbing}.tng-slider-container.vertical{height:100%;min-height:150px;flex-direction:column;align-items:center}.tng-slider-container.vertical .tng-slider-wrapper{width:24px;height:100%;flex-direction:column}.tng-slider-container.vertical .tng-slider-track{width:6px;height:100%}.tng-slider-container.vertical .tng-slider-fill{width:100%;bottom:0;top:auto;transition:height .2s cubic-bezier(.4,0,.2,1)}.tng-slider-container.vertical .tng-slider-thumb{top:auto;left:50%;transform:translate(-50%,50%);transition:bottom .2s cubic-bezier(.4,0,.2,1)}.tng-slider-container.vertical .tng-slider-thumb-label{top:50%;left:35px;transform:translateY(-50%) scale(0)}.tng-slider-container.vertical:hover .tng-slider-thumb-label,.tng-slider-container.vertical.dragging .tng-slider-thumb-label{transform:translateY(-50%) scale(1)}.tng-slider-container.vertical.dragging .tng-slider-fill,.tng-slider-container.vertical.dragging .tng-slider-thumb{transition:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-slider', standalone: true, imports: [CommonModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TngSliderComponent),
+                            multi: true,
+                        },
+                    ], template: "<div \n  class=\"tng-slider-container\" \n  [class.disabled]=\"disabled()\"\n  [class.dragging]=\"isDragging()\"\n  [class.vertical]=\"orientation() === 'vertical'\">\n  \n  @if (label()) {\n    <label class=\"tng-slider-label\">{{ label() }}</label>\n  }\n\n  <div class=\"tng-slider-wrapper\">\n    <div class=\"tng-slider-track\" #track>\n      <div \n        class=\"tng-slider-fill\" \n        [style.width.%]=\"orientation() === 'horizontal' ? percentage() : 100\"\n        [style.height.%]=\"orientation() === 'vertical' ? percentage() : 100\">\n      </div>\n      <div \n        class=\"tng-slider-thumb\" \n        [style.left.%]=\"orientation() === 'horizontal' ? percentage() : 50\"\n        [style.bottom.%]=\"orientation() === 'vertical' ? percentage() : undefined\">\n        <div class=\"tng-slider-thumb-knob\"></div>\n        <div class=\"tng-slider-thumb-label\">{{ value() }}</div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.tng-slider-container{display:flex;flex-direction:column;gap:.5rem;padding:1rem 0;-webkit-user-select:none;user-select:none}.tng-slider-container.disabled{opacity:.5;pointer-events:none;filter:grayscale(1)}.tng-slider-label{font-family:inherit;font-size:.875rem;font-weight:500;color:var(--tng-text);margin-bottom:.25rem}.tng-slider-wrapper{position:relative;height:24px;display:flex;align-items:center;cursor:pointer;touch-action:none}.tng-slider-track{position:relative;width:100%;height:6px;background:rgba(var(--tng-primary),.2);background:color-mix(in srgb,var(--tng-primary),transparent 80%);border-radius:3px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);overflow:visible;border:1px solid color-mix(in srgb,var(--tng-primary),transparent 90%);box-shadow:inset 0 1px 3px #0003}.tng-slider-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,var(--tng-primary),var(--tng-secondary));border-radius:3px;transition:width .2s cubic-bezier(.4,0,.2,1);box-shadow:0 0 10px color-mix(in srgb,var(--tng-primary),transparent 50%)}.tng-slider-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:24px;height:24px;display:flex;align-items:center;justify-content:center;z-index:2;transition:left .2s cubic-bezier(.4,0,.2,1)}.tng-slider-thumb-knob{width:20px;height:20px;background:var(--tng-surface);border:2px solid var(--tng-primary);border-radius:50%;box-shadow:0 2px 5px #0000004d;transition:transform .1s ease,box-shadow .2s ease}.tng-slider-thumb-knob:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background:var(--tng-primary);border-radius:50%;opacity:.5}.tng-slider-thumb-label{position:absolute;top:-35px;left:50%;transform:translate(-50%) scale(0);background:color-mix(in srgb,var(--tng-surface),transparent 10%);color:var(--tng-primary);padding:4px 8px;border-radius:6px;font-size:.75rem;font-weight:700;border:1px solid color-mix(in srgb,var(--tng-primary),transparent 70%);pointer-events:none;transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s ease;opacity:0;box-shadow:0 4px 10px #0003;white-space:nowrap}.tng-slider-container:hover .tng-slider-thumb-knob{box-shadow:0 0 15px color-mix(in srgb,var(--tng-primary),transparent 60%)}.tng-slider-container:hover .tng-slider-thumb-label,.tng-slider-container.dragging .tng-slider-thumb-label{transform:translate(-50%) scale(1);opacity:1}.tng-slider-container.dragging .tng-slider-fill,.tng-slider-container.dragging .tng-slider-thumb{transition:none}.tng-slider-container.dragging .tng-slider-thumb-knob{transform:scale(1.1);background:var(--tng-primary);border-color:var(--tng-text);box-shadow:0 0 20px color-mix(in srgb,var(--tng-primary),transparent 40%)}.tng-slider-container.dragging .tng-slider-thumb-knob:after{background:var(--tng-text);opacity:1}.tng-slider-container.dragging .tng-slider-track{cursor:grabbing}.tng-slider-container.vertical{height:100%;min-height:150px;flex-direction:column;align-items:center}.tng-slider-container.vertical .tng-slider-wrapper{width:24px;height:100%;flex-direction:column}.tng-slider-container.vertical .tng-slider-track{width:6px;height:100%}.tng-slider-container.vertical .tng-slider-fill{width:100%;bottom:0;top:auto;transition:height .2s cubic-bezier(.4,0,.2,1)}.tng-slider-container.vertical .tng-slider-thumb{top:auto;left:50%;transform:translate(-50%,50%);transition:bottom .2s cubic-bezier(.4,0,.2,1)}.tng-slider-container.vertical .tng-slider-thumb-label{top:50%;left:35px;transform:translateY(-50%) scale(0)}.tng-slider-container.vertical:hover .tng-slider-thumb-label,.tng-slider-container.vertical.dragging .tng-slider-thumb-label{transform:translateY(-50%) scale(1)}.tng-slider-container.vertical.dragging .tng-slider-fill,.tng-slider-container.vertical.dragging .tng-slider-thumb{transition:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }], onStart: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['touchstart', ['$event']]
+            }], onMove: [{
+                type: HostListener,
+                args: ['window:mousemove', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['window:touchmove', ['$event']]
+            }], onEnd: [{
+                type: HostListener,
+                args: ['window:mouseup']
+            }, {
+                type: HostListener,
+                args: ['window:touchend']
+            }] } });
+
 /*
  * Public API Surface of tecnualng
  */
@@ -1902,5 +2207,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, TngFormFieldComponent, TngInputDirective, TngMenuComponent, TngMenuGroupComponent, TngMenuItemComponent, TngSelectComponent, TngSelectDirective, TngSelectPanelComponent, TngSidebarComponent, TngTabComponent, TngTabsComponent, TngToolbarComponent, TngTooltipComponent, TngTooltipDirective };
+export { TecnualDatepickerComponent, TecnualInputComponent, TecnualTableComponent, ThemeService, TngButton, TngCardComponent, TngExpansionPanelComponent, TngFormFieldComponent, TngInputDirective, TngMenuComponent, TngMenuGroupComponent, TngMenuItemComponent, TngSelectComponent, TngSelectDirective, TngSelectPanelComponent, TngSidebarComponent, TngSliderComponent, TngTabComponent, TngTabsComponent, TngTextareaComponent, TngTextareaDirective, TngToolbarComponent, TngTooltipComponent, TngTooltipDirective };
 //# sourceMappingURL=tecnualng.mjs.map