@ajuarezso/sui-design-system 0.14.1 → 0.14.3
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.
|
@@ -9872,10 +9872,15 @@ class SuiInput {
|
|
|
9872
9872
|
* hay teclado abierto, por eso escuchamos también `touchstart` (nativo iOS)
|
|
9873
9873
|
* y `mousedown` (web fallback). Cualquiera de los tres dispara el blur.
|
|
9874
9874
|
*
|
|
9875
|
-
*
|
|
9876
|
-
*
|
|
9877
|
-
*
|
|
9878
|
-
*
|
|
9875
|
+
* Solo hace blur cuando el elemento enfocado vive DENTRO de este host: si el
|
|
9876
|
+
* foco está en otro lado (otro input, un textarea, nada), acá no hay teclado
|
|
9877
|
+
* que cerrar y tocarlo es un bug. El listener es a nivel `document`, así que
|
|
9878
|
+
* cada instancia de la página recibe todos los taps: con un blur incondicional
|
|
9879
|
+
* de `inputEl`, tocar el texto de un input cerraba el teclado porque los OTROS
|
|
9880
|
+
* sui-input de la pantalla hacían blur de los suyos —y en iOS un blur con el
|
|
9881
|
+
* teclado abierto lo cierra aunque el elemento no tenga el foco. Se veía en
|
|
9882
|
+
* cualquier formulario con más de un campo y no en el buscador del home, que
|
|
9883
|
+
* tiene uno solo.
|
|
9879
9884
|
*/
|
|
9880
9885
|
onDocumentTap(event) {
|
|
9881
9886
|
if (!this.closeOnOutsideClick())
|
|
@@ -9885,12 +9890,8 @@ class SuiInput {
|
|
|
9885
9890
|
if (!target || host.contains(target))
|
|
9886
9891
|
return;
|
|
9887
9892
|
const active = document.activeElement;
|
|
9888
|
-
if (active && host.contains(active))
|
|
9893
|
+
if (active && host.contains(active))
|
|
9889
9894
|
active.blur();
|
|
9890
|
-
}
|
|
9891
|
-
else {
|
|
9892
|
-
this.inputEl?.nativeElement.blur();
|
|
9893
|
-
}
|
|
9894
9895
|
}
|
|
9895
9896
|
_disabledByForm = signal(false, ...(ngDevMode ? [{ debugName: "_disabledByForm" }] : /* istanbul ignore next */ []));
|
|
9896
9897
|
isDisabled = computed(() => this.disabled() || this._disabledByForm(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
@@ -10368,7 +10369,7 @@ class SuiInput {
|
|
|
10368
10369
|
useExisting: forwardRef(() => SuiInput),
|
|
10369
10370
|
multi: true,
|
|
10370
10371
|
},
|
|
10371
|
-
], 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]=\"size()\"\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]=\"16\" />\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}.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}.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}.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}.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)}.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}@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 });
|
|
10372
|
+
], 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]=\"size()\"\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]=\"16\" />\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}.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}.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}.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}.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)}.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 });
|
|
10372
10373
|
}
|
|
10373
10374
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiInput, decorators: [{
|
|
10374
10375
|
type: Component,
|
|
@@ -10394,7 +10395,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
10394
10395
|
decorativo. */
|
|
10395
10396
|
'[attr.data-sui-leading-control]': 'leadingControl() ? "" : null',
|
|
10396
10397
|
'[attr.data-sui-trailing-control]': 'trailingControl() ? "" : null',
|
|
10397
|
-
}, template: "@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"size()\"\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]=\"16\" />\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}.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}.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}.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}.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)}.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}@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"] }]
|
|
10398
|
+
}, template: "@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"size()\"\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]=\"16\" />\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}.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}.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}.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}.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)}.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"] }]
|
|
10398
10399
|
}], 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 }] }], 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: [{
|
|
10399
10400
|
type: ViewChild,
|
|
10400
10401
|
args: ['inputEl']
|