@ajuarezso/sui-design-system 0.17.1 → 0.18.0
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.
|
@@ -9903,22 +9903,30 @@ class SuiInput {
|
|
|
9903
9903
|
* compilador lo cazó apenas se agregaron.
|
|
9904
9904
|
*/
|
|
9905
9905
|
/**
|
|
9906
|
-
*
|
|
9906
|
+
* La X de limpiar — el ÚNICO ícono del campo que crece con el tamaño.
|
|
9907
9907
|
*
|
|
9908
|
-
*
|
|
9909
|
-
*
|
|
9910
|
-
*
|
|
9911
|
-
*
|
|
9912
|
-
*
|
|
9908
|
+
* El ícono decorativo (lupa, ojo, afijos) se queda en 20 en los cinco
|
|
9909
|
+
* tamaños, igual que hace `sui-button`: medido en Storybook, su ícono es 20
|
|
9910
|
+
* desde un botón de 28 px hasta uno de 52. En este sistema, el ícono que
|
|
9911
|
+
* ACOMPAÑA texto no escala; solo escala cuando el ícono es el contenido
|
|
9912
|
+
* (`sui-compact-button`, 16/20/24).
|
|
9913
|
+
*
|
|
9914
|
+
* La X es la excepción y por una razón concreta: no es decoración, es un
|
|
9915
|
+
* control que se toca. En un campo de 52 px una X de 16 queda perdida y con
|
|
9916
|
+
* un área de toque que no acompaña al resto del campo.
|
|
9917
|
+
*
|
|
9918
|
+
* La escalera va de a 2 y todos son valores que el DS ya usa
|
|
9919
|
+
* (12, 14, 16, 18, 20). `medium` se queda en 16, así que ningún formulario
|
|
9920
|
+
* existente se mueve.
|
|
9913
9921
|
*/
|
|
9914
|
-
iconPx = computed(() => {
|
|
9915
|
-
const s = this.size();
|
|
9916
|
-
return s === 'xlarge' ? 24 : s === 'large' ? 22 : 20;
|
|
9917
|
-
}, ...(ngDevMode ? [{ debugName: "iconPx" }] : /* istanbul ignore next */ []));
|
|
9918
|
-
/** La X de limpiar, con el mismo criterio: un paso por tamaño. */
|
|
9919
9922
|
clearPx = computed(() => {
|
|
9920
|
-
|
|
9921
|
-
|
|
9923
|
+
switch (this.size()) {
|
|
9924
|
+
case 'xsmall': return 12;
|
|
9925
|
+
case 'small': return 14;
|
|
9926
|
+
case 'large': return 18;
|
|
9927
|
+
case 'xlarge': return 20;
|
|
9928
|
+
default: return 16; // medium
|
|
9929
|
+
}
|
|
9922
9930
|
}, ...(ngDevMode ? [{ debugName: "clearPx" }] : /* istanbul ignore next */ []));
|
|
9923
9931
|
labelSize = computed(() => {
|
|
9924
9932
|
const s = this.size();
|
|
@@ -9938,6 +9946,19 @@ class SuiInput {
|
|
|
9938
9946
|
pasa undefined → sui-form-hint usa su default por variant (information-fill). */
|
|
9939
9947
|
_resolvedHintIcon = computed(() => this.error() ? undefined : (this.hintIcon() ?? undefined), ...(ngDevMode ? [{ debugName: "_resolvedHintIcon" }] : /* istanbul ignore next */ []));
|
|
9940
9948
|
autocomplete = input(null, ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
|
|
9949
|
+
/**
|
|
9950
|
+
* Teclado que pide el campo. Por defecto lo deduce el `type` (ver
|
|
9951
|
+
* `_inputModeAuto`); esto es el escape hatch para los casos en que el type
|
|
9952
|
+
* semántico y el teclado no coinciden — un DNI es `type="text"` pero quiere
|
|
9953
|
+
* teclado numérico.
|
|
9954
|
+
*/
|
|
9955
|
+
inputmode = input(null, ...(ngDevMode ? [{ debugName: "inputmode" }] : /* istanbul ignore next */ []));
|
|
9956
|
+
/**
|
|
9957
|
+
* Ícono de la tecla de acción del teclado. Por defecto lo deduce el `type`
|
|
9958
|
+
* (ver `_enterKeyHintAuto`); se pasa a mano cuando el campo vive dentro de un
|
|
9959
|
+
* flujo — `next` en un formulario de varios pasos, `send` en un chat.
|
|
9960
|
+
*/
|
|
9961
|
+
enterkeyhint = input(null, ...(ngDevMode ? [{ debugName: "enterkeyhint" }] : /* istanbul ignore next */ []));
|
|
9941
9962
|
// ── New label inputs (additive — does NOT break existing API) ────────────
|
|
9942
9963
|
/** Texto secundario del label (ej. "Optional", "Required") */
|
|
9943
9964
|
sublabel = input(null, ...(ngDevMode ? [{ debugName: "sublabel" }] : /* istanbul ignore next */ []));
|
|
@@ -10063,8 +10084,8 @@ class SuiInput {
|
|
|
10063
10084
|
return 'text'; // split-field: control es un text input normal
|
|
10064
10085
|
return t;
|
|
10065
10086
|
}, ...(ngDevMode ? [{ debugName: "nativeType" }] : /* istanbul ignore next */ []));
|
|
10066
|
-
/**
|
|
10067
|
-
|
|
10087
|
+
/** Teclado que le corresponde a cada `type` cuando nadie pidió otro. */
|
|
10088
|
+
_inputModeAuto = computed(() => {
|
|
10068
10089
|
const t = this.type();
|
|
10069
10090
|
if (t === 'number')
|
|
10070
10091
|
return 'numeric';
|
|
@@ -10081,7 +10102,23 @@ class SuiInput {
|
|
|
10081
10102
|
if (t === 'search')
|
|
10082
10103
|
return 'search';
|
|
10083
10104
|
return null;
|
|
10084
|
-
}, ...(ngDevMode ? [{ debugName: "
|
|
10105
|
+
}, ...(ngDevMode ? [{ debugName: "_inputModeAuto" }] : /* istanbul ignore next */ []));
|
|
10106
|
+
/** `inputmode` que termina en el DOM: gana lo que pidió el consumer. */
|
|
10107
|
+
inputMode = computed(() => this.inputmode() ?? this._inputModeAuto(), ...(ngDevMode ? [{ debugName: "inputMode" }] : /* istanbul ignore next */ []));
|
|
10108
|
+
/**
|
|
10109
|
+
* Un campo de búsqueda abre con LUPA en la tecla de acción, siempre.
|
|
10110
|
+
*
|
|
10111
|
+
* Va por default y no queda a cargo de cada pantalla porque en Android el
|
|
10112
|
+
* caso correcto NO sale solo: Chromium solo le pide la lupa al teclado si el
|
|
10113
|
+
* campo es `type=search` Y NO tiene `inputmode` propio. Como acá sí lo tiene
|
|
10114
|
+
* (`_inputModeAuto` le pone `search` para elegir el teclado), esa regla no
|
|
10115
|
+
* aplica y la tecla cae en la acción genérica — la flecha azul de enviar.
|
|
10116
|
+
* `enterkeyhint` es lo único que decide el ícono sin importar el resto, así
|
|
10117
|
+
* que se emite desde el componente y ninguna pantalla tiene que acordarse.
|
|
10118
|
+
*/
|
|
10119
|
+
_enterKeyHintAuto = computed(() => this.type() === 'search' ? 'search' : null, ...(ngDevMode ? [{ debugName: "_enterKeyHintAuto" }] : /* istanbul ignore next */ []));
|
|
10120
|
+
/** `enterkeyhint` que termina en el DOM: gana lo que pidió el consumer. */
|
|
10121
|
+
enterKeyHint = computed(() => this.enterkeyhint() ?? this._enterKeyHintAuto(), ...(ngDevMode ? [{ debugName: "enterKeyHint" }] : /* istanbul ignore next */ []));
|
|
10085
10122
|
_onChange = () => { };
|
|
10086
10123
|
_onTouched = () => { };
|
|
10087
10124
|
// ── Event handlers ───────────────────────────────────────────────────────
|
|
@@ -10512,13 +10549,13 @@ class SuiInput {
|
|
|
10512
10549
|
this._disabledByForm.set(isDisabled);
|
|
10513
10550
|
}
|
|
10514
10551
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10515
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiInput, isStandalone: true, selector: "sui-input", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, fullRadius: { classPropertyName: "fullRadius", publicName: "fullRadius", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, hintIcon: { classPropertyName: "hintIcon", publicName: "hintIcon", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, paste: { classPropertyName: "paste", publicName: "paste", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, leadingDivider: { classPropertyName: "leadingDivider", publicName: "leadingDivider", isSignal: true, isRequired: false, transformFunction: null }, trailingDivider: { classPropertyName: "trailingDivider", publicName: "trailingDivider", isSignal: true, isRequired: false, transformFunction: null }, leadingControl: { classPropertyName: "leadingControl", publicName: "leadingControl", isSignal: true, isRequired: false, transformFunction: null }, trailingControl: { classPropertyName: "trailingControl", publicName: "trailingControl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:pointerdown": "onDocumentTap($event)", "document:touchstart": "onDocumentTap($event)", "document:mousedown": "onDocumentTap($event)" }, properties: { "attr.data-sui-size": "size()", "attr.data-sui-type": "type()", "attr.data-sui-error": "error() ? \"\" : null", "attr.data-sui-disabled": "isDisabled() ? \"\" : null", "attr.data-sui-readonly": "readonly() ? \"\" : null", "attr.data-sui-full-radius": "fullRadius() ? \"\" : null", "attr.data-sui-leading-divider": "_hasLeadingDivider() ? \"\" : null", "attr.data-sui-trailing-divider": "_hasTrailingDivider() ? \"\" : null", "attr.data-sui-leading-control": "leadingControl() ? \"\" : null", "attr.data-sui-trailing-control": "trailingControl() ? \"\" : null" } }, providers: [
|
|
10552
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiInput, isStandalone: true, selector: "sui-input", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, fullRadius: { classPropertyName: "fullRadius", publicName: "fullRadius", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, hintIcon: { classPropertyName: "hintIcon", publicName: "hintIcon", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, enterkeyhint: { classPropertyName: "enterkeyhint", publicName: "enterkeyhint", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, paste: { classPropertyName: "paste", publicName: "paste", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, leadingDivider: { classPropertyName: "leadingDivider", publicName: "leadingDivider", isSignal: true, isRequired: false, transformFunction: null }, trailingDivider: { classPropertyName: "trailingDivider", publicName: "trailingDivider", isSignal: true, isRequired: false, transformFunction: null }, leadingControl: { classPropertyName: "leadingControl", publicName: "leadingControl", isSignal: true, isRequired: false, transformFunction: null }, trailingControl: { classPropertyName: "trailingControl", publicName: "trailingControl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:pointerdown": "onDocumentTap($event)", "document:touchstart": "onDocumentTap($event)", "document:mousedown": "onDocumentTap($event)" }, properties: { "attr.data-sui-size": "size()", "attr.data-sui-type": "type()", "attr.data-sui-error": "error() ? \"\" : null", "attr.data-sui-disabled": "isDisabled() ? \"\" : null", "attr.data-sui-readonly": "readonly() ? \"\" : null", "attr.data-sui-full-radius": "fullRadius() ? \"\" : null", "attr.data-sui-leading-divider": "_hasLeadingDivider() ? \"\" : null", "attr.data-sui-trailing-divider": "_hasTrailingDivider() ? \"\" : null", "attr.data-sui-leading-control": "leadingControl() ? \"\" : null", "attr.data-sui-trailing-control": "trailingControl() ? \"\" : null" } }, providers: [
|
|
10516
10553
|
{
|
|
10517
10554
|
provide: NG_VALUE_ACCESSOR,
|
|
10518
10555
|
useExisting: forwardRef(() => SuiInput),
|
|
10519
10556
|
multi: true,
|
|
10520
10557
|
},
|
|
10521
|
-
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"labelSize()\"\n class=\"sui-input__label-host\"\n />\n}\n\n<div\n class=\"sui-input__field\"\n [class.sui-input__field--error]=\"error()\"\n [class.sui-input__field--disabled]=\"isDisabled()\"\n [class.sui-input__field--readonly]=\"readonly()\"\n [class.sui-input__field--split]=\"_hasLeadingDivider() || _hasTrailingDivider()\"\n [class.sui-input__field--split-leading]=\"_hasLeadingDivider()\"\n [class.sui-input__field--split-trailing]=\"_hasTrailingDivider()\"\n [class.sui-input__field--button]=\"type() === 'button'\"\n>\n <!--\n Split-field con divisor vertical (gen\u00E9rico por lado):\n - trailing (Figma node 332:1667 \"Button\"): acci\u00F3n a la derecha + divisor\n border-right. `type='button'` lo activa solo.\n - leading (Figma node 313:10267 \"Phone\"): afijo interactivo a la izquierda\n (ej. country select) + divisor border-left.\n El input + \u00EDconos van en la zona interna `.sui-input__inner`, que lleva el\n padding y el/los border(s) de divisor. Los `[data-slot=start/end]` quedan\n flush a su lado como zonas de afijo. Para los types sin divisor,\n `.sui-input__inner` es transparente (display: contents) y el layout es el de\n siempre.\n -->\n\n <!-- ng-content start slot \u2014 afijo leading (flush cuando es control/divisor) -->\n <ng-content select=\"[data-slot=start]\" />\n\n <div class=\"sui-input__inner\">\n <!-- Built-in icon slot (left) -->\n @if (icon() && iconPosition() === 'left') {\n <span class=\"sui-input__icon sui-input__icon--left\">\n <sui-icon [name]=\"icon()!\" [size]=\"iconPx()\" />\n </span>\n }\n\n <!-- Prefix label (S/, $, %) -->\n @if (prefix()) {\n <span class=\"sui-input__prefix\">{{ prefix() }}</span>\n }\n\n <input\n #inputEl\n class=\"sui-input__control\"\n [type]=\"nativeType()\"\n [attr.inputmode]=\"inputMode()\"\n [value]=\"\n type() === 'amount'\n ? displayAmountValue()\n : type() === 'card'\n ? displayCardValue()\n : value()\n \"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"type() === 'card' ? (maxlength() ?? 19) : maxlength()\"\n [attr.min]=\"type() === 'number' ? min() : null\"\n [attr.max]=\"type() === 'number' ? max() : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (keydown)=\"onKeydown($event)\"\n (paste)=\"onPaste($event)\"\n />\n </div>\n\n <!-- ng-content end slot (backward compat) -->\n <ng-content select=\"[data-slot=end]\" />\n\n <!-- Clear button -->\n @if (showClear() && value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"sui-input__clear\"\n aria-label=\"Limpiar\"\n (click)=\"clearValue()\"\n >\n <sui-icon name=\"close-circle-line\" [size]=\"clearPx()\" />\n </button>\n }\n\n <!-- Password toggle button -->\n @if (type() === 'password-toggle' && !isDisabled()) {\n <button\n type=\"button\"\n class=\"sui-input__eye\"\n [attr.aria-label]=\"showPassword() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n (click)=\"togglePassword()\"\n >\n <sui-icon [name]=\"showPassword() ? 'eye-off-line' : 'eye-line'\" [size]=\"iconPx()\" />\n </button>\n }\n\n <!-- Built-in icon slot (right) -->\n @if (icon() && iconPosition() === 'right') {\n <span class=\"sui-input__icon sui-input__icon--right\">\n <sui-icon [name]=\"icon()!\" [size]=\"iconPx()\" />\n </span>\n }\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n [icon]=\"_resolvedHintIcon()\"\n class=\"sui-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-input__label-host{display:block;margin-bottom:4px}.sui-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-input__field{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-input__field{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-input__field,:host(:not([data-sui-size])) .sui-input__field{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}:host([data-sui-size=large]) .sui-input__field{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:48px}:host([data-sui-size=xlarge]) .sui-input__field{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:52px}:host([data-sui-full-radius]) .sui-input__field{border-radius:999px}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):hover{border-color:var(--sui-stroke-sub-300)}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):focus-within{border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-input__field--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-input__field--error:not(.sui-input__field--disabled):hover{border-color:var(--sui-state-error-base)}.sui-input__field--error:not(.sui-input__field--disabled):focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10)}.sui-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-input__field--readonly{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200);box-shadow:none}.sui-input__field ::ng-deep [data-slot=start],.sui-input__field ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-leading-control]) .sui-input__field ::ng-deep [data-slot=start],:host([data-sui-trailing-control]) .sui-input__field ::ng-deep [data-slot=end]{width:auto;height:auto;align-self:stretch;pointer-events:auto}.sui-input__inner{display:contents}.sui-input__field--split{align-items:stretch;overflow:hidden;padding:0!important;gap:0!important}.sui-input__field--split .sui-input__inner{display:flex;flex:1 1 auto;min-width:0;align-items:center;box-sizing:border-box}:host([data-sui-size=xsmall]) .sui-input__field--split .sui-input__inner{gap:6px;padding:5px 6px 5px 8px}:host([data-sui-size=small]) .sui-input__field--split .sui-input__inner{gap:8px;padding:7px 8px 7px 10px}:host([data-sui-size=medium]) .sui-input__field--split .sui-input__inner,:host(:not([data-sui-size])) .sui-input__field--split .sui-input__inner{gap:8px;padding:9px 10px 9px 12px}:host([data-sui-size=large]) .sui-input__field--split .sui-input__inner{gap:10px;padding:11px 12px 11px 14px}:host([data-sui-size=xlarge]) .sui-input__field--split .sui-input__inner{gap:10px;padding:13px 14px 13px 16px}.sui-input__field--split-trailing .sui-input__inner{border-right:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-trailing.sui-input__field--error .sui-input__inner{border-right-color:var(--sui-state-error-base)}.sui-input__field--split-trailing.sui-input__field--disabled .sui-input__inner{border-right-color:transparent}.sui-input__field--split-trailing ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:auto;align-self:stretch;color:var(--sui-icon-sub-600);pointer-events:auto}:host([data-sui-size=xsmall]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:6px}:host([data-sui-size=small]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:8px}:host([data-sui-size=medium]) .sui-input__field--split-trailing ::ng-deep [data-slot=end],:host(:not([data-sui-size])) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:10px}:host([data-sui-size=large]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:12px}:host([data-sui-size=xlarge]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:14px}.sui-input__field--split-leading .sui-input__inner{border-left:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-leading.sui-input__field--error .sui-input__inner{border-left-color:var(--sui-state-error-base)}.sui-input__field--split-leading.sui-input__field--disabled .sui-input__inner{border-left-color:transparent}:host(:not([data-sui-leading-control])[data-sui-size=xsmall]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:6px 6px 6px 8px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=small]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:8px 8px 8px 10px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=medium]) .sui-input__field--split-leading ::ng-deep [data-slot=start],:host(:not([data-sui-leading-control]):not([data-sui-size])) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:10px 8px 10px 10px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=large]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:12px 10px 12px 12px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=xlarge]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:14px 10px 14px 14px;box-sizing:content-box}.sui-input__prefix{flex-shrink:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-sub-600);-webkit-user-select:none;user-select:none;pointer-events:none}.sui-input__icon{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-disabled]) .sui-input__icon{color:var(--sui-icon-disabled-300)}:host([data-sui-size=large]) .sui-input__clear{width:18px;height:18px}:host([data-sui-size=xlarge]) .sui-input__clear{width:20px;height:20px}.sui-input__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;opacity:.7;line-height:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__clear:hover{opacity:1;color:var(--sui-text-strong-950)}.sui-input__clear:focus{outline:none}.sui-input__eye{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;line-height:0;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__eye:hover{color:var(--sui-text-strong-950)}.sui-input__eye:focus{outline:none}.sui-input__control{flex:1 1 auto;min-width:0;border:none;outline:none;background:transparent;padding:0;margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-strong-950);-webkit-appearance:none;appearance:none;box-sizing:border-box}.sui-input__control[type=date],.sui-input__control[type=time],.sui-input__control[type=datetime-local],.sui-input__control[type=month],.sui-input__control[type=week]{-webkit-appearance:none;appearance:none;min-height:1.25em}.sui-input__control[type=date]::-webkit-date-and-time-value,.sui-input__control[type=time]::-webkit-date-and-time-value,.sui-input__control[type=datetime-local]::-webkit-date-and-time-value,.sui-input__control[type=month]::-webkit-date-and-time-value,.sui-input__control[type=week]::-webkit-date-and-time-value{text-align:left;margin:0}.sui-input__control[type=date]::-webkit-calendar-picker-indicator,.sui-input__control[type=time]::-webkit-calendar-picker-indicator,.sui-input__control[type=datetime-local]::-webkit-calendar-picker-indicator,.sui-input__control[type=month]::-webkit-calendar-picker-indicator,.sui-input__control[type=week]::-webkit-calendar-picker-indicator{margin-left:auto;opacity:.55;cursor:pointer}@media(max-width:767px){.sui-input__control{font-size:16px}}.sui-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-input__control:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed;-webkit-text-fill-color:var(--sui-text-disabled-300)}.sui-input__control[readonly]{color:var(--sui-text-sub-600);cursor:default}.sui-input__control:focus{outline:none}.sui-input__control[type=number]{-moz-appearance:textfield}.sui-input__control[type=number]::-webkit-inner-spin-button,.sui-input__control[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.sui-input__control[type=search]::-webkit-search-decoration,.sui-input__control[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.sui-input__hint-host{display:block;margin-top:4px}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "link", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10558
|
+
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"labelSize()\"\n class=\"sui-input__label-host\"\n />\n}\n\n<div\n class=\"sui-input__field\"\n [class.sui-input__field--error]=\"error()\"\n [class.sui-input__field--disabled]=\"isDisabled()\"\n [class.sui-input__field--readonly]=\"readonly()\"\n [class.sui-input__field--split]=\"_hasLeadingDivider() || _hasTrailingDivider()\"\n [class.sui-input__field--split-leading]=\"_hasLeadingDivider()\"\n [class.sui-input__field--split-trailing]=\"_hasTrailingDivider()\"\n [class.sui-input__field--button]=\"type() === 'button'\"\n>\n <!--\n Split-field con divisor vertical (gen\u00E9rico por lado):\n - trailing (Figma node 332:1667 \"Button\"): acci\u00F3n a la derecha + divisor\n border-right. `type='button'` lo activa solo.\n - leading (Figma node 313:10267 \"Phone\"): afijo interactivo a la izquierda\n (ej. country select) + divisor border-left.\n El input + \u00EDconos van en la zona interna `.sui-input__inner`, que lleva el\n padding y el/los border(s) de divisor. Los `[data-slot=start/end]` quedan\n flush a su lado como zonas de afijo. Para los types sin divisor,\n `.sui-input__inner` es transparente (display: contents) y el layout es el de\n siempre.\n -->\n\n <!-- ng-content start slot \u2014 afijo leading (flush cuando es control/divisor) -->\n <ng-content select=\"[data-slot=start]\" />\n\n <div class=\"sui-input__inner\">\n <!-- Built-in icon slot (left) -->\n @if (icon() && iconPosition() === 'left') {\n <span class=\"sui-input__icon sui-input__icon--left\">\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n </span>\n }\n\n <!-- Prefix label (S/, $, %) -->\n @if (prefix()) {\n <span class=\"sui-input__prefix\">{{ prefix() }}</span>\n }\n\n <input\n #inputEl\n class=\"sui-input__control\"\n [type]=\"nativeType()\"\n [attr.inputmode]=\"inputMode()\"\n [attr.enterkeyhint]=\"enterKeyHint()\"\n [value]=\"\n type() === 'amount'\n ? displayAmountValue()\n : type() === 'card'\n ? displayCardValue()\n : value()\n \"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"type() === 'card' ? (maxlength() ?? 19) : maxlength()\"\n [attr.min]=\"type() === 'number' ? min() : null\"\n [attr.max]=\"type() === 'number' ? max() : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (keydown)=\"onKeydown($event)\"\n (paste)=\"onPaste($event)\"\n />\n </div>\n\n <!-- ng-content end slot (backward compat) -->\n <ng-content select=\"[data-slot=end]\" />\n\n <!-- Clear button -->\n @if (showClear() && value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"sui-input__clear\"\n aria-label=\"Limpiar\"\n (click)=\"clearValue()\"\n >\n <sui-icon name=\"close-circle-line\" [size]=\"clearPx()\" />\n </button>\n }\n\n <!-- Password toggle button -->\n @if (type() === 'password-toggle' && !isDisabled()) {\n <button\n type=\"button\"\n class=\"sui-input__eye\"\n [attr.aria-label]=\"showPassword() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n (click)=\"togglePassword()\"\n >\n <sui-icon [name]=\"showPassword() ? 'eye-off-line' : 'eye-line'\" [size]=\"20\" />\n </button>\n }\n\n <!-- Built-in icon slot (right) -->\n @if (icon() && iconPosition() === 'right') {\n <span class=\"sui-input__icon sui-input__icon--right\">\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n </span>\n }\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n [icon]=\"_resolvedHintIcon()\"\n class=\"sui-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-input__label-host{display:block;margin-bottom:4px}.sui-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-input__field{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-input__field{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-input__field,:host(:not([data-sui-size])) .sui-input__field{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}:host([data-sui-size=large]) .sui-input__field{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:48px}:host([data-sui-size=xlarge]) .sui-input__field{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:52px}:host([data-sui-full-radius]) .sui-input__field{border-radius:999px}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):hover{border-color:var(--sui-stroke-sub-300)}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):focus-within{border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-input__field--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-input__field--error:not(.sui-input__field--disabled):hover{border-color:var(--sui-state-error-base)}.sui-input__field--error:not(.sui-input__field--disabled):focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10)}.sui-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-input__field--readonly{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200);box-shadow:none}.sui-input__field ::ng-deep [data-slot=start],.sui-input__field ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-leading-control]) .sui-input__field ::ng-deep [data-slot=start],:host([data-sui-trailing-control]) .sui-input__field ::ng-deep [data-slot=end]{width:auto;height:auto;align-self:stretch;pointer-events:auto}.sui-input__inner{display:contents}.sui-input__field--split{align-items:stretch;overflow:hidden;padding:0!important;gap:0!important}.sui-input__field--split .sui-input__inner{display:flex;flex:1 1 auto;min-width:0;align-items:center;box-sizing:border-box}:host([data-sui-size=xsmall]) .sui-input__field--split .sui-input__inner{gap:6px;padding:5px 6px 5px 8px}:host([data-sui-size=small]) .sui-input__field--split .sui-input__inner{gap:8px;padding:7px 8px 7px 10px}:host([data-sui-size=medium]) .sui-input__field--split .sui-input__inner,:host(:not([data-sui-size])) .sui-input__field--split .sui-input__inner{gap:8px;padding:9px 10px 9px 12px}:host([data-sui-size=large]) .sui-input__field--split .sui-input__inner{gap:10px;padding:11px 12px 11px 14px}:host([data-sui-size=xlarge]) .sui-input__field--split .sui-input__inner{gap:10px;padding:13px 14px 13px 16px}.sui-input__field--split-trailing .sui-input__inner{border-right:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-trailing.sui-input__field--error .sui-input__inner{border-right-color:var(--sui-state-error-base)}.sui-input__field--split-trailing.sui-input__field--disabled .sui-input__inner{border-right-color:transparent}.sui-input__field--split-trailing ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:auto;align-self:stretch;color:var(--sui-icon-sub-600);pointer-events:auto}:host([data-sui-size=xsmall]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:6px}:host([data-sui-size=small]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:8px}:host([data-sui-size=medium]) .sui-input__field--split-trailing ::ng-deep [data-slot=end],:host(:not([data-sui-size])) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:10px}:host([data-sui-size=large]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:12px}:host([data-sui-size=xlarge]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:14px}.sui-input__field--split-leading .sui-input__inner{border-left:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-leading.sui-input__field--error .sui-input__inner{border-left-color:var(--sui-state-error-base)}.sui-input__field--split-leading.sui-input__field--disabled .sui-input__inner{border-left-color:transparent}:host(:not([data-sui-leading-control])[data-sui-size=xsmall]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:6px 6px 6px 8px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=small]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:8px 8px 8px 10px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=medium]) .sui-input__field--split-leading ::ng-deep [data-slot=start],:host(:not([data-sui-leading-control]):not([data-sui-size])) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:10px 8px 10px 10px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=large]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:12px 10px 12px 12px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=xlarge]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:14px 10px 14px 14px;box-sizing:content-box}.sui-input__prefix{flex-shrink:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-sub-600);-webkit-user-select:none;user-select:none;pointer-events:none}.sui-input__icon{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-disabled]) .sui-input__icon{color:var(--sui-icon-disabled-300)}:host([data-sui-size=xsmall]) .sui-input__clear{width:12px;height:12px}:host([data-sui-size=small]) .sui-input__clear{width:14px;height:14px}:host([data-sui-size=large]) .sui-input__clear{width:18px;height:18px}:host([data-sui-size=xlarge]) .sui-input__clear{width:20px;height:20px}.sui-input__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;opacity:.7;line-height:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__clear:hover{opacity:1;color:var(--sui-text-strong-950)}.sui-input__clear:focus{outline:none}.sui-input__eye{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;line-height:0;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__eye:hover{color:var(--sui-text-strong-950)}.sui-input__eye:focus{outline:none}.sui-input__control{flex:1 1 auto;min-width:0;border:none;outline:none;background:transparent;padding:0;margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-strong-950);-webkit-appearance:none;appearance:none;box-sizing:border-box}.sui-input__control[type=date],.sui-input__control[type=time],.sui-input__control[type=datetime-local],.sui-input__control[type=month],.sui-input__control[type=week]{-webkit-appearance:none;appearance:none;min-height:1.25em}.sui-input__control[type=date]::-webkit-date-and-time-value,.sui-input__control[type=time]::-webkit-date-and-time-value,.sui-input__control[type=datetime-local]::-webkit-date-and-time-value,.sui-input__control[type=month]::-webkit-date-and-time-value,.sui-input__control[type=week]::-webkit-date-and-time-value{text-align:left;margin:0}.sui-input__control[type=date]::-webkit-calendar-picker-indicator,.sui-input__control[type=time]::-webkit-calendar-picker-indicator,.sui-input__control[type=datetime-local]::-webkit-calendar-picker-indicator,.sui-input__control[type=month]::-webkit-calendar-picker-indicator,.sui-input__control[type=week]::-webkit-calendar-picker-indicator{margin-left:auto;opacity:.55;cursor:pointer}@media(max-width:767px){.sui-input__control{font-size:16px}}.sui-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-input__control:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed;-webkit-text-fill-color:var(--sui-text-disabled-300)}.sui-input__control[readonly]{color:var(--sui-text-sub-600);cursor:default}.sui-input__control:focus{outline:none}.sui-input__control[type=number]{-moz-appearance:textfield}.sui-input__control[type=number]::-webkit-inner-spin-button,.sui-input__control[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.sui-input__control[type=search]::-webkit-search-decoration,.sui-input__control[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.sui-input__hint-host{display:block;margin-top:4px}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "link", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10522
10559
|
}
|
|
10523
10560
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiInput, decorators: [{
|
|
10524
10561
|
type: Component,
|
|
@@ -10545,8 +10582,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
10545
10582
|
decorativo. */
|
|
10546
10583
|
'[attr.data-sui-leading-control]': 'leadingControl() ? "" : null',
|
|
10547
10584
|
'[attr.data-sui-trailing-control]': 'trailingControl() ? "" : null',
|
|
10548
|
-
}, template: "@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"labelSize()\"\n class=\"sui-input__label-host\"\n />\n}\n\n<div\n class=\"sui-input__field\"\n [class.sui-input__field--error]=\"error()\"\n [class.sui-input__field--disabled]=\"isDisabled()\"\n [class.sui-input__field--readonly]=\"readonly()\"\n [class.sui-input__field--split]=\"_hasLeadingDivider() || _hasTrailingDivider()\"\n [class.sui-input__field--split-leading]=\"_hasLeadingDivider()\"\n [class.sui-input__field--split-trailing]=\"_hasTrailingDivider()\"\n [class.sui-input__field--button]=\"type() === 'button'\"\n>\n <!--\n Split-field con divisor vertical (gen\u00E9rico por lado):\n - trailing (Figma node 332:1667 \"Button\"): acci\u00F3n a la derecha + divisor\n border-right. `type='button'` lo activa solo.\n - leading (Figma node 313:10267 \"Phone\"): afijo interactivo a la izquierda\n (ej. country select) + divisor border-left.\n El input + \u00EDconos van en la zona interna `.sui-input__inner`, que lleva el\n padding y el/los border(s) de divisor. Los `[data-slot=start/end]` quedan\n flush a su lado como zonas de afijo. Para los types sin divisor,\n `.sui-input__inner` es transparente (display: contents) y el layout es el de\n siempre.\n -->\n\n <!-- ng-content start slot \u2014 afijo leading (flush cuando es control/divisor) -->\n <ng-content select=\"[data-slot=start]\" />\n\n <div class=\"sui-input__inner\">\n <!-- Built-in icon slot (left) -->\n @if (icon() && iconPosition() === 'left') {\n <span class=\"sui-input__icon sui-input__icon--left\">\n <sui-icon [name]=\"icon()!\" [size]=\"iconPx()\" />\n </span>\n }\n\n <!-- Prefix label (S/, $, %) -->\n @if (prefix()) {\n <span class=\"sui-input__prefix\">{{ prefix() }}</span>\n }\n\n <input\n #inputEl\n class=\"sui-input__control\"\n [type]=\"nativeType()\"\n [attr.inputmode]=\"inputMode()\"\n [value]=\"\n type() === 'amount'\n ? displayAmountValue()\n : type() === 'card'\n ? displayCardValue()\n : value()\n \"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"type() === 'card' ? (maxlength() ?? 19) : maxlength()\"\n [attr.min]=\"type() === 'number' ? min() : null\"\n [attr.max]=\"type() === 'number' ? max() : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (keydown)=\"onKeydown($event)\"\n (paste)=\"onPaste($event)\"\n />\n </div>\n\n <!-- ng-content end slot (backward compat) -->\n <ng-content select=\"[data-slot=end]\" />\n\n <!-- Clear button -->\n @if (showClear() && value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"sui-input__clear\"\n aria-label=\"Limpiar\"\n (click)=\"clearValue()\"\n >\n <sui-icon name=\"close-circle-line\" [size]=\"clearPx()\" />\n </button>\n }\n\n <!-- Password toggle button -->\n @if (type() === 'password-toggle' && !isDisabled()) {\n <button\n type=\"button\"\n class=\"sui-input__eye\"\n [attr.aria-label]=\"showPassword() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n (click)=\"togglePassword()\"\n >\n <sui-icon [name]=\"showPassword() ? 'eye-off-line' : 'eye-line'\" [size]=\"iconPx()\" />\n </button>\n }\n\n <!-- Built-in icon slot (right) -->\n @if (icon() && iconPosition() === 'right') {\n <span class=\"sui-input__icon sui-input__icon--right\">\n <sui-icon [name]=\"icon()!\" [size]=\"iconPx()\" />\n </span>\n }\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n [icon]=\"_resolvedHintIcon()\"\n class=\"sui-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-input__label-host{display:block;margin-bottom:4px}.sui-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-input__field{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-input__field{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-input__field,:host(:not([data-sui-size])) .sui-input__field{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}:host([data-sui-size=large]) .sui-input__field{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:48px}:host([data-sui-size=xlarge]) .sui-input__field{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:52px}:host([data-sui-full-radius]) .sui-input__field{border-radius:999px}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):hover{border-color:var(--sui-stroke-sub-300)}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):focus-within{border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-input__field--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-input__field--error:not(.sui-input__field--disabled):hover{border-color:var(--sui-state-error-base)}.sui-input__field--error:not(.sui-input__field--disabled):focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10)}.sui-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-input__field--readonly{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200);box-shadow:none}.sui-input__field ::ng-deep [data-slot=start],.sui-input__field ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-leading-control]) .sui-input__field ::ng-deep [data-slot=start],:host([data-sui-trailing-control]) .sui-input__field ::ng-deep [data-slot=end]{width:auto;height:auto;align-self:stretch;pointer-events:auto}.sui-input__inner{display:contents}.sui-input__field--split{align-items:stretch;overflow:hidden;padding:0!important;gap:0!important}.sui-input__field--split .sui-input__inner{display:flex;flex:1 1 auto;min-width:0;align-items:center;box-sizing:border-box}:host([data-sui-size=xsmall]) .sui-input__field--split .sui-input__inner{gap:6px;padding:5px 6px 5px 8px}:host([data-sui-size=small]) .sui-input__field--split .sui-input__inner{gap:8px;padding:7px 8px 7px 10px}:host([data-sui-size=medium]) .sui-input__field--split .sui-input__inner,:host(:not([data-sui-size])) .sui-input__field--split .sui-input__inner{gap:8px;padding:9px 10px 9px 12px}:host([data-sui-size=large]) .sui-input__field--split .sui-input__inner{gap:10px;padding:11px 12px 11px 14px}:host([data-sui-size=xlarge]) .sui-input__field--split .sui-input__inner{gap:10px;padding:13px 14px 13px 16px}.sui-input__field--split-trailing .sui-input__inner{border-right:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-trailing.sui-input__field--error .sui-input__inner{border-right-color:var(--sui-state-error-base)}.sui-input__field--split-trailing.sui-input__field--disabled .sui-input__inner{border-right-color:transparent}.sui-input__field--split-trailing ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:auto;align-self:stretch;color:var(--sui-icon-sub-600);pointer-events:auto}:host([data-sui-size=xsmall]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:6px}:host([data-sui-size=small]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:8px}:host([data-sui-size=medium]) .sui-input__field--split-trailing ::ng-deep [data-slot=end],:host(:not([data-sui-size])) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:10px}:host([data-sui-size=large]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:12px}:host([data-sui-size=xlarge]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:14px}.sui-input__field--split-leading .sui-input__inner{border-left:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-leading.sui-input__field--error .sui-input__inner{border-left-color:var(--sui-state-error-base)}.sui-input__field--split-leading.sui-input__field--disabled .sui-input__inner{border-left-color:transparent}:host(:not([data-sui-leading-control])[data-sui-size=xsmall]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:6px 6px 6px 8px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=small]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:8px 8px 8px 10px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=medium]) .sui-input__field--split-leading ::ng-deep [data-slot=start],:host(:not([data-sui-leading-control]):not([data-sui-size])) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:10px 8px 10px 10px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=large]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:12px 10px 12px 12px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=xlarge]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:14px 10px 14px 14px;box-sizing:content-box}.sui-input__prefix{flex-shrink:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-sub-600);-webkit-user-select:none;user-select:none;pointer-events:none}.sui-input__icon{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-disabled]) .sui-input__icon{color:var(--sui-icon-disabled-300)}:host([data-sui-size=large]) .sui-input__clear{width:18px;height:18px}:host([data-sui-size=xlarge]) .sui-input__clear{width:20px;height:20px}.sui-input__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;opacity:.7;line-height:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__clear:hover{opacity:1;color:var(--sui-text-strong-950)}.sui-input__clear:focus{outline:none}.sui-input__eye{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;line-height:0;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__eye:hover{color:var(--sui-text-strong-950)}.sui-input__eye:focus{outline:none}.sui-input__control{flex:1 1 auto;min-width:0;border:none;outline:none;background:transparent;padding:0;margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-strong-950);-webkit-appearance:none;appearance:none;box-sizing:border-box}.sui-input__control[type=date],.sui-input__control[type=time],.sui-input__control[type=datetime-local],.sui-input__control[type=month],.sui-input__control[type=week]{-webkit-appearance:none;appearance:none;min-height:1.25em}.sui-input__control[type=date]::-webkit-date-and-time-value,.sui-input__control[type=time]::-webkit-date-and-time-value,.sui-input__control[type=datetime-local]::-webkit-date-and-time-value,.sui-input__control[type=month]::-webkit-date-and-time-value,.sui-input__control[type=week]::-webkit-date-and-time-value{text-align:left;margin:0}.sui-input__control[type=date]::-webkit-calendar-picker-indicator,.sui-input__control[type=time]::-webkit-calendar-picker-indicator,.sui-input__control[type=datetime-local]::-webkit-calendar-picker-indicator,.sui-input__control[type=month]::-webkit-calendar-picker-indicator,.sui-input__control[type=week]::-webkit-calendar-picker-indicator{margin-left:auto;opacity:.55;cursor:pointer}@media(max-width:767px){.sui-input__control{font-size:16px}}.sui-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-input__control:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed;-webkit-text-fill-color:var(--sui-text-disabled-300)}.sui-input__control[readonly]{color:var(--sui-text-sub-600);cursor:default}.sui-input__control:focus{outline:none}.sui-input__control[type=number]{-moz-appearance:textfield}.sui-input__control[type=number]::-webkit-inner-spin-button,.sui-input__control[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.sui-input__control[type=search]::-webkit-search-decoration,.sui-input__control[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.sui-input__hint-host{display:block;margin-top:4px}\n"] }]
|
|
10549
|
-
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], fullRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullRadius", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], hintIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintIcon", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], paste: [{ type: i0.Input, args: [{ isSignal: true, alias: "paste", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }], leadingDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingDivider", required: false }] }], trailingDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingDivider", required: false }] }], leadingControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingControl", required: false }] }], trailingControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingControl", required: false }] }], inputEl: [{
|
|
10585
|
+
}, template: "@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"labelSize()\"\n class=\"sui-input__label-host\"\n />\n}\n\n<div\n class=\"sui-input__field\"\n [class.sui-input__field--error]=\"error()\"\n [class.sui-input__field--disabled]=\"isDisabled()\"\n [class.sui-input__field--readonly]=\"readonly()\"\n [class.sui-input__field--split]=\"_hasLeadingDivider() || _hasTrailingDivider()\"\n [class.sui-input__field--split-leading]=\"_hasLeadingDivider()\"\n [class.sui-input__field--split-trailing]=\"_hasTrailingDivider()\"\n [class.sui-input__field--button]=\"type() === 'button'\"\n>\n <!--\n Split-field con divisor vertical (gen\u00E9rico por lado):\n - trailing (Figma node 332:1667 \"Button\"): acci\u00F3n a la derecha + divisor\n border-right. `type='button'` lo activa solo.\n - leading (Figma node 313:10267 \"Phone\"): afijo interactivo a la izquierda\n (ej. country select) + divisor border-left.\n El input + \u00EDconos van en la zona interna `.sui-input__inner`, que lleva el\n padding y el/los border(s) de divisor. Los `[data-slot=start/end]` quedan\n flush a su lado como zonas de afijo. Para los types sin divisor,\n `.sui-input__inner` es transparente (display: contents) y el layout es el de\n siempre.\n -->\n\n <!-- ng-content start slot \u2014 afijo leading (flush cuando es control/divisor) -->\n <ng-content select=\"[data-slot=start]\" />\n\n <div class=\"sui-input__inner\">\n <!-- Built-in icon slot (left) -->\n @if (icon() && iconPosition() === 'left') {\n <span class=\"sui-input__icon sui-input__icon--left\">\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n </span>\n }\n\n <!-- Prefix label (S/, $, %) -->\n @if (prefix()) {\n <span class=\"sui-input__prefix\">{{ prefix() }}</span>\n }\n\n <input\n #inputEl\n class=\"sui-input__control\"\n [type]=\"nativeType()\"\n [attr.inputmode]=\"inputMode()\"\n [attr.enterkeyhint]=\"enterKeyHint()\"\n [value]=\"\n type() === 'amount'\n ? displayAmountValue()\n : type() === 'card'\n ? displayCardValue()\n : value()\n \"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"type() === 'card' ? (maxlength() ?? 19) : maxlength()\"\n [attr.min]=\"type() === 'number' ? min() : null\"\n [attr.max]=\"type() === 'number' ? max() : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (keydown)=\"onKeydown($event)\"\n (paste)=\"onPaste($event)\"\n />\n </div>\n\n <!-- ng-content end slot (backward compat) -->\n <ng-content select=\"[data-slot=end]\" />\n\n <!-- Clear button -->\n @if (showClear() && value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"sui-input__clear\"\n aria-label=\"Limpiar\"\n (click)=\"clearValue()\"\n >\n <sui-icon name=\"close-circle-line\" [size]=\"clearPx()\" />\n </button>\n }\n\n <!-- Password toggle button -->\n @if (type() === 'password-toggle' && !isDisabled()) {\n <button\n type=\"button\"\n class=\"sui-input__eye\"\n [attr.aria-label]=\"showPassword() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n (click)=\"togglePassword()\"\n >\n <sui-icon [name]=\"showPassword() ? 'eye-off-line' : 'eye-line'\" [size]=\"20\" />\n </button>\n }\n\n <!-- Built-in icon slot (right) -->\n @if (icon() && iconPosition() === 'right') {\n <span class=\"sui-input__icon sui-input__icon--right\">\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n </span>\n }\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n [icon]=\"_resolvedHintIcon()\"\n class=\"sui-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-input__label-host{display:block;margin-bottom:4px}.sui-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-input__field{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-input__field{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-input__field,:host(:not([data-sui-size])) .sui-input__field{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}:host([data-sui-size=large]) .sui-input__field{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:48px}:host([data-sui-size=xlarge]) .sui-input__field{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:52px}:host([data-sui-full-radius]) .sui-input__field{border-radius:999px}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):hover{border-color:var(--sui-stroke-sub-300)}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):focus-within{border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-input__field--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-input__field--error:not(.sui-input__field--disabled):hover{border-color:var(--sui-state-error-base)}.sui-input__field--error:not(.sui-input__field--disabled):focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10)}.sui-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-input__field--readonly{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200);box-shadow:none}.sui-input__field ::ng-deep [data-slot=start],.sui-input__field ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-leading-control]) .sui-input__field ::ng-deep [data-slot=start],:host([data-sui-trailing-control]) .sui-input__field ::ng-deep [data-slot=end]{width:auto;height:auto;align-self:stretch;pointer-events:auto}.sui-input__inner{display:contents}.sui-input__field--split{align-items:stretch;overflow:hidden;padding:0!important;gap:0!important}.sui-input__field--split .sui-input__inner{display:flex;flex:1 1 auto;min-width:0;align-items:center;box-sizing:border-box}:host([data-sui-size=xsmall]) .sui-input__field--split .sui-input__inner{gap:6px;padding:5px 6px 5px 8px}:host([data-sui-size=small]) .sui-input__field--split .sui-input__inner{gap:8px;padding:7px 8px 7px 10px}:host([data-sui-size=medium]) .sui-input__field--split .sui-input__inner,:host(:not([data-sui-size])) .sui-input__field--split .sui-input__inner{gap:8px;padding:9px 10px 9px 12px}:host([data-sui-size=large]) .sui-input__field--split .sui-input__inner{gap:10px;padding:11px 12px 11px 14px}:host([data-sui-size=xlarge]) .sui-input__field--split .sui-input__inner{gap:10px;padding:13px 14px 13px 16px}.sui-input__field--split-trailing .sui-input__inner{border-right:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-trailing.sui-input__field--error .sui-input__inner{border-right-color:var(--sui-state-error-base)}.sui-input__field--split-trailing.sui-input__field--disabled .sui-input__inner{border-right-color:transparent}.sui-input__field--split-trailing ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:auto;align-self:stretch;color:var(--sui-icon-sub-600);pointer-events:auto}:host([data-sui-size=xsmall]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:6px}:host([data-sui-size=small]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:8px}:host([data-sui-size=medium]) .sui-input__field--split-trailing ::ng-deep [data-slot=end],:host(:not([data-sui-size])) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:10px}:host([data-sui-size=large]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:12px}:host([data-sui-size=xlarge]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:14px}.sui-input__field--split-leading .sui-input__inner{border-left:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-leading.sui-input__field--error .sui-input__inner{border-left-color:var(--sui-state-error-base)}.sui-input__field--split-leading.sui-input__field--disabled .sui-input__inner{border-left-color:transparent}:host(:not([data-sui-leading-control])[data-sui-size=xsmall]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:6px 6px 6px 8px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=small]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:8px 8px 8px 10px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=medium]) .sui-input__field--split-leading ::ng-deep [data-slot=start],:host(:not([data-sui-leading-control]):not([data-sui-size])) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:10px 8px 10px 10px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=large]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:12px 10px 12px 12px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=xlarge]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:14px 10px 14px 14px;box-sizing:content-box}.sui-input__prefix{flex-shrink:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-sub-600);-webkit-user-select:none;user-select:none;pointer-events:none}.sui-input__icon{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-disabled]) .sui-input__icon{color:var(--sui-icon-disabled-300)}:host([data-sui-size=xsmall]) .sui-input__clear{width:12px;height:12px}:host([data-sui-size=small]) .sui-input__clear{width:14px;height:14px}:host([data-sui-size=large]) .sui-input__clear{width:18px;height:18px}:host([data-sui-size=xlarge]) .sui-input__clear{width:20px;height:20px}.sui-input__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;opacity:.7;line-height:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__clear:hover{opacity:1;color:var(--sui-text-strong-950)}.sui-input__clear:focus{outline:none}.sui-input__eye{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;line-height:0;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__eye:hover{color:var(--sui-text-strong-950)}.sui-input__eye:focus{outline:none}.sui-input__control{flex:1 1 auto;min-width:0;border:none;outline:none;background:transparent;padding:0;margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-strong-950);-webkit-appearance:none;appearance:none;box-sizing:border-box}.sui-input__control[type=date],.sui-input__control[type=time],.sui-input__control[type=datetime-local],.sui-input__control[type=month],.sui-input__control[type=week]{-webkit-appearance:none;appearance:none;min-height:1.25em}.sui-input__control[type=date]::-webkit-date-and-time-value,.sui-input__control[type=time]::-webkit-date-and-time-value,.sui-input__control[type=datetime-local]::-webkit-date-and-time-value,.sui-input__control[type=month]::-webkit-date-and-time-value,.sui-input__control[type=week]::-webkit-date-and-time-value{text-align:left;margin:0}.sui-input__control[type=date]::-webkit-calendar-picker-indicator,.sui-input__control[type=time]::-webkit-calendar-picker-indicator,.sui-input__control[type=datetime-local]::-webkit-calendar-picker-indicator,.sui-input__control[type=month]::-webkit-calendar-picker-indicator,.sui-input__control[type=week]::-webkit-calendar-picker-indicator{margin-left:auto;opacity:.55;cursor:pointer}@media(max-width:767px){.sui-input__control{font-size:16px}}.sui-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-input__control:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed;-webkit-text-fill-color:var(--sui-text-disabled-300)}.sui-input__control[readonly]{color:var(--sui-text-sub-600);cursor:default}.sui-input__control:focus{outline:none}.sui-input__control[type=number]{-moz-appearance:textfield}.sui-input__control[type=number]::-webkit-inner-spin-button,.sui-input__control[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.sui-input__control[type=search]::-webkit-search-decoration,.sui-input__control[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.sui-input__hint-host{display:block;margin-top:4px}\n"] }]
|
|
10586
|
+
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], fullRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullRadius", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], hintIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintIcon", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], enterkeyhint: [{ type: i0.Input, args: [{ isSignal: true, alias: "enterkeyhint", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], paste: [{ type: i0.Input, args: [{ isSignal: true, alias: "paste", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }], leadingDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingDivider", required: false }] }], trailingDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingDivider", required: false }] }], leadingControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingControl", required: false }] }], trailingControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingControl", required: false }] }], inputEl: [{
|
|
10550
10587
|
type: ViewChild,
|
|
10551
10588
|
args: ['inputEl']
|
|
10552
10589
|
}], onDocumentTap: [{
|