@litigiovirtual/ius-design-components 1.0.97 → 1.0.99
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/date-hour-picker/date-hour-picker.component.mjs +1 -1
- package/esm2022/lib/icons/icons-map.mjs +11 -1
- package/esm2022/lib/input-select/input-select.component.mjs +3 -3
- package/esm2022/lib/input-textfield/input-textfield.component.mjs +3 -3
- package/esm2022/lib/option/option.component.mjs +1 -1
- package/esm2022/lib/search-bar/search-bar.component.mjs +13 -3
- package/fesm2022/litigiovirtual-ius-design-components.mjs +26 -6
- package/fesm2022/litigiovirtual-ius-design-components.mjs.map +1 -1
- package/lib/search-bar/search-bar.component.d.ts +3 -1
- package/package.json +1 -1
|
@@ -482,6 +482,16 @@ const ICONS = {
|
|
|
482
482
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
|
483
483
|
<path d="M15.4583 2.25909C16.0101 2.47068 16.52 2.80059 16.9459 3.26436L19.8402 6.42268C20.2653 6.88645 20.5678 7.4435 20.7625 8.04459H16.25C15.813 8.04459 15.4583 7.65682 15.4583 7.18095V2.25909ZM16.25 9.77273C14.9406 9.77273 13.875 8.61027 13.875 7.18182V2H10.7083C8.96192 2 7.54167 3.54936 7.54167 5.45455V12.3636H12.3669L10.9403 10.8151C10.6308 10.4775 10.6308 9.93077 10.9403 9.59309C11.2498 9.25627 11.7502 9.25627 12.0597 9.59309L14.2756 12.0121C14.582 12.3464 14.7355 12.786 14.7355 13.2255C14.7355 13.2255 14.7355 13.2264 14.7355 13.2273C14.7355 13.6669 14.5828 14.1056 14.2764 14.4398L12.0597 16.8597C11.9053 17.0281 11.7027 17.1128 11.5 17.1128C11.2973 17.1128 11.0947 17.0281 10.9403 16.8597C10.6308 16.5229 10.6308 15.9762 10.9403 15.6385L12.359 14.09H7.54167V17.5446C7.54167 19.4498 8.96192 20.9991 10.7083 20.9991H17.8333C19.5798 20.9991 21 19.4498 21 17.5446V9.77186H16.25V9.77273ZM5.95833 17.5455V5.45455C5.95833 4.12627 6.42225 2.91805 7.1775 2H5.16667C3.42025 2 2 3.54936 2 5.45455V17.5455C2 19.4506 3.42025 21 5.16667 21H7.1775C6.42225 20.082 5.95833 18.8737 5.95833 17.5455Z" fill="currentColor"/>
|
|
484
484
|
</svg>
|
|
485
|
+
`,
|
|
486
|
+
'icon-credit-card-clock': `
|
|
487
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
|
488
|
+
<path d="M18.2729 16.6443V13.4123C18.2729 13.2299 18.2136 13.0781 18.0949 12.9568C17.976 12.8353 17.8251 12.7745 17.6422 12.7745C17.4593 12.7745 17.3061 12.8363 17.1825 12.9599C17.059 13.0833 16.9972 13.24 16.9972 13.43V16.5269C16.9972 16.7226 17.0341 16.9108 17.1079 17.0912C17.1817 17.2715 17.2923 17.4343 17.4399 17.5794L19.5009 19.6344C19.625 19.7646 19.7704 19.8286 19.9371 19.8265C20.104 19.8244 20.2511 19.7595 20.3783 19.6318C20.5055 19.5084 20.5701 19.3619 20.5722 19.1924C20.5743 19.0229 20.5103 18.8752 20.3801 18.7492L18.2729 16.6443ZM17.655 23.2147C15.8863 23.2147 14.3889 22.5996 13.1626 21.3696C11.9364 20.1393 11.3233 18.6393 11.3233 16.8696C11.3233 15.1008 11.9364 13.6033 13.1626 12.3772C14.3889 11.151 15.8863 10.5379 17.655 10.5379C19.4147 10.5379 20.9121 11.1508 22.1474 12.3767C23.3825 13.6024 24.0001 15.0994 24.0001 16.8678C24.0001 18.6363 23.3825 20.1362 22.1474 21.3675C20.9121 22.5989 19.4147 23.2147 17.655 23.2147ZM2.95461 20.0147C2.13787 20.0147 1.44122 19.725 0.864653 19.1457C0.288258 18.5663 6.10352e-05 17.8712 6.10352e-05 17.0602V4.49592C6.10352e-05 3.68493 0.288258 2.98976 0.864653 2.41041C1.44122 1.83106 2.13787 1.54138 2.95461 1.54138H19.775C20.5917 1.54138 21.2884 1.83106 21.8649 2.41041C22.4413 2.98976 22.7295 3.68493 22.7295 4.49592V7.83395C22.7295 8.24014 22.5863 8.58681 22.2999 8.87396C22.0134 9.16129 21.6652 9.30496 21.2554 9.30496C20.8456 9.30496 20.4964 9.16025 20.2078 8.87083C19.9193 8.58159 19.775 8.23387 19.775 7.82768V6.09563H2.95461V11.2064H9.29469C9.7235 11.2064 10.0433 11.4071 10.254 11.8084C10.465 12.2096 10.4469 12.6033 10.1997 12.9897C9.89553 13.5763 9.66076 14.1962 9.49543 14.8494C9.3301 15.5023 9.24744 16.1824 9.24744 16.8895C9.24744 17.1254 9.2584 17.3591 9.28033 17.5904C9.30226 17.8215 9.32854 18.0526 9.35917 18.2837C9.44618 18.7306 9.35821 19.1308 9.09525 19.4843C8.83211 19.8379 8.48657 20.0147 8.05862 20.0147H2.95461Z" fill="currentColor"/>
|
|
489
|
+
</svg>
|
|
490
|
+
`,
|
|
491
|
+
'icon-print': `
|
|
492
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
|
493
|
+
<path d="M18.2729 16.6443V13.4123C18.2729 13.2299 18.2136 13.0781 18.0949 12.9568C17.976 12.8353 17.8251 12.7745 17.6422 12.7745C17.4593 12.7745 17.3061 12.8363 17.1825 12.9599C17.059 13.0833 16.9972 13.24 16.9972 13.43V16.5269C16.9972 16.7226 17.0341 16.9108 17.1079 17.0912C17.1817 17.2715 17.2923 17.4343 17.4399 17.5794L19.5009 19.6344C19.625 19.7646 19.7704 19.8286 19.9371 19.8265C20.104 19.8244 20.2511 19.7595 20.3783 19.6318C20.5055 19.5084 20.5701 19.3619 20.5722 19.1924C20.5743 19.0229 20.5103 18.8752 20.3801 18.7492L18.2729 16.6443ZM17.655 23.2147C15.8863 23.2147 14.3889 22.5996 13.1626 21.3696C11.9364 20.1393 11.3233 18.6393 11.3233 16.8696C11.3233 15.1008 11.9364 13.6033 13.1626 12.3772C14.3889 11.151 15.8863 10.5379 17.655 10.5379C19.4147 10.5379 20.9121 11.1508 22.1474 12.3767C23.3825 13.6024 24.0001 15.0994 24.0001 16.8678C24.0001 18.6363 23.3825 20.1362 22.1474 21.3675C20.9121 22.5989 19.4147 23.2147 17.655 23.2147ZM2.95461 20.0147C2.13787 20.0147 1.44122 19.725 0.864653 19.1457C0.288258 18.5663 6.10352e-05 17.8712 6.10352e-05 17.0602V4.49592C6.10352e-05 3.68493 0.288258 2.98976 0.864653 2.41041C1.44122 1.83106 2.13787 1.54138 2.95461 1.54138H19.775C20.5917 1.54138 21.2884 1.83106 21.8649 2.41041C22.4413 2.98976 22.7295 3.68493 22.7295 4.49592V7.83395C22.7295 8.24014 22.5863 8.58681 22.2999 8.87396C22.0134 9.16129 21.6652 9.30496 21.2554 9.30496C20.8456 9.30496 20.4964 9.16025 20.2078 8.87083C19.9193 8.58159 19.775 8.23387 19.775 7.82768V6.09563H2.95461V11.2064H9.29469C9.7235 11.2064 10.0433 11.4071 10.254 11.8084C10.465 12.2096 10.4469 12.6033 10.1997 12.9897C9.89553 13.5763 9.66076 14.1962 9.49543 14.8494C9.3301 15.5023 9.24744 16.1824 9.24744 16.8895C9.24744 17.1254 9.2584 17.3591 9.28033 17.5904C9.30226 17.8215 9.32854 18.0526 9.35917 18.2837C9.44618 18.7306 9.35821 19.1308 9.09525 19.4843C8.83211 19.8379 8.48657 20.0147 8.05862 20.0147H2.95461Z" fill="currentColor"/>
|
|
494
|
+
</svg>
|
|
485
495
|
`,
|
|
486
496
|
'icon-expand-all': `
|
|
487
497
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
|
@@ -2305,6 +2315,7 @@ class SearchBarComponent {
|
|
|
2305
2315
|
this.showSearchIcon = true;
|
|
2306
2316
|
this.onChangesValueEvent = new EventEmitter();
|
|
2307
2317
|
this.enterSearchEvent = new EventEmitter();
|
|
2318
|
+
this.onEnterKey = new EventEmitter();
|
|
2308
2319
|
}
|
|
2309
2320
|
ngOnInit() {
|
|
2310
2321
|
if (this.initialText) {
|
|
@@ -2327,6 +2338,13 @@ class SearchBarComponent {
|
|
|
2327
2338
|
this.textInput = '';
|
|
2328
2339
|
this.onChangesValueEvent.emit(this.textInput);
|
|
2329
2340
|
}
|
|
2341
|
+
onKeyPress(event) {
|
|
2342
|
+
if (event.key === 'Enter') {
|
|
2343
|
+
if (this.textInput.trim() !== '') {
|
|
2344
|
+
this.onEnterKey.emit(this.textInput);
|
|
2345
|
+
}
|
|
2346
|
+
}
|
|
2347
|
+
}
|
|
2330
2348
|
onDropBlock(event) {
|
|
2331
2349
|
// Evita que se dropee contenido en el input
|
|
2332
2350
|
event.preventDefault();
|
|
@@ -2336,11 +2354,11 @@ class SearchBarComponent {
|
|
|
2336
2354
|
event.preventDefault();
|
|
2337
2355
|
}
|
|
2338
2356
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2339
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SearchBarComponent, isStandalone: true, selector: "ius-search-bar", inputs: { labelInput: "labelInput", disabled: "disabled", initialText: "initialText", showSearchIcon: "showSearchIcon" }, outputs: { onChangesValueEvent: "onChangesValueEvent", enterSearchEvent: "enterSearchEvent" }, ngImport: i0, template: "<div class=\"container-general\">\r\n <div class=\"container-search\" [ngClass]=\"{\r\n 'disabled': disabled,\r\n 'focused': isFocused\r\n }\">\r\n <div class=\"container-input\">\r\n <input type=\"text\" [(ngModel)]=\"textInput\" [disabled]=\"disabled\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n (input)=\"onInput()\" (keyup.enter)=\"performSearch($event)\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\">\r\n @if (textInput === '') {\r\n <label class=\"input-label\">{{labelInput}}</label>\r\n }\r\n\r\n @if (!disabled && textInput) {\r\n <button class=\"button-delete\" (click)=\"clearSearch()\">\r\n <ius-icon-md iconName=\"icon-cancel\" class=\"icon-color-cancel\"></ius-icon-md>\r\n </button>\r\n }\r\n\r\n </div>\r\n @if (showSearchIcon) {\r\n <div class=\"container-icon\">\r\n <ius-icon-md iconName=\"icon-search\" class=\"icon-color\"></ius-icon-md>\r\n </div>\r\n }\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-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-search{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px;color:#8c8c8c;display:flex;height:44px;padding:0 8px 0 24px;align-items:center;gap:12px;border-radius:14px;border:1px solid #f5f5f5;background:#f5f5f5}.container-search:hover:not(.disabled):not(.focused){background:#f0f0f0}.container-search.focused{border:1px solid #eaeaea;background:#fff}.container-search.focused .icon-color{color:#0581bc}.container-search.disabled{background:#fafafa;color:#bfbfbf}.container-search.disabled .icon-color{color:#bfbfbf}.container-icon{display:flex;padding:0 12px;align-items:center;align-self:stretch}.icon-color{color:#595959}.container-input{display:flex;flex:1;min-width:120px;padding:12px 0;align-items:center;gap:8px;position:relative}input{border:none;outline:none;background-color:transparent;width:100%;font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.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}.input-label{position:absolute;left:0;pointer-events:none}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] }); }
|
|
2357
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SearchBarComponent, isStandalone: true, selector: "ius-search-bar", inputs: { labelInput: "labelInput", disabled: "disabled", initialText: "initialText", showSearchIcon: "showSearchIcon" }, outputs: { onChangesValueEvent: "onChangesValueEvent", enterSearchEvent: "enterSearchEvent", onEnterKey: "onEnterKey" }, ngImport: i0, template: "<div class=\"container-general\">\r\n <div class=\"container-search\" [ngClass]=\"{\r\n 'disabled': disabled,\r\n 'focused': isFocused\r\n }\">\r\n <div class=\"container-input\">\r\n <input type=\"text\" [(ngModel)]=\"textInput\" [disabled]=\"disabled\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keypress)=\"onKeyPress($event)\"\r\n (input)=\"onInput()\" (keyup.enter)=\"performSearch($event)\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\">\r\n @if (textInput === '') {\r\n <label class=\"input-label\">{{labelInput}}</label>\r\n }\r\n\r\n @if (!disabled && textInput) {\r\n <button class=\"button-delete\" (click)=\"clearSearch()\">\r\n <ius-icon-md iconName=\"icon-cancel\" class=\"icon-color-cancel\"></ius-icon-md>\r\n </button>\r\n }\r\n\r\n </div>\r\n @if (showSearchIcon) {\r\n <div class=\"container-icon\">\r\n <ius-icon-md iconName=\"icon-search\" class=\"icon-color\"></ius-icon-md>\r\n </div>\r\n }\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-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-search{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px;color:#8c8c8c;display:flex;height:44px;padding:0 8px 0 24px;align-items:center;gap:12px;border-radius:14px;border:1px solid #f5f5f5;background:#f5f5f5}.container-search:hover:not(.disabled):not(.focused){background:#f0f0f0}.container-search.focused{border:1px solid #eaeaea;background:#fff}.container-search.focused .icon-color{color:#0581bc}.container-search.disabled{background:#fafafa;color:#bfbfbf}.container-search.disabled .icon-color{color:#bfbfbf}.container-icon{display:flex;padding:0 12px;align-items:center;align-self:stretch}.icon-color{color:#595959}.container-input{display:flex;flex:1;min-width:120px;padding:12px 0;align-items:center;gap:8px;position:relative}input{border:none;outline:none;background-color:transparent;width:100%;font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.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}.input-label{position:absolute;left:0;pointer-events:none}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] }); }
|
|
2340
2358
|
}
|
|
2341
2359
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchBarComponent, decorators: [{
|
|
2342
2360
|
type: Component,
|
|
2343
|
-
args: [{ selector: 'ius-search-bar', standalone: true, imports: [IconMdComponent, CommonModule, FormsModule], template: "<div class=\"container-general\">\r\n <div class=\"container-search\" [ngClass]=\"{\r\n 'disabled': disabled,\r\n 'focused': isFocused\r\n }\">\r\n <div class=\"container-input\">\r\n <input type=\"text\" [(ngModel)]=\"textInput\" [disabled]=\"disabled\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n (input)=\"onInput()\" (keyup.enter)=\"performSearch($event)\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\">\r\n @if (textInput === '') {\r\n <label class=\"input-label\">{{labelInput}}</label>\r\n }\r\n\r\n @if (!disabled && textInput) {\r\n <button class=\"button-delete\" (click)=\"clearSearch()\">\r\n <ius-icon-md iconName=\"icon-cancel\" class=\"icon-color-cancel\"></ius-icon-md>\r\n </button>\r\n }\r\n\r\n </div>\r\n @if (showSearchIcon) {\r\n <div class=\"container-icon\">\r\n <ius-icon-md iconName=\"icon-search\" class=\"icon-color\"></ius-icon-md>\r\n </div>\r\n }\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-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-search{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px;color:#8c8c8c;display:flex;height:44px;padding:0 8px 0 24px;align-items:center;gap:12px;border-radius:14px;border:1px solid #f5f5f5;background:#f5f5f5}.container-search:hover:not(.disabled):not(.focused){background:#f0f0f0}.container-search.focused{border:1px solid #eaeaea;background:#fff}.container-search.focused .icon-color{color:#0581bc}.container-search.disabled{background:#fafafa;color:#bfbfbf}.container-search.disabled .icon-color{color:#bfbfbf}.container-icon{display:flex;padding:0 12px;align-items:center;align-self:stretch}.icon-color{color:#595959}.container-input{display:flex;flex:1;min-width:120px;padding:12px 0;align-items:center;gap:8px;position:relative}input{border:none;outline:none;background-color:transparent;width:100%;font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.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}.input-label{position:absolute;left:0;pointer-events:none}\n"] }]
|
|
2361
|
+
args: [{ selector: 'ius-search-bar', standalone: true, imports: [IconMdComponent, CommonModule, FormsModule], template: "<div class=\"container-general\">\r\n <div class=\"container-search\" [ngClass]=\"{\r\n 'disabled': disabled,\r\n 'focused': isFocused\r\n }\">\r\n <div class=\"container-input\">\r\n <input type=\"text\" [(ngModel)]=\"textInput\" [disabled]=\"disabled\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keypress)=\"onKeyPress($event)\"\r\n (input)=\"onInput()\" (keyup.enter)=\"performSearch($event)\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\">\r\n @if (textInput === '') {\r\n <label class=\"input-label\">{{labelInput}}</label>\r\n }\r\n\r\n @if (!disabled && textInput) {\r\n <button class=\"button-delete\" (click)=\"clearSearch()\">\r\n <ius-icon-md iconName=\"icon-cancel\" class=\"icon-color-cancel\"></ius-icon-md>\r\n </button>\r\n }\r\n\r\n </div>\r\n @if (showSearchIcon) {\r\n <div class=\"container-icon\">\r\n <ius-icon-md iconName=\"icon-search\" class=\"icon-color\"></ius-icon-md>\r\n </div>\r\n }\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-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-search{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px;color:#8c8c8c;display:flex;height:44px;padding:0 8px 0 24px;align-items:center;gap:12px;border-radius:14px;border:1px solid #f5f5f5;background:#f5f5f5}.container-search:hover:not(.disabled):not(.focused){background:#f0f0f0}.container-search.focused{border:1px solid #eaeaea;background:#fff}.container-search.focused .icon-color{color:#0581bc}.container-search.disabled{background:#fafafa;color:#bfbfbf}.container-search.disabled .icon-color{color:#bfbfbf}.container-icon{display:flex;padding:0 12px;align-items:center;align-self:stretch}.icon-color{color:#595959}.container-input{display:flex;flex:1;min-width:120px;padding:12px 0;align-items:center;gap:8px;position:relative}input{border:none;outline:none;background-color:transparent;width:100%;font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.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}.input-label{position:absolute;left:0;pointer-events:none}\n"] }]
|
|
2344
2362
|
}], propDecorators: { labelInput: [{
|
|
2345
2363
|
type: Input
|
|
2346
2364
|
}], disabled: [{
|
|
@@ -2353,6 +2371,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2353
2371
|
type: Output
|
|
2354
2372
|
}], enterSearchEvent: [{
|
|
2355
2373
|
type: Output
|
|
2374
|
+
}], onEnterKey: [{
|
|
2375
|
+
type: Output
|
|
2356
2376
|
}] } });
|
|
2357
2377
|
|
|
2358
2378
|
class InputTextfieldComponent {
|
|
@@ -2412,11 +2432,11 @@ class InputTextfieldComponent {
|
|
|
2412
2432
|
event.preventDefault();
|
|
2413
2433
|
}
|
|
2414
2434
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputTextfieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2415
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InputTextfieldComponent, isStandalone: true, selector: "ius-input-textfield", inputs: { textInput: "textInput", required: "required", disabled: "disabled", isEnableClearText: "isEnableClearText", showHelpText: "showHelpText", labelSuperior: "labelSuperior", labelInferior: "labelInferior", labelInput: "labelInput", iconInput: "iconInput", inputType: "inputType", maxlenght: "maxlenght", initialText: "initialText" }, outputs: { onChangesValueEvent: "onChangesValueEvent", onEnterKey: "onEnterKey" }, 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]=\"inputType\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\"\r\n (input)=\"onInput()\" [maxlength]=\"maxlenght ?? null\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n (keypress)=\"onKeyPress($event)\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\">\r\n @if (!disabled && textInput && isEnableClearText) {\r\n <button class=\"button-delete\" (click)=\"clearSearch()\">\r\n <ius-icon-md iconName=\"icon-cancel\" class=\"icon-color-cancel\"></ius-icon-md>\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}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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"] }] }); }
|
|
2435
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InputTextfieldComponent, isStandalone: true, selector: "ius-input-textfield", inputs: { textInput: "textInput", required: "required", disabled: "disabled", isEnableClearText: "isEnableClearText", showHelpText: "showHelpText", labelSuperior: "labelSuperior", labelInferior: "labelInferior", labelInput: "labelInput", iconInput: "iconInput", inputType: "inputType", maxlenght: "maxlenght", initialText: "initialText" }, outputs: { onChangesValueEvent: "onChangesValueEvent", onEnterKey: "onEnterKey" }, 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]=\"inputType\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\"\r\n (input)=\"onInput()\" [maxlength]=\"maxlenght ?? null\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n (keypress)=\"onKeyPress($event)\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\">\r\n @if (!disabled && textInput && isEnableClearText) {\r\n <button class=\"button-delete\" (click)=\"clearSearch()\">\r\n <ius-icon-md iconName=\"icon-cancel\" class=\"icon-color-cancel\"></ius-icon-md>\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,.container-textfield.disabled input{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}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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"] }] }); }
|
|
2416
2436
|
}
|
|
2417
2437
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputTextfieldComponent, decorators: [{
|
|
2418
2438
|
type: Component,
|
|
2419
|
-
args: [{ selector: 'ius-input-textfield', 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]=\"inputType\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\"\r\n (input)=\"onInput()\" [maxlength]=\"maxlenght ?? null\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n (keypress)=\"onKeyPress($event)\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\">\r\n @if (!disabled && textInput && isEnableClearText) {\r\n <button class=\"button-delete\" (click)=\"clearSearch()\">\r\n <ius-icon-md iconName=\"icon-cancel\" class=\"icon-color-cancel\"></ius-icon-md>\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}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
|
|
2439
|
+
args: [{ selector: 'ius-input-textfield', 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]=\"inputType\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\"\r\n (input)=\"onInput()\" [maxlength]=\"maxlenght ?? null\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n (keypress)=\"onKeyPress($event)\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\">\r\n @if (!disabled && textInput && isEnableClearText) {\r\n <button class=\"button-delete\" (click)=\"clearSearch()\">\r\n <ius-icon-md iconName=\"icon-cancel\" class=\"icon-color-cancel\"></ius-icon-md>\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,.container-textfield.disabled input{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}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
|
|
2420
2440
|
}], propDecorators: { textInput: [{
|
|
2421
2441
|
type: Input
|
|
2422
2442
|
}], required: [{
|
|
@@ -2534,11 +2554,11 @@ class InputSelectComponent {
|
|
|
2534
2554
|
event.preventDefault();
|
|
2535
2555
|
}
|
|
2536
2556
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2537
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InputSelectComponent, isStandalone: true, selector: "ius-input-select", inputs: { componentId: "componentId", required: "required", disabled: "disabled", showHelpText: "showHelpText", labelSuperior: "labelSuperior", labelInferior: "labelInferior", labelInput: "labelInput", iconInput: "iconInput", textInput: "textInput", maxlenght: "maxlenght", inputType: "inputType" }, outputs: { onChangesValueEvent: "onChangesValueEvent", onEnterKey: "onEnterKey" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, ngImport: i0, template: "<div class=\"container-general\" [id]=\"componentId\">\
|
|
2557
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InputSelectComponent, isStandalone: true, selector: "ius-input-select", inputs: { componentId: "componentId", required: "required", disabled: "disabled", showHelpText: "showHelpText", labelSuperior: "labelSuperior", labelInferior: "labelInferior", labelInput: "labelInput", iconInput: "iconInput", textInput: "textInput", maxlenght: "maxlenght", inputType: "inputType" }, outputs: { onChangesValueEvent: "onChangesValueEvent", onEnterKey: "onEnterKey" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, ngImport: i0, template: "<div class=\"container-general\" [id]=\"componentId\">\n @if (labelSuperior) {\n <div class=\"container-label-sup\" [ngClass]=\"{\n 'disabled': disabled\n }\">\n @if(!disabled && required){\n <div class=\"icon-dot\"></div>\n }\n <span class=\"\">{{labelSuperior}}</span>\n @if(!disabled && showHelpText){\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\"></ius-icon-md>\n }\n <span>:</span>\n </div>\n }\n <div class=\"container-textfield\" [ngClass]=\"{\n 'disabled': disabled,\n 'focused': isFocused,\n 'alert': !isFocused && isAlertText && !disabled\n }\" (click)=\"onFocus()\">\n @if (iconInput) {\n <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\n }\n <input [type]=\"inputType\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\" (input)=\"onInput()\"\n [maxlength]=\"maxlenght ?? null\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\n (keypress)=\"onKeyPress($event)\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\">\n <div class=\"cnt-icon-right\">\n @if(!showList){\n <ius-icon-md iconName=\"icon-keyboard-arrow-down\" class=\"icon-arrows\"></ius-icon-md>\n }@else{\n <div (click)=\"closeList($event)\" style=\"height: 20px;\">\n <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\n </div>\n }\n </div>\n </div>\n @if (labelInferior && isFocused) {\n <span class=\"label-inf\">{{labelInferior}}</span>\n }\n @if (labelInferior && !isFocused && isAlertText) {\n <span class=\"label-inf\" [ngClass]=\"{\n 'alert': !isFocused && isAlertText && !disabled\n }\">{{labelInferior}}</span>\n }\n @if (showList) {\n <div class=\"container-list scrollable-small\">\n <div (click)=\"onSelectOption()\">\n <ng-content selector=\"ius-option\"></ng-content>\n </div>\n </div>\n }\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;cursor:pointer;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}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.disabled{cursor:default;background:#f5f5f5}.container-textfield.disabled .icon-color,.container-textfield.disabled .icon-arrows,.container-textfield.disabled input{color:#bfbfbf}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}.container-textfield .icon-arrows{pointer-events:none}.container-textfield .icon-arrows svg{pointer-events:none}.icon-color{color:#595959}.icon-arrows{color:#333}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}.cnt-icon-right{display:flex;align-items:center;justify-content:center;background:none;padding:0;color:#333}.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}.container-list{position:absolute;max-height:144px;width:100%;display:flex;flex-direction:column;margin-top:4px;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;z-index:1000;overflow-y:auto}.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.scrollable-small::-webkit-scrollbar:vertical{width:4px;height:32px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar:horizontal{height:5px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar-thumb{background-color:#08a6db;border-radius:4px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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"] }] }); }
|
|
2538
2558
|
}
|
|
2539
2559
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectComponent, decorators: [{
|
|
2540
2560
|
type: Component,
|
|
2541
|
-
args: [{ selector: 'ius-input-select', standalone: true, imports: [IconMdComponent, FormsModule, CommonModule], template: "<div class=\"container-general\" [id]=\"componentId\">\
|
|
2561
|
+
args: [{ selector: 'ius-input-select', standalone: true, imports: [IconMdComponent, FormsModule, CommonModule], template: "<div class=\"container-general\" [id]=\"componentId\">\n @if (labelSuperior) {\n <div class=\"container-label-sup\" [ngClass]=\"{\n 'disabled': disabled\n }\">\n @if(!disabled && required){\n <div class=\"icon-dot\"></div>\n }\n <span class=\"\">{{labelSuperior}}</span>\n @if(!disabled && showHelpText){\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\"></ius-icon-md>\n }\n <span>:</span>\n </div>\n }\n <div class=\"container-textfield\" [ngClass]=\"{\n 'disabled': disabled,\n 'focused': isFocused,\n 'alert': !isFocused && isAlertText && !disabled\n }\" (click)=\"onFocus()\">\n @if (iconInput) {\n <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\n }\n <input [type]=\"inputType\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\" (input)=\"onInput()\"\n [maxlength]=\"maxlenght ?? null\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\n (keypress)=\"onKeyPress($event)\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\">\n <div class=\"cnt-icon-right\">\n @if(!showList){\n <ius-icon-md iconName=\"icon-keyboard-arrow-down\" class=\"icon-arrows\"></ius-icon-md>\n }@else{\n <div (click)=\"closeList($event)\" style=\"height: 20px;\">\n <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\n </div>\n }\n </div>\n </div>\n @if (labelInferior && isFocused) {\n <span class=\"label-inf\">{{labelInferior}}</span>\n }\n @if (labelInferior && !isFocused && isAlertText) {\n <span class=\"label-inf\" [ngClass]=\"{\n 'alert': !isFocused && isAlertText && !disabled\n }\">{{labelInferior}}</span>\n }\n @if (showList) {\n <div class=\"container-list scrollable-small\">\n <div (click)=\"onSelectOption()\">\n <ng-content selector=\"ius-option\"></ng-content>\n </div>\n </div>\n }\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;cursor:pointer;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}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.disabled{cursor:default;background:#f5f5f5}.container-textfield.disabled .icon-color,.container-textfield.disabled .icon-arrows,.container-textfield.disabled input{color:#bfbfbf}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}.container-textfield .icon-arrows{pointer-events:none}.container-textfield .icon-arrows svg{pointer-events:none}.icon-color{color:#595959}.icon-arrows{color:#333}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}.cnt-icon-right{display:flex;align-items:center;justify-content:center;background:none;padding:0;color:#333}.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}.container-list{position:absolute;max-height:144px;width:100%;display:flex;flex-direction:column;margin-top:4px;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;z-index:1000;overflow-y:auto}.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.scrollable-small::-webkit-scrollbar:vertical{width:4px;height:32px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar:horizontal{height:5px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar-thumb{background-color:#08a6db;border-radius:4px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
|
|
2542
2562
|
}], propDecorators: { componentId: [{
|
|
2543
2563
|
type: Input,
|
|
2544
2564
|
args: [{ required: true }]
|