@telcomdev/ui 0.1.5 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2331,6 +2331,8 @@ class TdInput {
2331
2331
  placeholder = '';
2332
2332
  autocomplete = 'off';
2333
2333
  icon = '';
2334
+ prefix = '';
2335
+ suffix = '';
2334
2336
  hint = '';
2335
2337
  name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
2336
2338
  disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
@@ -2654,7 +2656,7 @@ class TdInput {
2654
2656
  this.onChange(value);
2655
2657
  }
2656
2658
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
2657
- 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 }, sanitize: { classPropertyName: "sanitize", publicName: "sanitize", isSignal: false, isRequired: false, transformFunction: null }, sanitizeValue: { classPropertyName: "sanitizeValue", publicName: "sanitizeValue", isSignal: false, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: false, isRequired: false, transformFunction: null }, integerDigits: { classPropertyName: "integerDigits", publicName: "integerDigits", isSignal: false, isRequired: false, transformFunction: null }, decimalDigits: { classPropertyName: "decimalDigits", publicName: "decimalDigits", 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: [
2659
+ 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 }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: false, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", 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 }, sanitize: { classPropertyName: "sanitize", publicName: "sanitize", isSignal: false, isRequired: false, transformFunction: null }, sanitizeValue: { classPropertyName: "sanitizeValue", publicName: "sanitizeValue", isSignal: false, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: false, isRequired: false, transformFunction: null }, integerDigits: { classPropertyName: "integerDigits", publicName: "integerDigits", isSignal: false, isRequired: false, transformFunction: null }, decimalDigits: { classPropertyName: "decimalDigits", publicName: "decimalDigits", 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: [
2658
2660
  {
2659
2661
  provide: NG_VALUE_ACCESSOR,
2660
2662
  useExisting: forwardRef(() => TdInput),
@@ -2669,6 +2671,7 @@ class TdInput {
2669
2671
  [class.td-input--dark]="dark"
2670
2672
  [class.td-input--floating]="labelFloating()"
2671
2673
  [class.td-input--with-icon]="!!icon"
2674
+ [class.td-input--with-prefix]="!!prefix"
2672
2675
  >
2673
2676
  <label [for]="inputId">{{ label }}</label>
2674
2677
 
@@ -2677,6 +2680,10 @@ class TdInput {
2677
2680
  <td-icon class="td-input__icon" [nombre]="icon" />
2678
2681
  }
2679
2682
 
2683
+ @if (prefix) {
2684
+ <span class="td-input__affix td-input__affix--prefix">{{ prefix }}</span>
2685
+ }
2686
+
2680
2687
  <input
2681
2688
  #nativeInput
2682
2689
  [id]="inputId"
@@ -2702,6 +2709,10 @@ class TdInput {
2702
2709
  (blur)="handleBlur()"
2703
2710
  />
2704
2711
 
2712
+ @if (suffix) {
2713
+ <span class="td-input__affix td-input__affix--suffix">{{ suffix }}</span>
2714
+ }
2715
+
2705
2716
  @if (clearable && value() && !isDisabled() && !readonly()) {
2706
2717
  <button type="button" class="td-input__action" title="Limpiar" (click)="clear()">
2707
2718
  <td-icon nombre="close" tamano=".95rem" />
@@ -2744,7 +2755,7 @@ class TdInput {
2744
2755
  }
2745
2756
  </div>
2746
2757
  }
2747
- `, 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: var(--td-color-surface, #fff);--td-input-border: var(--td-color-border, #dfe3eb);--td-input-text: var(--td-color-text, #263147);--td-input-muted: var(--td-color-text-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: var(--td-color-surface, #19191f);--td-input-border: var(--td-color-border, #34343e);--td-input-text: var(--td-color-text, #ededf0);--td-input-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-input:hover:not(.td-input--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-input-border))}.td-input--focused{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-input--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:0 0 0 3px color-mix(in srgb,var(--td-color-danger, #d33f3f) 16%,transparent)}.td-input--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8);cursor:not-allowed}.td-input label{position:absolute;z-index:1;top:50%;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .25rem;color:var(--td-input-muted);background:transparent;font-size:.78rem;font-weight:750;line-height:1;text-overflow:ellipsis;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,left .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;white-space:nowrap;pointer-events:none}.td-input--with-icon label{left:2.55rem}.td-input--floating label{top:-.48rem;left:.72rem;padding:0 .35rem;background:var(--td-input-bg);font-size:.65rem;transform:translateY(0)}.td-input--focused label{color:var(--td-color-primary, #5746d8)}.td-input--error label{color:var(--td-color-danger, #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:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-input--dark .td-input__action:hover{color:var(--td-color-primary, #b9b0fa);background:var(--td-color-primary-soft, #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:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-input__message--error{color:var(--td-color-danger, #c43636)}.td-input__counter{flex:0 0 auto;color:var(--td-color-text-muted, #748096);font-size:.66rem;font-variant-numeric:tabular-nums;line-height:1.4;white-space:nowrap}.td-input__counter--limit{color:var(--td-color-primary, #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 });
2758
+ `, 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: var(--td-color-surface, #fff);--td-input-border: var(--td-color-border, #dfe3eb);--td-input-text: var(--td-color-text, #263147);--td-input-muted: var(--td-color-text-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: var(--td-color-surface, #19191f);--td-input-border: var(--td-color-border, #34343e);--td-input-text: var(--td-color-text, #ededf0);--td-input-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-input:hover:not(.td-input--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-input-border))}.td-input--focused{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-input--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:0 0 0 3px color-mix(in srgb,var(--td-color-danger, #d33f3f) 16%,transparent)}.td-input--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8);cursor:not-allowed}.td-input label{position:absolute;z-index:1;top:50%;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .25rem;color:var(--td-input-muted);background:transparent;font-size:.78rem;font-weight:750;line-height:1;text-overflow:ellipsis;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,left .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;white-space:nowrap;pointer-events:none}.td-input--with-icon label{left:2.55rem}.td-input--with-prefix label{left:3.05rem}.td-input--with-icon.td-input--with-prefix label{left:4.85rem}.td-input--floating label{top:-.48rem;left:.72rem;padding:0 .35rem;background:var(--td-input-bg);font-size:.65rem;transform:translateY(0)}.td-input--focused label{color:var(--td-color-primary, #5746d8)}.td-input--error label{color:var(--td-color-danger, #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)}.td-input__affix{flex:0 0 auto;color:var(--td-input-muted);font:750 .76rem/1 system-ui,sans-serif;letter-spacing:.01em;white-space:nowrap;-webkit-user-select:none;user-select:none}.td-input__affix--prefix{padding-right:.05rem}.td-input__affix--suffix{padding-left:.05rem}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:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-input--dark .td-input__action:hover{color:var(--td-color-primary, #b9b0fa);background:var(--td-color-primary-soft, #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:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-input__message--error{color:var(--td-color-danger, #c43636)}.td-input__counter{flex:0 0 auto;color:var(--td-color-text-muted, #748096);font-size:.66rem;font-variant-numeric:tabular-nums;line-height:1.4;white-space:nowrap}.td-input__counter--limit{color:var(--td-color-primary, #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 });
2748
2759
  }
2749
2760
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdInput, decorators: [{
2750
2761
  type: Component,
@@ -2757,6 +2768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
2757
2768
  [class.td-input--dark]="dark"
2758
2769
  [class.td-input--floating]="labelFloating()"
2759
2770
  [class.td-input--with-icon]="!!icon"
2771
+ [class.td-input--with-prefix]="!!prefix"
2760
2772
  >
2761
2773
  <label [for]="inputId">{{ label }}</label>
2762
2774
 
@@ -2765,6 +2777,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
2765
2777
  <td-icon class="td-input__icon" [nombre]="icon" />
2766
2778
  }
2767
2779
 
2780
+ @if (prefix) {
2781
+ <span class="td-input__affix td-input__affix--prefix">{{ prefix }}</span>
2782
+ }
2783
+
2768
2784
  <input
2769
2785
  #nativeInput
2770
2786
  [id]="inputId"
@@ -2790,6 +2806,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
2790
2806
  (blur)="handleBlur()"
2791
2807
  />
2792
2808
 
2809
+ @if (suffix) {
2810
+ <span class="td-input__affix td-input__affix--suffix">{{ suffix }}</span>
2811
+ }
2812
+
2793
2813
  @if (clearable && value() && !isDisabled() && !readonly()) {
2794
2814
  <button type="button" class="td-input__action" title="Limpiar" (click)="clear()">
2795
2815
  <td-icon nombre="close" tamano=".95rem" />
@@ -2841,7 +2861,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
2841
2861
  ], host: {
2842
2862
  '[hidden]': 'hidden()',
2843
2863
  '[attr.aria-busy]': 'pending() ? "true" : null',
2844
- }, 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: var(--td-color-surface, #fff);--td-input-border: var(--td-color-border, #dfe3eb);--td-input-text: var(--td-color-text, #263147);--td-input-muted: var(--td-color-text-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: var(--td-color-surface, #19191f);--td-input-border: var(--td-color-border, #34343e);--td-input-text: var(--td-color-text, #ededf0);--td-input-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-input:hover:not(.td-input--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-input-border))}.td-input--focused{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-input--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:0 0 0 3px color-mix(in srgb,var(--td-color-danger, #d33f3f) 16%,transparent)}.td-input--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8);cursor:not-allowed}.td-input label{position:absolute;z-index:1;top:50%;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .25rem;color:var(--td-input-muted);background:transparent;font-size:.78rem;font-weight:750;line-height:1;text-overflow:ellipsis;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,left .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;white-space:nowrap;pointer-events:none}.td-input--with-icon label{left:2.55rem}.td-input--floating label{top:-.48rem;left:.72rem;padding:0 .35rem;background:var(--td-input-bg);font-size:.65rem;transform:translateY(0)}.td-input--focused label{color:var(--td-color-primary, #5746d8)}.td-input--error label{color:var(--td-color-danger, #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:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-input--dark .td-input__action:hover{color:var(--td-color-primary, #b9b0fa);background:var(--td-color-primary-soft, #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:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-input__message--error{color:var(--td-color-danger, #c43636)}.td-input__counter{flex:0 0 auto;color:var(--td-color-text-muted, #748096);font-size:.66rem;font-variant-numeric:tabular-nums;line-height:1.4;white-space:nowrap}.td-input__counter--limit{color:var(--td-color-primary, #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"] }]
2864
+ }, 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: var(--td-color-surface, #fff);--td-input-border: var(--td-color-border, #dfe3eb);--td-input-text: var(--td-color-text, #263147);--td-input-muted: var(--td-color-text-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: var(--td-color-surface, #19191f);--td-input-border: var(--td-color-border, #34343e);--td-input-text: var(--td-color-text, #ededf0);--td-input-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-input:hover:not(.td-input--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-input-border))}.td-input--focused{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-input--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:0 0 0 3px color-mix(in srgb,var(--td-color-danger, #d33f3f) 16%,transparent)}.td-input--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8);cursor:not-allowed}.td-input label{position:absolute;z-index:1;top:50%;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .25rem;color:var(--td-input-muted);background:transparent;font-size:.78rem;font-weight:750;line-height:1;text-overflow:ellipsis;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,left .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;white-space:nowrap;pointer-events:none}.td-input--with-icon label{left:2.55rem}.td-input--with-prefix label{left:3.05rem}.td-input--with-icon.td-input--with-prefix label{left:4.85rem}.td-input--floating label{top:-.48rem;left:.72rem;padding:0 .35rem;background:var(--td-input-bg);font-size:.65rem;transform:translateY(0)}.td-input--focused label{color:var(--td-color-primary, #5746d8)}.td-input--error label{color:var(--td-color-danger, #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)}.td-input__affix{flex:0 0 auto;color:var(--td-input-muted);font:750 .76rem/1 system-ui,sans-serif;letter-spacing:.01em;white-space:nowrap;-webkit-user-select:none;user-select:none}.td-input__affix--prefix{padding-right:.05rem}.td-input__affix--suffix{padding-left:.05rem}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:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-input--dark .td-input__action:hover{color:var(--td-color-primary, #b9b0fa);background:var(--td-color-primary-soft, #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:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-input__message--error{color:var(--td-color-danger, #c43636)}.td-input__counter{flex:0 0 auto;color:var(--td-color-text-muted, #748096);font-size:.66rem;font-variant-numeric:tabular-nums;line-height:1.4;white-space:nowrap}.td-input__counter--limit{color:var(--td-color-primary, #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"] }]
2845
2865
  }], propDecorators: { nativeInput: [{
2846
2866
  type: ViewChild,
2847
2867
  args: ['nativeInput']
@@ -2857,6 +2877,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
2857
2877
  type: Input
2858
2878
  }], icon: [{
2859
2879
  type: Input
2880
+ }], prefix: [{
2881
+ type: Input
2882
+ }], suffix: [{
2883
+ type: Input
2860
2884
  }], hint: [{
2861
2885
  type: Input
2862
2886
  }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledReasons: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledReasons", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], clearable: [{