@litigiovirtual/ius-design-components 1.0.64 → 1.0.65
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.
- package/esm2022/lib/button-auth/button-auth.component.mjs +90 -6
- package/esm2022/lib/input-otp/index.mjs +2 -0
- package/esm2022/lib/input-otp/input-otp.component.mjs +173 -0
- package/esm2022/lib/input-password/index.mjs +2 -0
- package/esm2022/lib/input-password/input-password.component.mjs +71 -0
- package/esm2022/public-api.mjs +3 -1
- package/fesm2022/litigiovirtual-ius-design-components.mjs +320 -7
- package/fesm2022/litigiovirtual-ius-design-components.mjs.map +1 -1
- package/lib/button-auth/button-auth.component.d.ts +12 -0
- package/lib/input-otp/index.d.ts +1 -0
- package/lib/input-otp/input-otp.component.d.ts +34 -0
- package/lib/input-password/index.d.ts +1 -0
- package/lib/input-password/input-password.component.d.ts +24 -0
- package/package.json +1 -1
- package/public-api.d.ts +2 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, Component, EventEmitter, Output, HostListener } from '@angular/core';
|
|
2
|
+
import { Input, Component, EventEmitter, Output, HostListener, ViewChildren } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/platform-browser';
|
|
@@ -3180,22 +3180,104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3180
3180
|
}] } });
|
|
3181
3181
|
|
|
3182
3182
|
class ButtonAuthComponent {
|
|
3183
|
-
constructor() {
|
|
3183
|
+
constructor(sanitizer) {
|
|
3184
|
+
this.sanitizer = sanitizer;
|
|
3184
3185
|
this.disabled = false;
|
|
3185
3186
|
this.buttonClicked = new EventEmitter();
|
|
3187
|
+
this.colorDisabled = '#BFBFBF';
|
|
3188
|
+
this.svg = '';
|
|
3189
|
+
this.svgGoogle = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
3190
|
+
<path d="M18.8 10.2084C18.8 9.55837 18.7417 8.93337 18.6333 8.33337H10V11.8834H14.9333C14.7167 13.025 14.0667 13.9917 13.0917 14.6417V16.95H16.0667C17.8 15.35 18.8 13 18.8 10.2084Z" fill="#4285F4"/>
|
|
3191
|
+
<path d="M10 19.1667C12.475 19.1667 14.55 18.35 16.0667 16.95L13.0917 14.6417C12.275 15.1917 11.2333 15.525 10 15.525C7.61668 15.525 5.59168 13.9167 4.86668 11.75H1.81668V14.1167C3.32501 17.1083 6.41668 19.1667 10 19.1667Z" fill="#34A853"/>
|
|
3192
|
+
<path d="M4.86668 11.7417C4.68334 11.1917 4.57501 10.6084 4.57501 10.0001C4.57501 9.39172 4.68334 8.80839 4.86668 8.25839V5.89172H1.81668C1.19168 7.12506 0.833344 8.51672 0.833344 10.0001C0.833344 11.4834 1.19168 12.8751 1.81668 14.1084L4.19168 12.2584L4.86668 11.7417Z" fill="#FBBC05"/>
|
|
3193
|
+
<path d="M10 4.48337C11.35 4.48337 12.55 4.95004 13.5083 5.85004L16.1333 3.22504C14.5417 1.74171 12.475 0.833374 10 0.833374C6.41668 0.833374 3.32501 2.89171 1.81668 5.89171L4.86668 8.25837C5.59168 6.09171 7.61668 4.48337 10 4.48337Z" fill="#EA4335"/>
|
|
3194
|
+
</svg>`;
|
|
3195
|
+
this.svgGoogleDisabled = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
3196
|
+
<path d="M18.8 10.2084C18.8 9.55837 18.7417 8.93337 18.6333 8.33337H10V11.8834H14.9333C14.7167 13.025 14.0667 13.9917 13.0917 14.6417V16.95H16.0667C17.8 15.35 18.8 13 18.8 10.2084Z" fill="#BFBFBF"/>
|
|
3197
|
+
<path d="M10 19.1667C12.475 19.1667 14.55 18.35 16.0667 16.95L13.0917 14.6417C12.275 15.1917 11.2333 15.525 10 15.525C7.61668 15.525 5.59168 13.9167 4.86668 11.75H1.81668V14.1167C3.32501 17.1083 6.41668 19.1667 10 19.1667Z" fill="#BFBFBF"/>
|
|
3198
|
+
<path d="M4.86668 11.7417C4.68334 11.1917 4.57501 10.6084 4.57501 10.0001C4.57501 9.39172 4.68334 8.80839 4.86668 8.25839V5.89172H1.81668C1.19168 7.12506 0.833344 8.51672 0.833344 10.0001C0.833344 11.4834 1.19168 12.8751 1.81668 14.1084L4.19168 12.2584L4.86668 11.7417Z" fill="#BFBFBF"/>
|
|
3199
|
+
<path d="M10 4.48337C11.35 4.48337 12.55 4.95004 13.5083 5.85004L16.1333 3.22504C14.5417 1.74171 12.475 0.833374 10 0.833374C6.41668 0.833374 3.32501 2.89171 1.81668 5.89171L4.86668 8.25837C5.59168 6.09171 7.61668 4.48337 10 4.48337Z" fill="#BFBFBF"/>
|
|
3200
|
+
</svg>`;
|
|
3201
|
+
this.svgMicrosoft = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
3202
|
+
<g clip-path="url(#clip0_1670_13811)">
|
|
3203
|
+
<path d="M0 0H20V20H0V0Z" fill="#F3F3F3"/>
|
|
3204
|
+
<path d="M0.869568 0.869507H9.56522V9.56516H0.869568V0.869507Z" fill="#F35325"/>
|
|
3205
|
+
<path d="M10.4348 0.869507H19.1304V9.56516H10.4348V0.869507Z" fill="#81BC06"/>
|
|
3206
|
+
<path d="M0.869568 10.4348H9.56522V19.1305H0.869568V10.4348Z" fill="#05A6F0"/>
|
|
3207
|
+
<path d="M10.4348 10.4348H19.1304V19.1305H10.4348V10.4348Z" fill="#FFBA08"/>
|
|
3208
|
+
</g>
|
|
3209
|
+
<defs>
|
|
3210
|
+
<clipPath id="clip0_1670_13811">
|
|
3211
|
+
<rect width="20" height="20" fill="white"/>
|
|
3212
|
+
</clipPath>
|
|
3213
|
+
</defs>
|
|
3214
|
+
</svg>`;
|
|
3215
|
+
this.svgMicrosoftDisabled = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
3216
|
+
<g clip-path="url(#clip0_1670_13817)">
|
|
3217
|
+
<path d="M0 0H20V20H0V0Z" fill="#F3F3F3"/>
|
|
3218
|
+
<path d="M0.869568 0.869507H9.56522V9.56516H0.869568V0.869507Z" fill="#BFBFBF"/>
|
|
3219
|
+
<path d="M10.4348 0.869507H19.1304V9.56516H10.4348V0.869507Z" fill="#BFBFBF"/>
|
|
3220
|
+
<path d="M0.869568 10.4348H9.56522V19.1305H0.869568V10.4348Z" fill="#BFBFBF"/>
|
|
3221
|
+
<path d="M10.4348 10.4348H19.1304V19.1305H10.4348V10.4348Z" fill="#BFBFBF"/>
|
|
3222
|
+
</g>
|
|
3223
|
+
<defs>
|
|
3224
|
+
<clipPath id="clip0_1670_13817">
|
|
3225
|
+
<rect width="20" height="20" fill="white"/>
|
|
3226
|
+
</clipPath>
|
|
3227
|
+
</defs>
|
|
3228
|
+
</svg>`;
|
|
3229
|
+
this.svgLinkedin = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
3230
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.22222 20H17.7778C19.0051 20 20 19.0051 20 17.7778V2.22222C20 0.994923 19.0051 0 17.7778 0H2.22222C0.994923 0 0 0.994923 0 2.22222V17.7778C0 19.0051 0.994923 20 2.22222 20Z" fill="#007EBB"/>
|
|
3231
|
+
</svg>`;
|
|
3232
|
+
this.svgLinkedinDisabled = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
3233
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.22222 20H17.7778C19.0051 20 20 19.0051 20 17.7778V2.22222C20 0.994923 19.0051 0 17.7778 0H2.22222C0.994923 0 0 0.994923 0 2.22222V17.7778C0 19.0051 0.994923 20 2.22222 20Z" fill="#BFBFBF"/>
|
|
3234
|
+
</svg>`;
|
|
3235
|
+
}
|
|
3236
|
+
ngOnInit() {
|
|
3237
|
+
var svgIcon = '';
|
|
3238
|
+
switch (this.textButton) {
|
|
3239
|
+
case 'Google':
|
|
3240
|
+
if (this.disabled) {
|
|
3241
|
+
svgIcon = this.svgGoogleDisabled;
|
|
3242
|
+
}
|
|
3243
|
+
else {
|
|
3244
|
+
svgIcon = this.svgGoogle;
|
|
3245
|
+
}
|
|
3246
|
+
break;
|
|
3247
|
+
case 'Microsoft':
|
|
3248
|
+
if (this.disabled) {
|
|
3249
|
+
svgIcon = this.svgMicrosoftDisabled;
|
|
3250
|
+
}
|
|
3251
|
+
else {
|
|
3252
|
+
svgIcon = this.svgMicrosoft;
|
|
3253
|
+
}
|
|
3254
|
+
break;
|
|
3255
|
+
case 'LinkedIn':
|
|
3256
|
+
if (this.disabled) {
|
|
3257
|
+
svgIcon = this.svgLinkedinDisabled;
|
|
3258
|
+
}
|
|
3259
|
+
else {
|
|
3260
|
+
svgIcon = this.svgLinkedin;
|
|
3261
|
+
}
|
|
3262
|
+
break;
|
|
3263
|
+
default:
|
|
3264
|
+
svgIcon = '';
|
|
3265
|
+
break;
|
|
3266
|
+
}
|
|
3267
|
+
this.svg = this.sanitizer.bypassSecurityTrustHtml(svgIcon) ?? '';
|
|
3186
3268
|
}
|
|
3187
3269
|
onClick() {
|
|
3188
3270
|
if (this.disabled == false) {
|
|
3189
3271
|
this.buttonClicked.emit();
|
|
3190
3272
|
}
|
|
3191
3273
|
}
|
|
3192
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonAuthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3193
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ButtonAuthComponent, isStandalone: true, selector: "ius-button-auth", inputs: { disabled: "disabled", textButton: "textButton" }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "<button class=\"ctn-button\"
|
|
3274
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonAuthComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3275
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ButtonAuthComponent, isStandalone: true, selector: "ius-button-auth", inputs: { disabled: "disabled", textButton: "textButton" }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "<button class=\"ctn-button\" [disabled]=\"disabled\">\r\n <span [innerHTML]=\"svg\" class=\"icon-btn\"></span>\r\n <span class=\"label-base\">{{textButton}}</span>\r\n</button>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.ctn-button{position:relative;display:flex;padding:12px 24px;justify-content:center;align-items:center;gap:4px;border:none;cursor:pointer;border-radius:14px;background:#f0f0f0;color:#333}.ctn-button:hover:not(:disabled){background-color:#bfbfbf}.ctn-button:active:not(:disabled){color:#fff;background-color:#0581bc}.ctn-button:disabled{color:#bfbfbf;background-color:#f5f5f5;cursor:default}.icon-btn{width:20px;height:20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
3194
3276
|
}
|
|
3195
3277
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonAuthComponent, decorators: [{
|
|
3196
3278
|
type: Component,
|
|
3197
|
-
args: [{ selector: 'ius-button-auth', standalone: true, imports: [], template: "<button class=\"ctn-button\"
|
|
3198
|
-
}], propDecorators: { disabled: [{
|
|
3279
|
+
args: [{ selector: 'ius-button-auth', standalone: true, imports: [CommonModule], template: "<button class=\"ctn-button\" [disabled]=\"disabled\">\r\n <span [innerHTML]=\"svg\" class=\"icon-btn\"></span>\r\n <span class=\"label-base\">{{textButton}}</span>\r\n</button>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.ctn-button{position:relative;display:flex;padding:12px 24px;justify-content:center;align-items:center;gap:4px;border:none;cursor:pointer;border-radius:14px;background:#f0f0f0;color:#333}.ctn-button:hover:not(:disabled){background-color:#bfbfbf}.ctn-button:active:not(:disabled){color:#fff;background-color:#0581bc}.ctn-button:disabled{color:#bfbfbf;background-color:#f5f5f5;cursor:default}.icon-btn{width:20px;height:20px}\n"] }]
|
|
3280
|
+
}], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { disabled: [{
|
|
3199
3281
|
type: Input
|
|
3200
3282
|
}], textButton: [{
|
|
3201
3283
|
type: Input
|
|
@@ -3203,9 +3285,240 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3203
3285
|
type: Output
|
|
3204
3286
|
}] } });
|
|
3205
3287
|
|
|
3288
|
+
class InputPasswordComponent {
|
|
3289
|
+
constructor() {
|
|
3290
|
+
this.isFocused = false;
|
|
3291
|
+
this.isAlertText = false;
|
|
3292
|
+
this.passwordVisible = false;
|
|
3293
|
+
this.textInput = '';
|
|
3294
|
+
this.required = true;
|
|
3295
|
+
this.disabled = false;
|
|
3296
|
+
this.showHelpText = false;
|
|
3297
|
+
this.labelInput = '';
|
|
3298
|
+
this.onChangesValueEvent = new EventEmitter();
|
|
3299
|
+
this.onKeyPressEvent = new EventEmitter();
|
|
3300
|
+
}
|
|
3301
|
+
onInput() {
|
|
3302
|
+
this.onChangesValueEvent.emit(this.textInput);
|
|
3303
|
+
}
|
|
3304
|
+
onFocus() {
|
|
3305
|
+
this.isFocused = true;
|
|
3306
|
+
}
|
|
3307
|
+
onBlur() {
|
|
3308
|
+
this.isFocused = false;
|
|
3309
|
+
if (this.required) {
|
|
3310
|
+
if (this.textInput === '') {
|
|
3311
|
+
this.isAlertText = true;
|
|
3312
|
+
}
|
|
3313
|
+
else {
|
|
3314
|
+
this.isAlertText = false;
|
|
3315
|
+
}
|
|
3316
|
+
}
|
|
3317
|
+
}
|
|
3318
|
+
togglePasswordVisibility() {
|
|
3319
|
+
this.passwordVisible = !this.passwordVisible;
|
|
3320
|
+
}
|
|
3321
|
+
onKeyPress(event) {
|
|
3322
|
+
this.onKeyPressEvent.next(this.textInput);
|
|
3323
|
+
}
|
|
3324
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3325
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InputPasswordComponent, isStandalone: true, selector: "ius-input-password", inputs: { textInput: "textInput", required: "required", disabled: "disabled", showHelpText: "showHelpText", labelSuperior: "labelSuperior", labelInferior: "labelInferior", labelInput: "labelInput", iconInput: "iconInput" }, outputs: { onChangesValueEvent: "onChangesValueEvent", onKeyPressEvent: "onKeyPressEvent" }, ngImport: i0, template: "<div class=\"container-general\">\r\n @if (labelSuperior) {\r\n <div class=\"container-label-sup\" [ngClass]=\"{\r\n 'disabled': disabled\r\n }\">\r\n @if(!disabled && required){\r\n <div class=\"icon-dot\"></div>\r\n }\r\n <span class=\"\">{{labelSuperior}}</span>\r\n @if(!disabled && showHelpText){\r\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\"></ius-icon-md>\r\n }\r\n <span>:</span>\r\n </div>\r\n }\r\n <div class=\"container-textfield\" [ngClass]=\"{\r\n 'disabled': disabled,\r\n 'focused': isFocused,\r\n 'alert': !isFocused && isAlertText && !disabled\r\n }\">\r\n @if (iconInput) {\r\n <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\r\n }\r\n <input [type]=\"passwordVisible ? 'text' : 'password'\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\" (input)=\"onInput()\"\r\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keypress)=\"onKeyPress($event)\">\r\n @if (!disabled && textInput) {\r\n <button class=\"button-delete\" (click)=\"togglePasswordVisibility()\">\r\n @if (passwordVisible) {\r\n <ius-icon-md iconName=\"icon-cancel\" class=\"icon-color-cancel\"></ius-icon-md>\r\n }@else{\r\n <ius-icon-md iconName=\"icon-cancel\" class=\"icon-color-cancel\"></ius-icon-md>\r\n }\r\n </button>\r\n }\r\n </div>\r\n @if (labelInferior && isFocused) {\r\n <span class=\"label-inf\">{{labelInferior}}</span>\r\n }\r\n @if (labelInferior && !isFocused && isAlertText) {\r\n <span class=\"label-inf\" [ngClass]=\"{\r\n 'alert': !isFocused && isAlertText && !disabled\r\n }\">{{labelInferior}}</span>\r\n }\r\n\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:flex-start;gap:4px;border:1px solid #f5f5f5;border-radius:8px;background:#f5f5f5;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px;transition:all .2s ease-in-out}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.disabled{background:#f5f5f5}.container-textfield.disabled .icon-color{color:#bfbfbf}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}.icon-color{color:#595959}.icon-color-cancel{color:#013169}input{display:flex;align-items:center;flex:1 0 0;border:none;outline:none;background-color:transparent;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.button-delete{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;color:#595959}.button-delete:hover{color:#013169}.container-label-sup{display:flex;align-items:center;gap:4px;margin-bottom:8px;color:#333;font-family:Roboto,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.container-label-sup.disabled{color:#bfbfbf}.icon-dot{display:flex;align-items:center;width:4px;height:4px;aspect-ratio:1/1;background-color:#db2e2a;border-radius:100px}.icon-color-help{color:#8c8c8c}.label-inf{display:flex;position:absolute;margin-top:4px;color:#595959;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.label-inf.alert{color:#931224}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
3326
|
+
}
|
|
3327
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputPasswordComponent, decorators: [{
|
|
3328
|
+
type: Component,
|
|
3329
|
+
args: [{ selector: 'ius-input-password', standalone: true, imports: [IconMdComponent, FormsModule, CommonModule], template: "<div class=\"container-general\">\r\n @if (labelSuperior) {\r\n <div class=\"container-label-sup\" [ngClass]=\"{\r\n 'disabled': disabled\r\n }\">\r\n @if(!disabled && required){\r\n <div class=\"icon-dot\"></div>\r\n }\r\n <span class=\"\">{{labelSuperior}}</span>\r\n @if(!disabled && showHelpText){\r\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\"></ius-icon-md>\r\n }\r\n <span>:</span>\r\n </div>\r\n }\r\n <div class=\"container-textfield\" [ngClass]=\"{\r\n 'disabled': disabled,\r\n 'focused': isFocused,\r\n 'alert': !isFocused && isAlertText && !disabled\r\n }\">\r\n @if (iconInput) {\r\n <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\r\n }\r\n <input [type]=\"passwordVisible ? 'text' : 'password'\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\" (input)=\"onInput()\"\r\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keypress)=\"onKeyPress($event)\">\r\n @if (!disabled && textInput) {\r\n <button class=\"button-delete\" (click)=\"togglePasswordVisibility()\">\r\n @if (passwordVisible) {\r\n <ius-icon-md iconName=\"icon-cancel\" class=\"icon-color-cancel\"></ius-icon-md>\r\n }@else{\r\n <ius-icon-md iconName=\"icon-cancel\" class=\"icon-color-cancel\"></ius-icon-md>\r\n }\r\n </button>\r\n }\r\n </div>\r\n @if (labelInferior && isFocused) {\r\n <span class=\"label-inf\">{{labelInferior}}</span>\r\n }\r\n @if (labelInferior && !isFocused && isAlertText) {\r\n <span class=\"label-inf\" [ngClass]=\"{\r\n 'alert': !isFocused && isAlertText && !disabled\r\n }\">{{labelInferior}}</span>\r\n }\r\n\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:flex-start;gap:4px;border:1px solid #f5f5f5;border-radius:8px;background:#f5f5f5;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px;transition:all .2s ease-in-out}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.disabled{background:#f5f5f5}.container-textfield.disabled .icon-color{color:#bfbfbf}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}.icon-color{color:#595959}.icon-color-cancel{color:#013169}input{display:flex;align-items:center;flex:1 0 0;border:none;outline:none;background-color:transparent;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.button-delete{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;color:#595959}.button-delete:hover{color:#013169}.container-label-sup{display:flex;align-items:center;gap:4px;margin-bottom:8px;color:#333;font-family:Roboto,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.container-label-sup.disabled{color:#bfbfbf}.icon-dot{display:flex;align-items:center;width:4px;height:4px;aspect-ratio:1/1;background-color:#db2e2a;border-radius:100px}.icon-color-help{color:#8c8c8c}.label-inf{display:flex;position:absolute;margin-top:4px;color:#595959;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.label-inf.alert{color:#931224}\n"] }]
|
|
3330
|
+
}], propDecorators: { textInput: [{
|
|
3331
|
+
type: Input
|
|
3332
|
+
}], required: [{
|
|
3333
|
+
type: Input
|
|
3334
|
+
}], disabled: [{
|
|
3335
|
+
type: Input
|
|
3336
|
+
}], showHelpText: [{
|
|
3337
|
+
type: Input
|
|
3338
|
+
}], labelSuperior: [{
|
|
3339
|
+
type: Input
|
|
3340
|
+
}], labelInferior: [{
|
|
3341
|
+
type: Input
|
|
3342
|
+
}], labelInput: [{
|
|
3343
|
+
type: Input
|
|
3344
|
+
}], iconInput: [{
|
|
3345
|
+
type: Input
|
|
3346
|
+
}], onChangesValueEvent: [{
|
|
3347
|
+
type: Output
|
|
3348
|
+
}], onKeyPressEvent: [{
|
|
3349
|
+
type: Output
|
|
3350
|
+
}] } });
|
|
3351
|
+
|
|
3352
|
+
class InputOtpComponent {
|
|
3353
|
+
constructor() {
|
|
3354
|
+
this.length = 6;
|
|
3355
|
+
this.disabled = false;
|
|
3356
|
+
this.showHelpText = false;
|
|
3357
|
+
this.required = true;
|
|
3358
|
+
this.onChangesValueEvent = new EventEmitter();
|
|
3359
|
+
this.codeComplete = new EventEmitter(); // cuando se llenan todas las casillas
|
|
3360
|
+
this.values = [];
|
|
3361
|
+
this.focusedIndex = null;
|
|
3362
|
+
this.isAlertText = false;
|
|
3363
|
+
}
|
|
3364
|
+
get isAnyFocused() { return this.focusedIndex !== null; }
|
|
3365
|
+
get boxes() { return Array.from({ length: this.length }); }
|
|
3366
|
+
get code() { return this.values.join(''); }
|
|
3367
|
+
ngOnInit() {
|
|
3368
|
+
this.values = Array(this.length).fill('');
|
|
3369
|
+
}
|
|
3370
|
+
clearSearch() {
|
|
3371
|
+
this.values.fill('');
|
|
3372
|
+
this.emitChange();
|
|
3373
|
+
this.isAlertText = this.required;
|
|
3374
|
+
this.focusIndex(0);
|
|
3375
|
+
}
|
|
3376
|
+
onFocus(index) {
|
|
3377
|
+
this.focusedIndex = index;
|
|
3378
|
+
this.isAlertText = false;
|
|
3379
|
+
}
|
|
3380
|
+
onBlur() {
|
|
3381
|
+
this.focusedIndex = null;
|
|
3382
|
+
if (this.required) {
|
|
3383
|
+
this.isAlertText = this.code.length !== this.length;
|
|
3384
|
+
}
|
|
3385
|
+
}
|
|
3386
|
+
// Restringe a dígitos y mueve el foco
|
|
3387
|
+
onInputBox(e, index) {
|
|
3388
|
+
const inputEvent = e;
|
|
3389
|
+
const input = inputEvent.target;
|
|
3390
|
+
const raw = (input.value || '').replace(/\D/g, '');
|
|
3391
|
+
// Nos quedamos con el último dígito si escribió varios
|
|
3392
|
+
const char = raw.slice(-1);
|
|
3393
|
+
this.values[index] = char ?? '';
|
|
3394
|
+
input.value = this.values[index];
|
|
3395
|
+
// Avanza si hay valor
|
|
3396
|
+
if (char && index < this.length - 1)
|
|
3397
|
+
this.focusIndex(index + 1);
|
|
3398
|
+
this.emitChange();
|
|
3399
|
+
// Si escribió múltiples (p.ej. autofill) distribuye
|
|
3400
|
+
if (raw.length > 1)
|
|
3401
|
+
this.spreadFrom(index, raw);
|
|
3402
|
+
}
|
|
3403
|
+
// Teclas especiales: backspace, flechas, delete
|
|
3404
|
+
onKeyDown(event, index) {
|
|
3405
|
+
const key = event.key;
|
|
3406
|
+
if (!/^[0-9]$/.test(key) &&
|
|
3407
|
+
!['Backspace', 'ArrowLeft', 'ArrowRight', 'Delete', 'Tab'].includes(key)) {
|
|
3408
|
+
event.preventDefault();
|
|
3409
|
+
return;
|
|
3410
|
+
}
|
|
3411
|
+
if (key === 'Backspace') {
|
|
3412
|
+
if (this.values[index]) {
|
|
3413
|
+
this.values[index] = '';
|
|
3414
|
+
this.emitChange();
|
|
3415
|
+
}
|
|
3416
|
+
else if (index > 0) {
|
|
3417
|
+
this.focusIndex(index - 1);
|
|
3418
|
+
// limpia la anterior para UX tipo “focused-error”
|
|
3419
|
+
const prev = this.otpInputs.get(index - 1)?.nativeElement;
|
|
3420
|
+
if (prev) {
|
|
3421
|
+
prev.value = '';
|
|
3422
|
+
this.values[index - 1] = '';
|
|
3423
|
+
this.emitChange();
|
|
3424
|
+
}
|
|
3425
|
+
}
|
|
3426
|
+
event.preventDefault();
|
|
3427
|
+
return;
|
|
3428
|
+
}
|
|
3429
|
+
if (key === 'Delete') {
|
|
3430
|
+
this.values[index] = '';
|
|
3431
|
+
this.emitChange();
|
|
3432
|
+
event.preventDefault();
|
|
3433
|
+
return;
|
|
3434
|
+
}
|
|
3435
|
+
if (key === 'ArrowLeft' && index > 0) {
|
|
3436
|
+
this.focusIndex(index - 1);
|
|
3437
|
+
event.preventDefault();
|
|
3438
|
+
return;
|
|
3439
|
+
}
|
|
3440
|
+
if (key === 'ArrowRight' && index < this.length - 1) {
|
|
3441
|
+
this.focusIndex(index + 1);
|
|
3442
|
+
event.preventDefault();
|
|
3443
|
+
return;
|
|
3444
|
+
}
|
|
3445
|
+
}
|
|
3446
|
+
// Pegar un código completo
|
|
3447
|
+
onPaste(event) {
|
|
3448
|
+
if (this.disabled)
|
|
3449
|
+
return;
|
|
3450
|
+
event.preventDefault();
|
|
3451
|
+
const data = (event.clipboardData?.getData('text') || '').replace(/\D/g, '').slice(0, this.length);
|
|
3452
|
+
if (!data)
|
|
3453
|
+
return;
|
|
3454
|
+
const start = this.focusedIndex ?? 0;
|
|
3455
|
+
this.spreadFrom(start, data);
|
|
3456
|
+
this.emitChange();
|
|
3457
|
+
}
|
|
3458
|
+
/** Distribuye una cadena a partir de un índice */
|
|
3459
|
+
spreadFrom(startIndex, data) {
|
|
3460
|
+
let i = startIndex;
|
|
3461
|
+
for (const ch of data) {
|
|
3462
|
+
if (i >= this.length)
|
|
3463
|
+
break;
|
|
3464
|
+
this.values[i] = ch;
|
|
3465
|
+
const el = this.otpInputs.get(i)?.nativeElement;
|
|
3466
|
+
if (el)
|
|
3467
|
+
el.value = ch;
|
|
3468
|
+
i++;
|
|
3469
|
+
}
|
|
3470
|
+
// Enfoca siguiente libre o se queda en el último
|
|
3471
|
+
const nextFree = this.values.findIndex((v, idx) => v === '' && idx >= startIndex);
|
|
3472
|
+
this.focusIndex(nextFree === -1 ? this.length - 1 : nextFree);
|
|
3473
|
+
}
|
|
3474
|
+
/** Enfoca por índice de forma segura */
|
|
3475
|
+
focusIndex(i) {
|
|
3476
|
+
setTimeout(() => {
|
|
3477
|
+
const el = this.otpInputs?.get(i)?.nativeElement;
|
|
3478
|
+
if (el)
|
|
3479
|
+
el.focus();
|
|
3480
|
+
this.focusedIndex = i;
|
|
3481
|
+
});
|
|
3482
|
+
}
|
|
3483
|
+
/** Emite cambios y dispara codeComplete si procede */
|
|
3484
|
+
emitChange() {
|
|
3485
|
+
const code = this.code;
|
|
3486
|
+
this.onChangesValueEvent.emit(code);
|
|
3487
|
+
if (code.length === this.length) {
|
|
3488
|
+
this.isAlertText = false;
|
|
3489
|
+
this.codeComplete.emit(code);
|
|
3490
|
+
}
|
|
3491
|
+
}
|
|
3492
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputOtpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3493
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InputOtpComponent, isStandalone: true, selector: "ius-input-otp", inputs: { length: "length", disabled: "disabled", showHelpText: "showHelpText", labelSuperior: "labelSuperior", labelInferior: "labelInferior", required: "required" }, outputs: { onChangesValueEvent: "onChangesValueEvent", codeComplete: "codeComplete" }, viewQueries: [{ propertyName: "otpInputs", predicate: ["otpInput"], descendants: true }], ngImport: i0, template: "<div class=\"container-general\">\r\n @if (labelSuperior) {\r\n <div class=\"container-label-sup\" [ngClass]=\"{ 'disabled': disabled }\">\r\n @if(!disabled && required){ <div class=\"icon-dot\"></div> }\r\n <span>{{ labelSuperior }}</span>\r\n @if(!disabled && showHelpText){\r\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\"></ius-icon-md>\r\n }\r\n <span>:</span>\r\n </div>\r\n }\r\n\r\n <div class=\"container-otp\">\r\n <!-- Casillas OTP -->\r\n <div class=\"otp-grid\">\r\n @for (ctrl of boxes; track $index) {\r\n <div\r\n class=\"container-textfield\"\r\n [ngClass]=\"{\r\n 'disabled': disabled,\r\n 'focused': focusedIndex === $index,\r\n 'alert': !disabled && isAlertText\r\n }\"\r\n >\r\n <input\r\n #otpInput\r\n type=\"text\"\r\n inputmode=\"numeric\"\r\n pattern=\"[0-9]*\"\r\n maxlength=\"1\"\r\n [disabled]=\"disabled\"\r\n [value]=\"values[$index]\"\r\n (focus)=\"onFocus($index)\"\r\n (blur)=\"onBlur()\"\r\n (keydown)=\"onKeyDown($event, $index)\"\r\n (input)=\"onInputBox($event, $index)\"\r\n (paste)=\"onPaste($event)\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (!disabled && this.code.length > 0 ) {\r\n <button class=\"button-delete\" (click)=\"clearSearch()\" [ngClass]=\"{\r\n 'alert': !disabled && isAlertText\r\n }\">\r\n <ius-icon-md iconName=\"icon-cancel\" class=\"icon-color-cancel\" [ngClass]=\"{\r\n 'alert': !disabled && isAlertText\r\n }\"></ius-icon-md>\r\n </button>\r\n }\r\n </div>\r\n\r\n @if (labelInferior && isAnyFocused) {\r\n <span class=\"label-inf\">{{ labelInferior }}</span>\r\n }\r\n @if (labelInferior && !isAnyFocused && isAlertText) {\r\n <span class=\"label-inf\" [ngClass]=\"{ 'alert': isAlertText }\">{{ labelInferior }}</span>\r\n }\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-otp{display:flex;align-items:center;gap:8px}.otp-grid{display:flex;gap:4px}.otp-grid:hover .container-textfield:not(.disabled){background:#edf6ff;border:1px solid #EDF6FF}.container-textfield{display:inline-flex;width:40px;height:40px;border:1px solid #f5f5f5;border-radius:8px;background:#f5f5f5;transition:all .15s ease-in-out}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff;border:1px solid #EDF6FF}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}.container-textfield.disabled{background:#f5f5f5}.container-textfield input{width:100%;height:100%;border:none;outline:none;text-align:center;background:transparent;color:#8c8c8c;font-family:Rubik,sans-serif;font-size:.875rem;line-height:20px;letter-spacing:.28px}.container-textfield input::-webkit-outer-spin-button,.container-textfield input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.button-delete{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;color:#595959}.container-label-sup{display:flex;align-items:center;gap:4px;margin-bottom:8px;color:#333;font-family:Roboto,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.container-label-sup.disabled{color:#bfbfbf}.icon-dot{width:4px;height:4px;background-color:#db2e2a;border-radius:100px}.icon-color-help{color:#8c8c8c}.icon-color-cancel{color:#013169}.icon-color-cancel.alert{color:#b71d26}.label-inf{position:absolute;margin-top:4px;color:#595959;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.label-inf.alert{color:#931224}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
3494
|
+
}
|
|
3495
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputOtpComponent, decorators: [{
|
|
3496
|
+
type: Component,
|
|
3497
|
+
args: [{ selector: 'ius-input-otp', standalone: true, imports: [IconMdComponent, FormsModule, CommonModule], template: "<div class=\"container-general\">\r\n @if (labelSuperior) {\r\n <div class=\"container-label-sup\" [ngClass]=\"{ 'disabled': disabled }\">\r\n @if(!disabled && required){ <div class=\"icon-dot\"></div> }\r\n <span>{{ labelSuperior }}</span>\r\n @if(!disabled && showHelpText){\r\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\"></ius-icon-md>\r\n }\r\n <span>:</span>\r\n </div>\r\n }\r\n\r\n <div class=\"container-otp\">\r\n <!-- Casillas OTP -->\r\n <div class=\"otp-grid\">\r\n @for (ctrl of boxes; track $index) {\r\n <div\r\n class=\"container-textfield\"\r\n [ngClass]=\"{\r\n 'disabled': disabled,\r\n 'focused': focusedIndex === $index,\r\n 'alert': !disabled && isAlertText\r\n }\"\r\n >\r\n <input\r\n #otpInput\r\n type=\"text\"\r\n inputmode=\"numeric\"\r\n pattern=\"[0-9]*\"\r\n maxlength=\"1\"\r\n [disabled]=\"disabled\"\r\n [value]=\"values[$index]\"\r\n (focus)=\"onFocus($index)\"\r\n (blur)=\"onBlur()\"\r\n (keydown)=\"onKeyDown($event, $index)\"\r\n (input)=\"onInputBox($event, $index)\"\r\n (paste)=\"onPaste($event)\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (!disabled && this.code.length > 0 ) {\r\n <button class=\"button-delete\" (click)=\"clearSearch()\" [ngClass]=\"{\r\n 'alert': !disabled && isAlertText\r\n }\">\r\n <ius-icon-md iconName=\"icon-cancel\" class=\"icon-color-cancel\" [ngClass]=\"{\r\n 'alert': !disabled && isAlertText\r\n }\"></ius-icon-md>\r\n </button>\r\n }\r\n </div>\r\n\r\n @if (labelInferior && isAnyFocused) {\r\n <span class=\"label-inf\">{{ labelInferior }}</span>\r\n }\r\n @if (labelInferior && !isAnyFocused && isAlertText) {\r\n <span class=\"label-inf\" [ngClass]=\"{ 'alert': isAlertText }\">{{ labelInferior }}</span>\r\n }\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-otp{display:flex;align-items:center;gap:8px}.otp-grid{display:flex;gap:4px}.otp-grid:hover .container-textfield:not(.disabled){background:#edf6ff;border:1px solid #EDF6FF}.container-textfield{display:inline-flex;width:40px;height:40px;border:1px solid #f5f5f5;border-radius:8px;background:#f5f5f5;transition:all .15s ease-in-out}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff;border:1px solid #EDF6FF}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}.container-textfield.disabled{background:#f5f5f5}.container-textfield input{width:100%;height:100%;border:none;outline:none;text-align:center;background:transparent;color:#8c8c8c;font-family:Rubik,sans-serif;font-size:.875rem;line-height:20px;letter-spacing:.28px}.container-textfield input::-webkit-outer-spin-button,.container-textfield input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.button-delete{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;color:#595959}.container-label-sup{display:flex;align-items:center;gap:4px;margin-bottom:8px;color:#333;font-family:Roboto,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.container-label-sup.disabled{color:#bfbfbf}.icon-dot{width:4px;height:4px;background-color:#db2e2a;border-radius:100px}.icon-color-help{color:#8c8c8c}.icon-color-cancel{color:#013169}.icon-color-cancel.alert{color:#b71d26}.label-inf{position:absolute;margin-top:4px;color:#595959;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.label-inf.alert{color:#931224}\n"] }]
|
|
3498
|
+
}], propDecorators: { length: [{
|
|
3499
|
+
type: Input
|
|
3500
|
+
}], disabled: [{
|
|
3501
|
+
type: Input
|
|
3502
|
+
}], showHelpText: [{
|
|
3503
|
+
type: Input
|
|
3504
|
+
}], labelSuperior: [{
|
|
3505
|
+
type: Input
|
|
3506
|
+
}], labelInferior: [{
|
|
3507
|
+
type: Input
|
|
3508
|
+
}], required: [{
|
|
3509
|
+
type: Input
|
|
3510
|
+
}], onChangesValueEvent: [{
|
|
3511
|
+
type: Output
|
|
3512
|
+
}], codeComplete: [{
|
|
3513
|
+
type: Output
|
|
3514
|
+
}], otpInputs: [{
|
|
3515
|
+
type: ViewChildren,
|
|
3516
|
+
args: ['otpInput']
|
|
3517
|
+
}] } });
|
|
3518
|
+
|
|
3206
3519
|
/**
|
|
3207
3520
|
* Generated bundle index. Do not edit.
|
|
3208
3521
|
*/
|
|
3209
3522
|
|
|
3210
|
-
export { AvatarIconComponent, BadgeComponent, ButtonAuthComponent, ButtonCircleSecondaryComponent, ButtonCircleTertiaryComponent, ButtonDynamicComponent, ButtonSquaredSecondaryComponent, ButtonSquaredTertiaryComponent, ButtonStandardPrimaryComponent, ButtonStandardSecondaryComponent, ButtonStandardTertiaryComponent, ButtonStandardTertiarySmallComponent, CardDynamicContentComponent, CardListMovimientosComponent, CategoriesComponent, ChipUserComponent, CustomDropdownComponent, DateHourPickerComponent, DatePickerComponent, DoubleDatePickerComponent, DrawerContainerRightComponent, DropdownComponent, DropdownOptionItemComponent, DropdownUserMenuComponent, IconLgComponent, IconMdComponent, IconSmComponent, IconXlComponent, IconXsComponent, IconXxlComponent, InputSelectComponent, InputSelectNumberComponent, InputTextfieldComponent, LinearProgressBarComponent, LoadingCircleComponent, MenuItemComponent, NavRailComponent, OptionComponent, SearchBarComponent, SectionCollapseDrawerChildComponent, SectionCollapseDrawerParentComponent, SimpleDividerComponent, SlideToggleComponent, ToolbarComponent, ToolbarUserMenuComponent };
|
|
3523
|
+
export { AvatarIconComponent, BadgeComponent, ButtonAuthComponent, ButtonCircleSecondaryComponent, ButtonCircleTertiaryComponent, ButtonDynamicComponent, ButtonSquaredSecondaryComponent, ButtonSquaredTertiaryComponent, ButtonStandardPrimaryComponent, ButtonStandardSecondaryComponent, ButtonStandardTertiaryComponent, ButtonStandardTertiarySmallComponent, CardDynamicContentComponent, CardListMovimientosComponent, CategoriesComponent, ChipUserComponent, CustomDropdownComponent, DateHourPickerComponent, DatePickerComponent, DoubleDatePickerComponent, DrawerContainerRightComponent, DropdownComponent, DropdownOptionItemComponent, DropdownUserMenuComponent, IconLgComponent, IconMdComponent, IconSmComponent, IconXlComponent, IconXsComponent, IconXxlComponent, InputOtpComponent, InputPasswordComponent, InputSelectComponent, InputSelectNumberComponent, InputTextfieldComponent, LinearProgressBarComponent, LoadingCircleComponent, MenuItemComponent, NavRailComponent, OptionComponent, SearchBarComponent, SectionCollapseDrawerChildComponent, SectionCollapseDrawerParentComponent, SimpleDividerComponent, SlideToggleComponent, ToolbarComponent, ToolbarUserMenuComponent };
|
|
3211
3524
|
//# sourceMappingURL=litigiovirtual-ius-design-components.mjs.map
|