@litigiovirtual/ius-design-components 1.0.65 → 1.0.67
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/button-circle-tertiary/button-circle-tertiary.component.mjs +3 -3
- package/esm2022/lib/directives/popover.directive.mjs +170 -0
- package/esm2022/lib/input-select/input-select.component.mjs +6 -3
- package/esm2022/lib/popover/popover.component.mjs +30 -0
- package/esm2022/lib/snackbar/index.mjs +2 -0
- package/esm2022/lib/snackbar/snackbar.component.mjs +53 -0
- package/esm2022/public-api.mjs +4 -1
- package/fesm2022/litigiovirtual-ius-design-components.mjs +251 -7
- package/fesm2022/litigiovirtual-ius-design-components.mjs.map +1 -1
- package/lib/directives/popover.directive.d.ts +41 -0
- package/lib/popover/popover.component.d.ts +10 -0
- package/lib/snackbar/index.d.ts +1 -0
- package/lib/snackbar/snackbar.component.d.ts +19 -0
- package/package.json +1 -1
- package/public-api.d.ts +2 -0
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, Component, EventEmitter, Output, HostListener, ViewChildren } from '@angular/core';
|
|
2
|
+
import { Input, Component, EventEmitter, Output, HostListener, ViewChildren, HostBinding, inject, ViewContainerRef, ElementRef, Directive } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/platform-browser';
|
|
6
6
|
import { trigger, state, transition, style, animate } from '@angular/animations';
|
|
7
7
|
import * as i2 from '@angular/cdk/overlay';
|
|
8
|
-
import { OverlayModule } from '@angular/cdk/overlay';
|
|
8
|
+
import { OverlayModule, Overlay } from '@angular/cdk/overlay';
|
|
9
9
|
import * as i1$2 from '@angular/forms';
|
|
10
10
|
import { FormsModule } from '@angular/forms';
|
|
11
11
|
import * as i1$3 from '@angular/router';
|
|
12
|
+
import { ComponentPortal } from '@angular/cdk/portal';
|
|
12
13
|
|
|
13
14
|
const ICONS = {
|
|
14
15
|
'icon-add': `
|
|
@@ -1281,11 +1282,11 @@ class ButtonCircleTertiaryComponent {
|
|
|
1281
1282
|
}
|
|
1282
1283
|
}
|
|
1283
1284
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonCircleTertiaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1284
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ButtonCircleTertiaryComponent, isStandalone: true, selector: "ius-button-circle-tertiary", inputs: { disabled: "disabled", iconName: "iconName" }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "<button [disabled]=\"disabled\" (click)=\"onClick()\" class=\"ius-btn\">\r\n <ius-icon-sm [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-sm>\r\n</button>\r\n", styles: [".icon-color{color:#333}.ius-btn{display:inline-flex;padding:12px;justify-content:center;align-items:center;gap:4px;border-radius:100px;border:none;background-color
|
|
1285
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ButtonCircleTertiaryComponent, isStandalone: true, selector: "ius-button-circle-tertiary", inputs: { disabled: "disabled", iconName: "iconName" }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "<button [disabled]=\"disabled\" (click)=\"onClick()\" class=\"ius-btn\">\r\n <ius-icon-sm [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-sm>\r\n</button>\r\n", styles: [".icon-color{color:#333}.ius-btn{display:inline-flex;padding:12px;justify-content:center;align-items:center;gap:4px;border-radius:100px;border:none;background-color:transparent;cursor:pointer}.ius-btn:hover:not(:disabled){background-color:#eaeaea}.ius-btn:active:not(:disabled){background-color:#02457f}.ius-btn:active:not(:disabled) .icon-color{color:#fff}.ius-btn:disabled{background-color:#fff;cursor:not-allowed}.ius-btn:disabled .icon-color{color:#bfbfbf}\n"], dependencies: [{ kind: "component", type: IconSmComponent, selector: "ius-icon-sm", inputs: ["iconName", "color"] }] }); }
|
|
1285
1286
|
}
|
|
1286
1287
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonCircleTertiaryComponent, decorators: [{
|
|
1287
1288
|
type: Component,
|
|
1288
|
-
args: [{ selector: 'ius-button-circle-tertiary', standalone: true, imports: [IconSmComponent], template: "<button [disabled]=\"disabled\" (click)=\"onClick()\" class=\"ius-btn\">\r\n <ius-icon-sm [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-sm>\r\n</button>\r\n", styles: [".icon-color{color:#333}.ius-btn{display:inline-flex;padding:12px;justify-content:center;align-items:center;gap:4px;border-radius:100px;border:none;background-color
|
|
1289
|
+
args: [{ selector: 'ius-button-circle-tertiary', standalone: true, imports: [IconSmComponent], template: "<button [disabled]=\"disabled\" (click)=\"onClick()\" class=\"ius-btn\">\r\n <ius-icon-sm [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-sm>\r\n</button>\r\n", styles: [".icon-color{color:#333}.ius-btn{display:inline-flex;padding:12px;justify-content:center;align-items:center;gap:4px;border-radius:100px;border:none;background-color:transparent;cursor:pointer}.ius-btn:hover:not(:disabled){background-color:#eaeaea}.ius-btn:active:not(:disabled){background-color:#02457f}.ius-btn:active:not(:disabled) .icon-color{color:#fff}.ius-btn:disabled{background-color:#fff;cursor:not-allowed}.ius-btn:disabled .icon-color{color:#bfbfbf}\n"] }]
|
|
1289
1290
|
}], propDecorators: { disabled: [{
|
|
1290
1291
|
type: Input
|
|
1291
1292
|
}], iconName: [{
|
|
@@ -2371,6 +2372,9 @@ class InputSelectComponent {
|
|
|
2371
2372
|
this.onChangesValueEvent.emit(this.textInput);
|
|
2372
2373
|
}
|
|
2373
2374
|
onFocus() {
|
|
2375
|
+
if (this.disabled) {
|
|
2376
|
+
return;
|
|
2377
|
+
}
|
|
2374
2378
|
this.isFocused = true;
|
|
2375
2379
|
this.showList = true;
|
|
2376
2380
|
this.hasClickedInside = true;
|
|
@@ -2404,11 +2408,11 @@ class InputSelectComponent {
|
|
|
2404
2408
|
this.isAlertText = false;
|
|
2405
2409
|
}
|
|
2406
2410
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2407
|
-
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" }, outputs: { onChangesValueEvent: "onChangesValueEvent", onAddText: "onAddText" }, 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=\"text\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\" (input)=\"onInput()\"\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keypress)=\"onKeyPress($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 <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\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{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}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
2411
|
+
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" }, outputs: { onChangesValueEvent: "onChangesValueEvent", onAddText: "onAddText" }, 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=\"text\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\" (input)=\"onInput()\"\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keypress)=\"onKeyPress($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 <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\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}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
2408
2412
|
}
|
|
2409
2413
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectComponent, decorators: [{
|
|
2410
2414
|
type: Component,
|
|
2411
|
-
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=\"text\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\" (input)=\"onInput()\"\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keypress)=\"onKeyPress($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 <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\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{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}\n"] }]
|
|
2415
|
+
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=\"text\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\" (input)=\"onInput()\"\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keypress)=\"onKeyPress($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 <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\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}\n"] }]
|
|
2412
2416
|
}], propDecorators: { componentId: [{
|
|
2413
2417
|
type: Input,
|
|
2414
2418
|
args: [{ required: true }]
|
|
@@ -3516,9 +3520,249 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3516
3520
|
args: ['otpInput']
|
|
3517
3521
|
}] } });
|
|
3518
3522
|
|
|
3523
|
+
class SnackbarComponent {
|
|
3524
|
+
constructor() {
|
|
3525
|
+
this.showClose = false;
|
|
3526
|
+
this.variant = 'notification';
|
|
3527
|
+
// Cerrar automáticamente en ms. 0 = no cierra solo
|
|
3528
|
+
this.duration = 0;
|
|
3529
|
+
this.closed = new EventEmitter();
|
|
3530
|
+
this.clickAction = new EventEmitter();
|
|
3531
|
+
}
|
|
3532
|
+
ngOnInit() {
|
|
3533
|
+
if (this.duration > 0) {
|
|
3534
|
+
this.timer = setTimeout(() => this.close(), this.duration);
|
|
3535
|
+
}
|
|
3536
|
+
}
|
|
3537
|
+
ngOnDestroy() {
|
|
3538
|
+
if (this.timer) {
|
|
3539
|
+
clearTimeout(this.timer);
|
|
3540
|
+
}
|
|
3541
|
+
}
|
|
3542
|
+
close() {
|
|
3543
|
+
this.closed.emit();
|
|
3544
|
+
}
|
|
3545
|
+
onclickAction() {
|
|
3546
|
+
this.clickAction.emit();
|
|
3547
|
+
}
|
|
3548
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3549
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SnackbarComponent, isStandalone: true, selector: "ius-snackbar", inputs: { label: "label", content: "content", showClose: "showClose", variant: "variant", duration: "duration" }, outputs: { closed: "closed", clickAction: "clickAction" }, ngImport: i0, template: "<div class=\"ctn-snack\" [ngClass]=\"variant\">\r\n <div class=\"row-title\">\r\n <ius-icon-md iconName=\"icon-error\" class=\"icon-error\" [ngClass]=\"variant\"></ius-icon-md>\r\n <span class=\"label-large\">{{label}}</span>\r\n @if(showClose){\r\n <ius-button-circle-tertiary iconName=\"icon-cancel\"></ius-button-circle-tertiary>\r\n }\r\n </div>\r\n <span class=\"txt-content\">{{content}}</span>\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}.ctn-snack{position:relative;display:flex;padding:24px;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;width:304px;color:#333;border-radius:8px}.ctn-snack:hover{box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ctn-snack.notification{border:1px solid #d9d9d9;background:#fff}.ctn-snack.error{border:1px solid #FFA788;background:#fff4f0}.ctn-snack.warning{border:1px solid #FFC83F;background:#fffbe6}.ctn-snack.info{border:1px solid #5892FF;background:#edf6ff}.ctn-snack.success{border:1px solid #BAE062;background:#f9ffe3}.row-title{display:flex;align-items:center;gap:8px;width:100%}.row-title span{display:flex;align-items:center;flex:1 0 0}.icon-error{color:#184fdb}.icon-error.error{color:#db2e2a}.icon-error.warning{color:#db8e00}.icon-error.success{color:#7caf25}.txt-content{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "component", type: ButtonCircleTertiaryComponent, selector: "ius-button-circle-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
3550
|
+
}
|
|
3551
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SnackbarComponent, decorators: [{
|
|
3552
|
+
type: Component,
|
|
3553
|
+
args: [{ selector: 'ius-snackbar', standalone: true, imports: [IconMdComponent, ButtonCircleTertiaryComponent, CommonModule], template: "<div class=\"ctn-snack\" [ngClass]=\"variant\">\r\n <div class=\"row-title\">\r\n <ius-icon-md iconName=\"icon-error\" class=\"icon-error\" [ngClass]=\"variant\"></ius-icon-md>\r\n <span class=\"label-large\">{{label}}</span>\r\n @if(showClose){\r\n <ius-button-circle-tertiary iconName=\"icon-cancel\"></ius-button-circle-tertiary>\r\n }\r\n </div>\r\n <span class=\"txt-content\">{{content}}</span>\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}.ctn-snack{position:relative;display:flex;padding:24px;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;width:304px;color:#333;border-radius:8px}.ctn-snack:hover{box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ctn-snack.notification{border:1px solid #d9d9d9;background:#fff}.ctn-snack.error{border:1px solid #FFA788;background:#fff4f0}.ctn-snack.warning{border:1px solid #FFC83F;background:#fffbe6}.ctn-snack.info{border:1px solid #5892FF;background:#edf6ff}.ctn-snack.success{border:1px solid #BAE062;background:#f9ffe3}.row-title{display:flex;align-items:center;gap:8px;width:100%}.row-title span{display:flex;align-items:center;flex:1 0 0}.icon-error{color:#184fdb}.icon-error.error{color:#db2e2a}.icon-error.warning{color:#db8e00}.icon-error.success{color:#7caf25}.txt-content{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}\n"] }]
|
|
3554
|
+
}], propDecorators: { label: [{
|
|
3555
|
+
type: Input
|
|
3556
|
+
}], content: [{
|
|
3557
|
+
type: Input
|
|
3558
|
+
}], showClose: [{
|
|
3559
|
+
type: Input
|
|
3560
|
+
}], variant: [{
|
|
3561
|
+
type: Input
|
|
3562
|
+
}], duration: [{
|
|
3563
|
+
type: Input
|
|
3564
|
+
}], closed: [{
|
|
3565
|
+
type: Output
|
|
3566
|
+
}], clickAction: [{
|
|
3567
|
+
type: Output
|
|
3568
|
+
}] } });
|
|
3569
|
+
|
|
3570
|
+
class PopoverComponent {
|
|
3571
|
+
constructor() {
|
|
3572
|
+
this.label = '';
|
|
3573
|
+
this.content = '';
|
|
3574
|
+
this.positionClass = 'tail-left';
|
|
3575
|
+
this.role = 'tooltip';
|
|
3576
|
+
}
|
|
3577
|
+
get hostClass() { return this.positionClass; }
|
|
3578
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3579
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PopoverComponent, isStandalone: true, selector: "ius-popover", inputs: { label: "label", content: "content", positionClass: "positionClass" }, host: { properties: { "class": "this.hostClass", "attr.role": "this.role" } }, ngImport: i0, template: "<div class=\"popover-bubble\">\r\n @if(label){\r\n <span class=\"caption-sm\">{{ label }}</span>\r\n }\r\n @if(content){\r\n <span class=\"body-sm\">{{ content }}</span>\r\n }\r\n</div>", styles: ["@charset \"UTF-8\";.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}:host{display:block;max-width:150px}.popover-bubble{position:relative;display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a}.popover-bubble:before{content:\"\";position:absolute;width:0;height:0;filter:drop-shadow(0 1px 1px rgba(0,0,0,.06))}:host(.tail-left) .popover-bubble:before{left:-8px;top:calc(50% - 8px);border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid #ffffff}:host(.tail-right) .popover-bubble:before{right:-8px;top:calc(50% - 8px);border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid #ffffff}:host(.tail-bottom) .popover-bubble:before{left:calc(50% - 8px);bottom:-8px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #ffffff}:host(.tail-top) .popover-bubble:before{left:calc(50% - 8px);top:-8px;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #ffffff}\n"] }); }
|
|
3580
|
+
}
|
|
3581
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
3582
|
+
type: Component,
|
|
3583
|
+
args: [{ selector: 'ius-popover', standalone: true, imports: [], template: "<div class=\"popover-bubble\">\r\n @if(label){\r\n <span class=\"caption-sm\">{{ label }}</span>\r\n }\r\n @if(content){\r\n <span class=\"body-sm\">{{ content }}</span>\r\n }\r\n</div>", styles: ["@charset \"UTF-8\";.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}:host{display:block;max-width:150px}.popover-bubble{position:relative;display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a}.popover-bubble:before{content:\"\";position:absolute;width:0;height:0;filter:drop-shadow(0 1px 1px rgba(0,0,0,.06))}:host(.tail-left) .popover-bubble:before{left:-8px;top:calc(50% - 8px);border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid #ffffff}:host(.tail-right) .popover-bubble:before{right:-8px;top:calc(50% - 8px);border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid #ffffff}:host(.tail-bottom) .popover-bubble:before{left:calc(50% - 8px);bottom:-8px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #ffffff}:host(.tail-top) .popover-bubble:before{left:calc(50% - 8px);top:-8px;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #ffffff}\n"] }]
|
|
3584
|
+
}], propDecorators: { label: [{
|
|
3585
|
+
type: Input
|
|
3586
|
+
}], content: [{
|
|
3587
|
+
type: Input
|
|
3588
|
+
}], positionClass: [{
|
|
3589
|
+
type: Input
|
|
3590
|
+
}], hostClass: [{
|
|
3591
|
+
type: HostBinding,
|
|
3592
|
+
args: ['class']
|
|
3593
|
+
}], role: [{
|
|
3594
|
+
type: HostBinding,
|
|
3595
|
+
args: ['attr.role']
|
|
3596
|
+
}] } });
|
|
3597
|
+
|
|
3598
|
+
class PopoverDirective {
|
|
3599
|
+
constructor() {
|
|
3600
|
+
this.overlay = inject(Overlay);
|
|
3601
|
+
this.vcr = inject(ViewContainerRef);
|
|
3602
|
+
this.hostEl = inject((ElementRef));
|
|
3603
|
+
this.overHost = false;
|
|
3604
|
+
this.overOverlay = false;
|
|
3605
|
+
this.isOpen = false;
|
|
3606
|
+
// Opcionales
|
|
3607
|
+
this.iusPopoverPosition = ['right', 'left', 'top', 'bottom'];
|
|
3608
|
+
this.iusPopoverOpenDelay = 400;
|
|
3609
|
+
this.iusPopoverCloseDelay = 200;
|
|
3610
|
+
}
|
|
3611
|
+
// Eventos host
|
|
3612
|
+
_enterHost() { this.overHost = true; this.show(); }
|
|
3613
|
+
_focusHost() { this.overHost = true; this.show(); }
|
|
3614
|
+
_leaveHost() { this.overHost = false; this.hide(); }
|
|
3615
|
+
_blurHost() { this.overHost = false; this.hide(); }
|
|
3616
|
+
ngOnDestroy() { this.dispose(); }
|
|
3617
|
+
getPositions() {
|
|
3618
|
+
const order = Array.isArray(this.iusPopoverPosition)
|
|
3619
|
+
? this.iusPopoverPosition : [this.iusPopoverPosition];
|
|
3620
|
+
const map = {
|
|
3621
|
+
left: { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -10 },
|
|
3622
|
+
right: { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 10 },
|
|
3623
|
+
top: { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -10 },
|
|
3624
|
+
bottom: { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 10 },
|
|
3625
|
+
};
|
|
3626
|
+
const all = ['left', 'right', 'top', 'bottom'].map(p => map[p]);
|
|
3627
|
+
const preferred = order.map(p => map[p]).filter(Boolean);
|
|
3628
|
+
return [...preferred, ...all];
|
|
3629
|
+
}
|
|
3630
|
+
ensureOverlay() {
|
|
3631
|
+
if (this.overlayRef)
|
|
3632
|
+
return this.overlayRef;
|
|
3633
|
+
const strategy = this.overlay.position()
|
|
3634
|
+
.flexibleConnectedTo(this.hostEl)
|
|
3635
|
+
.withPositions(this.getPositions())
|
|
3636
|
+
.withFlexibleDimensions(false)
|
|
3637
|
+
.withViewportMargin(8)
|
|
3638
|
+
.withPush(true);
|
|
3639
|
+
this.overlayRef = this.overlay.create({
|
|
3640
|
+
positionStrategy: strategy,
|
|
3641
|
+
hasBackdrop: false,
|
|
3642
|
+
panelClass: 'ius-popover-panel',
|
|
3643
|
+
scrollStrategy: this.overlay.scrollStrategies.reposition(),
|
|
3644
|
+
});
|
|
3645
|
+
const el = this.overlayRef.overlayElement;
|
|
3646
|
+
el.addEventListener('mouseenter', () => { this.overOverlay = true; clearTimeout(this.closeT); });
|
|
3647
|
+
el.addEventListener('mouseleave', () => { this.overOverlay = false; this.hide(); });
|
|
3648
|
+
// Cuando CDK re-posiciona, recalculamos el lado real y seteamos la clase de cola
|
|
3649
|
+
strategy.positionChanges.subscribe(() => {
|
|
3650
|
+
if (this.compRef && this.overlayRef) {
|
|
3651
|
+
const cls = this.computeTailFromRects();
|
|
3652
|
+
this.compRef.instance.positionClass = cls;
|
|
3653
|
+
this.compRef.changeDetectorRef.markForCheck();
|
|
3654
|
+
}
|
|
3655
|
+
});
|
|
3656
|
+
return this.overlayRef;
|
|
3657
|
+
}
|
|
3658
|
+
// Decide el lado de la cola comparando rects reales del host vs overlay
|
|
3659
|
+
computeTailFromRects() {
|
|
3660
|
+
const host = this.hostEl.nativeElement.getBoundingClientRect();
|
|
3661
|
+
const pane = this.overlayRef.overlayElement.getBoundingClientRect();
|
|
3662
|
+
const dLeft = Math.abs(pane.right - host.left); // popover a la IZQUIERDA
|
|
3663
|
+
const dRight = Math.abs(pane.left - host.right); // popover a la DERECHA
|
|
3664
|
+
const dTop = Math.abs(pane.bottom - host.top); // popover ARRIBA
|
|
3665
|
+
const dBot = Math.abs(pane.top - host.bottom); // popover ABAJO
|
|
3666
|
+
const min = Math.min(dLeft, dRight, dTop, dBot);
|
|
3667
|
+
if (min === dRight)
|
|
3668
|
+
return 'tail-left'; // popover a la DERECHA -> cola IZQUIERDA
|
|
3669
|
+
if (min === dLeft)
|
|
3670
|
+
return 'tail-right'; // popover a la IZQUIERDA -> cola DERECHA
|
|
3671
|
+
if (min === dBot)
|
|
3672
|
+
return 'tail-top'; // popover ABAJO -> cola ARRIBA
|
|
3673
|
+
return 'tail-bottom'; // popover ARRIBA -> cola ABAJO
|
|
3674
|
+
}
|
|
3675
|
+
show() {
|
|
3676
|
+
clearTimeout(this.closeT);
|
|
3677
|
+
if (this.isOpen)
|
|
3678
|
+
return;
|
|
3679
|
+
this.openT = setTimeout(() => {
|
|
3680
|
+
const overlayRef = this.ensureOverlay();
|
|
3681
|
+
if (!this.portal)
|
|
3682
|
+
this.portal = new ComponentPortal(PopoverComponent, this.vcr);
|
|
3683
|
+
if (!overlayRef.hasAttached()) {
|
|
3684
|
+
this.compRef = overlayRef.attach(this.portal);
|
|
3685
|
+
this.compRef.instance.label = this.data?.title ?? this.title ?? '';
|
|
3686
|
+
this.compRef.instance.content = this.data?.content ?? this.content ?? '';
|
|
3687
|
+
}
|
|
3688
|
+
overlayRef.updatePosition();
|
|
3689
|
+
// Tras el layout real, calculamos la cola exacta
|
|
3690
|
+
setTimeout(() => {
|
|
3691
|
+
if (this.compRef && this.overlayRef) {
|
|
3692
|
+
this.compRef.instance.positionClass = this.computeTailFromRects();
|
|
3693
|
+
this.compRef.changeDetectorRef.markForCheck();
|
|
3694
|
+
}
|
|
3695
|
+
});
|
|
3696
|
+
this.isOpen = true;
|
|
3697
|
+
}, this.iusPopoverOpenDelay);
|
|
3698
|
+
}
|
|
3699
|
+
hide() {
|
|
3700
|
+
clearTimeout(this.openT);
|
|
3701
|
+
if (this.overHost || this.overOverlay)
|
|
3702
|
+
return;
|
|
3703
|
+
this.closeT = setTimeout(() => {
|
|
3704
|
+
if (this.overlayRef?.hasAttached())
|
|
3705
|
+
this.overlayRef.detach();
|
|
3706
|
+
this.isOpen = false;
|
|
3707
|
+
this.compRef = undefined;
|
|
3708
|
+
}, this.iusPopoverCloseDelay);
|
|
3709
|
+
}
|
|
3710
|
+
forceClose() {
|
|
3711
|
+
this.overHost = this.overOverlay = false;
|
|
3712
|
+
clearTimeout(this.openT);
|
|
3713
|
+
clearTimeout(this.closeT);
|
|
3714
|
+
if (this.overlayRef?.hasAttached())
|
|
3715
|
+
this.overlayRef.detach();
|
|
3716
|
+
this.isOpen = false;
|
|
3717
|
+
this.compRef = undefined;
|
|
3718
|
+
}
|
|
3719
|
+
dispose() {
|
|
3720
|
+
this.forceClose();
|
|
3721
|
+
this.overlayRef?.dispose();
|
|
3722
|
+
this.overlayRef = undefined;
|
|
3723
|
+
}
|
|
3724
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3725
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: PopoverDirective, isStandalone: true, selector: "[iusPopover], [iusPopoverTitle], [iusPopoverContent]", inputs: { data: ["iusPopover", "data"], title: ["iusPopoverTitle", "title"], content: ["iusPopoverContent", "content"], iusPopoverPosition: "iusPopoverPosition", iusPopoverOpenDelay: "iusPopoverOpenDelay", iusPopoverCloseDelay: "iusPopoverCloseDelay" }, host: { listeners: { "keydown.Escape": "forceClose()", "mouseenter": "_enterHost()", "focusin": "_focusHost()", "mouseleave": "_leaveHost()", "focusout": "_blurHost()" } }, ngImport: i0 }); }
|
|
3726
|
+
}
|
|
3727
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PopoverDirective, decorators: [{
|
|
3728
|
+
type: Directive,
|
|
3729
|
+
args: [{
|
|
3730
|
+
selector: '[iusPopover], [iusPopoverTitle], [iusPopoverContent]',
|
|
3731
|
+
standalone: true,
|
|
3732
|
+
host: { '(keydown.Escape)': 'forceClose()' }
|
|
3733
|
+
}]
|
|
3734
|
+
}], propDecorators: { data: [{
|
|
3735
|
+
type: Input,
|
|
3736
|
+
args: ['iusPopover']
|
|
3737
|
+
}], title: [{
|
|
3738
|
+
type: Input,
|
|
3739
|
+
args: ['iusPopoverTitle']
|
|
3740
|
+
}], content: [{
|
|
3741
|
+
type: Input,
|
|
3742
|
+
args: ['iusPopoverContent']
|
|
3743
|
+
}], iusPopoverPosition: [{
|
|
3744
|
+
type: Input
|
|
3745
|
+
}], iusPopoverOpenDelay: [{
|
|
3746
|
+
type: Input
|
|
3747
|
+
}], iusPopoverCloseDelay: [{
|
|
3748
|
+
type: Input
|
|
3749
|
+
}], _enterHost: [{
|
|
3750
|
+
type: HostListener,
|
|
3751
|
+
args: ['mouseenter']
|
|
3752
|
+
}], _focusHost: [{
|
|
3753
|
+
type: HostListener,
|
|
3754
|
+
args: ['focusin']
|
|
3755
|
+
}], _leaveHost: [{
|
|
3756
|
+
type: HostListener,
|
|
3757
|
+
args: ['mouseleave']
|
|
3758
|
+
}], _blurHost: [{
|
|
3759
|
+
type: HostListener,
|
|
3760
|
+
args: ['focusout']
|
|
3761
|
+
}] } });
|
|
3762
|
+
|
|
3519
3763
|
/**
|
|
3520
3764
|
* Generated bundle index. Do not edit.
|
|
3521
3765
|
*/
|
|
3522
3766
|
|
|
3523
|
-
export { AvatarIconComponent, BadgeComponent, ButtonAuthComponent, ButtonCircleSecondaryComponent, ButtonCircleTertiaryComponent, ButtonDynamicComponent, ButtonSquaredSecondaryComponent, ButtonSquaredTertiaryComponent, ButtonStandardPrimaryComponent, ButtonStandardSecondaryComponent, ButtonStandardTertiaryComponent, ButtonStandardTertiarySmallComponent, CardDynamicContentComponent, CardListMovimientosComponent, CategoriesComponent, ChipUserComponent, CustomDropdownComponent, DateHourPickerComponent, DatePickerComponent, DoubleDatePickerComponent, DrawerContainerRightComponent, DropdownComponent, DropdownOptionItemComponent, DropdownUserMenuComponent, IconLgComponent, IconMdComponent, IconSmComponent, IconXlComponent, IconXsComponent, IconXxlComponent, InputOtpComponent, InputPasswordComponent, InputSelectComponent, InputSelectNumberComponent, InputTextfieldComponent, LinearProgressBarComponent, LoadingCircleComponent, MenuItemComponent, NavRailComponent, OptionComponent, SearchBarComponent, SectionCollapseDrawerChildComponent, SectionCollapseDrawerParentComponent, SimpleDividerComponent, SlideToggleComponent, ToolbarComponent, ToolbarUserMenuComponent };
|
|
3767
|
+
export { AvatarIconComponent, BadgeComponent, ButtonAuthComponent, ButtonCircleSecondaryComponent, ButtonCircleTertiaryComponent, ButtonDynamicComponent, ButtonSquaredSecondaryComponent, ButtonSquaredTertiaryComponent, ButtonStandardPrimaryComponent, ButtonStandardSecondaryComponent, ButtonStandardTertiaryComponent, ButtonStandardTertiarySmallComponent, CardDynamicContentComponent, CardListMovimientosComponent, CategoriesComponent, ChipUserComponent, CustomDropdownComponent, DateHourPickerComponent, DatePickerComponent, DoubleDatePickerComponent, DrawerContainerRightComponent, DropdownComponent, DropdownOptionItemComponent, DropdownUserMenuComponent, IconLgComponent, IconMdComponent, IconSmComponent, IconXlComponent, IconXsComponent, IconXxlComponent, InputOtpComponent, InputPasswordComponent, InputSelectComponent, InputSelectNumberComponent, InputTextfieldComponent, LinearProgressBarComponent, LoadingCircleComponent, MenuItemComponent, NavRailComponent, OptionComponent, PopoverDirective, SearchBarComponent, SectionCollapseDrawerChildComponent, SectionCollapseDrawerParentComponent, SimpleDividerComponent, SlideToggleComponent, SnackbarComponent, ToolbarComponent, ToolbarUserMenuComponent };
|
|
3524
3768
|
//# sourceMappingURL=litigiovirtual-ius-design-components.mjs.map
|