@telcomdev/ui 0.0.8 → 0.0.9

package/README.md

@@ -324,6 +324,17 @@ necesario:
 tradicional se conserva el comportamiento histórico: `type="number"` continúa
 emitiendo texto mediante CVA para no romper formularios existentes.
 
+Cuando el control recibe `maxlength` —de forma directa o mediante la metadata
+`maxLength` de Signal Forms— muestra automáticamente un contador `actual/max`.
+Puede ocultarse sin quitar la validación:
+
+```html
+<td-input [maxlength]="100" [(ngModel)]="nombre" />
+<td-input [formField]="fields.descripcion" [showCounter]="false" />
+```
+
+`minlength`, `min`, `max` y `pattern` no activan el contador.
+
 ```ts
 import { signal } from '@angular/core';
 import { form, FormField } from '@angular/forms/signals';

package/fesm2022/telcomdev-ui.mjs

@@ -1998,8 +1998,8 @@ class TdInput {
     cdr = inject(ChangeDetectorRef);
     formBridge = createTdFormControlBridge();
     generatedId = `td-input-${++inputSequence}`;
-    legacyMinLength = null;
-    legacyMaxLength = null;
+    legacyMinLength = signal(null, ...(ngDevMode ? [{ debugName: "legacyMinLength" }] : /* istanbul ignore next */ []));
+    legacyMaxLength = signal(null, ...(ngDevMode ? [{ debugName: "legacyMaxLength" }] : /* istanbul ignore next */ []));
     receivedNullValue = false;
     nativeInput;
     id = '';
@@ -2024,6 +2024,7 @@ class TdInput {
     error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
     clearable = false;
     dark = false;
+    showCounter = input(true, ...(ngDevMode ? [{ debugName: "showCounter" }] : /* istanbul ignore next */ []));
     emptyValue = 'auto';
     minValue = input(undefined, { ...(ngDevMode ? { debugName: "minValue" } : /* istanbul ignore next */ {}), alias: 'min' });
     maxValue = input(undefined, { ...(ngDevMode ? { debugName: "maxValue" } : /* istanbul ignore next */ {}), alias: 'max' });
@@ -2032,17 +2033,26 @@ class TdInput {
     pattern = input([], ...(ngDevMode ? [{ debugName: "pattern" }] : /* istanbul ignore next */ []));
     step = null;
     set minlength(value) {
-        this.legacyMinLength = value;
+        this.legacyMinLength.set(value);
     }
     set maxlength(value) {
-        this.legacyMaxLength = value;
+        this.legacyMaxLength.set(value);
     }
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.formBridge.isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     displayError = computed(() => this.error() || this.errors()[0]?.message || '', ...(ngDevMode ? [{ debugName: "displayError" }] : /* istanbul ignore next */ []));
     hasError = computed(() => this.invalid() || !!this.displayError(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
-    resolvedMinLength = computed(() => this.minLength() ?? this.legacyMinLength, ...(ngDevMode ? [{ debugName: "resolvedMinLength" }] : /* istanbul ignore next */ []));
-    resolvedMaxLength = computed(() => this.maxLength() ?? this.legacyMaxLength, ...(ngDevMode ? [{ debugName: "resolvedMaxLength" }] : /* istanbul ignore next */ []));
+    resolvedMinLength = computed(() => this.minLength() ?? this.legacyMinLength(), ...(ngDevMode ? [{ debugName: "resolvedMinLength" }] : /* istanbul ignore next */ []));
+    resolvedMaxLength = computed(() => this.maxLength() ?? this.legacyMaxLength(), ...(ngDevMode ? [{ debugName: "resolvedMaxLength" }] : /* istanbul ignore next */ []));
+    currentLength = computed(() => String(this.value() ?? '').length, ...(ngDevMode ? [{ debugName: "currentLength" }] : /* istanbul ignore next */ []));
+    counterVisible = computed(() => this.showCounter() && this.resolvedMaxLength() !== null &&
+        this.resolvedMaxLength() !== undefined, ...(ngDevMode ? [{ debugName: "counterVisible" }] : /* istanbul ignore next */ []));
+    counterAtLimit = computed(() => {
+        const maxLength = this.resolvedMaxLength();
+        return maxLength !== null && maxLength !== undefined &&
+            this.currentLength() >= maxLength;
+    }, ...(ngDevMode ? [{ debugName: "counterAtLimit" }] : /* istanbul ignore next */ []));
+    hasSupportingContent = computed(() => !!this.displayError() || !!this.hint || this.counterVisible(), ...(ngDevMode ? [{ debugName: "hasSupportingContent" }] : /* istanbul ignore next */ []));
     resolvedPattern = computed(() => {
         const patterns = this.pattern();
         if (!patterns.length)
@@ -2057,7 +2067,7 @@ class TdInput {
         return this.id || this.generatedId;
     }
     get descriptionId() {
-        return this.displayError() || this.hint ? `${this.inputId}-description` : null;
+        return this.hasSupportingContent() ? `${this.inputId}-description` : null;
     }
     get resolvedType() {
         return this.type === 'password' && this.passwordVisible ? 'text' : this.type;
@@ -2125,7 +2135,7 @@ class TdInput {
         this.onChange(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdInput, isStandalone: true, selector: "td-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledReasons: { classPropertyName: "disabledReasons", publicName: "disabledReasons", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, emptyValue: { classPropertyName: "emptyValue", publicName: "emptyValue", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: false, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: false, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", value: "valueChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdInput, isStandalone: true, selector: "td-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledReasons: { classPropertyName: "disabledReasons", publicName: "disabledReasons", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, showCounter: { classPropertyName: "showCounter", publicName: "showCounter", isSignal: true, isRequired: false, transformFunction: null }, emptyValue: { classPropertyName: "emptyValue", publicName: "emptyValue", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: false, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: false, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", value: "valueChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TdInput),
@@ -2189,16 +2199,30 @@ class TdInput {
       </div>
     </div>
 
-    @if (displayError() || hint) {
-      <p
-        class="td-input__message"
-        [class.td-input__message--error]="hasError()"
-        [id]="descriptionId"
-      >
-        {{ displayError() || hint }}
-      </p>
+    @if (hasSupportingContent()) {
+      <div class="td-input__support" [id]="descriptionId">
+        @if (displayError() || hint) {
+          <p
+            class="td-input__message"
+            [class.td-input__message--error]="hasError()"
+          >
+            {{ displayError() || hint }}
+          </p>
+        } @else {
+          <span class="td-input__message" aria-hidden="true"></span>
+        }
+
+        @if (counterVisible()) {
+          <span
+            class="td-input__counter"
+            [class.td-input__counter--limit]="counterAtLimit()"
+          >
+            {{ currentLength() }}/{{ resolvedMaxLength() }}
+          </span>
+        }
+      </div>
     }
-  `, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-input{--td-input-bg: #fff;--td-input-border: #dfe3eb;--td-input-text: #263147;--td-input-muted: #748096;position:relative;display:flex;min-height:3.15rem;align-items:center;border:1px solid var(--td-input-border);border-radius:.78rem;background:var(--td-input-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.td-input--dark{--td-input-bg: #19191f;--td-input-border: #34343e;--td-input-text: #ededf0;--td-input-muted: #a1a1aa;color-scheme:dark}.td-input:hover:not(.td-input--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-input-border))}.td-input--focused{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-input--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-input--disabled{opacity:.58;background:#f5f6f8;cursor:not-allowed}.td-input label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-input-muted);background:var(--td-input-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-input--focused label{color:#5746d8}.td-input--error label{color:#d33f3f}.td-input__control{display:flex;width:100%;min-width:0;align-items:center;gap:.55rem;padding:.25rem .7rem}.td-input__icon{flex:0 0 auto;color:var(--td-input-muted)}input{width:100%;min-width:0;height:2.55rem;border:0;outline:0;color:var(--td-input-text);background:transparent;font:550 .78rem/1 system-ui,sans-serif}input::placeholder{color:color-mix(in srgb,var(--td-input-muted) 72%,transparent)}input:disabled{cursor:not-allowed}input[type=search]::-webkit-search-cancel-button{display:none}.td-input__action{display:grid;width:2rem;height:2rem;flex:0 0 auto;place-items:center;border:0;border-radius:.5rem;color:var(--td-input-muted);background:transparent;cursor:pointer}.td-input__action:hover{color:#5746d8;background:#f2f0ff}.td-input--dark .td-input__action:hover{color:#b9b0fa;background:#292931}.td-input__message{margin:.38rem .75rem 0;color:#748096;font-size:.66rem;line-height:1.4}.td-input__message--error{color:#c43636}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-input{--td-input-bg: #fff;--td-input-border: #dfe3eb;--td-input-text: #263147;--td-input-muted: #748096;position:relative;display:flex;min-height:3.15rem;align-items:center;border:1px solid var(--td-input-border);border-radius:.78rem;background:var(--td-input-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.td-input--dark{--td-input-bg: #19191f;--td-input-border: #34343e;--td-input-text: #ededf0;--td-input-muted: #a1a1aa;color-scheme:dark}.td-input:hover:not(.td-input--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-input-border))}.td-input--focused{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-input--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-input--disabled{opacity:.58;background:#f5f6f8;cursor:not-allowed}.td-input label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-input-muted);background:var(--td-input-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-input--focused label{color:#5746d8}.td-input--error label{color:#d33f3f}.td-input__control{display:flex;width:100%;min-width:0;align-items:center;gap:.55rem;padding:.25rem .7rem}.td-input__icon{flex:0 0 auto;color:var(--td-input-muted)}input{width:100%;min-width:0;height:2.55rem;border:0;outline:0;color:var(--td-input-text);background:transparent;font:550 .78rem/1 system-ui,sans-serif}input::placeholder{color:color-mix(in srgb,var(--td-input-muted) 72%,transparent)}input:disabled{cursor:not-allowed}input[type=search]::-webkit-search-cancel-button{display:none}.td-input__action{display:grid;width:2rem;height:2rem;flex:0 0 auto;place-items:center;border:0;border-radius:.5rem;color:var(--td-input-muted);background:transparent;cursor:pointer}.td-input__action:hover{color:#5746d8;background:#f2f0ff}.td-input--dark .td-input__action:hover{color:#b9b0fa;background:#292931}.td-input__support{display:flex;min-width:0;align-items:flex-start;justify-content:space-between;gap:.75rem;margin:.38rem .75rem 0}.td-input__message{min-width:0;flex:1 1 auto;margin:0;color:#748096;font-size:.66rem;line-height:1.4}.td-input__message--error{color:#c43636}.td-input__counter{flex:0 0 auto;color:#748096;font-size:.66rem;font-variant-numeric:tabular-nums;line-height:1.4;white-space:nowrap}.td-input__counter--limit{color:#5746d8;font-weight:700}.td-input--dark+.td-input__support .td-input__message,.td-input--dark+.td-input__support .td-input__counter{color:#a1a1aa}.td-input--dark+.td-input__support .td-input__message--error{color:#f28b8b}.td-input--dark+.td-input__support .td-input__counter--limit{color:#b9b0fa}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdInput, decorators: [{
             type: Component,
@@ -2260,14 +2284,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       </div>
     </div>
 
-    @if (displayError() || hint) {
-      <p
-        class="td-input__message"
-        [class.td-input__message--error]="hasError()"
-        [id]="descriptionId"
-      >
-        {{ displayError() || hint }}
-      </p>
+    @if (hasSupportingContent()) {
+      <div class="td-input__support" [id]="descriptionId">
+        @if (displayError() || hint) {
+          <p
+            class="td-input__message"
+            [class.td-input__message--error]="hasError()"
+          >
+            {{ displayError() || hint }}
+          </p>
+        } @else {
+          <span class="td-input__message" aria-hidden="true"></span>
+        }
+
+        @if (counterVisible()) {
+          <span
+            class="td-input__counter"
+            [class.td-input__counter--limit]="counterAtLimit()"
+          >
+            {{ currentLength() }}/{{ resolvedMaxLength() }}
+          </span>
+        }
+      </div>
     }
   `, providers: [
                         {
@@ -2278,7 +2316,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     ], host: {
                         '[hidden]': 'hidden()',
                         '[attr.aria-busy]': 'pending() ? "true" : null',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-input{--td-input-bg: #fff;--td-input-border: #dfe3eb;--td-input-text: #263147;--td-input-muted: #748096;position:relative;display:flex;min-height:3.15rem;align-items:center;border:1px solid var(--td-input-border);border-radius:.78rem;background:var(--td-input-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.td-input--dark{--td-input-bg: #19191f;--td-input-border: #34343e;--td-input-text: #ededf0;--td-input-muted: #a1a1aa;color-scheme:dark}.td-input:hover:not(.td-input--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-input-border))}.td-input--focused{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-input--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-input--disabled{opacity:.58;background:#f5f6f8;cursor:not-allowed}.td-input label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-input-muted);background:var(--td-input-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-input--focused label{color:#5746d8}.td-input--error label{color:#d33f3f}.td-input__control{display:flex;width:100%;min-width:0;align-items:center;gap:.55rem;padding:.25rem .7rem}.td-input__icon{flex:0 0 auto;color:var(--td-input-muted)}input{width:100%;min-width:0;height:2.55rem;border:0;outline:0;color:var(--td-input-text);background:transparent;font:550 .78rem/1 system-ui,sans-serif}input::placeholder{color:color-mix(in srgb,var(--td-input-muted) 72%,transparent)}input:disabled{cursor:not-allowed}input[type=search]::-webkit-search-cancel-button{display:none}.td-input__action{display:grid;width:2rem;height:2rem;flex:0 0 auto;place-items:center;border:0;border-radius:.5rem;color:var(--td-input-muted);background:transparent;cursor:pointer}.td-input__action:hover{color:#5746d8;background:#f2f0ff}.td-input--dark .td-input__action:hover{color:#b9b0fa;background:#292931}.td-input__message{margin:.38rem .75rem 0;color:#748096;font-size:.66rem;line-height:1.4}.td-input__message--error{color:#c43636}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-input{--td-input-bg: #fff;--td-input-border: #dfe3eb;--td-input-text: #263147;--td-input-muted: #748096;position:relative;display:flex;min-height:3.15rem;align-items:center;border:1px solid var(--td-input-border);border-radius:.78rem;background:var(--td-input-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.td-input--dark{--td-input-bg: #19191f;--td-input-border: #34343e;--td-input-text: #ededf0;--td-input-muted: #a1a1aa;color-scheme:dark}.td-input:hover:not(.td-input--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-input-border))}.td-input--focused{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-input--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-input--disabled{opacity:.58;background:#f5f6f8;cursor:not-allowed}.td-input label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-input-muted);background:var(--td-input-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-input--focused label{color:#5746d8}.td-input--error label{color:#d33f3f}.td-input__control{display:flex;width:100%;min-width:0;align-items:center;gap:.55rem;padding:.25rem .7rem}.td-input__icon{flex:0 0 auto;color:var(--td-input-muted)}input{width:100%;min-width:0;height:2.55rem;border:0;outline:0;color:var(--td-input-text);background:transparent;font:550 .78rem/1 system-ui,sans-serif}input::placeholder{color:color-mix(in srgb,var(--td-input-muted) 72%,transparent)}input:disabled{cursor:not-allowed}input[type=search]::-webkit-search-cancel-button{display:none}.td-input__action{display:grid;width:2rem;height:2rem;flex:0 0 auto;place-items:center;border:0;border-radius:.5rem;color:var(--td-input-muted);background:transparent;cursor:pointer}.td-input__action:hover{color:#5746d8;background:#f2f0ff}.td-input--dark .td-input__action:hover{color:#b9b0fa;background:#292931}.td-input__support{display:flex;min-width:0;align-items:flex-start;justify-content:space-between;gap:.75rem;margin:.38rem .75rem 0}.td-input__message{min-width:0;flex:1 1 auto;margin:0;color:#748096;font-size:.66rem;line-height:1.4}.td-input__message--error{color:#c43636}.td-input__counter{flex:0 0 auto;color:#748096;font-size:.66rem;font-variant-numeric:tabular-nums;line-height:1.4;white-space:nowrap}.td-input__counter--limit{color:#5746d8;font-weight:700}.td-input--dark+.td-input__support .td-input__message,.td-input--dark+.td-input__support .td-input__counter{color:#a1a1aa}.td-input--dark+.td-input__support .td-input__message--error{color:#f28b8b}.td-input--dark+.td-input__support .td-input__counter--limit{color:#b9b0fa}\n"] }]
         }], propDecorators: { nativeInput: [{
                 type: ViewChild,
                 args: ['nativeInput']
@@ -2300,7 +2338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Input
             }], dark: [{
                 type: Input
-            }], emptyValue: [{
+            }], showCounter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCounter", required: false }] }], emptyValue: [{
                 type: Input
             }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], step: [{
                 type: Input