@litigiovirtual/ius-design-components 1.0.239 → 1.0.240
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/input-password/input-password.component.mjs +21 -6
- package/esm2022/lib/slide-toggle/slide-toggle.component.mjs +2 -2
- package/fesm2022/litigiovirtual-ius-design-components.mjs +22 -7
- package/fesm2022/litigiovirtual-ius-design-components.mjs.map +1 -1
- package/lib/input-password/input-password.component.d.ts +5 -2
- package/package.json +1 -1
|
@@ -10,6 +10,7 @@ export class InputPasswordComponent {
|
|
|
10
10
|
this.isFocused = false;
|
|
11
11
|
this.isAlertText = false;
|
|
12
12
|
this.passwordVisible = false;
|
|
13
|
+
this.isCapsLockOn = false;
|
|
13
14
|
this.textInput = '';
|
|
14
15
|
this.required = true;
|
|
15
16
|
this.disabled = false;
|
|
@@ -17,7 +18,8 @@ export class InputPasswordComponent {
|
|
|
17
18
|
this.labelInput = '';
|
|
18
19
|
this.error = false;
|
|
19
20
|
this.onChangesValueEvent = new EventEmitter();
|
|
20
|
-
this.
|
|
21
|
+
this.onEnterKey = new EventEmitter();
|
|
22
|
+
this.onBlurEvent = new EventEmitter();
|
|
21
23
|
}
|
|
22
24
|
onInput() {
|
|
23
25
|
this.onChangesValueEvent.emit(this.textInput);
|
|
@@ -27,6 +29,7 @@ export class InputPasswordComponent {
|
|
|
27
29
|
}
|
|
28
30
|
onBlur() {
|
|
29
31
|
this.isFocused = false;
|
|
32
|
+
this.isCapsLockOn = false;
|
|
30
33
|
if (this.required) {
|
|
31
34
|
if (this.textInput === '') {
|
|
32
35
|
this.isAlertText = true;
|
|
@@ -35,19 +38,29 @@ export class InputPasswordComponent {
|
|
|
35
38
|
this.isAlertText = false;
|
|
36
39
|
}
|
|
37
40
|
}
|
|
41
|
+
this.onBlurEvent.emit();
|
|
38
42
|
}
|
|
39
43
|
togglePasswordVisibility() {
|
|
40
44
|
this.passwordVisible = !this.passwordVisible;
|
|
41
45
|
}
|
|
46
|
+
onKeyDown(event) {
|
|
47
|
+
if (event.getModifierState) {
|
|
48
|
+
this.isCapsLockOn = event.getModifierState('CapsLock');
|
|
49
|
+
}
|
|
50
|
+
}
|
|
42
51
|
onKeyPress(event) {
|
|
43
|
-
|
|
52
|
+
if (event.key === 'Enter') {
|
|
53
|
+
if (this.textInput.trim() !== '') {
|
|
54
|
+
this.onEnterKey.emit(this.textInput);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
44
57
|
}
|
|
45
58
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
46
|
-
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", errorText: "errorText", labelInput: "labelInput", iconInput: "iconInput", error: "error" }, outputs: { onChangesValueEvent: "onChangesValueEvent",
|
|
59
|
+
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", errorText: "errorText", labelInput: "labelInput", iconInput: "iconInput", error: "error" }, outputs: { onChangesValueEvent: "onChangesValueEvent", onEnterKey: "onEnterKey", onBlurEvent: "onBlurEvent" }, 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) || (error && !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\"\r\n (input)=\"onInput()\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keypress)=\"onKeyPress($event)\" (keydown)=\"onKeyDown($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-visibility\" class=\"icon-color-cancel\"></ius-icon-md>\r\n }@else{\r\n <ius-icon-md iconName=\"icon-visibility\" class=\"icon-color-cancel\"></ius-icon-md>\r\n }\r\n </button>\r\n }\r\n </div>\r\n @if ((errorText || labelInferior) && ((!isFocused && isAlertText && !disabled) || (error && !disabled))) {\r\n <span class=\"label-inf alert\">{{ errorText ?? labelInferior }}</span>\r\n } @else if (isCapsLockOn && isFocused && !disabled) {\r\n <span class=\"label-inf warning\">Bloq May\u00FAs activado</span>\r\n } @else if (labelInferior && isFocused) {\r\n <span class=\"label-inf\">{{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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
47
60
|
}
|
|
48
61
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputPasswordComponent, decorators: [{
|
|
49
62
|
type: Component,
|
|
50
|
-
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) || (error && !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'\"
|
|
63
|
+
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) || (error && !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\"\r\n (input)=\"onInput()\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keypress)=\"onKeyPress($event)\" (keydown)=\"onKeyDown($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-visibility\" class=\"icon-color-cancel\"></ius-icon-md>\r\n }@else{\r\n <ius-icon-md iconName=\"icon-visibility\" class=\"icon-color-cancel\"></ius-icon-md>\r\n }\r\n </button>\r\n }\r\n </div>\r\n @if ((errorText || labelInferior) && ((!isFocused && isAlertText && !disabled) || (error && !disabled))) {\r\n <span class=\"label-inf alert\">{{ errorText ?? labelInferior }}</span>\r\n } @else if (isCapsLockOn && isFocused && !disabled) {\r\n <span class=\"label-inf warning\">Bloq May\u00FAs activado</span>\r\n } @else if (labelInferior && isFocused) {\r\n <span class=\"label-inf\">{{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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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"] }]
|
|
51
64
|
}], propDecorators: { textInput: [{
|
|
52
65
|
type: Input
|
|
53
66
|
}], required: [{
|
|
@@ -70,7 +83,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
70
83
|
type: Input
|
|
71
84
|
}], onChangesValueEvent: [{
|
|
72
85
|
type: Output
|
|
73
|
-
}],
|
|
86
|
+
}], onEnterKey: [{
|
|
87
|
+
type: Output
|
|
88
|
+
}], onBlurEvent: [{
|
|
74
89
|
type: Output
|
|
75
90
|
}] } });
|
|
76
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
91
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQtcGFzc3dvcmQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaXVzLWRlc2lnbi1jb21wb25lbnRzL3NyYy9saWIvaW5wdXQtcGFzc3dvcmQvaW5wdXQtcGFzc3dvcmQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaXVzLWRlc2lnbi1jb21wb25lbnRzL3NyYy9saWIvaW5wdXQtcGFzc3dvcmQvaW5wdXQtcGFzc3dvcmQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN2RSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDL0QsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7OztBQVM3QyxNQUFNLE9BQU8sc0JBQXNCO0lBUG5DO1FBUUUsY0FBUyxHQUFZLEtBQUssQ0FBQztRQUMzQixnQkFBVyxHQUFZLEtBQUssQ0FBQztRQUM3QixvQkFBZSxHQUFZLEtBQUssQ0FBQztRQUNqQyxpQkFBWSxHQUFZLEtBQUssQ0FBQztRQUVyQixjQUFTLEdBQVcsRUFBRSxDQUFDO1FBQ3ZCLGFBQVEsR0FBRyxJQUFJLENBQUM7UUFDaEIsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUNqQixpQkFBWSxHQUFHLEtBQUssQ0FBQztRQUtyQixlQUFVLEdBQVcsRUFBRSxDQUFDO1FBRXhCLFVBQUssR0FBWSxLQUFLLENBQUM7UUFFdEIsd0JBQW1CLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUM5QyxlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztRQUN4QyxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7S0F3Q2xEO0lBdENDLE9BQU87UUFDTCxJQUFJLENBQUMsbUJBQW1CLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztJQUNoRCxDQUFDO0lBRUQsT0FBTztRQUNMLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDO0lBQ3hCLENBQUM7SUFFRCxNQUFNO1FBQ0osSUFBSSxDQUFDLFNBQVMsR0FBRyxLQUFLLENBQUM7UUFDdkIsSUFBSSxDQUFDLFlBQVksR0FBRyxLQUFLLENBQUM7UUFDMUIsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7WUFDbEIsSUFBSSxJQUFJLENBQUMsU0FBUyxLQUFLLEVBQUUsRUFBRSxDQUFDO2dCQUMxQixJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQztZQUMxQixDQUFDO2lCQUFNLENBQUM7Z0JBQ04sSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUM7WUFDM0IsQ0FBQztRQUNILENBQUM7UUFDRCxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQzFCLENBQUM7SUFFRCx3QkFBd0I7UUFDdEIsSUFBSSxDQUFDLGVBQWUsR0FBRyxDQUFDLElBQUksQ0FBQyxlQUFlLENBQUM7SUFDL0MsQ0FBQztJQUVELFNBQVMsQ0FBQyxLQUFvQjtRQUM1QixJQUFJLEtBQUssQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO1lBQzNCLElBQUksQ0FBQyxZQUFZLEdBQUcsS0FBSyxDQUFDLGdCQUFnQixDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQ3pELENBQUM7SUFDSCxDQUFDO0lBRUQsVUFBVSxDQUFDLEtBQW9CO1FBQzdCLElBQUksS0FBSyxDQUFDLEdBQUcsS0FBSyxPQUFPLEVBQUUsQ0FBQztZQUMxQixJQUFJLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxFQUFFLEtBQUssRUFBRSxFQUFFLENBQUM7Z0JBQ2pDLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztZQUN2QyxDQUFDO1FBQ0gsQ0FBQztJQUNILENBQUM7K0dBM0RVLHNCQUFzQjttR0FBdEIsc0JBQXNCLHFjQ1puQywrL0RBMkNNLDh4R0RuQ00sZUFBZSxzRkFBRSxXQUFXLDhtQkFBRSxZQUFZOzs0RkFJekMsc0JBQXNCO2tCQVBsQyxTQUFTOytCQUNFLG9CQUFvQixjQUNsQixJQUFJLFdBQ1AsQ0FBQyxlQUFlLEVBQUUsV0FBVyxFQUFFLFlBQVksQ0FBQzs4QkFVNUMsU0FBUztzQkFBakIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFFRyxhQUFhO3NCQUFyQixLQUFLO2dCQUNHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUVJLG1CQUFtQjtzQkFBNUIsTUFBTTtnQkFDRyxVQUFVO3NCQUFuQixNQUFNO2dCQUNHLFdBQVc7c0JBQXBCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBJY29uTWRDb21wb25lbnQgfSBmcm9tICcuLi9pY29uLW1kL2ljb24tbWQuY29tcG9uZW50JztcclxuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2l1cy1pbnB1dC1wYXNzd29yZCcsXHJcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICBpbXBvcnRzOiBbSWNvbk1kQ29tcG9uZW50LCBGb3Jtc01vZHVsZSwgQ29tbW9uTW9kdWxlXSxcclxuICB0ZW1wbGF0ZVVybDogJy4vaW5wdXQtcGFzc3dvcmQuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsOiAnLi9pbnB1dC1wYXNzd29yZC5jb21wb25lbnQuc2NzcydcclxufSlcclxuZXhwb3J0IGNsYXNzIElucHV0UGFzc3dvcmRDb21wb25lbnQge1xyXG4gIGlzRm9jdXNlZDogYm9vbGVhbiA9IGZhbHNlO1xyXG4gIGlzQWxlcnRUZXh0OiBib29sZWFuID0gZmFsc2U7XHJcbiAgcGFzc3dvcmRWaXNpYmxlOiBib29sZWFuID0gZmFsc2U7XHJcbiAgaXNDYXBzTG9ja09uOiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gIEBJbnB1dCgpIHRleHRJbnB1dDogc3RyaW5nID0gJyc7XHJcbiAgQElucHV0KCkgcmVxdWlyZWQgPSB0cnVlO1xyXG4gIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XHJcbiAgQElucHV0KCkgc2hvd0hlbHBUZXh0ID0gZmFsc2U7XHJcblxyXG4gIEBJbnB1dCgpIGxhYmVsU3VwZXJpb3I/OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgbGFiZWxJbmZlcmlvcj86IHN0cmluZztcclxuICBASW5wdXQoKSBlcnJvclRleHQ/OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgbGFiZWxJbnB1dDogc3RyaW5nID0gJyc7XHJcbiAgQElucHV0KCkgaWNvbklucHV0Pzogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIGVycm9yOiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gIEBPdXRwdXQoKSBvbkNoYW5nZXNWYWx1ZUV2ZW50ID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XHJcbiAgQE91dHB1dCgpIG9uRW50ZXJLZXkgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcclxuICBAT3V0cHV0KCkgb25CbHVyRXZlbnQgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XHJcblxyXG4gIG9uSW5wdXQoKTogdm9pZCB7XHJcbiAgICB0aGlzLm9uQ2hhbmdlc1ZhbHVlRXZlbnQuZW1pdCh0aGlzLnRleHRJbnB1dCk7XHJcbiAgfVxyXG5cclxuICBvbkZvY3VzKCk6IHZvaWQge1xyXG4gICAgdGhpcy5pc0ZvY3VzZWQgPSB0cnVlO1xyXG4gIH1cclxuXHJcbiAgb25CbHVyKCk6IHZvaWQge1xyXG4gICAgdGhpcy5pc0ZvY3VzZWQgPSBmYWxzZTtcclxuICAgIHRoaXMuaXNDYXBzTG9ja09uID0gZmFsc2U7XHJcbiAgICBpZiAodGhpcy5yZXF1aXJlZCkge1xyXG4gICAgICBpZiAodGhpcy50ZXh0SW5wdXQgPT09ICcnKSB7XHJcbiAgICAgICAgdGhpcy5pc0FsZXJ0VGV4dCA9IHRydWU7XHJcbiAgICAgIH0gZWxzZSB7XHJcbiAgICAgICAgdGhpcy5pc0FsZXJ0VGV4dCA9IGZhbHNlO1xyXG4gICAgICB9XHJcbiAgICB9XHJcbiAgICB0aGlzLm9uQmx1ckV2ZW50LmVtaXQoKTtcclxuICB9XHJcblxyXG4gIHRvZ2dsZVBhc3N3b3JkVmlzaWJpbGl0eSgpIHtcclxuICAgIHRoaXMucGFzc3dvcmRWaXNpYmxlID0gIXRoaXMucGFzc3dvcmRWaXNpYmxlO1xyXG4gIH1cclxuXHJcbiAgb25LZXlEb3duKGV2ZW50OiBLZXlib2FyZEV2ZW50KTogdm9pZCB7XHJcbiAgICBpZiAoZXZlbnQuZ2V0TW9kaWZpZXJTdGF0ZSkge1xyXG4gICAgICB0aGlzLmlzQ2Fwc0xvY2tPbiA9IGV2ZW50LmdldE1vZGlmaWVyU3RhdGUoJ0NhcHNMb2NrJyk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBvbktleVByZXNzKGV2ZW50OiBLZXlib2FyZEV2ZW50KTogdm9pZCB7XHJcbiAgICBpZiAoZXZlbnQua2V5ID09PSAnRW50ZXInKSB7XHJcbiAgICAgIGlmICh0aGlzLnRleHRJbnB1dC50cmltKCkgIT09ICcnKSB7XHJcbiAgICAgICAgdGhpcy5vbkVudGVyS2V5LmVtaXQodGhpcy50ZXh0SW5wdXQpO1xyXG4gICAgICB9XHJcbiAgICB9XHJcbiAgfVxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJjb250YWluZXItZ2VuZXJhbFwiPlxyXG4gICAgQGlmIChsYWJlbFN1cGVyaW9yKSB7XHJcbiAgICA8ZGl2IGNsYXNzPVwiY29udGFpbmVyLWxhYmVsLXN1cFwiIFtuZ0NsYXNzXT1cIntcclxuICAgICAgICAnZGlzYWJsZWQnOiBkaXNhYmxlZFxyXG4gICAgfVwiPlxyXG4gICAgICAgIEBpZighZGlzYWJsZWQgJiYgcmVxdWlyZWQpe1xyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJpY29uLWRvdFwiPjwvZGl2PlxyXG4gICAgICAgIH1cclxuICAgICAgICA8c3BhbiBjbGFzcz1cIlwiPnt7bGFiZWxTdXBlcmlvcn19PC9zcGFuPlxyXG4gICAgICAgIEBpZighZGlzYWJsZWQgJiYgc2hvd0hlbHBUZXh0KXtcclxuICAgICAgICA8aXVzLWljb24tbWQgaWNvbk5hbWU9XCJpY29uLWhlbHBcIiBjbGFzcz1cImljb24tY29sb3ItaGVscFwiPjwvaXVzLWljb24tbWQ+XHJcbiAgICAgICAgfVxyXG4gICAgICAgIDxzcGFuPjo8L3NwYW4+XHJcbiAgICA8L2Rpdj5cclxuICAgIH1cclxuICAgIDxkaXYgY2xhc3M9XCJjb250YWluZXItdGV4dGZpZWxkXCIgW25nQ2xhc3NdPVwie1xyXG4gICAgICAgICdkaXNhYmxlZCc6IGRpc2FibGVkLFxyXG4gICAgICAgICdmb2N1c2VkJzogaXNGb2N1c2VkLFxyXG4gICAgICAgICdhbGVydCc6ICghaXNGb2N1c2VkICYmIGlzQWxlcnRUZXh0ICYmICFkaXNhYmxlZCkgfHwgKGVycm9yICYmICFkaXNhYmxlZClcclxuICAgIH1cIj5cclxuICAgICAgICBAaWYgKGljb25JbnB1dCkge1xyXG4gICAgICAgIDxpdXMtaWNvbi1tZCBbaWNvbk5hbWVdPVwiaWNvbklucHV0XCIgY2xhc3M9XCJpY29uLWNvbG9yXCI+PC9pdXMtaWNvbi1tZD5cclxuICAgICAgICB9XHJcbiAgICAgICAgPGlucHV0IFt0eXBlXT1cInBhc3N3b3JkVmlzaWJsZSA/ICd0ZXh0JyA6ICdwYXNzd29yZCdcIiBbKG5nTW9kZWwpXT1cInRleHRJbnB1dFwiIFtwbGFjZWhvbGRlcl09XCJsYWJlbElucHV0XCIgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcclxuICAgICAgICAgICAgKGlucHV0KT1cIm9uSW5wdXQoKVwiIChmb2N1cyk9XCJvbkZvY3VzKClcIiAoYmx1cik9XCJvbkJsdXIoKVwiIChrZXlwcmVzcyk9XCJvbktleVByZXNzKCRldmVudClcIiAoa2V5ZG93bik9XCJvbktleURvd24oJGV2ZW50KVwiIC8+XHJcbiAgICAgICAgQGlmICghZGlzYWJsZWQgJiYgdGV4dElucHV0KSB7XHJcbiAgICAgICAgPGJ1dHRvbiBjbGFzcz1cImJ1dHRvbi1kZWxldGVcIiAoY2xpY2spPVwidG9nZ2xlUGFzc3dvcmRWaXNpYmlsaXR5KClcIj5cclxuICAgICAgICAgIEBpZiAocGFzc3dvcmRWaXNpYmxlKSB7XHJcbiAgICAgICAgICAgIDxpdXMtaWNvbi1tZCBpY29uTmFtZT1cImljb24tdmlzaWJpbGl0eVwiIGNsYXNzPVwiaWNvbi1jb2xvci1jYW5jZWxcIj48L2l1cy1pY29uLW1kPlxyXG4gICAgICAgICAgfUBlbHNle1xyXG4gICAgICAgICAgICA8aXVzLWljb24tbWQgaWNvbk5hbWU9XCJpY29uLXZpc2liaWxpdHlcIiBjbGFzcz1cImljb24tY29sb3ItY2FuY2VsXCI+PC9pdXMtaWNvbi1tZD5cclxuICAgICAgICAgIH1cclxuICAgICAgICA8L2J1dHRvbj5cclxuICAgICAgICB9XHJcbiAgICA8L2Rpdj5cclxuICAgIEBpZiAoKGVycm9yVGV4dCB8fCBsYWJlbEluZmVyaW9yKSAmJiAoKCFpc0ZvY3VzZWQgJiYgaXNBbGVydFRleHQgJiYgIWRpc2FibGVkKSB8fCAoZXJyb3IgJiYgIWRpc2FibGVkKSkpIHtcclxuICAgIDxzcGFuIGNsYXNzPVwibGFiZWwtaW5mIGFsZXJ0XCI+e3sgZXJyb3JUZXh0ID8/IGxhYmVsSW5mZXJpb3IgfX08L3NwYW4+XHJcbiAgICB9IEBlbHNlIGlmIChpc0NhcHNMb2NrT24gJiYgaXNGb2N1c2VkICYmICFkaXNhYmxlZCkge1xyXG4gICAgPHNwYW4gY2xhc3M9XCJsYWJlbC1pbmYgd2FybmluZ1wiPkJsb3EgTWF5w7pzIGFjdGl2YWRvPC9zcGFuPlxyXG4gICAgfSBAZWxzZSBpZiAobGFiZWxJbmZlcmlvciAmJiBpc0ZvY3VzZWQpIHtcclxuICAgIDxzcGFuIGNsYXNzPVwibGFiZWwtaW5mXCI+e3tsYWJlbEluZmVyaW9yfX08L3NwYW4+XHJcbiAgICB9XHJcblxyXG48L2Rpdj4iXX0=
|
|
@@ -11,11 +11,11 @@ export class SlideToggleComponent {
|
|
|
11
11
|
this.onCheckedChangeEvent.emit(this.checked);
|
|
12
12
|
}
|
|
13
13
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SlideToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SlideToggleComponent, isStandalone: true, selector: "ius-slide-toggle", inputs: { label: "label", checked: "checked" }, outputs: { onCheckedChangeEvent: "onCheckedChangeEvent" }, ngImport: i0, template: "<div class=\"ius-toggle-container\" (click)=\"toggle()\">\r\n <span class=\"label\">{{ label }}</span>\r\n <div class=\"switch\" [class.checked]=\"checked\">\r\n <div class=\"thumb\"></div>\r\n </div>\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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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}.ius-toggle-container{display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;-webkit-user-select:none;user-select:none}.ius-toggle-container .label{letter-spacing:.28px;
|
|
14
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SlideToggleComponent, isStandalone: true, selector: "ius-slide-toggle", inputs: { label: "label", checked: "checked" }, outputs: { onCheckedChangeEvent: "onCheckedChangeEvent" }, ngImport: i0, template: "<div class=\"ius-toggle-container\" (click)=\"toggle()\">\r\n <span class=\"label\">{{ label }}</span>\r\n <div class=\"switch\" [class.checked]=\"checked\">\r\n <div class=\"thumb\"></div>\r\n </div>\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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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}.ius-toggle-container{display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;-webkit-user-select:none;user-select:none}.ius-toggle-container .label{letter-spacing:.28px;color:#333;font-family:Rubik,sans-serif;font-size:.875rem;line-height:20px}.ius-toggle-container .switch{width:34px;height:14px;background-color:#c4dfff;border-radius:34px;position:relative;transition:background-color .3s}.ius-toggle-container .switch.checked .thumb{transform:translate(20px);background-color:#184fdb}.ius-toggle-container .switch .thumb{width:20px;height:20px;background-color:#fff;border-radius:50%;position:absolute;top:-3px;left:-3px;box-shadow:0 1px 3px #0000004d;transition:all .3s ease}\n"] }); }
|
|
15
15
|
}
|
|
16
16
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SlideToggleComponent, decorators: [{
|
|
17
17
|
type: Component,
|
|
18
|
-
args: [{ selector: 'ius-slide-toggle', standalone: true, imports: [], template: "<div class=\"ius-toggle-container\" (click)=\"toggle()\">\r\n <span class=\"label\">{{ label }}</span>\r\n <div class=\"switch\" [class.checked]=\"checked\">\r\n <div class=\"thumb\"></div>\r\n </div>\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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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}.ius-toggle-container{display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;-webkit-user-select:none;user-select:none}.ius-toggle-container .label{letter-spacing:.28px;
|
|
18
|
+
args: [{ selector: 'ius-slide-toggle', standalone: true, imports: [], template: "<div class=\"ius-toggle-container\" (click)=\"toggle()\">\r\n <span class=\"label\">{{ label }}</span>\r\n <div class=\"switch\" [class.checked]=\"checked\">\r\n <div class=\"thumb\"></div>\r\n </div>\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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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}.ius-toggle-container{display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;-webkit-user-select:none;user-select:none}.ius-toggle-container .label{letter-spacing:.28px;color:#333;font-family:Rubik,sans-serif;font-size:.875rem;line-height:20px}.ius-toggle-container .switch{width:34px;height:14px;background-color:#c4dfff;border-radius:34px;position:relative;transition:background-color .3s}.ius-toggle-container .switch.checked .thumb{transform:translate(20px);background-color:#184fdb}.ius-toggle-container .switch .thumb{width:20px;height:20px;background-color:#fff;border-radius:50%;position:absolute;top:-3px;left:-3px;box-shadow:0 1px 3px #0000004d;transition:all .3s ease}\n"] }]
|
|
19
19
|
}], propDecorators: { label: [{
|
|
20
20
|
type: Input
|
|
21
21
|
}], checked: [{
|
|
@@ -3269,11 +3269,11 @@ class SlideToggleComponent {
|
|
|
3269
3269
|
this.onCheckedChangeEvent.emit(this.checked);
|
|
3270
3270
|
}
|
|
3271
3271
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SlideToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3272
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SlideToggleComponent, isStandalone: true, selector: "ius-slide-toggle", inputs: { label: "label", checked: "checked" }, outputs: { onCheckedChangeEvent: "onCheckedChangeEvent" }, ngImport: i0, template: "<div class=\"ius-toggle-container\" (click)=\"toggle()\">\r\n <span class=\"label\">{{ label }}</span>\r\n <div class=\"switch\" [class.checked]=\"checked\">\r\n <div class=\"thumb\"></div>\r\n </div>\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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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}.ius-toggle-container{display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;-webkit-user-select:none;user-select:none}.ius-toggle-container .label{letter-spacing:.28px;
|
|
3272
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SlideToggleComponent, isStandalone: true, selector: "ius-slide-toggle", inputs: { label: "label", checked: "checked" }, outputs: { onCheckedChangeEvent: "onCheckedChangeEvent" }, ngImport: i0, template: "<div class=\"ius-toggle-container\" (click)=\"toggle()\">\r\n <span class=\"label\">{{ label }}</span>\r\n <div class=\"switch\" [class.checked]=\"checked\">\r\n <div class=\"thumb\"></div>\r\n </div>\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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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}.ius-toggle-container{display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;-webkit-user-select:none;user-select:none}.ius-toggle-container .label{letter-spacing:.28px;color:#333;font-family:Rubik,sans-serif;font-size:.875rem;line-height:20px}.ius-toggle-container .switch{width:34px;height:14px;background-color:#c4dfff;border-radius:34px;position:relative;transition:background-color .3s}.ius-toggle-container .switch.checked .thumb{transform:translate(20px);background-color:#184fdb}.ius-toggle-container .switch .thumb{width:20px;height:20px;background-color:#fff;border-radius:50%;position:absolute;top:-3px;left:-3px;box-shadow:0 1px 3px #0000004d;transition:all .3s ease}\n"] }); }
|
|
3273
3273
|
}
|
|
3274
3274
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SlideToggleComponent, decorators: [{
|
|
3275
3275
|
type: Component,
|
|
3276
|
-
args: [{ selector: 'ius-slide-toggle', standalone: true, imports: [], template: "<div class=\"ius-toggle-container\" (click)=\"toggle()\">\r\n <span class=\"label\">{{ label }}</span>\r\n <div class=\"switch\" [class.checked]=\"checked\">\r\n <div class=\"thumb\"></div>\r\n </div>\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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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}.ius-toggle-container{display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;-webkit-user-select:none;user-select:none}.ius-toggle-container .label{letter-spacing:.28px;
|
|
3276
|
+
args: [{ selector: 'ius-slide-toggle', standalone: true, imports: [], template: "<div class=\"ius-toggle-container\" (click)=\"toggle()\">\r\n <span class=\"label\">{{ label }}</span>\r\n <div class=\"switch\" [class.checked]=\"checked\">\r\n <div class=\"thumb\"></div>\r\n </div>\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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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}.ius-toggle-container{display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;-webkit-user-select:none;user-select:none}.ius-toggle-container .label{letter-spacing:.28px;color:#333;font-family:Rubik,sans-serif;font-size:.875rem;line-height:20px}.ius-toggle-container .switch{width:34px;height:14px;background-color:#c4dfff;border-radius:34px;position:relative;transition:background-color .3s}.ius-toggle-container .switch.checked .thumb{transform:translate(20px);background-color:#184fdb}.ius-toggle-container .switch .thumb{width:20px;height:20px;background-color:#fff;border-radius:50%;position:absolute;top:-3px;left:-3px;box-shadow:0 1px 3px #0000004d;transition:all .3s ease}\n"] }]
|
|
3277
3277
|
}], propDecorators: { label: [{
|
|
3278
3278
|
type: Input
|
|
3279
3279
|
}], checked: [{
|
|
@@ -4716,6 +4716,7 @@ class InputPasswordComponent {
|
|
|
4716
4716
|
this.isFocused = false;
|
|
4717
4717
|
this.isAlertText = false;
|
|
4718
4718
|
this.passwordVisible = false;
|
|
4719
|
+
this.isCapsLockOn = false;
|
|
4719
4720
|
this.textInput = '';
|
|
4720
4721
|
this.required = true;
|
|
4721
4722
|
this.disabled = false;
|
|
@@ -4723,7 +4724,8 @@ class InputPasswordComponent {
|
|
|
4723
4724
|
this.labelInput = '';
|
|
4724
4725
|
this.error = false;
|
|
4725
4726
|
this.onChangesValueEvent = new EventEmitter();
|
|
4726
|
-
this.
|
|
4727
|
+
this.onEnterKey = new EventEmitter();
|
|
4728
|
+
this.onBlurEvent = new EventEmitter();
|
|
4727
4729
|
}
|
|
4728
4730
|
onInput() {
|
|
4729
4731
|
this.onChangesValueEvent.emit(this.textInput);
|
|
@@ -4733,6 +4735,7 @@ class InputPasswordComponent {
|
|
|
4733
4735
|
}
|
|
4734
4736
|
onBlur() {
|
|
4735
4737
|
this.isFocused = false;
|
|
4738
|
+
this.isCapsLockOn = false;
|
|
4736
4739
|
if (this.required) {
|
|
4737
4740
|
if (this.textInput === '') {
|
|
4738
4741
|
this.isAlertText = true;
|
|
@@ -4741,19 +4744,29 @@ class InputPasswordComponent {
|
|
|
4741
4744
|
this.isAlertText = false;
|
|
4742
4745
|
}
|
|
4743
4746
|
}
|
|
4747
|
+
this.onBlurEvent.emit();
|
|
4744
4748
|
}
|
|
4745
4749
|
togglePasswordVisibility() {
|
|
4746
4750
|
this.passwordVisible = !this.passwordVisible;
|
|
4747
4751
|
}
|
|
4752
|
+
onKeyDown(event) {
|
|
4753
|
+
if (event.getModifierState) {
|
|
4754
|
+
this.isCapsLockOn = event.getModifierState('CapsLock');
|
|
4755
|
+
}
|
|
4756
|
+
}
|
|
4748
4757
|
onKeyPress(event) {
|
|
4749
|
-
|
|
4758
|
+
if (event.key === 'Enter') {
|
|
4759
|
+
if (this.textInput.trim() !== '') {
|
|
4760
|
+
this.onEnterKey.emit(this.textInput);
|
|
4761
|
+
}
|
|
4762
|
+
}
|
|
4750
4763
|
}
|
|
4751
4764
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4752
|
-
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", errorText: "errorText", labelInput: "labelInput", iconInput: "iconInput", error: "error" }, outputs: { onChangesValueEvent: "onChangesValueEvent",
|
|
4765
|
+
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", errorText: "errorText", labelInput: "labelInput", iconInput: "iconInput", error: "error" }, outputs: { onChangesValueEvent: "onChangesValueEvent", onEnterKey: "onEnterKey", onBlurEvent: "onBlurEvent" }, 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) || (error && !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\"\r\n (input)=\"onInput()\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keypress)=\"onKeyPress($event)\" (keydown)=\"onKeyDown($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-visibility\" class=\"icon-color-cancel\"></ius-icon-md>\r\n }@else{\r\n <ius-icon-md iconName=\"icon-visibility\" class=\"icon-color-cancel\"></ius-icon-md>\r\n }\r\n </button>\r\n }\r\n </div>\r\n @if ((errorText || labelInferior) && ((!isFocused && isAlertText && !disabled) || (error && !disabled))) {\r\n <span class=\"label-inf alert\">{{ errorText ?? labelInferior }}</span>\r\n } @else if (isCapsLockOn && isFocused && !disabled) {\r\n <span class=\"label-inf warning\">Bloq May\u00FAs activado</span>\r\n } @else if (labelInferior && isFocused) {\r\n <span class=\"label-inf\">{{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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.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"] }] }); }
|
|
4753
4766
|
}
|
|
4754
4767
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputPasswordComponent, decorators: [{
|
|
4755
4768
|
type: Component,
|
|
4756
|
-
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) || (error && !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'\"
|
|
4769
|
+
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) || (error && !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\"\r\n (input)=\"onInput()\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keypress)=\"onKeyPress($event)\" (keydown)=\"onKeyDown($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-visibility\" class=\"icon-color-cancel\"></ius-icon-md>\r\n }@else{\r\n <ius-icon-md iconName=\"icon-visibility\" class=\"icon-color-cancel\"></ius-icon-md>\r\n }\r\n </button>\r\n }\r\n </div>\r\n @if ((errorText || labelInferior) && ((!isFocused && isAlertText && !disabled) || (error && !disabled))) {\r\n <span class=\"label-inf alert\">{{ errorText ?? labelInferior }}</span>\r\n } @else if (isCapsLockOn && isFocused && !disabled) {\r\n <span class=\"label-inf warning\">Bloq May\u00FAs activado</span>\r\n } @else if (labelInferior && isFocused) {\r\n <span class=\"label-inf\">{{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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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"] }]
|
|
4757
4770
|
}], propDecorators: { textInput: [{
|
|
4758
4771
|
type: Input
|
|
4759
4772
|
}], required: [{
|
|
@@ -4776,7 +4789,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
4776
4789
|
type: Input
|
|
4777
4790
|
}], onChangesValueEvent: [{
|
|
4778
4791
|
type: Output
|
|
4779
|
-
}],
|
|
4792
|
+
}], onEnterKey: [{
|
|
4793
|
+
type: Output
|
|
4794
|
+
}], onBlurEvent: [{
|
|
4780
4795
|
type: Output
|
|
4781
4796
|
}] } });
|
|
4782
4797
|
|