@ajuarezso/sui-design-system 0.17.1 → 0.17.2
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();
|
|
@@ -10518,7 +10526,7 @@ class SuiInput {
|
|
|
10518
10526
|
useExisting: forwardRef(() => SuiInput),
|
|
10519
10527
|
multi: true,
|
|
10520
10528
|
},
|
|
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 });
|
|
10529
|
+
], 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 [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
10530
|
}
|
|
10523
10531
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiInput, decorators: [{
|
|
10524
10532
|
type: Component,
|
|
@@ -10545,7 +10553,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
10545
10553
|
decorativo. */
|
|
10546
10554
|
'[attr.data-sui-leading-control]': 'leadingControl() ? "" : null',
|
|
10547
10555
|
'[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"] }]
|
|
10556
|
+
}, 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 [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"] }]
|
|
10549
10557
|
}], 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: [{
|
|
10550
10558
|
type: ViewChild,
|
|
10551
10559
|
args: ['inputEl']
|